/*
---------------
SCROLLABLE 
---------------
*/


/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable-wrapper {
	width: 855px;
	height:357px;
	background: url(images/bg-scrollable.gif) repeat-x #000;
	position: relative;
}

.scrollable-wrapper .title {
    position: absolute;
    bottom: 25px;
    left: 25px;
}

.scrollable {

	/* required settings */
	position:relative;
	overflow:hidden;
    margin-top: 30px;
	width: 755px;
	height: 249px;
		border: 1px solid #394046;
	/* custom decorations */
}

/*
	root element for scrollable items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.items div {
	float:left;
	width:753px;
	height: 247px;

	margin: 0 auto;
	text-align: center;
}

/* single scrollable item */
.scrollable img {
	float:left;
	margin:20px 0px 20px 32px;
	height:204px;
	width: 146px;
	cursor:pointer;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	

	
}

/* active item */
.scrollable .active {
	border:2px solid #000;
	position:relative;
	cursor:default;
}

.scrollable-wrapper .navigation-button.prev {
    float: left;
}

.scrollable-wrapper .navigation-button.next {
    float: right;
}


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

/* prev, next, prevPage and nextPage buttons */
.scrollable-wrapper a.browse {
	background:url(images/hori_large.png) no-repeat;
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:130px 9px;
	cursor:pointer;
	font-size:1px;
}

/* right */
.scrollable-wrapper a.right 				{ background-position: 0 -30px; clear:right; margin-right: 10px;}
.scrollable-wrapper a.right:hover 		{ background-position:-30px -30px; }
.scrollable-wrapper a.right:active 	{ background-position:-60px -30px; } 


/* left */
.scrollable-wrapper a.left				{ margin-left: 10px; } 
.scrollable-wrapper a.left:hover  		{ background-position:-30px 0; }
.scrollable-wrapper a.left:active  	{ background-position:-60px 0; }

/* up and down */
.scrollable a.up, a.down		{ 
	background:url(../img/scrollable/arrow/vert_large.png) no-repeat; 
	float: none;
	margin: 10px 50px;
}

/* up */
.scrollable a.up:hover  		{ background-position:-30px 0; }
.scrollable a.up:active  		{ background-position:-60px 0; }

/* down */
.scrollable a.down 				{ background-position: 0 -30px; }
.scrollable a.down:hover  		{ background-position:-30px -30px; }
.scrollable a.down:active  	{ background-position:-60px -30px; } 


/* disabled navigational button */
.scrollable-wrapper a.disabled {
	visibility:hidden !important;		
} 	


/*
---------------
OVERLAY 
---------------
*/

/* the overlayed element */
.simple_overlay {
	
	/* must be initially hidden */
	display:none;
	
	/* place overlay on top of other elements */
	z-index:10000;
	
	/* styling */
    background: url(images/bg-overlay.gif) repeat-x #000;
	
	width:675px;	
	min-height:200px;
	border:1px solid #666;
	padding: 20px;
	
	/* CSS3 styling for latest browsers */
	-moz-box-shadow:0 0 90px 5px #000;
	-webkit-box-shadow: 0 0 90px #000;	
}

/* close button positioned on upper right corner */
.simple_overlay .close {
	background-image:url(images/close.png);
	position:absolute;
	right:-14px;
	top:-14px;
	cursor:pointer;
	height:28px;
	width:28px;
}

/* styling for elements inside overlay */
.simple_overlay .overlay-image {
    float: left;
    padding: 0 20px 0 0;
}

.simple_overlay .details {
    display: inline;
		font-size:11px;
		color:#fff;
		width:350px;
		height: 350px;
		padding: 0 20px 0 0;
	}
	
.simple_overlay	.details h3 {
		font-size:15px;
		margin:0;
		padding: 5px 0;
		color: #fff;
	}
	
.simple_overlay	.details h4 {
	    padding-top: 0;
	    margin-top: 0;
	    color: #E08713;
	    
	}
	
.simple_overlay    .details h5 {
        color: #E08713;
        margin: 0;
        padding: 0 0 5px;
        font-size: 11px;
    }

.simple_overlay	.details a {
        color: #aaa;
        font-style: italic;
	}
	
.simple_overlay	.details .scroll-pane {
	    padding-top: 10px;
/*	    width: 340px;*/
	    height: 260px;
	    overflow: auto;
	}
	    
.simple_overlay	.details .scroll-pane p {
	    font-size: 10px;
	    padding-right: 10px;
	    color: #fff;
	}
}