@charset "UTF-8";

/* Basics
---------------------------------------------------------------------------------------------- */
body {
	height:100%;
	margin: 0; padding: 0;
	font-family: Arial, Helvetica, Sans-serif;
	font-size: 62.5%; /* 16px / 62.5% = 10px */
	color: #333;
	background: #006286;
	background-image: url(images/bg/body.gif);
	background-repeat: repeat-x;	
	background-position: top;
}

p {	
	font-size: 1.2em;
	line-height: 1.5em;
}

img { border: none; }


/* Links 
------------------------------------------------------------------------------------ */

a:link, a:visited  {
	color: #0093C3; /* blue */ 
	text-decoration: none;
}

a:hover, a:active {
	text-decoration: underline;
}


/* Layout 
------------------------------------------------------------------------------------ */


#wrapper {
	position: relative;
	margin: 20px auto;
	width: 915px;  /* 915px */
	/* _width: 935px; IE */
	background-image:  url(images/bg/background.jpg);
	background-repeat: repeat-y;
}


#container {
	background-color: #FFF;
    background-image: url(images/bg/footer.jpg);
	background-repeat: repeat-x;	
	background-position: bottom;
}


/* Header 
------------------------------------------------------------------------------------ */


#header {
	height: 140px;
	background-image:  url(images/bg/header.jpg);
	background-repeat: repeat-x;
}

#header h1 {
	margin: 0;
	padding: .5em;
}


#header h2 {
	width: 475px;
	font-size: 13px;
	line-height: 17px;
	font-weight: normal;
	margin: 0;
	padding: 55px 0 0 20px;
}

#header img { /* Logo */
	position: absolute;
	left: 532px;
	top: 40px;
        border: none;
}

/* Nav 
------------------------------------------------------------------------------------ */


#nav {
	float: left;
	position:relative;
	background-color: #CCC;
    background-image: url(images/bg/nav.gif);
	background-repeat: repeat-x;
	background-position: 0 top;	
	width: 185px;
	margin-left: 20px;
	/* _margin-left: 10px;  IE */
	padding: 0;
	font-size: 1.2em;
	overflow:hidden;
}


#nav UL {  
	list-style-type: none;
	font-weight: bold;
	line-height: 1.88em;
	margin: 5px 0 1em 0;
	padding: 5px;
	
}

#nav UL UL {
	margin: 0;
	padding: 0;
	font-weight: normal;
}

#nav LI {
	margin: 0; padding: 0;
	border-bottom: 1px solid #FFF;
}

#nav LI LI { 
	padding: 0;
	border-bottom: none;

}

#nav UL A {
	color: #333;
	text-decoration: none;
	padding-left: 17px;
}

#nav UL A:hover, #nav UL .current {
	background-image: url(images/graphics/arrow.gif);
	background-repeat: no-repeat;
	background-position: 5px;	
}

#nav UL UL A { /* zweite Navebene */
	color: #333;
	padding-left: 25px;
}

#nav UL UL A:hover, #nav UL UL .current {
	background-image: url(images/graphics/arrow.gif);
	background-repeat: no-repeat;
	background-position: 10px;	
}


#nav A:hover, #nav A:active { background: none; text-decoration: underline; }


.quickbuttons {
	background-color: #FFF;
	padding-top: 10px;
}



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


#content {
        padding: 0;
		width: 660px;
	margin: -6px 13px 30px 230px;
	/* _margin: 0px 23px 30px 230px;  IE */
	line-height: 1.5em;
}

#content h2 {
	margin: 0;
	font-size: 1.7em;
	padding: 17px 20px;
	color: #FFF;
}

#content h3 {
	font-size: 1.2em;
	line-height: 1.5em;

}

#content UL {
	font-size: 12px;
	line-height: 1.88em;
}

.headline_grey, .headline_green, .headline_blue {
	margin: 0; padding: 0;
	position: relative;
	width: 672px;
	height: 53px;
	top: 0;
	left: -6px; 
	background-repeat: no-repeat;
	background-position: 0px top;
}

.headline_grey { background-image: url(images/bg/headline_grey.gif); }
.headline_green { background-image: url(images/bg/headline_green.gif); }
.headline_blue { background-image: url(images/bg/headline_blue.gif); }


