/* padding wird zur Höhe/Breite eines Elementes hinzuaddiert */

* { /* Setzt Attribute für alle Elemente; Vorteil: Browsereinstellungen werden einheitlich zurückgesetzt */
	background-color:transparent;
	margin:0; /* Außenabstand auf Null für mehr Kontrolle */
	padding:0; /* ... und der Innenabstand */
	position:relative; /* Für schnelle absolute Positionierung eines Elementes am Elternelement */
	z-index:3;
}

html {
	font-size:100%; /* siehe body */
	height:99.5%;
	width:100%;
	z-index:0;
}

body {
	background-color:#7f0000; /* Hintergrundfarbe der Seite */
	color:#000; /* Schriftfarbe für komplette Seite */
	cursor:default; /* Verhindert, dass der Cursor über Text vom Mauszeiger zum Textmarkencursor wird; rein ästhetischer Natur */
	font-family:Verdana, Tahoma, Arial, sans-serif; /* Schriftart für komplette Seite */
	font-size:62.5%; /* Setzt im Zusammenhang mit 100% für html die Schriftgröße auf 10px und die Maßeinheit 1em=10px */
	height:100%;
	text-align:center; /* Textausrichtung für komplette Seite */
	width:100%;
	z-index:0;
}

img {
	border:none; /* Kein Rahmen für Bilder; v.a. für verlinkte Bilder nützlich/notwendig */
}

/* Bereiche */
#rahmen {
	padding:5em; /* Innenabstand; "verschwindet" im Gegensatz zum Außenabstand nicht bei kleineren Auflösungen/Fenstern */
}

#links {
	float:left; /* nä. Element (also #rechts) fließt rechts vorbei; spart absolute Positionierung */
	width:20em; /* Breite der linken Kästen */
}

#rechts {
	margin-left:22em; /* Außenabstand links (gemessen ab Ende des Innenabstandes von #rahmen); wg. float für #links notwendig */
	min-width:60em; /* Mindestbreite der rechten Kästen */
	max-width:100em; /* Höchstbreite der rechten Kästen; ohne sähe es auf hohen Auflösungen mglw. bescheiden aus */
}

#logo {
	height:13.5em; /* Höhe der Logo-Box */
	background:#ffdaaa url(images/x_logo.png) top left no-repeat; /* Hintergrundfarbe, -bildpfad, -bildposition (2 Angaben), -bildwiederholung (=unterdrückt) dieser Box */
	width:100%; /* Breite gemessen an Elternelement #links (200px) */
}

#logo a {
	display:block; /* Inline-Element a wird als Block dargestellt --> klickbares Logo ohne über <img> eingebundene Grafik */
	height:100%; /* Höhe gemessen an Elternelement #logo (135px) */
	width:100%; /* Breite gemessen an Elternelement #logo (200px) */
}

#zeiten {
	margin-top:2em; /* Außenabstand nach oben (20px) */
	width:100%; /* Breite gemessen an Elternelement #links (200px) */
	background-color: #ffdaaa; /* Hintergrundfarbe dieser Box */
	padding:0.5em 0; /* Innenabstand für oben und unten (5px; links und rechts = 0) */
	/* Keine definierte Höhe, da der Text sonst nicht vertikal mittig ausgerichtet werden könnte */
}

#navi { 
	margin-top:2em; /* Außenabstand nach oben (20px) */
	width:100%; /* Breite gemessen an Elternelement #links (200px) */
	background-color:#ffdaaa; /* Hintergrundfarbe dieser Box */
	text-align:left; /* Textausrichtung dieser Box */
	padding:2em 0; /* Innenabstand für oben und unten (20px; links und rechts = 0) */
	/* Keine definierte Höhe, da #inhalt rechts unterschiedlich lang sein kann --> nicht sichergestellt, dass #navi und #inhalt gleich abschließen; daher lieber vertikal mittig ausgerichtet */
} 

#navi li {
	list-style-image:url(images/x_pfeil.gif); /* Grafik als Listensymbol */
	list-style-type:square; /* Listensymbol (Quadrat), wenn Grafiken de-aktiviert oder nicht gefunden */
	list-style-position:inside; /* einfachste Variante für einzeilige Listeneinträge, da Abstände für <ul> via * auf Null gesetzt wurden */
}

#spruch {
	background-color:#ffdaaa; /* Hintergrundfarbe dieser Box */
	height:13.5em; /* Höhe dieser Box */
	width:100%; /* Breite gemessen an Elternelement #rechts (600-1000px) */
}

