/* ------ NOTES -----------------------------------------
 
 NC Skin CSS template
 Version: 0.4
 Dependencies: reset.css, base.css, brand.css
 N.B. "spot" is on white, "offset" is on black
 
------------------------------------------------------ */

/* Borders */
#PrimaryContent a.tab.selected,
#PrimaryContent .tabContent,
#relatedBrandLinks li,
body div#EpisodeGuideList,
body div#SeriesList h2,
div#clipsContainer,
div#clipsContainer ul#clipsList li h3,
body#clipDetail #clipContainer ul.links li,
div#newsAndArticles,
.mainContent,
.episodeLink,
#ArticleList .articles,
#pictureGallery .jumpLinks li.back a:hover,
#pictureGallery .jumpLinks li.next a:hover,
#pictureGallery .jumpLinks li.back a:active,
#pictureGallery .jumpLinks li.next a:active,
#pictureGallery .jumpLinks li.back a:focus,
#pictureGallery .jumpLinks li.next a:focus {
    border-color: #647a7c;
}

/* 1px solid borders */
#caraComments > li ol {
	border:1px solid #647a7c;
}

ul.jumpPoints li a,
div#SeriesSummary ul.jumpPoints li a,
div#SeriesList ul.jumpPoints li a,
div#EpisodeGuideList ul.jumpPoints li a,
div#EpisodeList li ul.jumpPoints li a,
div#clipContainer ul.jumpPoints li a,
div#EpisodeSummary ul.jumpPoints li a,
body#categoryPage ul.jumpPoints li a,
body#pictureDetail ul.jumpPoints li a,
#pictureGallery .jumpLinks li.back a:hover,
#pictureGallery .jumpLinks li.next a:hover,
#pictureGallery .jumpLinks li.back a:active,
#pictureGallery .jumpLinks li.next a:active,
#pictureGallery .jumpLinks li.back a:focus,
#pictureGallery .jumpLinks li.next a:focus {
	background-color: #647a7c;
}

ul.jumpPoints li.catchUp a,
div#SeriesSummary ul.jumpPoints li.catchUp a,
div#SeriesList ul.jumpPoints li.catchUp a,
div#EpisodeGuideList ul.jumpPoints li.catchUp a,
div#EpisodeList li ul.jumpPoints li.catchUp a,
div#clipContainer ul.jumpPoints li.catchUp a,
div#EpisodeSummary ul.jumpPoints li.catchUp a,
body#categoryPage ul.jumpPoints li.catchUp a,
body#pictureDetail ul.jumpPoints li.catchUp a {
	background-color:white;
}

ul.jumpPoints li.large a,
div#SeriesSummary ul.jumpPoints li.large a,
div#SeriesList ul.jumpPoints li.large a,
div#EpisodeGuideList ul.jumpPoints li.large a,
div#EpisodeList li ul.jumpPoints li.large a,
div#clipContainer ul.jumpPoints li.large a,
div#EpisodeSummary ul.jumpPoints li.large a,
body#categoryPage ul.jumpPoints li.large a,
body#pictureDetail ul.jumpPoints li.large a  {
	background-color: #647a7c;
}

.jumpLinks li.dropdown ul li.selected a,
.jumpLinks li.dropdown ul li a:hover,
.jumpLinks li.dropdown ul li a:focus,
.jumpLinks li.dropdown ul li a:active {
	border-bottom-color: #647a7c;
}

/* Typography */
p.caraPolicy a,
a:focus,
a:hover,
a:active, 
.form-link {
	color:#9eb1b2;
}

div#clipsContainer ul#clipsList li h3 a:hover,
div#newsAndArticles li h4 a,
div#newsAndArticles li h4 a,
.flashPrimaryColor,
h1#background,
div#BM_episodeGuide li h5 a:focus, 
div#BM_episodeGuide li h5 a:hover, 
div#BM_episodeGuide li h5 a:active,
#Category h3.tabHeading,
#comments #listComments ol li div.line span.username a,
#comments div#postCommentThanks div.postCommentBody p a,
#comments .formrow a,
#caraHeader,
.relatedBrandContent li a span.title,
ul.dashed li a span{
    color: #647a7c;
}


