/*==============================================
 ----------------
| CSS-Styleguide |
 ----------------

Aufbau dieser CSS:
	0. Styleguide
	1. Layoutvorgaben des Browsers zuruecksetzen
	2. Seitenlayout und Masze (Body, Spalten, Allgemeines)
	3. Inhaltsbereich
	4. Fusszeile
	5. Linke Spalte (Navigation)
	6. Rechte Spalte
	7. Kontaktformular	
	8. Allgemeine Fixes fuer W3C-konforme Browser
	   + Formatierung Microformats

Ausgelagert:
	ie.css: IE-spezifische Fixes
	print.css: Drucklayout

Richtlinien zum CSS-Aufbau:
	- Bereichs-IDs/Klassen explizit den Selektoren voranstellen
	- Besser redundant sein als intransparente Vererbung riskieren
	  (z.B. sind orange Links zweimal definiert: "#inhalt a" und "#rechtespalte a")
	- Globale Stile (ohne vorangestellte Bereichs-ID) vermeiden
	- Eigenschaften ZENTRAL in Abschnitt (1) zuruecksetzen, NICHT LOKAL
	- Hacks in Datei (ie.css) bzw. Bereich (8) auslagern

Richtlinien zum Code:
	- Allgemein:
		Statt "clever" besser explizit sein
		Kommentieren
	- Keine redundanten Eigenschaften "zur Sicherheit" nochmal setzen
	  (z.B. nicht "padding: 0 0 0 20px". Besser: "padding-left: 20px")
	- Box-Model-Rechnungen kommentieren
	- Immer Strichpunkt ";" hinter Eigenschaften
	- Immer Zeilenumbruch nach Selektor und zwischen Eigenschaften
	- margin/padding/border: 3-Argument-Variante vermeiden
	  (etwa "padding: 0 0 3px")
	- Zahlen < 0 mit Null schreiben: "0.5em" statt ".5em"
	- Hex-Farbangaben stets sechsstellig (nicht 3stellig)

  ==============================================*/



/*==============================================*/
/* Layoutvorgaben des Browsers zuruecksetzen    */
/*==============================================*/

/* Alles */
body, h1, h2, h3, h4, p, blockquote, ul, ol, li, img, form, fieldset, label, a, strong, em, b, i, input, textarea, table, thead, tfoot, tbody, tr, td, th
{
	font-family:			Verdana,Arial,sans-serif;
	margin:				0;
	padding:			0;
	font-size: 			1em;
	font-style: 			normal;
	font-weight: 			normal;
	text-decoration:		none;
	color: 				inherit;
	line-height:			inherit;
}
/* Alles ausser Formular-Felder */
body, h1, h2, h3, h4, p, blockquote, ul, ol, li, img, form, fieldset, label, a, strong, em, b, i
{
	border:				none;
	outline:			none;
	background-color:		transparent;
}
/* Listen */
ol, ul
{
	list-style-type:		none;
}
body
{
	line-height:			100%;
}


/*==============================================*/
/* Seitenlayout (Body, Spalten, Allgemeines)    */
/*==============================================*/

body {
	font-size:93%;
	color:#3f3f3f;
	background-color:#9ca3ab;
	padding-top:10px;
	position:relative;
}

.nurscreenreader {
	display:block;
	position:absolute;
	left:-1500px;
	top:-1500px;
	width:0;
	height:0;
	overflow:hidden;
}

.schatten {
	/* Zentrieren */
	margin-left:auto;
	margin-right:auto;

	/* Nach rechts unten versetzen */
	position:relative;
	top:1px;
	left:1px;
	
	width: 986px;
	border: 1px solid #91989f;
	border-width: 0 1px 1px 0;
	background-color: #82888f;
	margin-bottom: 10px;
} 
#kopf, #koerper
{
	/* Schatten-Versatz ausgleichen */
	position:relative;
	top:-1px;
	left:-1px;
}

