/**********************************************
           www.graphiks.info 2010
**********************************************/

/*=========================
Layout 
=========================*/

html {min-height:101%;  text-align: center;}
body { background: url(pics/basic/bodystart.jpg) left top repeat-x #fff; margin:0;}
	#pGame { background: url(pics/basic/bodystart.jpg) left -78px repeat-x #fff; }
body, tr, td, th {font-family: Verdana, Arial, Helvetica, sans-serif  ; 	font-size: 11px; 	color: #333; }

ul, li, p, ol, blockquote, dl, h1, h2, h3, h3, h4, h5, h6, dd, dt	{ margin:0; padding:0;}
li, dd, dt	{ list-style:none;}

/*layout ---------------------------------------------------------------------------------------------------------*/
#header	{ background:#008691;position:absolute;  width:100%; height:80px;text-align:left; top:0; display:block;}

	h1	{ position:relative; top:17px; height:50px; width:880px;  font-family:Arial, Helvetica, sans-serif;  font-size:2.3em; left:100px; text-indent:-9999px; background:url(pics/basic/h1.jpg) no-repeat; margin:0 auto;  }

#main	{position:relative; margin:0 auto; width:880px; height:auto; text-align:left; top:66px; }

	
	
	
#slogan	{ position:absolute; left:0; top:-64px; background: url(pics/basic/dimensionen_start.jpg)  no-repeat; width:74px; height:650px; z-index:300;   }
	#slogan a, #slogan a:visited	{  width:72px; height:139px; display:block; text-indent:-9999px; text-decoration:none; position:relative;}
	#slogan a.dimension	{ position:absolute; text-indent:0; bottom:0; width:auto; height:auto; display:block; font-weight:bold; font-size:0.85em; text-align:center;}
	
	#slogan #dimensionen	{ position:absolute; left:80px; top:166px; z-index:200; visibility:hidden; width:350px; height:auto; border:2px solid #333; background:#fff; padding:40px 25px;}
	#slogan #dimensionen a	{ position:relative; text-align:center; width:auto; height:auto; text-indent:0; bottom:auto; margin:15px 0; }

#navi	{ position:relative; left:100px; top:32px; width:780px;}
	#navi li	{ display:inline; margin:0 15px 0 0; font-family:Arial, Helvetica, sans-serif;  font-size:1.6em; text-transform:uppercase; float:left; padding-bottom:13px;}
	#navi li a, #navi li a:visited	{ color:#333; text-decoration:none; }
	#navi a:hover, #navi a:active	{ color:#008691;}
	#navi li#nENG, #navi li#nDE	{ float:right; margin:0 0 0 15px; width:33px; height:21px;}
		#navi li#nENG a, #navi li#nENG a:visited, #navi li#nDE a, #navi li#nDE a:visited	{ text-indent:-9999px; width:33px; height:21px; display:block; background:url(pics/basic/flagENG.jpg) no-repeat;}
		#navi li#nDE a, #navi li#nDE a:visited {background:url(pics/basic/flagDE.jpg) no-repeat;}

#content	{ position:relative; top:55px; width:780px; left:100px;  margin:0; min-height:550px; clear:both;}


#footer	{  color:#999; font-size:0.85em; position:relative; top:7px; }


/*=========================
Content 
=========================*/




/*markup*/

a, a:visited { outline:none; text-decoration:underline; color:#008691; }
a:hover, a:active { outline:none; text-decoration:underline; color:#333; }


p	{ margin:0 0 7px 0;}

h1 { /*logo, headline*/}	
h2 { font-size:1.5em; color:#008691; font-family:Arial, Helvetica, sans-serif; margin:0 0 15px 0; }
h3 { font-size:1.2em;  color:#008691; font-family:Arial, Helvetica, sans-serif; margin:0 0 7px 0;}
	h3.horizontal	{ padding-bottom:3px;  border-bottom:1px dashed #eee; margin-bottom:0; } 
h4 {  font-size:1.2em;  color:#333; font-family:Arial, Helvetica, sans-serif; margin:0 0 15px 0;}
h5 { /*listen*/ font-size:1.1em;}
h6 { font-size:1em;}

.clear	{ clear:both; height:1px;}
.border	{ border:1px solid #666;}

/*Content --------------------------------------------------------------------------------------*/

.contentbox, .newsbox	{ border:3px solid #d9d6d6; padding:15px; background:#fff; margin:0 0 20px 0; width:520px; min-height:150px;}
.contentbox	{ min-height:520px; margin-bottom:0; padding-bottom:68px; background:url(pics/basic/dimensionen.jpg) 10px bottom no-repeat #fff;  }
	* html .contentbox	{ height:520px;}
	* html .newsbox	{ height:175px;}


iframe	{ border:1px solid #ddd;}

#sidebar	{ position:absolute; width:200px; float:left; right:0; top:0; }

	.sidebarbox	{ border:3px solid #d9d6d6; padding:15px; background:#fff; margin:0 0 21px 0; min-height:155px;}
		* html .sidebarbox	{ height:155px;}


/*listen ------------------------------------------------------------------------------------------------------*/
.ulClassic 	{ margin:7px 0 7px 0px; padding:0;  }
.ulClassic li	{ margin: 0 0 7px 0; padding:0 0 0 12px; background: url(pics/basic/li_pt999.gif) left 2px no-repeat; }



/*tabellen --------------------------------------------------------------------------------------------------------*/
table	{ border-collapse:collapse; empty-cells:show; margin:15px 0;   }
td, th	{ padding:3px 12px 3px 0;   text-align:left; vertical-align:top; margin:0;}
tr.last td	{ padding-bottom:7px; border-bottom:1px dashed #ccc;}
th	{ font-weight:bold; background:#ccc;}



table.tbBorder 	{ border-left:1px solid #999; border-top:1px solid #999; background:#fff;}
.tbBorder td, .tbBorder th	{ padding:3px;  border-right:1px solid #999;  border-bottom:1px solid #999;}
.tbBorder th	{ background:0 none;}

table.horizontal tr td	{  padding:18px 0  ; vertical-align:top; empty-cells:show; border-bottom:1px dashed #ccc;}
table.horizontal tr td img	{ margin:0 25px 0 0;}
table.horizontal tr.last td	{ border:0 none;}
	#pUnternehmen tr td, pKontakt tr td	{ padding:3px 0;}


.tbCol1	{ text-align:left;}
.tbCol2, tbCol3	{ text-align:center;}



/*styles ------------------------------------------------------------------------------------------------------------*/
.flLe	{float:left; width:auto; height:auto; margin:0 20px 20px 0; }
.flRi	{float:right; width:auto; height:auto; margin:0 0 20px 20px; }
.border	{ border:1px solid #ccc;}

.liPDF, .liZIP, .liEmail  { display:block; background:url(pics/basic/logo_pdf.jpg) no-repeat; padding:0 0 10px 35px; text-decoration:none; outline:none; margin-bottom:10px;  width:auto;  white-space:nowrap; line-height:21px;}
.liZIP		{ background:url(pics/basic/logo_zip.gif) no-repeat;}
.liEmail	{ background:url(pics/basic/symb_mail.gif) no-repeat;}

/*=========================
Pages 
=========================*/


/*Markieren der aktuellen Hauptseite*/
#pIndex #nStart a, #pIndex #nStart a:visited,
#pLeistung #nLeistung a, #pLeistung #nLeistung a:visited,
#pProjekte #nProjekte a, #pProjekte #nProjekte a:visited,
#pReferenzen #nReferenzen a, #pReferenzen #nReferenzen a:visited,
#pUnternehmen #nUnternehmen a, #pUnternehmen #nUnternehmen a:visited,
#pKontakt #nKontakt , #pKontakt #nKontakt a:visited
{ color:#008691; text-decoration:none;}

#pIndex #nStart,
#pLeistung #nLeistung,
#pProjekte #nProjekte,
#pReferenzen #nReferenzen,
#pUnternehmen #nUnternehmen,
#pKontakt #nKontakt
{background:url(pics/basic/active_navi.jpg) bottom right no-repeat;}

/*Ausblenden der aktuellen Seite in der Subnavi der Sidebar*/
body.sn01 li.sn01, body.sn02 li.sn02, body.sn03 li.sn03, .sn04 li.sn04, .sn05 li.sn05, .sn05 li.sn05
{ display:none; }

/*Markieren aktuelles Projekt auf der Projekt-Detailseite*/

.sub01 .sn01 a, .sub01 .sn01 a:visited,
.sub02 .sn02 a, .sub02 .sn02 a:visited,
.sub03 .sn03 a, .sub03 .sn03 a:visited,
.sub04 .sn04 a, .sub04 .sn04 a:visited,
.sub05 .sn05 a, .sub05 .sn05 a:visited,
.sub06 .sn06 a, .sub06 .sn06 a:visited,
.sub07 .sn07 a, .sub07 .sn07 a:visited,
.sub08 .sn08 a, .sub08 .sn08 a:visited,
.sub09 .sn09 a, .sub09 .sn09 a:visited,
.sub10 .sn10 a, .sub10 .sn10 a:visited,
.sub11 .sn11 a, .sub11 .sn11 a:visited
{ text-decoration:none; color:#333; cursor:default;}


/*Startseite ---------------------------------------------------------*/

/*#pIndex #slogan	{ background: url(pics/basic/dimensionen_start.jpg)  no-repeat; }
*/

/*Fotoslide*/

#imageContainer, #waiter   { 	position:relative; 	width:520px; 	z-index:20;  border:3px solid #d9d6d6; padding:15px; background: url(pics/basic/loading.gif) center center no-repeat #fff; margin:0 0 20px 0; width:520px; height:236px;	}
#imageContainer img { 	 	position:absolute; 	top:15px; left:15px; width:520px; height:236px; display:none;   }

#pIndex .newsbox 	{  height:auto; min-height:20px; 	}
#pIndex .contentbox	{ min-height:250px;  }
	* html #pIndex .contentbox	{ height:250px;}
#pIndex #footer	{ position:relative; top:297px;}

	
	
/*Spiel -----------------------------------------------------------------*/

#pGame	{ padding:0 20px 20px 20px; text-align:center;}
#pGame h2	{ font-size:2em;}
#pGame table	{ margin:15px auto; }