/* generelle Einstellungen */
body {
	background-color:#A2CD5A;/*#86AD3B;  alt #6B8E23;*/
	font-family: "Arial", sans-serif; /* "Bitstream Vera Sans", "Verdana",*/
	line-height:18px;
	text-align:center;
}

* {
	margin:0px;
	padding:0px;
}

/* allgemeine Klasse für float left und float right - wird v.a. im Bereich Hauptfeld eingesetzt */
.left{
	clear:both;
	float:left;
}

.right{
	clear:both;
	float:right;
}

/* der Gesamtumfang der Seite, das umfassende */
#wrapper{	
	text-align:left;
	width:978px;
	margin:18px auto;	
	background-color: #FFFCEF;
}

/* den oberen Teil */

/*den Rahmen für den umgebenden div banner ausblenden */
#banner{	
	border:0px solid red;
}

/*links oben*/
#top-left{		
	background-image:url(../zu-den-fotos/diverse-fotos/gruenfrosch-186x120.jpg);		
	height:120px;
	width:186px;	
	float:left;
	position:relative;
}

/* rechts oben die Leiste */
#bild{	
	height:120px;
	width:792px;
	border:0px solid #FFFCEF;
	/*padding:0px;
	margin:0px;*/
	float:right;
	background-color:#FFFCEF;
}

/*Für die obere Leiste rechts, vier kleine Bilder nebeneinander als Bildleiste. Die Bilder sind als Inhalt unter HTML eingebaut, da kann ich sie einzeln auswechseln.*/
#banner-bilder{
	list-style:none; 
	/*Punkte der Listensortierung ausblenden*/
}

#banner-bilder li{
	border-left:1px solid #FFFCEF;/*#6B8E23;#86AD3B;*/
	/*text-align:center;*/
	float:left; 
	/* Bilder nebeneinander anordnen */
}

#banner-bilder li.pict-1,
#banner-bilder li.pict-2,
#banner-bilder li.pict-3,
#banner-bilder li.pict-4{
	width:197px;
	height:120px;	
}
/*

background-image:url(../zu-den-fotos/diverse-fotos/bussard-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/tulpe-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/kohlschnake-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/libelle-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/auftauchen-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/hummelschweber-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/auftauchen-197x120.jpg);
background-image:url(../zu-den-fotos/diverse-fotos/zauneidechse-3-197x120.jpg);
*/
#banner-bilder li.pict-1{
	background-image:url(../zu-den-fotos/diverse-fotos/tagpfauenauge-197x120.jpg);	
}

#banner-bilder li.pict-2{
	background-image:url(../zu-den-fotos/diverse-fotos/phlox-197x120.jpg);
}

#banner-bilder li.pict-3{	
	background-image:url(../zu-den-fotos/diverse-fotos/blesshuhn-197x120.jpg);
}

#banner-bilder li.pict-4{
	background-image:url(../zu-den-fotos/diverse-fotos/eistropfen-197x120.jpg);	
}

/*den unteren Teil*/

/*den Rahmen für den umgebenden div  grosse-felder ausblenden */
#grosse-felder{
	border:0px;
	height:auto;	
}

/*die Navigation*/
#navigation{
	background-color:#86AD3B;/* #6B8E23; Olive Drab - dunkler*/
	color:#FFFCEF;	
	width:186px;
	height:100%; 
	float:left;
	text-decoration:none;
	position:relative;
}

#navigation .navi-logos{
	margin:0px 16px;
	position:absolute;
	bottom:54px;
}

/*navigation erste Ebene*/
p.navi1,
p.navi1-aktiv{
	color:#FFFCEF;
	font-size:18px;	
	font-weight:700;
	line-height:16px;			
	margin:16px 0px 8px 18px;
	padding:0px 0px 2px 0px;

}
p.navi1{
	border-bottom:1px solid #86AD3B;/*#6B8E23;*/
}

