/* Stylesheet Contents: */
/* LAYOUT DIVS FOR WEBSITE */
/* GLOBAL DEFAULT STYLES */
/* SUB CONTAINER AND SECTION CONTENT IN HEADER AND FOOTER */
/* SUB CONTAINER AND SECTION CONTENT IN LEFT AND RIGHT COL */
/* ALL ADS AND SPONSOR RELATED CONTENT */
/* MISC */
/* Other stylesheets include Registration.css for Registration Sections and Community.css for My CNET TV Sections */

/* Reset all margin and padding elements */
* {
margin: 0;
padding: 0; /* no reseting border due to form fields such as input fields and dropdown menus */
}
body {
background-color: #333;
color: #fff;
font-family: tahoma, verdana, sans-serif; /* default site font */
}

/* LAYOUT DIVS FOR WEBSITE */
/* Top section containing the header */
#top {
background-color: #333; /* same colour as body */
}
/* Container div housing #main middle content section */
#main-bg { /* extra div with only bg colour to allow footer to render nicer on short pages */
background-color: #000;
}
/* Container for main content of the site */
#main {
background-color: #000;
border-left: 1px solid #333;
border-right: 1px solid #333;
color: #fff;
margin-left: auto;
margin-right: auto;
padding-top: 14px; /*15px; to allow sleader on skins to align horizontally with skin bg */
text-align: left;
width: 944px;
}
/* Container div for top ads (leaderboard and promo unit) in the main header */
#header-ads {
margin: 0;
padding: 0 0 2px 0;
}
/* Main middle content section housing left and right columns */
#main-content {
margin: 14px 10px 0 10px;  /*15px 10px 0 10px;*/ /* top margin spacing added here instead of header-ads margin bottom spacing for better cross browser rendering consistency */
/*overflow: hidden;*/
width: 924px; /* total width including margin spacing 944px, same as main div */
}
/* Main left column */
#primary-content { /* width plus margin right plus width of secondary-content equals 920px, same as main-content div */
float: left;
margin: 0 14px 0 0;
overflow: hidden;
width: 570px;
}
/* Right column */
#secondary-content {
float: left;
/*overflow: hidden;*/ /* no overflow hidden due to advertisement tag graphic for MPU */
width: 336px;
}
/* Bottom footer container div */
#footer {
background-color: #333; /* same colour as body */
}

/* GLOBAL DEFAULT STYLES */
img {
border: 0;
}
h1 { /* eg category page headings */ /* note: for main homepage only, the top main logo is housed in a h1 tag! Furthermore, on Story pages, category headings get switched to a h2 and the video name gets a h1.story class */
font-family: "arial rounded mt bold", arial, sans-serif;
font-size: 160%;/*200%;  same as 32px size */
margin: 0 0 25px 0;
padding: 0;
text-transform: lowercase;
}
h1.story { /* this version is for story pages only, for the video title name NOT the category title, same as h2 */
color: #ccc;
font-family: tahoma, verdana, sans-serif;
font-size: 115%;
margin: 0 0 5px 0;
padding: 0;
text-transform: none;
}
#search-results-title h1 { /* this version is for search results pages only, for the results title name NOT the page title, same as h2 */
color: #ccc;
float: left;
font-family: tahoma, verdana, sans-serif;
font-size: 115%;
margin: 0 0 15px 0;
padding: 0;
text-transform: none;
}
h2 {
color: #ccc;
font-size: 115%;
margin: 0 0 15px 0;
padding: 0;
}
h2.category { /* this version is for story and search results pages only, for the category title name NOT the video title, same as h1 */
color: #fff;
font-family: "arial rounded mt bold", arial, sans-serif;
font-size: 200%; /* same as 32px size */
margin: 0 0 25px 0;
padding: 0;
text-transform: lowercase;
display: none;
}
/* Given when h2 appears to the right of thumbnail graphic. EG: episode title next to thumbnail */
h2.with-thumb {
color: #ccc;
font-size: 115%;
margin: 0 0 5px 0;
padding: 0;
}
/* .video-box h2 used on homepage, styles below */
h3 { /* this h3 default version for category video headings */
color: #ccc;
font-size: 115%;
margin: 0 0 10px 0;
padding: 0;
}
/* .video-row h3 used on category and story, styles below  */
p {
font-size: 70%;
line-height: 1.4em;
margin: 0 0 15px 0;
}
ul, ol {
margin: 0 0 15px 30px;
padding: 0;
}
li {
font-size: 70%;
line-height: 1.4em;
}
a, a:hover { /* no need to specifically style link or visited attributes, only default a and a:hover fine */
background-color: transparent;
color: #3cf; /* default site colour for links is torquoise */
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a.franchise, a.franchise:hover {
color: #fff;
font-weight: bold;
}
form, fieldset {
border: 0;
}
p.highlight, span.highlight {
background-color: #fff;
color: #000;
font-weight: bold;
padding: 2px 3px;
}

/* SUB CONTAINER AND SECTION CONTENT IN HEADER AND FOOTER */
/* Container div in #top housing main header content */
#header {
background-color: #333;
background-image: url("/i/t/bg/header-gradient.jpg");
background-repeat: repeat-x;
background-position: bottom left;
border-left: 1px solid #333;
border-right: 1px solid #333;
min-height: 118px; /*114px;*/
margin: 0 auto;
position: relative;
text-align: left;
width: 944px;
}/* with ie6 hack */
/* Main logo in header */
#header h1 { /* h1 tag for main logo on homepage only, below styles counter the default h1 tag styles */
font-family: arial, sans-serif;
margin: 0;
padding: 0;
text-transform: none;
}
img#logo {
float: left;
margin: 20px 0 -1px 20px;
}

