/* View.js Main Styles */

.viewer {
	background-color:rgba(0,0,0,0.8);
	background-color:transparent;
	background-image:-moz-radial-gradient(50% 50%,ellipse cover,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.9) 100%);
	background-image:-webkit-radial-gradient(50% 50%,ellipse cover,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.9) 100%);
	background-image:-o-radial-gradient(50% 50%,ellipse cover,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.9) 100%);
	background-image:-ms-radial-gradient(50% 50%,ellipse cover,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.9) 100%);
	background-image:radial-gradient(50% 50%,ellipse cover,rgba(0,0,0,0.7) 0,rgba(0,0,0,0.9) 100%)
}

.viewer li>div {
	left:0px;
	top:50px;
	bottom:50px;
	right:0px
}

.viewer img {
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	-o-border-radius:5px;
	border-radius:5px;
	-webkit-box-shadow:0 5px 20px rgba(0,0,0,0.5);
	-moz-box-shadow:0 5px 20px rgba(0,0,0,0.5);
	box-shadow:0 5px 20px rgba(0,0,0,0.5);
}

.viewer .close {
	width:50px;
	height:50px;
	text-align:center;
	line-height:50px;
	top:0;
	right:0;
	background:#000;
	color:#fff;
	font-size:25px;
	font-family:arial,helvetica,sans-serif;
}

/* General */

.ws-view {overflow: hidden;margin-bottom: 18px;}
.ws-view img {border: 0;}
.thumbnail a {display:block;}

/* Style Cut */

.cut .ws-view .thumbnail {padding: 15px; float: left; position: relative;}
.cut .ws-view .thumbnail-bg {padding: 4px; border: 1px solid #c8c8c8; background: #ffffff; float: left;}
.cut .ws-view .corner-tl, div.cut div.ws-view div.corner-tr, div.cut div.ws-view div.corner-bl, div.cut div.ws-view div.corner-br {position: absolute; width: 25px; height: 25px; z-index: 5;}
.cut .ws-view .corner-tl {top: 12px; left: 12px; background: url(images/corners.png) -25px -25px no-repeat;}
.cut .ws-view .corner-tr {top: 12px; right: 12px; background: url(images/corners.png) 0 -25px no-repeat;}
.cut .ws-view .corner-bl {bottom: 12px; left: 12px; background: url(images/corners.png) -25px 0 no-repeat;}
.cut .ws-view .corner-br {bottom: 12px; right: 12px; background: url(images/corners.png) 0 0 no-repeat;}
.cut .ws-view .thumbnail img {float: left;}

/* Style Default */

.default .ws-view .thumbnail {padding: 8px; float: left;}
.default .ws-view .thumbnail-bg {padding: 1px; border: 1px solid #c8c8c8; background: #ffffff; float: left;}
.default .ws-view .thumbnail img {float: left;}

/* Style Plain */

.plain .ws-view .thumbnail {float: left;}
.plain .ws-view .thumbnail img {float: left;}
.plain img {opacity: 0.3; -webkit-transition: all .7s linear .3s; -moz-transition: all .7s linear .3s; -ms-transition: all .7s linear .3s; -o-transition: all .7s linear .3s; transition: all .7s linear .3s; float:left; vertical-align: top;}
.plain img:hover {opacity: 1; -webkit-transition: all .1s linear 0s; -moz-transition: all .1s linear 0s; -ms-transition: all .1s linear 0s; -o-transition: all .1s linear 0s; transition: all .1s linear 0s;}

/* Style Polaroid */

.polaroid .ws-view .thumbnail {padding: 15px; float: left; position: relative;}
.polaroid .ws-view .tape {position: absolute; top: 1px; left: 50%; z-index: 5; width: 78px; height: 28px; margin-left: -37px; background: url(images/tape.png) 0 0 no-repeat;}
.polaroid .ws-view .thumbnail img {float: left;}
.polaroid-thumb {background: #fafafa; background: -moz-linear-gradient(top, #fafafa 0%, #f5f5f5 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fafafa), color-stop(100%,#f5f5f5)); background: -webkit-linear-gradient(top, #fafafa 0%,#f5f5f5 100%); background: -o-linear-gradient(top, #fafafa 0%,#f5f5f5 100%); background: -ms-linear-gradient(top, #fafafa 0%,#f5f5f5 100%); background: linear-gradient(to bottom, #fafafa 0%,#f5f5f5 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fafafa', endColorstr='#f5f5f5',GradientType=0 ); border: 1px solid #c8c8c8;; float: left; overflow: hidden; -webkit-transition: all .1s linear 0s; -moz-transition: all .1s linear 0s; -ms-transition: all .1s linear 0s; -o-transition: all .1s linear 0s; transition: all .1s linear 0s; float:left; padding:6px 6px 18px 6px;}
.polaroid-thumb:hover {box-shadow: 0 0 10px #666;}

/* Style Rounded */

.rounded .ws-view .thumbnail {padding: 7px; float: left; position: relative;}
.rounded .ws-view .thumbnail img {float: left;}
.rounded .ws-view .tb-radius {-webkit-border-radius: 12px; -moz-border-radius: 12px; -ms-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; overflow: hidden;}

/* Animation for View.js */

.viewer li {-webkit-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); -moz-transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000); transition: width 500ms cubic-bezier(0.075, 0.820, 0.165, 1.000);}
.viewer .caption {visibility: hidden; opacity: 0; -webkit-transition: opacity 1.5s ease-in-out; -moz-transition: opacity 1.5s ease-in-out; transition: opacity 1.5s ease-in-out;}
.viewer .current .caption {opacity: 100; visibility: visible;}

.current img:hover, li.next:hover {cursor: url(images/cursor-right.cur), e-resize;}
li.previous:hover {cursor: url(images/cursor-left.cur), w-resize;}