p.navi1 img{
	border:0;
}

p.navi1 a{
	color:#FFFCEF; 
	font-size:18px;
	font-weight:700;
	line-height:16px;
	text-decoration:none;	
}

p.navi1 a:hover,
p.navi1 a:focus,
p.navi1 a:active{
	color:#A52A2A; 
}

/* Einstellungen für die Seite auf der sich jemand befindet*/
p.navi1-aktiv{		
	border-bottom:1px solid #FFFCEF;
}

p.navi1-aktiv a{
	color:#FFFCEF;
	font-size:18px;
	font-weight:700;
	text-decoration:none;	
}

p.navi1-aktiv a:hover{
	color:#FFFCEF; 
	text-decoration:none;
}

p.navi1-aktiv a:focus{
	color:#7CFC00; 
	text-decoration:none;	
}

/*Navigation zweite Ebene*/ 
p.navi2,
p.navi2-aktiv{
	color:#FFFCEF; 
	font-size:16px;
	font-weight:500;
	line-height:16px;	
	padding:0px 0px 2px 0px;
}

p.navi2{
	border-bottom:1px solid #86AD3B;/*#6B8E23;*/
	margin:3px 2px 8px 40px;
}

p.navi2 a{
	color:#FFFCEF;
	font-size:16px;
	font-weight:500;
	line-height:16px;
	text-decoration:none;	
}

p.navi2 a:hover{
	color:#A52A2A; 	
}

p.navi2 a:active{
	color:#A52A2A;	
}

p.navi2 a:focus{
	color:#A52A2A;	
}


/*Navi 2*/
p.navi2-aktiv{	
	border-bottom:1px solid #FFFCEF;		
	margin:3px 0px 8px 40px;	
}

p.navi2-aktiv a{
	color:#FFFCEF;
	font-size:16px;
	font-weight:500;
	text-decoration:none;
} 

p.navi2-aktiv a:hover{
	color:#FFFCEF;
	text-decoration:none;
}

p.navi2-aktiv a:focus{
	color:#7CFC00;
	text-decoration:none;	
}

/*Navigation dritte Ebene*/ 
p.navi3,
p.navi3-aktiv{
	color:#FFFCEF; 
	font-size:14px;
	font-weight:500;
	line-height:15px;	
	padding:0px 0px 2px 0px;
}

p.navi3{
	border-bottom:1px solid #86AD3B;/*#6B8E23;*/
	margin:3px 2px 8px 64px;
}

p.navi3 a{
	color:#FFFCEF;
	font-size:14px;
	font-weight:500;
	line-height:15px;
	text-decoration:none;	
}

p.navi3 a:hover{
	color:#A52A2A; 	
}

p.navi3 a:active{
	color:#A52A2A;	
}

p.navi3 a:focus{
	color:#A52A2A;	
}

/*Navi 3*/
p.navi3-aktiv{	
	border-bottom:1px solid #FFFCEF;		
	margin:3px 0px 8px 64px;	
}

p.navi3-aktiv a{
	color:#FFFCEF;
	font-size:14px;
	font-weight:500;
	text-decoration:none;
} 

p.navi3-aktiv a:hover{
	color:#FFFCEF;
	text-decoration:none;
}

p.navi3-aktiv a:focus{
	color:#7CFC00;
	text-decoration:none;	
}

/*Hauptfeld - der grosse Bereich rechts, der eigentliche Inhaltsbereich */
#hauptfeld{
	color:#547F00;  
	background-color:#FFFCEF;
	height:100%;
	width:792px;
	float:right;
}

/*Die Unterstreichung für Links herausnehmen*/
#hauptfeld a{
	text-decoration:none;
}

/*Überschriften*/
h1 {
	font-size:24px;
	color:#A52A2A;
	text-align:center;
	border-bottom:2px solid #D2691E;	 
	padding:16px; 	
	margin:0px 70px;	
}

