/*------- =ProgrammePage Layout -------

/*------- =Header ------- */

#programmeImage {
    padding: 5px;
    float: left;
    text-align: center;
    vertical-align: middle;
    width: 180px;
    height: 120px;
    display: block;
    border: solid 1px #CCC;
    background-color: #EEE;
    }

#detailWrapper {float: left; width: 32em;}

#detailWrapper h1 {
    margin-bottom: 10px;
    padding-right: 2em;
    border: none;
	color: #FFF;
	text-transform: uppercase;
	font-size: 1.3em;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: normal;
	background-color: #B4B4B4;
    }
    
#detailWrapper ul {margin: 0 10px; margin-bottom: 3px; /*border: solid 1px orange;*/}

#detailWrapper ul li {padding-right: 22px; float: left; /*border: solid 1px orange;*/}
        
#detailWrapper p,
#detailWrapper p.genreNoFloat {
    padding: 0 20px 0 10px;
    margin: 0;
    float: left;
    line-height: 1.6em;
    }
    
#detailWrapper p.genreNoFloat {float: none;}

/*------- =tabMenu ------- */

#tabmenu {margin: 11px 5px 0 5px; width: auto;} 

#tabmenu .tabs {height: 2em;}

.tabs li {
    float: left;
    background-color: #CCC;
    border: 1px solid #DDD;
    border-bottom: none;
    border-right: none;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.1em;
    }

.tabs li a {display: block; width: 9.5em;}
    
.tabs li a:link,
.tabs li a:visited,
.tabs li a:hover,
.tabs li a:active {
    padding: 3px 6px;
    color: #555;
    border: 1px solid #DDD;
    border-bottom: none;
    border-right: none;
    }

.tabs li a:hover,
.tabs .on a:link,
.tabs .on a:visited,
.tabs .on a:hover,
.tabs .on a:active {    
    color: #FFF;
    border-top-color: #FFF;
    border-right: none;
    border-bottom-color: #FFF;
   }
   
