#content{position: relative;}

#gallery{
	margin: 0 auto;
}
#gallery li{float: left; list-style: none; margin: 10px 20px 0 0; position: relative;}
#gallery li:hover span{opacity: 1;}
#gallery span{background: rgba(0,0,0,0.7); opacity: 0; padding: 10% 0; width: 100%; text-align: center; position: absolute; left: 0; bottom: 0; -moz-transition: opacity 0.6s ease-in; -webkit-transition: opacity 0.6s ease-in;}

#gallery a{display: block; position: relative; -moz-transition: border 0.6s ease-out; -o-transition: border 0.6s ease-out; -webkit-transition: border 0.6s ease-out;}
#gallery a:focus{-moz-transform: rotate(-2deg); -o-transform: rotate(-2deg); -webkit-transform: rotate(-2deg);}
#gallery img{float: left;}

#lightbox div{
	background: #fff;
	border: 10px solid #fff;
	opacity: 0;
	position: absolute;
	left: -50%;
	top: -50%;
	z-index: -1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 0 30px rgba(0,0,0,1);
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.6);
	box-shadow: 0 0 80px rgba(0,0,0,0.4);
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
#lightbox div:target{opacity: 1; z-index:10}
#lightbox img{float: left; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; }
#lightbox a{background: url(../images/dialog_close.png) no-repeat left top; height: 50px; width: 50px; position: absolute; top: -42px; right: -42px;}

/* ipad portrait */
@media only screen and ( min-width: 768px) and ( max-width: 981px ) {
#lightbox a{background: url(../images/dialog_close35.png) no-repeat left top; height: 35px; width: 35px; position: absolute; top: -32px; right: -32px;}
#lightbox div{
	background: #fff;
	border: 6px solid #fff;
	opacity: 0;
	position: absolute;
	left: -40%;
	top: -60%;
	z-index: -1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 0 30px rgba(0,0,0,1);
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.6);
	box-shadow: 0 0 80px rgba(0,0,0,0.4);
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
}

/* mobile*/
@media only screen and ( max-width: 640px) {
#lightbox a{background: url(../images/dialog_close20.png) no-repeat left top; height: 20px; width: 20px; position: absolute; top: -12px; right: -12px;}
#lightbox div{
	background: #fff;
	border: 3px solid #fff;
	opacity: 0;
	position: absolute;
	left: -40%;
	top: -60%;
	z-index: -1;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	border-radius: 10px;
	-moz-box-shadow: 0 0 30px rgba(0,0,0,1);
	-webkit-box-shadow: 0 0 30px rgba(0,0,0,0.6);
	box-shadow: 0 0 80px rgba(0,0,0,0.4);
	-moz-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
}
}