#inhalt {
	margin-top:2em; /* Außenabstand nach oben (20px) */
	width:100%; /* Breite gemessen an Elternelement #rechts (600-1000px) */
	max-width:100%; /* Höchstbreite; sollte der Inhalt (z.B. zu große Bilder) über die Breite hinausgehen, wird dieser abgeschnitten; unwirksam bei Browsern, die max-width nicht kennen */
	background-color:#ffdaaa; /* Hintergrundfarbe dieser Box */
	min-height:50em; /* Mindesthöhe dieser Box; unwirksam bei Browsern, die min-height nicht kennen (allerdings weniger schlimm) */
	padding:1em 0; /* Innenabstand für oben und unten (20px; links und rechts = 0); Einfluss auf Abstand für links und rechts via .text */
}

div.text {
	margin:0 auto; /* Außenabstand für links und rechts wird automatisch gleich verteilt --> zentrierte (unsichtbare) Box */
	width:50em; /* Breite dieser Box */
	/* Box insgesamt verhindert zu lange Zeilen auf höheren Auflösungen */
}

#karte {
	margin:0 auto;
	padding:0 0 1em 0;
	width:60em;
	height:60em;
	z-index:1;
}

#x {
	position:absolute;
	top:1%;
	left:20%;
	background:transparent url(images/x.png) no-repeat;
	width:5.3em;
	height:4.9em;
	z-index:5;
}

/* Links */
a, /* Ankerelement; einige Browser ignorieren Attribute für Links, wenn diese nur für a:link usw. angegeben werden */
a:link, /* Link */
a:active, /* aktiver Link */	
a:visited { /* besuchter Link */
	color:#00f; /* Linkfarbe */
	text-decoration:none; /* Linkdeko (unterstrichen, etc.) */
}

#navi a, #navi a:link, #navi a:visited, #navi a:active {
	color:#000; /* Linkfarbe innerhalb der Navigation */
}

a:hover, #navi a:hover { /* Link, über dem sich der Cursor befindet */
	color:#7f0000; /* Linkfarbe, wenn Cursor drüber */
	font-weight:bold; /* Link"gewicht", wenn Cursor drüber */
	text-decoration:none; /* Linkdeko, wenn Cursor drüber */
}

/* Textformatierung */
p {
	margin:1em 0; /* Außenabstand für Absätze nach oben und unten (10px) */
}

p, li {
	font-size:1.25em; /* Schriftgröße für Absätze und Listeneinträge */
}

.sep {
	margin-top:2.5em; /* größerer Außenabstand nach oben (für Paragrafen und Überschriften) */
}

li.sep {
	margin-top:1.5em; /* größerer Außenabstand nach oben (speziell für Listeneinträge) */
}

#spruch p { /* Schriftformatierungen für Spruchtext */
	font-size:1.5em; /* Schriftgröße */
	font-style:italic; /* Schriftstil */
	font-weight:bold; /* Schriftgewicht */
	margin:0; /* Außenabstand zurücksetzen, da global für p definiert */
	padding:2.5em 0; /* Innenabstand; 1em = 15px, durch die vier Zeilen vorher def. Schriftgröße! Ergo: 2.5em = 45px; relativ vertikal mittig, anders nicht mgl. */
}

#zeiten p { /* Schriftformatierungen für Zeitentext */
	font-size:1.8em; /* Schriftgröße */
	font-style:italic; /* Schriftstil */
	font-weight:bold; /* Schriftgewicht */
	margin:0; /* Außenabstand zurücksetzen, da global für p definiert */
}

h1, h2, h3, h4 {
	font-weight:bold; /* Schriftgewicht */
}

h3 { /* u.a. in den Gallerien verwendet */
	font-size:1.6em; /* Schriftgröße */
}

.small { /* u.a. in der Anfahrt verwendet */
	font-size:0.9em; /* Schriftgröße */
}

/* ein paar Dinge für alle Fälle ;o) */
.bold {
	font-weight:bold; /* Schriftgewicht */
}

.italic {
	font-style:italic; /* Schriftstil */
}

.uline {
	text-decoration:underline; /* Schriftdeko */
}

/* Textausrichtungsklassen für alle Fälle */
.left {
	text-align:left;
}

.right {
	text-align:right;
}

.center {
	text-align:center;
}

.justify {
	text-align:justify;
}

/* Gallerie */
#inhalt table {
	margin:0 auto; /* selber Effekt wie bei .text */
}

td.empty {
	display:none; /* Leere bzw. als leer klassifizierte Tabellenzellen werden ausgeblendet */
}