@charset "utf-8";

/*---- tabboxes CSS  ------------------------------------*/

/*************************************************************
 REV2 TABBOX - class based, reusable, 
 position etc defined by container outside widget
 *************************************************************/
 
 /* ssdTabLineOnly ON WHITE  -- NOTE: .ssdOnWhite is a set of color overrides on the orig .ssdTabLineOnly just below which by default is OnBlack */

.ssdTabLineOnly.ssdOnWhite { 
}

.ssdTabLineOnly.ssdOnWhite .tabContentWrapper {  
}

/* tab content boxes */
.ssdTabLineOnly.ssdOnWhite .tabContent1, .ssdTabLineOnly.ssdOnWhite .tabContent2, .ssdTabLineOnly.ssdOnWhite .tabContent3, .ssdTabLineOnly.ssdOnWhite .tabContent4, .ssdTabLineOnly.ssdOnWhite .tabContent5, .ssdTabLineOnly.ssdOnWhite .tabContent6, .ssdTabLineOnly.ssdOnWhite .tabContent7, .ssdTabLineOnly.ssdOnWhite .tabContent8, .ssdTabLineOnly.ssdOnWhite .tabContent9 {
 
	color:#222;  /* just off pure black */
}

.ssdTabLineOnly.ssdOnWhite .tabLineWrapper {
}

/* NOTE: the tabline UL has the bottom border, all LIs are tabs and sit ON IT. The selected tab is shifted down the border width to appear to "cut" thru it. Unselected tabs sit ON it. */
.ssdTabLineOnly.ssdOnWhite ul.tabLine { /* overall widget settings */
}

.ssdTabLineOnly.ssdOnWhite  ul.tabLine li { 
}

.ssdTabLineOnly.ssdOnWhite ul.tabLine li a { 
border-top: 	2px solid #999;  /* same as bottom border on overall ul#tabLine */
border-left: 	2px solid #999; 
border-right: 	2px solid #999;
background-color:#eee;
color: #333; 
}

.ssdTabLineOnly.ssdOnWhite ul.tabLine li a:hover {
background-color: #fff; 
color: #000; 
padding-top: 8px; /* bump up tab on hover */
}

.ssdTabLineOnly.ssdOnWhite ul.tabLine li.selected { /* selected tab  */ 
}

.ssdTabLineOnly.ssdOnWhite ul.tabLine li.selected a { /* selected tab a */
background-color: #fff; 
color:#A16912;
font-weight:bold;
}



/* ON BLACK - default -the orig/core tabLineOnly styles and structure */

.ssdTabLineOnly { 

  /* override this class to position, constrain etc */			
	width: 100%; 

}

/* tab content boxes site below the TABLINE UL */
/* TABLINE ONLY - NO BOX, no box on contentWrap its on UL of tabline. note tabContent div is optional depending on whether you are placing hidden tabbed content in the panels or using that tabline as just a nav widget to diff pages (tabs jump to diff html pages ), if latter, no need for tabContentWrapper */
.ssdTabLineOnly .tabContentWrapper {  
/* no BG for tabline  
background:url(images/blackTrans50.png) repeat; 
*/
width:100%;  
overflow: hidden;  /* scroll if needed */
}

.ssdTabLineOnly .tabContent1, .ssdTabLineOnly .tabContent2, .ssdTabLineOnly .tabContent3, .ssdTabLineOnly .tabContent4, .ssdTabLineOnly .tabContent5, .ssdTabLineOnly .tabContent6, .ssdTabLineOnly .tabContent7, .ssdTabLineOnly .tabContent8, .ssdTabLineOnly .tabContent9 {
width:100%;
align: left;
padding: 1% 0 1% 0;  /* 1% 2.5% 2.5% 1% use % for responsive behaior rather than pix pads creating scroll bars at small window sizes */
color:#dddddd;  /* pure white is too brite */
display:none;  /* hide all, onLoad the default tab and div should be made viz */
}

.ssdTabLineOnly .tabLineWrapper {
/* overflow-x: scroll;  /*!!! not currently working!!! 
					idea is:  if widget width < UL.tabline width (unpredictable based on txt size and window/container size) I choose here to scroll tabs rather than have them WRAP which is ugly, this is more orderly and all tabs still usable. Jquery does this too. */
}

