﻿/* ========================================================================= 
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: #95c689; /* Hintergrundfarbe */
	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;
}

.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(__HSF/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 Links */
	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 Navibereiches gilt: */
		color: #003366;
		background-color: #95c689; /* Hintergrund*/ 
		padding: 5px 8px;
		border: 1px solid #95c689; /* Umrandung des Registers*/ 
	}
	#navibereich a:hover,
	#navibereich a:focus,
	#aktuell #navi01 a, /* Navigationspunkt navi01 mit ID=startseite ... gibt es nur auf Startseite*/
	#anliegen #navi02 a,
	#arbeit #navi03 a, 
	#mitglieder #navi04 a, 
	#vorstand #navi05 a,
	#sponsoren #navi06 a,
	#schifferfest #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 */
}

#KalenderList {
	overflow: auto;
	height: 560px;
}

/* ========================================================================= 
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!!!
========================================================================= */