/* Links to other cnet consumer sites */
ul.other-consumer-sites {
color: #848484;
margin: 0;
padding: 2px 10px 0 0;
text-align: right;
text-transform: uppercase;
}
ul.other-consumer-sites li {
background-image: url("/i/t/bg/hdr-site-seperator.gif");
background-repeat: no-repeat;
background-position: right;
display: inline;
font-size: 65%;
line-height: 1.3em;
margin: 0;
padding: 0 18px;
}
ul.other-consumer-sites li.no-line {
background-image: none;		
padding: 0 2px 0 16px;
}
ul.other-consumer-sites li a, ul.other-consumer-sites li a:hover {				
color: #848484;
}
ul.other-consumer-sites li a:hover {				
text-decoration: underline;
}

/* Search form in header */				
form.main-header {
float: left;
margin: 28px 0 0 96px; /* central position of top search form using margin left */
width: 425px;
}
form.main-header input#searchField {
font-size: 70%;
margin: 0;
padding: 2px 0 0 3px;
width: 380px;
}
form.main-header input.searchBtn {
color: #fff; /* So that the submit button will display when images is switched off */
vertical-align: middle;
}

/* Membership area with login and avadar  */
#userRegLogin {
background-color: #454545;
border: 1px solid #666;
color: #ccc;
float: right;
height: 36px;
margin: 20px 16px 0 8px;
overflow: hidden;
position: relative;
text-align: left;
width: 163px;
}
#userRegLogin img.avatar {
border-right: 1px solid #666;
float: left;
margin-right: 4px;
}
#userRegLogin p {
font-family: verdana, sans-serif;
font-size: 65%;
font-weight: normal;
line-height: 11px;
margin: 0;
padding: 4px 4px 0 0;
}
/* Membership box in the My playlist paint box */
div.content-box #userRegLogin {
float: none;
margin: 0 0 15px 0;
position: static;
}
div.content-box #userRegLogin p {
font-weight: normal;
}
/* Main navigation in header area */
ul.main-nav {
clear: left;
font-weight: bold;
margin: 0 0 0 210px; /* using margin left spacing manually to center the top menu nav */
padding: 4px 0 0 0;
width: auto;
}
ul.main-nav li {
float: left;
font-size: 70%;
line-height: 29px;
list-style: none;
}
ul.main-nav a, ul.main-nav a:hover {
background-color: #000;
background-image: url("/i/t/bg/nav-middle.gif");
background-repeat: repeat-x;
color: #fff;
display: block;
float: left;
margin-top: 1px;
min-height: 29px; /* for better render when text size decreases in FF */
padding: 0 18px;
text-decoration: none;
}
ul.main-nav a:hover {
text-decoration: underline;
}
/* Selected highlighted tab in nav */
ul.main-nav li.selected a, ul.main-nav li.selected a:hover {
background-color: #5d10d2;
background-image: url("/i/t/bg/nav-middle-selected.gif");
background-repeat: repeat-x;
color: #fff;
line-height: 29px;
min-height: 29px; /* for better render when text size decreases in FF, used with above min-height 29px */
}
ul.main-nav li.selected a:hover {
text-decoration: none;
}
ul.main-nav li.selected span { /* span tags holding the rounded left and right borders */
background-image: url("/i/t/bg/nav-left-selected.gif");
background-repeat: no-repeat;
display: block;
float: left;
height: 28px;
margin-top: 1px;
width: 3px;
}
ul.main-nav li.selected span.right {
background-image: url("/i/t/bg/nav-right-selected.gif");
}