.ssdTabLineOnly ul.tabLine { 
border-bottom: #aaaaaa 2px solid;
text-align: left;   /*This is tabs alignment since LIs are inline block*/
text-indent:22px;   /*This controls indent on inline TABS since they are inline boxes */
margin: 10px 0 0 0; /* margins for entire element set here */
list-style-type: none;
padding:0;

/* its key here to control the font size, line-height and overall height of tab UL and LIs so tab  Position Too offsets work */
font-size: 16px;
line-height: 18px;
height: 18px;
}

.ssdTabLineOnly  ul.tabLine li { 
/* its key here to control the font size, line-height and overall height of tab UL and LIs so tab Position Top offsets work */
	font-size: 16px;
	line-height: 18px;
	height: 18px;
	
	display: inline-block;
    position: relative;
    top: -4px;
}

.ssdTabLineOnly ul.tabLine li.selected { /* selected tab  */
position: relative;  /* offset to make bottom line disapper */
top: -2px; 
}

.ssdTabLineOnly ul.tabLine li a { /* overall styles for all tabs */

background-color:transparent;
color: #cccccc; 

border-top: 	2px solid #666666;
border-left: 	2px solid #666666; 
border-right: 	2px solid #666666; 
border-bottom: none; 
border-top-left-radius: 			6px;			/* stds compliant css 3 */
border-top-right-radius: 			6px;
	
text-decoration: none;
margin-right: 4px;    /* tab gutters */
padding: 5px 12px 5px 12px; /* padding for link text*/

/*  line-height control is key to this design, so changing fonts could break the tab "overlaps" on the box outlines and tabline 

font-family: Arial, Helvetica, sans-serif;

*/

}


.ssdTabLineOnly ul.tabLine li a:hover {
background-color: #000000; 
color: #ffffff; 
padding-top: 8px; /* bump up tab on hover */
}


.ssdTabLineOnly ul.tabLine li.selected a { /* selected tab a */
border-top: 	2px solid #aaaaaa;  /* same as bottom border on overall ul#tabLine */
border-left: 	2px solid #aaaaaa; 
border-right: 	2px solid #aaaaaa; 

background-color: #000000; 
color:#FFCC33;

padding-top: 7px; /* can make selected taller than others */
}




/*************************************************************
 FIXED ID DEFINED TABBOXES BELOW - from REV1 ("code" dir) Tabbox 
 *************************************************************/

/* top tab box - ffax and faq ****************************************************/
#tabbedBoxWidget {
position:absolute;
	top: 50px; /* was 40 */
	left: 30px;
	/* NEEDED??? left from FFacts Test:
	padding: 10px 15px 0px 12px;
	*/
	
	/* width height here just defining outline box */
	
	width: 665px;  /* 600 no overlap,  685px was full width to go under SC Expl; */
	height: 313px;
/* HIDDEN??? for tabbox? this is left over from FFacts test  and might need to be on wrapper there only */
	overflow:hidden;
	
	/* border: solid red 2px; */
	z-index:100; /* be sure this is below page mask layer z=150 */
	
}



#tabbedBoxWidget .tabContentWrapper {
background:url(images/blackTrans25.png) repeat; 

width:98%;  /* 596(600-borders)/685px -- and room for borders was 98%*/
height:80%;  /* !!! NOTE HEIGHT is set here!  BUT MUST ACCOUTN FOR HEIGHT OF TABS - hence well less than 100% of container. !!!mod: figure out method to calc size of tab height(tough due to text zoom). to scroll only content not tabs on overflow. SET HEIGHT to that needed by actual usage. NOTE if HEIGHT is left off, the box size and other content below(if widget positioned in FLOW, ie not absolute) FLOWS and ADJUSTS - is DETAIL pages we WANTThis but in HOME PAGE probably want to set a FIXED HEIGHT since all WIDGETS are positions ABSOLUTE */

overflow:auto;  /* auto scrolls as needed, prefer only vert scrolls */
-webkit-overflow-scrolling: touch; /* for safari/webkit browsers on IOS - makes for smooth inertial scroll rather than default (or in some cases none!)  */

border-top: 2px solid #444444;   /* use just THIS BORDER to create a TAB UNDERLINE widget */

