@charset "utf-8";
/* CSS Document - Supported customizations are listed below with instructions on what each rule affects in the portal. If you want to make changes to CSS rules other than those specified below, please enter them in the Custom CSS Rules sectin at the bottom of this document. Please note that Custom CSS Rule changes may not be support by future portal interface upgrades. */

/* Background gradient: Select a background color and background image. The background image is set to repeat horizantally. */
body {
	background-color: #808080;
	background-image: none !important;
}

/* Homepage Branding */

/* Home button background color and border color */
#home-nav {
    background-color: #212121;
    border-bottom: 1px solid #3C3C3C;
    border-top: 1px solid #3C3C3C;
}

/* Home navigation image (sprite) for the home button */
#home-nav li a {
    background-image: url('http://media.azpm.org/cove/i/main-nav-bg-sprite-final-AZPM.gif');
}

#home-nav li a:hover {
	background-image: url('http://media.azpm.org/cove/i/main-nav-bg-sprite-final-AZPM.gif');
}

/* Programs, Topics, Collections menu item background color and border color */
/* The border color must match the border color found in #home-nav */
#mainnav {
    background-color: #212121;
    border-top: 1px solid #3C3C3C;
    border-bottom: 1px solid #3C3C3C;
}

/* 2px width divider image */
#mainnav li.divider-nav {
    background-image: url('http://media.azpm.org/cove/i/main-nav-bg-sprite-final-AZPM.gif');
}

/* Drop-down menu navigation background image (sprite) */
#mainnav li.programs-nav a.dropdown, #mainnav li.topics-nav a.dropdown, #mainnav li.collections-nav a.dropdown {
    background-image: url('http://media.azpm.org/cove/i/main-nav-bg-sprite-final-AZPM.gif');
}

/* Sub-nav menu link color */
#mainnav li a {
    color: #FFF;
}

/* Sub-nav background color and border color */
#mainnav li ul.subnav {
    background: #0F3656;
    border: 1px solid #091b27;
}

/* Navigation and footer search input field background color, border color and font color */
li.form form input{
    background-color: #FFFFFF;
    border: 1px solid #595959;
    color: #999999;
}

/* Navigation and footer search button background image (sprite) and font color) */
li.form .search-submit {
    background-image: url('http://media.azpm.org/cove/i/main-nav-bg-sprite-final-AZPM.gif');
	color: white !important; 
	font-weight: bold;
}

/* Navigation and footer search button hover color */
li.form .search-submit:hover {
	padding-top: 4px !important;
    padding-left: 11px !important;
    color: white !important; 
}


/* Change the background color of the Most Watched and Most Emailed backgrounds here. Replace #HEXCOLOR with valid alphanumeric code See Branding Guide for more info. */
#related div.leftcol, #related div.rightcol{
    background: #fff;
}

/* Change the background of the thumbnail rollover box and border. Replace #HEXCOLOR with valid alphanumeric code or image. See Branding Guide for more info. */
 #related div.leftcol .video-list li.hover .details-hover {
    background: #HEXCOLOR;
	border: 1px solid #HEXCOLOR;
}

/* Link color for Most Watched and Most Emailed */
#related div.leftcol .video-list li .details .title a, #related div.leftcol .video-list li .details .description a, #related div.rightcol .video-list li a {
    color: #1B75BB;
}

/* Text color for Most Watched and Most Emailed labels */
#related div.leftcol h3, #related div.rightcol h3 {
    color:#000;
}


/*Site Enhancements*/

/* Change the color of bars (There are 3 rules to change the bar colors site-wide) */

/* 1. For the Learn more background color: */
#learn h3{
    background: #000;
}

/* 2. For the Related Video background color: */
#pagecontrols h3 {
    background: #000;
}

/* 3. For the Filter Results By box header background color:*/
#result div.leftcol div.box h5{
    background: #000;
}

/* Match the RSS Icon to your bars by customizing these two rules. The first rule set loads the custom sprite and determines the color of the "Subscribe" text. If you change the background colors of your bars from the default, enter a new path to your custom rss sprite. The second rule set determines the rollover color of the "Subscribe" text. */
div#rss-subscribe a {
    background-image: url('http://www-tc.pbs.org/video/media/images/rss-icon-sprite.gif');
    color:#B6B6B6;
}

div#rss-subscribe a:hover {
    color: #HEXCOLOR;
}


/* This section applies exclusively to branding the iframe, or embeddable, player. Most of the iframe is already customized via the rules above. */

/* This rule will change the background color of your iframe player program list header row. */ 
#iframe #title h2{
    background-color: #000;
}

/****************************************************************************************************************************************************/
/* Custom CSS Rules - Please note that changes to any rules, other than to those above, may not be fully supported during user experience upgrades. */
/****************************************************************************************************************************************************/

/* Remove the gradient from behind the stacks */

div#maincontent {
    background-image: none !important;
    background: #212121;
	margin-top: 5px;
}

/* give the container the same BG as the main azpm site container, and pad it to be the same width */

div#container {
	padding-left:25px;
	padding-right:25px;
	background: #cbcbcb;
}

/* scale the header to be 1000px wide, like the rest of our site */

div#header{
	height: 109px;
    width:1000px;
    margin-left: -25px;
}

/* scale the header image to 1000px x 71px height so it matches the rest of our site */

div#header img{
	width: 1000px;
	height: 71px;
}

/* scale the navs to fill the new 1000px header */

div#header ul#home-nav{
    width: 110px;
}

div#header ul#mainnav{
    width: 890px;
}

/* change the 3 nav dropdown colors to be gray, not blue */

li.programs-nav .subnav{
    background: #222 !important;
    border-color: #fff !important;
}

li.topics-nav .subnav{
    background: #222 !important;
    border-color: #fff !important;
}

li.collections-nav .subnav{
    background: #222 !important;
    border-color: #fff !important;
}

/* hide the monetization text and fudge margins to fit the full ad in a 71px high space */

div#monetization{
    margin-top: 5px;
    margin-right: -3px;
}

div#monetization p{
	display: none;
    font-size: 9px;;
    margin-bottom:-2px;
    margin-top:-2px;
}

div#monetization img{
	width: 300px !important;
	height: 60px !important;
}

/* change the program details hover div away from baby blue */

div.details-hover{
    background: #ddd !important;
    background-image: none !important;
    border-color: #888 !important;
}

/* change the alt colors of the most watched videos to gray from blue */

div#most-watched-videos ul li.alt-one{
    background: #ddd !important;
}

div#most-watched-videos ul li.alt-two{
    background: #eee !important;
}

/* boxtop the h3 in the most watched box with the red bg (strangely uses recently-added id) */

div#recently-added-videos h3{
    display:block;
    background-color: #bb6362;
    color: white !important;
    height: 22px;
    width: 622px !important;
    margin-top: -15px;
    padding-top: 10px;
    padding-left: 10px !important;
    margin-left: -15px !important;
    font-family: helvetica, verdana, arial, sans-serif;
}

/* boxtop the h3 in the most emailed box with the blue bg (strangely uses most-watched id)*/

div#most-watched-videos h3{
    display:block;
    background-color: #628CB9;
    color: white !important;
    height: 22px;
    width: 305px !important;
    margin-top: -15px;
    padding-top: 10px;
    padding-left: 10px !important;
    margin-left: -8px !important;
    font-family: helvetica,verdana, arial, sans-serif;
}

/* fix search results footer color */
div#pagecontrolsbottom{
    background: #eee
}

/* fix show episode bg */

div#videoresults {
    background:#cccccc;
}