/* Im folgenden Text finden Sie unsere Kommentare immer vor den einzelnen Befehlen eingefügt.

Der Hintergrund unseres Dokumentes ist blau. Wir definieren eine Schriftartfamilie und setzen Comic Sans MS davor. Falls 
ein Computer die gewünschte Schriftart nicht hat, wird er auf die jeweilig nächste weiterspringen. Wir wählen eine Schriftart
ohne Serifen, da für sehbehinderte Menschen das Lesen dieser Schrift einfacher ist.   */
body {
	background-color: Blue;
	font-family: Comic Sans MS, Verdana, Geneva, Arial, Helvetica, sans-serif;
}
/*Unsere Überschriften im Text sollen sehr groß (XL) sein. Ansonsten gibt es keine Extras. */
h1{
	font-size: x-large;
	font-style: normal;
}
/* Die nächst-kleinere Überschrift soll groß (L) sein. */
h3{
	font-size: large;
	font-style: normal;
}
/* Durch diese Überschrift wollen wir nochmal explizit auf etwas hinweisen. Die Größe ist groß (L), aber sie hebt sich durch die
Farbe (rot) ab. Außerdem ist die Schrift fett. */
h5{
	font-size: large;
	font-style: oblique;
	color: Red;
}
/* Hiermit regulieren wir die Zeilenhöhe in einer Liste. So können wir einen größeren Zeilenabstand erreichen. */
li{
	line-height: 24px;
}
/* Gerne wollten wir zwischen den einzelnen Zeilen einen festen Abstand haben. Deswegen haben wir für <br> den Abstand 
reguliert, so dass jetzt ein Zwischenraum zwischen den Zeilen ist.*/
br{
	line-height: 10px;
}
/* Insgesamt gibt es vier Felder in unserem Dokument. In allen Feldern haben wir ein Padding von 5px eingefügt, damit 
der Text nicht am Rand des Containers klebt. Alle Felder haben die gleiche Hintergrundfarbe, damit man bei Browserwechseln keine 
Schönheits-Probleme mit unterschiedlichen großen Containern hat. Die Höhe der Container unter dem Feldoben passt sich durch 
den Befehl height: auto; dem Inhalt automatisch an. 

Das Feldoben entspricht unserem Menu: blauer Hintergrund, extragroße (XL) normale Schrift, der Container ist mit 770px 
so breit, dass auch ein Benutzer mit einem kleinen Bildschirm die ganze Seitenbreite sehen könnte. */
#feldoben{
	background-color: Blue;
	font-size: x-large;
	font-style: normal;
	height: 120px;
	width: 770px;
	padding: 5px;
}
/* Das Feldlinks entspricht dem Etappen- und Literaturmenü. Der Container ist hochkant und nimmt mit einer Breite von 230px 
knapp ein Drittel des Bildschirms ein. Durch den Befehl float:left; ist er an der linken Bildschirmseite angeordnet. Oben 
lässt der Container einen Rand vom 10px zum Feldoben. Die Schrift ist groß (L). */
#feldlinks {
	background-color: Blue;
	width: 230px;
	height: auto;
	margin-top: 10px;
	font-size: large;
	float: left;
	padding: 5px;
}
/* Im Feldrechts wird unser Text in Blocksatz (text-align: justify;) erscheinen. Durch den Befehl margin-left: 240px; 
bewirken wir, dass der Container erst rechts neben dem feldlinks anfängt.*/
#feldrechts {
	font-size: large;
	margin-top: 10px;
	margin-left: 240px;
	height: auto;
	width: 526px;
	background-color: Blue;
	padding: 5px;
	text-align: justify;
}
/* Das Feldganz wird nur auf unserer einigen wenigen unserer Seiten verwendet. Es ist genauso breit wie das feldoben 
und ordnet sich durch den Befehl vertical-align: top; direkt unterhalb an. Die Schrift ist groß (L), der Text in Blocksatz. */
#feldganz{
	font-size: large;
	margin-top: 10px;
	height: auto;
	width: 770px;
	background-color: Blue;
	padding: 5px;
	vertical-align: top;
	text-align: justify;
}
/* Hier definieren wir nocheinmal einen Container, der uns ganz im Hintergrund eine silberne Linie auf die Index.php Seite
bringt. */
#alles{
	background-color: Silver;
	height: 200px;
	width: 770px;
}
/* Insgesamt gibt es in unserem Dokument drei verschiedene Arten von links: menu, skripte, links. Dafür haben wir uns 
entschieden, weil wir gerne wollten, dass die links unterschiedliche aussehen: 

Im Menu und in den Skripten (im Feldlinks) sind sie gelb mit einer schwarzen Umrandung. Fährt man mit der Maus darüber 
(a.menu:hover, a.skripte: hover) wird der Hintergrund Orange und die Schrift Weiß. Nachdem man den Link verwendet hat 
(a.menu:visited, a.skripte:visited), wird die Farbe Silber. Aktiviert man über die Tastatur die hotkeys, wird die 
Hintergrundfarbe Hellblau (a.menu:activated, a.skripte:activated).*/
a.menu {
	text-decoration: none;
	border: 1px solid black;
	color: Yellow;
	padding: 2px;
}
a.menu:hover {
	background-color: #FF4500;
	color: White;
}
a.menu:visited {
	color: Silver;
}
a.menu:active {
	background-color: Aqua;
}

a.skripte{
	display: block;
	text-decoration: none;
	border: 1px solid black; 
	color: Yellow;
	padding: 2px;
}
a.skripte:hover {
	background-color: #FF4500;
	color: White;
}
a.skripte:visited {
	color: Silver;
}
a.skripte:active {
	background-color: Aqua;
}
/* Die Farbe der Links im Text (a.links) ist aqua. Fährt man mit der Maus drüber spiegelt sich das Farbverhältnis: der 
Hintergrund wird aqua und die Schrift Schwarz. Nachdem der link besucht wurde, verändert sich die Farbe zu Silber*/
a.links{
	text-decoration: none;
	color: Aqua;
	padding: 2px;
}
a.links:hover{
	background-color: Aqua;
	color: Black;
}
a.links:visited{
	color: Silver;
}