/*
CODE:			Livingpage® für die APOQUICK Dienstleistungs GmbH
REVISION:		1.0
LAST CHANGE:	        28.05.04 bm@livingpage.com

CSS nach Typen sortiert. Was wozu gehoert steht im Kommentar davor. 

Getestet und fuer gut befunden in:

Mac: IE5.0, Opera 5.0tp1-3, NN6, Mozilla 0.9.5
Win: IE5.0, IE5.5, IE6, Opera 5, NN6
'x: Konqueror 2.1.1, Opera 5, Lynx 2.8.3, Mozilla 0.9.2 NN6.1

Nicht geeignet fuer NN4.x. (any version, any platform)

iCab so um die 2.5 auf dem Mac funktioniert nicht, weil CSS 
noch nicht vollstaendig implementiert ist (weder 1 noch 2, aber 
insbesondere float:). 

Weitere Erklaerungen gibt es bei w3.org/TR/REC-CSS2/

/* commented backslash hack v2 \*/ 
html, body {
	height: 100%;
} 
/* end hack */


/* ---------------------------------------------- */
/* ---------------- Anfang Tags ----------------- */
/* ---------------------------------------------- */

body {
	padding: 0;
	margin: 0;
	background: #FFFFFF url(/images/bg/bg_body.jpg) repeat-y left top;
	color: #000000;
	font: 0.8em arial, helvetica, sans-serif;
	}

a {
	color: #003399;
	text-decoration: none;
	}

a:link {
	color: #003399;
	}

a:visited {
	color: #003399;
	}

a:hover {
	text-decoration: underline;
	}
  
img {
	border: 0;
	}

h1 {
	font-size: 1.3em;
	margin: 0;
	margin-bottom: 10px;
	margin-top: 8px;
	}

h2 {
	font-weight: bold;
	font-size: 1.1em;
	}

h3 {
	font-weight: bold;
	font-size: 1em;
	}


form {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------- */
/* ------------------ Ende Tags ----------------- */
/* ---------------------------------------------- */


/* ---------------------------------------------- */
/* ---------------- Anfang Klassen --------------- */
/* ---------------------------------------------- */



.alert {
	color: #990000;
	font-weight: bold;
}

.anchor {
	background: url(/images/icons/icon_anchor.gif) no-repeat;
	background-position: 0em 0.5em;
	padding-left: 0.8em;
}

.back {
	background: url(/images/icons/icon_back.gif) no-repeat;
	background-position: 0em 0.5em;
	padding-left: 0.9em;
}

.diagram {
	background: url(/images/icons/icon_diagram.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.email {
	background: url(/images/icons/icon_email.gif) no-repeat;
	background-position: 0em 0.3em;
	padding-left: 1.2em;
}

.file {
	background: url(/images/icons/icon_file.gif) no-repeat;
	background-position: 0em 0.3em;
	padding-left: 0.9em;
}

.forum {
	background: url(/images/icons/icon_forum.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.infos {
	background: url(/images/icons/icon_infos.gif) no-repeat;
	background-position: 0em 0.4em;
	padding-left: 1.2em;
}

.invisible {
        display: none;
}

.klein {
	font-size: 0.85em;
	line-height: 1.2em;
}

.link {
	background: url(/images/icons/icon_link.gif) no-repeat;
	background-position: 0em 0.5em;
	padding-left: 0.7em;
}

.login_black {
	background: url(/images/icons/icon_login_black.gif) no-repeat;
	background-position: 0em 0.35em;
	padding-left: 1.3em;
	color: #000000;
}

.login_grey {
	background: url(/images/icons/icon_login_grey.gif) no-repeat;
	background-position: 0em 0.35em;
	padding-left: 1.3em;
}

.login_grey:hover {
	background: url(/images/icons/icon_login_black.gif) no-repeat;
	background-position: 0em 0.35em;
	padding-left: 1.3em;
}

.movie {
	background: url(/images/icons/icon_movie.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.newwindow {
	background: url(/images/icons/icon_newwindow.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.pdf {
	background: url(/images/icons/icon_pdf.gif) no-repeat;
	background-position: 0em 0em;
	padding-left: 1.2em;
}

.popup {
	background: url(/images/icons/icon_popup.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.print {
	background: url(/images/icons/icon_print.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.save {
	background: url(/images/icons/icon_save.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}

.sound {
	background: url(/images/icons/icon_sound.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.2em;
}


.table {
	background: url(/images/icons/icon_table.gif) no-repeat;
	background-position: 0em 0.2em;
	padding-left: 1.1em;
}

.topofpage {
	background: url(/images/icons/icon_topofpage.gif) no-repeat;
	background-position: 0em 0.3em;
	padding-left: 0.7em;
}

.zoom {
	background: url(/images/icons/icon_zoom.gif) no-repeat;
	background-position: 0em 0em;
	padding-left: 1.2em;
}

/* ---------------------------------------------- */
/* ---------------- Ende Klassen ---------------- */
/* ---------------------------------------------- */

#outer{
	height: 100%;
	min-height: 100%;
	margin-left: 180px;
	margin-right: 170px;
	margin-bottom: -52px;
	color: #000000;
	border-right-width: 1px;
	border-right-style: solid;
	border-right-color: #999999;
	}
 
html>body #outer{
	height: auto;
	} /*for mozilla as IE treats height as min-height anyway*/

#header{
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 250px;
	background: #FFFFFF url(/images/bg/bg_header.jpg) no-repeat;
	overflow: hidden;
	color: #000000;
	}


#centrecontent {
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	}

#left {
	position: relative;/*ie needs this to show float */
	width: 180px;
	float: left;
	margin-left: -179px;/*must be 1px less than width otherwise won't push footer down */;
	}

* html #left {
	padding-bottom: 52px;
	margin-right: -3px;
	}/*fix gap in ie next to float and clear footer because we've moved float too far left*/


#right {
	position: relative;/*ie needs this to show float */
	width: 169px;
	float: right;
	margin-right: -169px;/*must be 1px less than width otherwise won't push footer down */
	}

#footer {
	width: 100%;
	clear: both;
	height: 50px;
	color: #999999;
	position: relative;
	background: url(/images/bg/bg_footer.jpg) #FFFFFF repeat-x 0px 0px;
	}

#footer p {
	padding-top: 20px;
	padding-left: 20px;
	padding-bottom: 0px;
	}

* html #footer {/*only ie gets this style*/
	\height: 52px;/* for ie5 */
	he\ight: 50px;/* for ie6 */
	}

#clearheader {
	height: 250px;
	}/*needed to make room for header*/

#clearfooter {
	clear: both;
	height: 40px;
	}/*needed to make room for footer*/

* > html #clearfooter {float:left;width:100%;}/* ie mac styles */

#outer p  { 
	margin-top: 1em;
	}

div,p  { 
	margin: 0;/*clear top margin for mozilla*/
	}

* html #centrecontent {
	height: 1%;
	margin-bottom: 12px
	}/* combat IE's 3 pixel jog */

#minHeight {
	float: left;
	width: 0px;
	height: 100%;
	margin-bottom: -52px;
	}
 
