@charset "utf-8";
/*

	This CSS File is the result of hard work so please respect the
  COPYRIGHT 2009 BY GSTALTIG GMBH [www.gstaltig.ch] - 
  You are not allowed to use this or any other css-files or parts
  of it that make this beautifull website come alive without our
  written permission. Of course you are very welcome to have a look
  at the way we've done the stuff and use the techniques in your own
  personal work - or in other words: you may look and learn,
  but don't copy and steal. Thank you.
   
  Please visit our website and drop us a note if you've got any 
  questions or if you're interested in hiring us. Because it's nice
  to now you're interested in the work we do, we would be glad to 
  offer you a one-time, non-cumulatable discount of 10% on your 
  next webproject. The only thing you have to do for this, is
  mention you've seen the CSS. This offer is for new customers 
  aswell as existing ones.

*/

/* BASIC STYLES */
.row {
	display: block;
	clear: both;
}
.col {
	float: left;
}
.right {
	float: right;
}
.center {
  margin-right: auto;
  margin-left: auto;
}
.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");
}