/* _________ Stylesheet Galerie   _________ */

/*____ STRUKTUR (Syntax) in Anwendung _______*/
/*
<div class="galerie">
	<dl>Galerie
		<dt>Galerie-Element
			<a>aktiverTeil
				<i>Vorschau-Bild</i>
				<b>ausgewŠhltesBild</b>
				<span>TextAusgewŠhltesBild</span>
			</a>
		</dt>
		...
	</dl>
</div>

†berdeckungs-Reihenfolge 'z-index':
active -> ohne 5 -> focus 8 -> hover 10 

*/



*{
	border:0 none;
}

/*____ ANORDNUNG der Vorschaubilder ___________*/
.galerie{ 
	position:relative;
	top:21px;
	left:32px;
	width:561px; 
	height:75px;
	margin-bottom:12px;
	float:left;
}
.galerie dl dt{
	float:left;
	font-size: 0.4em;	/* fŸr die <img ... alt="..."> Texte im Falle dass src="..." nicht vorhanden.  */
	line-height: 2em;
	
}


/*  MOUSEOVER EFFEKTE --------------------- */

/* ____ EIGENSCHAFTEN 'i' der Vorschaubilder __________________ */
/* allgemein */
.galerie dt i img{
	border:none;
	z-index:5;
	border-right:10px solid #fff;
	width:100px;
	height:75px;
}
/* speziell zu quadratischen Bildern */
.galerie dt i img.ikqua{
	width:75px;
}
/* ausgewŠhlt */
.galerie a:focus,
.galerie a:hover{ 
	z-index:40; 
	/* --wegen IE muss hier eine Farbe stehen-- */
	background-color:#eeeee5;
	text-decoration:none;
}



/* ____ EIGENSCHAFTEN 'b' des ausgewŠhlten Bildes ________________*/
/* allgemein */
.galerie b img{
	border:1px solid #777;
	width:256px;
}
/* verschwindend */
.galerie a b{
	display: none;
} 
/* erscheinend */
.galerie a:focus b,
.galerie a:hover b{
	display:block;
	position:absolute;
	z-index:10;
	/* Position oben, Hšhe ganzer Block (Bild, 4 Zeilen Text), Breite ganzer Block (mit lšschendem Hintergrundbild, da dieses senkrechte Streifen hat, muss Position gleich sein mit Block-Standard wenn dieses Bild nicht erscheint */
	top:0px;
	text-align:center;
	width:300px;
	left:-335px;
	height:338px;
	background:url(in-pic/streif.gif) repeat left;
}
/* festgehalten */
.galerie a:focus b{
	z-index:8;
}



/* ____ EIGENSCHAFTEN 'span' Text-Beschreibung des ausgewŠhlten Bildes ______ */
/* verschwindend */
.galerie a span,
.galerie a span.tqua{
	display: none;
}
/* erscheinend */
.galerie a:focus span,
.galerie a:hover span{
	display:block;
	position:absolute;
	z-index:10;
	font-family: Verdana, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #001f61;
	line-height:130%;
	text-align:center;
	width:248px;
	left:-335px;	/* Position links bei .foto-gross */
	top:202px;		/* Position unten, Grš§e Teil des Blocks, abgestimmt unterem Abstand von [.foto-gross img] */
	margin:0 26px 0 26px;
}
/* festgehalten */
.galerie a:focus span{
	z-index:8;
}
/* Text speziell zu quadratischen Bildern */
.galerie a:focus span.tqua,
.galerie a:hover span.tqua{
	/* Position weiter unten */
	top:266px;
}