/*	
	CSS for christiantuermer.de/com,
	started 2004/11/26 Gustaf Mossakowski, <gustaf@koenige.org> 
	last update 2009/04/02
*/

html, body {height: 100%;}
body {font-family: Arial, sans-serif; margin: 0; padding: 0; 
	text-transform: lowercase; font-size: 90%;
	 margin: auto;  background-color: white; color: #888; }
#press, #error, #profile, #projects, #post, #post #nav ul, 
#products, #index {background-color: white; color: #BBB; }
#middle {height: 100%; width: 100%; text-align: center; /* text-align for IE 5 */}
#index #logo {display: none;}

#fields, h1 {font-size: 95%}

#product_overview {background-repeat: no-repeat;}

#canvas {width: 800px; height: 600px; margin: auto; position: relative; 
	text-align: left; /* text-align see above */}
 /* later on switch to em */

#logo {position: absolute; top: 480px; left: 418px; border: 0;}

h1 {position: absolute; top: 460px; left: 420px; margin: 0; color: #BBB; 
	font-weight: normal; text-transform: lowercase; font-size: 100%;}
#index h1 {top: 480px; left: 418px;}
#fields .abstand {padding-top: 40px; }

h2 {font-size: 100%; font-weight: normal;}
.subtitle {font-weight: normal; text-transform: lowercase;}
em.gross {text-transform: none; font-style: normal; font-size: 130%; }

h3 {font-weight: normal; font-size: 100%;}

th {font-weight: normal; text-align: left; width: 12em;}
td {text-transform: none;}
table.details {border-collapse: collapse; }
table.details td, table.details th {padding: .1em 0 0; text-transform: lowercase;}
table.details tr.spacer th, table.details tr.spacer td {padding-top: 1em;}

big {font-size: 160%;}
strong {font-weight: normal;}

address {font-style: normal;}

a:link {color: #888; text-decoration: none;} /* 555 */
a:visited, em {color: #888; text-decoration: none;}
em {font-style: normal;}

#language {position: absolute; right: 40px; text-transform: lowercase;
	bottom: 16px; margin: 0; padding: 0; height: 30px; line-height: 2.3em;}

#nav {position: absolute; bottom: 16px; left: 36px; width: 88%; padding: 0; margin: 0; list-style: none; 
	height: 30px; /* height f. Opera 6, = bottom + line-height ?! */ }
#nav a {text-decoration: none; }
#nav li {float: left; list-style: none; width: 19%; /* 24%*/ text-transform: lowercase;
	  position: relative; margin: 0; padding: 0; line-height: 2.3em;}
#nav li ul { padding: 0 0 0 0; position: absolute; left: 0; margin: 0; top: 100%;} /*   */
#nav li ul {display: none;}
#nav li#menu-Post ul {display: block;}
	/* Commented Backslash Hack
	   hides rule from IE5-Mac \*/
#nav li#menu-Post ul {display: none;}
	/* End IE5-Mac hack */
#nav li li {line-height: 1.4em; width: 100%;} /* for IE Mac */
	/* Commented Backslash Hack
	   hides rule from IE5-Mac \*/
#nav li li {line-height: 1.2em; float: none; }
	/* End IE5-Mac hack */
#nav li li a {padding: 0; margin: 0; padding-left: .5em;} /* padding-left fuer bessere klickbarkeit */
#nav li a { display: block; padding-left: .5em; white-space: nowrap; }
#nav li strong { display: block; padding-left: .5em; white-space: nowrap; }
/* #nav li > ul { top: auto; left: auto; }*/
#nav li#menu-Post:hover ul, #nav li#menu-Post.over ul, #nav li:hover ul, #nav li.over ul { display: block; }
#index #nav li {background: white;}

#fields {margin: 0; padding: 0; text-transform: lowercase;}

#fields .obj, #fields div, #fields p
	{position: absolute; width: 150px; height: 150px;}
#fields .obj a {background-position: 0 0; background-repeat: no-repeat;}
#fields .obj a:hover {background-position: 0 100%;}
#fields .pos {position: absolute; width: 150px; } /* width f. Opera 6 */
#fields div p {position: static; width: auto; height: auto;}
#fields li {list-style: none; position: relative; line-height: 1.2em;}
#fields ul {padding: 0; margin: 0;}
#fields li span {margin: auto; vertical-align: middle; text-align: center;}
#fields img {border: none;}
#fields a {text-decoration: none; }
ul#fields a {display: block; height: 100%; width: 100%; line-height: 150px; 
	height: 150px; /* height for Mac IE 5 doesn't interpret line-height*/}
#fields a span  {visibility: hidden; display: block; color: #666; 
	line-height: 1.2em; padding-top: 70px;
	/* padding wird bei hoeheren Grafiken ueberschrieben */}
#fields a:link:hover span,
#fields a:visited:hover span {visibility: visible;  
	margin: auto; text-align: center; }
#fields .allproducts a span {visibility: visible; padding-top: 344px;}
/* #fields a span strong {background: white; padding: 2px; border: 0px solid #888;} */

.farbkasten {border: 1px solid #999; width: .8em; height: .8em; display: block; float: left;
	margin-right: .5em;}
.farbkasten strong {display: none;}

/* presse */

