/* ------------------------------------------------------------------------------------	*/
/* CSS3.0 Bildergalerie (Lightbox) / Definitionen					*/
/* - Die Bildergalerie imitiert ganz ohne Java-Skript eine sog. Lightbox zur		*/
/*   Darstellung von Bildern, mit der Moeglichkeit, weiterzurollen.			*/
/* - Einschraenkungen sind jedoch vorhanden						*/
/*   - eingeschraenkte Effektmoeglichkeiten						*/
/*   - Positionierungsprobleme bei Verwendung in einem geschachtelten Container		*/
/*   - es existiert nur ein Vorwaerts-Button						*/
/*     - rueckwaerts nur ueber die Navigation moeglich					*/
/*											*/
/* Anmerkungen:										*/
/* - die Galerie beruht auf Beispielen aus dem Internet, insbesondere auf:		*/
/*   - http://50226.de/css3-lightbox-gallery-ohne-javascript.html			*/
/* - noch sind nicht alle Konstrukte verstanden						*/
/* ------------------------------------------------------------------------------------	*/

.galerie li
{
	list-style-type		: none;
}
.galerie a
{
	text-decoration		: none;
	color			: #ddd;
}
.galerie a:hover
{
	opacity			: 0.5;
}
.galerie li:not(#home)
{
	float			: right;
	height			: 75px;
	width			: 96px;
	position		: relative;
	border			: 4px double #000000;
	background-color	: #C0C0C0;
	margin-bottom		: 2px;
}
.galerie li a
{
	position		: absolute;
	left			: 0px;
	top			: 0px;
}
.galerie li img
{
	width			: 96px;
	height			: 75px;
	border			: 0;
}

/* Eine Hilfsklasse, um einen durchsichtigen Container erstellen zu koennen, welcher	*/
/* einen Link fuer den Aufruf einer Java-Funktion beinhaltet. Damit kann dann ein	*/
/* weiteres Bild vergroessert dargestellt werden. Hierbei geht es ausschliesslich um	*/
/* Schaltplaene.									*/
.galerie li .schematic
{
	position		: absolute;
    	border			: none;
	width			: 0px;
	height			: 0px;
    	display			: none;
}
/* Das 'target' hat die gleiche Groesse wie das Bild und muss zentriert werden.		*/
/* Um es ueber einen eventuellen Link anklicken zu koennen, muss es mit einem hohen	*/
/* z-index versehen werden.								*/
.galerie li:not(#home):target
{
	background		: #000;
    	border			: 0;
    	position		: fixed;
	left			: 50%;
	margin-left		:-324px;
	top			: 50%;
	margin-top		:-252px;
    	z-index			: 15;
}
.galerie li:not(#home):target a
{
    	position		: absolute;
	width			: 100%;
    	height			: 100%;
	opacity			: 1;
    	cursor			: default;
    	top			: 0%;
    	margin			: auto;
}
.galerie li:not(#home):target img
{
	position		: relative;
    	border			: none;
	width			: 648px;
	height			: 504px;
    	display			: block;
    	top			: 0%;
    	margin			: auto;
    	opacity			: 1;
}

/* Der unsichtbare Container wird sichtbar gemacht. Da dieser Container einen Link der	*/
/* selben Art beinhaltet wie das Mutter-li-Element, ist er automatisch ueber dem Bild	*/
/* plaziert, da er die position-Angabe 'absolute' hat.					*/
.galerie li:not(#home):target .schematic
{
	position		: relative;
	display			: block;
    	border			: none;
	width			: 648px;
	height			: 504px;
    	top			: 0%;
    	margin			: auto;
    	opacity			: 0;
}

.galerie li:not(#home):target + li:not(#home)
{
	position		: fixed;
	left			: 50%;			/* Die folgenden vier Zeilen	*/
	margin-left		:-65px;			/* zentrieren d. "weiter"-Knopf	*/
    	top			: 50%;			/* vertikal und halten ihn auf	*/
    	margin-top		:-345px;		/* gleichem Abstand zum Bild.	*/
    	height			: 75px;
    	width			: 129px;
    	border-radius		: 0 50px 50px 0;
	border			: 4px double #000000;
	z-index			: 13;
    	background		: rgba(192, 192, 192, 1);
}
.galerie #home
{
    	opacity			: 0;
}
.galerie li:target ~ #home
{
    	opacity			: 1;
    	position		: fixed;
    	font-size		: 300em;
    	z-index			: 12;
    	width			: 100%;
    	height			: 100%;
	top			: 0%;
	left			: 0%;
	background		: rgba(0,0,100,0.7);
}
.galerie li:target ~ #home a
{
    	color			: #222;
    	left			: 0%;
    	opacity			: 1;
    	position		: absolute;
    	top			: 0%;
    	cursor			: default;
}
#home a:hover
{
	opacity			: 0.5 !important
}