@charset "utf-8";
/* FAST FACTS CSS Document */

.bestOfWidget{
	
/* custom settings for this usage */
	padding: 10px 0 0 0px;
	width:650px;    /* 620 width of iconViewPort plus width of controls */
	height: 580px;  

/* all the below style if for a STAND ALONE FFACTS WIDGET. When embedded in a tabbox this is all commented out
	since the tabbox supplies location in flow/hidden layers and borders */
/*	
	position:absolute;
	top: 135px;
	left: 20px;
	padding: 10px 15px 0px 12px;
	
	width: 685px;
	height: 205px;
	
	background:url(../../ItemPickerHoroScroll/code/images/blackTrans25.png) repeat;

	border-color:#666666;
	border-style:solid;
	border-width:2px;
	-moz-border-radius: 	20px;
	-webkit-border-radius: 	20px;
	-khtml-border-radius: 	20px;
	border-radius: 		20px;
	overflow:hidden;
*/		
}


.bestOfIconView {
width:590px;  /*590 "icon viewPort" - 5x the full width of bestOfIconView-ul-li below. (content+pad+border+margin) presently 118. so 5x118=590px + width of controls.  */
height: 80px;  /* was 90 */
overflow: hidden;
float:left;

/* border: solid #eeeeee 2px; */
}

.bestOfIconView ul {
width:3000px;  		/* 15x118=1770px  if more, widen out numIcons*iconWidth */
height: 80px;  /* was 90 -same as above */
overflow:hidden;  	/* cut off any extra- to NOT create scroll inside a scroll.  extra width shouldl be adjust with the width param above*/
margin:0; 	-
}

.bestOfIconView ul li {
border: solid 2px #444444;
width: 100px;  /*  note flickr thumbnails are 100x84 - for full width add width+padding+borders+margin left and right sides = 122px */
height:70px;  
overflow:hidden;  	/* cut off any extra- to NOT create scroll inside a scroll.  */

margin: 0 7px 0 7px;
padding:0;
display:block;
float:left;
}

.bestOfIconView ul li:hover {
border: solid 2px #FFCC33;
}

.bestOfIconView ul li a {
/* might want to put bg images here instead of LI to ensure clicks work */
}

.bestOfIconView ul li img{
width:110%;  /* I purposely over size this so its cropped by the outlines of the thumbnail div  and assume height will exceed too and be cropped */
border:none;
}

.bestOfIconView ul li.IconEdgeRight,.bestOfIconView ul li.IconEdgeLeft {
background:url(../../ItemPickerHoroScroll/code/images/goldRectDull10x10.jpg) center center no-repeat;
}

.bestOfIconView ul li.DisabledLeft {
background:url(../../ItemPickerHoroScroll/code/images/ffLeftBtnDisabled.png) center center no-repeat;
}


.bestOfContentWrapper {
width: 100%; 
height: 500px; /* of whats left in BestOf after controls  */
margin: 0px 0 0 0;
clear:left;    /* clears the left float on thumbnails */
padding: 0px 0 0 0;	
overflow:auto;  /* scroll entire element if overflows size allotted for text and image */
/*border:solid blue 1px;*/
}

.bestOfContentWrapper dl {
margin-top: 15px;
padding: 0px 0 0 0;
text-align:left; /* since this is a text element, use this to center imgs horo */
position:relative;  /* postion children rel to this container */
}

.bestOfContentWrapper dl dt {
font-family: arial, verdana, helvetica, sans_serif;
font-weight:600;  /* !!!arial black is what I want but cant get it to work atm- so this! */
font-size: 110%;
text-transform:capitalize;
line-height:100%; /* ??? not working -- this sets LH of the adjacent dd too since I'm doing inline */
text-align:left;
color:#758093; /* brighter alts #5A565F #555256 #758093 #505B70 */
margin: 0 0 0px 0;
padding:0;
display:inline; /* run term and desc up together - must add this to dd too */
}