/* for FULL bounding box, UNCOMMENT these lines below */
border-bottom: 	2px solid #666666;
border-left: 	2px solid #666666; 
border-right: 	2px solid #666666; 
-webkit-border-radius: 	6px;	/* webkit for old safari/chrome */
-moz-border-radius: 	6px;		/* old gecko engine - ffox etc */
border-radius: 			6px;			/* stds compliant css 3 */
/* NOTE - IE9 supports css3, None of the older IEs support border-radius, not even IE8 - will just have sqr corners there */
	

/* special case sharp top right corner so tabs can be left justified */
-webkit-border-top-right-radius: 	18px;	/* webkit for old safari/chrome */
-moz-border-radius-topright: 		18px;		/* old gecko engine - ffox etc */
border-top-right-radius: 			18px;			/* stds compliant css 3 */


-webkit-border-bottom-left-radius: 	18px;	
-moz-border-radius-bottomleft: 		18px;		
border-bottom-left-radius: 			18px;			
 

}

/* made these CLASSES instead of IDs since I will often have MULTIPLE tab widgets in a single page and need to target/select them based on the ID of the WIDGET name and these children of that so therefore uniquely identifiable.
*/
#tabbedBoxWidget .tabContent1, #tabbedBoxWidget .tabContent2, #tabbedBoxWidget .tabContent3, #tabbedBoxWidget .tabContent4, #tabbedBoxWidget .tabContent5, #tabbedBoxWidget .tabContent6, #tabbedBoxWidget .tabContent7, #tabbedBoxWidget .tabContent8, #tabbedBoxWidget .tabContent9 {
width:95%;
align: left;

/* was 95%  /* need to make room for padding.  with abs measurements it'd be tabContentWrapper:width - (left+right padding below) but I'm ball parking becuase of %s.  if a scroll box occurs on TEXT content that would normally wrap, need to back down percentage here  or go fixed width on wrapper and here.  IE if page width is 800px, 20px padding is 2.5% so 95% leave enough margin to go down to 400px wide window before it needs adjustment as long as padding stays at 10px left/right */

/* no PADDING/MARGINS on core widget, content should pad itself as needed so BG imgs go to edges */
/*padding: 1% 2.5% 2.5% 1%;  /* use % for responsive behaior rather than pix pads creating scroll bars at small window sizes */

color:#dddddd;  /* pure white is too brite */
/* was margin:0 auto; /* center horo */
display:none;  /* hide all, onLoad the default tab and div should be made viz */
}

#tabbedBoxWidget .tabLineWrapper {
/* overflow-x: scroll;  /*!!! not currently working!!! 
					idea is:  if widget width < UL.tabline width (unpredictable based on txt size and window/container size) I choose here to scroll tabs rather than have them WRAP which is ugly, this is more orderly and all tabs still usable. Jquery does this too. */
}

#tabbedBoxWidget ul.tabLine { /* overall widget settings */
text-align: left;   /*This is tabs alignment NOT text */
text-indent:20px;   /* was 25px This controls indent on inline TABS since they are inline boxes */
margin: 8px 0 0 0; /* margins for entire element set here */
padding: 0;
font: bold 11 "arial, sans-serif"; /* set font as desired */
list-style-type: none;


position: relative;  /* offset to make all tabs sit on TOP of TOP BORDER  */
top: -2px;           /* shift all tabs up 2 pix - border width - then shift down selected */ 

line-height:18px;
vertical-align: baseline;
}

#tabbedBoxWidget ul.tabLine li { 
display: inline;
margin:0;
padding:0;
line-height:18px;
vertical-align: baseline;
}

#tabbedBoxWidget ul.tabLine li a { /* overall styles for all tabs */
background:url(images/blackTrans25.png) repeat;

border-top: 2px solid #666666;
border-left: 2px solid #666666; 
border-right: 2px solid #666666; 
border-bottom: none; 
-webkit-border-top-left-radius: 	6px;	/* webkit for old safari/chrome */
-webkit-border-top-right-radius: 	6px;
-moz-border-radius-topleft: 		6px;		/* old gecko engine - ffox etc */
-moz-border-radius-topright: 		6px;
border-top-left-radius: 			6px;			/* stds compliant css 3 */
border-top-right-radius: 			6px;
/* NOTE - IE9 supports css3, None of the older IEs support border-radius, not even IE8 - will just have sqr corners there */
	
