/*

====================== PhenOxiGENproject [ CSSfile ] ===============================================

CSS-Datei für die Gestaltung des Layouts der Seite.
	- Zentriert die Seite
	- legt Hintergrundbilder an
	- positioniert die Hauptelemente (Navigation, Header, Fußbereich, etc.)
	- Definiert erste allgemeine HTML-Strukturelemente (Grundsätzliche Textoptik, Überschrift etc.)

*/


/* ----------------- [ allgemeine Definitionen ] -------------------------------------------- */

* {
	margin:0px;
	padding:0px;
}

html {
	height:100%;
}

body {
	background-color:#fff;
	font:0.625em Verdana,Arial,Helvetica,sans-serif;
	height:100%;
	width:100%;
	padding:0;
	margin:0;
	text-align:center;	
	color:#666;
}
	
ul {
	list-style-type:none;
}
	
strong {
	font-weight:bold;
}


.hidden {
	display:none;
}

#sitespanner {
	position:relative;
	top:0;
	left:0;
	width:100%;
	min-height:100%;
	display:block;
}

.centring {
	position:relative;
	width:950px;
	height:100%;
	margin:0 auto;
	padding:0 10px;
	text-align:left;
}

/* ----------------- [ / allgemeine Definitionen ] ------------------------------------------ */




/* ----------------- [ Titelgrafiken & Header ] --------------------------------------------- */

#permanenttitle {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:60px;
	border-top:4px solid #9c3;
}

#permanenttitle .centring {
	background:url(../images/graphic_top.jpg) no-repeat top right;
}

#greendown,
#greenup {
	position:absolute;
	top:0;
	left:-6px;
	width:14px;
	height:7px;
}

#greendown { background:url(../images/greendown.gif) no-repeat 0 0; }

#greenup { background:url(../images/greenup.gif) no-repeat 0 0; }

#titleline {
	position:absolute;
	top:4px;
	left:10px;
	width:640px;
	height:15px;
	background:url(../images/permanenttitle.gif) no-repeat 0 0;
}

#header {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:220px;
	background:url(../images/headerbg.gif) repeat-x;
}

#header .centring {
	background:url(../images/graphic_middle.jpg) no-repeat top right;
}

#header h1 {
	position:absolute;
	top:33px;
	left:10px;
	width:310px;
	height:65px;
}

#header h1 a {
	position:relative;
	width:100%;
	height:100%;
	text-indent:-2000px;
	overflow:hidden;
	display:block;
	background:url(../images/phenoxigenlogo.gif) no-repeat 0 0;
}

/* ----------------- [ / Titelgrafiken & Header ] ------------------------------------------- */




/* ----------------- [ Navigation ] --------------------------------------------------------- */

#nav {
	position:absolute;
	bottom:0;
	left:10px;
	width:590px;
	height:90px;
	display:block;
}

#nav li {
	position:relative;
	height:90px;
	width:auto;
	display:block;
	float:left;
}

#nav li a { 
	position:relative;
	top:0;
	left:0;
	height:90px;
	display:block;
	background:url(../images/nav.gif);
	text-indent:-2000px;
	overflow:hidden;
}

li a#b_home { width:118px; background-position:0 0; }
li a#b_home_act { width:118px; background-position:0 -90px; }
li a#b_home:hover { width:118px; background-position:0 -180px; }

li a#b_partners { width:132px; background-position:-118px 0; }
li a#b_partners_act { width:132px; background-position:-118px -90px; }
li a#b_partners:hover { width:132px; background-position:-118px -180px; }

li a#b_publications { width:136px; background-position:-250px 0; }
li a#b_publications_act { width:136px; background-position:-250px -90px; }
li a#b_publications:hover { width:136px; background-position:-250px -180px; }

li a#b_data { width:109px; background-position:-386px 0; }
li a#b_data_act { width:109px; background-position:-386px -90px; }
li a#b_data:hover { width:109px; background-position:-386px -180px; }

li a#b_contact { width:95px; background-position:-495px 0; }
li a#b_contact_act { width:95px; background-position:-495px -90px; }
li a#b_contact:hover { width:95px; background-position:-495px -180px; }

