body
	{
		text-align: center;						/* für mittige Ausrichtung bei alten Browsern*/
		background-image: url(images/meeresbucht.jpg);
		background-attachment: fixed;			/* damit die Dünenlandschaft, sprich der Hintergrund, nicht springt */
		font-family: Arial, sans-serif;
	}

header, nav, footer, aside, section						/* Um alte Browser anzusprechen*/
	{
		display: block;
	}

header
	{
		/* background-color:yellow; */
		background-image: url(images/banner.jpg);
		height: 151px;
		width: 900px;			/* Breite und Ausrichtung mitgeben, damit der Fennek nur einmal auftaucht im header */
		margin: 0 auto;
	}
	
	
header p							/* Betrifft alle Absätze im header */
	{
		/* background-color:orange; */
		text-align: right;
		padding-right: 15px;
	}
	
header a
	{
		color:white;
		text-decoration: none;
	}
	
*									/* Universalselektor, um alle Abstände auf Null zu setzen */
	{
		margin: 0;
		padding: 0;
	}

section h1
	{
		padding-top: 20px;
		padding-bottom: 0.4em;		/* em ist der relative Abstand */
		color:#DB7008;
		/* color:#dd9661; */
	}
	
section h2
	{
		/* color: #dd9661; */
		color:#DB7008;
		padding-top: 1em;
		padding-bottom: 0.6em;
	}

section h3
	{
		/* color: #dd9661; */
		color:#DB7008;
		padding-top: 1em;
		padding-bottom: 0.6em;
	}

section p
	{
		padding-bottom: 1em;		/* für alle Absätze in der Section der relative Abstand 1em */
	}

section table
	{
		border-collapse: collapse;
		width: 100%;
	}

section td, th
	{
		border: #248FF7 1px solid;
		padding: 8px;
	}
	
section ul
	{
		padding-left: 3em;
	}

section li
	{
		padding-bottom: 0.5em;
	}

.zutat
	{
		list-style-type:none;
		padding-left: 1em;
		font-style:italic;
	}
		
.rezept
	{
		float:right;
	}
	
ul#aufzaehl	{
	list-style-type: none;
}

a#top	{
	font-size: 12px;
	float: right;
}

a#list	{
	text-decoration: none;
}

a#medium	{
	text-align:center;
}

#wrapper
	{
		/* background-color:#eeeeee; */
		width:900px;
		/* border: 2px solid red; */
		margin: 0 auto;						/* Mittige Ausrichtung - nach oben Null Abstand, links u rechts der Platz gleichmäßig aufteilen*/
		text-align: left;				/* wieder mittige Ausrichtung des Textes, nachdem body gesetzt wurde. */
		background-image: url(images/durchsichtig8.png);		/* integrierte halbdurchsichtige Hintergrundgrafik */
	}

#logotext
	{
		padding-top: 50px;				/* Innenabstand von oben */
		font-size: 20pt;
		color: white;
	}
	
#steuerungoben
	{
		background-color:#248FF7;
		/* background-image: url(images/grau-50.png);	/* damit keine Lücke zwischen rechtem Bereich und Steuerung oben sichtbar ist */
		height: 24px;
	}
	
#steuerungoben ul
	{
		list-style-type: none;
	}
	
#steuerungoben li
	{
		display: inline;			/* nebeneinander platzieren der Steuerungspunkte */
	}

#steuerungoben a
	{
		display: block;		/* auf block setzen, da es sich beim a-Element um ein Inline-Element handelt */
		width: 150px;		/* Abstände der einzelnen Steuerungspunkte */
		/* background-color: yellow;*/
		float: left;		/* damit die Steuerungselemente nebeneinander liegen und umflossen werden */
		/* border-right: 1px solid red; */
		text-align: center;
		line-height: 24px;
		color: white;
		text-decoration: none;	/* keine Unterstreichung des Links */
	}
	
#steuerungoben a:hover
	{
		background-image: url(images/grau-50.png);
	}
	
#steuerunglinks
	{
		/* background-color:green; */
		width:220px;
		float:left;
	}
	
#steuerunglinks ul
	{
		padding-left: 2em;
		padding-top: 20px;
		list-style-type: none;			/* keine Aufzählungszeichen */
}

#steuerunglinks ul ul	{
	list-style-type: square;	/* hier geht es um die zweite Gliederungsebene - hier mit quadratischen Aufzählungszeichen */
}

	
#steuerunglinks li	{
	padding-bottom: 0.5em;
}

aside
	{
		/* background-color:#808000; */
		width: 175px;
		float:right;
	}
	
aside img
	{
		border: 1px solid silver;
	}

aside p
	{
		margin-left: 10px;
		margin-top: 20px;
	}
	
.flag
	{
		display:block;
		float:left;
		margin:5px;
		margin-left:7px;
		margin-bottom:20px;
	}

section
	{
		/* background-color:orange; */
		margin-left: 250px;						/*Damit die beiden linken und rechten Spalten sauber abgetrennt sind und das float nicht unten durch geht*/
		margin-right: 195px;
	}
	
footer
	{
		/* background-color:brown; */
		background-image: url(images/grau-50.png);
		color: white;
		text-align: center;
		clear: both;		/* Damit immer, auch bei wenig content, der footer alles umfasst */
	}	

h1	{
		color:red;
	}