/*
			root element for the scrollable.
			when scrolling occurs this element stays still.
		*/
		

		.scrollable-wrapper
		{
			clear: both;
			margin: 0 auto;
			position: relative;
			width: 830px;
			left: -15px;
			height: 100px;
		}
		
		.library-scroller {	
			background: #666;
			width: 778px;
			height:99px;
			/* required settings */
			position:relative;
			overflow:hidden;
		}

		/* items */				
		.library-scroller .items a
		{
			height: 95px;
			width: 95px;
			display: block;
			background: #111;
			margin: 2px 0 2px 2px;
			float: left;
			position: relative;
		}
				
		/* this makes it possible to add next button beside scrollable */
		.scrollable {
			float:left;	
		}

		
		/*
			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;
		}
		
		/* single scrollable item */
		.scrollable a {
			cursor:pointer;
			position:relative;
		}
		
		/* active item */
		.scrollable .active {
			z-index:9999;
		}
		
	/* buttons */
		
		/* prev, next, prevPage and nextPage buttons */
		a.browse {
			background:url(images/scroller-buttons-purple.png); 
			background-repeat: no-repeat;
			display:block;
			width:10px;
			height:40px;
			float:left;
			margin:25px 5px;
			cursor:pointer;
			font-size:1px;
		}
		
		/* right */
		a.right 				{ 
			background-position: -20px 0px; 
			clear:right; 
			margin-right: 0px;
		}
		a.right:hover 		{ background-position:-20px -50px; }
		a.right:active 	{ background-position:-20px -100px; } 
		
		
		/* left */
		a.left				{ 
			margin-left: 0px; 
		} 
		a.left:hover  		{ background-position:0px -50px; }
		a.left:active  	{ background-position:0px -100px; }
		
		/* up and down */
		a.up, a.down		{ 
			background:url(images/vert_large.png) no-repeat; 
			float: none;
			margin: 10px 50px;
		}
		
		/* up */
		a.up:hover  		{ background-position:-30px 0; }
		a.up:active  		{ background-position:-60px 0; }
		
		/* down */
		a.down 				{ background-position: 0 -30px; }
		a.down:hover  		{ background-position:-30px -30px; }
		a.down:active  	{ background-position:-60px -30px; } 
		
		
		/* disabled navigational button */
		a.disabled {
			/*visibility:hidden !important;*/		
		}