/*
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)
    _______________________________________  */





/*  _______________________________________

	01 IMAGE LIGHTBOX
    _______________________________________  */



/* 1. Thumbnails */

.lightbox_black img,
.lightbox_white img {
	border:none;
}
.lightbox_thumbnails {
	width:650px;
	padding:0;
	margin:0 auto;
}
	.lightbox_thumbnails > .lightbox_img {
		width:300px;
		height:200px;
		display:inline-block;
		float:left;
		list-style:none;
		margin:0 15px 15px 0;
		background:#000000;
		position:relative;
		overflow:hidden;
		border:5px solid #eeeeee;
		outline:none;
	}
	.lightbox_thumbnails > .lightbox_img img {
        -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
        filter: alpha(opacity=70);
        -moz-opacity:0.7;
        -khtml-opacity: 0.7;
        opacity: 0.7;
		-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=100);
        -moz-opacity:1;
        -khtml-opacity:1;
        opacity:1;
	}
.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:100;
    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_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%;
	}
	.lightbox_frame .lightbox_content {
		width:600px;
		margin:0 auto;
		text-align:left;
		padding:15px 15px 15px 15px;
	}
/*.lightbox_description {
	
	margin:-36px auto;
	position:relative;
	z-index:9998;
}
*/


.lightbox_description_my {
	
	margin:-36px auto;
	position:relative;
	z-index:9998;
}






/* 3. Lightbox Close Button */

.lightbox_close_my {
	width:60px;
	height:30px;
	top:5px;
	left:-9999em;
	position:fixed;
	z-index:9999;
	background-color:none;
	text-align:center;
	line-height:14px;
	padding:0 12px 14px 12px;
	
}
.lightbox_close_my: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_my,
.lightbox_container:focus ~ .lightbox_close_my {
    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("../images/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("../images/overlay_black.png");
}
.lightbox_white p,
.lightbox_white .lightbox_link:hover,
.lightbox_close_white p {
	color:#fff;
}
.lightbox_white a,
.lightbox_white .lightbox_link {
	color:#fff;
}



.lightbox_white .lightbox_frame img,
.lightbox_white .lightbox_frame iframe,
.lightbox_white .lightbox_frame .lightbox_content,
.lightbox_close_white {
	background:#fff;
}