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

	/* required settings */
	position:relative;
	overflow:hidden;
	/*width: 660px;*/
 /* width: 548px;*/
  width:438px;
	height:37px;
	background: url(../../images/navigation/nav-item-sep.gif) no-repeat 0 13px;
}

/*
	root element for scrollable menu_items. Must be absolutely positioned
	and it should have a extremely large width to accomodate scrollable menu_items.
	it's enough that you set the width and height for the root element and
	not for this element.
*/
.scrollable .menu_items {
	/* this cannot be too large */
	width:20000em;
	position:absolute;
	clear:both;
}

.menu_items div {
	float:left;
	width:112px;
	overflow: hidden;
	position: relative;
	margin-left: -2px;
}

.menu_items div.last {
	width: 673px;
}

.scrollable a {
  display: block;
	padding: 9px 0;
	outline: none;
	text-align: center;
	width: 110px; 
	font: bold 15px "Trebuchet MS";
	color: #ffffff;
	text-decoration: none; 
	background: url(../../images/navigation/nav-item-sep.gif) no-repeat 100% 13px;
	float: left;
}
.scrollable .menu_items div a:hover,
.scrollable .menu_items div a.active {
	background: #7b7373;
	color: #ffcc00;
}


.scrollable .menu_items div.last a {
  position: relative;
  margin-left: -2px;
}