/* =================================
Stylesheet für Online-Galerie Manfred Merkel
Datei: style.css
Datum: 2011-12-22
Autor: Eva-Maria Merkel
Aufbau: 	
====================================*/
body {
	font-family:'Special Elite', Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	background:url(Bilder/Cover/Hintergrund.jpg);
	background-repeat:no-repeat;
	color:black;
	margin:0;
	padding:0;
	width:100%;
	}
#wrapper {
	margin: 8% 0 20% 10%; 
	float:right;
	width:80%;
	}
#anzeigeflaeche  {
	float:right; 
	position:relative;
	z-index:0;
	width:100%;
	height:100%;
	min-height:450px;
	padding:1%;
	padding-right:0; 	
	background-color: white;
 	opacity:0.9;
	padding:1%;
	padding-right:0;
	-moz-border-radius-topleft:20px;
	-moz-border-radius-bottomleft:20px;
	-khtml-border-radius-topleft:20px;
	-khtml-border-radius-bottomleft:20px;
	-moz-box-shadow:3px 5px 15px #000;
	-webkit-box-shadow:3px 5px 15px #000;
	box-shadow:3px 5px 15px #000;
	}

#navi {
	float:right;	
	margin-top:120px;
	z-index:2;
	}
#navi a {
	display:block;
	color:#FFF;
	padding:15px 22px 15px 20px;
	margin:20px 0px 0 0;
	-moz-border-radius-topleft:10px;
	-moz-border-radius-bottomleft:10px;
	-khtml-border-radius-topleft:10px;
	-khtml-border-radius-bottomleft:10px;
	-moz-box-shadow:1px 3px 10px rgba(0, 0, 0, .9);
	-webkit-box-shadow:1px 3px 10px rgba(0, 0, 0, .9);
	box-shadow:1px 3px 10px rgba(0, 0, 0, .9)
	/* alte webkit-basierte Browser (Safari, Chrome, etc.) */
	background: -webkit-gradient(linear, left top, left bottom, from(#848487), to(#3c3c3c));
	/* neue webkit-basierte Browser(Safari, Chrome, etc.) */
	background: -webkit-linear-gradient(top, #848487, #3c3c3c);
	/* Mozilla/Gecko (Firefox, Flock, etc) */
	background: -moz-linear-gradient(top, #848487, #3c3c3c);
	/* Für Presto (Opera ab Version 11.1) */
	background: -o-linear-gradient(top, #848487, #3c3c3c);
	/* IE10 Pre-Beta */
	background: -ms-linear-gradient(top, #848487, #3c3c3c);
	/* aktueller W3C working draft */
	background: linear-gradient(top, #848487, #3c3c3c);
	}
#navi a:hover {
	-moz-box-shadow: 3px 5px 15px #000;
	-webkit-box-shadow:3px 5px 15px #000;
	box-shadow:3px 5px 15px #000;
	}
#navi a:active {
	opacity:0.5;
	}
#kopfbereich { 
	margin-left:2%;
	z-index:1;
	position:relative;
	}
#content {
	float:left;
	margin-left:0%;
	height:100%;
	z-index:1;
	}
#library {
	z-index:3;
	}
ul {
  	list-style:none;
  	padding:0;
  	margin:0;
	}
#kontaktseite li {
  	display:inline-block; 
	padding:20px 30px 29px 60px;
	list-style:none;
	text-align:center;
	z-index:3;
	}
#imageGallery li {
  	display:inline-block;
  	margin:0;
	padding:20px 30px 29px 40px; 
	}
#imageGallery img {
	border:0;
	-moz-box-shadow:1px 3px 5px rgba(0, 0, 0, .9);
	-webkit-box-shadow:1px 3px 5px rgba(0, 0, 0, .9);
	box-shadow:1px 3px 5px rgba(0, 0, 0, .9)
	}
#imageGallery a:hover img {
	-moz-box-shadow:1px 3px 10px rgba(0, 0, 0, .9);
	-webkit-box-shadow:1px 3px 10px rgba(0, 0, 0, .9);
	box-shadow:1px 3px 10px rgba(0, 0, 0, .9)
	}
#imageGallery span {
	font-size:100%;
	width:100%;
	display:block;
	padding:10px 0 0 0;
	color:#000;
	text-align:center;
	}
li[id] {
   overflow:hidden;
   position:absolute;
   width:0;
   height:0;
   left:0;
	top:0;
	opacity:0;
	background:rgba(0,0,0,.5);
	}
li[id] a:before {
   content:url(Bilder/ic-close.png);
   position:absolute;
   top:-33px;
   right:-33px;
   opacity:0;
   }
li[id] a:hover:before {
	opacity:1;
	}
li[id]:target {
   width:100%;
	height:100%;
	opacity:1;
	}
#library li[id]:target a {
	background-color: #FFF;
  	position:absolute;
  	top:33%;
	left:40%;
  	margin:-175px 0 0 -117px;
	border:25px solid #fff;
	text-decoration:none;
	-webkit-animation:zoom 1.5s cubic-bezier(0,0,0,1);
	-moz-animation:zoom 1.5s cubic-bezier(0,0,0,1);  	
	-moz-box-shadow:0 0 74px 5px rgba(0, 0, 0, .8);
	-webkit-box-shadow:0 0 74px 5px rgba(0, 0, 0, .8);
	box-shadow:0 0 74px 5px rgba(0, 0, 0, .8);  	
	}
li[id]:target a img {
	border:0;
	}
li[id]:target a span {
	font-size:75%;
	width:100%;
	display:block;
	padding:10px 0 0 0;
	color:gray;
	text-align:center;
	font-family:Verdana, Arial, Helvetica, sans-serif; 
	}
a {
	outline:none;
	}
@-webkit-keyframes zoom {
  	0% { -webkit-transform:scale(0); }
  	100% { -webkit-transform:scale(1); }
	}
@-moz-keyframes zoom {
  	0% { -moz-transform:scale(0); }
  	100% { -moz-transform:scale(1); }
	}
@media screen and (max-height: 100% /*850px*/) {
	li[id]:target a  {		
	margin:-200px 0 0 -118px;	
	}
}
#cover1 .zoom1
h1 {font-family:'Special Elite', Verdana, Arial, Helvetica, sans-serif; 
	font-size:200%}
h1 {text-shadow:1px 1px 3px #000000}
a  {text-decoration:none; }
address {
	font-family:'Special Elite', Verdana, Arial, Helvetica, sans-serif;
	font-size:100%;
	text-align:center;
	font-style:normal;
	margin:2%;
	}