.flashSecondaryColor {
	color: #9eb1b2;
}

/* Backgrounds */
.base-chevron ,
.contentModule .base-chevron:hover,
.contentModule .base-chevron:active ,
a.tab.selected,
#catchUpEpisodes a.tab,
#CastAndCrew h3,
#EpisodeMusic h3,
.tabContent h4,
div#clipsContainer h2,
#TxInfo,
#relatedLinksList,
div#clipsContainer ul#clipsList li .clipsInfo .playClip,
#announcement,
body#catchUp .playLink,
div#BM_episodeGuide li h5,
a.arrowLink,
h3.arrowLink a,
.contentModule a.arrowLink,
.contentModule a.arrowLink:focus,
.contentModule a.arrowLink:hover,
.contentModule a.arrowLink:active,
.contentModule a.arrowLink span,
div#PrimaryContent h2.subHeader,
#SecondaryContent .relatedContent .contentModule,
.jumpLinks li.dropdown ul li.selected a,
.jumpLinks li.dropdown ul li a:hover,
.jumpLinks li.dropdown ul li a:focus,
.jumpLinks li.dropdown ul li a:active,
#SecondaryContent .contentModule,
.invert-colour a.arrowLink:hover,
.invert-colour a.arrowLink:focus,
.invert-colour a.arrowLink:active,
.invert-colour a.arrowLink:hover span,
.invert-colour a.arrowLink:focus span,
.invert-colour a.arrowLink:active span,
.watch-now-large,
.watch-now-large:hover,
.watch-now-large:focus,
.watch-now-large:active,
.contentModule .base-chevron span,
.related-links .more {
	background-color: #647a7c;
}

#caraComments > li > h3.caraTitle,
#caraComments .hasReplies .dog-ear {
	background-color: #647a7c;
}

/* Quick links nav bar */

div#QuickLinks ul li a {
	background-color:black;
	color:white;
}

div#QuickLinks ul li a:active, 
div#QuickLinks ul li a:focus, 
div#QuickLinks ul li a:hover, 
div#QuickLinks ul li.active a ,
.relatedContentModule h2,
body#articleLanding #FeaturedArticle h3 a{
	background-color: #647a7c;
	color:white;
}

/* Black and white shows white on hover, to differentiate that state */
.skin-blackwhite div#QuickLinks ul li a:active, 
.skin-blackwhite div#QuickLinks ul li a:focus, 
.skin-blackwhite div#QuickLinks ul li a:hover{
	background-color: white;
	color:#647a7c;
}
.skin-blackwhite div#QuickLinks ul li a:hover { /* This overrides a lower specificity important selector in the quicklinks service css file */
	color:#647a7c !important;
}

.skin-blackwhite #QuickLinks ul,
.skin-blackwhite #QuickLinks ul li a {
	background-color:#666666;
}

.skin-blackwhite div#QuickLinks ul li.active a:hover,
.skin-blackwhite div#QuickLinks ul li.active a {
	background-color:#647a7c;
	color:white !important;
}




.pagination a:focus,
.pagination a:hover,
.pagination a:active,
.pagination li.active span,
ul.dashed li a{
	background-color: #647a7c;
}

h1#foreground,
#pictureGallery .jumpLinks li.dropdown ul li a:hover,
#pictureGallery .jumpLinks li.dropdown ul li a:focus,
#pictureGallery .jumpLinks li.dropdown ul li a:active,
a.arrowLink:focus span,
a.arrowLink:hover span,
a.arrowLink:active span,
body#articleLanding #FeaturedArticle h3 a:focus,
.invert-colour a.arrowLink span
{
    color: white;
}

/* INVERTED SKINS */


#comments div#postCommentThanks div.postCommentBody p a,
ul.lgIcn li a:focus,
ul.lgIcn li a:hover,
ul.lgIcn li a:active
{
 	color: black;
}

