/*
	scrollwrapper contains the scroll box, items AND buttons (found on left and right)
*/
#scrollwrapper {
	margin-top:10px;
	margin-bottom:10px;
	text-align: center;
	border-top: thin solid gray;
	border-bottom: thin solid gray;
	background:url(../images/scrollable/h300.png) repeat-x;
}



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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 820px;
	height:150px;

	/* custom decorations */
	
	/* UNcomment this to create a border */
	/*border:1px solid #ccc;*/
	
	/*UNcomment below for a background image */
	/*background:url(../images/scrollable/h300.png) repeat-x;*/
}


/*
	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;

}


#scrollitem {
	text-align: center;
	float: left;
	/* 	width: 120px;
	height: 66px;
	background-color: #fff;
	*/
	cursor: pointer;
	width: 150px;
	height: 150px;
	margin: 10px 6px 5px 6px;
}

#scrollitem img {
	padding: 1px;
	width:100px;
	height:100px;
	border:1px solid #ccc;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}

.scrollitemtext {
	text-align: center;
	text-transform: lowercase;
	font-family: century gothic, helvetica, arial, Verdana, sans-serif;
	font-size: 12px;
	color: black;
}