/***********************/
/* LAYOUT */
/***********************/

/* 
SPECIFICITY NEEDED, remove once we deprecate the old shows package page 
.hasShowsSubNav #NavR_Header_Layout div#shows-nav 
*/

body {
	min-width:965px; /* - 15 for the scroll bar */
}

.lp_wrap,
.hasShowsSubNav #NavR_Header_Layout #shows-nav,
#NavR_Header_Layout #shows-nav .wrapper {
	width:1280px;
}

.lp_wrap {
	background:#fff;
}

a:-webkit-any-link { 
	text-decoration: none;
}

/***********************/
/* Article */
/***********************/

.article-detail {
	position:relative;
	background:#fff;
	padding:30px 15px 0;
	font-family: 'Lato', sans-serif;
}

.article-detail * { 
	box-sizing:border-box;
}

.article__title { 
	font-family: 'Oswald', sans-serif;
	font-weight:400;
	font-size:48px;
	line-height:70px;
	letter-spacing:0.3px;
	margin-bottom:40px;
	text-transform: none;
	display: block;
}

.article__title, 
.entry-meta { 
	color:#4a4a4a;
}

.presented-by,
.presented-by__bar {
	height:80px; /* it is IMPORTANT we set a height, to maintain ALL scroll calculations when .presented-by__bar is dynamically set to fixed */
	background: #fff;
}

.presented-by { 
	margin-bottom:25px;
	display:none;
}

.presented-by__divider {
	width:105px;
	border:1px solid #979797;
}

.presented-by__bar { 
	font-size:18px;
	padding:10px 0;
	z-index: 101;
}

.presented-by--spacing > li {
	margin-right:12px;
}

.presented-by--spacing > li:last-child {
	margin-right:0;
}

.presented-by--v-centered { 
	padding-top:19px;
}

/* TEMPORARY - REMOVE WHEN MPS TARGETS LOGO1 */
#mps-presented-by { 
	width:120px;
	height:60px;
}

.e-logo--xs {
	background:url('/resources/images/article/e-logo--xs.png') no-repeat;
	width:10px;
	height:29px;
	margin-top:15px;
}

.article-meta--centered { text-align:center; }

.article-meta--center .article__title,
.article-meta--center .entry-meta  { 
	margin-bottom:20px;
}

#social-bar--scroll-pinned { 
	width:30px; /* Fixes weird resize bug with right aligned blocks thinking width is 309px */
	/*display: none \9;*/
	 /* IE 8 + 9 */
}


.article-meta--centered .presented-by--spacing,
.article__banner {
	display:table;
	
}
.article-meta--centered #article-detail-social-icons { 
	height:30px;
	width:150px;
}

.article-meta--centered #article-detail-social-icons,
.article-meta--centered .article__banner,
.article-meta--centered .presented-by--spacing,
.article-meta--centered .presented-by__divider {
	margin-left:auto;
	margin-right:auto;
}

.article__banner {
	color:#fff;
	font-size:18px;
	line-height:20px;
	letter-spacing:0.4px;
	text-transform: uppercase;
	padding:5px 13px 8px;
}

.article__banner, 
.entry-meta { 
	margin-bottom:10px;
}

.article-meta--centered.has-branded-content .entry-meta,
.article-meta--centered .branded-content { 
	margin-bottom:15px;
}

.article__banner--exclusive {
	background:#169fa4;
}
.article__banner--breaking {
	background:#c21a00;
}
.article__banner--update {
	background:#f5a623;
}

.entry-meta { 
	font-size:14px;
	line-height:16px;
	letter-spacing: 0.3px;
}

.entry-meta__author { 
	text-transform: uppercase;
}

.entry-meta__time,
.categories,
a.categories__link,
.presented-by__bar,
.branded-content {
	color:#9b9b9b;
}

.branded-content { 
	font-size:15px;
	margin-bottom:12px;
}

.categories { 
	font-size:14px;
	margin-bottom:35px;
	text-align: center;
}

.categories__label {
	color: #5c5c5c;
}

.tune-in__text { 
	font-weight:900;
	padding-left: 80px;
}

.author-badge { 
	margin-right:10px;
	max-width:285px;
	max-height:143px;
	overflow: hidden;
}

