/*UPDATE/
/*
----------------------------------------------------------
in the theme manager's current state,   @font-face  is not available for use
and will break the theme. However, if you want to link out to a source like google fonts you can do so.

example:

@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
-----------------------------------------------------------
*/

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');

/*Main Background image for web and tablet here - be sure to set a default background color will be the 
color that the image fades into in .psd*/

/* MAIN BACKGROUND --------------------------------------------------------- */
#main_wrapper { background: #3f1257 url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_main_bigweb.jpg') no-repeat top center; }
@media screen and (max-width: 990px) {
    #main_wrapper { background: #0d0d0c url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_main_tablet.jpg') no-repeat top center; }
}


p {  color: #f6ede7; }


/* SECTION HEADER ---------------------------------------------------------- */
/* Colors of the Title and Tune-in Statement */
#section_header > hgroup > h1,
#section_header > hgroup > h1 > a,
#section_header > hgroup > h1 > a:hover,
#section_header > hgroup > h2,
#section_header > .supplemental > .timezone { 
	color: #fcefff;
	font-family: 'Fredoka One', verdana;
	font-size: 14px;
	font-weight: normal;
	text-transform: uppercase;
}

/*color of the h3 on two line Tune-in may be different than the above*/


#section_header > hgroup > h2 {
	margin: 25px 300px 0 0;
	line-height: 22px;
	font-size: 20px;
}
#section_header > hgroup > h3 { 
	color: #21d1ff;
	font-family: 'Fredoka One', verdana;
	font-size: 1em;
	font-weight: 900;
	margin: 0;
	padding: 0 0 5px;
	text-shadow: none;
}
#section_header > hgroup > h { 
	color:#fff;
	font-weight: bold;
}

#section_header h2, #section_header h3 {
color: #fff;
}

label {
cursor: pointer;
font-size: 10px;
}


#site_nav > ul > li > ul {
background-color: #282828;
height: 3em;
left: 0;
line-height: 2.5em;
position: absolute;
top: 3.4em;
z-index: 1;
}



/*--------------------------------------*/
/* Image of the Main Title */
/* Adjust the height and width to comply with the logo size indicated in .psd*/
#section_header > hgroup > h1 > a {
    background: transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_logo.png') no-repeat 0 0;
    display: block;
    width: 449px;
    height: 146px;
    overflow: hidden;
    padding: 0;
    text-indent: -999em; 
}

/*if you need to override the default padding for the hgroup to make sure the content well hits at the correct
place on the background image - make sure it matches the .psd, sometimes the 2 lined tune-in can push down the 
content well*/ 
#section_header > hgroup {
    height: 145px;
    margin: 0;
}
#section_header > hgroup {
	float: none;
	margin-bottom: 0;
	padding: .2rem 0 .5rem 0;
	width: auto;
}

/* Style of the Social Identifier - should be indicated by the .psd this is the area with the hashtag */
#section_header .social_identifier {
    border: 0 none;
    font-family: 'Fredoka One', verdana;
/*	font-family: "Verdana", "Arial", sans-serif;*/
    color: #fff;
   	background: rgb(51, 183, 231);
	background: rgba(51, 183, 231, 0.5);	
	margin: 0;
	font-weight: bold;
	font-size: 13px;
	text-shadow: none;
}
/*--------------------------------------*/
/* Series Navigation - top bar of content well on all series pages */
#section_header > nav { 
    background: transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_nav_background.jpg') no-repeat 0 0;
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	margin: -2px 0 0 0;
}
#main_wrapper > .content_detail_hub > #hub_wrapper, #main_wrapper > .content_detail_tv > #hub_wrapper {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#main_wrapper > article {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
#section_header > nav > ul > li > a, #section_header > nav > ul > li > a:link, 
#section_header > nav > ul > li > a:visited { 
    color: #abfe34;
    border-right:1px solid #000;
    border-left: 0;
    font-family:Arial , Helvetica, sans-serif;
    font-size: 14px;
    font-weight:normal;
 }
 
#section_header > nav > ul > li > a:hover, #section_header > nav > ul > li > a:hover:link, 
#section_header > nav > ul > li > a:visited:hover {
	color: #fff;
	text-decoration: none;
}
 
#main_wrapper > article {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
/*--------------------------------------*/
/* Content Well Background Color override */
#main_wrapper > .content_detail_hub > #hub_wrapper, #main_wrapper > .content_detail_tv > #hub_wrapper {
	background-color: transparent;/*overrides default*/
}

/* Content Well Background - may sometimes be an image*/
#main_wrapper > article.content_detail_hub, #main_wrapper > article {
    color:#f6ede7;
    background: transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_section-background.png');
}
/* Content Well links and such - some of these may vary from each other - be sure to break them
out separately if this is the case*/ h2, h3, h4, h5, p, li, p > span, a:link, a:visited, a:link p, a:visited p, h1 > a:link,
h1 > a:visited, h2 > a:link, h2 > a:visited, h3 > a:link, h3 > a:visited,
h4 > a:link, h4 > a:visited, h5 > a:link, h5 > a:visited {
    color: #abfe34;
/*    font-size: 12px;*/
}

