@charset "UTF-8";

/* reset - preset */
html, body, p, table, tbody, td, tr, section, aside, figure, iframe, figcaption, hgroup, header, footer, nav, article, div, span, form, ul, ol, li, blockquote, img {
	margin: 0;
	padding: 0;
	border: none;
	vertical-align: baseline;	
}

section, header, footer, nav, aside, article, hgroup, figure, figcaption, aside { display: block; }


body {
	color: #333;
	font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 100%;
	line-height: 1.4;
	background-color: #fff;
}

p { margin-bottom: 1.5em; }

h1, h2, h3, h4, h5 {
	line-height: 1.4;
	margin-bottom: 1em;
}

.archivesearch {
    margin-top: 0.9em;
    margin-left: 1em;
    font-size: 1.3em;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) inset;
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 0.3em 0.6em;
    border: none;
}

#archiveHeader { float: left; }

h3 { text-transform:uppercase; }

a {
	text-decoration: none;
	color: #e2842c;
	-webkit-transition: all 0.2s ease-in;
	-moz-transition: all 0.2s ease-in;  
	transition: all 0.2s ease-in;
	text-decoration: none;	
}

a:hover { color: #fea14b; }
a:visited { color: #c5752a; }

a.btn {
	background-color: #e2842c;
	color: #fff;
    font-size: 110%;
	display: inline-block;
	padding: 0.7em 0.8em;
	margin: 1.5em 0;
}

blockquote {
	margin-bottom: 1em;
	border-left: 2px solid #e2842c;
	background-color: #f6f6ea;	
	padding: 1em;
	font-size: 90%;
	overflow: auto;
}


/* top bar */

#topbar {
	padding: 1.2em 0;
	color: #575e5b;
	
}

#topbar h1 {
	font-weight: 700;	
	margin: 0;
	font-size: 100%;
	text-transform: uppercase;
	float: left;
}

#topbar h1 a, #topbar h1 a:visited {
	color: #575e5b;	
}

#topbar h1 a:hover {
	color: #e2842c;	
}

#topbar h1 span {
	font-weight: normal;	
	text-transform:none;
}

nav { float: right; }

nav ul li {
	display: inline-block;
	margin-right: 0.5em;
    margin-right: 0.5em;
	font-size: 90%;	
}

nav ul li a, nav ul li a:visited {
	color: #575e5b;	
}

nav ul li a:hover {
	color: #e2842c;	
}

#intro {
	color: #fff;
	background: #000;
	position: relative;
	box-sizing: border-box;
}

#intro .containerInner {
	padding: 5em 0;	
	box-sizing: border-box;
}

.logo {
	width: 100px;
	height: 100px;
	background: transparent url('images/logo.png') no-repeat center center;
	float: left;
	vertical-align: top;
}

.tagline { float: left;	}

.tagline h1 {
	font-size: 270%;	
	text-transform: uppercase;
	margin: 0 0 0 0.5em;
	line-height: 1;
}
.tagline span {
	font-size: 270%;
	margin: 0 0 0 0.5em;		
}

#intro .containerInner {
	background: #000 url('images/bg-intro-photo.jpg') no-repeat center bottom;			
}

#intro .containerInner a.btn {
	margin: 5em 0;	
	display: block;
	float: left;
}

#currentEpisode {

}

#currentEpisode .containerInner {
	padding: 2em 0 0.5em 0;	
}

div.currentShowCover {
	display: inline-block;	
	vertical-align: top;
	margin-right: 30px;
	box-sizing: border-box;			
	-moz-box-sizing: border-box;
	border: 10px solid #fff;
	width: 212px;
	height: 212px;
	overflow: hidden;
}

div.currentShowCover img { margin: -10px 0 0 -10px; }

.showDetails {
	display: inline-block;	
	width: 700px;
	margin-bottom: 2em;
}

.showDetails ul { margin-bottom: 2em; }
.showDetails ul li {
	list-style: none;	
}

.showDetails h2 {
	margin-top: 0;
	margin-bottom: 0.5em;	
	font-size: 180%;
}

.showDetails .btn { font-size: 90%; float: right; margin-bottom: 0;}

.metainfo {
	font-size: 70%;	
	margin-bottom: 1.5em;
	color: #888;
}

/* Intense Debate Hacks */

.metainfo a:first-child{
	color: #fff;
	background: #e2842c;
	padding: 0.3em 0.5em;
	display: inline-block;
	position: relative;		
}

