/* Enthaelt alle Basisangaben, was Farben und Schriftarten und -groessen fuer die Bildergalerie angeht */

/* Variables
$primecolor:#002 #489;
$hovercolor:#ACC;
$active:#5BC #002;
$linkcolor:#667;
$linkhover:#489;
*/

/* INDIVIDUALS */
li.pics {
 float:left;
 margin:0;
 padding:5px;
 background:#eee;
 list-style:none;
}

li.pics img {
	display:block;
}

/* FONTS */

/* TEXT-DECORATION */

/* SIZE */

/* PICS */
img {
 border:0;
}

#photo {
	width:100%;
	height:auto;
}

#blend {
	position:relative;
	width:55px;
	height:55px;
}

#blend img#top:hover {
	opacity:0;
}

#blend img {
	position:absolute;
	top:0;
	left:0;
	opacity:1;
	transition:opacity 1s;
	-moz-transition:opacity 1s; /* Zeitdauer fuer Firefox */
	-o-transition:opacity 1s; /* ...fuer Opera */
	-webkit-transition:opacity 1s; /* ... fuer Smartphone, tablet, google */
}

/* FULLVIEW */
ul.lightbox li {
	overflow: hidden; /* Scrollbalken ausschalten */
	position:absolute;
	width:0;
	height:0;
	left:0;
	top:0;
	opacity:0;
}

/* Durch die Pseudoklasse "target" (:target) am Listenpunkt li wird definiert, was passiert, 
wenn man auf den Bereich klickt, der von dem Listenpunkt umschlossen wird. Klickt man noch einmal
drauf, kommt diese Einstellung nicht mehr zur Anwendung. */
ul.lightbox li:target {
	width:100%;
	height:100%;
	opacity:1; /* Transparenz 100% */
	background: rgba(0,0,0,0.8)
	-moz-transition:opacity 1.5s; /* Zeitdauer fuer Firefox */
	-o-transition:opacity 1.5s; /* ...fuer Opera */
	-webkit-transition:opacity 1.5s; /* ... fuer Smartphone, tablet, google */
}

ul.lightbox li:target a {
	position: absolute;
	top:50%; /* zentriert das Bild von oben */
	left:50%; /* zentriert das Bild von links */
	margin:-420px 0 0 -410px; /* nach oben und links um 300px */
	border: 15px solid #fff;
	background:#fff;
	-moz-box-shadow:0 1px 8px #000;
	-o-box-shadow:0 1px 8px #000;
	-webkit-box-shadow:0 1px 8px;
	z-index:10;
}

ul.lightbox li p {
	font-weight:normal;
	text-align:center;
	color:#fff;
}