.green {
	font-size: 1.2em;
	color: #80B827;
}

h4 { margin: 0; padding:0; }


/* Content > Elements
------------------------------------------------------------------------------------ */

#subheadline_blue {
	margin: -4px 0 30px 0; 
	padding: 0;
	position: relative;
	width: 660px;
	height: 79px;
	background-image: url(images/bg/subnav_blue.gif);
	background-repeat: repeat-x;
	background-position: 0px top;
}

#subheadline_blue p {
	margin: 0; 
	padding: 15px;
	font-size: 1.3em;
	line-height: 1.6em;
	color: #01A6DD; /* blue */
}


#bgimg_umweltanalytik {  /* for CONTENT-bg-photo */
	height: 61em;	
	background-image: url(images/photo/umweltanalytik.jpg);
	background-repeat: no-repeat;
	background-position: 0px bottom;	
}


#rollovermenu {
	margin: -4px 0 30px 0; 
	padding: 0;
	position: relative;
	width: 660px;
	height: 43px;
	background-image: url(images/bg/subnav_green.gif);
	background-repeat: repeat-x;
	background-position: 0px top;
}

#rollovermenu a {
	height: 43px;
	display: block;
	float: left;
	background: url("images/buttons/wasser-biologie-feststoffe.gif") 0px 0px no-repeat;
}

#rollovermenu a:hover, #rollovermenu .current {	
	background-position: 0px -43px;
}

#rollovermenu a:active {
	background-position: 0px 0px;
}

#rollovermenu .btn_wasser a {
	float: left;
	width: 120px;
}

#rollovermenu .btn_biologie a {
	float: left;
	width: 120px;
}

#rollovermenu .btn_feststoffe a {
	background-position: -240px 0px;
	float: left;
	width: 150px;
}

/* --- 2 Columns --- */

.doublecol_right {
	float: right;
	width: 310px;
}

.doublecol_left {
	float: left;
	width: 310px;
}

.doublecol_left p, .doublecol_right p {
	margin: 15px 2px;
}


/* Startpage
---------------------------------------------------------------------------------------------- */

.sp_box_left, .sp_box_right {
	position: relative;
	width: 336px;
	height: 265px;
	margin-left: -12px;
	margin-top: -6px;
	margin-bottom: 8px;
	background-image: url(images/bg/sp_box_border.jpg);
	background-repeat: no-repeat;
} 

.sp_box_left { float: left; }
.sp_box_right { float: right; }


.sp_box_green, .sp_box_blue, .sp_box_grey {
	overflow: hidden;
	position: relative;
	margin: 6px;
	width: 324px;
	height: 253px;
	background-repeat: repeat-x;

}

.sp_box_green {	background-image: url(images/bg/sp_box_green.gif); }
.sp_box_blue {	background-image: url(images/bg/sp_box_blue.gif); }
.sp_box_grey {	background-image: url(images/bg/sp_box_grey.gif); }


.sp_box_headline_green, .sp_box_headline_blue, .sp_box_headline_grey {
	float: left;
	margin: 5px;
	/* _margin: 5px 3px; IE */ 
	width: 314px;
	display: block;
	color:red;
}

.sp_box_headline_green { background-image: url(images/bg/sp_box_green_headline.gif); }
.sp_box_headline_blue { background-image: url(images/bg/sp_box_blue_headline.gif); }
.sp_box_headline_grey { background-image: url(images/bg/sp_box_grey_headline.gif); }


.sp_box_headline_green h3, .sp_box_headline_blue h3, .sp_box_headline_grey h3 {
	margin: 0;
	padding: 7px;
	color: #FFF;
}

.sp_box_headline_green h3 a, .sp_box_headline_blue h3 a, .sp_box_headline_grey h3 a, 
.sp_box_headline_green h3 a:visited, .sp_box_headline_blue h3 a:visited, .sp_box_headline_grey h3 a:visited {
	font-size: 17px;
	color: #FFF;
}

.sp_box_content img {
	float:left;
	position:absolute;
	left: 0; bottom: 0;
	margin: 0; padding: 0;
	z-index: 1;
}