/*The following styles apply a genre colour to the tabs on hover and on*/
/*Children's*/
.childrens .tabs .on a:link,
.childrens .tabs .on a:visited,
.childrens .tabs .on a:hover,
.childrens .tabs .on a:active,
.childrens .tabs li a:hover {
    background-image: url(../images/FadedTab_Childrens.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #FE9D1A;*/
    }
/*Comedy*/
.comedy .tabs .on a:link,
.comedy .tabs .on a:visited,
.comedy .tabs .on a:hover,
.comedy .tabs .on a:active,
.comedy .tabs li a:hover {
    background-image: url(../images/FadedTab_Comedy.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #830A2B;*/
    }
/*Current Affairs & Documentaries*/
.currentAffairs .tabs .on a:link,
.currentAffairs .tabs .on a:visited,
.currentAffairs .tabs .on a:hover,
.currentAffairs .tabs .on a:active,
.currentAffairs .tabs li a:hover {
    background-image: url(../images/FadedTab_currentAffairs.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #DF5623;*/
    }
/*Drama*/   
.drama .tabs .on a:link,
.drama .tabs .on a:visited,
.drama .tabs .on a:hover,
.drama .tabs .on a:active,
.drama .tabs li a:hover {
    background-image: url(../images/FadedTab_Drama.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #BD282E;*/
    }
/*Factual Entertainment & Leisure*/
.leisure .tabs .on a:link,
.leisure .tabs .on a:visited,
.leisure .tabs .on a:hover,
.leisure .tabs .on a:active,
.leisure .tabs li a:hover {
    background-image: url(../images/FadedTab_Leisure.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #C74D9E;*/
    }
/*History*/
.history .tabs .on a:link,
.history .tabs .on a:visited,
.history .tabs .on a:hover,
.history .tabs .on a:active,
.history .tabs li a:hover {
    background-image: url(../images/FadedTab_History.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #308D82;*/
    }    
/*Music*/    
.music .tabs .on a:link,
.music .tabs .on a:visited,
.music .tabs .on a:hover,
.music .tabs .on a:active,
.music .tabs li a:hover {
    background-image: url(../images/FadedTab_Music.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #712B7E;*/
    }
/*Natural History*/       
.naturalHistory .tabs .on a:link,
.naturalHistory .tabs .on a:visited,
.naturalHistory .tabs .on a:hover,
.naturalHistory .tabs .on a:active,
.naturalHistory .tabs li a:hover {
    background-image: url(../images/FadedTab_NaturalHistory.png);
    background-repeat: repeat-y;
    background-position: left top;
   /* background-color: #A1B13A;*/
    } 
/*Science*/    
.science .tabs .on a:link,
.science .tabs .on a:visited,
.science .tabs .on a:hover,
.science .tabs .on a:active,
.science .tabs li a:hover {
    background-image: url(../images/FadedTab_Science.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #333489;*/ 
    }   
/*Formats*/
.formats .tabs .on a:link,
.formats .tabs .on a:visited,
.formats .tabs .on a:hover,
.formats .tabs .on a:active,
.formats .tabs li a:hover {
    background-image: url(../images/FadedTab_Formats.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #1A959F;*/
    }
/*Others applied to unassigned genres etc*/    
.unassignedGenre .tabs .on a:link,
.unassignedGenre .tabs .on a:visited,
.unassignedGenre .tabs .on a:hover,
.unassignedGenre .tabs .on a:active,
.unassignedGenre .tabs li a:hover,
.generic .tabs .on a:link,
.generic .tabs .on a:visited,
.generic .tabs .on a:hover,
.generic .tabs .on a:active,
.generic .tabs li a:hover {
    background-image: url(../images/FadedTab_Unassigned.png);
    background-repeat: repeat-y;
    background-position: left top;
    /*background-color: #666;*/
    } 

/*------- =TabbedPage, this will style the contents of the tabs e.g. Programme Info,
Marketing Material etc. ------- */

#innerWrapper {margin: 16px 0; padding: 0 8px;}

#innerWrapper img.aroundPreview {float: right;}
    
#innerWrapper h2 {
	margin-left: 5px;
	font-size: 1.2em;
	font-family: Arial, Helvetica, sans-serif;
    text-transform: none;
    color: #333;
    }
    
#innerWrapper h3,
#innerWrapper h4 {
	font-size: 1.1em;
	font-family: Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
	color: #333;
    }
    
#innerWrapper h4 {margin-left: 5px;}
    
#innerWrapper ul {padding: 6px 0;}

#innerWrapper li {
    margin-bottom: 5px;
    margin-left: 33px;
    list-style-type: square;
    line-height: 1.4em;
    }
    
#innerWrapper ul li a:link,
#innerWrapper ul li a:visited,
#innerWrapper ul li a:hover,
#innerWrapper ul li a:active {
    padding: 1px 2px;
    color: #000;
    border-bottom: 1px dotted #000;
    }

/*Children's*/
#innerWrapper.childrens ul li a:hover,
#innerWrapper.childrens ul li a:active,
#innerWrapper.childrens a.nowPlaying {background-color: #FE9D1A; color: #FFF; border-bottom-color: transparent;}
/*Comedy*/
#innerWrapper.comedy ul li a:hover,
#innerWrapper.comedy ul li a:active,
#innerWrapper.comedy a.nowPlaying {background-color: #DF5623; color: #FFF; border-bottom-color: transparent;}
/*Current Affairs & Documentaries*/
#innerWrapper.currentAffairs a:hover,
#innerWrapper.currentAffairs a:active,
#innerWrapper.currentAffairs a.nowPlaying {background-color: #830A2B; color: #FFF; border-bottom-color: transparent;}
/*Drama*/
#innerWrapper.drama ul li a:hover,
#innerWrapper.drama ul li a:active,
#innerWrapper.drama a.nowPlaying {background-color: #BD282E; color: #FFF; border-bottom-color: transparent;}
/*Factual Entertainment & Leisure*/
#innerWrapper.leisure ul li a:hover,
#innerWrapper.leisure ul li a:active,
#innerWrapper.leisure a.nowPlaying {background-color: #C74D9E; color: #FFF; border-bottom-color: transparent;}
/*History*/
#innerWrapper.history ul li a:hover,
#innerWrapper.history ul li a:active,
#innerWrapper.history a.nowPlaying {background-color: #308D82; color: #FFF; border-bottom-color: transparent;}
/*Music*/
#innerWrapper.music ul li a:hover,
#innerWrapper.music ul li a:active,
#innerWrapper.music a.nowPlaying {background-color: #712B7E; color: #FFF; border-bottom-color: transparent;}
/*Natural History*/
#innerWrapper.naturalHistory ul li a:hover,
#innerWrapper.naturalHistory ul li a:active,
#innerWrapper.naturalHistory a.nowPlaying {background-color: #A1B13A; color: #FFF; border-bottom-color: transparent;}
/*Science*/
#innerWrapper.science ul li a:hover,
#innerWrapper.science ul li a:active,
#innerWrapper.science a.nowPlaying {background-color: #333489; color: #FFF; border-bottom-color: transparent;}
/*Formats*/
#innerWrapper.formats ul li a:hover,
#innerWrapper.formats ul li a:active,
#innerWrapper.formats a.nowPlaying {background-color: #1A959F; color: #FFF; border-bottom-color: transparent;}
/*Others applied to unassigned genres etc*/
#innerWrapper.unassignedGenre ul li a:hover,
#innerWrapper.unassignedGenre ul li a:active,
#innerWrapper.generic ul li a:hover,
#innerWrapper.generic ul li a:active,
#innerWrapper.unassignedGenre a.nowPlaying,
#innerWrapper.generic a.nowPlaying {background-color: #666; color: #FFF; border-bottom-color: transparent;}
    
#innerWrapper #coProduced {
    margin: 10px 0 0 0;
    padding: 5px 0;
    border: 1px dotted #999;
    border-left: none;
    border-right: none;
    }
    
#innerWrapper #coProduced p {margin: 0 5px;}

/*Phase 2, co produced and logo coming in*/

/*Children's*/#innerWrapper.childrens #coProduced {border-color: #FE9D1A;}
/*Comedy*/#innerWrapper.comedy #coProduced {border-color: #DF5623;}
/*Current Affairs & Documentaries*/#innerWrapper.currentAffairs #coProduced {border-color: #830A2B;}
/*Drama*/#innerWrapper.drama #coProduced {border-color: #BD282E;}
/*Factual Entertainment & Leisure*/#innerWrapper.leisure #coProduced {border-color: #C74D9E;}
/*History*/#innerWrapper.history #coProduced {border-color: #308D82;}
/*Music*/#innerWrapper.music #coProduced {border-color: #712B7E;}
/*Natural History*/#innerWrapper.naturalHistory #coProduced {border-color: #A1B13A;}
/*Science*/#innerWrapper.science #coProduced {border-color: #333489;}
/*Formats*/#innerWrapper.formats #coProduced {border-color: #1A959F;}
/*Others applied to unassigned genres etc*/
#innerWrapper.unassignedGenre #coProduced,
#innerWrapper.generic #coProduced  {border-color: #666;}
   
#innerWrapper p {margin: 5px; margin-top: 0; line-height: 1.6em; color: #333;}

#innerWrapper p.pressQuotes  {font-style: italic;}
    
#innerWrapper p span.bold {font-family: Arial, Helvetica, sans-serif; font-size: 1.1em;}

/*------- =MarketingMaterialPage and some styles for =PreviewPage-------*/

/* Preview toggle controls changed to reflect the styling of the new preview player */
#previewQualityControls
{
	background-image: url(../images/previewQualityControlsBg.png);
	background-color:#2F0F4A;
    background-repeat: repeat-x;
    background-position: left top;
    padding:0px 0px 0px 0px;
    margin:0px 0px 0px 6px;
    width:513px;
}

#wmvPreviewContainer #previewQualityControls
{
	width:320px;
}
#previewQualityControls .previewQualityControlsBtnCon
{
	padding-right:7px;
	padding-top:3px;
}
#previewQualityControls li
{
	list-style-type:none;
	margin:0px;
	padding:0px 1px 5px 0px;
	float:right;
}
#innerWrapper  ul#previewQualityControls li a
{
	color:#fff;
	border:none;
	background-image: url(../images/previewQualOff.png);
	padding:3px 6px;
}
#innerWrapper ul#previewQualityControls li a:hover,
#innerWrapper ul#previewQualityControls li a.on
{
	color:#000;
	background-image: url(../images/previewQualOn.png);
}

#promoPublicityWrapper,
#previewWrapper {margin-bottom: 8px;}
    
#previewWrapper {position: relative;}
    
#previewWrapper h3 {
    margin-bottom: 6px;
    border-bottom: dotted 1px #666;
    line-height: 1.6em;
}

#promoPublicityWrapper p,
#previewWrapper p {text-align: left;}

#previewWrapper p {margin-left: 0;}

#promoClip, #previewPlayer {
    min-width: 320px;
    min-height: 280px;
    float: left;
    clear: left;
    background-color: #000;
    }
    
#promoClip, #previewPlayer {
    background-image: url(../Images/Ajax_Spinner_Inverted.gif);
    background-repeat: no-repeat;
    background-position: center;
    }

.plugin-message 
{
	padding:20px;
}
.plugin-message, .plugin-message A
{
	color:#fff ! important;
}
.plugin-message A{
text-decoration:underline;
}
     
.player {     
  margin: 6px 6px 0px 6px;
  background-color:#000;
  
}

.flashPlayer
{
  width:513px;  
}
.wmvPlayer
{
  width:320px;  
}

#innerWrapper #previewPlayer div.mediaPlayerWrapper p {
    margin: 6px;
    color: #FFF;
    width: 310px;
    height: 268px;
}
    
