@charset "UTF-8";
/*--------------------------------------------------*/
/* CSS Document - Haupt-CSS für ZTL                 */
/* 1. Allgemeine Styles und Abstände der ganzen Page*/
/*--------------------------------------------------*/

/*wräpper - jede hip-hopper isch au en wräpper */

#wrapper{
	width:960px;
	margin-right:auto;
	margin-left:auto;	
	}


/* dieses hier sollte für das hintergrund-verlauf da sein... */
body {
	color: #FF0;
	background:url(../bilder/laborpix_gradient.png) repeat-x;
	padding: 0;
	margin: 0;
	background-color:#000033
}

/*-----------------*/
/* 2.  Head & logo*/
/*-----------------*/

#logowrapper{
	float:left;
	width:350px;	
	}

#images3{
	float:right;
	width:500px;	
	text-align:right;
	margin-left:10px;
	}


#logo {
	color:#FFFF00;
	/*position: relative;
	top: 5px;
	left: 100px;
    display:inline;*/
    /* border: #3F3  2px solid;
	/*margin:30 0 10 0; */
}




/* class header - damit 2 mal das adress tag vorhanden ist. ,-)*/
.header-line {
	background-color:#444444;
	color: #a1b7b7;
	/*position:relative;
	left: 100px;*/
	width: 935px;
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left:25px;
	/* formatierungen */
	/*schrift des footers*/
    font-style: normal;	/* normale Schrift, nicht kursiv*/
	text-align:left;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	letter-spacing:4px; /* Abstand zwischen den Buchstaben */	
}

/*---------------------------------------*/
/* 3. NAV navigation style main menue    */
/*---------------------------------------*/

.nav-bg {
	background-color:#7e7e7e;
	/*color:#6E6EE6;*/
	height: 205px;
	width: 960px;
	}
	

.nav-bg li { 
	border: 1px solid;
	border-color:#FFF;
	padding:20px;
	width:140px;
	position:relative;
    float: left; 
	margin:5px;
    list-style-type:none;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
  	letter-spacing:4px;
	}
 

/* Sub Navigation aufklapp-bar:
1. display none; 
mit jQuerry überschreibt man diesese Display
2. möglichtst nichts erben, von nav-bg-classen, da sich diese auf das ganze untermenue auswirken und dann eine riesensauerei anrichten im layout.
*/
.sub-nav {
	display:none;
	padding:0 !important;
	color: #FFF;
	}

.sub-nav ul {
	color: #FC6;
	float: left;
	}

.sub-nav li {
	background-color:#7e7e7e;
	border: 0px solid !important;
	padding:0px !important; 
	margin-top:7px !important;
	margin-left:0px;
	clear:both;
	
	}

.sub-nav li a{
	display:block;
	padding: 0px !important;
	
	font-size:12px;
	letter-spacing:2px;
	clear:both;
	}

/*aktive subnavigation um display = yes zu haben*/
.sub-nav-act {
	padding:0 !important;
	color: #FFF;

}

.sub-nav-act ul {
	color: #FC6;
	float: left;
	}

.sub-nav-act li {
	background-color:#7e7e7e;
	border: 0px solid !important;
	padding:0px !important; 
	margin-top:7px !important;
	margin-left:0px;
	clear:both;
	
	}

.sub-nav-act li a{
	display:block;
	padding: 0px !important;
	
	font-size:12px;
	letter-spacing:2px;
	clear:both;
	}

/* anchor-tags: verhalten und links */
	a{	
	text-decoration:none; 	/*unterstreichungen im linksbereich*/
	outline: none; 	        /* keine hässliche rahmen um den link*/
	display:block;
	color:#FFF;
    }
	a:link {
	color: #FFFFFF;
}       

 
	a:hover {	color: #FC3;
				-webkit-transition: color 500ms;
				-moz-transition: color 500ms;
			}		 /*darüberschwebend*/	    
	a:focus { 
		color:#F9F9F9;
			}        /*per tabstop durchzezappt und hervorgehoben*/
	a:active {
	color: #FF3300;
		} /*angeclickt*/ 
 
	
/*---------------------------------------*/		         
/*            4. CONTENT                 */
/*---------------------------------------*/

/* Text dekoration / alignment im Textkoerper und so zeug*/

