/* ===============================================================================
Stylesheet für "Musiksteinach.ch" 
Datei: bildschirm.css
Autor: Daniel A. Tobler (DArT)
Aufbau: 1. Kalibrierung und allgemeine Styles
		2. Styles für allgemeine Layoutbereiche
		3. Styles für die horizontale Navigation mit Dropdown-Menü
		4. Styles für Layoutbereich "Startseite" (index.php)
		5. Styles für Layoutbereich "Verein" (verein.html)
		6. Styles für Layoutbereich "Vorstand" (vorstand.html)
		7. Styles für Layoutbereich "Mitglieder" (mitglieder.html)
		8. Styles für Layoutbereich "Member" (member.html)
		9. Styles für Layoutbereich "Geschichte" (geschichte.html)
		10. Styles für Layoutbereich "Archiv" (archiv.html)
		11. Styles für Layoutbereich "Kalender" (kalender.html)
		12. Styles für Layoutbereich "Galerie" (galerie.html)
		13. Styles für Lightbox - Bildergalerien
		14. Styles für Layoutbereich "Musikschule" (musikschule.html)
		15. Styles für Layoutbereich "Kontakt" und "Kontakt Blasmusikschule" (kontakt.php)(kontaktmusikschule.php)
		16. Styles für Layoutbereich "Ausbilder" (ausbilder.html)
		17. Styles für Layoutbereich "Instrumente" (instrumente.html)
		18. Styles für Layoutbereich "Gästebuch" (gaestebuch.php)
		19. Styles für Layoutbereich "Links" (links.html)
		20. Styles für Layoutbereich "Impressum" (impressum.html)
   ================================================================================ */

/* ================================================================================
	1. Kalibrierung und allgemeine Styles
	=============================================================================== */
/* Kalibrierung der wichtigsten Abstände */
* { padding: 0; margin: 0; } 					/* Setzt alle Elemente auf 0 */
/* Allgemeine Selektoren */
html { height: 101%; } 					/* erzwingt Scrollbar im Firefox */
body {
	margin-top: 20px;
	color: white; 								/* Schriftfarbe */
	background-color: #cccccc; 					/* Hintergrundfarbe */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: small; 							/* Schriftgrösse */
}
h1 { 
	font-size: 130%; 
}
h2 { 
	font-size: 110%;
	color: #001e66;
}
a:link {
	color: #0000FF;
	outline: none;
}
a:visited {
	color: 993399;
	outline: none;
}
.bildlinks {									/* Für eingefügte Bilder in Text, links positioniert */
	float: left;
	padding: 3px;
	border: 1px solid #ccc;
	margin-right: 10px;
}
.bildrechts {									/* Für eingefügte Bilder in Text, rechts positioniert */
	float: right;
	padding: 3px;
	border: 1px solid #ccc;
	margin-left: 10px;
}

/* ================================================================================
	2. Styles für allgemeine Layoutbereiche
	=============================================================================== */
#wrapper {
	color: black;
	background-color: white;
	width: 900px;
	margin: 0 auto;
}
#kopfgrafik {
  	background-image: url(Logos/kopfgrafik.jpg);
	width: 900px;
  	height: 230px;
}
#textbereich {
	color: black;
	background-color: white;
	padding: 23px 10px 10px 10px;
}
#fussbereich {
	height: 18px;
	width: 900px;
	border-top: 2px solid #c9d1e8;
}
#top {
	float: left;
	width: 465px;
	height: 18px;
}
#impressumlink {
	float: left;
	width: 330px;
	height: 18px;
}
#dart {
	background-image: url(Logos/d-art.jpg);
	float: left;
	margin-top: 3px;
	width: 100px;
	height: 14px;
}

/* ===============================================================================
	3. Styles für die horizontale Navigation mit Dropdown-Menü
	============================================================================== */
#navibereich {									/* Das umgebende DIV gestalten */
	overflow: hidden;
	color: black;
	background-color: #c9d1e8;
}
#navibereich ul {margin: 0;}					/* Die ungeordnete Liste in Ebene 1 gestalten */
#navibereich li {
	float: left;	
	list-style: none;
}
#navibereich a {								/* Die Hyperlinks in Ebene 1 gestalten */
	display: block;
	color: black;
	background-color: #c9d1e8;
	border-right: 1px solid #606b7f;
	font-weight: bold;
	text-decoration: none;						/* Unterstreichung entfernen */
	text-align: center; 				
	outline: none;								/* Entfernt gepunktete Umrisslinie */
	width: 92px;
	padding: 2px 0 2px 0;
}
#navibereich a:hover,
#navibereich a:focus,
#index #navi01 a,
#verein	#navi02 a,
#kalender #navi03 a,
#galerie #navi04 a,
#musikschule #navi05 a,
#kontakt #navi06 a,
#gaestebuch #navi07 a,
#medien #navi08 a,
#links #navi09 a {
	color: white;
	background-color: #606b7f;
}
#navibereich a:active {
	color: white;
	background-color: #606b7f;
}
#navibereich li ul {							/* Ebene 2 verstecken */
	position: absolute;
	left: -9999px;
	top: -9999px;
	display: inline;
	width: 0;
	height: 0;
	background-color: transparent;
}
#navibereich li:hover ul,
#navibereich li.sfhover ul {					/* Ebene 2 sichtbar machen */
	left: auto;
	top: auto;
	display: block;
	width: auto;
	height: auto;
	background-color: #c9d1e8;
	border-top: 1px solid #606b7f;
}					
#navibereich ul#ebene01 ul.ebene02 li a {		/* Spezifität 214: Die Dropdownliste korrekt einfärben */
	color: black;
	background-color: #c9d1e8;
}
#navibereich ul#ebene01 ul.ebene02 li a:hover {	/* Spezifität 224 */ 
	color: white;
	background-color: #606b7f;
}