.image-button,
.article_pinterest {
	position: absolute;
	background-color: #000;
	display: inline-block;
	padding:14px 15px 15px;
}

a.image-button--gallery {
	background-image:url('/resources/images/article/gallery_icon_pink_sprite.png');
	background-repeat:no-repeat;
	background-color:#ff24d1;
	background-position: right 0;	
    bottom: 0;
    right: 0;
    width:50px;
    height:50px;
}

.image__credits { 
	position: absolute;
	bottom:-16px;
	line-height:12px;
	font-size:10px;
	color:#878787;
	width:100%;
	text-align: center;
}

.article_pinterest { 
	bottom:0;
}

.post-content,
.athena__wrapper .mps-slot { 
	color:#666666;
	font-size:18px;
	line-height:30px;
	letter-soacing:0.09;
	margin-bottom:60px;
}

/* Alignment types */

.post-content--centered,
.post-content--curtain,
.thyme-comments,
.outbrain-widget,
.twitter-tweet,
.post-content--centered.cta,
.u--centered {
	margin-left:auto;
	margin-right:auto;
}

.post-content--left {}
.post-content--right {}

.post-content--curtain,
.post-content--curtain-full,
.post-content--centered {
	clear:both;
}

.text-block.post-content--curtain {
	width:790px; /* 1400 & 1280 & 980 framework*/
	padding:0;
}

.text-block p { 
	margin-bottom:17px;
}

.text-block p:last-child { 
	margin-bottom:0;
}

.post-content--grouped { 
	margin-bottom: 30px;
}

.post-content--groupedn-txt .author-badge {
	margin-right:15px;
}


.text-block, 
.athena__wrapper {
	padding-left:80px;
	padding-right:78px;
}

.text-block a,
.text-block a em {
	font-weight: 900;
	color:#0ea8cc;
}

.post-content__image { 
	position: relative;
}

.post-content__image--left { 
	margin-right:30px;
	margin-bottom:10px;
	max-width:50%;
	position: relative;
}

/***********************/
/* CALL TO ACTION Specific */
/***********************/

.cta { 
	background:#fbfbfb;
	padding-left:80px;
	position:relative;
}

.cta__thumb, 
.cta__video { 
	float: left;
	overflow:hidden;
	position: relative;
}

.cta__title {
	font-family: 'Oswald', sans-serif;
	font-size:36px;
	line-height:50px;
	color:#666;
	margin-bottom:5px;
	text-transform:none;
}

.cta__thumb { 
	width:150px;
	height:150px;
	margin-right:30px;
}

.cta__video {
	width:192px;
	max-height:108px;
	margin:21px 30px 21px 0;
}

.cta--legacy {
	height:150px;	
}

.cta--legacy .cta__text, 
.fw--md .cta--legacy .cta__text {
	float:none;
	height:100%;
	padding:0;
	max-width:100%;
}

.cta--legacy .cta__text > p { 
	display:table-cell;
}

.cta__text {
	padding: 16px 0 27px 0;
	margin-right:123px;
}

.cta__text,
.cta__text--video {
	max-width:517px;
}

.cta__text--video {
	margin:16px 81px 27px 0;
}

.cta a { 
	color: #0EA8CC;
	font-size : 21px;
	letter-spacing:0.5px;
	line-height:23px;
	font-weight: 700;
	display: block;
}

.cta:hover { 
	background:#dee0e3;
}

.post-content--curtain.cta {
	padding-left:230px;
	padding-right:230px;
}

.post-content--curtain .cta__text {
	margin-right:0;
	max-width:610px;
}

.post-content--curtain .cta__text--video {
	margin-right:0;
	max-width:568px;
}

.outbrain__title { 
	font-weight:400;
	font-size:25px;
	color:#9b9b9b;
	margin-bottom:15px;
}

.video__container { 
	position:relative;
	background: #f2f2f2;
}

/***********************/
/* RAIL Specific */
/***********************/

.rail { 
	width:300px;
	margin:0 15px; /* Needed since article-detail has 15px padding on either side */
	visibility: hidden; /* will be visible after dynamically placed */
	font-family: 'Oswald', sans-serif;
}