* html #minHeight {
	margin-bottom: -50px;
	} 

#logo {
	z-index: 3;
	position: absolute;
	right: 10px;
	top: 70px;
	}

li {
	padding: 0;
	margin: 0;
	}

p.teaser {
	margin:0;
	padding:0;
}

.weiter {
	text-align: right;
	border-bottom: solid 1px #cccccc;
}

/* ---------------------------------------------- */
/* --------- Anfang Rechte Spalte -------- */
/* ---------------------------------------------- */

#right .include {

	padding-bottom: 10px;
	border-bottom: solid 3px #CC0000;

}

#right input {
	width: 150px;
	margin-top: 5px;

	}

#right form  {
	font-size: 0.9em;
	padding-left: 10px;
}

#right p {
	margin: 0;
	padding: 0;
}

#right h2 {
	margin: 0;
	padding: 0;
	padding-left: 10px;
	padding-bottom: 10px;
	padding-top: 10px;
}

#right input.start, #centrecontent input.start {
	width: 8px;
	height: 9px;
}


/* ---------------------------------------------- */
/* --------- Ende Rechte Spalte -------- */
/* ---------------------------------------------- */



/* ---------------------------------------------- */
/* -------- Anfang Thematische Navigation ------- */
/* ---------------------------------------------- */


#thematischenavigation {
	position: absolute;
	width: 100%;
	top: 199px;
	background: url(/images/bg/bg_thematischenavigation.gif) #cc0000 repeat-x 0px 0px;
	border-left: 1px solid #FFFFFF;
	list-style: none;
	margin: 0;
	padding: 0;
	font-weight: bold;
	height: 31px;
	margin-left: 20px;
	margin-top: 0px;
}

#thematischenavigation ul 
{
	display: inline;
	margin: 0px;
	padding: 0px;
	list-style-position: outside;
	list-style-type: none;
}
    
#thematischenavigation li {
	border-right: 1px solid #ffffff;
	display: inline;
	height: 31px;
	float: left;
	padding-top: 0px;
	padding-bottom: 0px;
 	line-height: 30px;
}


#thematischenavigation li a {
	color: #fff;
	padding: 0 15px;
	text-decoration: none;
}
    
