/* ====================================================================
stylesheet für florschuetzdoehnert 
Stand: 1. Onlinefassung
Datum: 28.5.09
Autorin: Ina Hattebier

Aufbau: 1. Kalibrierung und allgemeine Styles
		2. Styles für Layoutbereiche
		3. Sonstige Styles
		
====================================================================== */

/* ====================================================================
1. Kalibrierung und allgemeine Styles
====================================================================== */

/* Kalibrierung der wichtigsten Abstände */

* { padding: 0; margin: 0; }

p, ul, ol { margin-bottom: 1em; } /* Abstand nach unten */


/* Allgemeine Selektoren */

html { height: 101%; } /* erzwingt scrollbar in Firefox */

body {
	color: #341f17; /* Schriftfarbe*/
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 62.5%;
	line-height: 150%;
}

h3 { 
	font-size: 100%; 
	font-weight: bold;
	margin-top: 2em; 
}


/* ====================================================================
2. Styles für Layoutbereiche
====================================================================== */


#wrapper {
	position: relative; /* positioniert aber bleibt im fluss */
	background-color: white;
	width: 646px; /* Breite des Inhaltsbereiches */
	margin:  0 auto; 
}

#kopfbereich {
	position: relative; /* positioniert aber bleibt im fluss */
	top: 20px;
	background-image: url(medien/logoweb.gif);
	background-position: center bottom;
	background-repeat: no-repeat;
	padding-top: 18px;
}

#kopfbild { padding-bottom: 20px; }

h1 { visibility: hidden;
	line-height: 0; }

#navibereich {
	float: left;
	background-color: white;
	width: 133px; 
	line-height: 250%;
	padding-top: 22px;
}

#navibereich a {
	display: block; /* ganze Fläche anklickbar machen */
	width: 133px; 
	text-decoration: none; outline: none; /* Unterstreichung entfernen, gepunktetes Kästchen entfernen */
} 

#navibereich a:link { color: #341f17; } 
#navibereich a:visited { color: #341f17; }
#navibereich a:hover, a:focus { 
	color: #8f1921; 
	font-weight: bold; }

.anfang #navi01 a,
.kinder #navi02 a,
.uebersicht #navi02 a,
.erwachsen #navi03 a,
.termine #navi04 a,
.musik #navi05 a,
.vita #navi06 a,
.archiv #navi07 a,
.download #navi08 a,
.kontakt #navi09 a,
.impressum #navi10 a,
.home #navi11 a {
	color: #8f1921; 
	font-weight: bold; 
}

#navibereich a:active { 
	color: #8f1921; 
	font-weight: bold; 
}

#navibereich ul {
}
#navibereich  li {
	list-style-type: none; /* ohne Aufzählungspunkte */
}
	
#textbereich {
	width: 391px;
	float: left;
	background-color: #dcd6ca;
	padding: 28px 28px 60px 28px;
}

#textbereich p {
	width: 301px;
}

 #textbereich .fett {
	font-weight: bold;
}

#textbereich a { 
	text-decoration: none; outline: none; } /* Unterstreichung entfernen, gepunktetes Kästchen entfernen */
	a:link { color: #015d8f; } 
	a:visited { color: #015d8f; }
	a:hover, a:focus { color: #a21922;
	font-weight: normal; }

 #rot a, a:active {
	color: #8f1921; 
}

#textbereich li {
	display: inline; /* Listenpunkte nebeneinander anzeigen */
	list-style-type: none;  /* ohne Aufzählungspunkte */
	margin-right: 10px;
}

#textbereich img { 
	margin-right: 10px;
}

#galerie {
	position: absolute;
	top: 210px;
	left: 490px; 
}
	
.galeriebild { 
	margin-bottom: 10px;
}

#fussbereich {
	width: 447px;
	clear: both;
	padding: 10px 0px 15px 133px;
	text-align: center;
}

#fussbereich a { 
	text-decoration: none; outline: none; } /* Unterstreichung entfernen, gepunktetes Kästchen entfernen */
	a:link { color: #015d8f; } 
	a:visited { color: #015d8f; }
	a:hover, a:focus { color: #a21922;
	font-weight: normal; }
	a:active {
	color: #8f1921; 
}



/* ====================================================================
3. Sonstige Styles
====================================================================== */
.home #textbereich p, 
.impressum #textbereich p,
.kontakt #textbereich p,
.termine #textbereich p,
.download #textbereich p, 
.uebersicht #textbereich p {
	width: 391px;
}

/* Das Kontaktformular*/
form {
	width: 370px;
}
label { /* Beschriftung auf eigener Zeile */
	display: block;
	cursor: pointer; /* Mauszeiger wird zur Hand */
}
.uebersicht .flag,
.kinder .flag { 
	border:none;
	padding-right: 10px;
}
.download .flag { 
	border:none;
	padding-right: 0px;
}
.uebersicht img { 
	border:none;
}
input#absender,
textarea {
	width: 320px;
	border: 1px solid #8c8c8c;
	margin-bottom: 1em;
}
textarea {
	height: 7em;
}
input#absender:focus,
textarea:focus {
	background-color: #C4EDFF
}
/* ====================================================================
E N D E  D E S  S T Y L E S H E E T S 
====================================================================== */