/* Footer Copyright Section */
#footer #copyright-section {
background-color: #333;
background-image: url("/i/t/bg/footer-gradient.jpg");
background-position: bottom;				
background-repeat: repeat-x;
border-left: 1px solid #333;
border-right: 1px solid #333;
color: #ccc;
height: 57px;
margin: 0 auto;
/*position: relative; causing weird ie7 footer bug resulting in the footer misaligning */
text-align: left;
width: 944px;
}
#footer #copyright-section p {
float: left;
font-family: verdana, sans-serif;	
font-size: 65%;
margin: 0;
padding: 0 15px;
line-height: 57px;
}
#footer #copyright-section p.about-cnet-cnetworks {
float: right;
}
#footer #copyright-section p a, #footer #copyright-section p a:hover {
color: #ccc;
}

/* SUB CONTAINER AND SECTION CONTENT IN LEFT AND RIGHT COL */
/* Breadcrumbing text */
p#bread-crumbing {
color: #999;
margin: -8px 0 7px 0;
position: relative;
}

/* Container div for the top main video */
.main-video {
margin: 0 0 15px 0;
overflow: hidden;
}
/* Video description for the top main video */
.main-video-description {
margin: 0 0 12px 0;
}/* with ie6 and ie7 hack */
.main-video-description p {
margin: 0 0 5px 0;
}
h3.related-links {
font-size: 75%;
margin: 0 0 2px 0;
}
/* List of related text links under main video description text */
ul.related-links {
margin: 0 0 5px 0;
padding: 0;
}
ul.related-links li {
float: left;
list-style: none;
margin-right: 1%;
overflow: hidden;
width: 48%;
}
p.recommended { /* Paragraph text of number of recommended users under main video */
clear: both;
color: #ccc;
margin: 0 0 8px 0; /*-6px 0 8px 0;*/
text-align: right;
}

/* Grey background box container, such as for extra options and links for story or video, used in left and right cols */
.option-box {
background-color: #393939;
border: 1px solid #4a4a4a;
clear: both;
color: #fff;
margin: 0 0 15px 0;
overflow: hidden;
text-align: center;
}
/* List of story options such as email or download, this version is listed horizontally */
#primary-content .option-box ul {
border: 1px solid #393939; /* strange solution which solves IE disappearence when scrolling the screen, this is set to the same bg colour as option-box above in order to render it invisible */
margin: 8px 0;
padding: 0;
}
#primary-content .option-box ul li {
display: inline;
list-style: none;
margin: 0 0 0 11px;
padding: 0;
}
#primary-content .option-box ul.social-bookmarks li { /* for digg icons etc */
margin: 0 24px 0 14px;
}
#primary-content .option-box ul li a {
/*background-image defined in each individual class below to display appropriate icon for each text link */
background-repeat: no-repeat;
padding: 6px 0 5px 0; /* padding left spacing set below depending on icon width, plus 4px */
}
#primary-content .option-box ul li.email a {
background-image: url("/i/t/ico/email.gif");
padding-left: 26px;
}
#primary-content .option-box ul li.add-site a {
background-image: url("/i/t/ico/add-site.gif");
padding-left: 24px;
}
/*#primary-content .option-box ul li.download a { CURRENTLY NOT USED ON SITE
background-image: url("/i/t/ico/download.gif");
padding-left: 24px;
}*/
#primary-content .option-box ul li.add-playlist a {
background-image: url("/i/t/ico/add-playlist.gif");
padding-left: 24px;
}
/*#primary-content .option-box ul li.recommend a { for recommend, the thumb icons must be links, not the text
background-image: url("/i/t/ico/recommend.gif");
padding-left: 41px;
}*/
#primary-content .option-box ul li.remind-me a {
background-image: url("/i/t/ico/add-site.gif");
padding-left: 24px;
}
#primary-content .option-box ul li.delicious a {
background-image: url("/i/t/ico/delicious.gif");
padding-left: 20px;
}
#primary-content .option-box ul li.digg a {
background-image: url("/i/t/ico/digg.gif");
padding-left: 20px;
}
#primary-content .option-box ul li.facebook a {
background-image: url("/i/t/ico/facebook.gif");
padding-left: 20px;
}
#primary-content .option-box ul li.stumbleupon a {
background-image: url("/i/t/ico/stumbleupon.gif");
padding-left: 20px;
}
#primary-content .option-box ul li.slashdot a {
background-image: url("/i/t/ico/slashdot.gif");
padding-left: 20px;
}
#primary-content .option-box ul li img { /* thumb icon images for recommend */
margin: 0 1px 0 0;
vertical-align: middle;
}
#primary-content .option-box ul a, #primary-content .option-box ul a:hover {
background-color: #393939; /* same as option-box */
color: #fff;
}

