@charset "utf-8";
/* COPYRIGHT GSTALTIG GMBH */

/* BASIC STYLES */
.row {
	display: block;
	clear: both;
}
.col {
	float: left;
}
.right {
	float: right;
}
.clear {
	clear: both;
}

/* GRID 12 COLUMNS */
.grid12 .span0 	{ /* will be set by js */ }
.grid12 .span1	{ width: 80px; }
.grid12 .span2 	{ width: 160px; }
.grid12 .span3 	{ width: 240px; }
.grid12 .span4 	{ width: 320px; }
.grid12 .span5 	{ width: 400px; }
.grid12 .span6 	{ width: 480px; }
.grid12 .span7 	{ width: 560px; }
.grid12 .span8 	{ width: 640px; }
.grid12 .span9 	{ width: 720px; }
.grid12 .span10 { width: 800px; }
.grid12 .span11 { width: 880px; }
.grid12 .span12 { width: 960px; }
.grid12 .span13 { width: 960px; }
.grid12 .span14 { width: 960px; }
.grid12 .span15 { width: 960px; }
.grid12 .span16 { width: 960px; }

/* GRID 12 PREPEND GAP */
.grid12 .pre1		{ margin-left: 80px; }
.grid12 .pre2 	{ margin-left: 160px; }
.grid12 .pre3 	{ margin-left: 240px; }
.grid12 .pre4 	{ margin-left: 320px; }
.grid12 .pre5 	{ margin-left: 400px; }
.grid12 .pre6 	{ margin-left: 480px; }
.grid12 .pre7 	{ margin-left: 560px; }
.grid12 .pre8 	{ margin-left: 640px; }
.grid12 .pre9		{ margin-left: 720px; }
.grid12 .pre10	{ margin-left: 800px; }
.grid12 .pre11	{ margin-left: 880px; }
.grid12 .pre12	{ margin-left: 880px; }
.grid12 .pre13	{ margin-left: 880px; }
.grid12 .pre14	{ margin-left: 880px; }
.grid12 .pre15	{ margin-left: 880px; }
.grid12 .pre16	{ margin-left: 960px; }

/* GRID 12 APPEND GAP */
.grid12 .app1		{ margin-right: 80px; }
.grid12 .app2 	{ margin-right: 160px; }
.grid12 .app3 	{ margin-right: 240px; }
.grid12 .app4 	{ margin-right: 320px; }
.grid12 .app5 	{ margin-right: 400px; }
.grid12 .app6 	{ margin-right: 480px; }
.grid12 .app7 	{ margin-right: 560px; }
.grid12 .app8 	{ margin-right: 640px; }
.grid12 .app9		{ margin-right: 720px; }
.grid12 .app10	{ margin-right: 800px; }
.grid12 .app11	{ margin-right: 880px; }
.grid12 .app12	{ margin-right: 880px; }
.grid12 .app13	{ margin-right: 880px; }
.grid12 .app14	{ margin-right: 880px; }
.grid12 .app15	{ margin-right: 880px; }
.grid12 .app16	{ margin-right: 960px; }


/* GRID 16 COLUMNS */
.grid16 .span0 	{ /* will be set by js */ }
.grid16 .span1 	{ width: 60px; }
.grid16 .span2 	{ width: 120px; }
.grid16 .span3 	{ width: 180px; }
.grid16 .span4 	{ width: 240px; }
.grid16 .span5 	{ width: 300px; }
.grid16 .span6 	{ width: 360px; }
.grid16 .span7 	{ width: 420px; }
.grid16 .span8 	{ width: 480px; }
.grid16 .span9 	{ width: 540px; }
.grid16 .span10 { width: 600px; }
.grid16 .span11 { width: 660px; }
.grid16 .span12 { width: 720px; }
.grid16 .span13 { width: 780px; }
.grid16 .span14 { width: 840px; }
.grid16 .span15 { width: 900px; }
.grid16 .span16 { width: 960px; }

/* GRID 16 PREPEND GAP */
.grid16 .pre1 	{ margin-left: 60px; }
.grid16 .pre2 	{ margin-left: 120px; }
.grid16 .pre3 	{ margin-left: 180px; }
.grid16 .pre4 	{ margin-left: 240px; }
.grid16 .pre5 	{ margin-left: 300px; }
.grid16 .pre6 	{ margin-left: 360px; }
.grid16 .pre7 	{ margin-left: 420px; }
.grid16 .pre8 	{ margin-left: 480px; }
.grid16 .pre9 	{ margin-left: 540px; }
.grid16 .pre10 	{ margin-left: 600px; }
.grid16 .pre11 	{ margin-left: 660px; }
.grid16 .pre12 	{ margin-left: 720px; }
.grid16 .pre13 	{ margin-left: 780px; }
.grid16 .pre14 	{ margin-left: 840px; }
.grid16 .pre15 	{ margin-left: 900px; }
.grid16 .pre16 	{ margin-left: 960px; }

/* GRID 16 APPEND GAP */
.grid16 .app1 	{ margin-right: 60px; }
.grid16 .app2 	{ margin-right: 120px; }
.grid16 .app3 	{ margin-right: 180px; }
.grid16 .app4 	{ margin-right: 240px; }
.grid16 .app5 	{ margin-right: 300px; }
.grid16 .app6 	{ margin-right: 360px; }
.grid16 .app7 	{ margin-right: 420px; }
.grid16 .app8 	{ margin-right: 480px; }
.grid16 .app9 	{ margin-right: 540px; }
.grid16 .app10 	{ margin-right: 600px; }
.grid16 .app11 	{ margin-right: 660px; }
.grid16 .app12 	{ margin-right: 720px; }
.grid16 .app13 	{ margin-right: 780px; }
.grid16 .app14 	{ margin-right: 840px; }
.grid16 .app15 	{ margin-right: 900px; }
.grid16 .app16 	{ margin-right: 960px; }

/* debug styles */
.debug .row {
	border-top: 2px solid red;
	border-bottom: 2px solid red;
}
.debug .col {
	color: #000000;
}
.debug .gap {
	background-color: #CCCCCC;
}
.debug .grid12 .page  {
	background-image: url("grid12.PNG");
}
.debug .grid16 .page {
	background-image: url("grid16.PNG");
}