/*---------------------------------------------------------------------------------------
  
                        Website: NewsPlayer v2
                        Author: Bitmedia
                        Created: January 2009
  
---------------------------------------------------------------------------------------*/


/*
    Basics
    Typography
    Layout
    Content
    Page Groups
    Navigation
    Form Styles
    Misc
*/



/*---------------------------------------------------------------------------------------
   Basics
---------------------------------------------------------------------------------------*/

/* Default and Common CSS styles */
@import "default.css"; /* Contains default styles */
@import "common.css"; /* Contains commonly used styling */


/* Body */
body	{ background: url('../images/bg.png') repeat-x #dfdfdf;}
body.novid { background: url('../images/bg-novid.png') repeat-x #dfdfdf;}

/*---------------------------------------------------------------------------------------
   Typography
---------------------------------------------------------------------------------------*/

/* Links */
a:link { }
a:visited {}
a:hover {}

/* Base Type */
body { font: 62.5% arial, tahoma, arial, helvetica;}
#header, #vidArea, #navBar, #pageBody, #footer { font-size: 1.2em; line-height: 1.4em; text-align: left;}
p { margin-bottom: 1.4em;}

/* Headers */
#vidAbstract h1 { padding: 10px 0 10px 30px; margin-bottom: 5px; font-size: 1.5em; font-weight: bold; background: url('../images/icon-abstract.png') no-repeat center left; margin-left: -30px; color: #000;}
#mainCol h1, #mainCol h3 { font-size: 1.5em; font-weight: bold; color: #4a5157; line-height: 1.5em;}
#mainCol h1 { border-bottom: 1px solid #b6b8b7; padding-bottom: 3px; margin-bottom: .7em;}


/*---------------------------------------------------------------------------------------
   Layout 
---------------------------------------------------------------------------------------*/

/* Container */
#header, #vidArea, #navBar, #pageBody, #footer { width: 965px; margin: 0 auto; overflow: hidden;}
#vidAreaContainer { background: url('../images/vidcontainer.png') repeat-x top left;}
body.novid #vidAreaContainer { width: 100%; background: url('../images/bg-novid-vidcontainer.png') repeat-x #5ac2df; margin-bottom: 25px; min-height: 30px; height: auto;}
	* html body.novid #vidAreaContainer { height: 30px;}
#contentContainer { width: 100%; background: #fff;}

/* Tagline */
body.homePage #taglineContainer { display: block; width: 100%; height: 28px; background: url('../images/bg-tagline.png') repeat-x;}
#taglineContainer { display: none;}

/* Header */
#header { }
#logo { float: left;}

/* VidArea */
#vidArea { }

/* PageBody */
#pageBody { padding-bottom: 45px;}
#mainCol { float: left; width: 609px; padding: 20px 0 0 10px;}
#sideCol { float: right; width: 302px;}

/* footer */
#footerContainer { width: 100%; background: #dfdfdf;}
#footer { padding: 15px 0;}

/*---------------------------------------------------------------------------------------
   Content 
---------------------------------------------------------------------------------------*/
/* Header */

/* Vid Area */
#vid { width: 496px; height: 367px; float: left; margin-top: 19px; padding: 7px 0 0 10px; background: url('../images/video.png') no-repeat;}
#vidAbstract { float: left; width: 375px; /*height: 170px;*/ height: 325px; padding: 0 20px 0 45px;  margin-top: 28px; color: #333; overflow: auto;}
/*#vidAbstract { float: left; width: 225px; height: 336px; padding: 28px 20px 0 10px; background: url('../images/vidAbstractDiv.png') no-repeat top right;}*/
body.novid #vidAbstract { width: 700px; min-height: 220px; height: auto;  padding-bottom: 15px;}
* html body.novid #vidAbstract { height: 220px;}
#vidErrorMessage { padding-top: 50px; text-align: center;}
#flowplayerSplash { display:block;width:479px;height:368px; }
a#player { cursor: pointer;}

/* PageBody */
#watchedCol { float: left; width: 148px;}
#ratedCol { float: left; width: 148px; padding-left: 68px;}
#recentCol { float: left; width: 148px; padding-left: 68px;}

/* SideCol */
#newsletter { margin: 20px 0 0 2px;}
#newsletter a { display: block; width: 299px; height: 72px; background: url('../images/newsSignup.jpg') no-repeat; text-indent: -9999px; outline: 0;}
#newsletter a:hover { background-position: top right;}

.boxAdvert{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px;}
.platformA300x250{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px; height: 250px; width: 300px; background: url('../images/300x250-adHolder.png') no-repeat;}
.platformA120x600{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px; height: 600px; width: 120px;}
.platformA300x60{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px; height: 60px; width: 300px;}
.platformA468x60{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px; height: 60px; width: 468px;}
.platformA728x90{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px; height: 90px; width: 728px;}
.platformA160x600{ color: #5cbedd; font-size: .9em; text-align: center; margin-top: 15px; height: 600px; width: 160px;}

#sideColLogos { margin-top: 30px;}
#sideCol h4 { color:#4A5157; padding: 0 0 0 10px; margin-bottom: 10px; font-size:1.5em; font-weight:bold; line-height:1.5em; border-bottom: 1px solid;}
#sideColLinks, #vidTags { margin-top: 30px;}
#sideColLinks ul, #vidTags ul {  list-style: none; margin: 0; padding: 0 0 0 10px;}
#sideColLinks ul li, #vidTags ul li { margin: 0; padding: 0 0 5px 10px; background: url('../images/dot.png') no-repeat 0 5px; line-height: 1.2em;}
#sideColLinks ul li a, #vidTags ul li a { color: #333; text-decoration: none;}
#sideColLinks ul li a:hover, #vidTags ul li a:hover { color: #20a3c1}

/* footer */
#copyright { float: right; color: #6B6B6B; font-size: .9em;}
#footerLogos { float: right; padding-top: 10px; width: 300px;}

/*---------------------------------------------------------------------------------------
   Page Groups (includes typography for groups)
---------------------------------------------------------------------------------------*/
/* Related Videos */

#vidRelated { float: left; width: 425px; padding: 0 0 0 15px; margin-top: 25px; height: 130px; overflow: auto; display: none;}
/*#vidRelated { float: left; width: 170px; padding: 25px 0 0 15px;}*/
#vidRelated h3 { padding: 10px 0 10px 30px; margin-bottom: 5px; font-size: 1.5em; font-weight: bold; background: url('../images/icon-related.png') no-repeat center left;}
#vidRelated ul { list-style: none; margin: 0; padding: 0 0 0 10px; overflow: hidden;}
#vidRelated ul li { background: url('../images/icon-arrow-light.png') no-repeat 0 5px; padding: 0 5px 5px 15px;}
#vidRelated ul li a { color: #000; text-decoration: none; padding: 1px 2px; }
#vidRelated ul li a:hover { background: #fff;}


/*#vidRelated ul { list-style: none; margin: 0; padding: 0;}
#vidRelated ul li { background: url('../images/icon-arrow.png') no-repeat 0 5px; padding: 0 0 5px 20px;}
#vidRelated ul li a { color: #000; text-decoration: none; padding: 1px 2px;}
#vidRelated ul li a:hover { background: #fff;}
*/

/* Video Tags */
#vidTags {  width: 100%; margin-top: 30px; }
#vidTags h3 { width: 238px; padding: 0 0 0 60px; height: 43px; line-height: 43px; margin-bottom: 5px; font-size: 1.7em; font-weight: bold; background: url('../images/bg-vidtags.png') no-repeat center left transparent; color: #fff;}
#vidTags ul { list-style: none; margin: 0 0 0 20px; padding: 0;}
#vidTags ul li { background: url('../images/icon-arrow-dark.png') no-repeat 0 5px; padding: 0 0 5px 20px;}
#vidTags ul li a { color: #000; text-decoration: none; padding: 1px 2px;}
#vidTags ul li a:hover { background: #29a3ba;}

/* Video Column Pg */
.vidPg { min-height: 170px; height: auto;}
* html .vidPg { height: 170px;}
.vidPgImg { margin-top: 20px; position: relative;}
.vidPgImg a img { border: 6px solid #59c1de;}
  .vidPgImg a:hover img { }
.vidPgImg a span { display: none; position: absolute; top: 37px; left: 60px; background: url('../images/orangeBoxArrow.png') no-repeat; width: 22px; height: 22px; cursor: pointer;}
  .vidPgImg a:hover span { display: block;}
.vidPgHeader { margin-top: 10px;}
.vidPgHeader a { font-weight: bold; font-size: 1.1em; color: #20a3c1; text-decoration: none;}
  .vidPgHeader a:hover { color: #d58c3d;}
.vidPgAbstract { margin-top: .1em;}
.vidPgViewed { margin-top: .7em;}
.vidPgComments a { color: #000;}
  .vidPgComments a:hover  { color: #d58c3d;}
.vidPgRating { margin-top: .7em;}

/* Channels Pg */
#channelsPg h3 { font-size: 1em;}
#channelsPg h3 a { text-decoration: none; color: #4A5157;}
#channelsPg h3 a:hover { color: #20A3C1;}

#channelsPg .vidPg { float: left; margin-right: 24px; padding-bottom: 10px; width: 175px;}
#channelsPg .vidPgImg { margin-top: 5px;}
#channelsPg {}
#channelsPg {}
#channelsPg {}

/* Comments */
#comments { overflow: hidden; margin-top: 40px;}
.commentOutput, .commentOutputAlt { float: left; width: 597px; padding: 5px; background: #f5f5f5; border: 1px solid #dde7ea; margin-top: 10px;}
.commentOutputAlt { background: #fff;}
.comHead { float: left; font-weight: bold; font-size: 1.2em; color: #4a5157;}
.comInfo { float: right; color: #24a4c1; font-weight: bold;}
.comInfo a { color: #24a4c1; background: url('../images/icon-comments.png') no-repeat center left; padding: 0 0 0 20px;}
.comInfo a:hover { color: #4a5157;}
.comAbstract {float: left; margin-top: 10px; width: 100%;}

/* Comment Form is located in the FORMS section */

/* Captcha */
#recaptcha { background: #f9f7f7; border: 1px solid #bbb; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; width: 303px; overflow: auto; padding:6px; margin-top: 10px; font-size: .9em;}
#recaptcha div { width: 20px; float: left; margin-top: 10px;}
#recaptcha div#recaptcha_image {  width: 300px; height: 57px; border: 1px solid #ddd; display: block; float: none; margin-bottom: 5px; margin-top: 0;}
#recaptcha input#recaptcha_response_field { width: 292px; margin-top: 5px; border: 1px solid #bbb; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 2px 3px;}


/* Search Results */
#searchResults { overflow: hidden;}
.sr { float: left; margin: 15px 0 40px 0;}
.srImage {float: left; position: relative;}
.srImage img { border: 6px solid #59C1DE;}
.srImage a { }
.srImage a span { display: none; position: absolute; top: 37px; left: 60px; background: url('../images/orangeBoxArrow.png') no-repeat; width: 22px; height: 22px; cursor: pointer;}
  .srImage a:hover span { display: block; }
  
.srImage img.nothumb { border: 0;}

.srHeader { margin: 2px 0 0 15px; float: left; width: 430px;}
.srHeader a { font-weight: bold; font-size: 1.1em; color: #20a3c1; text-decoration: none;}
.srHeader a:hover { color: #d58c3d;}
.srAbstract { float: left; margin: 5px 0 0 15px; width: 430px;}
.srAbstract p { margin-bottom: 5px;}

/* ratings control */
#pnlStats { padding: 5px 10px; background: #f1f1f1; width: 587px; border: 1px solid #ddd; overflow: hidden; margin-top: 15px;}
.ratingsControl { float: left; width: 220px;}
.ratingsControl .ratingsTitle { float: left; margin: 2px 5px 0 0;}
.ratingsControl a { margin-left: 5px; background: #f9f7f7; border: 1px solid #dadada; padding: 1px 2px; float: left; color: #acabab; text-decoration: none;}
.ratingsControl a:hover { border: 1px solid #999; color: #333;}
#ctl09_ratRatings a{ border: 0; margin-left: 0; outline: 0; background: #fff; margin-top: 2px;}

.ratingsControl a { border: 0; background: none;}
.ratingsControl a:hover { border: 0;}
.ratingNotification { width: 218px; padding: 2px 0; border: 1px solid #eaedf0; margin-top: 10px; text-align: center; background: #f3f4f6; float: left; color: #333;}


.pageStats { float: right; width: auto; margin-top: 2px;}
.pageStats .viewsTitle { float: left;}
.pageStats .views { float: left; margin-left: 2px;}
.pageStats .votesTitle { float: left; margin-left: 15px;}
.pageStats .votes { float: left; margin-left: 2px;}
.pageStats .ratingsTitle { float: left; margin-left: 15px;}
.pageStats .ratings { float: left; margin-left: 5px;}

.ratingStar { font-size: 0pt; width: 15px; height: 15px; margin: 0px; padding: 0px; cursor: pointer; display: block; background-repeat: no-repeat; }
.filledRatingStar { background-image: url(../images/FilledStar.png);}
.emptyRatingStar { background-image: url(../images/EmptyStar.png); }
.savedRatingStar { background-image: url(../images/SavedStar.png); }

/*---------------------------------------------------------------------------------------
   Navigation
---------------------------------------------------------------------------------------*/

/* Top Nav */
ul#topNav { float: right; margin: 0; padding: 5px 0 0; list-style: none;}
ul#topNav li { margin: 0; padding: 0; display: inline; float: left; background: url('../images/topnavdiv.png') no-repeat center right;}
ul#topNav li.last { background: none;}
ul#topNav li a { margin: 0 10px; color: #424b52; text-decoration: none;}
ul#topNav li#loginFacebook a { background: url('../images/icon-facebook.png') no-repeat; padding-left: 20px;}
ul#topNav li a.loginFacebook { background: url('../images/icon-facebook.png') no-repeat; padding-left: 20px;}
ul#topNav li a:hover { text-decoration: underline;}
ul#topNav li a.currentPage { font-weight: bold; text-decoration: underline;}

/* Main Nav Container */
#navBar {display:inline-block; overflow:visible;}
#navBar:after {content: ""; display: block; height: 0; clear: both; visibility: hidden;}

/* Main Nav */
ul.rmRootGroup { float: left; margin: 0; padding: 0 2px 0 0 !important; list-style: none; background: url('../images/navDiv.png') no-repeat top right;}
ul.rmRootGroup li { float: left; display: inline; margin: 0; padding: 0 0 0 2px; background: url('../images/navDiv.png') no-repeat top left;}
ul.rmRootGroup li a { float: left; display: block; padding: 5px 15px; background: url('../images/navBg.png') no-repeat transparent; color: #fff; text-decoration: none; font-weight: bold; cursor: pointer !important;}
ul.rmRootGroup li a:hover { background-position: top right !important;}
ul.rmRootGroup li a.currentPage { background-position: top right !important;}

/* Main Nav DropDown */
.navContainer1 /* Channels */,
.navContainer2 /*Collections */,
.navContainer3 /* features */,
.navContainer4 /* AP News */,
.navContainer5 /* Documentaries */,
.navContainer6 /* Music Videos */
{ overflow: hidden; background: url('../images/subnavBg.png') repeat-x #485156; padding: 10px 0 5px; width: 595px; }

.navContainer1 ul,
.navContainer2 ul,
.navContainer3 ul,
.navContainer4 ul,
.navContainer5 ul,
.navContainer6 ul
{ margin: 0; padding: 0;}

ul.rmLevel1 li { background: none /* removes from rootgroup */;}
.navCol0, .navCol1, .navCol2, .navCol3, .navCol4, .navCol5, .navCol6  { float: left; width: 124px; margin: 0 7px; padding: 0 5px 5px;}
	* html .navCol0, * html .navCol1, * html .navCol2, * html .navCol3, * html .navCol4, * html .navCol5, * html .navCol6 { display: inline;}
.navCol0 ul, .navCol1 ul, .navCol2 ul, .navCol3 ul, .navCol4 ul, .navCol5 ul, .navCol6 ul { list-style: none; margin: 0; padding: 0;}
.navCol0 ul li, .navCol1 ul li, .navCol2 ul li, .navCol3 ul li, .navCol4 ul li, .navCol5 ul li, .navCol6 ul li { width: 100%; border-bottom: 1px solid #9ba2a8; background: none /*removes from rootgroup */;}
.navCol0 ul li.last, .navCol1 ul li.last, .navCol2 ul li.last, .navCol3 ul li.last, .navCol4 ul li.last, .navCol5 ul li.last, .navCol6 ul li.last { border-bottom: 0;}
.navCol0 ul li a, .navCol1 ul li a, .navCol2 ul li a, .navCol3 ul li a, .navCol4 ul li a, .navCol5 ul li a, .navCol6 ul li a { color: #fff; text-decoration: none; width: 100%; margin: 2px 0; padding: 0 /*removes from rootgroup */; font-weight:normal /*removes from rootgroup */; background: transparent /*removes from rootgroup */; display: block /*reset from rootgroup */;}
.navCol0 ul li a:hover, .navCol1 ul li a:hover, .navCol2 ul li a:hover, .navCol3 ul li a:hover, .navCol4 ul li a:hover, .navCol5 ul li a:hover, .navCol6 ul li a:hover { color: #d58c3d}

/* CHANNELS */
/* NavContainer Width - will need adjusting if you change the navCol widths */
.navContainer1 { width: 425px;} /* Combine total width of navCols above and add 105px (based on 4 columns) */
/* Navcol widths */
.navContainer1 .navCol0 { width: 60px;}
.navContainer1 .navCol1 { width: 115px;}
.navContainer1 .navCol2 { width: 80px;}
.navContainer1 .navCol3 { width: 65px;}

/* COLLECTIONS */
/* NavContainer Width - will need adjusting if you change the navCol widths */
.navContainer2 { width: 410px;} /* Combine total width of navCols above and add 105px (based on 4 columns) */
/* Navcol widths */
.navContainer2 .navCol0 { width: 80px;}
.navContainer2 .navCol1 { width: 80px;}
.navContainer2 .navCol2 { width: 80px;}
.navContainer2 .navCol3 { width: 65px;}

/* FEATURES */
/* NavContainer Width - will need adjusting if you change the navCol widths */
.navContainer3 { width: 440px;} /* Combine total width of navCols above and add 105px (based on 4 columns) */
/* Navcol widths */
.navContainer3 .navCol0 { width: 85px;}
.navContainer3 .navCol1 { width: 105px;}
.navContainer3 .navCol2 { width: 80px;}
.navContainer3 .navCol3 { width: 65px;}

/* AP News */
/* NavContainer Width - will need adjusting if you change the navCol widths */
.navContainer4 { width: 305px;} /* Combine total width of navCols above and add 105px (based on 4 columns) */
/* Navcol widths */
.navContainer4 .navCol0 { width: 50px;}
.navContainer4 .navCol1 { width: 50px;}
.navContainer4 .navCol2 { width: 50px;}
.navContainer4 .navCol3 { width: 50px;}

/* DOCUMENTARIES */
/* NavContainer Width - will need adjusting if you change the navCol widths */
.navContainer5 { width: 555px;} /* Combine total width of navCols above and add 105px (based on 4 columns) */
/* Navcol widths */
.navContainer5 .navCol0 { width: 120px;}
.navContainer5 .navCol1 { width: 105px;}
.navContainer5 .navCol2 { width: 90px;}
.navContainer5 .navCol3 { width: 135px;}

/* MUSIC VIDEOS */
/* NavContainer Width - will need adjusting if you change the navCol widths */
.navContainer6 { width: 345px;} /* Combine total width of navCols above and add 105px (based on 4 columns) */
/* Navcol widths */
.navContainer6 .navCol0 { width: 45px;}
.navContainer6 .navCol1 { width: 95px;}
.navContainer6 .navCol2 { width: 45px;}
.navContainer6 .navCol3 { width: 55px;}

/*

/* Minor Nav */
#footerMain { width: 40%; float: left;}
#footerSide { float: left;}
.footerHead { color: #666; font-weight: bold;}
.footerCol { float: left; margin-right: 30px;}
ul.minorNav { margin: 0; padding: 0; list-style: none;}
ul.minorNav li { margin: 0; padding: 0;}
ul.minorNav li a { color: #6b6b6b; text-decoration: none; font-size: .9em;}
ul.minorNav li a:hover { text-decoration: underline; color: #000;}
ul.minorNav li a.currentPage { font-weight: bold; color: #000; text-decoration: none;}



/*---------------------------------------------------------------------------------------
   Forms
---------------------------------------------------------------------------------------*/


/* Search */
#search { float: right; height: 27px; padding-left: 10px;}
#search .input { width: 215px; padding: 3px 4px; float: left; background: url('../images/searchInput.png') no-repeat; border: 0; margin-top: 4px; vertical-align: top; font-size: .9em; letter-spacing: 1px;}
#search .submit { margin: 0; padding: 0; width: 86px; height: 27px; float: left; background: url('../images/searchButton.png') no-repeat; text-indent: -9999px; outline: 0;}
#search .submit:hover { background-position: top right;}
#navAdvSearch { float: left; display: block; width: 130px; height: 27px; background: url('../images/navAdvSearch.png') no-repeat; text-indent: -9999px; outline: 0;}
#navAdvSearch:hover {background-position: top right;}

/* Comments Form */
#CommentButton .submit { display: block; width: 75px; height: 27px; margin-top: 10px;line-height: 27px; text-align: center; background: url('../images/submit.png') no-repeat; color: #000; text-decoration: none;}
#CommentButton .submit:hover { background-position: top right;}
#CommentInput { margin-top: 10px;}
#commentTitleTitle { margin-top: 10px;}
#CommentInput .input {  border-color:#bbb #dadada #dadada #bbb; border-style:solid; border-width:1px; padding:3px; background: #f9f7f7; width: 300px;}
#CommentInput .textarea { border-color:#bbb #dadada #dadada #bbb; border-style:solid; border-width:1px; padding:3px; background: #f9f7f7; width: 599px;}

/* Register Form */
#registerForm input.input { width: 250px;}

/* ContactForm */
#contactForm input.submit { background: url('../images/submit-blue.png') no-repeat;}
#contactForm input.submit:hover { background-position: top right;}

/* LoginForm */
#loginForm input.input { width: 250px;}


/*---------------------------------------------------------------------------------------
   Misc.
---------------------------------------------------------------------------------------*/

/* Error Page */
body.errorPage { text-align: center; background: url('../images/plainbg.png') repeat-x;}
body.errorPage #logo { float: none;}
body.errorPage p { margin-top: 50px; font-size: 14px;}

/* Backlink */
.backLink { margin: 15px 0; background: url('../images/icon-arrow-light.png') no-repeat 0 4px; padding:0 0 5px 20px; width: 589px; float: left;} 
.backLink a { color: #000; padding: 2px 3px; text-decoration: none;}
.backLink a:hover { background: #fff;}

/* Backlink in maincolumn */
#mainCol .backLink { background: url('../images/icon-arrow-dark.png') no-repeat 0 4px;} 
#mainCol .backLink a:hover { background: #59c1de; color: #fff;}

/* Paging */
.paging { padding: 5px 10px; background: #f1f1f1; float: left; width: 587px; border: 1px solid #ddd;}
.paging span { float: left; padding-top: 5px;}
.paging .submit { float: right; background: url('../images/submit-paging.png') no-repeat !important;}

.thumbnailImageSelect { padding: 5px; }
.noImageBorder {border: solid 1px gray; width: 138px; height: 80px; }

/* Clip Management */
#UpdatePanel1 { background: #f1f1f1; border: 1px solid #dddddd; padding: 20px; margin: 25px 0 50px;}