@charset "UTF-8";

@media all {

/* body and background styles */
body { margin: 0 auto; background: #0a183b; /* page bkgd color */ }

a { color: #00d8ff; }
a:hover { color: #ffffff; }

#bg { margin: 0px;padding-top: 20px;width: 100%;height: auto;overflow: visible;text-align: center; }



/* global nav */
#navBg { width: 100%;margin: 0 auto;padding: 0;background: #000000 url(../img/globalnav.jpg) top center repeat-x; }

.gnPipe {font: bold 12px arial,helvetica,sans-serif;text-decoration: none;color: #00d8ff; /*primary link color */ }
	
.navTextLinks div a { line-height: 47px;font: normal 25px CNBold,Trebuchet MS,sans-serif;text-decoration: none;display: inline;color: #00d8ff; /* primary link color */ }
.navTextLinks div a:hover { font: normal 25px CNBold,Trebuchet MS,sans-serif;color: #ffffff;text-decoration: none; }
.navTextLinks li a { line-height: 47px;font: normal 25px CNBold,Trebuchet MS, sans-serif;text-decoration: none;display: inline;color: #00d8ff; /* primary link color */ }	
.navTextLinks li a:hover { font: normal 25px CNBold,Trebuchet MS, sans-serif;color: #ffffff;text-decoration: none; }

.gnShowsColumn a { font: normal 10px arial, helvetica, sans-serif;color: #00d8ff;text-decoration: none; }
.gnShowsColumn a:hover { font: normal 10px arial, helvetica, sans-serif;color: #ffffff;text-decoration: none; }

.loggedInText { font: bold 12px arial,helvetica,sans-serif;color: #ffffff;text-decoration: none; }

#gnFloatWrapper { background: transparent url(../img/globalnav_float.gif) top center repeat-x;width: 100%;height: 13px;margin: 0 auto;margin-top: -20px; }
#gnFloat { margin: 0 auto;height: 13px; width: 1000px; margin-top: 0px;padding-top: 0px;margin-bottom: 8px; background: url(../img/globalnav_cn.png) top center no-repeat; }



/* general page element styles */
.arrowLeft { width: 20px;height: 20px;margin-left: 4px;margin-top: 1px;border: solid 1px #464646;float: left;background: url(../img/leftArrowOff.jpg) no-repeat; }
.arrowLeft:hover { background: url(../img/leftArrowOn.jpg) no-repeat; }

.arrowRight { width: 20px;height: 20px;margin-right: 4px;margin-top: 1px;border: solid 1px #464646;float: right;background: url(../img/rightArrowOff.jpg) no-repeat; }
.arrowRight:hover { background: url(../img/rightArrowOn.jpg) no-repeat; }

.even { background: #202020;font: normal 11px arial, sans-serif;line-height: 23px;color: #acacac;height: 23px;margin: 0px;overflow: hidden; }
.odd { background: #000000;font: normal 11px arial, sans-serif;line-height: 23px;color: #acacac;height: 23px;margin: 0px;overflow: hidden; }

.nickName { font: bold 11px arial, sans-serif;color: #ffffff;	}

.tunein { height: 21px;width: 379px;margin: 0;padding-top: 2px;font: bold 14px arial, sans-serif;line-height: 21px;color: #ffffff;text-align: center;padding-bottom: 2px;padding-right: 2px;padding-left: 2px;background: #aa1c21; /* tune in bar color */ }
.tuneinGame { height: 25px;margin: 0;margin-bottom: 4px;padding-left: 10px;font: bold 14px arial, sans-serif;line-height: 25px;color: #ffffff;text-align: left;background: #aa1c21; /* tune in bar color */ }
.moreFromTab { background: url(../img/cornerTab.gif) #000000 top left no-repeat;font: normal 10px arial, sans-serif;line-height: 25px;text-transform: uppercase;padding-right: 10px;padding-left:25px;height:25px;float:right;}

.tabOff { position: relative;top: 0px;float: left;padding: 4px 10px;height: 21px;margin: 0px;padding: 2px;border-top: solid 1px #464646;border-right: solid 1px #464646;font: bold 14px trebuchet MS, sans-serif;line-height: 21px;color: #00d8ff;list-style: none;-moz-user-select: none;-khtml-user-select: none;cursor: pointer;text-align: center;background: url(../img/tabAccordionInactive.jpg) repeat-x;}	
.tabOff:hover { color: #ffffff;cursor: pointer;background: url(../img/tabAccordionActive.jpg) repeat-x;}
.tabOn { color: #ffffff;position: relative;top: 0px;float: left;padding: 4px 10px;height: 21px;margin: 0px;padding: 2px;border-top: solid 1px #464646;border-right: solid 1px #464646;font: bold 14px trebuchet MS, sans-serif;line-height: 21px;list-style: none;-moz-user-select: none;-khtml-user-select: none;cursor: pointer;text-align: center;background: url(../img/tabAccordionActive.jpg) repeat-x;}

.hdrTabPrimary { border-bottom: solid 1px #464646;font: bold 14px trebuchet MS, sans-serif;color: #ffffff;height: 21px;line-height: 21px;margin: 0px;padding: 2px;text-align: center;text-decoration: none;background: url(../img/tabAccordionActive.jpg) repeat-x; /* reference different img to change color */}
.hdrTabSecondary { border-top: solid 1px #464646; border-bottom: solid 1px #000000;font: bold 13px arial, sans-serif;color: #00d8ff;height: 21px;line-height: 21px;margin: 0px;padding: 2px;text-align: center;text-decoration: none;background: url(../img/tabAccordionInactive.jpg) repeat-x; /* reference different img to change color */}
.hdrTabSecondary:hover {color: #ffffff;cursor: pointer;}

.btnBlack { margin: auto;margin-top: 10px;margin-bottom: 7px; }
.btnBlack:hover { margin: auto;margin-top: 10px;margin-bottom: 7px; }
a.btnBlack { font: bold 10px arial, sans-serif;cursor: pointer;text-decoration: none;text-align: center;color: #00d8ff;margin-top: 10px;margin-bottom: 7px; /*primary link color */ }
a.btnBlack:hover { color: #ffffff;text-decoration: none; margin-top: 10px;margin-bottom: 7px; }
a.btnBlack span { background: url(../img/textButtonInactive.jpg) #000000 repeat-x;margin: auto;margin-top: 10px;margin-bottom: 7px;color: #00d8ff;border: solid 1px #464646;width: 20px;height: 19px;line-height: 19px;padding-left: 8px;padding-right: 8px;padding-top: 4px;padding-bottom: 4px;cursor: pointer;overflow: visible; }
a.btnBlack span:hover { background: url(../img/textButtonActive.jpg) #000000 repeat-x;color: #ffffff;margin-top: 10px;margin-bottom: 7px; }

.inputBtnBlack { background: url(../img/textButtonInactive.jpg) #000000 repeat-x;margin: 0 auto;margin-top: 9px;font: bold 10px arial, sans-serif;color: #00d8ff;border: solid 1px #464646;width: 50px;height: 19px;padding-left: 8px;padding-right: 8px;cursor: pointer;overflow: visible;float: left; }
.inputBtnBlack:hover { background: url(../img/textButtonActive.jpg) #000000 repeat-x;color: #ffffff; }

.shareDown { background: url(/tools/img/globalnav/showsDownOff.jpg) #000000 top right no-repeat;width: 70px;height: 20px;padding-right: 21px;font: bold 10px arial, sans-serif;line-height: 20px;color: #000000;text-align: center;border: solid 1px #464646;margin-top: 4px;float: right;cursor: pointer; }
.shareDown:hover { background: url(/tools/img/globalnav/showsDownOn.jpg) #000000 top right no-repeat; }
.shareUp { background: url(/tools/img/globalnav/showsUpOff.jpg) #000000 top right no-repeat;width: 70px;height: 20px;padding-right: 21px;font: bold 10px arial, sans-serif;line-height: 20px;color: #000000;text-align: center;border: solid 1px #464646;margin-top: 4px;float: right;cursor: pointer; }
.shareUp:hover { background: url(/tools/img/globalnav/showsUpOn.jpg) #000000 top right no-repeat; }

.downloadsContentBox { width:498px;height:25px;border-bottom:1px solid #464646;margin: 0 auto;text-align: left;padding-top:4px;overflow:visible; }
.downloadsDropDownBox { width:134px;overflow:hidden;margin:0 auto; }
.downloadsShadowTop { position: absolute; z-index:5; margin-top: 0px; margin-left: 0px; background: url(/tools/img/gradient.png) top center repeat-x !important;background: url(/tools/img/gradientIE6.png) top center repeat-x;width:483px;height:33px; }
.downloadsShadowBtm { position: absolute; z-index:5; margin-top: 113px; margin-left: 0px; background: url(/tools/img/gradient.png) bottom center repeat-x !important;background: url(/tools/img/gradientIE6.png) bottom center repeat-x;width:483px;height:33px; }
#icnWide { width:483px;height:111px;min-height: 111px;max-height: 111px;overflow:auto;margin:0 auto;margin-top:5px;margin-bottom:5px;display: block;position: absolute;z-index: 3;text-align: center;SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000;SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000;SCROLLBAR-DARKSHADOW-COLOR: #000000;  }
#wpWide { width:483px;min-height: 111px;max-height: 111px;height:111px;overflow:auto;margin:0 auto;margin-top:5px;margin-bottom:5px;visibility: hidden;position: absolute;z-index: 3;text-align: center;SCROLLBAR-FACE-COLOR: #000000; SCROLLBAR-HIGHLIGHT-COLOR: #000000; SCROLLBAR-SHADOW-COLOR: #000000; SCROLLBAR-3DLIGHT-COLOR: #000000; SCROLLBAR-ARROW-COLOR: #000000; SCROLLBAR-TRACK-COLOR: #000000;SCROLLBAR-DARKSHADOW-COLOR: #000000;  }

#gamescrollX { width: 160px;height: 399px;min-height:200px;max-height:414px;background-color: #000000;margin: 0 auto;margin-top: 5px;margin-bottom: 5px;overflow: auto; }

#scheduleBox { background: #000000;height: 370px;min-height: 370px;max-height: 370px;margin-bottom: 5px;padding-top: 10px;overflow: auto;SCROLLBAR-FACE-COLOR: #000000;SCROLLBAR-HIGHLIGHT-COLOR: #000000;SCROLLBAR-SHADOW-COLOR: #000000;SCROLLBAR-3DLIGHT-COLOR: #000000;SCROLLBAR-ARROW-COLOR: #000000;SCROLLBAR-TRACK-COLOR: #000000;SCROLLBAR-DARKSHADOW-COLOR: #000000; }
.scheduleScrollBox { padding-left: 5px; width: 488px; background: #000000; }
.scheduleShadowTop { position: absolute; z-index:5; margin-top: 0px; margin-left: 0px; background: url(/tools/img/gradient.png) top center repeat-x !important;background: url(/tools/img/gradientIE6.png) top center repeat-x;width:472px;height:33px; }
.scheduleShadowBtm { position: absolute; z-index:5; margin-top: 350px; margin-left: 0px; background: url(/tools/img/gradient.png) bottom center repeat-x !important;background: url(/tools/img/gradientIE6.png) bottom center repeat-x;width:472px;height:33px; }

.vidNavTextLinks { margin-top:8px;width:160px;height:400px;overflow:visible;padding-left:12px;font:normal 12px arial, sans-serif;color:#ffffff;float:left; }
.videoListArea { width:316px;margin-top:5px;padding-left:5px;float:left; }
.vidShadowTop { position: absolute; z-index:25; margin-top: 0px; margin-left: 0px; background: url(/tools/img/gradient.png) top center repeat-x !important;background: url(/tools/img/gradientIE6.png) top center repeat-x;width:303px;height:33px; }
.vidShadowBtm { position: absolute; z-index:25; margin-top: 330px; margin-left: 0px; background: url(/tools/img/gradient.png) bottom center repeat-x !important;background: url(/tools/img/gradientIE6.png) bottom center repeat-x;width:300px;height:33px; }
.vidScrollArea { height: 342px; width:316px;background:url(/tools/img/bkgd_vidscroll.jpg) #000000 repeat-x; }
.vidMoreBox { width:168px;height:17px;clear:both; }
.vidGradient { position: absolute; z-index:5; margin:0 auto; background: url(/tools/img/vidGradient.png) top center repeat-x !important;background: url(/tools/img/gradientIE6.png) top center repeat-x;width:476px;height:8px; }	
.videoNavLinks { font: normal 12px arial, sans-serif;color: #00d8ff; /* primary link color */ }
.videoNavLinks:hover { font: normal 12px arial, sans-serif;color: #ffffff; }


/* carousel navigation styles */
.carouselNavX {width: 15px;height: 14px;text-align: center;cursor: pointer;}
.carouselNav {background: #000000;width: 14px;height: 10px;font: bold 5px arial, sans-serif;color: #000000;padding: 0px;margin-top: 0px;margin-left: 2px;margin-right: 2px;border: solid 1px #00d8ff;display: inline;}
.carouselNav:hover {background: #ffffff;width: 14px;height: 10px;font: bold 9px arial, sans-serif;color: #000000;padding: 0px;margin-top: 0px;margin-left: -1px;margin-right: -1px;border: solid 1px #ffffff;text-align: center;cursor: pointer;display: inline;}



/* download menu styles */
.graphicSelect { background: url(../img/downArrowOff.jpg) #ffffff top right no-repeat;margin: 0 auto;color: #000000;font: bold 12px arial,helvetica,sans-serif;border: solid 1px #464646;width: 132px;height: 20px;overflow: hidden;line-height: 20px;text-indent: 18px;text-transform: uppercase;text-decoration: none; }
.graphicSelect:hover { background: url(../img/downArrowOn.jpg) #ffffff top right no-repeat;margin: 0 auto;color: #000000;border: solid 1px #464646;width: 132px;height: 20px;cursor: pointer; }

#snavbox { width: 132px; height: auto; margin: 0 auto;color:#000000; overflow: hidden; list-style: none; text-align: center; display: block; position: absolute; z-index: 503; }

#sub_nav { width:134px;height:auto;color:#000000;list-style:none;overflow:hidden;padding:0;margin: 0 auto;margin-top: 0px;margin-bottom: 0px;clear: all; }

#subNavBox li { width: 134px;list-style:none;overflow: hidden; margin:0;margin-top: 0px;margin-bottom: 0px;clear: both; }
#subNavBox a { width: 134px;float: left;margin: 0;margin-top: 0px;margin-bottom: 0px;padding:0 0 0 0;overflow:hidden;height:20px !important;height /**/:20px; /* for IE5/Win */font: normal 10px arial;line-height: 20px;clear: both; }
#subNavBox li a:hover { background-position:0 0px;margin: 0; }
#subNavBox li.selected { background-position:0 0px;margin: 0; }
#subNavBox li a.selected { background-position:0 0px;margin: 0; }
#subNavBox li a.selected:hover { background-position:0 0px;margin: 0; }

#dd_downloads { position: relative; width: 134px; height: auto; visibility: hidden; padding: 0; z-index: 501; overflow: visible;color:#000000; }

#dlChatIcons a  { width:132px;border: solid 1px #464646;background: #000000;color: #00d8ff; }
#dlChatIcons a:hover  { width:132px;border: solid 1px #464646;background: #ffffff;color: #000000;cursor: pointer; }
#dlWallpapers a  { width:132px;border: solid 1px #464646;background: #000000;color: #00d8ff; }
#dlWallpapers a:hover  { width:132px;border: solid 1px #464646;background: #ffffff;color: #000000;cursor: pointer; }



/* modal styles */
#w-play { position: absolute; top: 0; left: 0; display: none; z-index: 100000; }
#w-play-background { background: #000; }
#w-play-window { background:#000000; border: solid 1px #464646; width: 334px; height:203px; text-align: center; position: absolute; z-index: 100001; }
#w-play-hdr { background:#aa1c21;width:334px;height:25px;text-align:center;font:normal 10px arial, sans-serif;color:#ffffff; }
.w-play-txt { float:left;padding:6px; }
.w-play-caption { font:normal 10px arial, sans-serif;color:#ffffff;padding:10px; }
#w-play-closebutton { text-decoration: none; width: 73px; margin-top: 0px; font: normal 10px arial, sans-serif;line-height: 25px;text-transform: uppercase;padding-right: 0px;padding-left:15px;height:25px; background: url(../img/cornerTab.gif) #000000 top left no-repeat; position: relative; float: right; }
#w-play-closebutton span { margin: 0 auto; cursor: pointer; }

#w-paper { position: absolute; top: 0; left: 0; display: none; z-index: 100000; }
#w-paper-background { background: #000; }
#w-paper-window { background:#000000; border: solid 1px #464646; width: 448px; height:427px; text-align: center; position: absolute; z-index: 100001; }
#w-paper-hdr { background:#aa1c21;width:448px;height:25px;text-align:center;font:normal 10px arial, sans-serif;color:#ffffff; }
.w-paper-txt { float:left;padding:6px; }
.w-paper-content { width:410px;height:307px;margin:0 auto;margin-top:20px;text-align:center;font:bold 11px arial, sans-serif;color:#ffffff; border:solid 1px #464646; }
.w-paper-btns { margin:0 auto;width:300px;text-align:center; }
#w-paper-closebutton { text-decoration: none; width: 73px; margin-top: 0px; font: normal 10px arial, sans-serif;line-height: 25px;text-transform: uppercase;padding-right: 0px;padding-left:15px;height:25px; background: url(../img/cornerTab.gif) #000000 top left no-repeat; position: relative; float: right; }
#w-paper-closebutton span { margin: 0 auto; cursor: pointer; }




/* This is the selector for the AccordionPanel container which houses the
 * panel tab and a panel content area. It doesn't render visually, but we
 * make sure that it has zero margin and padding.
 *
 * The name of the class ("AccordionPanel") used in this selector is not necessary
 * to make the widget function. You can use any class name you want to style an
 * accordion panel container.
*/
.AccordionPanel { background: #000000;font: bold 11px arial, sans-serif;color: #7d7d7d;margin: 0px;padding: 0px;text-align: left; }
.AccordionPanel a { font: normal 11px arial, sans-serif;color: #00d8ff;text-decoration: none; }
.AccordionPanel a:hover { font: normal 11px arial, sans-serif;color: #ffffff;text-decoration: none; }
.AccordionPanel ol { margin:0px;margin-left:1px;padding:0px;list-style: none; }
.AccordionPanel li { margin:0px;margin-left:1px;padding-left: 0px;line-height: 17px;text-indent: 0px;height: 17px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;text-align: left; }
.AccordionPanel li span { margin: 0px;text-align: right;width: 13px;/*	float: left;*/padding-right: 3px;display: inline; }
.AccordionPanelTab { background: url(../img/tabAccordionInactive.jpg) repeat-x;border-top: solid 1px #464646;border-bottom: solid 1px #202020;font: bold 14px trebuchet MS, sans-serif;line-height: 21px;color: #00d8ff;height: 21px;margin: 0px;padding: 2px;cursor: pointer;text-align: center;-moz-user-select: none;-khtml-user-select: none; }
.AccordionPanelContent { overflow: hidden;margin: 0px;padding: 0px;height: 192px; }

/* This is an example of how to change the appearance of the panel tab that is
 * currently open. The class "AccordionPanelOpen" is programatically added and removed
 * from panels as the user clicks on the tabs within the Accordion.
 */
.AccordionPanelOpen .AccordionPanelTab { background: url(../img/tabAccordionActive.jpg) repeat-x;color: #ffffff; }

/* This is an example of how to change the appearance of the panel tab as the
 * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
 * and removed from panel tab containers as the mouse enters and exits the tab container.
 */
.AccordionPanelTabHover { background: url(../img/tabAccordionActive.jpg) repeat-x;color: #ffffff; }
.AccordionPanelOpen .AccordionPanelTabHover { background: url(../img/tabAccordionActive.jpg) repeat-x;color: #ffffff; }

/* This is an example of how to change the appearance of all the panel tabs when the

 * Accordion has focus. The "AccordionFocused" class is programatically added and removed
 * whenever the Accordion gains or loses keyboard focus.
 */
.AccordionFocused .AccordionPanelTab {}

/* This is an example of how to change the appearance of the panel tab that is
 * currently open when the Accordion has focus.
 */
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #33CCFF; }




/* This is the selector for the container that holds all of the content panels
 * for the widget. The SlidingPanelsContentGroup container is what gets programtically
 * positioned to create the slide animation. It is also what governs the layout of
 * the panels.
 *
 * By default, the width of the container is the same as its parent, the SlidingPanels
 * container.
 *
 * You can make the panels within the SlidingPanelsContentGroup container layout
 * horizontally by giving the SlidingPanelsContentGroup container a width that is as wide
 * or larget than the sum of the widths of all of the content panels, and then floating
 * the content panels inside the SlidingPanelsContentGroup container so they all appear
 * on the same line. You may also need to float the SlidingPanels and SlidingPanelsContentGroup
 * containers to insure that none of the content panels "leak" outside of the widget.
 *
 * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
 * container as they can affect the proper positioning and sliding animations of the
 * the container within the widget.
 *
 * The name of the class ("SlidingPanelsContentGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you want to style the
 * SlidingPanelsContentGroup container.
 */
#videoSlidingPanelsContentGroup {background: #000000; width 320px; height: 350px;min-height: 350px;max-height: 350px;margin-bottom: 5px;padding-top: 10px;overflow: hidden;SCROLLBAR-FACE-COLOR: #000000;SCROLLBAR-HIGHLIGHT-COLOR: #000000;SCROLLBAR-SHADOW-COLOR: #000000;SCROLLBAR-3DLIGHT-COLOR: #000000;SCROLLBAR-ARROW-COLOR: #000000;SCROLLBAR-TRACK-COLOR: #000000;SCROLLBAR-DARKSHADOW-COLOR: #000000; }


/* This is the selector for the container that holds content for a given panel. In our
 * default style implementation, the dimensions of each content panel exactly match the
 * dimensions of the view port (SlidingPanels) container. This ensures that only one
 * panel ever shows within the view port.
 *
 * Avoid placing any CSS border, margin, or padding properties on the SlidingPanels
 * container as they can affect the proper positioning and sliding animations of the
 * the panel within the widget. You can place border, margins and padding on any content
 * *inside* the content panel.
 *
 * The name of the class ("SlidingPanelsContent") used in this selector is not
 * necessary to make the widget function. You can use any class name you want to style the
 * SlidingPanelsContent container.
 */
.videoSlidingPanelsContent { width: 320px;height: 59px;overflow: hidden;margin: 0px;margin-bottom: 3px;padding: 1px; }
.videoSlidingPanelsContent:hover { background: url(../img/bkgdVidCell.jpg) top right repeat-x;width: 300px;height: 59px;overflow: visible;margin: 0px;margin-bottom: 3px;padding: 1px;cursor: pointer; }
.videoSlidingPanelsContent:active { background: url(../img/bkgdVidCell.jpg) top right repeat-x;width: 300px;height: 59px;overflow: visible;margin: 0px;margin-bottom: 3px;padding: 1px;cursor: pointer; }


/* The class used in this selector is programatically added to the SlidingPanels container
 * anytime we are animating between panels. This rule makes sure that *all* content inside
 * the widget is overflow:none to avoid a rendering glitch that occurs in FireFox 1.5 whenever
 * there is an element inside the widget that displays a scrollbar.
 *
 * The class is automatically removed once the animation has stopped so that the overflow
 * properties of the content inside the widget should be restored.
 */
.SlidingPanelsAnimating * { overflow: hidden !important; }

/* The class used in this selector is programatically added to the SlindingPanelsContent
 * container that is currently visible in the view port. The class is automatically removed
 * when the widget switches to a different panel.
 */
.SlidingPanelsCurrentPanel {  }
.SlidingPanelsCurrentPanel a {  }
.SlidingPanelsCurrentPanel a:active {  }

/* The class used in this selector is programatically added to the SlidingPanels container
 * anytime the SlidingPanels container is given focus. The class is automatically removed
 * once the SlidingPanels container loses focus.
 */
.SlidingPanelsFocused {  }
.SlidingPanelsFocused a {  }
.SlidingPanelsFocused a:active {  }




/* These selectors control individual star states, which can be: 
* - full: the rating value exceds the current star
* - empty: the rating value is below the current star
* - half: the rating value is "inside" the current star  
* - hover: special state when the user selects the current star (mouse or keyboard)
*/

.ratingFullHover{ background: url(../img/spry/star_full.png) top center no-repeat;height: 17px;width: 17px;float: left;overflow: hidden; }
.ratingHalfHover{ background: url(../img/spry/star_half.png) top center no-repeat;height: 17px;width: 17px;float: left;overflow: hidden; }
.ratingFull{ background-image: url('../img/spry/star_full.png'); }
.ratingEmpty{ background-image: url('../img/spry/star_empty.png'); }
.ratingHalf{ background-image: url('../img/spry/star_half.png'); }
.ratingHover{ background-image: url('../img/spry/star_hover.png');cursor: pointer; }

/* Star state can be further modified by the state of the container widget */
.ratingReadOnlyState .ratingFull{ background-image: url('../img/spry/star_full_ro.png'); }
.ratingReadOnlyState .ratingHalf{ background-image: url('../img/spry/star_half_ro.png'); }
.ratingContainer{ color: #00d8ff; }

/* This selector controls the initial appearance of a rating star inside the widget.
 * It will later be affected by the state of the rating container itself.
 * Display is set to none so that when JavaScript is disabled, it will not show.
 */
.ratingButton{ background-repeat: no-repeat;background-position: top center;display: none;position: relative;z-index: 13; }
  
/* Rating star appearance is affected by the state of the widget container.
 * Note that the width and height are required for Internet Explorer.
 */
.ratingInitialState .ratingButton,
.ratingReadOnlyState .ratingButton,
.ratingRatedState .ratingButton
{ display: block;width: 17px;height: 17px;float: left;overflow: visible; }

/* Hide the input fields that are used for gracefull degradation when JavaScript is enabled. */
.ratingInitialState input,
.ratingReadOnlyState input,
.ratingRatedState input
{ display: none; }

/* These are the classes applied on the messages ("read only" and "thanks for voting")
 * which prevent them from being displayed by default 
 */ 
.ratingReadOnlyErrMsg, .ratingRatedMsg{	font: bold 10px arial,helvetica,sans-serif;color: #ffffff;display: none;position: absolute;z-index: 5;padding: 3px;margin-top: 2px;margin-left: 0px;background: #000000; }

/* This selector change the way messages look when the widget is in "read-only" state and user tries to rate.
 * This class sets a default red border and color for the error text.
 * An additional class is added on the top-level container (.ratingReadOnlyErrState) 
 * and this way only the specific error message can be shown by setting the display property to "inline".
 */
.ratingReadOnlyErrState .ratingReadOnlyErrMsg{ display: inline;color: #ffffff;border: 1px solid #CC3333;	 }

/* This selector change the way messages look when the widget is in "rated" state.
 * This class makes message visible and sets a green color on it.
 * The state class (.ratingRatedState) is applied on the top-level container for the widget,
 * and this way only the specific error message can be shown by setting the display property to "inline".
 * Note: set the display property below according to your needs, (e.g. inline, block, etc) depending on the container type
 */
.ratingRatedState .ratingRatedMsg{ display: block;color: #ffffff;; }

/* Customize the appearance of the rating counter */
.ratingCounter{ color: #00d8ff; }




/* ========== scrollbars ========== */
.scroll-track, .scroll-track-1, .scroll-track-2, .scroll-track-3, .scroll-track-4, .scroll-track-5, .scroll-track-6 { height:8px;width:15px;background: #000000 url('../img/basebarcaps_verticalbarbody.png') 0px 0px repeat-y; }
.scroll-handle, .scroll-handle-1,  .scroll-handle-2,  .scroll-handle-3,  .scroll-handle-4,  .scroll-handle-5,  .scroll-handle-6  { border: 0px;height:15px;width:15px;background: #99CBCB url('../img/basebarcaps_verticalbarbody.png') -15px 0px repeat-y;cursor:pointer; }
#scroll-track-top, #scroll-track-top-1, #scroll-track-top-2, #scroll-track-top-3, #scroll-track-top-4, #scroll-track-top-5, #scroll-track-top-6 { height:15px;width:15px;background: url('../img/basebarcaps_verticalbarbody.png') -30px -30px no-repeat; }
#scroll-handle-bot, #scroll-handle-bot-1, #scroll-handle-bot-2, #scroll-handle-bot-3, #scroll-handle-bot-4, #scroll-handle-bot-5, #scroll-handle-bot-6 { height:15px;width:15px;background: url('../img/basebarcaps_verticalbarbody.png') -45px 0px no-repeat; }
#scroll-handle-top, #scroll-handle-top-1, #scroll-handle-top-2, #scroll-handle-top-3, #scroll-handle-top-4, #scroll-handle-top-5, #scroll-handle-top-6 { height:15px;width:15px;background: url('../img/basebarcaps_verticalbarbody.png') -45px -30px no-repeat; }
#scroll-track-bot, #scroll-track-bot-1, #scroll-track-bot-2, #scroll-track-bot-3, #scroll-track-bot-4, #scroll-track-bot-5, #scroll-track-bot-6 { height:15px;width:15px;background: url('../img/basebarcaps_verticalbarbody.png') -60px -30px no-repeat; }



/* footer styles */
#seoWrapper {/* section wrapper */clear: both;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;width: 720px;height: auto; }
#seoShell {	/* section wrapper */clear: both;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;width: 720px;height: auto; }
.seoText { font: 12px arial,helvetica,sans-serif;color: #ffffff;margin: 0; }
.seoText H1 { font: bold 14px arial,helvetica,sans-serif;line-height: 18px;color: #ffffff;margin: 0; }
#legalWrapper { margin:0 auto; margin-top: 20px; width: 808px; height: auto;} /* section wrapper */
.legalSmall { font : bold 11px Arial, Verdana, Helvetica, sans-serif;color : #00d8ff;text-decoration: none; }
.legalSmall:hover { font : bold 11px Arial, Verdana, Helvetica, sans-serif;color : #ffffff;text-decoration: none; }
.legalSub { font : normal 9px Arial, Verdana, Helvetica, sans-serif;color : #ffffff;text-decoration: none; }
.ftrTag { font : bold 11px Arial, Verdana, Helvetica, sans-serif;color : #ffffff;text-decoration: none; }
SUP { font : 9px Arial, Verdana, Helvetica, sans-serif;color : #ffffff;text-decoration: none; }




}