/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div#carousel {
	width:				586px;
	height:				170px;
	display:			inline;
	float:				left;
	margin:				0px 0px 0px 0px;
}

div.scrollable {
	
	/* required settings */
	position:			relative;
	overflow:			hidden;	 	
	width:				520px;	
	height:				170px;/*	*/
	z-index:1;
	/* custom decorations */
	padding:			0;	
}

/* 
	root element for scrollable items. Must be absolutely positioned
	and it should have a super large width to accomodate scrollable items.
	it's enough that you set width and height for the root element and
	not for this element.
*/

img.carousel_img {
	margin:				0px;
}
div.scrollable div.items {	
	/* this cannot be too large */
	width:				20000em;	
	position:			absolute;
	clear:				both;		
	/* decoration */
	margin-left:		10px;
}

/* single scrollable item */
div.scrollable div.items div {
	display:			inline;
	float:				left;
	
	/* custom decoration */
	text-align:			left;
	width:				150px;
	height:				100px;
	margin-right: 		20px;
}

div.text_container,
div.image_container {
	float:				left;
	display:			inline;
	width:				150px;
	height:				70px;
	text-align:			left;
}

div.image_container {
	border:				1px solid #999999;
}

/* active item */
div.scrollable div.items div.active {
	background-color:	#fff;
}

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

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:			block-inline;
	width:				30px;
	height:				30px;
	background:			url('/images/site/arrow_left.png') no-repeat;
	float:				left;
	margin: 			45px 0px;
	cursor:				pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
}

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

/* next button uses another background image */
a.next, a.nextPage {
	background-image:	url('/images/site/arrow_right.png');
	float:				left;
}