/* Enter and submit email address for Email icon inside option-box */
form#sent-email {
margin: 0 0 10px 15px;
}
form#sent-email label {
display: block;
font-size: 70%;
margin: 0 0 3px 0;
}
form#sent-email input {
width: 170px;
}
form#sent-email .button {
vertical-align: middle;
width: auto;
}/* with ie6 hack */
p.email-address-sent { /* Paragraph text for email sent confirmation message, in place of form#sent-email */
color: #000;
margin: 0 12px 8px 12px;
text-align: center;
}

/* Video Embed code, which sits inside option box div - added 040208 ccl */
form#videoEmbed {
margin: 0 0 10px 0;
}
form#videoEmbed label {
font-size: 70%;
margin: 0 5px 0 0;
}
form#videoEmbed input {
font-family: arial, sans-serif;
font-size: 70%;
width: 420px;
}

/* List of story options such as rss or subscribe to newsletters, this version is listed vertically in right col */
#secondary-content .option-box ul {
margin: 8px 0 8px 10px;
padding: 0;
text-align: left;
}
#secondary-content .option-box ul li {
list-style: none;
margin: 0 0 7px 0;
padding: 0; /* padding left spacing set to icon width, plus 9px */
}
#secondary-content .option-box ul li a {
/*background-image defined in each individual class below to display appropriate icon for each text link */
background-repeat: no-repeat;
padding: 0 0 3px 25px; /* padding left spacing set to icon width, plus 9px */
}
#secondary-content .option-box ul li.newsletters a {
background-image: url("/i/t/ico/newsletters.gif");
}
#secondary-content .option-box  ul li.favourites a {
background-image: url("/i/t/ico/favourites.gif");
}
#secondary-content .option-box ul li.rss a {
background-image: url("/i/t/ico/rss.gif");
}
#secondary-content .option-box ul li a, #secondary-content .option-box ul li a:hover {
font-weight: bold;
}

/* Content box including top header bar and backtabs links */
/* top header bar with rounded corners */
#main-content .content-box-hdr, #primary-content .content-box-hdr, #secondary-content .content-box-hdr {
background-image: url("/i/t/bg/box-912-top.jpg"); /* styled first due to cascade below for left and right cols */
background-repeat: no-repeat;
min-height: 21px;
padding-top: 4px; /* height plus padding top equals 25px */
}/* with ie6 hack */
#primary-content .content-box-hdr { /* left col version */
background-image: url("/i/t/bg/box-570-top.jpg");
}
#secondary-content .content-box-hdr { /* right col version */
background-image: url("/i/t/bg/box-336-top.jpg");
}
/* backtab links in content-box-hdr */
.content-box-hdr ul {
margin: 0;
padding: 0 0 0 10px;
}
.content-box-hdr ul li {
float: left;
font-size: 70%;
list-style: none;
margin: 0 10px 0 0;
}
.content-box-hdr ul a, .content-box-hdr ul a:hover, .content-box-hdr ul strong { /* all backtab text links, selected version with bg after this, strong is the fallback when tab is not an anchor link */
background-color: transparent; /* highlighted version in bg colour 515151 below */
color: #fff;
float: left;
font-weight: bold;
line-height: 15px;
padding: 0 8px 1px 8px;
}
.content-box-hdr ul li span { /* to house the rounded borders on left and right */
background-image: none;
display: block;
float: left;
height: 16px;
width: 1px;
}
.content-box-hdr ul li span.right {
background-image: none;
}
/* Selected backtab version */
.content-box-hdr ul li.selected a, .content-box-hdr ul li.selected a:hover, .content-box-hdr ul li.selected strong {
background-color: #515151;
color: #fff;
min-height: 15px; /* mainly for better Safari rendering on smaller size */
}
.content-box-hdr ul li.selected span { /* to house the rounded borders on left and right */
background-image: url("/i/t/bg/tab-left.gif");
background-repeat: no-repeat;
}
.content-box-hdr ul li.selected span.right {
background-image: url("/i/t/bg/tab-right.gif");
}

