/* Stylesheet zur Formatierung am Bildschirm 
Datei: bidschirm.css
Datum: 15.06.2010
Autor: Axel Reiss */

@media screen {

/* Allgemeine Styles */

body {
   color: black;
   height: 100%;
   width: 100%;
}
#start {
	background-color: #f8f8f0; }
h1 {
   padding: 0;
   margin: 0;
}

/* Allgemeine Klassen und ID */
#wrapper0 {
   position: relative;
   width: 930px;
   height: 530px;
   margin-left: auto;
   margin-right: auto;
   background-image: url(Grafiken/hg_wrapper0.jpg);
}
#wrapper {
   position: relative;
   width: 930px;
   height: 930px;
   margin-left: auto;
   margin-right: auto;
   background-image: url(Grafiken/hg_wrapper1.jpg);
}
#wrapper2 {
	 position: relative;
   width: 930px;
   height: 930px;
   margin-left: auto;
   margin-right: auto;
   background-image: url(Grafiken/hg_wrapper2.jpg);
}
/* ------------------- Beginn Navigation -----------------------*/   

#navi {
   margin-left: 138px;
   text-align: left;
   padding: 8px 4px 8px 4px;
}
#navi li {
   display: inline;
   margin-left: 14px;
}
#navi a,
#navi strong {
   padding: 8px 4px 8px 4px;
   color: white;
   font-weight: bold;
   
}
li a:hover { color: #e31f1d; }
#navi a:hover,
#navi a:focus, 
#ueberuns #nav01 a,
#aktuelles #nav02 a,
#mitglied #nav03 a,
#natura #nav04 a,
#tipps #nav05 a,
#ortsgruppe #nav201 a,
#bezirk #nav202 a,
#verband #nav203 a,
#jugend #nav204 a,
#programm #nav06 a {
   color: #e31f1d;
   background-color: white; 
   font-weight: bold; 
}
.on {
   color: #e31f1d;
   background-color: white; 
   font-weight: bold;  
   padding: 8px 4px 8px 4px;
}
/* ==============================================
   Hyperlinks in Ebene 2
   ============================================== */
#navi li ul.unsichtbar, #nav li ul { 
		position: absolute;
		top: 213px;
		left: 250px;
		z-index: 100;
		background-color: white;
		padding: 8px  8px ;
		filter: alpha(opacity=91);
        opacity: 0.91;
}
#navi li ul a {
	color: black;
	}

				
				
/* ==============================================
   05 Patches für IE5.x und 6
   ============================================== */
/* IE 5.x und 6: hasLayout für Hyperlinks */ 
* html #navi ul, 
* html #navi a, 
* html #navi strong {
   height: 1%;  /* oder 1px oder irgendeinen anderen Wert */ 
}
/* Für IE 5.x (für IE 6 stört es nicht) */
* html #navi li {
   float: left; 
   width: 100%; 
}
/* ------------------------ Ende Navigation -----------------------------------*/    

#contentbereich {
   position: relative;
}
#linkeseite { float: left; }
#linkeseite1  {
   background-image: url(Grafiken/button_programm.jpg);
   background-repeat: no-repeat;
   width: 87px;
   padding: 8px 0px 8px 50px;
   font-weight: bold;
   color: black;
   
}
#linkeseite1 a:hover,
#linkeseite1 a:focus { 
   color: #e31f1d;
   font-weight: bold;
}
#linkeseite2  {
   background-image: url(Grafiken/anmelden.gif);
   background-repeat: no-repeat;
   padding: 8px 0px 8px 50px;
   font-weight: bold;
   margin-top: 7px;
   height: 30px;
   
}
#textbereich {
   background-color: white; 
   margin-left: 137px;
   width: 598px;
   padding: 15px;
   color: #5f524b;
   border: 2px solid #030;
   border-top: 0;
   text-align: justify;
}
.clearing { clear: both; }
.bildrechts { 
   float: right;
   padding: 10px;
   margin: 10px;
}
.bildlinks {
	float: left;
}
#topmenu {
	position: absolute;
	top: 0px;
	left: 840px;
	margin: 10px;
}
p span { 
   font-weight: bold;
   color: black;
}
#topmenu a:hover {color: #F00;}
#antrag {
	position: absolute;
	left: 620px;
	top: 8px;
	background-image: url(Grafiken/anmelden.gif);
	background-repeat:no-repeat;
	height: 30px;
	width: 136px;
	font-weight: bold;
	padding: 8px 0px 5px 50px;
}
#antrag a:hover {
	color: #e31f1d;
	font-weight: bold;
}
p a:hover {color: #F00;}
#naturfreundehaus {
	position: absolute;
	top: 220px;
	left: 500px;
}
#ferienprogramm { z-index: 100;}
/* ---------------  Positionierung Broschüren ----------------------------- */
.jusi a {
	position: absolute;
	top: 75px;
	left: 20px;
}

.jusi a span { display: none; }

.jusi a:hover span {
   display: block;
   position: absolute;
   left: 200px;
   top: -50px;
   z-index: 100;
} 
.ermstal a {
	position: absolute;
	top: 75px;
	left: 80px;
}
.ermstal a span { display: none; }

.ermstal a:hover span {
   display: block;
   position: absolute;
   left: 140px;
   top: -50px;
   z-index: 100;
} 

/*  --------------  Beginn LIGHTBOX ------------------------------- */

#lightbox{	
   position: absolute;
   left: 0; 
   width: 100%; 
   z-index: 500; 
   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(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(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: 113px; 
   float: right;  
   padding-bottom: 0.7em; 
   outline: none;
}	 	

#overlay{ 
    position: absolute; 
	top: 0; 
	left: 0; 
	z-index: 90; 
	width: 100%; 
	height: 200%; 
	background-color: black;
}
   
} /* Ende @media - nicht löschen -*/

/* Ende Bildschirm.css */