background-color: transparent; 
color: #aaaaaa; 
text-decoration: none;
margin-right: 8px;    /* tab gutters */
padding: 2px 10px 2px 10px; /* padding for link text*/
line-height:18px;
vertical-align: baseline;
}

#tabbedBoxWidget ul.tabLine li a:hover {
color: #ffffff; 
padding-top: 4px; /* bump up tab on hover */
background-color: #000000; 
}



#tabbedBoxWidget ul.tabLine li.selected { /* selected tab  */
border-bottom: none; 

position: relative;  /* offset to make all tabs sit on TOP of TOP BORDER  */
top: 3px; /* note: should be 2px to account for bottom border width, works on non webkit browsers but need extra pixel webkit (chrome,safari) - unfortunaly adds 1px descender on non webkit - less worse solution.  */ 
}

#tabbedBoxWidget ul.tabLine li.selected a { /* selected tab a */
background:url(images/blackTrans50.png) repeat;

border-top: 2px solid #666666;  /* same as bottom border on overall ul#tabLine */
border-left: 2px solid #666666; 
border-right: 2px solid #666666; 

background-color: #000000;  
color:#FFCC33;

padding-top: 5px; /* can make selected taller than others */

position: relative;  /* offset to make bottom line disapper */
top: 0px;  /* offset by ONE border width */
}



/* featured news / webcam tabbox *******************************************************/

#NewsWebCamTabbedBox {
position:absolute;
	top: 385px;  
	left: 345px;
	z-index:100; /* be sure this is below page mask layer z=150 */
			
	/* width height here just defining outline box */
	width: 600px;  /* webcam images are responsive scaled in width to this width */
	height: 515px; /* webcam images auto scale height in aspect ratio, tabbox scales to content vertically upto max-height param */

}
/* OVERRIDE some tabbox styles with more specifc target for this ID NewsWebCamTabbedBox */
/* note since the class isnt actually apply to id but contained, theres a space*/
#NewsWebCamTabbedBox .tabContentWrapper {  
background:url(images/blackTrans75.png) repeat; /* bgcolor as backup for no image */
 
width:100%;  /* room for borders */
MAX-height:87%;  /* allow this tabbox to RESIZE up to a max limit to accomodate diff webcam heights with no scroll bars.*/
MIN-height: 150px; /* so loaders appear with some whitespace instead of shrink wrapped.

overflow:auto;  /* auto scrolls as needed, prefer only vert scrolls */
-webkit-overflow-scrolling: touch; /* for safari/webkit browsers on IOS - makes for smooth inertial scroll rather than default (or in some cases none!)  */

border-top: 6px solid #aaaaaa;   /* use just THIS BORDER to create a TAB UNDERLINE widget */

/* for FULL bounding box, UNCOMMENT these lines below */
border-bottom: 	5px solid #aaaaaa;
border-left:    5px solid #aaaaaa; 
border-right: 	5px solid #aaaaaa; 
-webkit-border-radius: 	3px;	/* webkit for old safari/chrome */
-moz-border-radius: 	3px;		/* old gecko engine - ffox etc */
border-radius: 			3px;			/* stds compliant css 3 */
/* NOTE - IE9 supports css3, None of the older IEs support border-radius, not even IE8 - will just have sqr corners there */
}

#NewsWebCamTabbedBox .tabContentWrapper img {  
border:0;
margin:5px;
}

#NewsWebCamTabbedBox .tabContent1, #NewsWebCamTabbedBox .tabContent2, #NewsWebCamTabbedBox .tabContent3, #NewsWebCamTabbedBox .tabContent4, #NewsWebCamTabbedBox .tabContent5, #NewsWebCamTabbedBox .tabContent6, #NewsWebCamTabbedBox .tabContent7, #NewsWebCamTabbedBox .tabContent8, #NewsWebCamTabbedBox .tabContent9 {
width:95%;
align: left;