.bestOfContentWrapper dl dd {
display:inline; /* run term and desc up together - must add this to dt too */

color:#cccccc;
font-size: 12px;
line-height:130%; /* this sets LH of the adjacent dd too since I'm doing inline */
text-align:left; 
text-indent:0px;

width:580px;  /* room for padding  */
padding: 2px 15px 2px 10px; 

/* relative to DL container
position:absolute;   
top: 45px;
left: 0px;
 */
background: url(images/blackTrans50.png) repeat;
}

.bestOfContentWrapper dl dd a {
color:#0099FF;
text-decoration:underline;
padding: 0 18px 0 0; /* padd for bg image */
background: url(../../ItemPickerHoroScroll/code/images/rightArrowGoldTrans50per.png) right  center no-repeat;
}

.bestOfContentWrapper dl dd a:hover {
background: url(../../ItemPickerHoroScroll/code/images/rightArrowGold.png) right center no-repeat;
}


.bestOfContentWrapper dl .bestOfImageMask {
margin: auto;
width:550px; 
/*overflow:auto;*/
position:relative; /* to allow children abs positioning */
}

.bestOfContentWrapper dl .bestOfImageMask .bestOfLoader {
display:none;
width:100%;
height:100%;
position:absolute;
z-index:101;
opacity:.7;
background: url(../../widgetImageCache/loadingAnims/131-50x50LiteGrey.GIF) no-repeat 50% 50%;
/*overflow:auto;*/
}

.bestOfContentWrapper dl img {
/* display:none; */
border:solid #666666 2px;
margin-top: 10px;
width:98%; /* note mask constrains and crops. 2% room for border - browser scales height to aspect ration of image. */
}

.bestOfContentWrapper dl iframe {  /* for embeds */
margin-top: 15px;
}



.bestOfControls {
	background:none;
	float:left;
	margin-top: 18px;
	
/*	position:absolute;
	z-index:100003;
	top:355px;
	left:550px;   same as scBed *//* debug to see edges of divs:
	  
*/

/* border: solid 1px #eeeeee; */
}

.bestOfControls ul {
	display: block;
}
.bestOfControls ul li{
	list-style-type:none;
}
.bestOfControls ul li a{
	display: block;
	width: 30px;
	height:30px;
}

.bestOfControls ul li a.bestOfLeftScroll {
	background:url(../../ItemPickerHoroScroll/code/images/ffLeftBtn2State.png) top left no-repeat;
	color:#990000;
}
.bestOfControls ul li a.bestOfLeftScroll:hover {
	background:url(../../ItemPickerHoroScroll/code/images/ffLeftBtn2State.png) top right no-repeat;
	color:#CC9900;

}
.bestOfControls ul li a.bestOfLeftScroll.disabled {
	background:url(../../ItemPickerHoroScroll/code/images/ffLeftBtnDisabled.png) top left no-repeat;
}


.bestOfControls ul li a.bestOfRightScroll {
	background:url(../../ItemPickerHoroScroll/code/images/ffRightBtn2State.png) top left no-repeat;
	color:#990000;
}
.bestOfControls ul li a.bestOfRightScroll:hover {
	background:url(../../ItemPickerHoroScroll/code/images/ffRightBtn2State.png) top right no-repeat;
	color:#CC9900;
}
.bestOfControls ul li a.bestOfRightScroll.disabled {
	background:url(../../ItemPickerHoroScroll/code/images/ffRightBtnDisabled.png) top left no-repeat;
}

.bestOfControls ul li a.bestOfMenu {
	background:url(../../ItemPickerHoroScroll/code/images/ffMenuBtn2State.png) top left no-repeat;
	color:#990000;
}
.bestOfControls ul li a.bestOfMenu:hover {
	background:url(../../ItemPickerHoroScroll/code/images/ffMenuBtn2State.png) top right no-repeat;
	color:#CC9900;
}