.metainfo a:first-child:after {
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	right: 20%;
	bottom: -5px;
	border-width:5px 5px 0 0;
    border-style:solid;
    border-color:#e2842c transparent;	
}
.comment-count {
	color: #fff;
	background: #e2842c;
	padding: 0.3em 0.5em;
	display: inline-block;
	position: relative;
}

.comment-count:after {
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	right: 20%;
	bottom: -5px;
	border-width:5px 5px 0 0;
    border-style:solid;
    border-color:#e2842c transparent;	
}

.mejs-container { margin-bottom: 2em; }

#banner {
	color: #fff;
	background: #5b2d26;
}

#banner h2 { font-weight: normal; }


#thankyou {
	text-align: center;	
}

#thankyou .containerInner {
	padding: 30px 0;
}
	

#thankyou span {
	color: #291f16;
	font-size: 200%;
	font-weight: bold;	
}

footer {
	
}

footer .containerInner {
	padding: 30px 0 30px 0;
	color: #fff;
}

footer .bio {
	padding-bottom: 15px;
	border-bottom: 1px solid #5a4d41;
}

footer .bio img {
	margin-right: 30px;
}

.footer-container {
	width: 219px;
	padding-left: 30px;	
	border-right: 1px solid #5a4d41;
	float: left;
	padding-bottom: 30px;
}

.footer-container:last-child {
	border-right: 1px solid transparent;	
}

.footer-container li {
	list-style: none;
	
}

.copyright { text-align: center; color: #ededed; font-size: 80%; margin: 2em auto;}

/* layout */

.embed-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
	margin-bottom: 2em;	
	width: 470px;
}

.embed-container iframe, .embed-container object, .embed-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.fl { float: left; }
.fr { float: right; }

.line-tan { background: transparent url('/images/bg-line-tan.png') repeat center top; }
.line-darkbrown { background: transparent url('/images/bg-line-darkbrown.png') repeat center top; }
.line-chocolate { background: transparent url('/images/bg-line-chocolate.png') repeat center top; }

.containerOuter {
	width: 100%;	
	overflow: auto;	
}

.containerInner {
	width: 1000px;
	margin: 0 auto;
	overflow: auto;	
}	

.col-left {
	padding-left: 30px;
	padding-right: 30px;
	border-right: 1px solid #f8f1eb;	
	width: 564px;
	float: left;
	padding-bottom: 2em;	
}

.col-right {
	padding-left: 30px;
	padding-right: 30px;
	width: 315px;
	float: left;
}

.col-left h3:after, .col-right h3:after {
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	bottom: 0;
    border-style:solid;
    border-color:#fff transparent;	
}

.col-left h3:after {
	right: 0;	
	border-width:0 0 12px 12px;	
}

.col-right h3:after {
	left: 0;	
	border-width:0 12px 12px 0;	
}

.col-left h3:after {
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	right: 0;
	bottom: 0;
	border-width:0 0 12px 12px;
    border-style:solid;
    border-color:#fff transparent;	
}

#mainContent { background-color: #fff; }

#mainContent .containerInner {
	border-left: 1px solid #f8f1eb;	
	border-right: 1px solid #f8f1eb;		
	position: relative;	
	padding: 30px;	
	box-sizing: border-box;
	-moz-box-sizing: border-box;
}

#mainContent .containerInner:before {
	content:"";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	left: 30px;
	top: 0;
	border-width:15px 15px 0;
    border-style:solid;
    border-color:#5b2d26 transparent;	
}

#mainContent h3 {
	font-weight: normal;
	padding: 1em 0 1em 1em;
	display: block;
	margin: 0 -30px 1em -30px;
	color: #fff;
	position: relative;
}

.relatedLinks li {
	list-style: none;
}

.showCard {
	display: inline-block;
	width: 212px;
	height: 212px;
	position: relative;
	overflow: hidden;	
	box-sizing: border-box;	
	-moz-box-sizing: border-box;
	border: 5px solid transparent;
	margin-right: 25px;
	margin-bottom: 25px;
}

.showCard:hover {
	box-sizing: border-box;	
	border: 5px solid #e2842c;	
}

.showCard:nth-child(4n+4) {
	margin-right: 0;
}

.showCard img { z-index: 0; margin: -5px 0 0 -5px;}

.showCard .shownumber { 
	z-index: 10;
	position: absolute;	
	font-size: 20px;
	left: 6px;
	top: 110px;	
	color: #fbba2c;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.9);
}

