/* CSS Document                                                          */
/* Flexibles Grid-Layout der ARTICLE-Boxen innerhalb der SECTION-ROWS */
/* --------------------------------------------------------------------- */

/* Layout für Mobilgeräte: 480 px oder weniger. */
/* Einspaltiges Layout bei Smartphones          */
/* Die Prozentsätze wurden dem Buch "Flexible Boxes" von Peter Müller entnommen */

.grid1, .grid2, .grid3, .grid4, 
.grid5, .grid6, .grid7, .grid8, 
.grid9, .grid10,.grid11,.grid12
{
	float:left;
	margin-top:2.5%;
	margin-bottom:1.5%;
	margin-left:  1.041666666667%;
	margin-right: 1.041666666667%;
}

@media only screen and (max-width: 480px) {
.grid1, .grid2, .grid3, .grid4, 
.grid5, .grid6, .grid7, .grid8, 
.grid9, .grid10,.grid11,.grid12
{	
	width: 98% ; 
}
main {
	xbackground-color: #66FF00;} /* gruen */
}

/* --------------------------------------------------------------------- */
	
/* Layout für Tablet-PCs: 481 bis 768 px. Erbt Stile vom: Layout für Mobilgeräte. */
/* Zweispaltiges Layout bei Tablets                                               */
/* Die Prozentsätze wurden durch Probieren ermittelt. Don't touch.                */

@media only screen and (min-width: 481px) {
.grid1, .grid2, .grid3, .grid4, 
.grid5, .grid6, .grid7, .grid8, 
.grid9, .grid10,.grid11,.grid1

.grid1 { width: 47.916666666667%; ; }
.grid2 { width: 47.916666666667%; ; }
.grid3 { width: 47.916666666667%; ; }

.grid4 { width: 47.916666666667%; }
.grid5 { width: 47.916666666667% ; }
.grid6 { width: 47.916666666667% ; }

.grid7 { width: 47.916666666667%; }
.grid8 { width: 47.916666666667%; }
.grid9 { width: 47.916666666667%; }

.grid10 { width: 47.916666666667%;}
.grid11 { width: 47.916666666667%; }
.grid12 { width: 97.91666666667% ; }

main {	xbackground-color: #0099ff; } /* blau */
}

/* ---------------------------------------------------------------------- */
@media only screen and (min-width: 769px) {
/* Desktoplayout: 769 bis maximal 1232 px.  */
/* Erbt Stile von: den Layouts für Mobilgeräte und Tablet-PCs. */
/* Dreispaltiges Layout bei PCs          */

.grid1 { width: 6.25% ; }
.grid2 { width: 14.583333333333% ; }
.grid3 { width: 22.916666666667% ; }

.grid4 { width: 31.25% ; }
.grid5 { width: 39.583333333333% ; }
.grid6 { width: 47.916666666667% ; }

.grid7 { width: 56.25% ; }
.grid8 { width: 64.583333333333%; }
.grid9 { width: 72.916666666667%; }

.grid10 { width: 81.25% ; }
.grid11 { width: 89.58333333333% ; }
.grid12 { width: 97.91666666667% ; }

main {	xbackground-color: #FFD7BB; } /* rosa */
}