#kopf { /* Gesamtbreite: 987px incl. border, Gesamthoehe 179 incl. border */
	/* Inhalt des Kopfs (Logo, Links, etc.) landet in weisser Flaeche */
	width:211px; /* Breite der weissen Flaeche */
	height: 167px; /* Hoehe der weissen Flaeche */
	overflow:visible;

	padding-left: 755px; /* 750+5 */
	padding-right: 20px; /* 15+5 */
	padding-top: 5px;
	padding-bottom: 5px;

	/* Bilddimensionen: 976x167 */
	background:#ffffff url(kopfbild-1.jpg) no-repeat;
	background-position: 5px 5px; /* weissen Rand lassen */	
	color:#3f3f3f;
}
#kopf .untenausrichten
{
	position:absolute;
	bottom:5px;
	width:211px; /* Fuer IE */
}
#kopf a
{
	display:block;
	float: left;
	border-left: 1px solid;
	padding: 2px 4px;
	font-size: 0.8em;
	color: #008342;
	/*font-weight: bold; /*sieht nur bei Arial gut aus */
	font-family: Arial, sans-serif; /* neu: Impressum */
	text-decoration: none;
}
#kopf a:hover
{
	text-decoration: underline;
}
#kopf a#logo
{
	clear:left;
	padding-left:30px; /* neu: Impressum; war: 38 */
	padding-bottom:22px;
	border:none;
}
#kopf a.first
{
	clear:left;
	margin-left:18px; /* neu: Impressum; war: 41 */
	border:none;
}

#koerper { /* Gesamtbreite: 987px incl. border */
	border:5px solid #ffffff;

	width:976px;
	background-color: #ffffff;
	background-image: url(hg_koerper.gif);
	background-repeat: repeat-y;
	background-position:top left;

	font-size: 0.8em;
	color: #3f3f3f;
}

/* Container fuer Inhalt und Linke Spalte. Ermoeglicht
   Screenreader- und Suchmaschinen-freundliche Reihenfolge in HTML:
   1. Inhalt, 2. Navigation, 3. Rechte Spalte */
#linkswrapper {
	float:left;
	width:750px;
}

/* Position und Groesse des Hauptinhalt-Containers; inhaltliche Formatierungen s. unten
--------------------------------------------------------*/

#inhalt {
	float:right;
	width: 464px;
	padding: 2em 30px 0 35px;
	line-height: 150%;
}

/* Position und Groesse des Linke-Spalte-Containers; inhaltliche Formatierungen s. unten
--------------------------------------------------------*/
#linkespalte {
	float:right;
	width: 221px;
}

/* Position und Groesse des Rechte-Spalte-Containers; inhaltliche Formatierung s. unten
--------------------------------------------------------*/
#rechtespalte {
	float:right;
	width: 221px;
	border-bottom:3px solid #ffffff;
}


/*==============================================*/
/* Inhaltsbereich (inhaltliche Formatierung)    */
/*==============================================*/

