/************************************************/
      /* 
		root element for the scrollable. 
		when scrolling occurs this element stays still. 
	*/
			div.scrollable {
				
				/* required settings */
				position:relative;
				overflow:hidden;	 	
				width: 785px;	
				height:115px;	
				float: left;
				/* custom decorations */

			}
			
			/* 
				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.
			*/
			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 {
				float:left;
				margin-right: 10px;
			}
			
			div.scrollable div.items div a {
			  color: #68a81e;
		    text-decoration: none;
		    text-align: center;
			}
			
			div.scrollable div.items div a span {
			  display: block;
			}
			
			div.scrollable div.items div a img {
			  border: 0px;
			  height: 96px;
			  width: 96px;
			  padding-left: 28px;
			  background-image: url('/images/divider.png');
			  background-repeat: no-repeat;
			}
			
			div.scrollable div.items div:first-child a img {
			  background-image: none;
			  padding-left: 0px;
			}
			
			a.prevPage, a.nextPage {
			  height: 115px;
			  display: block;
			  width: 30px;
			  float: left;
			  cursor: pointer;
			  background-repeat: no-repeat;
			  background-position: top;
			}
			a.prevPage {
			  background-image: url('/images/arrow_left.gif');
			}
			a.nextPage {
			  background-image: url('/images/arrow_right.gif');
			}
			a.prevPage:hover, a.nextPage:hover {
			  background-position: bottom;
			}
			
			a.disabled {
			  visibility: hidden;
			}