/* ========================================================================= 
Stylesheet für Website "Förderverein der Schifferstadt Rosslau e.V."  
Datei: bildschirm.css
Stand: 08.04.2009
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 */
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 */
	color: white; /* Schriftfarbe */
	background-color: #003366; /* Hintergrundfarbe war zuvor Grün mit #95c689 */
	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 solid #95c689;
	margin-right: 10px;
	margin-bottom: 10px;
}
.bildrechts {
	display: inline;
	float: right;
	padding: 3px;
	border: 1px solid #95c689;
	margin-bottom: 10px;
	margin-left: 10px;
}

.clearing { clear:both; }

.rot { 
	color:#d90000;
}

.gruen { 
	color:#006600;
}

.bildmitte {
	display: inline;
	float:none;
	padding: 3px;
	border: 1px solid #95c689;
	margin-right: 10px;
	margin-bottom: 10px;
}
address {
	text-align: center; /* zentrieren */
	font-size: 80%; /* 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: #d90000; } /* Reihenfolge der Zustände ist sehr wichtig!!! */
a:visited { color: #d90000; } 
a:hover, a:focus { /* hover: wenn der Mauszeiger darüber schwebt; focus: beim Durchsteppen mit TAB-Taste  */
	border-bottom: 1px solid #d90000; /* Rot */
} 
a:active { /* active: der gerade angeklickt wird */
	color: white;
	background-color: #d90000; /* Rot */
}

/* 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 gesamtes Dok anweisen*/
	color: #003366;
	background-color: white;
	width: 800px; /* Breite des Inhaltsbereiches */
	margin: 10px auto;
}

#kopfbereich {
	position: relative; /* Element ist positioniert für eingebundene Elemente bleibt aber im Fluss */
	color: #003366;
	background-color: #ffffff; /* bg kopfbereich Weiß */
	background-image: url(bilder/_kopf_bg.jpg);
	background-repeat: no-repeat;
	background-position:right;
	padding: 110px 0px 0 20px; /* Innenabstände definieren */
	margin-right: 0px;
}
	#kopfbereich p {
		position: absolute;
		top: 10px;
		right: 10px;
		font-weight: bold;
		padding: 5px 0;
		margin-bottom: 0;
	}
	#kopfbereich p span {
		color: #666666;
	}

#navibereich {
	text-align: right; /* Ausrichtung rechts */
	color: #003366;
	background: #ffffff; /* Weiß für Normalzustand hinter den Buttons innerhalb der Zwischenräume */
	padding: 5px 10px 4px 10px; /* Innenabstände definieren */
	border-bottom: 1px solid #003366;
}
	#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 horizontalen Navibereiches gilt: */
		color: #ffffff; /* Schriftfarbe */
		background-color: #003366; /* Hintergrund der Buttons war zuvor Grün #95c689*/ 
		padding: 5px 8px;
		border: 1px solid #003366; /* Umrandung des Registers*/ 
	}
	#navibereich a:hover,
	#navibereich a:focus,
	#aktuell #navi01 a, /* Navigationspunkt navi01 mit ID=startseite ... gibt es nur auf Startseite*/
	#sponsoren #navi02 a,
	#einladungen #navi03 a, 
	#programm #navi04 a, 
	#schifferlatein #navi05 a,
	#fotos #navi06 a,
	#verein #navi07 a,
	#kontakt #navi08 a { /* Navigationspunkt navi02 mit ID=kontaktseite ... gibt es nur auf Kontaktseite */
		color: #003366; /* Nav-Button-Schriftfarbe*/
		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: #d90000;
	background-color: white;
	}

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

#text {
	margin-left: 230px;
	}
	
#image {
		float: left;
		width: 160px;
	}	
	
	
#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 */
	clear: both;
	padding: 10px 20px 20px 20px; /* Abstand zwischen address und Rahmenlinie darüber ... re li unten */
	border-top: 1px solid #8c8c8c; /* Rahmenlinie oben */
	margin-top: 20px; /* Abstand zwischen Linie und Element darüber */
}

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

/* Das Kontaktformular gestalten */
form{
	background-color: #ffcc00;
	width: 500px; /* Breite des Formulars */
	padding: 30px;
	border: 2px solid #003366;
}
label { 
display: block; /* Beschriftung auf eigener Zeile */
cursor: pointer; /* Mauszeiger wird zur Hand */
}
input#name,
input#organisation,
input#strasse,
input#postleit,
input#land,
input#ort,
input#telefon,
input#fax,
input#e-mail,
input#hotel,
textarea {
	width: 500px;
	border: 1px solid #003366;
	margin-bottom: 4px;
}

textarea {
	height: 7em;
}
input#absender:focus,
textarea:focus {
	background-color: #d9d9d9;
}

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