/*Stylesheet der Internetseite www.veff.de
Copyright Martin Löhrer 2010*/

/*Farbverzeichnis
Weiß:							#FFFFFF
Schwarz:					#000000
body-orange: 			#FFC984
veff-orange: 			#F95E13

Verlauf:					url(img/design/nav.png);
*/

/*Farbklassen*/

.orange {
	color: #F95E13;
}

/*Allgemeine Tags*/

body {
	background: #FFC984;
	margin: 0;
	font-family: sans-serif;
	font-size:11pt;
}

a {
	color: black;
}

/*Container mit IDs*/

/*Der Container mit der ID #page umschließ die Seite selbst, zentriert sie und gibt eine Breite von 960px vor.*/

#page {
	margin: 0 auto; 
	width: 960px;
}

/*Der Container mit der ID #header beinhaltet das Logo der Seite.*/

#header {
	background: white;
	float: left; 
	border: 1px solid black; 
	width: 958px;
}

/*Der Container mit der ID #nav beinhaltet die vertikale Navigation unterhalb des Logos. Die einzelnen
Listen-Elemente der unsortierten Liste werden linksbündig nebeneinander angezeigt. Als Hovereffekt erscheinen
Links unterstrichen, statt wie normal ohne Unterstreichung. Der Hintergrund der Navigation enthält einen Verlauf.*/

#nav {	
	background: #F95E13 url(img/design/nav.png);
	float: left; 
	border: solid black; 
	border-width: 0 1px 1px 1px;
	width: 958px; 
	color: white;
	height: 40px:
}

#nav ul {
	float: left; 
	list-style: none;
	margin: 10px 0;
}

#nav ul li {
	float: left;
	margin: 0 10px;
	height: 20px;
}

#nav ul li a {
	font-weight: bold;
	text-decoration: none;
	color: white;
}

#nav ul li a:hover {
	text-decoration: underline;
}

/*Der Container mit der ID #admin-alert ist nur für den Superadmin sichtbar, wenn Aufgaben für ihn anstehen.*/

#admin-alert {
	background: white;
	border: 1px solid black; 
	float: left; 
	width: 958px;
	margin-top: 10px;
}

/*h2 ist im Container mit der ID #admin-alert weiß und von einem orangenen Container umschlossen, 
der über die gesamte Breite geht.*/

#admin-alert h2 {
	margin: 0;
	padding: 5px;
	width: 948px;
	background: #F95E13;
	float: left;
	color: white;
}

/*h3 ist im Container mit der ID #admin-alert schwarz auf weiß, und geht über die gesamte Breite.*/

#admin-alert h3 {
	margin: 0;
	padding: 10px;
	width: 948px;
	float: left;
}

/*Datensätze werden im Container mit der ID #admin-alert in Tabellen dargestellt. Sie haben einen schwarzen
Rahmen und sind etwas schmaler als die Seite selber und zentriert. Sie haben weder einen Innenabstand noch
Abstand zwischen den Zellenrahmen, die miteinander überlappen.*/

#admin-alert table {
	width: 940px;
	margin: 0 10px;
	margin-bottom: 10px;
	padding: 0;
	border-spacing: 0;
	border-collapse: collapse;
}

#admin-alert table tr td {
	border: 1px solid black;
	margin: 0;
	padding: 5px;
}

/*Der Container mit der ID #content ist rechtsbündig, um den Containern mit der Class .sidebar und .sidebar_navi
genug Platz zu machen. Damit diese nicht verrutschen hat der Container mit der ID #content eine Minimalhöhe von 300px.*/

#content {
	background: white;
	width: 708px; 
	float: right; 
	padding: 10px;
	margin-top: 10px;
	border: 1px solid black;
	min-height: 300px;
}

/*Der Cointiner mit der ID #footer erstreckt sich wie der Container mit der ID #header über die gesamte Breite. Er
trägt den selben Verlauf wie die vertikale Navigation. Er beinhaltet einen Absatz, der das Copyright beinhaltet.
Dieses wird vertikal und horizontal zentriert dargestellt.*/

#footer {
	border: solid black; 
	border-width: 1px ;
	float: left; 
	text-align: center;
	width: 958px;
	margin: 10px 0;
	background: #F95E13 url(img/design/nav.png);
	color: white;
	height: 40px;
}

#footer p {
	height: 20px;
	vertical-align: middle;
}