.sp_box_content {
	overflow: hidden;
	position: absolute;
	top: 30px; left: 0;
	width: 314px;
	height: 212px; 	
	background-repeat: no-repeat;
	background-position: 0 bottom;
	margin: 5px 0 0 5px;
		
	/* _position:relative;
	_top: -22px;  
	_height: 222px; IE */ 

	
}

.sp_box_green a:hover, .sp_box_blue a:hover, 
.sp_box_grey a:hover { 
text-decoration: none;
}

.sp_box_headline_green h3 a:hover, .sp_box_headline_blue h3 a:hover, .sp_box_headline_grey h3 a:hover { 
text-decoration: underline;
}



.sp_box_left UL, .sp_box_right UL {
     z-index: 10;
	position:relative;
	font-size: 12px;
	color: #FFF;
	/*border: 1px solid red;*/
	margin-top: 10px;
	/* _margin-top: 20px; IE */ 
	/* _margin-bottom: 10px; IE */ 

}

.sp_box_left LI, .sp_box_right LI {
	padding: 0;
	margin-left: -15px;
	line-height: 19px;
}

/* Lists
------------------------------------------------------------------------------------ */

.notopspace { margin-top: 0px; }


/* Form
------------------------------------------------------------------------------------ */

#form_kontakt {
	margin: 0 0 20px 0;
	float: left;
	width: 660px;
}


.tdlabel {
	background-color: #BDE3F0;
	text-align: right;
	font-weight: bold;
	padding-right: 12px;
}

form {
	padding: 20px;
	color: #333;
	font-size: 1.2em;
	line-height: 1.5em;
	background-image: url(images/bg/form_grey.gif);
	border-bottom: 1px solid #999;
}


#form_kontakt textarea {
	width: 400px;
}

.singleline {
width: 400px;
}

#form_kontakt label {
	font-weight: bold;
}


input, textarea {
	color: #333;
	border: 1px solid #999;
	margin-left: 15px;
	padding: 4px;
	font-size: 1em;
	line-height: 1.5em;
	font-family: Verdana;
}



/* Text
------------------------------------------------------------------------------------ */

.barrierefrei { display: none; }

.text9 { font-size: 0.9em; line-height: 1.1em; }
.text10 { font-size: 1em; line-height: 1.2em; }
.text11 { font-size: 1.1em; line-height: 1.3em; }
.text { font-size: 1.2em; line-height: 1.4em; }
.text14 { font-size: 1.4em; line-height: 1.6em; }

.green { color: #80B827; }
.blue { color: #01A6DD; }


/* Spaces and Alignments
------------------------------------------------------------------------------------ */

.vspace10	{ width: 10px; overflow:hidden; padding:0; margin:0; float: left; }
.vspace20	{ width: 20px; overflow:hidden; padding:0; margin:0; float: left; }
.vspace30	{ width: 30px; overflow:hidden; padding:0; margin:0; float: left; }

.tab50 { width: 5em; display: block; float: left; }
.tab60 { width: 6em; display: block; float: left; }
.tab70 { width: 7em; display: block; float: left; }
.tab80 { width: 8em; display: block; float: left; }
.tab150 { width: 15em; display: block; float: left; }


.clearfloat { clear:both; border-top:1px solid #FFF; }



/* Footer 
------------------------------------------------------------------------------------ */

#footer {
	clear: both;
	text-align: right;	
}

#footer p {
	color: #666;
	font-size: 1.1em;
	margin: 0;
	padding: 20px 20px;

}

#footer a {
	 color: #666;
}

#footer a:hover {
	 background: none;
	 color: #555;
	 text-decoration: underline;
}


/* Border 
------------------------------------------------------------------------------------ */

#border_trl { /* top right left */
	padding: 4px 4px 0 4px;
	background-image: url(images/bg/border_topsides.png);
	background-repeat: no-repeat;	
	background-position: 0 top;
	margin: 0;
	}

#border_b { /* bottom */
	position:relative;
	left: 0; bottom:0px;
	background-image: url(images/bg/border_bottom.png);
	background-repeat: no-repeat;	
	background-position: 0 bottom;
	height: 4px;
}