@charset "utf-8";

body {
	margin: 0;
	padding: 0;
	text-align: center; 
	background-color: #fcf9d8; /* zusammenhalten */
	}
img {
	border: 0px solid #fff;
	margin: 0px;
	padding: 0px;
	}
#container {
	width: 975px;/* zusammenhalten */
	margin: 0px auto; 
	text-align: left;
	color: #666;
	font: 12px Arial, Verdana, Helvetica, sans-serif;
	overflow: visible;
	padding: 0;
    }
/*###################################################################################*/	
#linie {
	padding: 0px;
	border-left: 20px solid #c74545; /* links rote Linie */
	border-right: 20px solid #2a8ab2; /* rechts blaue Linie */
	margin: 0px;
	background-color: #FF9900;
	height: 5px;
	}
#linie img, #fussbild img { 
	display:inline;
    }	
/*###################################################################################*/	
#header { 
	position: relative;
	left: 0px;
	top: 0px;
	width: 975px;
	z-index: 20;
	overflow: visible;
}
#contentheader {
	padding: 0px;
	border-left: 0px solid #ff0000; /* links keine Linie */
	border-right: 0px solid #0000ff; /* rechts keine Linie */
	margin: 0px 0px 0px 0px;
}
.plan { background: url(images/titelbild_plan.jpg) no-repeat; }
.schule { background: url(images/titelbild_schule.jpg) no-repeat; }
.kita { background: url(images/titelbild_kita1.jpg) no-repeat; }
.petra { background: url(images/titelbild_petra.jpg) no-repeat; }
.familie { background: url(images/titelbild_familie.jpg) no-repeat; }
.fuehrung { background: url(images/titelbild_fuehrung.jpg) no-repeat; }
.august { background: url(images/titelbild_august.jpg) no-repeat; }
.kontakt { background: url(images/titelbild_kontakt.jpg) no-repeat; }
.impressum { background: url(images/titelbild_impressum.jpg) no-repeat; }

/*####################obere linkleiste############################################*/	

#contentheader ul { /* enthält alle Schaltflächen , anzeige im ie 5.5 breiter*/
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 600px;
	border-left: 20px solid #c74545;/* links rote Linie */
    }
#contentheader li {
	float: left; 
	background-color: #2a8ab2;
	padding: 0px 5px;
	list-style-type: none;
	margin: 0px;
    }
#contentheader li.activ {
	float: left; 
	background-color: #ffe289;
	width: 85px;
	padding: 0px;
	list-style-type: none;
	margin: 0px 10px 0px 0px;	
    }
#header a.nav {
	display: block;  /* obere schaltflaechen*/
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
	margin: 5px;
	color: #fff;
	font-size: 16px;
}
#header a.nav:hover {
	color: #f90;
}
#header a.navactive {
	display: block;    /* obere schaltflaechen*/
	font-weight: bold;
	font-style: italic;
	text-decoration: none;
	margin: 5px;
	color: #f90;
	font-size: 16px;
}

/*#########################hauptteil###########################################*/

#hintergrund { /*macht seitenhintergrund sichtbar */
	margin: 0px;
	padding: 0px;
	background-color: #FFFFFF;
	background-image: url(images/hg.jpg);
    }

/*#########################linkes menue###########################################*/

#sidebar {/* Die Hintergrundfarbe wird nur für die Laenge des Spalteninhalts angezeigt. */
	float: left; 
	width: 345px; 
	margin: 0px;
	padding: 0;
    }
#contentsidebar { padding: 30px 0px 10px 40px; }
#menue {
	padding: 0px;
	margin: 0px;
    }
a.men   {
	color: #c74545;
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
	text-decoration: none;
	display: block;
	padding: 5px 5px 10px 20px;
	overflow: hidden;
	background: url(images/kreis.gif) no-repeat 5px 0.5em;
	margin: 0;
}
a.menactive   {
	color: #ff9900;
	font-weight: bold;
	text-decoration: none;
	display: block;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding: 5px 5px 10px 20px;
	background: url(images/punkt.gif) no-repeat 5px 0.5em;
	overflow: hidden;
	font-style: italic;	
	font-size: 16px;
}
a.men:hover  {
	color: #ff9900;
	font-weight: bold;
	text-decoration: none;
	background-color: #fff;
	background-image: url(images/punkt.gif);
	background-repeat: no-repeat;
	background-position: 5px 0.5em;
	font-style: italic;
}