#inhalt h1, #inhalt h2 {
        font-family: 'Lucida Grande',Helvetica,Arial,sans-serif; /*'Trebuchet MS',*/
	font-size:1.7em;
	margin-bottom: 0.85em;
	line-height:120%;
	font-weight:bold;
	color:#008342;
}
#inhalt h2 {
	font-size:1.1em;
}
#inhalt h3 {
	font-size:1em;
	margin-bottom: 0.25em;
	font-weight: bold;
}
#inhalt p {
	margin-bottom: 1em;
}
#inhalt ul {
	list-style:none;
	padding-left: 20px;
	margin-bottom: 1em;
}
#inhalt ol {
	padding-left: 20px;
	margin-bottom: 1em;
	list-style-type: none;
}
#inhalt li {
	margin-bottom: 0.25em;
}
#inhalt ul li li {
	list-style:square;


}
#inhalt a {
	color:#f5830c;
	text-decoration:underline;
}
#inhalt a:hover, #inhalt a:active, #inhalt a:focus {
	color:#f5830c;
	text-decoration:none;
}
#inhalt a.moreright {
	display:block;
	text-align:right;
}
#inhalt a.moreleft {
        display:block;
        text-align:left;
}
#inhalt a.moreright, #inhalt a.moreleft {
	margin-bottom:1em;
}
#inhalt a.external-link, #inhalt a.external-link-new-window {
        background:url(../img/icons/external.gif) right center no-repeat;
        padding-right:15px;
}
#inhalt a.download {
        background:url(../img/icons/download.gif) right center no-repeat;
        padding-right:14px;
}
#inhalt a.pdf {
        background:url(../img/icons/pdf.gif) right center no-repeat;
        padding-right:17px;
}
#inhalt .toplink a {
	float:right;
	font-size: 0.8em;
	text-align:right;
	color: #999797;
	text-decoration: none;
	padding-left:15px;
	background:url(../img/icons/top.gif) no-repeat left center;
}
#inhalt .toplink a:hover {
	text-decoration: underline;
}
#inhalt strong, #inhalt b {
	font-weight:bold;
}
#inhalt em, #inhalt i {
	font-style:italic;
}
#inhalt sub {
        vertical-align: sub;
        font-size: 0.85em;
}
#inhalt sup {
        vertical-align: super;
        font-size: 0.85em;
}

/* hinzugefügt dlwerner 28. Mai 2008: */
#inhalt img {
    margin-left: -10px;
}
/*++++++++++++++++++++*/

#inhalt abbr {
	border: none;
	color: inherit;
	background-color: inherit;
}

#inhalt .box, #inhalt .teaser {
	padding: 10px;
	margin-bottom: 16px;
	border:1px solid #d2d2d2;
}
#inhalt .box h2, #inhalt .box p  {
	margin-bottom: 0.25em;
}
#inhalt ul.box {
	padding-left: 26px;
}
#inhalt .teaser img {
	float: left;
	margin-left: 1px;
}
#inhalt .teaser h2, #inhalt .teaser p, #inhalt .teaser div {
	margin-bottom: 0.25em;
	margin-left: 180px;
}
#inhalt .indent {
	margin-left:20px;
}
#inhalt .align-left {
	text-align: left;
}
#inhalt .align-right {
	text-align: right;
}
#inhalt .align-center {
	text-align: center;
}
#inhalt .align-justify {
	text-align: justify;
}
#inhalt table.gitter {
        font-size:0.9em;
        border-collapse: collapse;
        margin-bottom: 1em;
}
#inhalt table.gitter td, #inhalt table.gitter th {
	border: 1px solid #aaaaaa;
	padding: 2px;
	text-align:left;
}
#inhalt table.gitter th, #inhalt table td.hinterlegt, #inhalt table .hinterlegt td {
	background-color: #e0e0e0;
	font-weight: bold;
	color:#000000;
}


/* Fusszeile 
--------------------------------------------------------*/

#fusszeile {
	clear:left;
	margin: 0 256px 1em 256px;
	padding-top: 2em;
	text-align: center;
	font-size: 0.8em;
	color: inherit;
	background: #ffffff url(../img/hg_trennlinie_horizontal.gif) repeat-x top left;
}
#fusszeile a {
	float: left;
	width:115px;
	color: #999797;
	background-color: inherit;
	text-decoration: none;
}
#fusszeile a:hover {
	text-decoration: underline;
}
#fusszeile .first {
	text-align:left;
}
#fusszeile .last {
	float: right;
	text-align:right;
} 
#fusszeile img {
	vertical-align: middle;
} 
#fusszeile #fussnote {
	clear:left;
	background: url(../img/punktlinie.gif) repeat-x left top;
	margin-top: 2em;
	padding-top: 1em;
	position: relative; /* wg. IE6 */
} 



/* Kommentar as20080907:
      Wofuer ist #kontakt_mitarbeiter gedacht?
      In welchen Bereich gehoert es -- z.B. in #inhalte?
      Ich habe keinen Einsatz dieser ID im ganzen Webauftritt gefunden.
      
      TODO: Letzter Verwendungscheck und dann --> rauswerfen!
*/
/* Kontakt Mitarbeiter
---------------------------------------------------------------
#kontakt_mitarbeiter .box div {
	margin-left: 140px;
}*/

