/* 
	root element for the scrollable. 
	when scrolling occurs this element stays still. 
*/
div.scrollable {
	position:relative;
	overflow:hidden;	 	
	width: 610px;
	height:64px;
	margin:0px 18px 0px 22px;
	float:left;
	display:inline;
}

/* 
	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 {	
	width:20000em;	
	position:absolute;
	clear:both;
}

/* single scrollable item */
div.scrollable div.items div {
	float:left;
	text-align:center;
	width:61px;
	height:64px;
	_margin-top:1px;
}

div.scrollable div.items .sigla
{
	height:17px;
	text-align:center;
	color:#02488d;
	font-family:Arial;
	font-weight:bold;
	font-size:13px;
	margin-top:5px;
	_position:relative;
}
div.scrollable div.items .sigla a 
{
	color:#02488d;
}

div.scrollable div.items .icone_bandeira
{
	text-align:center;
	margin:2px 0px 0px 0px;
	_position:relative;
	height:34px;
	padding:0px;
	line-height:34px;
}

/* active item */
div.scrollable div.items div.active {
	background:url(../../../images/historia/selected.png) no-repeat left bottom;
	width:61px;
	height:60px;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/historia/selected.png', sizingMethod='image');
	_margin-top:1px;
}

div.scrollable div.items div.hover 
{
	background:url(../../../images/historia/selected.png) no-repeat left bottom;
	width:61px;
	height:60px;
	_background-image:none;
	_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../images/historia/selected.png', sizingMethod='image');
	_margin-top:1px;
}


/* ===========================================================================================*/



/* prev, next, prevPage and nextPage buttons */
a.prev {
	float:left;
	width:8px;
	height:31px;
	background:url(../../../images/historia/nav_left.gif) no-repeat;
	cursor:pointer;
	position:absolute;
	left:10px;
	margin-top:16px;
}

/* disabled navigational button */
a.disabled {
	visibility:hidden !important;		
}

/* next button uses another background image */
a.next {
	width:8px;
	height:31px;
	background:url(../../../images/historia/nav_right.gif) no-repeat;
	float:right;
	position:absolute;
	cursor:pointer;
	right:10px;
	margin-top:16px;
}