.rail__mps-ad { min-height:250px; background:#000; }
.rail__wrap { position: relative; }

#social-bar--scroll-pinned,
.rail--scrollable {
	position:absolute;
	top:0;
}

.rail__item {
	min-height:150px;
	margin-bottom:35px;
	position:relative;
	overflow:hidden;
}

.rail__title {
	background-color:#f6f6f6;
	border: 1px solid #ddd;
	border-bottom:0;
	width:100%;
	padding:20px 10px;
	font-size:22px;
	letter-spacing: 0.05em;
	font-weight:700;
	text-align: center;
	text-transform: uppercase;
	color: #0ea8cc;
	margin:40px 0 10px;
	position:relative;
	opacity:.9;
	overflow:hidden;
	z-index:10;
}
.rail__title-accent {
	background: #0ea8cc;
	bottom: 0;
	height: 6px;
	left: 110px;
	position: absolute;
	width: 77px;
}

.rail__text {
	margin:10px 10px 0;
	line-height:24px;
	font-size:16px;
}

.rail__photo_galleries,
.rail__news {
	max-height: 310px;
}
.rail__videos {
	max-height:279px;
}
.rail__photo-gallery--first,
.rail__news--first {
	max-height:390px;
}
.rail__videos--first {
	max-height:259px;
}

a.rail__link {
	max-height:200px;
	overflow:hidden;
	color:#666;
}
.rail__link--videos {
	max-height:169px;
	position: relative;
}

.rail__arrow, 
.video__arrow--sm { 
	background:url(/resources/images/article/related-video-play.png) no-repeat;
	display:block;
	position:absolute;
	left:50%;
	top:50%;
}

.rail__arrow {
	width:60px;
	height:60px;
	margin-top:-30px;
	margin-left:-30px;
}

.video__arrow--sm { 
	width:30px;
	height:30px;
	margin-top:-15px;
	margin-left:-15px;
	background-size:30px 30px;
}

[class ^="tpContainervideo"],
.tpPlayer { 
	width:100% !important;
}

.videoEmbedButton { 
	cursor: pointer;
	display: none;
	right :15px;
	left:inherit;
	z-index:801;
}

.cols--md-s [class ^="tpContainervideo"],
.cols--md-s .tpPlayer { 
	height: 506px !important;
}

.post-content--curtain-full [class ^="tpContainervideo"],
.post-content--curtain-full .tpPlayer { 
	height: 720px !important;
}	

/***********************/
/* SOCIAL ICONS */
/***********************/
/* TODO see if theres a way to utilize existing social bar w/o the ugly specificity */

#social-bar--scroll-pinned { 
	left:15; /* 15 for the 15px padding on .article-detail */
}

#article-detail-social-icons { 
	margin-bottom:35px;
}

#article-detail-social-icons li { 
	margin-right:10px;
}

#article-detail-social-icons li:last-child { 
	margin: 0;
}

#social-bar--scroll-pinned {
	opacity:0;
	z-index:100;
}

#social-bar--scroll-pinned.is-animating { 	
	will-change : opacity;
	transition: opacity .20s linear;
	-moz-transition: opacity .20s linear;
	-webkit-transition: opacity .20s linear;	
	opacity : 1;
}

#social-bar--scroll-pinned .cs-item,
#social-bar--scroll-pinned .cs-share { 
	display: block;
	float:none;
}

#article-detail-social-icons .cs-share,
#social-bar--scroll-pinned .cs-share { 
	background-image:url('/resources/images/article/article-detail-social.png');
	background-repeat:no-repeat;
	width:30px;
	height:30px;
	display: block;
	font-size:0;
}

#article-detail-social-icons .cs-sharetext,
#social-bar--scroll-pinned .cs-sharetext {
	display: none;
}

#article-detail-social-icons .cs-fb .cs-share:hover,
#social-bar--scroll-pinned .cs-fb .cs-share:hover {
	background-position: -30px 0;
}

#article-detail-social-icons .cs-ts .cs-share,
#social-bar--scroll-pinned .cs-ts .cs-share {
	background-position: 0 -30px;
}

#article-detail-social-icons .cs-ts .cs-share:hover,
#social-bar--scroll-pinned .cs-ts .cs-share:hover {
	background-position: -30px -30px;
}

