/* define background image for the expose mask */
#mask {

	background-position: 0 -200px;
	background: #000; 
	
}

/* general settings for both scrollables */
div.items {	
	width:20000em;	
	position:absolute;
	clear:both;
}

div.navi.disabled {
	visibility:hidden;		
}


/* the thumbnail scrollable */
.scroll {
	background: url(../scroll-img/scrollbg.png) 0 0px;
	width: 624px; 
	display: block;
	margin: auto;
	height: 150px;
	margin-top: 10px;
	visibility: hidden;
		}

.scroll h2 {color: #666; font-size: 1.05em; font-weight: bold; padding: 10px 0 0 22px; margin: 0;}
.scroll .navi {position: absolute; margin-top: 0; display: block; width: 10px; height: 12px; margin-top: -15px; padding: 3px; cursor: pointer; z-index:5;}
.scroll .prevPage {margin-left: 560px; background: url(../scroll-img/arrows.png) 0 0 no-repeat;}
.scroll .prevPage:hover {margin-left:560px; background: url(../scroll-img/arrows.png) 0 -18px no-repeat;}
.scroll .nextPage {margin-left: 572px; background: url(../scroll-img/arrows.png) 100% 0 no-repeat;}
.scroll .nextPage:hover{margin-left:572px; background: url(../scroll-img/arrows.png) 100% -18px no-repeat;}


#thumbnails {
	margin: 0px 0 0 15px;
	overflow:hidden;
	position:relative;
	width:580px;
	height:110px;
	float: left;
}




#thumbnails div.items div {
	padding:5px;
	float:left;		
}


#thumbnails img {
	position:relative;
	overflow:hidden;	 	
	float:left;	
	margin:3px;
	border:5px solid #fff;
	outline:1px solid #999;
	-moz-outline-radius:4px;
	cursor: pointer;
}


/*===For 5 images together, no scroll==*/

.scroll {
	background: url(../scroll-img/scrollbg5img.png) 0 0px no-repeat;
	width: 650px; 
	display: block;
	margin: auto;
	height: 150px;
	margin-top: 10px;
	visibility: hidden;
		}


#thumbnails {
	margin: 8px 0 0 15px;
	overflow:hidden;
	position:relative;
	width:630px;
	height:110px;
	float: left;
	
}




#thumbnails img {
	margin: 0px;
	width: 105px;
	height: 70px;


}


/*--end-5img no scroll--*/



/* box styling */
#box {
	background: url(../scroll-img/box.png) no-repeat;
	width:825px;
	height:570px;
	position:absolute;
	margin-left: 0; margin-top: 0;
	display:none;
	margin-bottom: -20px;
	z-index: 12000;
	

}

/* 
	image is contained on the overlay background image. 
	the closing button is thus just a transparent container. 
*/
#box div.close {
	background:none;
	left:4px;
	top: 4px;
	cursor:pointer;
	height:35px;
	width:35px;
	position:absolute;
	z-index: 10;
	background: url(../scroll-img/transparent.png);
	
	}



/* overlay scrollable */
#images {/*surrounding*/
	position:absolute;
	overflow:hidden;
	width: 765px;
	margin: 30px;
	height: 510px;	
}

/* single image surrounding*/
#images div.items div {
	float:left;
	width:765px;
	height:510px;
	
}

#images div.items div img {width: 765px;}

/* the tooltip */
#images div.items div.info {
	float:none;
	background:#fff;
	color:#555;
	font-size:13px;
	height: 130px;
	display:none;
	width:765px;
	padding: 0 0 0 100px;
	margin-left: 50px;
	display: none;
}

#images div.items div.info h3 {
	color:#333;
	margin-top:10px;
	margin-bottom: 0; padding: 0;
}
	

/* override button style on the overlay */
#box div.navi {
	position: absolute;
	height: 25px;
	width: 15px;
	}

#box div.nextPage {
	background: url(../scroll-img/box_arrows.png) no-repeat 100% 0;
	margin: 35px 0 0 765px;
}

#box div.prevPage {
		background: url(../scroll-img/box_arrows.png) no-repeat 0 0;
		margin: 35px 0 0 745px;}
	
a #player {visibility: none}