/*
CSSGrid is a Responsive CSS Grid designed to work on web and mobile devices. (www.cssgrid.co)
Please don't steal. Support this grid and buy a license from: http://codecanyon.net/item/responsive-html5-css-grid/4928861

Columns Percentage, no padding between columns (p)

*/

.p1, /* set margins below all boxes, just for display purposes, delete this to make them sit flush */
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8
{
	padding-bottom:1%;
	padding-left:0px;
	padding-right:0px;
	margin:0px;
	margin-left:10px;
	margin-right:10px;
}


.p1, /* outer div width */
.p2,
.p3,
.p4,
.p5,
.p6,
.p7,
.p8 {
	width:auto;
}


.p1 .one {
	width:100%;
}


.p2 .one {
	width:50%;
	float:left;
	background-color:#ccced1;
}
.p2 .two {
	width:50%;
	margin-left:50%;
}

.p3 .one {
	width:33.333%;
	float:left;
	background-color:#ccced1;
}
.p3 .one-two {
	width:66.666%;
	float:left;
}
.p3 .two {
	width:33.333%;
	float:left;
}
.p3 .three {
	width:33.333%;
	margin-left:66.666%;
	background-color:#ccced1;
}
.p4 .one {
	width:25%;
	float:left;
}
.p4 .one-two {
	width:50%;
	float:left;
	background-color:#ccced1;
}
.p4 .one-three {
	width:75%;
	float:left;
}
.p4 .two {
	width:25%;
	float:left;
	background-color:#ccced1;
}
.p4 .two-three {
	width:50%;
	float:left;
	background-color:#ebeced;
}
.p4 .two-four {
	width:75%;
	margin-left:25%;
	background-color:#ccced1;
}
.p4 .three {
	width:25%;
	float:left;
}
.p4 .three-four {
	width:50%;
	margin-left:50%;
}
.p4 .four {
	width:25%;
	/*
	To set the correct position for the last column, add up all columns to the left.
	In this case there are 3 columns before the last one: 25 x 3 = 75
	*/
	margin-left:75%;
	background-color:#ccced1;
}


.p5 .one {
	width:20%;
	float:left;
}
.p5 .one-two {
	width:40%;
	float:left;
	background-color:#ccced1;
}
.p5 .one-three {
	width:60%;
	float:left;
}
.p5 .one-four {
	width:80%;
	float:left;
	background-color:#ccced1;
}
.p5 .two {
	width:20%;
	float:left;
	background-color:#ccced1;
}
.p5 .two-three {
	width:40%;
	float:left;
	background-color:#ebeced;
}
.p5 .two-four {
	width:60%;
	float:left;
	background-color:#ccced1;
}
.p5 .two-five {
	width:80%;
	margin-left:20%;
	background-color:#ccced1;
}
.p5 .three {
	width:20%;
	float:left;
}
.p5 .three-five {
	width:60%;
	margin-left:40%;
}
.p5 .four {
	width:20%;
	float:left;
	background-color:#ccced1;
}
.p5 .four-five {
	width:40%;
	margin-left:60%;
	background-color:#ccced1;
}
.p5 .five {
	width:20%;
	margin-left:80%;
}


.p6 .one {
	width:16.666666%;
	float:left;
}
.p6 .one-two {
	width:33.333%;
	float:left;
}
.p6 .one-three {
	width:50%;
	float:left;
}
.p6 .one-four {
	width:66.666%;
	float:left;
}
.p6 .one-five {
	width:83.333%;
	float:left;
}
.p6 .two {
	width:16.666%;
	float:left;
	background-color:#ccced1;
}
.p6 .two-three {
	width:33.333333%;
	float:left;
	background-color:#ebeced;
}
.p6 .two-four {
	width:50%;
	float:left;
	background-color:#ebeced;
}
.p6 .two-five {
	width:66.666%;
	float:left;
	background-color:#ebeced;
}
.p6 .two-six {
	width:83.333%;
	margin-left:16.666%;
	background-color:#ccced1;
}
.p6 .three {
	width:16.666%;
	float:left;
}
.p6 .three-four {
	width:33.333%;
	float:left;
	background-color:#ebeced;
}
.p6 .three-five {
	width:50%;
	float:left;
	background-color:#ebeced;
}
.p6 .three-six {
	width:66.666%;
	margin-left:33.333%;
	background-color:#ccced1;
}
.p6 .four {
	width:16.666%;
	float:left;
	background-color:#ccced1;
}
.p6 .four-five {
	width:33.333%;
	float:left;
	background-color:#ebeced;
}
.p6 .four-six {
	width:50%;
	margin-left:50%;
	background-color:#ccced1;
}
.p6 .five {
	width:16.666%;
	float:left;
}
.p6 .five-six {
	width:33.333%;
	margin-left:66.666%;
	background-color:#ccced1;
}
.p6 .six {
	width:16.666%;
	margin-left:83.333%;
	background-color:#ccced1;
}


