/*
Item Name : CSS3 Image Lightbox
Author URI : http://codecanyon.net/user/Pixelworkshop/
Version : 1.0
*/

/*

TABLE OF CONTENTS

00 PAGE STYLING (REMOVABLE)
01 IMAGE LIGHTBOX 
   1. Thumbnails
   2. Lightbox Container
   3. Lightbox Close Button
   4. Lightbox Toggle
02 LIGHTBOX COLORS
   1. Black Theme
   2. White Theme

*/



/*  _______________________________________

	00 PAGE STYLING (REMOVABLE)
    _______________________________________  */



/* 
The following markup is used only for demonstration purposes,
this whole section can be removed.
*/

.wrapper {
	width:960px;
	margin:20px auto;
	z-index: 1000;
}

ul {line-height:21px;}
a {text-decoration:none;}
.clear {clear:left;height:21px;line-height:21px;}



/*  _______________________________________

	01 IMAGE LIGHTBOX
    _______________________________________  */



/* 1. Thumbnails */

.lightbox_black img,
.lightbox_white img {
	border:none;
}
.lightbox_thumbnails {
	width:975px;
	padding:0;
	margin:0 auto;
}
	.lightbox_thumbnails > .lightbox_img {
	width:300px;
	height:225px;
	display:inline-block;
	float:left;
	list-style:none;
	margin:0 15px 15px 0;
	background:#000000;
	position:relative;
	overflow:hidden;
	border:5px solid #e1e1e1;
	outline:none;
	}
	.lightbox_thumbnails > .lightbox_img img {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=100);
        -moz-opacity:1;
        -khtml-opacity: 1;
        opacity: 1;
		-webkit-transition: opacity 0.5s;
		-moz-transition: opacity 0.5s;
		-o-transition: opacity 0.5s;
		-ms-transition: opacity 0.5s;
		transition: opacity 0.5s;
	}
	.lightbox_thumbnails > .lightbox_img:hover img {
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter: alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity:0.7;
	opacity:0.7;
	cursor: pointer;
	}
.lightbox_link {
	outline:none;
	line-height:21px;
	margin-left:5px;
}
.lightbox_link:hover {
	cursor:pointer;
}

/* 2. Lightbox Container */

.lightbox_container {
	position:fixed;
	width:100%;
	height:100%;
	display:table;
	text-align:center;
	top:0;
	left:-9999em;
	z-index:1000;
	filter: alpha(opacity=0);
	-moz-opacity:0;
	-khtml-opacity:0;
	opacity:0;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	transition: opacity 0.5s;
	background-color: #3CB44A;
}
.lightbox_frame {
	display:table-cell;
	vertical-align:middle;
	*position: absolute;
	*top: 50%;
	*left:50%;
}
	.lightbox_frame img,
	.lightbox_frame iframe,
	.lightbox_frame .lightbox_content {
	padding:15px 15px 15px 15px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	border-radius:6px;
		*position: relative; 
		*top: -50%;
		*left: -50%;
	background-color: #3CB44A;
	}
	.lightbox_frame .lightbox_content {
		width:600px;
		margin:0 auto;
		text-align:left;
		padding:15px 15px 15px 15px;
	}
.lightbox_description {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:14px;
	position:relative;
	z-index:9998;
	margin-top: 15px;
	margin-right: auto;
	margin-bottom: 15px;
	margin-left: auto;
}

/* 3. Lightbox Close Button */

.lightbox_close {
	width:60px;
	height:30px;
	top:0;
	left:-9999em;
	position:fixed;
	z-index:9999;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-style:italic;
	font-size:14px;
	text-align:center;
	line-height:14px;
	padding:0 12px 14px 12px;
	-webkit-border-radius:0 0 6px 6px;
	-moz-border-radius:0 0 6px 6px;
	border-radius:0 0 6px 6px;
    filter: alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
	-webkit-transition: opacity 0.5s;
	-moz-transition: opacity 0.5s;
	-o-transition: opacity 0.5s;
	-ms-transition: opacity 0.5s;
	transition: opacity 0.5s;
}
.lightbox_close:hover {
	cursor:pointer;
}

/* 4. Lightbox Toggle */

.lightbox_img:focus + .lightbox_container,
.lightbox_link:focus + .lightbox_container,
.lightbox_container:hover,
.lightbox_container:focus {
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
	left:0;
}
.lightbox_close:focus .lightbox_container {
	left:-9999em;
    filter: alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity:0;
    opacity:0;
}
.lightbox_img:focus ~ .lightbox_close,
.lightbox_link:focus ~ .lightbox_close,
.lightbox_container:hover ~ .lightbox_close,
.lightbox_container:focus ~ .lightbox_close {
    filter: alpha(opacity=100);
    -moz-opacity:1;
    -khtml-opacity:1;
    opacity:1;
	left:50%;
	margin-left:-30px;
}



/*  _______________________________________

	02 LIGHTBOX COLORS
    _______________________________________  */



/* 1. Black Theme */

.lightbox_black {
	background:url("../img/overlay_black.png");
}
.lightbox_black p,
.lightbox_black .lightbox_link:hover,
.lightbox_close_black p {
	color:#000000;
}
.lightbox_black a,
.lightbox_black .lightbox_link {
	color:#222222;
}
.lightbox_black .lightbox_frame img,
.lightbox_black .lightbox_frame iframe,
.lightbox_black .lightbox_frame .lightbox_content,
.lightbox_close_black {
	background:#ffffff;
}

/* 2. White Theme */

.lightbox_white {
	background:url("../gallery/overlay_white.png");
}
.lightbox_white p,
.lightbox_white .lightbox_link:hover,
.lightbox_close_white p {
	color:#ffffff;
	font-family: Lato;
}
.lightbox_white a,
.lightbox_white .lightbox_link {
	color:#cccccc;
}
.lightbox_white .lightbox_frame img,
.lightbox_white .lightbox_frame iframe,
.lightbox_white .lightbox_frame .lightbox_content,
.lightbox_close_white {
	background:#3CB44A;
}