/*
11 maart 2013 herzien voor IE7:
- marge van 1.6 naar 1.59999
- kolomverdeling 1_12 t/m 12_12 terug naar kolomverdeling van responsivegridsystem.com ipv gridpak.com

*/

/* Styles voor Sections
--------------------------------------------------------------------*/
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/* Styles voor Groups vlakverdeling 
--------------------------------------------------------------------*/
.group:before,
.group:after {
    content:"";
    display:table;
}
.group:after {
    clear:both;
}
.group {
    zoom:1; /* Voor IE 6/7 (trigger hasLayout) */
}

/* Styles voor een basis kolom
--------------------------------------------------------------------*/
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.59999%;
	width:100%;
}

.col:first-child { margin-left: 0; } 	/* Verwijder de linkermarges van alle eerste kolommen na een clear */


/* Marges aanpassen bij het herschikken van kolommen vanaf 800px
--------------------------------------------------------------------*/
@media only screen and (max-width: 800px) {
	.col { 
		margin: 2% 0 2% 3.2%;
	}
}

/* Marges aanpassen bij het herschikken van kolommen voor 580px
--------------------------------------------------------------------*/
@media only screen and (max-width: 580px) {
	.col { 
		margin: 1% 0 1% 0;
	}
}

/*	Basis Stijlen voor 12 kolommen
--------------------------------------------------------------------*/

.span_1_of_12 {
	width: 6.86%;
}
.span_2_of_12 {
	width: 15.32%; 
}
.span_3_of_12 {
	width: 23.78%;
}
.span_4_of_12 {
	width: 32.24%; 
}
.span_5_of_12 {
	width: 40.7%; 
}
.span_6_of_12 {
	width: 49.16%; 
}
.span_7_of_12 {
	width: 57.62%; 
}
.span_8_of_12 {
	width: 66.08%;
}
.span_9_of_12 {
	width: 74.54%;
}
.span_10_of_12 {
	width: 83%;
}
.span_11_of_12 {
	width: 91.46%;
}
.span_12_of_12 {
	width:100%;
}

@media screen and (max-width: 800px) {
	.span_1_of_12 {
		width:5.4%;
	}
	.span_2_of_12 {
		width:14.0%;
	}
	.span_3_of_12 {
		width:22.6%;
	}
	.span_4_of_12 {
		width:31.2%;
	}
	.span_5_of_12 {
		width:39.8%;
	}
	.span_6_of_12 {
		width:48.4%;
	}
	.span_7_of_12 {
		width:57.0%;
	}
	.span_8_of_12 {
		width:65.6%;
	}
	.span_9_of_12 {
		width:74.2%;
	}
	.span_10_of_12 {
		width:82.8%;
	}
	.span_11_of_12 {
		width:91.4%;
	}
	.span_12_of_12 {
		width:100%;
	}
}

@media only screen and (max-width: 580px) {
	.span_11_of_12 {
		width: 100%; 
	}
	.span_10_of_12 {
		width: 100%; 
	}
	.span_9_of_12 {
		width: 100%; 
	}
	.span_8_of_12 {
		width: 100%; 
	}
	.span_7_of_12 {
		width: 100%; 
	}
	.span_6_of_12 {
		width: 100%; 
	}
	.span_5_of_12 {
		width: 100%; 
	}
	.span_4_of_12 {
		width: 100%; 
	}
	.span_3_of_12 {
		width: 100%; 
	}
	.span_2_of_12 {
		width: 100%; 
	}
	.span_1_of_12 {
		width: 100%; 
	}
}

/* 11 kolommen
--------------------------------------------------------------------*/
.span_1_of_11 {
	width: 7.63636363636%; 
}

@media screen and (max-width: 800px) {
	.span_1_of_11 {
		width: 22.6%;
	}
	.span_1_of_11:nth-child(4n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_11 {
		width: 100%; 
	}
}

/* 10 kolommen
--------------------------------------------------------------------*/
.span_1_of_10 {
	width: 8.56%; 
}

@media screen and (max-width: 800px) {
	.span_1_of_10 {
		width: 22.6%;
	}
	.span_1_of_10:nth-child(4n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_10 {
		width: 100%; 
	}
}

/* 9 kolommen
--------------------------------------------------------------------*/
.span_1_of_9 {
	width: 9.68888888889%; 
}

@media screen and (max-width: 800px) {
	.span_1_of_9 {
		width: 22.6%;
	}
	
	.span_1_of_9:nth-child(4n+1) {
		clear: both;
		margin-left: 0;
	}
} 

@media only screen and (max-width: 580px) {
	.span_1_of_9 {
		width: 100%; 
	}
}

/* 8 kolommen
--------------------------------------------------------------------*/
.span_1_of_8 {
	width: 11.1%; 
}

@media screen and (max-width: 800px) {
	.span_1_of_8 {
		width: 22.6%;
	}
	
	.span_1_of_8:nth-child(4n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_8 {
		width: 100%; 
	}
}

/* 7 kolommen
--------------------------------------------------------------------*/
.span_1_of_7 {
  	width: 12.9142857143%;
}

@media screen and (max-width: 800px) {
	.span_1_of_7 {
		width: 31.2%; 
	}
	
	.span_1_of_7:nth-child(3n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_7 {
		width: 100%; 
	}
}

/* 6 kolommen
--------------------------------------------------------------------*/
.span_1_of_6 {
  	width: 15.3333333333%;
}

@media screen and (max-width: 800px) {
	.span_1_of_6 {
		width: 31.2%;
	}
	
	.span_1_of_6:nth-child(3n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_6 {
		width: 100%; 
	}
}

/* 5 kolommen
--------------------------------------------------------------------*/
.span_1_of_5 {
  	width: 18.72%;
}

@media screen and (max-width: 800px) {
	.span_1_of_5 {
		width: 31.2%; 
	}
	
	.span_1_of_5:nth-child(3n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_5 {
		width: 100%; 
	}
}

/* 4 kolommen
--------------------------------------------------------------------*/
.span_1_of_4 {
	width: 23.8%;
}

@media screen and (max-width: 800px) {
	.span_1_of_4 {
		width: 48.4%;
	}
	
	.span_1_of_4:nth-child(2n+1) {
		clear: both;
		margin-left: 0;
	}
} 

@media screen and (max-width: 580px) {
	.span_1_of_4 {
		width: 100%; 
	}
}

/* 3 kolommen
--------------------------------------------------------------------*/
.span_1_of_3 {
	width:32.2666666667%;
}

@media screen and (max-width: 800px) {
	.span_1_of_3 {
		width: 48.4%;
	}
	
	.span_1_of_3:nth-child(2n+1) {
		clear: both;
		margin-left: 0;
	}
}

@media only screen and (max-width: 580px) {
	.span_1_of_3 {
		width: 100%;
	}
}

/* 2 kolommen
--------------------------------------------------------------------*/
.span_1_of_2 {
	width: 49.2%;
}

@media screen and (max-width: 800px) {
	
	.span_1_of_2 {
		width: 48.4%;
	}
}

@media screen and (max-width: 580px) {
	.span_1_of_2 {
		width: 100%; 
	}
}