.p7 .one {
	width:14.286%;
	float:left;
}
.p7 .one-two {
	width:28.571%;
	float:left;
}
.p7 .one-three {
	width:42.857%;
	float:left;
}
.p7 .one-four {
	width:57.143%;
	float:left;
}
.p7 .one-five {
	width:71.423%;
	float:left;
}
.p7 .one-six {
	width:85.714%;
	float:left;
	background-color:#ccced1;
}
.p7 .two {
	width:14.286%;
	float:left;
	background-color:#ccced1;
}
.p7 .two-three {
	width:28.571%;
	float:left;
	background-color:#ebeced;
}
.p7 .two-four {
	width:42.857%;
	float:left;
	background-color:#ebeced;
}
.p7 .two-five {
	width:57.143%;
	float:left;
	background-color:#ebeced;
}
.p7 .two-six {
	width:71.423%;
	float:left;
	background-color:#ebeced;
}
.p7 .two-seven {
	width:85.714%;
	margin-left:14.286%;
	background-color:#ccced1;
}
.p7 .three {
	width:14.286%;
	float:left;
}
.p7 .three-four {
	width:28.571%;
	float:left;
}
.p7 .three-five {
	width:42.857%;
	float:left;
	background-color:#ebeced;
}
.p7 .three-six {
	width:57.143%;
	float:left;
	background-color:#ebeced;
}
.p7 .three-seven {
	width:71.429%;
	margin-left:28.571%;
	background-color:#ccced1;
}
.p7 .four {
	width:14.286%;
	float:left;
	background-color:#ccced1;
}
.p7 .four-five {
	width:28.571%;
	float:left;
}
.p7 .four-seven {
	width:57.143%;
	margin-left:42.857%;
	background-color:#ccced1;
}
.p7 .five {
	width:14.286%;
	float:left;
}
.p7 .five-seven {
	width:42.857%;
	margin-left:57.143%;
	background-color:#ccced1;
}
.p7 .six {
	width:14.286%;
	float:left;
	background-color:#ccced1;
}
.p7 .six-seven {
	width:28.571%;
	margin-left:71.423%;
	background-color:#ccced1;
}
.p7 .seven {
	width:14.286%;
	margin-left:85.714%;
}


.p8 .one {
	width:12.5%;
	float:left;
}
.p8 .one-two {
	width:25%;
	float:left;
}
.p8 .one-three {
	width:37.5%;
	float:left;
}
.p8 .one-four {
	width:50%;
	float:left;
}
.p8 .one-five {
	width:62.5%;
	float:left;
}
.p8 .one-six {
	width:75%;
	float:left;
}
.p8 .one-seven {
	width:87.5%;
	float:left;
}
.p8 .two {
	width:12.5%;
	float:left;
	background-color:#ccced1;
}
.p8 .two-three {
	width:25%;
	float:left;
	background-color:#ccced1;
}
.p8 .two-four {
	width:37.5%;
	float:left;
	background-color:#ebeced;
}
.p8 .two-five {
	width:50%;
	float:left;
	background-color:#ebeced;
}
.p8 .two-six {
	width:62.5%;
	float:left;
	background-color:#ebeced;
}
.p8 .two-seven {
	width:75%;
	float:left;
	background-color:#ebeced;
}
.p8 .two-eight {
	width:87.5%;
	margin-left:12.5%;
	background-color:#ccced1;
}
.p8 .three {
	width:12.5%;
	float:left;
}
.p8 .three-four {
	width:25%;
	float:left;
	background-color:#ebeced;
}
.p8 .three-five {
	width:37.7%;
	float:left;
	background-color:#ebeced;
}
.p8 .three-six {
	width:50%;
	float:left;
	background-color:#ebeced;
}
.p8 .three-seven {
	width:62.5%;
	float:left;
	background-color:#ebeced;
}
.p8 .three-eight {
	width:75%;
	margin-left:25%;
	background-color:#ccced1;
}
.p8 .four {
	width:12.5%;
	float:left;
	background-color:#ccced1;
}
.p8 .four-five {
	width:25%;
	float:left;
	background-color:#ebeced;
}
.p8 .four-six {
	width:37.5%;
	float:left;
	background-color:#ebeced;
}
.p8 .four-seven {
	width:50%;
	float:left;
	background-color:#ebeced;
}
.p8 .four-eight {
	width:62.5%;
	margin-left:37.5%;
	background-color:#ccced1;
}
.p8 .five {
	width:12.5%;
	float:left;
}
.p8 .five-six {
	width:25%;
	float:left;
	background-color:#ebeced;
}
.p8 .five-seven {
	width:37.5%;
	float:left;
	background-color:#ebeced;
}
.p8 .five-eight {
	width:50%;
	margin-left:50%;
	background-color:#ccced1;
}
.p8 .six {
	width:12.5%;
	float:left;
	background-color:#ccced1;
}
.p8 .six-seven {
	width:25%;
	float:left;
}
.p8 .six-eight {
	width:37.5%;
	margin-left:62.5%;
	background-color:#ccced1;
}
.p8 .seven {
	width:12.5%;
	float:left;
}
.p8 .seven-eight {
	width:25%;
	margin-left:75%;
	background-color:#ccced1;
}
.p8 .eight {
	width:12.5%;
	margin-left:87.5%;
	background-color:#ccced1;
}