@charset "UTF-8";
/* CSS Document for sub content pages wfsu.org */

/*color variables*/
$dark-blue:  #312c2c;
$medium-blue: #b3b3b3;
$light-blue: #ececec;
$main-grey: #535353;
$text-box: #fff;
$aux-link-color: #fff;
//$link-color: #782f40;
$link-color: #48A973;
$alt-link-color: #009BBA;
$lightGreyText: #999;
$mediumGreyText: #666;
$top-of-grey-bg: #777;
$bodycolor: #fafafa;

/*wfsu colors*/
 $wfsu-teal: #009BBA;
 $wfsu-lgreen: #48A973;
 $wfsu-dgreen: #405927;
 $wfsu-charcoal: #312c2c;
 $wfsu-purple: #4E3261;
 $wfsu-garnet: #782F40;
 $wfsu-yellow: #e9c31e;
 $wfsu-coral: #B8584C;

/*20% colors*/
 $wfsu-teal20: #007c95;
 $wfsu-lgreen20: #3a875c;
 $wfsu-yellow20: #ba9c18;

/*80% white colors*/
$anyGold: #fbf3d2;

$headlines: #000;
$subheadlines: #535353;
$lightheadlines: #fff;

$font-stack: "Helvetica Neue", Helvetica, Arial, sans-serif;

/*$heading-font-stack:    'Signika', sans-serif;*/
$heading-font-stack:   'Benton Sans',Arial,sans-serif;

/******/
/* Styles copied from the Grid example to make grid rows & columns visible.*/
/*these two styles mess with 3 boxes on top of index*/
	.row .row {
	  margin-top: 10px;
	  margin-bottom: 0;
	}
	[class*="col-"] {
	  padding-top: 15px;
	  padding-bottom: 15px;
	  /*purple box remove
	  background-color: #eee;
	  background-color: rgba(86,61,124,.15);
	  border: 1px solid #ddd;
	  border: 1px solid rgba(86,61,124,.2);
	  end remove*/
	}
/*//////// */

/*.premain-banner [class*="col-"]{
	  padding-top: 0!important;
	  padding-bottom: 0!important;
}
*/

main {}/*set separately from the home page which is in mains.css*/
.lead {
	line-height: 1.6;
	
}	
	
.sub-right-col {}
div.well.subnav {
	background-color:#fff!important;
}
div.well.subnav a {
	color: $wfsu-teal;
	cursor: pointer;
}
div.well.subnav a:hover {
	color: $wfsu-teal20;
}
.subnav ul {
    padding-left: 20px;
}
.subnav ul li {
	list-style:none;
	font-size:17px; font-size:1.7rem;
}
.subnav .uppercase-emph {
	font-style: normal;
    font-variant: normal;
    line-height: 21px;   line-height: 2.1rem;
    font-weight: 100;
    font-size: 16px;
    font-size: 1.6rem;
	font-family:$heading-font-stack;
}
/*caret class can be found in bootstrap default css*/
/*.caret-up {
	width: 0; 
	height: 0; 
	border-left: 4px solid rgba(0, 0, 0, 0);
	border-right: 4px solid rgba(0, 0, 0, 0);
	border-bottom: 4px solid;
	display: inline-block;
	margin-left: 2px;
	vertical-align: middle;
}*/
.expand-menu > a:first-of-type:link,.expand-menu > a:first-of-type:visited,.expand-menu > a:first-of-type:hover, .expand-menu > a:first-of-type:active {
	text-decoration: none!important;
}
.expand-menu a {
	cursor: pointer!important;
}
/*this is all that needs changing from the bootstrap .caret*/
.caretup {
    transform: rotate(180deg);
  }
.title-budge {
	display:block;
	margin-top:10px;
	margin-bottom:10px;
}
.breadcrumbs {
    margin-bottom: 0!important;
    padding-bottom: 0!important;
    font-size: 14px; font-size: 1.4rem;
}