/*###############################rechte seite###############################*/
#main { margin: 0px 0px 0px 370px;    }
* html #main { height: 1%;}/* wegen 3-Pixelsprung für IE bis 6.0? */

#mainContent {/* enthaelt Inhalt der Seite */
	padding: 0px;
	margin-bottom: 0px;
	overflow: visible;
	width: 600px;
  	}
#seitentitel { /* Schriftbild */
	padding: 0px;
	margin: 0px 0px 0px 0px;
	width: 250px;
	display: inline;
    }
#main a.verweis {/* Link im Fliesstext*/
	font-size: 12px;
	text-decoration: none;
	color: #f90;
	border-bottom: 1px dotted #f90;
	font-weight: normal;
	}
#main a.verweis:hover {/* Link im Fliesstext*/
	border-bottom: 1px solid #f90;
	}
#mainContent h2 {/* bei Seiten Navi links */
	color:#c74545;/* rot */
	font-size: 16px;
	margin-top: 0px;
	margin-right: 35px;
	margin-bottom: 5px;
	margin-left: 0px;
	font-weight: bold;
	text-align: left;
    }
#mainContent h2.blau {/* bei Seiten Navi oben */
	color:#2a8ab2;
	font-size: 16px;
	margin-top: 0px;
	margin-right: 35px;
	margin-bottom: 5px;
	margin-left: 0px;
	font-weight: bold;
	text-align: left;
    }
#mainContent h3 {/* orange Zwischenueberschrift */
	color:#f69621;
	font-size: 12px;
	font-weight: bold;
	margin-top: 20px;
	font-style: italic;
    }
#mainContent h4 {/* in den Kaesten */
    font-size: 12px;
    font-weight: bold;
    padding: 0px 5px;
    border-bottom: 1px dotted #666;
    border-left: 1px dotted #666;
    }
* html p { height: 1%;}/* wegen 3-Pixelsprung für IE bis 6.0? */

#mainContent p {
	margin-top: 0px;
	margin-right: 35px;
	margin-bottom: 10px;
	margin-left: 35px;
	text-align: left;
    }
#main ul.rot {
	padding: 10px;
	margin: 10px 35px 10px 35px;
	border: 2px dotted #c74545;
    }
#main ul.blau {
	padding: 10px;
	margin: 10px 35px 10px 35px;
	border: 2px dotted #2a8ab2;
    }
#main li {
	margin: 0px 0px 5px 20px;
	list-style-type: square;
    }
#main li li{
    margin: 0px 0px 5px 0px;
    list-style-type: square;
}
.blautext {/* im fliesstext */
	color:#2a8ab2;
    }
#fussbild { /* re fussbild */
	padding: 0px 15px 0px 0px;
	margin: 0px;
	display: block;
	text-align: right;
	clear: both;
	color: #f90;
    }
#links { /* untere linkleiste */
	width:320px; 
	float:left; 
	text-align: left;
}
a.link {/* untere Seitenlinks */
	color:#f90;/* orange */
	font-weight: bold;
	text-decoration: none;
	font-size: 10px;
    }
a.link:hover {
	text-decoration: underline;
    }
/*#############blume, hintergrundbilder, kontakt, impressum###############*/

#footer { 
	margin: 0px;
	padding: 5px 20px;
	font-size: 12px;
	background-color: #ff9900;
	clear:both;
	border-left: 20px solid #c74545;
	border-right: 20px solid #2a8ab2;
	color:#FFFFFF;
    }
#left{/* enthaelt blume */
	margin: 0px;
	padding: 0px;
	float:left;
	color:#FFFFFF;
    }	
#right{ /*kontakt, impressum */
	margin: 0px;
	padding: 0px;
	float:right;
    }		