/* Main content-box div to house the content */
.content-box { /* default style for main content boxes seen on the site */
background-color: #000;
background-image: url("/i/t/bg/box-gradient.jpg");
background-repeat: repeat-x;
border: 1px solid #4a4a4a;
clear: both;
color: #fff;
margin: 0 0 15px 0;
padding: 15px 10px 5px 10px;
}

/* Container div to house a row of video thumbnails */
.video-row {
clear: both;
width: 548px; /* width needed because box collapse in IE with video-box floats */
}
.video-row-hp { /* for video-row on homepage only */
background-image: url("/i/t/bg/video-row.gif");
background-repeat: repeat-y;
margin: 0 0 10px 0;
}
/* Latest Video and Most Popular Video Boxes inside content-box, class housing one video and text */
.video-box {
background-color: #393939;
color: #fff;
float: left;
margin: 0 22px 0 0;
padding: 4px 3px;
position: relative; /* as an anchor for the absolute play button below */
overflow: hidden;
width: 160px;
}
.last-video-box { /* last video box with no margin right spacing */
margin-right: 0;
}
.video-box h2 { /* as seen on homepage */
font-size: 70%;
margin: 5px 8px;
padding: 0;
}
.video-box p {
color: #ccc;
margin: 0 8px 4px 8px;
padding: 0;
}
p.more-links { /* bottom more text link */
background-image: url("/i/t/bul/arrow.gif");
background-repeat: no-repeat;
background-position: 1px 5px;
font-size: 65%;
margin: 0 8px;
padding: 0 0 0 10px;
}
p.more-links a, p.more-links a:hover {
color: #fff;/*#999; change made 06.09.07 by MN*/				
}
.video-box img.play {
left: 15px;
position: absolute; /* to place the play button over the video image, larger version */
top: 68px;
z-index: 99;
}
/* Frequency and length of an episode. Added 06.09.07 by MN */
.video-row p.frequency-length {				
float: right;
padding-right: 10px;
padding-top: 5px;
}

/* top-border class is use with content-box if box has no content-box-hdr, like in Category homepage */
.top-border {
border-top: 1px solid #4a4a4a;
}
/* Container div housing text for the video, floated right of the video thumbnail in video-box, like in Category homepage */
.video-description {
float: left;
margin: 0 0 10px 0;
width: 350px;
}
.video-description p {
color: #ccc;
margin: 0 0 8px 0;
}
.video-description p.more-links {
margin: 0; /* this style to counter against default p.more-links settings above */
}

/* Video Scroll sub box within content-box and top-border version */
.video-scroll-box {
background-color: #393939;
color: #fff;
margin: 10px 0 6px 0;
padding: 4px;
width: 540px; /* width plus left and right padding is 548px, same as video-row */
}/* with ie6 hack */
/* Container duv to house each small video thumbnail and text in the video-scroll-box */
.video-box-thumbs {
float: left;
margin: 0 10px 0 0;
position: relative; /* as an anchor for the absolute play button below */
overflow: hidden;
width: 100px;
}
.last-video-box-thumbs { /* last video box with no margin right spacing */
margin-right: 0;
}
.video-box-thumbs img.play { /* smaller play button version, like in Category homepage */
left: 12px;
position: absolute;
top: 40px;
z-index: 99;
}
.video-box-thumbs p {
margin: 0;				
padding: 0;
}
.video-scroll-box a, .video-scroll-box a:hover {
font-weight: bold;
}
/* scroll bar, to scroll video thumbs left and right */
/*.video-scroll-bar { SCROLL BAR CURRENTLY NOT USED IN HTML
background-color: #666;
clear: both;
margin: 0 0 3px 0;
min-height: 10px;
padding: 0 5px;
}
.video-scroll-bar p {
font-family: arial, sans-serif;
font-size: 75%;
margin: 0;
padding: 0;
}
.video-scroll-bar p.right {
float: right;
}
.video-scroll-bar a {
background-color: #666;
color: #fff;
font-weight: bold;
}*/

