/*
SHOW HIDE  NAVIGATION BUTTONS
*/

.disabled {
	visibility:hidden;	
}

/*
VERTICAL SLIDER
*/


/* root element for scrollable */
.vertical {  
	/* required settings */
	position:relative;
	overflow:hidden;
	height: 320px;	 
	width: 295px;
}

/* root element for vertical scrollable items */
.vertical .items {	
	position:absolute;
	/* this time we have very large space for height */	
	height:20000em;	
	margin: 0px;
	padding: 0px 0 10px 0;	 
	width: 295px;
}

.vertical .items a, .vertical .items a:hover, .vertical .items a:active, .vertical .items a:visited {
	text-decoration:none;
	color: #2d0d00;
}

/* single scrollable item */
.vertical .items div {
	margin: 4px 0px 9px;
	padding: 8px 10px 9px 10px;
	text-decoration: none;
	display: block;
	font-size:13px;
	height:80px;
	background-color: #c69a68;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
}


.vertical .items div:hover {
	background-color: #EEE2C3;
}

/* elements inside single item */
.vertical .items img {
	float:left;
	padding:0;
	margin:0px 5px 0 -1px;
	border:1px solid #333;
	height:65px;
}

.vertical .items h3 {
	font-size: 16px;
	line-height:16px;
	letter-spacing:1px;
	font-weight: bold;
	color: #2d0d00;
	display: block;
	margin:0 0 3px 0;
	padding:0;
}
.vertical .items div.current h3 {
	color:#2d0d00;
}
.vertical .items div.current {
	color: #000;
	background-color: #EEE2C3;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
}
.vertical .items div.current a {
	color: #2d0d00;
}

/* next/prev buttons */
div.vertnavi{
	position:relative;
	width:297px;
	height:18px;
	margin:0 0 0 -1px;
	cursor:hand;
}

div.vertnavi.prevPage  { 
	background-image:url(images/vertical-slider-up-active.png);
	margin-bottom:4px; 
	cursor:hand;
}
div.vertnavi.prevPage:hover { 
	cursor:hand;
	background-image:url(images/vertical-slider-up-hover.png);
}
div.vertnavi.nextPage {
	background-image:url(images/vertical-slider-down-active.png);
	clear:both;
	margin-top:2px
	cursor:hand;
}
div.vertnavi.nextPage:hover {
	cursor:hand;
	background-image:url(images/vertical-slider-down-hover.png);
}
div.vertnavi.disabled, div.vertnavi.disabled:hover {
	visibility:visible;
	background-image:url(images/vertical-slider-inactive.png);
} 



/*
HORIZONTAL SLIDER
*/

.horizontal {  
	/* required settings */
	position:relative;
	overflow:hidden;		
	height: 130px;	 
	width: 900px;
}

/* root element for vertical scrollable items */
.horizontal .items {	
	position:absolute;
	
	/* this time we have very large space for height */	
	width:20000em;	
	margin: 0px;
}

.horizontal .items a, .horizontal .items a:hover, .horizontal .items a:active, .horizontal .items a:visited {
	color:#666;
	text-decoration:none;
}

/* single scrollable item */
.horizontal .items div {
	width: 285px;
	height: 120px;
	margin: 0px 12px 10px 0;
	float:left;
	background:#161613;
	overflow: hidden;
	position: relative;
}

.horizontal .items div img {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	width:285px;
	height:120px;
}

.horizontal .items div:hover {
	background-color: #222;
}
.horizontal .items div:hover {
	color: #fff;
}

.horizontal .items div.boxgrid{
	border:3px solid #63583e;	
}
.horizontal .items div.boxgrid.current  {
	border:3px solid #EEE2C3;
}


div.horiznavi{
	position:relative;
	background-image:url(images/hori_large.png);
	width:30px;
	height:30px;
	margin:48px 0;
	float:left;
	cursor:hand;
}

div.horiznavi.prevPage 	{ margin-right:5px; }
div.horiznavi:hover  		{ background-position: -30px 0; }
div.horiznavi:active  	{ background-position: -60px 0; }
div.horiznavi.nextPage 		{ background-position: 0 -30px; float:right; }
div.horiznavi.nextPage:hover 	{ background-position: -30px -30px;}
div.horiznavi.nextPage:active 	{ background-position: -60px -30px;} 



.boxgrid a .cover , .boxgrid a:visited .cover , .boxgrid a:hover .cover  {
	color:#ccc;
	text-decoration:none;
	letter-spacing:1px;
	width: 275px;
}

.cover {
	float: left;
	position: absolute;
	background: #000;
	height: 120px;
	opacity: .8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
line-height:13px;
 	top: 93px;
 	left: 0;
	padding:5px 2px 0 8px;
}

.boxgrid h3 {
	margin:2px 0 5px 0;
	padding-right:14px;
	color:#fff;
	opacity: none;
	width:270px;
line-height:16px;
}



/*
OVERAY with SCROLLABLE 
*/

/* define background image for the expose mask */
#mask {
	background:#123 url(images/mask_gradient_1800.png) no-repeat;
	background-position:50% -200px;
}

/* settings for image overlay scrollable */
#images .items {	
	width:20000em;	
	position:absolute;
	clear:both;
}

/* box styling */
#box {
	background-image:url(images/black-overlay-bg.png);
	width:860px;
	height:640px;
	position:absolute;
	display:none;
}

/* 
	image is contained on the overlay background image. 
	the closing button is thus just a transparent container. 
*/
#box .close {
	position:absolute;
	left:8px;
	top:8px;
	cursor:hand;
	height:35px;
	width:35px;
	text-decoration:none;
}

/* overlay scrollable */
#images {	
	position:absolute;
	overflow:hidden;
	margin:40px;
	width:780px;
	height:578px;	

}

/* single image */
#images div.items div {
	float:left;
	width:780px;
	height:520px;
	margin-right:30px;
}

/* the caption */
#images div.items div .photocaption {
	text-align:center;
	background:#222;
	color:#fff;
	font-weight:bold;
	font-size:13px;
	line-height:16px;
	padding:10px 45px 0 45px;
	height:45px;
	width:690px;
	margin:0 auto;
	
	opacity: .8;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}


/* next/prev buttons */
#box div.navi {
	background-image:url(images/hori_large.png);
	width:30px;
	height:30px;
	float:left;
	margin-top:55px;
	position:absolute;
	bottom:33px;
	left:50px;
}

#box div.navi:hover  		{ background-position:-30px 0; }
#box div.navi:active  		{ background-position:-60px 0; }
#box div.nextPage 		{ background-position: 0 -30px; clear:right; left:780px; }
#box div.nextPage:hover 	{ background-position:-30px -30px; }
#box div.nextPage:active 	{ background-position:-60px -30px; }