#article-detail-social-icons .cs-gp .cs-share,
#social-bar--scroll-pinned .cs-gp .cs-share {
	background-position: 0 -60px;
}

#article-detail-social-icons .cs-gp .cs-share:hover,
#social-bar--scroll-pinned .cs-gp .cs-share:hover {
	background-position: -30px -60px;
}

#article-detail-social-icons .cs-email .cs-share,
#social-bar--scroll-pinned .cs-email .cs-share { 
	background-position: 0 -90px;
}

#article-detail-social-icons .cs-email .cs-share:hover,
#social-bar--scroll-pinned .cs-email .cs-share:hover { 
	background-position: -30px -90px;
}

#social-bar--scroll-pinned .cs-item, 
#article-detail-social-icons .cs-item {
	margin-left:0 !important; /* Overwrite someone elses !important */
}

#social-bar--scroll-pinned .cs-item { 
	margin-bottom:10px;
}

#article-detail-social-icons .cs-item:last-child,
#social-bar--scroll-pinned .cs-item:last-child,
#article-detail-social-icons #email-bttn-article-detail-social-icons,
#social-bar--scroll-pinned #email-bttn-article-detail-social-icons { 
	margin:0;
}

#article-detail-social-icons #embed-bttn-wrap-article-detail-social-icons,
#social-bar--scroll-pinned #embed-bttn-wrap-article-detail-social-icons,
.u--disabled {
	display: none;
}

/***********************/
/* Polls */
/***********************/
/* Remove specificity once we get rid of old article views */
/* TECH DEBT redo polls css */

.article-detail .poll-outer-wrap,
.article-detail .poll-wrap,
.article-detail .poll-blog,
.article-detail .poll-outer-wrap .poll-wrap .poll-blog h4,
.article-detail .poll-questions,
.article-detail .poll-questions label.poll-choice-text,
.article-detail .poll-questions label.poll-choice-text p,
.article-detail .poll-bar,
.article-detail .poll-results-table label.poll-choice-text p,
.article-detail .poll-results-table label.poll-choice-text {
	width:100%;
}

.article-detail .poll-bar.result { 
	width:85%;
}


.article-detail .poll-outer-wrap .poll-wrap .poll-blog h4 { 
	background: url('/resources/polls/images/polls_icon.png') #000 no-repeat;
	background-position: right 0;
	font-size:24px;
}

.article-detail .poll-questions label.poll-choice-text p,
.article-detail .poll-results-table label.poll-choice-text p,
.article-detail .poll-question-title,
.article-detail .poll-blog .vote,
.article-detail .poll-outer-wrap .poll-wrap .poll-blog h4, 
.article-detail .poll-results-table .voted, 
.outbrain__title {
	font-family: 'Lato', 'Arial Narrow', sans-serif;
}

.article-detail .poll-questions label.poll-choice-text p,
.article-detail .poll-results-table label.poll-choice-text p { 
	font-size:18px;
	/*line-height:35px;*/
	color:#000;
}

.article-detail .poll-question-title { 
	font-size:20px;
}

.article-detail .poll-blog .vote {
	font-size:21px;
	line-height:34px;
	margin:0 auto;
	display:block;
}

.article-detail .poll-questions label.poll-choice-text:before,
.article-detail .poll-results-table label.poll-choice-text:before { 
	height:29px;
}

.article-detail .poll-results-table .percentage-bar { 
	margin-top:4px;
	margin-left:38px;
	color:#000;
}

.article-detail .poll-questions,
.article-detail .poll-results-table { 
	background-position: right bottom;
}

/***********************/
/* Utilities */
/***********************/

.u-lc { text-transform: none; }

.link--full,
.image--full,
.link--full-takeover { 
	display:block;
	width:100%;
	outline:none;
}

.link--full-takeover {
	position: absolute;
	height:100%;
}

.table__wrapper,
.cta--legacy .cta__text,
.fw--md .cta--legacy .cta__text {
	display:table;
}

.table__inner,
.cta--legacy .cta__text > p {
	display:table-cell;
	vertical-align:middle;
}

