@charset "utf-8";

/*---- tabboxes CSS  ------------------------------------*/
/* MODS NEEDED FOR CLEANER TABBOX INSTANCES:
	create a .tabbedBoxWrapper class target all subclasses off that, THEN...
	for each new instance with UNIQUE ID, that is just a wrapper with an ID that goes around all of it OR the 
	above wrapper class is applied to it along with positioning info below that is UNIQUE to the INSTANCE.
	Research which method is best.
	
	HOWEVER:  as done below in the NEWS/WEBCAM tabbbox, there is actaully a lot of MODIFIED classes to get a diff look.
	decide if these ALT boxes should be full custom CSS versions or just overrides on a core def. that latter is cleaner
	but may have to wait to a later implementation.
*/

/* 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 */
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;  
}

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

#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*/

}

#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: 415px;  
	left: 335px;
	z-index:100; /* be sure this is below page mask layer z=150 */
			
	/* width height here just defining outline box */
	width: 624px;  /* was 620, adjusted so no scroll on webcam main image */
	height: 468px; /* was 450px */

}
/* 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:98%;  /* room for borders */
height:87%;  /* !!! 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: 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 */
}