#innerWrapper #previewPlayer div.mediaPlayerWrapper p a {
    color: #EEE;
    border-bottom: dotted 1px #EEE;
    }
    
#innerWrapper #previewPlayer div.mediaPlayerWrapper p a:hover {
    color: #FFF;
    border-bottom: dotted 1px #FFF;
    }
    
#promoClip object,
#previewPlayer object {width: 322px;}
/*There is a very peculiar bug here, in Firefox investigate width 2px wider*/
    
/*The following styles the clip player and the promo link*/

.promoPlayerAndLink:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
        
.promoPlayerAndLink {display: inline-block;}
 /*Hides from IE-mac*/
.promoPlayerAndLink {display: block;}
 /*end hide from IE-mac*/

.promoPlayerAndLink {
    float: left;
    width: 322px;
    position: relative;
    }

#promoLink {padding-top: 3px; clear: both;}

#promoLink a {
    padding: 1px 2px;
    line-height: 1.6em;
    color: #000;
    border-bottom: 1px dotted #000;
    }
    
/*Genre colours on promo link*/
    
/*Children's*/
#innerWrapper.childrens #promoLink a:hover {background-color: #FE9D1A; color: #FFF; border-bottom-color: transparent;}
/*Comedy*/
#innerWrapper.comedy #promoLink a:hover {background-color: #DF5623; color: #FFF; border-bottom-color: transparent;}
/*Current Affairs & Documentaries*/
#innerWrapper.currentAffairs #promoLink a:hover {background-color: #830A2B; color: #FFF; border-bottom-color: transparent;}
/*Drama*/
#innerWrapper.drama #promoLink a:hover {background-color: #BD282E; color: #FFF; border-bottom-color: transparent;}
/*Factual Entertainment & Leisure*/
#innerWrapper.leisure #promoLink a:hover {background-color: #C74D9E; color: #FFF; border-bottom-color: transparent;}
/*History*/
#innerWrapper.history #promoLink a:hover {background-color: #308D82; color: #FFF; border-bottom-color: transparent;}
/*Music*/
#innerWrapper.music #promoLink a:hover {background-color: #712B7E; color: #FFF; border-bottom-color: transparent;}
/*Natural History*/
#innerWrapper.naturalHistory #promoLink a:hover {background-color: #A1B13A; color: #FFF; border-bottom-color: transparent;}
/*Science*/
#innerWrapper.science #promoLink a:hover {background-color: #333489; color: #FFF; border-bottom-color: transparent;}
/*Formats*/
#innerWrapper.formats #promoLink a:hover {background-color: #1A959F; color: #FFF; border-bottom-color: transparent;}
/*Others applied to unassigned genres etc*/
#innerWrapper.unassignedGenre #promoLink a:hover,
#innerWrapper.generic #promoLink a:hover {background-color: #666; color: #FFF; border-bottom-color: transparent;}

