@import "common.less";

.main#gallery{
	.thumb_list{
		.thumb{
			position : relative;
			width : 170px;
			height : 170px;
			margin-left : 25px;
			margin-top : 25px;
			float : left;
			cursor : pointer;
			img{
			}
		}
	}

}

.thumb_list_container{
	.abs();
	width : @main_w;
	height : @main_h;
	overflow: auto;
}


.view{
	.abs();
	.protected();
	overflow : hidden;
	left : 500px;
	top: 275px;
	width : 0px;
	height : 0px;
	margin-left : 0px;
	margin-top : 0px;
	background-color : rgba(0,0,0,.7);
 	transition: width 0.5s ease, height 0.5s ease, margin-left 0.5s ease, margin-top 0.5s ease;
}

.view_shown{
	cursor : pointer;
	left : 500px;
	top : 275px;
	width : 740px;
	height : 510px;
	margin-left : -370px;	
	margin-top : -255px;	
}

.view_img{
	.abs();
	width : 500px;
	height : 500px;
}

.view_img_container{
	.abs();
	z-index : 2;
	width : 500px;
	height : 500px;
	margin-top: -250px;
	margin-left: -250px;
	left : 50%;
	top :  50%;	
}

.thumb_guide_top_arrow{
	.abs();
	left : 50%;
	top : 0px;
	width : 60px;
	height : 60px;
	margin-left : -30px;
	background-color : rgba(0,0,0,.6);
	border-radius : 10px;
}
.thumb_guide_bottom_arrow{
	.abs();
	left : 50%;
	bottom : 0px;
	width : 60px;
	height : 60px;
	margin-left : -30px;
	background-color : rgba(0,0,0,.6);
	border-radius : 10px;
}


.view_guide_left_arrow{
	.abs();
	left : 20px;
	top : 50%;
	width : 100px;
	height : 100px;
	margin-top : -25px;
}
.view_guide_right_arrow{
	.abs();
	right : 20px;
	top : 50%;
	width : 100px;
	height : 100px;
	margin-top : -50px;
}