#thematischenavigation li a:hover {
	background-color: #ffffff;
	text-decoration: none;
	color: #cc0000;
	padding-top: 7px;
	padding-bottom: 7px;
}

#thematischenavigation li .active {
	background-color: #666666;
	color: #cc0000;
	padding-top: 6px;
	padding-bottom: 7px;
}


/* ---------------------------------------------- */
/* --------- Ende Thematische Navigation -------- */
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* ------------ Anfang Mainnavigation ----------- */
/* ---------------------------------------------- */

#mainmenue {
	width: 180px;
	font-size: 0.9em;
	top: 280px;
	text-align: right;
	color: #000000;
}

#mainmenue ul.mainmenue
{
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	display: inline;
	overflow: hidden;
	list-style: none;
}


#mainmenue ul.mainmenue li
{
	width: 180px;
	margin: 0;
	padding: 0;
	display: inline; /* duplicated for IE 5/Win */
	list-style-type: none; /* duplicated for IE 5/Win */
}

#mainmenue ul.mainmenue li a
{
	text-decoration: none;
	padding-left: 5px;
	padding-right: 20px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFFFFF;
	line-height: 1.4em;
	display: block;
}

#mainmenue ul.mainmenue li a:hover
{
	background-image: url(/images/menue/mainmenue_f2.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#mainmenue ul.mainmenue li .active a
{
	font-weight: bold;
	background-image: url(/images/menue/mainmenue_f2.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#mainmenue ul.mainmenue li .active {
	font-weight: bold;
}


#mainmenue ul.submenue 
{
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	display: inline;
	overflow: hidden;
	list-style: none;
}


#mainmenue ul.submenue li
{
	width: 180px;
	margin: 0;
	padding: 0;
	display: inline; /* duplicated for IE 5/Win */
	list-style-type: none; /* duplicated for IE 5/Win */
}

#mainmenue ul.submenue li a
{
	text-decoration: none;
	margin: 0;
	padding: 0;
	padding-left: 5px;
	padding-right: 30px;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #FFFFFF;
	line-height: 1.4em;
	display: block;
	background-image: url(/images/menue/mainsubmenue.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#mainmenue ul.submenue li a:hover
{
	background-image: url(/images/menue/mainsubmenue_f2.gif);
	background-repeat: no-repeat;
	background-position: right top;
}

#mainmenue ul.submenue li.active a
{
	background-image: url(/images/menue/mainsubmenue_f2.gif);
	background-repeat: no-repeat;
	background-position: right top;
	font-weight: bold;
}


/* ---------------------------------------------- */
/* ----------- Ende Mainnavigation -------------- */
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* ----------- Anfang Standardnavigation -------- */
/* ---------------------------------------------- */

#standardnavigation {
	padding-top: 8px;
	padding-left: 22px;
	color: #999999;
	font-size: 0.9em;
}

#standardnavigation a {
	color: #999999;
}

#standardnavigation a:hover {
	color: #000000;
}

#standardnavigation .active {
	color: #000000;
}



/* ---------------------------------------------- */
/* ----------- Ende Standardnavigation -------- */
/* ---------------------------------------------- */

#headfoto {
	position: absolute;
	width: 750px;
	height: 170px;
	margin-left: 21px;
	margin-top: 6px;
	z-index: 1;
}

#headfotodescription {
	position: absolute;
	width: 750px;
	height: 170px;
	margin-left: 21px;
	margin-top: 5px;
	z-index: 2;
}

#headfotodescription img {
	width: 320px;
	height: 170px;
}

/* ---------------------------------------------- */
/* ----------- Anfang Rootnavigation -------- */
/* ---------------------------------------------- */

#rootnavigation {
	font-size: 0.85em;
	padding-bottom: 10px;
}

/* ---------------------------------------------- */
/* ----------- Ende Rootnavigation -------- */
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* ---------- Anfang Servicenavigation ---------- */
/* ---------------------------------------------- */

#servicenavigation {
	width: 165px;
	height: 200px;
	padding-top: 10px;
	padding-left: 3px;
}

#servicenavigation ul 
{
	top: 0;
	left: 0;
	margin: 0;
	padding: 0;
	display: inline;
	overflow: hidden;
	list-style: none;
}


#servicenavigation ul li
{
	width: 165px;
	margin: 0;
	padding: 0;
	display: inline; /* duplicated for IE 5/Win */
	list-style-type: none; /* duplicated for IE 5/Win */
}

#servicenavigation ul li a
{
	text-decoration: none;
	padding-left: 25px;
	padding-right: 5px;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #999999;
	line-height: 1.4em;
	display: block;
}

