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

div.scrollable { /* required settings */ position:relative; overflow:hidden; width: 560px; background: #fff url(/a/img/global/stageNavBg.gisf) repeat-x; height: 26px;  }

/* 
	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; /* custom decoration */ text-align:center; margin-right: 20px; }

div.scrollable div.items div a { color: #4a4a4a; font-weight: bold; font-size: 1em; padding: 5px 9px; display: block; }
div.scrollable div.items div a:hover { background-color:#fff; padding: 5px 8px; color: #000; border-left: 1px solid #bfc8d6; border-right: 1px solid #bfc8d6; }

/* active item */
div.scrollable div.items div.active { }
div.scrollable div.items div.active a { outline: none; color: #000; padding: 5px 8px; border-left: 1px solid #bfc8d6; border-right: 1px solid #bfc8d6;  background: url(/a/img/common/filteringCutout.png) no-repeat 50% -8px;	}