html{color:#000;background:#E6EAEF;}
body {font:13px/1.231 arial,helvetica,clean,sans-serif;*font-size:small;*font:x-small;margin:0;padding:0;text-align:left;position:relative;overflow: hidden;}
img{border:0;}
/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 

div#container { margin: 0; padding: 0px 0px 9px 0px; width: 450px; background:#E6EAEF url(/images/syndication/synd_bg.png) repeat-x; }

div#masthead_embed { margin: 0px 0px 0px 6px; padding: 0; width: 408px; height: 50px; background: url(/images/syndication/masthead_embed.png) no-repeat; }

#logo { float: left; width: 177px; height: 18px; margin: 13px 0px 0px 18px; padding:0; border: none; }

.bigFFImg { height: 300px; margin: 4px 0px 0px 10px;}

div.scrollable-box { 
	/* required settings */ 
	text-align:left;
    position:relative; 
    overflow:hidden;
	margin:6px 0px 0px 10px; 
    width:400px; 
	height: 74px;
	background: url(/images/syndication/scrollable-box_synd.png) no-repeat;
}

div.scrollable { 
	/* required settings */ 
    position:relative; 
    overflow:hidden;
	margin:6px 0px 0px 7px;
	padding:0; 
    width:325px; 
	height: 62px;
	float:left;
}

a img:hover { 
	filter:alpha(Opacity=65);
	opacity:0.65; -moz-opacity:0.65;
	-khtml-opacity:0.65;
}

/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {
	display:block;
	width:32px;
	height:65px;
	background:url(/images/synd_left.png) no-repeat;
	float:left;
	cursor:pointer;
	font-size:1px;
	margin:5px 1px 0px 1px;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
	background-position:0px -67px;		
}

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

/* next button uses another background image */
a.next, a.nextPage {
	background-image:url(/images/synd_right.png);
	clear:right;	
}

/* 
    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 */ 
	overflow:hidden;
    position:absolute; 
} 
 
/* 
    a single item. must be floated on horizontal scrolling 
    typically this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { float:left; margin-left:5px; } 
div.scrollable div.items div img { border:0px; width:74px; height:62px; cursor:pointer; }

 
/* you may want to setup some decorations to active item */ 
div.items div.active { 
	filter:alpha(Opacity=50);
	opacity:0.5; -moz-opacity:0.5;
	-khtml-opacity:0.5;
}
	/* you may want to setup some decorations to active item */ 
div.items div.hover { 
	filter:alpha(Opacity=50);
	opacity:0.5; -moz-opacity:0.5;
	-khtml-opacity:0.5;
}

div#footer { clear:both; width:400px; margin: 9px 0px 0px 10px; padding: 0; font-size: 11px; color:#000000;}
div#footer a { color: #0369B3; text-decoration:none; color:#0369B3; }
div#footer a:hover { color: #0369B3; text-decoration:underline; }

/* Tooltip */

#tooltip { float:left; display: none; position: absolute; width:400px; text-align:left;}
#tooltip div.tooltip-tail { display: block; position: relative; top: 1px; left: 10px; width: 14px; height: 8px; background: url(/images/tooltip_tail.png) top left no-repeat; overflow: hidden; }

#tooltip div.tooltip-content { float: left; overflow: hidden; margin:0; padding:0; height:41px; font-size: 12px; background:url(/images/tooltip.png) no-repeat; color: #FFF; }
#tooltip div.tooltip-end { float:left; overflow: hidden; margin:0; padding:0; width: 14px; height: 41px; background:url(/images/tooltip_end.png) no-repeat; }

#tooltip.thumb div.tooltip-content { float:left; overflow: hidden; padding: 2px; }

#tooltip strong, #tooltip span, #tooltip em { display: block; clear: left; line-height: 1em; }
#tooltip strong { padding: 12px 0px 0px 9px; font-weight: 600; color:#FFF; }
#tooltip span { margin-top: 3px; }
#tooltip em { margin-top: 10px; }
#tooltip.square { width: 250px; min-height: 30px; }