/* ========================================================================= 
Stylesheet für die Website "Mittelelbe Tourismus GmbH" 
Datei: bildschirm.css
Stand: 26.03.2016
Auto: Christel Heppner

Aufbau:	1. Kalibrierung und allgemeine Styles
		2. Styles für Layoutbereiche
		3. Sonstige Styles
========================================================================= */


/* ========================================================================= 
1. Kalibrierung und allgemeine Styles
========================================================================= */

* { padding: 0; margin: 0; } /* Abstände für alle Elemente auf Null setzen */
/*  * html #navibereich { width: 18em; }  Patch für ausschließlich IE6 */



  * html #navibereich {
    width: 100%;   /* Breitenangabe fuer IE 5.x */
    w\idth: 18em;  /* Breitenangabe fuer IE 6 */
  }

h2, p, ul, ol { margin-bottom: 1em; } /* Abstand nach unten korrigieren */
ul ul { margin-bottom: 0; } /* ohne Abstand bei verschachtelten Listen */
li { margin-left: 1em; } /* Abstand nach links korrigieren */




/* allgemeine Selektoren */

html { height: 101% } /* erzwingt Scrollbar im Firefox */
body { /* Gestalte das HTML-Element mit dem Namen body = allg. Hintergrund */
	color: #e9e5ce; /* Schriftfarbe */
	background-color: #373f43; /* Hintergrundfarbe */
	background-image: url(image/other/bg_linie.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Schriftart */
	font-size: small;  /* Schriftgröße ... veränderbar */
}

h1 { font-size: 150%; }
h2 { font-size: 130%; }

.bildlinks {
	display: inline;
	float: left;
	padding: 3px;
	border: 1px dotted #0a648a;
	margin-right: 10px;
	margin-bottom: 10px;
}
.bildrechts {
	display: inline;
	float: right;
	padding: 3px;
	border: 1px dotted #0a648a;
	margin-bottom: 10px;
	margin-left: 10px;
}

.bildohne {
	display: inline;
	float: right;
	padding: 3px;
	border: none;
	margin-bottom: 10px;
	margin-left: 10px;
}
.clearing { clear:both; }

.rot {
	color:#C00;
	}
	
.hellblau {
	color:#8fb8c9;
	}
	
.small {
	font-size: 70%;
	}	

address {
	text-align: center; /* zentrieren */
	font-size: 70%; /* etwas kleiner */
	font-style: normal; /* normale Schrift, nicht kursiv */
	letter-spacing: 2px; /* Laufweite etwas grösser */
	line-height: 1.5em; /* Zeilenabstand */
}

/* Hyperlinks allgemein */

a { text-decoration: none; } /* Unterstreichung entfernen */
a:link { color: #cc0000; } /* Reihenfolge der Zustände ist sehr wichtig!!! */
a:visited { color: #cc0000; } 
a:hover, a:focus { /* hover: wenn der Mauszeiger darüber schwebt; focus: beim Durchsteppen mit TAB-Taste  */
	border-bottom: 1px solid #cc0000; /* Blau */
} 
a:active { /* active: der gerade angeklickt wird */
	color: white;
	background-color: #cc0000; /* Hinterlegung des Links mit Farbbalken hier: Blau */
}

/* allgemeine Klassen und ID's */

.skiplink { /* den Skiplink für Screenreader ausblenden ... mit display: none liest auch der screenreader nicht mehr vor!!! */
	position: absolute;
	top: -2000px;
	left: -3000px;
	width: 0px;
	height: 0px;
	overflow: hidden;
	display: inline;
}
#logo { 
	color: black;
	background-color: white;
	padding: 5px; /* Auffüllung der Inhaltsfarbe Weiß um 5px um das Logo herum */
	border: 5px solid #d9d9d9; /* hellgraue durchgezogene Linie von 5px */
}

/* ========================================================================= 
2. Styles für Layoutbereiche
========================================================================= */

#wrapper { /* Gestalte das HTML-Element mit der id="wrapper" = Schutzumschlag */
	color: #0a648a; /* Legt Farbe für Schrift im Inhalt fest o. Bild in Inhaltsbereich bei mehr Text überlagert */
	background: #cae9f6;  /* Legt Farbe für bg im Inhalt fest o. Bild in Inhaltsbereich bei mehr Text überlagert */
	width: 1024px; /* Breite des Inhaltsbereiches */
	margin: 0px auto; /* Abstand nach oben */
}

#kopfbereich {
	position: relative; /* Element ist positioniert für eingebundene Elemente bleibt aber im Fluss */
	color: #e9e5ce;
	background-color: #0a648a; /* Head bg Farbe */
	background-image: url(image/other/kopf-logo-horizontal.jpg);  /*für Head */
	padding: 100px 20px; /* Innenabstände definieren */
	/* border-top: 2px solid #cc0000;*/
}

	#kopfbereich p {
		position: absolute;
		top: 10px;
		right: 10px;
		font-weight: bold;
		padding: 5px 0;
		margin-bottom: 0;
	}
	#kopfbereich p span {
		color: #cc0000;  /* Farbe der Schrift im Absatz im Kopfbereich */
	}