/* Container for Previous Episodes Content Box, as seen on Showpage */
/* Also used on Archive Episodes */
.previous-episodes {
background-color: #393939;
margin: 0 0 15px 0;
width: 100%;
}
.previous-video { /* Container div to house each video thumb and text */
float: left;
margin-right: 8px;
padding: 5px;
width: 250px;
}/* with ie6 hack */
.previous-video-thumb { /* previous video thumb */
float: left;
margin: 0 5px 0 0;
position: relative;
}
.previous-episodes img.play, .previous-video img.play { /* smaller play button version, like in Category homepage */
left: 12px;
position: absolute;
top: 40px;
z-index: 99;
}
.previous-video-thumb-text { /* floated against video thumb image */
float: left;
margin: 0 0 12px 0;
width: 142px;
}
.previous-episodes p, .previous-video p {
color: #ccc;
margin: 0 0 2px 105px; /* margin left spacing to clear from the video thumb */
position: relative;
}
.previous-video p.show-title a, .previous-video p.show-title a:hover { /* show or franchise name as link */
color: #ccc;
font-weight: normal;
}
.previous-episodes p.more-links, .previous-video p.more-links {
clear: both;
margin: 0 0 3px 5px; /* no need for extra margin left spacing for bottom more archive text link */
}
.previous-video a, .previous-video a:hover {
font-weight: bold;
}

/* User Comments */
.comment { /* Container div to house user comment text and avatar */
border-bottom: 1px solid #4a4a4a;
clear: both;
margin: 0 0 15px 0;
padding: 0 0 15px 0;
}
.comment img { /* User Avatar Thumbnail */
float: left;
}
.comment p {
color: #ccc;
margin: 0 0 4px 45px; /* extra margin left here to create alignment against avatar thumb */
}
.comment p strong { /* user name text */
color: #fff;
}
/* Add comment form */
form.add-comment {				
margin: 0 0 10px 0;
}
form.add-comment label, form.add-comment textarea, form.add-comment input {
display: block;
margin: 0 0 8px 0;
}
form.add-comment label {
font-size: 70%;
font-weight: bold;
}
form.add-comment textarea {
width: 450px;
}

/* Search Results */
#search-results-title h1 strong { /* you search for tag in heading title */
color: #fff; /*#3cf;*/
}
#search-results-title p { /* number of search results text next to header */
color: #ccc;
float: left;
font-family: tahoma, verdana, sans-serif;
font-size: 70%;
font-weight: normal;
margin: 6px 0 0 10px;
}
/* Main Container div for Search Results, used in conjunction with previous-episodes class */
.search-results .previous-video { /* specific styles to counter default .previous-video class */
clear: both;
float: none;
margin-right: 8px;
padding: 5px;
width: auto;
}
.search-results ul.further-links { /* to counter default ul.further-links class */
clear: none;
margin: 0 0 10px 105px;
}
.search-results ul.further-links a, .search-results ul.further-links a:hover {
font-weight: normal;
}

/* Page Navigation or Pagination, such as on Search Results */
/* Page Navigation, such as page number links and page results */
.page-nav {
color: #ccc;
margin: 0 0 15px 0;
width: 100%;
}/* with ie6 hack */
.page-nav p {
float: left;
margin: 0;
padding: 0; 
width: 170px;
}
/* list of page numbers as links */
.page-nav ol {
float: right;
margin: -4px 0 0 0;
padding: 0;
text-align: center;
width: auto;
}/* with ie6 hack */
.page-nav ol li {
display: inline;
list-style: none;
margin: 0 1px 0 0;
padding: 0;
}
.page-nav ol li a, .page-nav ol li a:hover {
background-color: #000;
color: #ccc;
font-weight: bold;
}
.page-nav ol li.selected a, .page-nav ol li.selected a:hover {
background-color: #000;
color: #3cf;
text-decoration: underline;
}
.page-nav ol li span { /* span tag with the word Page to display when no CSS */
display: none;
}
.page-nav form { /* this is for the small input field on right to enter page number */
float: right;
margin: -3px 0 0 0;
padding: 0;
position: relative;
text-align: right;
width: 140px;
}
.page-nav label {
font-size: 70%;
}
.page-nav input {
height: 15px;
width: 27px;
}

/* Associated Links for this Video Paint */
ul.associated-links {
margin: 0;
padding: 0;
}
ul.associated-links li {
list-style: none;
margin: 0 0 8px 0;
padding: 0;
}
ul.associated-links li a, ul.associated-links li a:hover {
font-weight: bold;
}

/* Franchise video paint unit */
.video-row-paint {
overflow: hidden;
width: 314px;
}
.video-row-paint .video-box {
margin: 0 10px 10px 0;
}
.video-row-paint h2 {
overflow: hidden;
width: 135px;
}
.video-row-paint ul.further-links {
margin-top: -10px;
}
.video-row-paint .video-scroll-box {
margin: 0 0 6px 0;
width: 322px;
}
.video-row-paint .video-scroll-box .video-box-thumbs {
margin: 0 3px 0 0;
padding: 0;
}