#publicityInfo,
#nowPlaying {margin-left: 8px; width: 17em;}

#publicityInfo,
#nowPlaying {float: left; text-align: left;}
/*#nowPlaying {text-align: left;}*/

#publicityInfo {margin-left: 10px;}
    
/*The following toggleResolution style is for the Preview Preference area*/

#toggleResolution {
    position: absolute;
    bottom: 0;
    left: 322px;/*Measurement based on width of #previewPlayer object*/
    }
    
#toggleResolution {margin-left: 8px; width: 19.5em;}

#toggleResolution fieldset {
    padding-top: 0;
    border: solid 1px #EEE;
    background-image: url(../images/BackgroundTile_ContentLighter.png);
    background-repeat: repeat;
    }
    
#toggleResolution legend {
    font-size: 1em;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: .1em;
    }
    
#toggleResolution input {
    margin-bottom: 0;
    width: auto;
    float: left; 
    clear: left;
    }
    
#toggleResolution label {
    padding-left: 5px;
    float: left;
    clear: none;
    line-height: 1.2em;
    color: #333;
    }
    
#toggleResolution br {line-height: 1.8em;}
    
#epk {width: auto;}
#epk H3 .colon {display:none;}
#squareEyesFeatures H3 .colon {display:none;}

/*The following style refers to the epk drop down menu that uses the class expandCollapse*/
    