/* was 95%  /* need to make room for padding.  with abs measurements it'd be tabContentWrapper:width - (left+right padding below) but I'm ball parking becuase of %s.  if a scroll box occurs on TEXT content that would normally wrap, need to back down percentage here  or go fixed width on wrapper and here.  IE if page width is 800px, 20px padding is 2.5% so 95% leave enough margin to go down to 400px wide window before it needs adjustment as long as padding stays at 10px left/right */
padding: 1% 2.5% 2.5% 1%;  /* use % for responsive behaior rather than pix pads creating scroll bars at small window sizes */
color:#dddddd;  /* pure white is too brite */
/* was margin:0 auto; /* center horo */
display:none;  /* hide all, onLoad the default tab and div should be made viz */
}


#NewsWebCamTabbedBox .tabLineWrapper {
/* overflow-x: scroll;  /*!!! not currently working!!! 
					idea is:  if widget width < UL.tabline width (unpredictable based on txt size and window/container size) I choose here to scroll tabs rather than have them WRAP which is ugly, this is more orderly and all tabs still usable. Jquery does this too. */
}

#NewsWebCamTabbedBox ul.tabLine { /* overall widget settings */
font-size:18px;
text-align: left;   /*This is tabs alignment NOT text */
text-indent:22px;   /*This controls indent on inline TABS since they are inline boxes */
margin: 10px 0 0 0; /* margins for entire element set here */
/*line-height: 14px;*/

list-style-type: none;
/*padding: 1px 15px 1px 10px; /* bottom padding, 3rd num must be one BORDER width less than padding below on SELECTED TAB */

position: relative;  /* offset to make bottom line disapper */
top: -5px;  /* offset by ONE border width */

}

#NewsWebCamTabbedBox  ul.tabLine li { 
display: inline;
}

#NewsWebCamTabbedBox ul.tabLine li a { /* overall styles for all tabs */
background-color:transparent;
color: #cccccc; 

border-top: 	3px solid #666666;
border-left: 	3px solid #666666; 
border-right: 	3px solid #666666; 
border-bottom: none; 
-webkit-border-top-left-radius: 	8px;	/* webkit for old safari/chrome */
-webkit-border-top-right-radius: 	8px;
-moz-border-radius-topleft: 		8px;		/* old gecko engine - ffox etc */
-moz-border-radius-topright: 		8px;
border-top-left-radius: 			8px;			/* stds compliant css 3 */
border-top-right-radius: 			8px;
/* NOTE - IE9 supports css3, None of the older IEs support border-radius, not even IE8 - will just have sqr corners there */
	
text-decoration: none;
margin-right: 4px;    /* tab gutters */
padding: 5px 12px 5px 12px; /* padding for link text*/

}

#NewsWebCamTabbedBox ul.tabLine li a:hover {
background-color: #000000; 
color: #ffffff; 
padding-top: 8px; /* bump up tab on hover */
}


#NewsWebCamTabbedBox ul.tabLine li.selected { /* selected tab  */
border-bottom: none;
position: relative;  /* offset to make bottom line disappear one border width  */
top: 7px; /* 6px is correct but leaves a hairline in chrome, safari so going with 7px, content bg layer covers excessin FFox */ 
}

#NewsWebCamTabbedBox ul.tabLine li.selected a { /* selected tab a */
border-top: 	3px solid #aaaaaa;  /* same as bottom border on overall ul#tabLine */
border-left: 	3px solid #aaaaaa; 
border-right: 	3px solid #aaaaaa; 

background-color: #000000; 
color:#FFCC33;

padding-top: 7px; /* can make selected taller than others */
}




/* BestOfTabLine tabLINE (yes line, not box IE no outlines on box) *******************************/
#BestOfTabLine {
position:absolute;
	top: 900px; /* was 870 */
	left: 30px;
	z-index:100; /* be sure this is below page mask layer z=150 */
			
	/* width height here just defining outline box */
	width: 650px;  
	height: 650px;

}

/* OVERRIDE some tabbox styles with more specifc target for this ID NewsWebCamTabbedBox */
/* note since the class isnt actually apply to id but contained, theres a space*/
#BestOfTabLine .tabContentWrapper {  
/* no BG for tabline  
background:url(images/blackTrans50.png) repeat; 
*/