.titleBox {
	background: $light-blue;
	padding: 0 5px;
}
.text-bg .titleBox {
	margin-left: -2%!important;
	margin-right: -2%!important;
	margin-bottom: 15px;
	font-weight: bold;
	padding: 0 2%;
}
/*.content-left section p, .content-left section blockquote p, .content-left section ul li, .content-left section ol li */.content-left section {
   font-size: 17px; font-size: 1.7rem;/* =17px */
}	
.sub-feat h1 {/*text-transform: capitalize;*/}
.sub-feat .text-bg {
    background-color: #fff;
    padding: 2%;
}
section.sub-feat img, section.sub-feat p {
    margin-bottom: 30px;
}
.sub-feat .text-bg {
	background-color:#fff;
	padding: 2%;
}
.sub-feat ul {
    list-style: none;
    margin-left: 0;
   /* padding-left: 1rem;*/
    text-indent: -10px;
    text-indent: -1rem;
}
.sub-feat ul li {
	display: block;
	list-style-image: none;
	list-style-type: none;
	margin-bottom: 15px;
}
.sub-feat ul li:before {
 content: "\0BB \020";
 }
.halfimg {max-width: 50%; float: left; margin-right: 20px; margin-bottom: 0!important;}
.local-newsroom h3.box-title, .content-start h3.box-title {margin-top:0;}

//television specific
.tv-highlights div:last-of-type, .UCevents div:last-of-type {border-bottom:none; margin-bottom:0;}
.tv-highlight-item div, .event-item div {font-size:16px; font-size:1.6rem;line-height:25px;line-height:2.5rem; text-align:left;}
.tv-feature {margin-top:25px;}
.tvimg {float:left; margin-right: 3%;}
.tvimg div {
	background-size: cover!important;
	background-position: center center!important;
	overflow: hidden;
	position: relative;
	height: 125px;
	width: 125px;
	padding-bottom: 0;
	margin-bottom: 15px;
}
.tv-highlight-item span {font-weight: 500; }
.preSeriesTitle, .seriesTitle {font-size: 19px; font-size: 1.9rem;}