#servicenavigation ul li a:hover
{
	color: #000000;
}

#servicenavigation .druckversion
{
	background-image: url(/images/menue/druckversion.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#servicenavigation .druckversion:hover 
{
	background-image: url(/images/menue/druckversion_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#servicenavigation .zurueck
{
	background-image: url(/images/menue/zurueck.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 23px;
}

#servicenavigation .zurueck:hover 
{
	background-image: url(/images/menue/zurueck_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#servicenavigation .lesezeichen
{
	background-image: url(/images/menue/lesezeichen.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 23px;
}

#servicenavigation .lesezeichen:hover 
{
	background-image: url(/images/menue/lesezeichen_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}

#servicenavigation .startseite
{
	background-image: url(/images/menue/startseite.gif);
	background-repeat: no-repeat;
	background-position: left top;
	padding-right: 23px;
}

#servicenavigation .startseite:hover 
{
	background-image: url(/images/menue/startseite_f2.gif);
	background-repeat: no-repeat;
	background-position: left top;
}



/* ---------------------------------------------- */
/* ---------- Ende Servicenavigation ------------ */
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* ---------- Anfang Formularelemente ----------- */
/* ---------------------------------------------- */

/* Zunächst werden die Labels mit der Klasse "left" rechtsbündig an eine imaginäre Mittelachse gebracht und mit einem Abstand zu den daneben stehenden Kontrollelementen versehen: */
label.left {
	float: left;
	text-align: right;
	width: 9em;
	margin-right: .3em;
	}

label.right {
	margin-left: 10em;
	float: left;
	}

/* Als nächstes werden die Text- und Auswahlboxen rechts daneben positioniert. Weil diese im HTML ohne einen erzwungenen Zeilenumbruch (z.B. durch <br /> oder die Grenzen einer <td>) nach den Labels kommen, ordnen sie sich durch das float:left; automatisch rechts neben die Beschriftungen ein: */
#outer input[type=text], select {
	float: left;
	}

/* Dann kommen die Radiobuttons und Checkboxen an die Reihe, die ja bereits mit der Klasse "right" versehen sind. Der Abstand ergibt sich hier aus der Breite der Textlabels für die vorhergehenden Textfelder (5em) plus dem Abstand dieser Labels zu ihren Kontrollelementen (.3em). Hieraus ergibt sich für die folgenden Kontrollelemente inklusive des "Absenden"-Buttons ein linker Abstand von 5.3em, um sich an besagter Mittelachse auszurichten:  */
input.right {
	float: left;
	width: auto;
	clear: both;
	margin-left: 7.5em;
	margin-right: 0.3em;
	}

/* Aus unerfindlichen Gründen braucht diesmal der Mozilla eine Extrawurst in Form eines zusätzlichen em für den Abstand nach links: */
input[type=checkbox].right,
input[type=radio].right,
input[type=submit].right {
	margin-left: 7.5em;
	}

/* Durch die folgende Deklaration werden die float-Zustände wieder aufgehoben, so dass es danach ganz normal im Fluss des Dokumentes weitergehen kann: */
form br {
	/*clear: both;*/
	}

/* Durch das folgende Beispiel verwandelt sich der Mauszeiger beim Überfahren des Labels in eine Hand mit Zeigefinger: */
label {
cursor: pointer;
}

/* Nun wird die Hintergrundfarbe von Textfeldern ändern, sobald diese aktiviert sind, geändert. Damit teilen Sie Ihrem Benutzer deutlich mit, in welchem Abschnitt des Formulares er sich zur Zeit befindet und welche Eingabe als nächstes erwartet wird. Hierzu müssen Sie zunächst einmal die Hintergrundfarbe der Textfelder definieren: */
input, textarea {
	color: #000;
	background: #ddd;
	border: solid 1px #696969;
	width: 19em; 
	}

/* Als nächstes werden die Textfelder beim Erreichen des Fokus (also durch das Setzen der Einfügemarke per Tabulator oder Maus, oder auch durch Anklicken des damit verbundenen Labels) farblich hervorgehoben: */
input:focus, textarea:focus {
	color: #000;
	background: #fff;
	}

legend {
	font-weight: bold;
	line-height: normal;
	color: #999999;
	font-size: 1.1em;
}

fieldset {
	margin-bottom: 1em;
}

form .formularabsenden {
	padding: 0;
	margin:0;
	padding-top: 15px;
	padding-bottom: 15px;
}

/* ---------------------------------------------- */
/* ------------ Ende Formularelemente ----------- */
/* ---------------------------------------------- */

table {
font-size: 1em;
}

#suchnavigation {
	padding-top: 1em;
}