a:hover{text-decoration:underline;}

/* Content Well Divider Lines */
#detail_wrapper, #detail_wrapper > aside, #detail_wrapper > section + section,
#detail_wrapper > figure + section, article > section, article > aside + aside,
#supplemental, aside > section + section,  .component_part_primary, 
.component_part_half, #section_header > .eps_paginator:after, 
#hub_wrapper > aside + aside, #main_wrapper > footer:before, 
.list_with_thumbs > li + li:before, 
.list_no_thumbs > li + li:before
 { border-color: #000; border-top: 0; } 
 
 
#detail_wrapper > .supplemental {
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	border-left: 1px solid black;
	border-right: 0;
}


article > section,
article > aside + aside,
#detail_wrapper > aside,
#detail_wrapper > section + section,
#detail_wrapper > figure + section,
#hub_wrapper > aside + aside,
.content_detail_article > #detail_wrapper > figure,
.content_detail_article > #detail_wrapper > .gallery {
  border: 0;
}


/*--------------------------------------*/
/* Featured Area Background and Color  */
.content_detail_episode > #detail_wrapper > figure > figcaption,
.content_detail_series > #detail_wrapper > figure > figcaption {
    background: transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_feat_epnv_bg.png') no-repeat 0 0;
    background-size:cover;/*Always use background-size:cover to account for varied length of content*/
    color:#fff;
    padding: 2rem;
    font-size: 12px;
}

h1 { 
	color: #abfe34; 
	font-family: 'Fredoka One', verdana;
	text-transform: uppercase;
}
p { color: #f6ede7; }
/* Featured Area Font Color if different from the rest of the page*/
/* .content_detail_episode > #detail_wrapper > figure > figcaption, .content_detail_episode > #detail_wrapper > figure > figcaption > p,
.content_detail_series > #detail_wrapper > figure > figcaption, .content_detail_series > #detail_wrapper > figure > figcaption > p {
    color: #838377;
} */

/*often not styled in the .psd - don't forget the color of the h4*/
/*
.content_detail_episode > #detail_wrapper > figure > figcaption, .content_detail_episode > #detail_wrapper > figure > figcaption > h4,
.content_detail_series > #detail_wrapper > figure > figcaption, .content_detail_series > #detail_wrapper > figure > figcaption > h4
{
    color: #FFF;
}
*/
/*--------------------------------------*/
/*Component header titles - these may need some tweaking to the negative margins/padding, height, text-indent etc. */
 section > h3 {
    background:transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_full_width_header.jpg') no-repeat 0 0;
    border:0;
    font-family: 'Fredoka One', verdana;
    font-size: 16px;
    color: #3f1257;
    height: 39px;
    line-height: 1.6;
    margin-top: -20px;
    margin-left: -1.9rem;
    margin-right: -2rem;
    text-indent: .5em;
    text-shadow: 0 .02em 0 #bfbba5;
    padding: 6px 0 0 0;
} 
/*Component header titles - these may need some tweaking to the negative margins/padding, height, text-indent etc. */
	section > h3 strong{
    font-family: 'Fredoka One', verdana;
    font-size: 16px;
    color: #3f1257;
    font-weight: normal;
    padding: 6px 0 0 0;
 } 


/*--------------------------------------*/
/* Rail Featured Episode Component*/
#rail_wrapper > .featured_episode{
    margin-left:-20px;
    padding-left:20px;
}
#rail_wrapper {
	background: #4b1766 url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_right-column-tile.png');
	width: 338px;
	padding-right: 20px;
	padding-bottom: 20px;
	margin-right: -20px;
/*	margin-top: -20px;*/
	margin-top: 0;
}
#rail_wrapper section > h3 {
	background: transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_right-column-header.jpg') no-repeat center top;
	line-height: 1.8;
	color:#fcefff;
}
#rail_wrapper section > h3 strong {
	color:#fcefff;
}

#rail_wrapper > .featured_episode h4 {
    color:#f0eae1;
}


#rail_wrapper > .featured_episode .episode_navigation h2 {
	color:#f0eae1; 
}

.content_listing > nav > ul > li > a {
    border-left: 1px solid #f0eae1;
    padding: 0 0.25em 0 0.5em;
}
.content_listing > div > img {padding-right: 0;}

#rail_wrapper > .featured_episode .top_offset { border-top: 0 none; margin-top: 0; padding-top: 0.5em; }

/*--------------------------------------*/
/*CAROUSELS*/
/* Horizontal Media Carousels */

/*Background for carousels - padding may need to be adjusted according to the design*/
.carousel {
    background: transparent url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_right-column-tile.png');
    padding-top:1.5em;
}
.carousel > .markers, .carousel > .control {
    background-color: transparent;
    border:none;
}
carousel.horizontal > .markers > li {
	margin: 0 auto 15px auto;
}

