/* ---------------------------------------------------- */
/* Stylesheet für die Bildschirmdarstellung
   der Internetpräsentation von Promobil                */
/* ---------------------------------------------------- */

/* Browsereinstellungen zurücksetzen  */

/* alle Abstände auf 0 */
* { margin: 0; padding: 0; } 

html 
	{ font-size: 100.01%;   /* Ausgleich von Rundungsfehlern */
	height: 101%;           /* erzwingt Scrollbar im Firefox */
	}


/* Schriftgröße wird auf 10 pt zurückgesetzt  */
body { 
	font-size: 62.5%; 
	font-family: Arial, Helvetica, Geneva, Verdana, SunSans-Regular, sans-serif; 
	background-color: white; 
	}

/*Link-Unterstreichungen entfernen */
a:link, 
a:visited, 
a:hover, 
a:focus, 
a:active { 
        color: #007bb6; 
        text-decoration: none; 
        }


/* Positionierung der einzelnen Container-Bestandteile
   des Layouts  */

/* Bereich für den "Wrapper" - zentriert die Präsentation 
   und gibt die Breite der Präsentation vor */  
#wrapper { 
        background-color: white; 
	width: 94em; 
	margin-top: 0; 
	margin-right: auto; 
	margin-left: auto; 
	padding-bottom: 1em;
 
	}

/* Container für die "Farbleiste" */
#farbleiste { 
        height: 2em; 
        }

* html #farbleiste {	/* Star-HTML-Hack */
	height: 2.7em;
	heig\ht: 2em;		
	}

/* Container für das Logo, das nur in
   der Printversion angezeigt wird */
#logo { 
       display: none; 
       }

/* Container für die Titelbilder, der auch die
   Subnavigation und den Styleswitcher aufnimmt */
#kopfbereich { 
	position: relative; 
	width: 94em; 
	height: 19em; 
	}
	
* html #kopfbereich {	/* Star-HTML-Hack */
	height: 19em; 
	margin-top: -1.4em; 
	wid\th: 94em;
	heig\ht: 19em; 
	mar\gin-top: -0.4em;	
	}

/* Container für die Subnavigation, die mittels
   position:absoulte und float: left über dem Titelbilds
   positioniert wird */
#subnavi { 
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 21em; 
        height: 2em; 
        z-index: 200; 
        float: left; 
        }

/* Container für den Styleswitcher, der mittels
   position:absoulte und float: right über dem Titelbilds
   positioniert wird */
#styleswitch { 
	position: absolute; 
	top: 0; 
	right: 0; 
	width: 20em;
        height: 2em;  
	z-index: 200; 
	float: right; 
        }

/* Container für den Inhaltsbereich -
   Es handelt sich um eine Box mit einer Gesamtbreite
   von 520 px (50em + 1em + 1em) und einem großen
   linken und rechten Außenrand, der die Navigation
   bzw. die Infoboxen aufnimmt */
#inhalt { 
	width: 50em; 
	margin-right: 20em; 
	margin-left: 21em; 
	padding-right: 1em; 
	padding-left: 1em;
        background-color: white;  
	}

/* Container für die Hauptnavigation -
   Wird mittels float:left im linken Rand
   des Inhaltsbereichs positioniert und um
   36 px nach oben verschoben. Position:relative
   misst diese Postion relativ zum umgebenden
   Inhaltselement. */
#hauptnavi { 
        position: relative; 
        top: -3.6em; 
        width: 21em; 
        z-index: 300; 
        float: left; 
        clear: both; 
        }

/* Container für die Infoboxen -
   Wird mittels float:right im rechten Rand
   des Inhaltsbereichs positioniert. */
#infocontainer { 
       position: relative; 
       width: 20em; 
       float: right; 
       }

/* Container für die Fusszeile -
   nimmt die Logos auf der Starseite auf.
   Clear: both hebt die 'floats' der vorhergehenden
   Boxen auf. */
#footer { 
       clear: both; 
       margin-left: 125px; 
        }

/* Formatierungen für die Subnavigation */
#subnavi ul { 
	background-color: #007bb6; 
	color: white; 
	font-size: 1.1em; 
	line-height: 2em; 
	padding-left: 0.6em; 
	}
	
#subnavi ul li { 
	list-style-type: none; 
	display: inline; 
	}
	
#subnavi a { 
	color: white; 
	text-decoration: none; 
	padding: 0.4em; 
	display: inline; 
	}
	
#subnavi a:hover, #subnavi a:focus { 
	background-color: #4da3cc; 
	text-decoration: underline; 
	}

/* Formatierungen für den Styleswitcher */
#styleswitch ul { 
	background-color: #007bb6; 
	color: white; 
	font-size: 1.1em; 
	line-height: 2em; 
	text-align: right; 
	padding-right: 0.6em; 
	}
	
#styleswitch ul li { 
	list-style-type: none; 
	display: inline; 
	}
	