width:100%;  /* no l/r borders on BESTOF so 100%, dont need room for borders */
/*height:80%;  /* !!! NOTE HEIGHT is set here!  BUT MUST ACCOUTN FOR HEIGHT OF TABS - hence well less than 100% of container. !!!mod: figure out method to calc size of tab height(tough due to text zoom). to scroll only content not tabs on overflow. SET HEIGHT to that needed by actual usage. NOTE if HEIGHT is left off, the box size and other content below(if widget positioned in FLOW, ie not absolute) FLOWS and ADJUSTS - is DETAIL pages we WANTThis but in HOME PAGE probably want to set a FIXED HEIGHT since all WIDGETS are positions ABSOLUTE */

/*??? move to tabcontent divs so the BG BED can extend out under SC explorer */
overflow: hidden;  /* scroll if needed */

border-top: 2px solid #aaaaaa;   /* use just THIS BORDER to create a TAB UNDERLINE widget */

/* for FULL bounding box, UNCOMMENT these lines below */
/*
border-bottom: 	6px solid #aaaaaa;
border-left: 	6px solid #aaaaaa; 
border-right: 	6px solid #aaaaaa; 
-webkit-border-radius: 	2px;	
-moz-border-radius: 	2px;		
border-radius: 			2px;			
*/

}

#BestOfTabLine .tabContent1, #BestOfTabLine .tabContent2, #BestOfTabLine .tabContent3, #BestOfTabLine .tabContent4, #BestOfTabLine .tabContent5, #BestOfTabLine .tabContent6, #BestOfTabLine .tabContent7, #BestOfTabLine .tabContent8, #BestOfTabLine .tabContent9 {
width:100%;
align: left;

/* was 95%  /* need to make room for padding.  with abs measurements it'd be tabContentWrapper:width - (left+right padding below) but I'm ball parking becuase of %s.  if a scroll box occurs on TEXT content that would normally wrap, need to back down percentage here  or go fixed width on wrapper and here.  IE if page width is 800px, 20px padding is 2.5% so 95% leave enough margin to go down to 400px wide window before it needs adjustment as long as padding stays at 10px left/right */
padding: 1% 0 1% 0;  /* 1% 2.5% 2.5% 1% use % for responsive behaior rather than pix pads creating scroll bars at small window sizes */
color:#dddddd;  /* pure white is too brite */
/* was margin:0 auto; /* center horo */
display:none;  /* hide all, onLoad the default tab and div should be made viz */
}

#BestOfTabLine .tabLineWrapper {
/* overflow-x: scroll;  /*!!! not currently working!!! 
					idea is:  if widget width < UL.tabline width (unpredictable based on txt size and window/container size) I choose here to scroll tabs rather than have them WRAP which is ugly, this is more orderly and all tabs still usable. Jquery does this too. */
}

#BestOfTabLine ul.tabLine { /* overall widget settings */
font: bold 11 "arial, sans-serif"; /* set font as desired */
text-align: left;   /*This is tabs alignment NOT text */
text-indent:22px;   /*This controls indent on inline TABS since they are inline boxes */
margin: 10px 0 0 0; /* margins for entire element set here */
/*line-height: 14px;*/

list-style-type: none;
/*padding: 1px 15px 1px 10px; /* bottom padding, 3rd num must be one BORDER width less than padding below on SELECTED TAB */

position: relative;  /* offset to make all tabs sit on TOP of TOP BORDER  */
top: -5px;  

}

#BestOfTabLine  ul.tabLine li { 
display: inline;
}

#BestOfTabLine ul.tabLine li a { /* overall styles for all tabs */
background-color:transparent;
color: #cccccc; 

border-top: 	2px solid #666666;
border-left: 	2px solid #666666; 
border-right: 	2px solid #666666; 
border-bottom: none; 
-webkit-border-top-left-radius: 	6px;	/* webkit for old safari/chrome */
-webkit-border-top-right-radius: 	6px;
-moz-border-radius-topleft: 		6px;		/* old gecko engine - ffox etc */
-moz-border-radius-topright: 		6px;
border-top-left-radius: 			6px;			/* stds compliant css 3 */
border-top-right-radius: 			6px;
/* NOTE - IE9 supports css3, None of the older IEs support border-radius, not even IE8 - will just have sqr corners there */
	