/* My Playlist box with log in and register links */
ul.playlist {
margin: -5px 0 60px 0;
position: relative;				
}
ul.playlist li {
display: inline;
float: left;
list-style: none;
margin: 10px 0 5px 0;
}
ul.playlist li.avatar {		
margin: 0 5px 0 0;
padding-top: 0;
}
ul.playlist a, ul.playlist a:hover, ul.playlist li a {
font-weight: bold;
margin-right: 5px;
margin-left: 5px;
}
/* New design where log in detail floats right of avadar */
p.playlist {
float: right;
line-height: 36px;
text-align: left;
width: 270px;
}
ul.playlist li.avatar img {
border: 1px solid #999;
}
/* My Playlist Logged In version */
.playlist-logged-in { /* uses styles from previous-video class as seen on video archive page */
float: none;
margin: 0 0 6px 0;
padding: 0;
overflow: hidden;
width: 310px;
}/* with ie6 hack */

/* Tags box, aka tag cloud */
ul.tags {
margin: 0 0 15px 0;
padding: 0;
}
ul.tags li {
background-color: transparent;
color: #3cf;
display: inline;
list-style: none;
margin: 0 3px 5px 0;
padding: 0;
}
/* Setting tag cloud text sizes, no class is the smallest default size, the following five are extra */
ul.tags li.size1 {
font-size: 90%; /* this is 14px */
}
ul.tags li.size2 {
font-size: 100%; /* this is 16px */
}
ul.tags li.size3 {
font-size: 125%; /* this is 20px */
}
ul.tags li.size4 {
font-size: 150%; /* this is 24px */
}
ul.tags li.size5 {
font-size: 163%; /* this is 26px */
}
ul.tags li h4 {
background-color: transparent;
color: #999;
display: inline;
font-size: 100%;
font-weight: normal;
}
/* box containing list of tags, such as above video six pack on homepage */
ul.tag-link-box {
border: 1px solid #666;
font-weight: bold;
margin: 0 0 10px 0;
padding: 2px 25px 5px 25px;
text-align: center;
}
ul.tag-link-box li {
background-color: #000;
color: #999;
display: inline;
list-style: none;
margin: 0 10px 0 0;
padding: 0;
}

/* More footer text links inside content-boxes, such as the hot list or more tags etc */
ul.further-links {
clear: both;
margin: 0 0 10px 0;
padding: 0;
}
ul.further-links li {
background-image: url("/i/t/bul/arrow.gif");
background-repeat: no-repeat;
background-position: 1px 4px;
display: inline;
font-size: 65%;
list-style: none;
margin: 0 18px 0 0;
padding: 0 0 0 10px;
}
#secondary-content p.more-links { /* bottom more text link, when it is only one text link and not list of links as above */
background-image: url("/i/t/bul/arrow.gif");
background-repeat: no-repeat;
background-position: 1px 5px;
font-size: 65%;
margin: 0 18px 10px 0;
padding: 0 0 0 10px;
}
ul.further-links a, ul.further-links a:hover, #secondary-content p.more-links a, #secondary-content p.more-links a:hover {
color: #fff;/*#999; change made 06.09.07 by MN */
}

/* Bottom Footer Text Links Box version spanning full width, here after content-box style due to cascade */
.footer-links-box {
width: 890px;
}
.footer-links-box ul { /* each ul tag represents a column in the box */
float: left;
margin: 0 15px 5px 0;
overflow: hidden;
padding: 0;
width: 130px;
}
.footer-links-box li {
/*color: #ccc;*/
font-size: 65%;
line-height: 1.3em;
list-style: none;
margin: 0 0 1px 0;
padding: 0;
}
.footer-links-box li h4 { /* Sub headers for each column of footer links */
font-size: 100%; /* 100% sets it at 65%, due to cascade above for .footer-links-box li */
}
.footer-links-box li.space {
margin: 0 0 10px 0; /* class to create the bottom space in the same list column */
}
.footer-links-box a, .footer-links-box a:hover {
color: #ccc;
}

/* Privacy Policy and Terms Pages */
.privacy {
margin: 0 0 15px 0;
}
.privacy h2 { /* main headers in privacy policy */
color: #fff;
font-size: 75%;
margin: 0 0 5px 0;
padding: 0;
}
.privacy h3 { /* sub headers, such as Cookies */
color: #fff;
font-size: 70%;
line-height: 1.4em;
margin: 0;
padding: 0;
}
.privacy p, .privacy li {
color: #ccc;
}

