body {					/*eigentliche Seite*/
	background-color:#6da0f2; /*Hintergrundfarbe hellblau*/
	background-image: url('images/hintergrund.jpg'); /*Hintergrundbild: Himmel mit Schleierwolken*/
	background-size: 100% 100%; /*Hintergrundgröße*/
	margin: 0; /*kein Rand*/
}

header{					/*oberer Bereich*/
	width: 100%; /*über die ganze Breite*/
	clear: both; /*alles vorherige löschen*/
	height: 145px; /*Höhe*/
	background-image: url('images/banner2.jpg'); /*Hintergrund: grün mit Farbverlauf*/
	background-size: 100% 100%; /*Hintergrundgröße*/
}

#kopf{					/*ebenfalls oberer Bereich bestehend aus Logo und Titel*/
	margin: 0px 20% 0px 20%;/*Randeinstellung oben rechts unten links*/
}

#logo {					/*Anzeige Logo*/
	opacity: 0.9; /*Transparenz*/
	margin: 10px; /*äußerer Rand*/
	float:left; /*Ausrichtung: links*/
	height:100px; /*Höhe*/
	padding: 10px; /*innerer Rand*/
	background-color: #ffffff; /*Hintergrundfarbe: weiß*/
}

#title {				/*Anzeige Titel*/
	float: left; /*Ausrichtung links*/
	padding-top: 60px; /*innerer Abstand von oben*/
	font-family: sans-serif; /*Schriftart*/
	color: white; /*Farbe: weiß*/
	font-size: 20; /*Schriftgröße*/
	font-weight: bold; /*Schriftstärke: fett*/
}
nav {					/*Navigationsbereich*/
	height:40px; /*Höhe*/
	background-image: url('images/banner2.jpg'); /*Hintergrund: grün mit Farbverlauf*/
	background-size: 100% 100%; /*Hintergrundgröße*/
	
}

button {				/*Menüpunkte*/
	float: right; /*Ausrichtung rechts*/
	display:none;/*erscheint nicht*/
}
#navi{					/*Navigationsleiste*/
	margin: -20px 20% 0px ; /*äußerer Abstand: oben rechts unten*/
	
}

nav li {				/*Menüfeld*/
	display: inline-block; /*Anzeige*/
	list-style: none; /*kein Listensymbol*/
	background-color: #ffffff; /*Hintergrundfarbe: weiß*/
	opacity: 0.8; /*Transparenz*/
	height: 20px; /*Höhe*/
	padding: 10px; /*innerer Abstand*/
	float: right; /*Ausrichtung rechts*/
	font-family: sans-serif; /*Schriftart*/
	font-size: 12pt; /*Schriftgröße*/
	text-align: center; /*Schrift: mittig*/ 
	position: relative; /*Position*/
}

nav a{					/*Menütext*/
	color: #888888; /*Schriftfarbe:grau*/
	text-decoration: none; /*keine Deco*/
}

nav li:hover, :focus {background-color: #ddffdd; } /*wenn Maus über Menüfeld, dann Hintergrund: grün*/

strong { font-family: sans-serif; } /*Text fett*/

h1 {					/*Hauptüberschrift*/
	font-family: sans-serif; /*Schriftart*/
	text-align: center; /*Schrift: mittig*/
	font-weight: normal; /*Schriftstärke*/
}
h2,h3,h4 {				/*Teilüberschriften*/
	font-family: sans-serif; /*Schriftart*/
	text-align: left; /*Schrift: links*/
	font-weight: normal; /*Schriftstärke*/
}

section {				/*Text mit Informationen*/
	clear: both; /*alles vorherige löschen*/
}


#content-block {			/*Textinhalt*/
	background-color: #FFFFFF; /*Hintergrundfarbe: weiß*/
	padding-top: 20px; /*innerer Abstand oben*/
	padding-left: 10px; /*innerer Abstand links*/
	padding-right: 10px; /*innerer Abstand rechts*/
	margin: 10px 20% 10px 20%; /*äußerer Abstand oben rechts unten links*/
	float: left; /*Ausrichtung links*/
	font-size: 12pt; /*Schriftgröße*/
}

footer {				/*Fußzeile*/
	clear: both; /*alles vorherige löschen*/
        width: 100%; /Breite*/
	height: 20px; /*Höhe*/
	background-image: url('images/banner2.jpg'); /*Hintergrund: grün mit Farbverlauf*/
	background-size: 100% 100%; /*Hintergrundgröße*/
	padding: 15px 0px 15px 0px; /*innerer Abstand oben rechts unten links*/
	font-size: 10pt; /*Schriftgröße*/
	font-family: sans-serif; /*Schriftart*/
	text-align: center; /*Schrift: mittig*/
}

a.standard-link {			/*Links der Fußzeile*/
	color: #0000ff; /*Schriftfarbe: blau*/
	text-decoration: none; /*keine Deco*/ 
}

@media screen and (max-width:510px) {	/*Bildschirmgröße klein*/
	#kopf{				/*Veränderung oberer Bereich bestehend aus Logo und Titel*/			
	margin: 0px 10px 0px 10px; /*äußerer Abstand oben rechts unten links*/
	}
	#title{				/*Veränderung Anzeige Titel*/
	  padding-top: 10px; /*innerer Abstand oben*/
	  padding-left: 20px; /*innerer Abstand links*/
	} 
	nav {				/*Veränderung Navigationsbereich*/
	  height: 200px;
	}
	button {			/*Veränderung Menüpunkte*/
	/*float: right;
	margin-top:100px;
	display:block;*/
}
	#navi{				/*Veränderung Navigationsleiste*/
	/*display: none;
	height: 180px;
	  background-image: url('images/banner2.jpg');
	  background-size: 100% 100%;*/
	margin: -25px 10px 0px 10px;
	}
      nav li {
        display: block;
        width: 50%;
      }
	#content-block {
	margin: 10px 0px 10px 0px;
	}	
}

@media screen (min-width:510px) and (max-width:760px) {
	#title{
	  font-size: 12px;
	}
	nav {
	  height:174px;
	  background-image: url('images/banner2.jpg');
	  background-size: 100% 100%;
	}
      nav li {
        display: block;
        width: 100%;
      }
}
@media screen only and (min-width:760px) {
	
      nav li {
        width: 100%;
	}
}