#styleswitch a { 
	color: white; 
	text-decoration: none; 
	padding: 0.4em; 
	display: inline; 
	}
	
#styleswitch a:hover, #styleswitch a:focus { 
	background-color: #4da3cc; 
	text-decoration: underline; 
	}

/*Formatierungen für die Haupt-Navigation*/

#hauptnavi ul { 
        list-style: none; 
	background-color: #007bb6; 
        }

#hauptnavi ul ul {  
	background-color: #b3d8e9; 
	}
	
#hauptnavi ul ul ul {
        background-color: #fff; 
	}

#hauptnavi li + li {
	border-top: 1px solid #b3d8e9;
}

#hauptnavi li {
        vertical-align: middle;
        width: 21em; 
	}
	
#hauptnavi li li + li{
       border-top: 1px solid #007bb6;
	}
	
#hauptnavi li li li { 
	border-bottom: 1px solid #007bb6; 
	}
	
#hauptnavi ul li a { 
	display: block; 
	text-decoration: none; 
	color: #fff; 
	font-size: 1.1em; 
	line-height: 1.1em; 
	padding: 0.3em 0.6em 0.4em 0.8em; 
	}

#hauptnavi ul li ul li a { 
	padding: 0.3em 0.6em 0.4em 0.8em; 
	color: #32609b; 
	}
	
#hauptnavi ul li ul li ul li a { 
	color: #32609b; 
	padding: 0.3em 0.6em 0.4em 0.8em; 
	}
	
#hauptnavi ul li a:hover, #hauptnavi ul li a:focus {  
	color: white; 
	background-color: #4da3cc; 
	text-decoration: underline; 
	}
	
#hauptnavi ul li ul li a:hover, #hauptnavi a:focus { 
	color: #32609b; 
	background-color: #4da3cc; 
	text-decoration: underline; 
        }
		
#start .aktiv a { 
	background-color: #4da3cc; 
	}
	
#aktuelles .aktiv a { 
	background-color: #4da3cc; 
	}
	
#ebnen .aktiv a { 
	background-color: #4da3cc; 
	}
	
#wege .aktiv a { 
	background-color: #4da3cc; 
	}
	
#kontakt .aktiv a { 
	background-color: #4da3cc;
	}


/* Formatierungen für die Pfadangabe  */
#breadcrumb { 
        color: #666; 
        font-size: 1.1em; 
        text-decoration: none; 
        }

#breadcrumb li 
	{ color: #666; 
	font-size: 1.1em; list-style-type: none; display: inline; }
	
#breadcrumb ul li a:link, #breadcrumb ul li a:hover, ul li a:focus { 
	color: #666; 
	list-style-type: none; 
	display: inline; 
	}

/*Formatierungen für den Fließtext*/
/* Bestimmt Schriftfarbe und Größe sowie ZA */
#content { 
	color: #666; 
	font-size: 1.2em; 
	line-height: 1.6em;  
	}

#content h2 { 
	color: #007bb6; 
	font-size: 1.6em; 
	font-weight: 600; 
	line-height: 1.6em; 
	margin-top: 0.7em; 
	margin-bottom: 0.7em;
        padding: 0;
        border-bottom: 0px;
	}

#content ul {  
	}

#content ul li{ 
        margin-left: 1.0em;
        list-style: inside;
	list-style: disc; 
	}

	
#content h4 { 
	color: #666; 
	font-size: 1.1em; 
	font-weight: 600; 
	line-height: 1.6em; 
	margin-bottom: 0.8em;
        }

		
#content p { 
	margin-bottom: 0.8em; 
	}


p.linie { 
        width: 100%; 
        border-bottom: 1px dotted #007bb6; 
        }

.inh_zitat { 
	color: #007bb6; 
	font-size: 1.2em; 
	line-height: 1.8em; 
	padding-right: 1em;
	}

.inh_zwischenueber { 
        font-size: 120%; 
        font-weight: 600; 
        }

.inh_zwischenueberblau { 
	color: #007bb6; 
	font-size: 1.4em; 
	font-weight: 600; 
	line-height: 1.6em; 
	}

.inh_zwischenueberblauklein { 
	color: #007bb6; 
	font-size: 1.2em; 
	font-weight: 600; 
	line-height: 1.6em; 
	}

.inh_blaumitlinie { 
	color: #007bb6; 
	font-size: 1.2em; 
	line-height: 1.6em; 
	vertical-align: middle; 
	width: 200px; 
	border-bottom: 1px solid #007bb6; 
	}


/* Allgemeine Schriftformatierungen*/

br     { 
	line-height: 0.8em; 
	}

strong { 
        font-weight: 700; 
       }

bold { 
        font-weight: 700; 
       }

italic { 
	font-style: italic; 
	}

acronym { 
        border-bottom: 1px dotted; 
        cursor:help;
        }

abbr { 
        border-bottom: 1px dotted; 
        cursor:help;
        }