/*==============================================*/
/* Linke Spalte (Navigation) (Inneres)          */
/*==============================================*/

#menue
{
	margin-bottom:2em;
	border-bottom:2px solid #ffffff;
	background-color:#f2f3f4;
}
#menue h3
{
	/*padding:5px 0 2px 9px; sah nur bei Arial gut aus */
	padding:5px 4px 5px 15px;
	border-bottom:1px solid #ffffff;
	color:#ffffff;
	font-weight: bold;
	text-transform:uppercase;
        background-image:url(navbar.gif);
        background-repeat:no-repeat;
        background-position:0 0;
}
#menue h3 a {
	display:block;
	color:#2a6ea3;
	font-weight: bold;
        font-family:'Trebuchet MS','Lucida Grande',Helvetica,Arial,sans-serif;
}

/* Bunte Navigationspunkte */
#menue .hauptnav1
{
	/*background-color:#ec9436;*/
}
#menue .hauptnav2
{
	/*background-color:#7fb9df;*/
        background-position:0 -80px
}
#menue .hauptnav3
{
	/*background-color:#a086e1;*/
        background-position:0 -160px;
}
#menue .hauptnav4
{
        background-position:0 -240px;
	/*background-color:#b2d244;*/
}
#menue .hauptnav5
{
        background-position:0 -320px;
	/*background-color:#4d8ec9;*/
}
#menue .hauptnav6
{
        background-position:0 -400px;
	/*background-color:#cb4a6d;*/
}
#menue .hauptnav7
{
        background-position:0 -480px;
	/*background-color:#6fbda5;*/
}
#menue .hauptnav8
{
        background-position:0 -560px;
	/*background-color:#d7945e;*/
}
#menue .hauptnav9
{
        background-position:0 -640px;
	/*background-color:#f4c524;*/
}
#menue .hauptnav10
{
        background-position:0 -720px;
	/*background-color:#8f898f;*/
}


#menue ul
{
	font-size:.9em;
	border-bottom:2px solid #ffffff;
}
#menue ul ul
{
	font-size:.95em;
	border-bottom:none;
}
#menue ul a
{
	display:block;
	color:#3f3f3f;
	padding:5px 4px 5px 15px;
	border-bottom:1px solid #ffffff;
}
#menue ul a:hover,#menue ul a:active,#menue ul a:focus
{
	background-color:#e7e7e7;
	color:#101010;
}
#menue ul ul a
{
	background-image:url(../img/menuebullet.gif);
	background-position:15px 0.7em;
	background-repeat:no-repeat;
	padding:3px 4px 3px 26px;
}
#menue ul a.aktiv
{
	font-weight:bold;
	color:#2a2a2a;
	background-color:#dadbdc;
	/*color:#2a6ea3;
	background-color:#dce2ea;*/
}

/*==============================================*/
/* Rechte Spalte (Inneres)                      */
/*==============================================*/

#rechtespalte {
	margin-top:-3px;
	line-height: 130%;
	background-color: #f2f3f4;
	font-size: 0.9em;
}
#rechtespalte h2 {
        font-family:'Trebuchet MS','Lucida Grande',Helvetica,Arial,sans-serif;
	font-size: 1.176em;
	margin-bottom: 0.75em;
	padding: 10px 18px 9px;
	border-bottom: 1px solid #ffffff;
	border-top: 3px solid #ffffff;
	background-color: #dce2ea;
	color: #2a6ea3;
}
#rechtespalte h3 {
	margin-bottom: 0.25em;
	padding: 0 18px;
	font-weight:bold;
}
#rechtespalte p {
	margin-bottom: 1em;
	padding: 0 18px;
}
#rechtespalte p img {
	margin-bottom: 0.5em;
} 
#rechtespalte a {
	color:#f5830c;
	text-decoration:underline;
}
#rechtespalte a:hover, #rechtespalte a:active, #rechtespalte a:focus {
	color:#f5830c;
	text-decoration:none;
}