text-decoration: none;
margin-right: 4px;    /* tab gutters */
padding: 5px 12px 5px 12px; /* padding for link text*/

}

#BestOfTabLine ul.tabLine li a:hover {
background-color: #000000; 
color: #ffffff; 
padding-top: 8px; /* bump up tab on hover */
}


#BestOfTabLine ul.tabLine li.selected { /* selected tab  */
border-bottom: none;
position: relative;  /* offset to make bottom line disapper */
top: 3px; /* note: should be 2px to account for bottom border width, works on non webkit browsers but need extra pixel webkit (chrome,safari) - unfortunaly adds 1px descender on non webkit - less worse solution.  */ 
}

#BestOfTabLine ul.tabLine li.selected a { /* selected tab a */
border-top: 	2px solid #aaaaaa;  /* same as bottom border on overall ul#tabLine */
border-left: 	2px solid #aaaaaa; 
border-right: 	2px solid #aaaaaa; 

background-color: #000000; 
color:#FFCC33;

padding-top: 7px; /* can make selected taller than others */
}



/* social tabbox */
#socialTabbox {
position:absolute;
	top:900px;  /* was 870 */
 	left: 700px;
	/* NEEDED??? left from FFacts Test:
	padding: 10px 15px 0px 12px;
	*/
	
	/* width height here just defining outline box */
	
	width: 300px;  /* width driven by is FB widget minwidth 292px + tabbox borders (4px), i then ad an extra 4px cuz it looks more balanced on fb tab. Note minimally need to width size this correctly so we dont get an unwanted horoScrollBar on auto. Also note the tabcontent div is 98% of this width so the full 300px not available to content. */
	height: 650px; /* total widget height -ballparked, visually should be same total H as BESTOF widget for balance. */
	overflow:hidden;
	
	/* border: solid red 2px; */
	z-index:100; /* be sure this is below page mask layer z=150 */
	
}



#socialTabbox .tabContentWrapper {
/* background:url(images/blackTrans25.png) repeat; */
background-color:#000000; /* default color match FB widget since its vertically shorter than FB widget and leaves a bit of the containing div color exposed at bottom.  also see local tabContent# overrides specific to content in specific tabs */

width:98%;  /* need max avail width for embedded widgetswas. fullWidthOfOuterTabboxWidgetDims-borders)/fullwidth = %  316-4/316 = 98.7 using 98 for wiggle room */
height:85%;  /* was 80%, sized to abs dims on home page. This height must account FOR HEIGHT OF TABS+ content zone - hence well less than 100% of container.  NOTE if HEIGHT is left off, the box size and other content below(if widget positioned in FLOW, ie not absolute) FLOWS and ADJUSTS - for internal DETAIL pages this is desireable behavior. On HOME PAGE  want to set a FIXED HEIGHT since all WIDGETS are positions ABSOLUTE */

overflow:auto;  /* scroll bars if needed, note FB widget has scroll so see sizing details configured  to ensure we do NOT have one for that tab */
-webkit-overflow-scrolling: touch; /* for safari/webkit browsers on IOS - makes for smooth inertial scroll rather than default (or in some cases none!)  */

border-top: 2px solid #444444;   /* use just THIS BORDER to create a TAB UNDERLINE widget */

/* for FULL bounding box, UNCOMMENT these lines below */
border-bottom: 	2px solid #444444;
border-left: 	2px solid #444444; 
border-right: 	2px solid #444444; 
-webkit-border-radius: 	6px;	/* webkit for old safari/chrome */
-moz-border-radius: 	6px;		/* old gecko engine - ffox etc */
border-radius: 			6px;			/* stds compliant css 3 */

/* special case social tabbox, sharp top right corner so tabs can be left justified */
-webkit-border-top-left-radius: 	0px;	/* webkit for old safari/chrome */
-moz-border-radius-topleft: 		0px;		/* old gecko engine - ffox etc */
border-top-left-radius: 			0px;			/* stds compliant css 3 */
}