/* RSS Feeds Page */
.rss-feeds h2 {
color: #fff;
font-size: 75%;
margin: 0 0 5px 0;
padding: 0;
}
.rss-feeds ul { /* list of rss feed links on RSS Page */
margin: 10px 0 25px 0;
padding: 0;
width: 660px
}
.rss-feeds ul li {
float: left;
list-style: none;
margin: 0;
padding: 0 0 6px 0;
width: 330px;
}
.rss-feeds ul li img {
margin: 0 5px 0 0;
vertical-align: middle;
}

/* ALL ADS AND SPONSOR RELATED CONTENT */
.leaderboard {
background-image: url("/i/t/tag/ad-vertical.gif");
background-repeat: no-repeat;
background-position: right top;
float: left; /* floating against the promo box */
height: auto;
margin: 0 -10px 0 10px; /* extra margin space due to bg ad tag graphic on the right of div */
position: relative;
width: 738px; /* 10px more in width from a leaderboard width due to above margin space */
}/* with ie6 hack */

#promo { /* container div for small promo graphic to the right of leaderboard */
float: right;
margin: 0 10px 0 0;
width: 170px;
}/* with ie6 hack */

/* Container div to house wider leaderboard for Skins, replacing leaderboard and promo divs */
.skin-leaderboard { /* this graphic is 940px and sits exactly in header-ads div, which is 940px wide and has 3px space to the left and right */
background-image: url("/i/t/tag/ad-horizontal.gif");
background-repeat: no-repeat;
margin-top: -10px; /*-11px;*/ /* to counter padding top in order to keep to the same top spacing */
overflow: hidden;
padding-top: 10px; /* padding top to create the space for the advertisement tag */
}

.mpu {
background-image: url("/i/t/tag/ad-vertical.gif"); /* doesnt display on Opera due to width of right col */
background-repeat: no-repeat;
background-position: right top;
height: auto;
margin: 0 -9px 15px 0; /*0 -9px 15px 0;*/ /* extra margin right space due to bg ad tag graphic on the right of div */
padding: 0 11px 0 0;
position: relative;
text-align: center;
width: 336px; /*345px*/ /* 9px more in width from a mpu width due to above margin right space */
}

/* Google Links, used in conjunction with content-box-hdr and content-box, therefore placed after these styles */
#primary-content .google-links {
background-image: url("/i/t/bg/box-google-570-top.jpg");
}
p.about-google-links { /* about text link */
float: right;
margin: 0 10px 0 0;
padding: 0;
}/* with ie6 hack */
p.about-google-links a, p.about-google-links a:hover {
color: #ccc;
font-weight: bold;
}
/* Selected backtab version */
.google-links ul li.selected a, .google-links ul li.selected a:hover, .google-links ul li.selected strong {
background-color: #9e9e9e;
color: #333;
}
.google-links ul li.selected span { /* to house the rounded borders on left and right */
background-image: url("/i/t/bg/tab-google-left.gif");
}
.google-links ul li.selected span.right {
background-image: url("/i/t/bg/tab-google-right.gif");
}
.google-link-vendor { /* Container for one vendor entry in Google Link Sponsor Box */
border-bottom: 1px solid #333;
margin: 0 0 5px 0;
padding: 0 0 5px 0;
}
.google-link-vendor h6 {
font-size: 70%;
margin: 0 0 1px 0;
}
.google-link-vendor p {
color: #999;
margin: 0 0 1px 0;
}
.google-link-vendor p.vendor {
color: #ccc;
font-size: 65%;
}
.google-link-vendor p.vendor a, .google-link-vendor p.vendor a:hover {
color: #ccc;
font-weight: bold;
}

/* MISC */
.clearfix:after {
content: ".";
display: block;
height: 0;
font-size: 0;
clear: both;
visibility: hidden;
}
.clear { /* alternative markup version in case clearfix does not work, such as the old br class clear tag */
clear: both;
}
/* Headers for key sections of the page such as main-nav and footer-links, and top of page link, displayed when no CSS */
h2.section-hdr, .top-page {
display: none;
}
p#transcriptExpand, #transcriptCollapse {
	margin-bottom: -15px;
	width: 125px;
	float: left;
	display: block;
	
}
p#transcriptExpand a, #transcriptCollapse a {
color: #ccc;
}
#transcriptCollapse {
	margin-bottom: 0;
}
#transcript {
	border: 1px solid #999;
	padding: 5px 15px 5px 5px;
	margin: 30px 0 5px 0;
	height: 200px;
	overflow: auto;
}
#transcript, #transcriptCollapse {
display: none;
}