/* Gallery that may host the lightbox */
ul.gallery{
	overflow: auto;
	list-style: none !important;
	padding: 18px 72px;
}
ul.gallery li{
	float:left;
}
ul.gallery li a img{
	width: 120px;
	height:120px;
	border-radius: 120px;
	margin: 7px;
	border: 5px solid #e5e0d8;
}
ul.gallery li a img:hover{
	border: 5px solid #485718;
}

/* Lightbox itself */
#kreoLightbox{
	display: none;
	position: fixed;
	width:100%;
	height:100%;
	background: #f2eee8;
	background: rgba(242,238,232,0.8);
	z-index: 5000;
}
#kreoLightbox .top{
	content:"";
	display: block;
	height:10%;
}
/* this is an awesome trick \/ */
/* The ghost, nudged to maintain perfect centering */
#kreoLightbox .img-container:before{
	content: '';
	display: inline-block;
	height: 100%;
	vertical-align: middle;
	margin-right: -0.25em; /* Adjusts for spacing */
}
#kreoLightbox .img-container{
	height: 80%;
	text-align: center;
}
#kreoLightbox img.large{
	display: inline-block;
	vertical-align: middle;
	max-width: 80%;
	max-height: 100%;
	-webkit-transition: opacity 0.4s ease;
	-moz-transition: opacity 0.4s ease;
	-ms-transition: opacity 0.4s ease;
	-o-transition: opacity 0.4s ease;
	transition: opacity 0.4s ease;
	border: 20px solid white;
}
#kreoLightbox img.loading{
	opacity: 0.4
}
#kreoLightbox .next, #kreoLightbox .prev{
	position: absolute;
	top: 50%;
	width: 22px;
	height: 48px;
	margin-top: -24px;
	cursor: pointer;
}
#kreoLightbox .next{
	right: 25px;
	background: url('/view/img/ico_forw_48_bl.png') right center no-repeat;
}
#kreoLightbox .prev{
	left: 25px;
	background: url('/view/img/ico_back_48_bl.png') right center no-repeat;
}
#kreoLightbox .exit{
	position: absolute;
	top: 25px;
	height: 24px;
	width: 24px;
	right: 25px;
	font-weight: bold;
	font-size: 14px;
	padding: 5px 20px 5px 5px;
	text-transform: uppercase;
	color: white;
	cursor: pointer;
	background: url('/view/img/ico_close_24_bl.png') center center no-repeat;
}