/* SCROLLABLE */

	/* root element for the whole scrollable setup */
	div.scrollable {  
		background-color:#33031d;
		position:relative;
		overflow:hidden;
		width:563px;
		height:128px;
		float:left;
		-moz-border-radius:10px;
		-webkit-border-radius:10px;
		behavior:url(border-radius.htc);
	}
	
	/* 
		root element for scrollable items. It is 
		absolutely positioned with large width. 
	*/
	#thumbs {	
		position:absolute;
		width:20000em;	
		clear:both;
		margin: 28px 8px 8px 8px;
		/* border:1px solid #222; */
	}
	
	/* custom positioning for navigational links */
	a.prev, a.next {
		margin-top:118px;	
	}
	
	/* single item */
	#thumbs div {
		float:left;
		width:130px;
		height:120px;
		margin-right:9px;
		/* background:#333 url(/img/global/gradient/h150.png) repeat-x 0 146px;*/
		color:#fff;
		/* border-left:1px solid #333; */
		cursor:pointer;
	}
	
	/* style when mouse is over the item */
	#thumbs div.hover a.itemText {
		background: url(../img/bgItemTextHover.png) top left;
	}
	
	/* style when element is active (clicked) */
	#thumbs div.active a {
		cursor: default;
	}
	
	#thumbs div.active a.itemText {
		background: url(../img/bgItemTextActive.png) top left;
		color: #fff;
	}


/* NAVIGATOR */

	/* position and dimensions of the navigator */
	div.navi {
		margin:7px 0 0 250px;
		position: absolute;
		z-index: 1000;
		width:200px;
		height:20px;
	}
	
	
	/* items inside navigator */
	div.navi a {
		width:8px;
		height:8px;
		float:left;
		margin:3px;
		background:url(../img/scrollableNavigator.gif) 0 0 no-repeat;
		display:block;
		font-size:1px;
	}
	
	/* mouseover state */
	div.navi a:hover {
		background-position:0 -8px;      
	}
	
	/* active state (current page state) */
	div.navi a.active {
		background-position:0 -16px;     
	}