/* made these CLASSES instead of IDs since I will often have MULTIPLE tab widgets in a single page and need to target/select them based on the ID of the WIDGET name and these children of that so therefore uniquely identifiable.
*/
#socialTabbox .tabContent1, #socialTabbox .tabContent2, #socialTabbox .tabContent3, #socialTabbox .tabContent4, #socialTabbox .tabContent5, #socialTabbox .tabContent6, #socialTabbox .tabContent7, #socialTabbox .tabContent8, #socialTabbox .tabContent9 {
width:100%;  /* need full width for embedding social widgets, esp fb with forced scrollbar  was 95% */
align: left;

/* need to make room for padding.  with abs measurements it'd be tabContentWrapper:width - (left+right padding below) but I'm ball parking becuase of %s.  if a scroll box occurs on TEXT content that would normally wrap, need to back down percentage here  or go fixed width on wrapper and here.  IE if page width is 800px, 20px padding is 2.5% so 95% leave enough margin to go down to 400px wide window before it needs adjustment as long as padding stays at 10px left/right */
/* padding: 1% 2.5% 2.5% 1%;  /* use % for responsive behaior rather than pix pads creating scroll bars at small window sizes */
color:#dddddd;  /* pure white is too brite */
/* was margin:0 auto; /* center horo */
display:none;  /* hide all, onLoad the default tab and div should be made viz */
}

#socialTabbox .tabContent1 { /* match twitter widget dark theme bg */
background-color:#000000;
}

#socialTabbox .tabContent2 { /* fb widget needs black bg since they use grey txt */
background-color:#000000;
}

#socialTabbox .tabLineWrapper {
/* overflow-x: scroll;  /*!!! not currently working!!! 
					idea is:  if widget width < UL.tabline width (unpredictable based on txt size and window/container size) I choose here to scroll tabs rather than have them WRAP which is ugly, this is more orderly and all tabs still usable. Jquery does this too. */
}

#socialTabbox ul.tabLine { /* overall widget settings */
text-align: left;   /*This is tabs alignment NOT text */
text-indent:0px;   /*This controls indent on inline TABS since they are inline boxes */
margin: 8px 0 0 0; /* margins for entire element set here */
font: bold 11 "arial, sans-serif"; /* set font as desired */
/*line-height: 14px;*/
list-style-type: none;

position: relative;  /* offset to make all tabs sit on TOP of TOP BORDER  */
top: -2px;  
}

#socialTabbox ul.tabLine li { 
display: inline;
}

#socialTabbox ul.tabLine li a { /* overall styles for all tabs */
background:url(images/blackTrans25.png) repeat;

border-top: 2px solid #666666;
border-left: 2px solid #666666; 
border-right: 2px solid #666666; 
border-bottom: none; 
-webkit-border-top-left-radius: 	6px;	/* webkit for old safari/chrome */
-webkit-border-top-right-radius: 	6px;
-moz-border-radius-topleft: 		6px;		/* old gecko engine - ffox etc */
-moz-border-radius-topright: 		6px;
border-top-left-radius: 			6px;			/* stds compliant css 3 */
border-top-right-radius: 			6px;
/* NOTE - IE9 supports css3, None of the older IEs support border-radius, not even IE8 - will just have sqr corners there */
	
background-color: transparent; 
color: #aaaaaa; 
text-decoration: none;
margin-right: 4px;    /* tab gutters */
padding: 2px 10px 2px 10px; /* padding for link text*/

}

#socialTabbox ul.tabLine li a:hover {
color: #ffffff; 
padding-top: 4px; /* bump up tab on hover */
background-color: #000000; 
}



#socialTabbox ul.tabLine li.selected { /* selected tab  */
border-bottom: none; 
position: relative;  /* offset to make all tabs sit on TOP of TOP BORDER  */
top: 3px; /* note: should be 2px to account for bottom border width, works on non webkit browsers but need extra pixel webkit (chrome,safari) - unfortunaly adds 1px descender on non webkit - less worse solution.  */ 
}

#socialTabbox ul.tabLine li.selected a { /* selected tab a */
background:url(images/blackTrans50.png) repeat;

border-top: 2px solid #666666;  /* same as bottom border on overall ul#tabLine */
border-left: 2px solid #666666; 
border-right: 2px solid #666666; 

background-color: #000000;  
color:#FFCC33;

padding-top: 5px; /* can make selected taller than others */

position: relative;  /* offset to make bottom line disapper */
top: 0px;  /* offset by ONE border width */
}