/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
	/*	Folgende Farben werden verwendet:
	
	/*	body												color: #000000; - weiss
	/*	a													color: #777f7d; - grau wie Logo "Design"
	/*	a													color: #5a605e; - dunkelgrau fuer Infoboxen (JqueryBox)
	/*	a:hover												color: #000000; - schwarz
	/* 	.green, a.green 									color: #99cc00;	- gruen		
	/*	.orange, a.orange									color: #ffa722;	- orange
	/*	.white, a.white 									color: #ffffff; - weiss
	/*	.gray												color: #777f7d; - grau wie Logo "Design"
	/*	.startseite a 										color: #; - color depends on background image
	/*	.startseite a:hover									color: #; - color depends on background image
	/*	#projectnav ul li									color: #777f7d;	
	/*	#projectnav ul li.current a 						color: #ffa722;
	/*	#projectnav ul li.current a.infobox					color: #99cc00;
	/*	#page #header ul.mainnavigation li ul li a			color: #ffffff;
	/*	#page #header ul.mainnavigation li ul li a:hover	color: #99cc00;
	/*	.kontaktlink, a.kontaktlink 						color: #333366; - dunkelblau
	/*	.wirlink, a.wirlink									color: #ad0010; - rot
	*/
	
	

	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
	/* Supersize plugin (scalable background for "Start", "Wi"r and "Mitarbeit" */
		
	#supersize { position: fixed; z-index:-99;}
	#supersize img { height: 100%; width: 100%; display: inline; }
	
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Common styles */
		
	html, body {
		height: 100%; 														/* needed for DOCTYPE "-//W3C//DTD XHTML 1.0 Transitional//EN" */
	}
	html, body, ul  {  														/* reset defaults */
		margin: 0px; 
		padding: 0px;
	}
	
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
	/* common element style	and font settings */
		
	body {
		font-family: "Lucida Grande", "Lucida Sans Unicode", Verdana, Geneva, sans-serif;
		font-size: 13px;
		line-height: 18px;
		color: #000000;
		/* background-image: url(../image/raster-16_18.jpg);					If you are in doubt ... */
	}

	a {																		/* linkfarbe auf Weiss */
		color: #777f7d;	
		text-decoration: none;
	}
	a:hover { color: #000000;}												/* linkfarbe auf Weiss */
	a img { border-style: none; }											/* no border for images inside links */
	
	h1 {
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		margin: 0px;														/* reset default */
		padding-bottom: 4px;
		}
			.text {															/* for headlines in text columns */														
			padding-bottom: 14px;
		}
		
	h2 {																	/* h2 is needed for green sIFR-link-headlines */
		color: #99cc00;
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		margin: 0px;														
		padding-bottom: 4px;
	}
	h2 a {																	
		color: #99cc00;	
	}	
	h3 {																	/* h3 is needed for orange sIFR-link-headlines */
		color: #ffa722;
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		margin: 0px;														
		padding-bottom: 4px;
	}
	h3 a {																	
		color: #ffa722;
	}
	h4 {																	/* h4 is needed for gray sIFR-link-headlines */
		color: #777f7d;
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		margin: 0px;														
		padding-bottom: 4px;
	}
	h5 {																	/* h5 is needed for white sIFR-link-headlines */
		color: #fff;
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		margin: 0px;														
		padding-bottom: 4px;
	}
	h6 {																	/* h6 is needed sIFR-link-headlines on index page - changeable color - see also .index a at the end of this page and logic.js */
		color: #919394;
		font-size: 20px;
		line-height: 26px;
		font-weight: normal;
		margin: 0px;														
		padding-bottom: 4px;
	}
	.client {																/* .client is needed for following client names */
		font-size: 13px;
		line-height: 18px;
		font-weight: normal;
		padding: 6px 0 0 0;
		margin:0;
		display:inline;
	}
	.referenzen{
		margin-top:18px;
	}
	p {
		margin:0px;															/* reset default */
		padding-bottom:6px;													/* use padding instead to cover background */
	}
	ul {
		list-style-type: none;												/* no list style */
	}
		ul li {
			
			/* position: relative;	*/										/* create own coordinate set for infoboxes */
			/* z-index: 1; */ 												/* show on top */
		}
		
	.green, a.green { color: #99cc00; }										/* common colors, also for links and infobox link of '.current' list element */					
	.orange, a.orange { color: #ffa722; }
		a.orange:hover, a.green:hover { color: #000000;}
	.white, a.white { color: #ffffff; }
	.gray { color: #777f7d; }	
	.black, a.black { color: #000; }	
	.fontsmallintend { 														/* small fontsize for "Kunden" */
		font-size: 10px;
		padding-left: 6px;
	}	
	.supstar{ 																/* hochgestellter Stern für "Kunden" */
		font-size: 0.8em;
		line-height: .8em;
		position: relative;
		top: -.4em;
		padding-left: .1em;
	}

	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
	/* Background */
	/* 2 layers floating on body (image container has overflow hidden) */			
		
	#background {															/* background image  */
		position:fixed; 										
		height:100%; 
		width:100%;															/* safari needs this for scaling images */				
		overflow:hidden; 
		z-index:-99;														/* set way back */
	}
	#page, #background {
		min-width:996px;													/* prevent scaling below this width */												
	}																		/* (996 is maximum for a 1024 screen in IE cause of the scrollbar area) */
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Page parts */
	/* #header, #nav, #content */			
		
	#page #header{
		height:92px;														/* fixed height */
		background-color:#ffffff;											/* cover background */
		margin-bottom:68px;													/* space below white header */
	}
	#page #content.scaleright {												/* scaling content positioned right of #nav area */
		margin-left: 256px;
		margin-right: 256px;	
	}
	#page #content.fixedwidth {												/* fixed content positioned right of #nav area */
		float:left;															/* float right of #nav */
		width: 720px;														/* content width */
		margin-left: 0px;													/* reset settings from above */
		margin-right: 0px;	
	}
	#page #content.fullwidth {												/* scaling content positioned to full browser width (no nav area) */
		margin-left: 32px;
		margin-right: 32px;	
	}
	
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Header parts	*/
	/* #topnav, #logo */			
	
	#page #header #topnav {
		height:32px;
	}
	#page #header #logo {
		clear:both;
	}
	
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Columns */
	/* full browser width (for start page - no navigation on left side) */
	
	.firstcolumn { 
		margin-left:32px;
	}
	.column_208 {
		float:left;
		width:208px;
		margin-right:16px;
	}
	.column_272 {
		float:left;
		width:272px;
		margin-right:32px;
	}
	.column_416 {
		float:left;
		width:416px;
		margin-right:32px;
	}
	
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */
	/* Navigation - 1st and 2nd level (3rd level see below) */
	/* based on "general mainnavigation navigation"	(see below)	*/

	/* level 1 (main nav bar) */
	#page #header ul.mainnavigation { 										/* (has position: absolute set in general part below)  */
		margin-left:32px;
		margin-top:12px;
		line-height:18px; 													/* general font setting inside navigation */
	}
																			/* level 1 element spacing */
		#page #header ul.mainnavigation li 				{ margin-right: 20px; }		/* right-space per element */
		#page #header ul.mainnavigation li.widespace 	{ margin-right: 48px; }		/* extra wide right-space */
		#page #header ul.mainnavigation li.smallspace 	{ margin-right: 12px; }		/* extra small right-space */
			
	
	/* level 2 (box nav list) */
	#page #header ul.mainnavigation li ul{									/* show/hideable second level ul  */
		left:0px;															/* needed for correct position in IE7 */
		top:16px;															/* offset top (directly unter the link) */
		width: 232px; 														/* box width */ 
		padding-left:7px;													/* shift right the content but keep coverage for mousemovement */
																			/* shift down is included in the image top-part and the padding-top (also for coverage) */																	
		background: url(../image/css/navbox_232_top-arrow.png);				/* image part top */
		padding-top: 86px; 													/* set to height of the image given above */
		background-repeat:no-repeat;
	}
		#page #header ul.mainnavigation li ul li{							/* single subnavpoint */
			background: url(../image/css/transparent.png);	
			padding:0px 0px 6px 0px; 										/* may not have horizontal padding! */
		}
		#page #header ul.mainnavigation li ul li.last{						/* image part bottom */
			background: url(../image/css/navbox_232_bottom-last.png);
			padding-bottom: 16px;											/* extra space for backgroundimage (image hight 32px) */
			background-repeat:no-repeat;
		}
			#page #header ul.mainnavigation li ul li a{						/* link inside single subnavpoint */
				color:#ffffff;
				display:block;
				margin: 0px 16px 0px 16px; 									/* spacer around links */
			}
				#page #header ul.mainnavigation li ul li a:hover{			/* link inside single subnavpoint  */
					color:#000000;											
				}
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Navigation - mainnavigation (CSS where possible + Jquery if JS is availabe) */
	/* mainnav bar (ul) */			
	
	ul.mainnavigation{														/* Main Container */
		position:absolute;													/* required for having its own layer in case the container is to small (shows up in Mozilla only) */
		list-style-type:none;
		z-index: 2;
	}
		ul.mainnavigation li { 												/* single mainnavpoint */
			float: left; 
			position:relative;												/* create extra layer for potential suplevel */
		}
			ul.mainnavigation li ul { 										/* hidden subpoints inside mainnavpoint */
				position: absolute; 										/* create extra layer */
				left:0px;
				right:0px;
				display: none;												/* hide by default, is triggered by css and jquery->onmouseover */
				background-color: #ffffff; 									/* stupid IE looses focus on transparent background !!! */
			}
			ul.mainnavigation li:hover ul { 								/* show on hover using CSS if possible */
				display: block;
			}		
		
		ul.mainnavigation li ul li {										/* single subnavpoint */
			clear: both;													/* dont inherit float */
			width: 100%;													/* needed for coverage */
			list-style-type: none;
		}

	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Project navigation - ( 3rd level ) */
	#projectHeadline h1{
		margin-bottom:10px;													/* space below hedaline */
	}
	
	#projectnav  {															/* single projektnav list element */
		position:relative;
		z-index: 1;
	}
		#projectnav ul li {													/* single projektnav list element */
			color: #777f7d;	
			margin:0px;
			padding:0px;
			margin:0px 0px 6px 0px; 
		}
			#projectnav ul li .client{										/* projectnav text */ 
				padding:0px 10px 0px 0px;									/* > padding right of .client before info link */
				font-size:13px;
				line-height:18px;													
				padding-right:10px;
			}
				#projectnav ul li ul{										/* navigation from second level ul */
					margin-left:16px;										/* > shift right each level */ 
				}
					#projectnav ul li ul li{								/* navigation from second level li */
						margin:0px 0px 0px 0px; 							/* > no margins from here */ 
					}
			
			#projectnav ul li.current, #projectnav ul li.mouseover {
				color: #000000;	
			}
				#projectnav ul li.current a.infobox {						/* green "Info ..." link */
					color: #99cc00;
				}
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/*  JqueryBox content  */
	.JqueryBox .JqueryBoxContent {
		color: #ffffff;
	}
	.JqueryBox .JqueryBoxContent a{
		color: #5a605e;
		display: inline;
	}
	.JqueryBox .JqueryBoxContent a:hover {
	color: #000;
	}
	.JqueryBox .JqueryBoxContent li a {
		color: #5a605e;
		display: inline;
	}
	.JqueryBox .JqueryBoxContent li a:hover {
	color: #000;
	}
		.JqueryBox .JqueryBoxContent li.green a {
			color: #99cc00;
		}
		.JqueryBox .JqueryBoxContent li.orange a {
			color: #ffa722;
		}
		.JqueryBox .JqueryBoxContent li.green a:hover {
			color: #ffffff;
		}
		.JqueryBox .JqueryBoxContent li.orange a:hover {
			color: #ffffff;
		}
		
	.JqueryBox .JqueryBoxContent ul {
		list-style: none;
		margin-bottom: 6px;
	}	
	.JqueryBox .JqueryBoxContent ul li {
		background: url(../image/bg_list-dot.gif) no-repeat;
		background-position: 0px 8px;
		padding-left: 16px;
	} 
	
	
	/* --------------------------------------------------------------------------------------------------------------------------------------------------- */	
	/* Content or page specific styles */
	
	/* Seite "Start" (index)*/
	.index { color: #919394; }
	.index a { color: #919394; }											/* link color on start page */
	.index a:hover	{ color: #666666; }										/* link color on start page */

	
	/* Seite "Übersicht" */
	#content .galleryelement {												/* single galery element */
		float: left;														/* float next to each other */
		position: relative;													/* create coordinate set */
		margin-right: 48px;
		width: 176px;
		height: 224px;
	}
		#content .galleryelement img, .galleryelement .info {				/* image and info elements */
			position: absolute;												/* on top of each other */
		}
		#content .galleryelement .info {
		 	display: none;													/* hide */
			left: -16px;													/* position relative to parent */
			top: -16px;
			width: 208px;
			color: #fff;
		}
			#content .galleryelement .info div.top { 						/* round corner elements on top and bottom */
				height: 12px;
				background: url(../image/css/infobox_208_top.png);			/* top */
			}
			#content .galleryelement .info div.bottom { 
				height: 12px;
				background: url(../image/css/infobox_208_bottom.png);		/* bottom */
			}
			#content .galleryelement .info .content{						/* info content area */
				background: url(../image/css/transparent.png);
				padding-left: 16px;
				padding-right: 16px;
				height: 184px;
			}
				#content .galleryelement .info .content a {					/* linkfarbe - Dunkelgrau */
				color: #5a605e;	
				text-decoration: none;
				}
				#content .galleryelement .info .content a:hover { 
				color: #000000;
				}


	/* Seite "Nachrichten" */
	#content .newsblock {
		clear: both;
	}	
		#content .newsblock h1{
			margin-left: 271px;
		}
		#content .newsblock img{
			float: left;
			width: 176px;
			margin-left: 80px;
			margin-right: 16px;
			margin-top: 4px;
		}
		#content .newsblock .content{										/* content text area */
			float: left;
			width: 368px;
			margin-bottom: 40px; 											/* spacer below each newsblock content */
		}


	/* Seite "Wir" */
	#page #header_wir_foto {												/* special header for wir_foto.html */
		position: absolute;
		left: 0px;
		top: 92px;
		width: 100%;
		height: 68px;														/* cover background */
		margin-bottom: 72px;												/* space below white header */
		z-index: 1;
		background-color: #ffffff;
	}
	#page #header_wir_foto .content{
		margin-top: 4px;
		margin-right: 32px;
		margin-bottom: 0px;
		margin-left: 32px;
	}
	.wirlink, a.wirlink { color: #ad0010; }
		a.wirlink:hover { color: #000000;}
		
	
	/* Seite "Kontakt" */
	.kontaktlink, a.kontaktlink { color: #333366; }
		a.kontaktlink:hover { color: #000000;}


	/* Seite "Kunden */
	#columns {
		float:left;
	}
		#columns td {
			width:272px;
			vertical-align:top;
		}
			#columns td .helper {											/* position and z-index helper */
				position:relative; 
				top:-24px;
			}	
	td a {
		display: inline-block;												/* erzeugt Absatzabstand - Seite "Kunden" */
		line-height: 18px;
		padding-bottom:6px;													
	}
	td h2 a, h3 a {
	line-height: 26px;
	}
	td a.black {
		cursor: text;														/* fuer normalen Mauszeiger trotz Link - Seite "Kunden" */
	}