#innerWrapper h3.expanded,
#innerWrapper h3.collapsed {margin-left: 0;}

#innerWrapper h3.expanded a,
#innerWrapper h3.collapsed a {padding: 0 16px; font-size: 100%;}

#innerWrapper h3.expanded a:hover,
#innerWrapper h3.collapsed a:hover {color: #000;}

#marketingKitEtAl {
    margin-bottom: 6px;
    clear: both;
    width: auto;
    border: 1px dotted #666;
    }

/*Children's*/.childrens #marketingKitEtAl {border-color: #FE9D1A;}
/*Comedy*/.comedy #marketingKitEtAl {border-color: #DF5623;}
/*Current Affairs & Documentaries*/.currentAffairs #marketingKitEtAl {border-color: #830A2B;}
/*Drama*/.drama #marketingKitEtAl {border-color: #BD282E;}
/*Factual Entertainment & Leisure*/.leisure #marketingKitEtAl {border-color: #C74D9E;}
/*History*/.history #marketingKitEtAl {border-color: #308D82;}
/*Natural History*/.naturalHistory #marketingKitEtAl {border-color: #A1B13A;}
/*Music*/.music #marketingKitEtAl {border-color: #712B7E;}
/*Science*/.science #marketingKitEtAl {border-color: #333489;}
/*Formats*/.formats #marketingKitEtAl {border-color: #1A959F;}
/*Others applied to unassigned genres etc*/
.unassignedGenre #marketingKitEtAl,
.generic #marketingKitEtAl {border-color: #666;}