#sitesearch {
	position:absolute;
	right:10px;
	bottom:18px;
	width:170px;
	height:70px;
	background:url(../images/searchsep.gif) no-repeat 0 0;
}

#sitesearch label {
	position:absolute;
	top:14px;
	left:28px;
	width:80px;
	height:10px;
	background:url(../images/searchlabel.gif) no-repeat 0 0;
	border:none;
	text-indent:-2000px;
	overflow:hidden;
}

#sitesearch #searchstring {
	position:absolute;
	top:26px;
	right:15px;
	width:126px;
	height:20px;
	background:url(../images/searchfield.gif) no-repeat 0 0;
	border:none;
	color:#666;
	font-size:1em;
	padding:3px 0 0 10px;
}

#sitesearch #send {
	position:absolute;
	top:26px;
	right:0;
	width:25px;
	height:20px;
	background:url(../images/searchsend.gif) no-repeat 0 0;
	border:none;
	text-indent:-2000px;
	overflow:hidden;
}

#sitesearch #send:hover { background:url(../images/searchsend_over.gif) no-repeat 0 0; cursor:pointer; }

/* ----------------- [ / Navigation ] ------------------------------------------------------- */




/* ----------------- [ Aufbau & Spaltendef. für Inhaltsbereich ] ---------------------------- */

#content {
	width:100%;
	min-height:100px;
}

#leftcol {
	position:relative;
	top:0;
	left:0;
	width:590px;
	height:auto;
	float:left;
	margin:35px 0 0;
}

#bg_home,
#bg_partners,
#bg_publications,
#bg_data,
#bg_contact {
	position:absolute;
	top:0;
	left:370px;
	width:230px;
	height:180px;
}

#bg_home { background:url(../images/cntbg_home.gif) no-repeat top right; }
#bg_partners { background:url(../images/cntbg_partners.gif) no-repeat top right; }
#bg_publications { background:url(../images/cntbg_publications.gif) no-repeat top right; }
#bg_data { background:url(../images/cntbg_data.gif) no-repeat top right; }
#bg_contact { background:url(../images/cntbg_contact.gif) no-repeat top right; }

#rightcol {
	position:relative;
	top:0;
	left:0;
	width:290px;
	height:auto;
	float:left;
	margin:70px 0 30px 70px;
	padding:60px 0;
	background:url(../images/sidebarbg.gif) repeat-y;
}

#content .centring { background:url(../images/graphic_bottom.jpg) no-repeat top right; }

/* ----------------- [ / Aufbau & Spaltendef. für Inhaltsbereich ] -------------------------- */




/* ----------------- [ Fußbereich ] --------------------------------------------------------- */


#footer {
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:250px;
	background:#e7e7e7 url(../images/footerbg.gif) repeat-x;
}

#footer .centring { background:url(../images/greyfootergraphic.jpg) no-repeat 0 88px; }

#sysnav {
	position:absolute;
	top:68px;
	left:3px;
	width:240px;
	height:50px;
	background:url(../images/sysnavbg.gif) no-repeat 0 0;
	padding:26px 0 0 20px;
}

#sysnav li { margin:0 7px 0 0; float:left; }

.bd_right { border-right:1px dotted #999;padding:0 7px 0 0; }

#sysnav li a { color:#666; text-decoration:none;padding:1px 3px; }

#sysnav li a:hover { color:#fff; text-decoration:none; background:#666;padding:1px 3px; }


#blueswish {
	position:absolute;
	top:-20px;
	right:0px;
	width:360px;
	height:260px;
	background:url(../images/bluefooterswish.jpg) no-repeat 0 0;
}

#siteendspacer {
	position:relative;
	height:250px;
	width:100%;
	background:transparent !important;
}

#lastline {
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:7px;
	border-bottom:4px solid #9c3;
	background:#e7e7e7;
}

#lastline .centring { background:url(../images/lastlinebg.jpg) no-repeat 0 0; }

/* ----------------- [ / Fußbereich ] ------------------------------------------------------- */