html {
  background: url(../img/bg_1a.png) #8dae5b; 
}

body {
  margin: 0 auto;
  padding: 2%; 
  max-width: 60em; 
  font-family: verdana, arial, sans-serif ;
  border-top: 0; 
  background: #ffefbf;
}

/* - Logo bzw. Kopf - */
header {
  background: url(../img/wald3.jpg) 0 0 repeat green; 
  height: 100%; 
  margin: 0; 
  padding: 0;
  text-align: center;
  line-height: 80px;
  font-size: 24px; 
  letter-spacing: -1px; 
}
header a#logo {
  color: #ffffff; 
  font-weight: bold;
  text-decoration: none;
}

/* - Der Hauptinhaltsteil - */
section{
 background: #ffefbf;
 padding: 0 2% 0 2%; 
 line-height: 1.5em; 
display : inline-block; max-width:60em;}

section ul li {list-style-type: none; font-weight: bold; color: #666666; line-height: 175%;} 

/* - Sidebar, linke Spalte - */
aside {
  width: 45%; 
  float: left; 
  display : inline-block;
  padding: 0em 1% 1em;
  margin: 0em 1% 0 1%;
  }
 
h1 { 
  font-size: 1.5em;
  font-weight: bold;
  line-height: 1.0em;
  padding: 0.4em 0 0.2em 0;
  margin: 0;
  border-bottom: 1px dashed #E6E6FA;
}
h2 {
  font-size: 1.2em;
  line-height: 1.0em;
  }
h3, h4 { font-size: 1.1em; font-weight: bold; }
h1, h2, h3, h4, h5, h6 { 
  color: #00800e;
  font-family: verdana, arial, sans-serif ;
}

aside ul li a:link {color:#00800e}
aside ul li a:visited {color:#7f7f7f}
aside ul li a:active {color:#ff0000}
aside ul li a:hover{color: #00ff00;	text-decoration: underline;}

p {font-size: 100%;}

#right { text-align: right;
 }
#center { text-align: center;
 }
#unt {
text-decoration-line: underline;
}

#mapdiv {max-width:990px; height:600px; 
	background-color:#ffffff; 
}

#mitte {
  width: 66%; 
  float: left; 
  display : inline-block;
  padding: 0em 1% 1em;
  margin: 0em 1% 0 1%;
  }
  
img { 
  border: solid 1px #aaa;
  padding: 1px;
}

.fleft { 
  float: left;
  margin: 0 1em 0.2em 0; 
  width:20%;
}
.fleft2 { 
  float: left;
  margin: 0 1em 0.2em 0; 
  width:100%;
}
.fleft3 {
  float: left;
  margin: 0 3em 0 0;
  padding: 1px;
  width:10%
}
.fright3 {
  float: right;
  margin: 0 0 0 1em;
  padding: 1px;
  width:11%
}

/* -- Layoutspezifisches -- */

footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie aside, falls aside länger sein sollte. */
  padding: 1%;
  text-align:center;
  border-top: medium solid green; /* Hiermit trennen wir optisch den footer vom eigentlichen Inhalt ab. */
}

footer .copy span {
	margin:0 auto;
	display:block;
}

/* - Menü - */
nav ul {
  background: #00800e;
  padding: 5px 7%; /* Je kleiner das Fenster desto kleiner soll auch der Abstand des Menüs rechts und links sein. */
  margin: 0;
  text-align: right;
  color: yellow; /* Farbe des Menüpunktes, der kein Link ist, Menüpunkt der Seite auf der wir uns gerade befinden. */
}
nav ul li {
  font-size: 1.0em;
  display: inline; 
  list-style-type: none;
  border-left: 1px solid white; /* Ein optischer Trennungsstrich */
  padding: 0 .5em 0 .5em ;
  font-weight: bold;
}

nav ul li a {
  color: white; /* Linkfarbe soll weiß sein. */
  /*padding:0.1em 1em;*/
  border-radius:0.3em;
  text-decoration: none;
}

nav ul li a:hover {   /* wenn die Maus drüberfährt, leucht der Link Gelb auf! */
	color:green;
	background:yellow;
	opacity:0.8;
}

/* 1-Spaltenlayout  mit Navigation unten*/
@media (max-width: 50em) {
h1 {
  font-size: 1.1em;
  }
  h2 {
  font-size: 1.0em;
  }
nav ul {
	display:block; 
	background:transparent;
	margin: 1em 0;
}
nav ul li{width:90%;margin: 5px 0;  }   /* Damit man auf SmartPhones navigieren kann, werden die Menüpunkte jetzt über 90% der Screen-Breite gezogen */
nav ul li.active{display:inline-block; width:100%; color:yellow; background:green; margin:5px 0; border-radius: 0.3em;text-align:center;}
nav ul li a{display:inline-block; width:100%; color:white; background:green; margin:5px 0; border-radius: 0.3em;text-align:center;}
nav ul li a:after{display:none;} 

#mitte {
  width: 40%; 
  float: left; 
  display : block;
  } 
  
section, 				/* kein Spalten-Layout mehr, alles wird untereinander dargestellt*/
section.spalte, 
aside {
	float:none;
	display:block;
	max-width:60em;
}

#mapdiv {max-width:90%; height:400px; 
	background-color:#ffffff; 
}
}