#fields .p1 {top: 135px; left: 39px; width: 133px;}
#fields .p2 {top: 135px; left: 172px; width: 120px;}
#fields .p3 {top: 135px; left: 292px; width: 116px;}
#fields .p4 {top: 135px; left: 408px; width: 121px;}
#fields .p5 {top: 135px; left: 529px; width: 128px;}
#fields .p6 {top: 135px; left: 657px; width: 104px;}

#fields .a1 { top: 40px; left: 40px;}
#fields .a2 { top: 230px; left: 40px;}
#fields .a3 {top: 380px; left: 40px; text-align: left; width: 340px;}
#fields .a1a2 { top: 40px; left: 40px; height: 340px;}
#fields .a1b1 { top: 40px; left: 40px; width: 340px;}
#fields .a2b2 {top: 230px; left: 40px; text-align: right; width: 340px;}
#fields .a3b3 {top: 380px; left: 40px; text-align: center; width: 340px;}
#fields .a1a2b1b2, #fields .a1b2 {top: 40px; left: 40px; height: 340px; width: 340px; 
	vertical-align: bottom; text-align: center; line-height: 340px; }
#fields .a1a2b1b2-text {top: 40px; left: 40px; height: 340px; width: 340px; 
	vertical-align: bottom; text-align: left;}
#fields .a1a2b1b2 img { vertical-align: middle;}
#fields .a1d2 { top: 40px; left: 40px; width: 720px; height: 340px;}
#fields .a1d3 { top: 40px; left: 40px; width: 720px; height: 430px;}
#fields .a1c3 { top: 40px; left: 40px; width: 720px; height: 530px;}
#fields .a3c3 { top: 405px; left: 40px; width: 720px; }
#fields .a3c3 p {margin-top: 0;}

#fields .b1 { top: 40px; left: 230px;}
#fields .b2 { top: 230px; left: 230px;}
#fields .b3 {top: 380px; left: 230px; text-align: right;}
#fields .b1b2c1c2 {top: 40px; left: 230px; height: 340px; width: 340px; 
	vertical-align: bottom; text-align: center; line-height: 340px; }
#fields .b1c1 { top: 40px; left: 230px; width: 340px;}
#fields .b2c2 { top: 230px; left: 230px; width: 340px;}
#fields>.pos.b3 {text-align: left;} /* wg expliziter width-Angabe f. pos noetig */
#fields .b1b2 { top: 40px; left: 230px; height: 340px;}
#fields .b1d3 { top: 40px; left: 230px; height: 430px; width: 530px;}
#fields .a1d3 .b1d3 {top: 0; left: 190px; }
#fields .a1d3 .a1a3 {top: 0; left: 0; font-size:95%;}
#fields .b1b2c1c2d1d2 {top: 40px; left: 230px; height: 340px; width: 530px; 
	vertical-align: top; text-align: left; padding-right: 1em; overflow: auto;}

#fields .c1 { top: 40px; left: 420px;}
#fields .c2 { top: 230px; left: 420px;}
#fields .c3 {top: 380px; left: 420px; text-align: right;}
#fields .c1d1 {top: 40px; left: 420px; width: 340px;}
#fields .c1c2 {top: 40px; left: 420px; height: 340px;}
#fields .c2d2 {top: 230px; left: 420px; width: 340px;}
#fields .c3d3 {top: 380px; left: 420px; text-align: left; width: 340px; }
#fields .c4d4 {top: 490px; left: 420px; text-align: right; width: 269px; height: 120px;}
#fields .c1c2d1d2, #fields .c1d2 {top: 40px; left: 420px; height: 340px; width: 340px;}
#fields .c1d2 p {margin-top: 0;}
 
#fields .d1 { top: 40px; left: 610px;}
#fields .d2 { top: 230px; left: 610px;}
#fields .d3 {top: 380px; left: 610px; text-align: right;}
#fields .d1d2 { top: 40px; left: 610px; height: 340px; }

#fields .left {text-align: left;}
#fields .center {text-align: center;}
#fields .right {text-align: right;}

#fields p * {background-repeat: no-repeat; background-position: 50% 50%;}

.inaktiv {visibility: hidden; }
.uebergross {margin-top: -40px;}

/* projects */

#projectlist {position: absolute;}
#projectlist li {margin-bottom: .75em; width: 170px;}
#fields .detail {position: absolute; top: 0; left: -230px; 
	/* display: none;*/ }
#fields .detail li {text-align: right; width: 200px;}

.folge a {padding: .25em;}
.a3 a, .b3 a, .a3 span, .b3 span {padding: .25em;}

/* post */

form {border: 0;}
form table {border-collapse: collapse;}
form td, input, select, textarea
   { color:#BBBBBB; font-weight:normal; text-transform: lowercase;}
form td {padding-right: 5px;}
input, textarea { border: 0; color:#666; background-color: #BBB;}
.auswahl input {background-color: white; } /* funktioniert nicht im IE 5.2/Mac; Hintergrundfarbe immer wie Submit-Button */
input.radio  {background-color: #666;} 
.auswahl li {margin: 0; padding: 0;}
.formkurz { width:175px; height: 16px; }
.formlang { width:356px; height: 16px; }
textarea  { width:356px; }
td.submit {text-align: right;}

/* press */

.cover {padding-bottom: 4px;}
.press {padding-bottom: 40px;}

.dark {color: #888;}