a.kont {/* Impressum Kontakt */
	color:#2a8ab2;/* blau */
	font-weight: bold;
	text-decoration: none;
	margin-left: 5px;
    }
a.kont:hover {
        color:#c74545;/* rot */
    }

#pixelblume {/* anker fuer blume */
	position: relative;
	z-index: 26;
	width: 1px;
	height: 1px;
	left: -40px;
	top: -387px;
	overflow: visible;
}
#pixelhintergrund1 {/* anker fuer bild1 */
	position: relative;
	z-index: 17;
	width: 1px;
	height: 1px;
	left: -40px;
	top: -190px;
	overflow: visible;
}
#pixelhintergrund2 {/* anker fuer bild2 */
	position: relative;
	z-index: 20;
	width: 1px;
	height: 1px;
	left: 10px;
	top: -320px;
	overflow: visible;
}
#pixelhintergrund3 {/* anker fuer bild3 */
	position: relative;
	z-index: 21;
	width: 1px;
	height: 1px;
	left: 122px;
	top: -360px;
	overflow: visible;
}
#pixelhintergrund4 {/* anker fuer bild4 */
	position: relative;
	z-index: 23;
	width: 1px;
	height: 1px;
	left: 95px;
	top: -175px;
	overflow: visible;
}
#blume {/* enthaelt blume */
	color:#FFFFFF;
	height: 380px;
	width: 300px;
	left: 0px;
	top:0px;
	position: absolute; /* absolute bindet am linken bildrand fest */
	z-index: 25;
    }
#hintergrund1 {/* enthaelt bild1 */
	height: 124px;
	width: 124px;
	left: 0px;
	top:0px;
	position: absolute; /* absolute bindet am linken bildrand fest */
	z-index: 13;
    }
#hintergrund2 {/* enthaelt bild2 */
	height: 124px;
	width: 124px;
	left: 0px;
	top:0px;
	position: absolute; /* absolute bindet am linken bildrand fest */
	z-index: 19;
    }
#hintergrund3 {/* enthaelt bild3 */
	height: 124px;
	width: 124px;
	left: 0px;
	top:0px;
	position: absolute; /* absolute bindet am linken bildrand fest */
	z-index: 22;
    }
#hintergrund4 {/* enthaelt bild4 */
	height: 124px;
	width: 124px;
	left: 0px;
	top:0px;
	position: absolute; /* absolute bindet am linken bildrand fest */
	z-index: 24;
    }
/*######################spaeter fuer fuehrung.html###############################*/

.pixelfoto {
	height: 1px;
	width: 1px;
	position: relative;
	left: -220px;
	top: 10px;
	overflow: visible;

}
.foto {
	width: 200px;
	background: #fcf9d8;
	overflow: visible;
	position: absolute;
	border:1px solid #2a8ab2;
	left: 0px;
	top: 0px;
	color: #666;
	font: 12px Arial, Verdana, Helvetica, sans-serif;
}

/*###################################################################################*/

.fehler { /* Fehlerbeseitigung zwischen Überschrift und floatender Box */
        margin: 0px;
        padding: 0px;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }
.clearfloat { 
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    }

/*######################### formular ##################################*/
fieldset{
	border: 2px dotted #2a8ab2;
	margin: 30px 35px 0px;
	padding: 10px 10px 10px 20px;
}
legend{
	color: #FF9900;
	font-weight: bold;
	padding: 5px;
	background: #FFF;
}
input,textarea  {
	color: #000000;
	font-size: 12px;
	line-height: 14px;
	font-family:  Arial, Verdana, Helvetica;
	padding: 5px;
	border-top: 1px none #ff9900;
	border-right: 1px none #ff9900;
	border-bottom: 1px solid #ff9900;
	border-left: 1px solid #ff9900;
	width: 450px;
	background: #fcf9d8;
	margin: 0px 0px 20px;
	display: block;
}
input:focus, textarea:focus {background-color:#fFF;}
.button {
	color: #fff;
	background-color: #f90;
	width: 100px;
	border: 1px none #fff;
}
input.nicht {display:none}