/*Container mit Classes*/

/*Classes für Sidebar-Container*/

/*Container mit der Class .sidebar ordnen sich am linken Rand der Seite direkt neben dem Container mit der ID #content
an. Ihre Überschrift h3 geht über die gesamte Containerbreite und ist weiß auf dem veff-orange.*/

.sidebar {
	background: white;
	width: 218px;
	float: left;
	border: solid black;
	border-width: 1px;
	margin-top: 10px;
}

.sidebar h3 {
	margin: 0;
	padding: 5px;
	width: 208px;
	background: #F95E13;
	color: white;
}

.sidebar p {
	margin: 0;
	padding: 10px;
}

/*Container mit der Class .sidebar_nav verhalten sich genau so wie Container mit der Class .sidebar, lassen jedoch Menüs 
mit Links ohne die Hilfe von Unsortieren Listen zu. Ihre Überschrift h3 ist die selbe wie in Containern mit der Class
.sidebar. Links ordnen sich untereinander an und sind schwarz auf weiß, Als Hovereffekt werden sie weiß auf veff-orange.*/

.sidebar_nav {
	background: white;
	width: 218px;
	float: left;
	border: solid black;
	border-width: 1px;
	margin-top: 10px;
}

.sidebar_nav h3 {
	margin: 0;
	padding: 5px;
	width: 208px;
	background: #F95E13;
	float: left;
	color: white;
}

.sidebar_nav a {
	padding: 5px;
	margin: 0;
	float: left;
	text-decoration: none;
	width: 208px;
	background: white;
}

.sidebar_nav a:hover {
	background: #F95E13;
	color: white;
}

/*Links mit der Class .h3anker innerhalb eines Containers mit der Class .sidebar_nav werden etwas nach links eingerückt,
um eine strukturierte Navigation je nach Höhe der Überschrift ergeben, zu der sie per Anker führen.*/

.sidebar_nav a.h3anker {
	padding-left: 15px;
	width: 198px;
}

/*Classes für spezielle Tabellen*/

/*Tabellen mit der Class .vorstand besitzen die richtige Formatierung, um 3 oder 6 Vorstandsmitglieder mit Bildern
und Beschreibungen zu beinhalten.*/

.vorstand {
	width: 700px; 
	vertical-align:top;
	font-size: 0.8em;
}

/*Tabellen mit der Class .user besitzen eine bestimme Anpassung der Schriftgröße, damit die User-Tabelle im Superadmin-CP
nicht zu breit für den Container mit der ID #content wird.*/

.user {
	font-size: 0.8em;
}
.user input {
	font-size: 0.9em;
}

/*Classes für spezielle Textformate*/

/*Texte mit der Class .information machen den Text kleiner, um in als zusätzliche Information anzuzeigen.*/

.information {
	font-size: 0.8em;
}

/*Texte mit der Class .alert sind rot und dienen als Hinweis, das etwas Aufmerksamkeit verlangt.*/

.alert {
	color: red;
}

/*Texte mit der Class .example oder .inbrowser dienen auf der Hilfeseite dem Zweck, Text als Code im Monotype
darzustellen, oder zu zeigen, wie der Text später im Browser aussieht. Container beider Classes sind schmaler als
der normale Text, setzen sich durch Außenabstand davon ab und besitzen eine graue Hintergrundfarbe. */

.example {
	font-size: 10pt;
	font-family: courier;
	width: 400px;
	margin: 0 auto;
	border: 1px solid silver;
	background: silver;
	padding: 10px;
	text-align: left;
}

.inbrowser {
	text-align: left;
	width: 400px;
	margin: 0 auto;
	border: 1px solid silver;
	background: silver;
	padding: 10px;
}

/*Texte mit der Class .dr dienen der Anzeige, dass ein Datensatz erfolgreich geändert oder hinzugefügt wurde.
Texte mit der Class .sr dienen der Anzeige, dass ein Datensatz gelöscht wurde oder ein Fehler gefunden wurde.*/

.dr {
	width: 680px;
	color: #009900;
	border: 1px solid #009900;
	padding: 5px;
	margin: 5px;
	background: #C5E2C5;
}

.dr a {
	color: #009900;
}

.sr {
	width: 680px;
	color: #991200;
	border: 1px solid #991200;
	padding: 5px;
	margin: 5px;
	background: #E2C8C5;
}

.sr a {
	color: #991200;
}