#navibereich {  /* Navigation horizontal */
	text-align: right; /* Ausrichtung rechts */
	color: #003366;
	background: #cae9f6; /* Farbe für Normalzustand o Zwischenraum hinter den Links */
	padding: 5px 10px 4px 10px; /* Innenabstände definieren */
	border-bottom: 1px solid #003366; /* Linie zw. Navi- und Inhaltsbereich */
}
	#navibereich ul { margin-bottom: 0; }
	#navibereich li {
	display: inline; /*  li nebeneinander anzeigen = inline = horizontale Navigation */
	list-style-type: none /* ohne Aufzählungspunkte */
	margin: 0; 
	}
	#navibereich a { /* für jeden Link innerhalb des Navibereiches gilt: */
		color: #ffffff;
		background-color: #8fb8c9; /* Hintergrund Link normal*/ 
		padding: 4px 8px;
		border: 0px 0px 1px 0px solid #8fb8c9; /* Umrandung des Registers */ 
	}
	#navibereich a:hover,
	#navibereich a:focus,
	#will #navi01 a, /* Navigationspunkt navi01 mit ID=startseite ... gibt es nur auf Startseite*/
	#MET-EZH #navi02 a,
	#MET-Rad #navi03 a, 
	#camping #navi04 a, 
	#buchung #navi05 a,
	#caravan #navi06 a,
	#kontakt #navi07 a,
	#impress #navi08 a,
	#festunterkunft #navi09 a,
	#preise #navi10 a { /* Navigationspunkt navi02 mit ID=kontaktseite ... gibt es nur auf Kontaktseite */
		color: #003366; /* Nav-Button-Schriftfarbe Schwarz */
		background-color: white; /* Nav-Button-Hintergrund Weiß für Hover+Focus */
		border-bottom-color: white; /* Rahmen-Linie unten Weiß für Hover+Focus */
	}
	#navibereich a:active {
	color: #003366;
	background-color: white;
	}

#textbereich {
	padding: 20px 10px 20px 20px; /* Innenabstände definieren */
}

#textbereich a { /* Hyperlinks nur im Textbereich */
	border-bottom: 1px dotted #cc0000;
}
	#textbereich a:hover, /* Hyperlinks nur im Textbereich werden durchgezogen ... vorher gepunktet */
	#textbereich a:focus {
		border-bottom: 1px solid #d90000;
	}

#fussbereich { /* Abstand und eine obere Rahmenlinie für den Fussbereich erstellen */
	padding: 10px 20px 20px 20px; /* Abstand zwischen address und Rahmenlinie darüber ... re li unten */
	border-top: 1px solid #0a648a; /* Rahmenlinie oben */
	margin-top: 20px; /* Abstand zwischen Linie und Element darüber */
}

/* ========================================================================= 
3. Sonstige Styles
========================================================================= */

/* Das Kontaktformular gestalten */


/* ========================================================================= 
ENDE des Stylesheets (standardkonform, barrierefrei und flexibel!!!
========================================================================= */