.carousel.horizontal > .markers > li.current > a, .carousel.horizontal > .markers > li:target > a {
border-color: #abfe34;
}
.carousel > .markers figcaption {
	font-size: 10px;
}
.carousel > .markers {
	padding: 0 0 20px 0;
}

/*colors for the arrows before and after - Use this when you are NOT using custom background images for arrows -based on design*/
.control:before { color: #37596d; }
.control.disabled:before{ color: #0f0d0a}

/*if you ARE using custom arrows - this removes the default arrow*/
.icon-chevron-left:before  { content: ""; }
.icon-chevron-right:before  { content: ""; }

/*if you ARE using custom bg images for arrows - this overrides for the gallery arrows in the photos - the ones that appear and disappear on hover*/
.gallery > .icon-chevron-left:before  { content: "\f053"; }
.gallery > .icon-chevron-right:before  { content: "\f054"; }

/*When using custom bg images for arrows*/
.horizontal .control.prev {
    background:url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_arrow-prev.png') no-repeat 0 40%;
}

.horizontal .control.next {
    background:url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_arrow-next.png') no-repeat 0 40%;
}

.horizontal .control.disabled {
    opacity: 0.6;
}

/*For Vertical carousels generally in the right rail make sure to put a background that overrides the bg image for horizontal 
carousels*/

.vertical{
    background: none;
}


.vertical  .control{ 
    background: #abfe34;
;
    color:#cccccc;
}

.vertical {padding-top:.2em}

/* gallery style updates */
#main_wrapper .slideshow figcaption > a > h4 {
	color: #21D1FF;
	text-shadow: 0 0.02em 0 #000;
	font-family: 'Fredoka One', 'Verdana';
}
.gallery figcaption a p {
	font-size: 0.9em;
	text-transform: none;
}
.gallery > .markers > li.current, .gallery > .markers > li:target {
	border-color: #21D1FF;
}

.e_commerce > article > p > span:only-of-type, .e_commerce ul > li span:only-of-type {
	color: #fff;
}

.content_listing article.tease_item {
	overflow: hidden;
}

.content_listing article.tease_item {
	margin-bottom: 10px;
}

#hub_wrapper > aside + aside {
	background: #4b1766 url('the-80s-the-decade-that-made-us/the-80s-the-decade-that-made-us_right-column-tile-alt.png');
}

.store_fallback {
	background: transparent;
}


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



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

/*tabbed cotent and vertical lists*/
/* removes default bg color*/
#upcoming-episodes, #all-episodes {background:transparent}

.tabbed_content.tabbed_content_padded > div, #upcoming-episodes, #all-episodes  {
    border: 1px solid #000;
    background:transparent;
    outline:none;
}

/*Hover state color for tabbed content in vertical stacks and episode guide listing*/
.list_no_thumbs > li:hover,
.list_with_thumbs > li:hover, 
.tabbed_content > ul > .tabbed_content-inactive:hover { background: none; }


.tabbed_content > ul > li {
    background-color: transparent;
}

.tabbed_content.tabbed_content_padded > ul > li {
    background-color: transparent;
    border-color: #000;
    margin: 0 0.5em 0.5em 0;
}

/*background color/border for active tab on episode guide*/
.tabbed_content.tabbed_content_padded > ul > .tabbed_content-active {
    background-color: transparent;
    border-bottom: 1px solid #000;
    margin-bottom: 0;
}

/*Border around boxes boxes with vertical lists such as from the blog*/
.list_no_thumbs, .list_with_thumbs {
    border: 1px solid #000;
}

/*For the borders in between vertical list items*/
.list_with_thumbs > li + li:before {
    border-top: 1px solid #F4F4F4;
    content: "";
    display: block;
    height: 0;
    width: auto;
}
/*Navigation on episode pages*/
#section_header > .eps_paginator {
    background-color: #181A1C;
}
#section_header h2, #section_header h3 {
    color: #6c6c64;
    font-size: 10px;
    margin: 10px;
}
#section_header h2 b {
	font-family: 'Fredoka One', verdana;
	font-weight: normal;
    color: #fff;
    margin: 0 0 0 10px;
    font-size: 13px;
}

/*--------------------------------------*/
/*Specific to Articles*/
article hgroup > h2 {
    color: #fff;
}


article ul > li, article ol > li {
      color: #fff;
}
#rail_wrapper > .episode_navigation > ul > li, .component_part > .episode_navigation > ul > li {
background-color: #3f1257;
list-style: none;
margin: 0 0 1px;
padding: 0.5em 0 0.5em 1em;
}

/*--------------------------------------*/
/*FOOTER stuff*/

#main_wrapper > footer img{ border:none;}

#main_wrapper > footer > ul {
background-color: #4b1567;
}

#main_wrapper > footer > ul a:link, #main_wrapper > footer > ul a:visited, #main_wrapper > footer > ul > li + li::before {
color: white;
}

#hot_links_footer a {
    color:#044E8E;
}
.component_part > .component_part_primary {
margin-top: 0;
padding-top: 0;
padding-bottom: 2rem;
}

article > section, article > aside + aside {
	border: 0;
	background-color: #2e0c40;
}