/*==============================================*/
/* Kontakt-Formular                             */
/*==============================================*/

#kontakt /* (form-Element) */
{
   clear:both;
   font-size: 0.95em;
   margin-top: 2em;
   padding: 1em;
   width:34em;
   background-color: #f9fdfe;
   border:1px solid #dddddd;
}
#kontakt h2
{
   font-size: 1.05em;
}

#kontakt fieldset
{
   margin-top:		1.2em;
   width:32em;
}

#kontakt label
{
   display: block;
   position: relative;
   width: 11em;
   padding-right: 21em;
   margin-top: 0.5em;
   text-align: right;
}
#kontakt .required
{
   font-weight:bold;
}
#kontakt input
{
   display: block;
   position: absolute;
   bottom: -0.1em;
   left: 11.5em;
   width: 20em;
}
/* Honigtopf
#kontakt input#email
{
	display:block;
	position:absolute;
	left:-1500px;
	top:-1500px;
	width:0;
	height:0;
	overflow:hidden;
}
*/
#kontakt label.textarea
{
	height: 7em;
}
#kontakt textarea
{
   display: block;
   position: absolute;
   top: 0;
   left: 11.5em;
   width: 20.3em;
   height: 7em;
}

/* Sonderbehandlung PLZ/Ort */
#kontakt .zipcitylabels label
{
   display: inline;
   position: static;
   width: auto;
   padding: 0;
   margin: 0;
}
#kontakt .zipcitylabels
{
   display: block;
   position: relative;
   width: 11em;
   padding-right: 21em;
   margin-top: 0.5em;
   text-align: right;
}
#kontakt .zipcitylabels #zip
{
   width: 6em;
}
#kontakt .zipcitylabels #city
{
   left: 18.5em;
   width: 13em;
}


/* Checkboxen und Radiobuttongroups */

#kontakt .selectionGroup
{
   position: relative;
   text-align: right;
}
#kontakt .selectionGroup label
{
	padding-right: 0;
	padding-left: 11.5em;
	width: 20em;
	margin-top: 0.2em;
	text-align: left;
}
#kontakt .selectionGroup input
{
	position: static;
	display: inline;
	width: auto;
	border: none;
}


#kontakt button
{
	display: block;
	font-size: 1em;
	margin-top:0.5em;
	margin-left:11.8em;
}
#kontakt #messageelem
{
	display:block;
	clear:both;
	font-size: 1em;
	margin-top:0.5em;
	margin-left:11.8em;
	font-weight: bold;
	color:	#994422;
}

#kontakt label strong /* Fehlermeldung beim Feld */
{
	display: none;
	width: 10em;
	position: absolute;
	top: -0.2em;
	left: -11em;
	padding: 0.35em;
	text-align: left;
	font-size: 0.85em;
	background-color: #ffcf73;
	border:1px solid #f5bd52;
	border-width: 0 1px 1px 0;
	color: #333333;
	font-weight: normal;
}
#kontakt label strong.visible
{
   display:block;
}

/*==============================================*/
/* Allgemeine Fixes fuer W3C-konforme Browser   */
/* + Formatierung Microformats                  */
/*==============================================*/

/* Fuer IE-spezifische Fixes: siehe ie.css */

/* Formatierung Microformats */

.vcard .country-name {
	display:none;
}
#inhalt .vcard .adr, #inhalt .vcard .wrap, #inhalt .vcard {
	margin-bottom: 1em;
}
.vcard abbr {
        border:none;
        text-decoration:none;
}

/* Float-Fixes  */
/* (Container soll gefloatete Elemente umschliessen) */

/* W3C-Browser */
#kopf:after, #koerper:after, #inhalt .teaser:after, #inhalt .toplink:after, #kontakt label:after, #kontakt fieldset:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	overflow:hidden;
}