.tv-box-plus-text a { color: #000; }
.tv-articl-title {font-weight: 500;}
.tv-box-text {color: $mediumGreyText; display: block;}
.tv-feature .cat-title { margin-top: 0; padding-top: 0}
.tv-feature .cat-title a { text-shadow: none; font-weight: normal;}
.lastEp {display: block;}
.lastEp a {background:$anyGold; padding: 5px;font-size: 14px; font-size: 1.4rem;      text-transform: uppercase;}
//support specific
//
//youtube
.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.pbs-video-put-last {padding-bottom: 59%!important;}

.bump {padding-left: 2%;}

.even-ul div:nth-child(odd) {
	background:#faf9f9;
}
.even-ul div {
	padding:20px;
}

.callout {background: #f4f4f4; border: 1px #ccc solid; padding:15px;}

/*sched and ep page listings*/
.sub-feat.schedDetail ul, .sub-feat.schedDetailSeries ul {
	text-indent: initial;
	position: relative;
	left:-35px;
}
.sub-feat.schedDetail ul li:before, .sub-feat.schedDetailSeries ul li:before, .minutes-and-moments ul li:before {
 content: " ";
 }
.sub-feat.schedDetail ul li, .sub-feat.schedDetailSeries ul li, .minutes-and-moments ul li {
	margin:0;
	padding:5px;
 }
.minutes-and-moments ul {width:100%!important; margin: 0; padding:0; }
.minutes-and-moments audio {margin-left:-10px;}
.minutes-and-moments ul li {padding-left:30px;
							padding-bottom:15px;}
.mm-questions span {display:block; padding-top:15px; padding-bottom: 15px;}

.mm-description .fa-youtube-square, .mm-description .fa-facebook-square, .mm-description .fa-flickr, .mm-description .fa-home, .mm-description .fa-pinterest-square, .mm-description .fa-twitter-square, .mm-description .fa-instagram  {
	  color: $wfsu-teal
}
.mm-description p:first-of-type {padding-top: 20px; }
.mm-agg span {
	display:block;
}
.mm-agg span:first-of-type {
	color:$lightGreyText;
}

.mm-agg div div {margin:20px 0;}
.mm-agg img {margin-bottom:15px!important; border-radius: 5px; }
.paginationDiv {text-align: center; width:100%; padding: 0 15px 0 25px; }
.pagination {text-align: center; }
.pagination  li {
	display: inline-block!important;
	/*width:29px;
	border:1px solid $wfsu-charcoal;*/
	text-indent: 2px;
	}
.pagination  li:before {content:none!important;}
.pagination li a {color: $wfsu-teal;}
.pagination li a:hover {color: $wfsu-teal20;}
.pagination li.selected a {background: $wfsu-lgreen!important; color: #fff;}
.sub-feat.schedDetail ul li:nth-child(even), .sub-feat.schedDetailSeries ul li:nth-child(even), .minutes-and-moments ul li:nth-child(even) {
	/*background: $anyGold;*/
	background: #eee;
}

/*logo resource page*/
.sunshine {background: $wfsu-yellow; color: #fff; padding:15px;}
.garnet {background: $wfsu-garnet;  color: #fff; padding:15px;}
.orange {background: $wfsu-coral;  color: #fff; padding:15px;}
.black {background: $wfsu-charcoal;  color: #fff; padding:15px;}
.blue {background: $wfsu-teal;  color: #fff; padding:15px;}
.light-green {background: $wfsu-lgreen;  color: #fff; padding:15px;}
.purple {background: $wfsu-purple;  color: #fff; padding:15px;}
.dark-green {background: $wfsu-dgreen;  color: #fff; padding:15px;}
.ed-orange {background: #FFA622;  color: #fff; padding:15px;}
.ed-green {background: #99cf16;  color: #fff; padding:15px;}
.ed-blue {background: #00B8F1;  color: #fff; padding:15px;}
.ed-teal {background: #00A7A9;  color: #fff; padding:15px;}
.ed-purple {background: #A154A0;  color: #fff; padding:15px;}
.ed-pink {background: #ED037C;  color: #fff; padding:15px;}

/*branding & logos*/
.colors .col-xs-4 {font-size: 85%;}

/*newsletter signup*/
.ctct-custom-form {padding-left:8px!important;}
.ctct-custom-form input, .ctct-custom-form button[type="submit"], .ctct-form-footer, .ctct-custom-form p {max-width: 280px;}

/*listen page*/
.trending {background: #fff; padding: 15px 20px 0;border: 1px solid #e3e3e3; margin-bottom:20px;}
.trending ul {padding-left:0; }
.trending ul li {list-style:none;border-bottom: 1px #ccc solid; padding-bottom: 15px; margin-bottom: 15px;}
.trending ul li:last-of-type {border-bottom:none;}

/**/
.donate .fa-heart  {
    color: #d65343!important;
    font-size: 13px!important;
	position: relative;
	top:-1px;
}
.display-block-on-small span {display: block; }

.additional-airdates  li:before {
 	content: "\02022 \020"!important;
 }
.additional-airdates li {margin-bottom: 2px!important;}

.tandc {position: relative; z-index: -1;}

.tandc, .tandc * {height:0;}
.pbs-player {
	padding-bottom: 48%;
	margin-bottom:25px;
}
@media (min-width: 450px) {
	/*newsletter signup*/
.ctct-custom-form input, .ctct-custom-form button[type="submit"], .ctct-form-footer, .ctct-custom-form p {max-width:inherit;}
	
.display-block-on-small span {display: inline;}

}

@media (max-width: 772px)and (min-width: 450px) {

	.tv-padding {padding-top:20px;}

}

@media (max-width: 772px)and (min-width: 600px) {
	.pbs-player {
		padding-bottom: 52%;
	}
}

@media (min-width: 773px) {
	.pbs-player {
	padding-bottom: 52%;
	}
	main {}
}
@media (min-width: 992px) {
	.pbs-player {
		padding-bottom: 51%;
	}
	.breadcrumbs {
    	margin-top: 0!important;
    	padding-top: 0!important;
	}
	//television specific
	.tv-highlight-item img, .event-item img { margin: 0 3% 2% 0; float:left; max-width:50%;}	
	.left-content {
		padding-right: 45px;
	}
	
	.mm-agg audio {max-width: 250px; }
}
@media (min-width: 1200px) {
	.pbs-player {
		padding-bottom: 52%;
	}
	.tvimg div {
	height: 200px;
	width: 200px;
	}
	/*episode and show pages*/
	
	.mm-agg audio {max-width: 200px; }
	.lastEp { padding-left:220px;}
}