h2 {
	font-size:18px;
	font-weight:500;
	text-align:center;
	color:#A52A2A;
}

h3{
	font-size:18px;
	color:#A52A2A;
	text-align:center;
	text-decoration:none;
}

h4{
	font-size:18px;
	color:#A52A2A;
	text-align:center;
}

p.ueberschrift{
	font-size:18px;
	font-weight:bold;
	color:#A52A2A;
}

p.ueberschrift-klein{
	font-size:16px;
	font-weight:bold;
	color:#A52A2A;
}

p.ueberschrift-klein:hover,
p.ueberschrift-klein:focus{
	color:maroon;	
}

p.ueberschrift:focus,
p.ueberschrift-klein:focus{	
	border:1px solid #A52A2A;
	padding:6px;
	margin:0px 90px;
}

p.ueberschrift a:link{
	font-size:18px;
	font-weight:bold;
	color:#A52A2A;
}

p.ueberschrift-klein a:link{
	font-size:16px;
	font-weight:bold;
	color:#A52A2A;
}


p.ueberschrift a:active,
p.ueberschrift a:hover,
p.ueberschrift a:focus,
p.ueberschrift a:visited,
p.ueberschrift-klein a:active,
p.ueberschrift-klein a:hover,
p.ueberschrift-klein a:focus,
p.ueberschrift-klein a:visited{
	color:maroon;			
}

p.ueberschrift a:hover,
p.ueberschrift-klein a:hover{	
	border-bottom:2px solid maroon;				
}

p.ueberschrift a:focus,
p.ueberschrift-klein a:focus{	
	border:1px solid #A52A2A;
	padding:6px;
	margin:0px 90px;
}

p.zentriert{
	font-size:16px;
	font-weight:normal;
	margin:4px 20px;
	text-align:center;			
	color:#A52A2A;	
}

p.zentriert a:link,
p.zentriert a:focus{
	font-size:16px;	
	color:#A52A2A;
}

p.zentriert a:focus{	
	border:1px solid #A52A2A;
	padding:4px 6px;
}

p.zentriert a:visited{	
	color:maroon;			
}

p.kleine-schrift{
	font-size:14px;
}


#text{
	font-size:16px;	
	margin:24px 50px 10px 50px; 
	color:#547F00;
}

/* das Foto von mir auf der Seite zu-mir */
#text img.zu-mir{
	float:right;
	margin:4px 0px 8px 26px;
}

#text ul li{
	margin:6px;
}

#text a:link{	
	color:#A52A2A;		
}

#text a:hover,
#text a:focus,
#text a:visited,
#text a:active{
	color:maroon;	
}

#text a:hover{
	text-decoration:underline;
}

#text a:focus{	
	border-bottom:1px solid #A52A2A;	
}

/*Startseite */
#startseite{
	font-size:16px;	
	text-align:center;
	width:550px;	
	margin:58px 40px 30px 120px;	
	padding:0px;/*48px 56px 40px 60px;*/
	color:#547F00;
	border:0px;
	border-style:double;
	border-color:#EECFA1;/*#EECFA1 - navahowhite - wirkt am edelsten; #BDB76B; - gruen - darkkhaki ? passt nicht so zum braun der Überschrift;  #CD853F - tan3 - braun macht sich ganz gut; #D2691E - das dunkelbraune von vorher ist es eher nicht;*/
}


/*"zu mir" Kontakt-Box

#box{
	clear:both;	
	font-size:16px;	
	width:644px;
	text-align:center;	
	margin:32px 36px 32px 48px;	
	padding:30px 24px 36px 24px;
	color:#547F00;
	border:1px ridge #D2691E;
}
*/ 
/*die Seite "für wen" */
ul#fuer-wen{
	list-style:disc;
	margin:8px 15px;
	}
ul#fuer-wen li{
	font-size:16px;
	line-height:18px;	
	margin:4px 0px;
}