/* ================================================================================
	4. Styles für Layoutbereich "Startseite" (index.html)
	=============================================================================== */
#auftritte {
	width: 179px;
	height: 310px;
	color: white;
	background-color: #888888;
	padding: 22px 10px 10px 10px;
	float: left;
}
#bildbereich {
	width: 479px;
	height: 310px;
	background-color: #888888;
	padding: 22px 10px 10px 10px;
	border-left: 1px solid #c9d1e8;
	border-right: 1px solid #c9d1e8; 
	float: left;
}
#rueckblick {
	width: 180px;
	height: 310px;
	color: white;
	background-color: #888888;
	padding: 22px 10px 10px 10px;
	float: left;
}		
	
/* ================================================================================
	5. Styles für Layoutbereich "Verein" (verein.html)
	=============================================================================== */
	
/* ================================================================================
	6. Styles für Layoutbereich "Vorstand" (vorstand.html)
	=============================================================================== */
#praesident {
 	width: 220px;
	padding-bottom: 20px;
	float: left;
	margin-left: 170px;
}
#vizepraesident {
	width: 220px;
	padding-bottom: 20px;
	float: left;
	margin-left: 116px;
}
#aktuar {
	width: 220px;
	float: left;
	margin-left: 50px;
}
#kassier {
	width: 220px;
	float: left;
	margin-left: 50px;
}
#beisitzer {
	width: 220px;
	float: left;
	margin-left: 50px;
}
	
/* ================================================================================
	7. Styles für Layoutbereich "Mitglieder" (mitglieder.html)
	=============================================================================== */
#dirigent {
	float: left;
	width: 297px;
}
#holz {
	float: left;
	width: 298px;
	border-right: 2px solid #c9d1e8;
	border-left: 2px solid #c9d1e8;
}
#blech {
	float: left;	
	width: 297px;
}

/* ================================================================================
	8. Styles für Layoutbereich "Member" (member.php)
	=============================================================================== */
	
/* ================================================================================
	9. Styles für Layoutbereich "Geschichte" (geschichte.html)
	=============================================================================== */
#praesidenten {
	float: left;
	width: 430px;
}
#dirigenten {
	float: left;
	width: 430px;	
}

/* ================================================================================
	10. Styles für Layoutbereich "Archiv" (archiv.html)
	=============================================================================== */

/* ================================================================================
	11. Styles für Layoutbereich "Kalender" (kalender.html)
	=============================================================================== */
	
/* ================================================================================
	12. Styles für Layoutbereich "Galerie" (galerie.html)
	=============================================================================== */
	
/* ================================================================================
	13. Styles für Lightbox - Bildergalerien
	=============================================================================== */
#bildergalerie 

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(Lightbox/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(Lightbox/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* ================================================================================
	14. Styles für Layoutbereich "Musikschule" (musikschule.html)
	=============================================================================== */
	
/* ===========================================================================================================
	15. Styles für Layoutbereich "Kontakt" und "Kontakt Blasmusikschule" (kontakt.php)(kontaktmusikschule.php)
	========================================================================================================== */
#kontaktformular {
	color: white;
	background-color: #606b7f;
	width: 600px;						/* Breite des Formulars */		
	margin: auto; 						
	padding: 15px;
}
input#name,
#mailadresse,
#betreff {
	width: 300px;
}
#textarea {
	width: 420px;
	margin-top: 1em;
	height: 7em;
}
input#name:focus, 
#mailadresse:focus, 
#betreff:focus,
#textarea:focus {
	background-color: #c9d1e8;
}
	
/* ================================================================================
	16. Styles für Layoutbereich "Ausbilder" (ausbilder.html)
	=============================================================================== */
#ausbilder1 {
	height: 185px;
}
#ausbilder2 {
}
#ausbilder3 {
}
#ausbilder4 {
}
#ausbilder5 {
}
	
/* ================================================================================
	17. Styles für Layoutbereich "Instrumente" (instrumente.html)
	=============================================================================== */

/* ================================================================================
	18. Styles für Layoutbereich "Gästebuch" (gaestebuch.php)
	=============================================================================== */
form {
	color: white;
	background-color: #606b7f;
	width: 600px;						/* Breite des Formulars */		
	margin: auto; 						
	padding: 15px;
}
#neueintrag,
#admin {
	width: 94%;
	padding: 2px;
}
input#nname,
#email,
#hpage {
	width: 300px;
}
textarea {
	width: 570px;
	margin-top: 0.5em;
	height: 7em;
}
input#nname:focus,
#email:focus,
#hpage:focus,
textarea:focus {
	background-color: #c9d1e8;
}

/* ================================================================================
	19. Styles für Layoutbereich "Links" (links.html)
	=============================================================================== */
#links01 {
	float: left;
	width: 214px;
	padding-left: 10px;
}
#links02 {
	float: left;
	width: 182px;
	padding-left: 10px;
	border-right: 2px solid #c9d1e8;
	border-left: 2px solid #c9d1e8;
}
#links03 {
	float: left;
	width: 252px;
	padding-left: 10px;
	padding-right: 10px;
	border-right: 2px solid #c9d1e8;
}
#links04 {
	float: left;
	width: 180px;
	padding-left: 10px;
	padding-right: 10px;
}

/* ================================================================================
	20. Styles für Layoutbereich "Impressum" (impressum.html)
	=============================================================================== */