/* Formatierungen für die Infobox*/
.infobox { 
        background-color: #cde5f1;
        margin-top: 1.6em; 
        padding-bottom: 1.2em; 
        border-bottom: 1px solid #007bb6; 
        }
	
.infobox h2 { 
	color: #fff; 
	font-size: 1.2em; 
	font-weight: normal; 
	background-color: #007bb6; 
	vertical-align: middle;  
	padding: 0.4em 1em 0.4em 1.7em; 
        }

.infobox p { 
	color: #555; 
	font-size: 1.2em; 
        line-height: 1.4em;
	font-weight: normal;
        margin-bottom: 0.7em;
        margin-left: 1.7em;
        margin-right: 1.7em;
        }
	
.info_fettblau { 
        color: #007bb6; 
        font-size: 1.1em; 
        font-weight: 600; 
        line-height: 1.4em;  
        }

.infobox a:link, a:hover, a:focus { 
        color: #007bb6; 
        text-decoration: none; 
        }

.infobox a:visited { 
        color: #007bb6; 
        text-decoration: none; 
        }


/* Formatierungen für die Formulare */
form { 
        background-color: #cde5f1; 
        color: #666; 
        font-size: 90%; }
	
form p { 
	background-color: #cde5f1; 
	color: #666; 
	font-size: 1.2em; 
	line-height: 1.6em; 
	font-family: Arial, Helvetica, Geneva, Verdana, SunSans-Regular, sans-serif; 
	padding-right: 0.6em; 
	padding-left: 0.6em; 
	}
	
form h2 { 
	color: #007bb6; 
	font-size: 1.1em; 
	font-weight: 600; 
	line-height: 1.6em; 
	margin-top: 1.6em; 
	margin-bottom: 0.8em;
        margin-left: 0.6em;  
	padding-right: 0.6em; 
        border-bottom: 1px dotted #007bb6; 
	}

form label { 
        font-size: 1.2em; 
        line-height: 2em; 
        margin-left: 0.6em; 
        }
	
#adresse label { 
	font-size: 1.2em; 
	line-height: 1.6em; 
	margin-right: 0.6em; 
	margin-left: 1.2em; 
	}
	
#adresse input { 
	font-size: 1em; 
	line-height: 1.6em; 
	margin-left: 1.2em; 
	}
	
/* Formatierungen für die Bilder*/
/* des Contentbereichs          */
#content .inh_imgright { 
        width: 11.7em; 
        height: 8.75em; 
        float: right; 
        margin-right: 0.8em; 
        margin-bottom: 1em; 
        margin-left: 0.8em; 
        }

#content .inh_imgrightbig { 
        width: 300px; 
        height: 200px;  
        float: right; 
        margin-right: 0.8em; 
        margin-bottom: 1em; 
        margin-left: 0.8em; 
        }

#content .inh_imgrighthoch { 
	margin-right: 0.8em; 
	margin-left: 0.8em; 
	width: 12em; 
	height: 16em; 
	float: right; 
	margin-bottom: 1.6em; 
	}

#content .inh_imgwunschhoch { 
	margin-right: 0.8em; 
	margin-left: 0.8em; 
	width: 12em; 
	height: 18em; 
	float: right; 
	}

#content .inh_imgwunschquer { 
	margin-right: 0.8em; 
	margin-left: 0.8em; 
	width: 12em; 
	height: 12em; 
	float: right; 
	}

#content .inh_imgspende { 
	width: 24em; 
        height: 18em; 
        }

#content .inh_imgcafe { 
	width: 24em; 
	height: 8.8em; 
	}

#content .inh_imgifd { 
	margin-right: 0.8em; 
	margin-left: 0.8em; 
	width: 11.7em; 
	height: 11.7em; 
	float: right; 
	margin-bottom: 0.8em; 
	}

#content .inh_imgkokobe { 
        width: 11.7em; 
        height: 8.75em; 
        float: right; 
        margin-right: 0.8em; 
        margin-bottom: 1em; 
        margin-left: 0.8em; 
        }

#content .inh_imgkontakt { 
        width: 22.5em; 
        height: 19.3em; 
        float: right; 
        margin-right: 0.8em; 
        margin-left: 0.8em; 
        }


/* der Infoboxen                */
#infobox .info_imghoch { 
         width: 13.3em; 
         height: 18.3em;  
         }

#infobox .info_imgquer { 
         margin: 0 0 0.7em; 
         width: 13.3em; 
         height: 9.8em; 
         }

/* Formatierungen für den Footer*/
#footer p { 
       font-size: 1em;
       color: #666;
	}

#footer img { 
       margin-right: 2.5em; 
       border-width: 0; 
       float: left;
       }


/* Unsichtbare Anzeigen */ 
.unsichtbar { 
         position: absolute; 
         top: -1000px; 
         left: -1000px; 
         width: 0; 
         height: 0; 
         overflow: hidden; 
         display: inline; 
         }


/* Clearfix */
.clearMe {
       clear: both;
	}