/* Displaced images that are within the arrowLink need transparent background */
div#EpisodeGuideList .info-teaser a.arrowLink .displace, 
div#EpisodeGuideList .info-teaser a.arrowLink .displace,
.nonSkinContentModule a.arrowLink,
.nonSkinContentModule a.arrowLink:focus,
.nonSkinContentModule a.arrowLink:hover,
.nonSkinContentModule a.arrowLink:active {
	background-color: transparent;	
}

/* "Get More" arrow links added separately as the colours are different */
body#articleLanding #FeaturedArticle h3 a:focus,
#moreShowInfo .tabContent a.arrowLink span,
.nonSkinContentModule a.arrowLink span,
div#EpisodeList li h3 a:hover,
div#EpisodeList li h3 a:active{
	background-color:black;
}

#moreShowInfo .tabContent a.arrowLink span {
	padding:1px 4px;
}

#moreShowInfo .tabContent a.arrowLink:focus span,
#moreShowInfo .tabContent a.arrowLink:hover span,
#moreShowInfo .tabContent a.arrowLink:active span,
.nonSkinContentModule a.arrowLink span:hover,
.nonSkinContentModule a.arrowLink span:focus,
.nonSkinContentModule a.arrowLink span:active{
	background-color:white;
	color:black;
}


.invert-colour a.arrowLink span{
	background-color:black;
	color:white;
}

/* 4oD Pop-out player link */

body#catchUpPopup div#footerContainer a#brandLink:hover,
body#catchUpPopup div#footerContainer a#brandLink:active,
body#catchUpPopup div#footerContainer a#brandLink:hover span,
body#catchUpPopup div#footerContainer a#brandLink:active span  {
	background-color:#647a7c;
}


/* HUB PAGE-SPECIFIC STYLES - TO BE RE-FACTORED WHEN DESIGN SPREADS TO OTHER PAGES */

/* TODO: Re-factor to global location when this is site-wide */
body#hub a.read-more:hover,
body#hub a.read-more:active {
	background-color:#647a7c;
}

body#hub #latest-episodes li .next-time {
	background-color:#647a7c;
}

/* TODO: Re-factor when we introduce this style of 4oD button site-wide */
body#hub div#promo-one div#brandInfoBox a.watch-now {
	background-color:#647a7c;
}

body#hub #latest-episodes li .last-shown {
	background-color:#647a7c;
}

#hub #PrimaryContent h2 {
	color:#647a7c;
}



/* CHEVRON STYLES */


.double-chevron ,
.secondary-chevron  {
	background-color:#647a7c;
}

.secondary-chevron span {
	color:#647a7c;
}

.double-chevron:hover,
.double-chevron:active {
	background-color:black;
}



.secondary-chevron:hover,
.secondary-chevron:active {
	background-color:black;
}


.secondary-chevron:hover span,
.secondary-chevron:active span {
	color:black;
}

/* Comments selectors for IE6 */

#caraComments li h3.repliesHeader,
#caraComments .hasReplies .dog-ear {
	_background-color: #647a7c;
}

#caraComments li ol.replies {
	_border:1px solid #647a7c;
}


/*

 4OD pages

*/
body#catchUp .secondary-content a h2,
body#catchUp .secondary-content a h3, 
body#catchUp .secondary-content a{
	color:#647a7c;
}
body#catchUp .secondary-content a:hover h2,
body#catchUp .secondary-content a:focus h2,
body#catchUp .secondary-content a:active h2,
body#catchUp .secondary-content a:hover h3, 
body#catchUp .secondary-content a:focus h3, 
body#catchUp .secondary-content a:active h3, 
body#catchUp .secondary-content a:hover,
body#catchUp .secondary-content a:focus,
body#catchUp .secondary-content a:active{
	background-color:#647a7c;
	color:white;
}

/*

Editorial Promo

*/

.editorial-promo .four-od-header,
.editorial-promo .four-od-header-container .see-all:hover,
.editorial-promo .four-od-header-container .see-all:focus,
.editorial-promo .four-od-header-container .see-all:active {
    background-color:#647a7c;
}

.editorial-promo .promo .promo-link,
.editorial-promo .promo .promo-link:hover .title,
.editorial-promo .promo .promo-link:focus .title,
.editorial-promo .promo .promo-link:active .title {
    color:#647a7c;
}