.showCard .overlay { 
	z-index: 10;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 48px;
	min-width: 190px;
	padding: 6px;
	background-color: rgba(0,0,0,0.8);
	color: #fff;
	font-size: 12px;
}

.sponsorBox {
	width: 100%;
	margin-bottom: 26px;
	padding-bottom: 0.5em;
	margin-top: 1.5em;
    clear: both;
}

.sponsorBox img { float: left; display: block; margin-right: 1em; margin-bottom:  10px; width: 180px;}

.sponsorBox span { font-size: 80%; color: #888;}

.chocolate { background-color: #5b2d26; }
.yellow { background-color: #fbba2c;}
.burntSienna { background-color: #83382b;}
.orange { background-color: #e2842c; }

.audioplayer-bar-played {
	background: #FBBA2C!important;
	background: -webkit-gradient( linear, left top, right top, from( #FBBA2C ), to( #C77128 ) )!important;
	background: -webkit-linear-gradient( left, #FBBA2C, #C77128 )!important;
	background: -moz-linear-gradient( left, #FBBA2C, #C77128 )!important;
	background: -ms-radial-gradient( left, #FBBA2C, #C77128 )!important;
	background: -o-linear-gradient( left, #FBBA2C, #C77128 )!important;
	background: linear-gradient( left, #FBBA2C, #C77128 )!important;
}

@media only screen and (max-width : 1000px) {
	
	.logo {
		width: 100px;
		height: 100px;
		background: transparent url('images/logo.png') no-repeat center center;
		vertical-align: top;
		display: block;
		margin: 0 auto;
		float: none;
		margin-bottom: 1em;
	}	
	.tagline { float: none; text-align: center; }
	.tagline h1	{ margin-left: 0; font-size: 180%; }
	.tagline span { line-height: 1.3; font-size: 150%;  margin-left: 0;  }

    #topbar h1 span { font-size: 80%; display: block; }
	
	nav { float: none; width: 100%; text-align: center; }
    nav ul li { margin-right: 0.3em; margin-right: 0.3em; }
	nav ul li a { font-size: 80%; }
	#topbar h1	{ float: none; text-align: center; }	
	
	#banner h2 {
		margin-left: 30px;	
	}
		
	#currentEpisode	.containerInner {
		box-sizing: border-box;
		padding: 15px;	
	}

    #mainContent .containerInner { padding: 15px; }
	
	div.currentShowCover {
		float: none;
		margin: 1em auto;
		width: 100%;
		text-align: center;
		border: none;
	}
	
	div.currentShowCover img {
		margin: 0 auto;
		display: block;
		border: 10px solid #fff;

	}

	.showCard {
		margin-right: 5px;
        margin-bottom: 5px;
	}	

	.showCard:nth-child(4n+4) {
		margin-right: 5px;
        margin-bottom: 5px;
	}	
	
	.showDetails { width: 100%; display: block;}
	.containerInner, .col-left, .col-right { width: 100%; margin: 0 auto; overflow: auto; box-sizing: border-box; }
	.footer-container { 
		border-width: 0; 
		display: inline-block; 
		-moz-box-sizing: border-box;		
		box-sizing: border-box;
		margin-bottom: 1em;
		padding-bottom: 0;
		width: auto;
	}
    .footer-container a { font-size: 80%; }
	
    footer .bio { padding: 0 30px 30px 30px; width: 100%; font-size: 90%; -moz-box-sizing: border-box; box-sizing: border-box;}	
		
	#bannerText p{ font-size: 120%; }	
	
	.col-left h3:before, .col-right h3:before {
		content:"";
		display: block;
		position: absolute;
		width: 0;
		height: 0;
		bottom: 0;
	
		border-style:solid;
		border-color:#fff transparent;	
	}
	
	.col-left h3:before {
		left: 0;	
		border-width:0 12px 12px 0;	
	}
	
	.col-right h3:before {
		right: 0;	
		border-width:0 0 12px 12px;	
	}	
	.introVideo, .introText{ width: 100%; padding: 30px; box-sizing: border-box; }
	.introText { margin-top: 0; font-size: 110%;}	
	.embed-container { width: 100%; }
	#intro .containerInner {
		background-size: cover; 
		text-align: center;
		padding: 1.5em 0;
		box-sizing: border-box;
		overflow: hidden;
	}	
}


@media only screen and (max-width : 400px) {
    .archivesearch { margin-bottom: 1em; margin-top: 0; margin-left:  1.3em;   }
}