#bg-content {
	background-color:#666666;
    /*position:relative;
	left:100px;*/
	width: 960px;
}

#content-bild-rechts {
	float:right;
	}


h2 {
	font-size: 16px;
	letter-spacing:4px;
	color: #6CF
	}

h3 {
	letter-spacing:3px;
	font-size: 12px;
	}


#text-rechts{
	font-family:Helvetica, Verdana, Geneva, sans-serif; 
	color:#EEE;
	text-align:right;
	font-size: 12px; 
	padding-top: 5px;
	padding-bottom:5px;
	}

#haupttitel {	
	width:400px;
	/*schrift*/
	color: white; 
	font-family:Helvetica, Verdana, Geneva, sans-serif; 
	text-align:right;
	letter-spacing:3px;
	font-size: 14px; /* schriftgroesse*/
	
    /*Titeldekoration - weisser strich */
	border: 2px solid;
	padding-top: 18px;
	border-top-color:#FFF;
	border-left-color:#666666;   /*Trick: alles andere border hat hat die bg-color farbe*/
	border-right-color:#666666;
	border-bottom-color:#666666;
}

#untertitel {	
	/*position*/
	width:360px;
	padding-left:40px;
	/*schrift*/
	color:#EEE;
	font-family:Helvetica, Verdana, Geneva, sans-serif; 
	text-align:right;
	font-size: 12px; /* schriftgroesse*/
	
    /*Titeldekoration - weisser strich */
	border: 1px solid;
	padding-top: 10px;
	border-top-color:#FFF;
	border-left-color:#666666;
	border-right-color:#666666;
	border-bottom-color:#666666;

}


#fliesstext {
	width:360px;
	padding-top: 20px;
	padding-left:40px;
	/*schrift*/
	color:#EEE;
	font-family:Helvetica, Verdana, Geneva, sans-serif; 
	text-align:left;
	font-size: 14px; /* schriftgroesse*/
	line-height:1.8; /* zeilenabstand*/
	letter-spacing:0.6px; /* buchstabenabstand */
}

#fliesstext a{
	color:#D58A26;
}

#fliesstext a:link{
	color: #FFFF33;
	letter-spacing:1px;
}
#fliesstext a:hover{
	color: #FFCC00;
	letter-spacing:3px;
	-webkit-transition: color 500ms, letter-spacing 300ms;
	-moz-transition: color 500ms, letter-spacing 300ms;
}


#content-bild-rechts {
/*position des bildes*/
	float:right;
    /*Titeldekoration - weisser strich */
	border: 2px solid;
	border-top-color:#FFF;
	border-left-color:#666666;
	border-right-color:#666666;
	border-bottom-color:#666666; 
    padding-top: 40px;
	padding-right: 38px;
	padding-bottom: 10px;
	padding-left: 10px;
}



/*-----------------------------------------*/
/*              5. footer und kleinzeuch   */
/*-----------------------------------------*/

 /*muss wegen der adress tag eine class sein*/
/*schrift des footers*/
.bg-footer {
	background-color:#444444;
    color: #FC6;
	width: 960px;
 	padding-top: 10px;
    padding-bottom: 5px;
    font-style: normal;	/* normale Schrift, nicht kursiv*/
	text-align:center;
	font-family:Verdana, Geneva, sans-serif;
	font-size:11px;
	letter-spacing:2px; /* Abstand zwischen den Buchstaben */
}


/*das Clear ist dazu da, den Boxen-Fluss  wiederaufzunehmen */
.clear{
	clear:both;	
	}


/*Kleinkram*/
#unterschrift{
	color: #FC6;
	font-size:12px;
	letter-spacing:3px;
}

/*Kontaktformular -style  - gilt für alle Formulare */

form  {
background:#333;
margin:auto;
position:absolute;
width:350px;
height:260px;
font-family: Helvetica, Verdana, Geneva, sans-serif;
font-size: 12px;
line-height: 24px;
letter-spacing:0.8px;
font-weight:200;
text-align:right;
color: #FC6;
text-decoration: none;
-webkit-border-radius: 10;
-moz-border-radius: 10;
border-radius: 15px;
padding-right:20px;
margin-left:30px;
border: 1px solid #FC6;
}

/*Kontaktformular  TEXt-area damit es auch Würkli stimmt -style  */
textarea#textfeld{ 
width:300px;
height:100px;

}