/* There were another 2 sections that were meant to be added to the UI, which Creative Services haven't got
together yet, they were id="etAl1" id="etAl2". It looks like Creative Services will only add in one area now
this will be a link to a zip file of all the Publicity Info PDFs. For this reason I'm changing the width in id="etAl3"
this should be changed back once the other areas are added. I've also floated the weblinks class p.webLinkDisclaimer to
'float: left', this float should also be removed when other items are added,
in fact where ever there is a 'remove' then just remove*/

#etAl1, #etAl2, #etAl3 {
    padding: 6px 0 6px 6px;
    float: left;
    width: 14em;
    /*border: 1px solid #FF33FF;*/
    }
    
#etAl1 {margin-right: .6px; padding-left: 4px;}
    
#etAl3 {padding-left: 6px; /*width: 17em;*/ width: 90%; /*reinstate 17em*/}

/*remove*/
#innerWrapper #etAl3 ul {
    float: left;
    }

#innerWrapper #etAl3 p.webLinkDisclaimer {
    margin-left: 24px;/*remove*/
    padding: 2px 5px;
    float: left; /*remove*/
    width: 14em; /*remove*/
    background-image: url(../images/BackgroundTile_Content.png);
    background-repeat: repeat;
    border: solid 1px #EEE;
    line-height: 1.2em;
    }
    

#marketingKit li
{
	color:Black;
	list-style-type:none;
	padding:0;
	margin:0;
	line-height:1.5;
}
    
/*--------=PreviewPage, these styles are specific to Preview Tab page-------- */
    
    
#previewClipList td a {
    display:inline;
    padding: 1px 2px;
    background:none;
    border: none;
    color: #333;
    text-align:left;
    border:0 0 1px 0 ;
    border-bottom:1px dotted #000;
}


#previewClipList td {
    padding:5px;
}

#previewClipList tr.nowPlaying {
	background:#ccc;    
}
#previewClipList tr a:hover 
{
	border:0;
}

.previewSkuTitle
{
    font-weight: bold;
    background: #ddd;
}
.previewEpisodeTitle 
{
	width:100%;
}

.noflash 
{
	width:512px;
	height:228px;
	padding:50px 0;
	font-size:1.2em;
	text-align:center;
}
.noflash 
{
	color:White;
}
.noflash a 
{
	color:White;
	text-decoration:underline;
}

/*Children's*/
#innerWrapper.childrens table tr td a:hover {background-image: none; background-color: #FE9D1A; color: #FFF;}
/*Comedy*/
#innerWrapper.comedy table tr td a:hover {background-image: none; background-color: #DF5623; color: #FFF;}
/*Current Affairs & Documentaries*/
#innerWrapper.currentAffairs table tr td a:hover {background-image: none; background-color: #830A2B; color: #FFF;}
/*Drama*/
#innerWrapper.drama table tr td a:hover {background-image: none; background-color: #BD282E; color: #FFF;}
/*Factual Entertainment & Leisure*/
#innerWrapper.leisure table tr td a:hover {background-image: none; background-color: #C74D9E; color: #FFF;}
/*History*/
#innerWrapper.history table tr td a:hover {background-image: none; background-color: #308D82; color: #FFF;}
/*Music*/
#innerWrapper.music table tr td a:hover {background-image: none; background-color: #712B7E; color: #FFF;}
/*Natural History*/
#innerWrapper.naturalHistory table tr td a:hover {background-image: none; background-color: #A1B13A; color: #FFF;}
/*Science*/
#innerWrapper.science table tr td a:hover {background-image: none; background-color: #333489; color: #FFF;}
/*Formats*/
#innerWrapper.formats table tr td a:hover {background-image: none; background-color: #1A959F; color: #FFF;}
/*Others applied to unassigned genres etc*/
#innerWrapper.unassignedGenre table tr td a:hover,
#innerWrapper.generic table tr td a:hover {background-image: none; background-color: #666; color: #FFF;}

/*--------------------------------------------------------*/