/***************************************/
/* ------ 980 Framework Logic -------  */
/***************************************/
/* No longer using media queries, due to the many different business logic
 * requirements which dictate "framework" size aka 980 "look" vs 1280 "look", 
 * which no longer really is dependant on screen size, but on, skins, no skins,
 * locked to 3, IE etc. Rather, we will switch between the 2 frameworks based upon 
 * if its .fw--md (980).
 */

/* ------------- START max-width: 1279px (980 framework)  ------------- */

.fw--md .lp_wrap,
.fw--md .hasShowsSubNav #NavR_Header_Layout #shows-nav {
	width:980px;
}

.fw--md .article__title { 
	font-size:32px;
	letter-spacing:0.8;
	line-height:47px;
}

.fw--md .rail.column {
	margin-right:50px;
}

.fw--md .rail.column--right {
	margin-left: 50px;
}

.fw--md .post-content,
.fw--md .rail {
	margin-bottom:50px;
}

.fw--md .post-content--grouped { 
	margin-bottom:30px;
}

.fw--md .post-content { font-size:17px; }

.fw--md .post-content:last-child {
	margin:0;
}

.fw--md .text-block, 
.fw--md .athena__wrapper {
	padding-left:72px;
	padding-right:28px;
}

.fw--md .text-block.post-content--curtain { 
	padding:0;
}

.fw--md .post-content__image--left { 
	max-width:100%;
	margin-right:auto;
	margin-left:auto;
	margin-bottom:30px;
	float:none;
}
.fw--md .post-content__image--left .image--full{ 
	margin-right:auto;  /* If widh has been dynamically used / needs to be centered */
	margin-left:auto;
}

.fw--md .cols--md-sm .video__container {
	width:600px;
}

.fw--md .post-content--curtain-full [class ^="tpContainervideo"],
.fw--md .post-content--curtain-full .tpPlayer { 
	height: 551px !important;
}	

.fw--md .videoEmbedButton { 
	right :15px;
	left:inherit;
}

.fw--md .cta { 
	padding-left:72px;
	height:100px;
}

.fw--md .cta a { 
	font-size:17px;
	line-height:20px;
}

.fw--md .cta__title { 
	font-size:24px;
	line-height:21px;
	margin-bottom:6px;
}	

.fw--md .cta__thumb {
	width:100px;
	height:100px;
	margin-right:20px;
}

.fw--md .cta__video { 
	width:140px;
	max-height:79px;
	margin-right:20px;
	margin-top:11px;
}

.fw--md .cta__text {
	padding: 12px 0 28px 0;
	margin-right:28px;
	max-width:340px;
}

.fw--md .cta--legacy .cta__text { 
	max-width: 100%;
}

.fw--md .cta__text--video {
	margin-right:28px;
	margin-top:11px;
	max-width:340px;
}	

.fw--md .post-content--curtain.cta { 
	padding-left:80px;
	padding-right:80px;
}

.fw--md .post-content--curtain .cta__text {
	margin-right:0;
}

.fw--md .cols--md-s [class ^="tpContainervideo"], 
.fw--md .cols--md-s .tpPlayer{ 
	height:338px !important;
}

.fw--md .article-detail .poll-bar.result { 
	width:77%;
}

.fw--md .article-detail .poll-questions label.poll-choice-text p,
.fw--md .article-detail .poll-results-table label.poll-choice-text p {
	text-overflow:inherit;
	overflow: visible;
	white-space: normal;
}

.fw--md .tune-in__text { 
	padding-left: 72px;
}

/* ------------- START min-width: 1400px  ------------- */

@media screen and (min-width: 1400px) {
	.post-content--curtain-full [class ^="tpContainervideo"],
	.post-content--curtain-full .tpPlayer { 
		height: 790px !important;
	}
}

/* ------------- START IPAD  ------------- */
/*
Since we arent actually setting a meta viewport to device width of 768, 
the device width thinks we are at the 980 framework. So media queries wont work using max-width : 768, 
*/

@media only screen and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) {

	.post-content--curtain {
		width:634px;
	}

	.post-content__image--left { 
		max-width:500px;
	}	

	.text-block {
		padding-left:20px;
		padding-right:20px;
		font-size: 20px;
		line-height:35px;
	}

	.author-badge { 
		margin-top:15px;
	}
}