/* @override http://5thcolumn.mayfielddigital.co.uk/wp-content/themes/the-fifth-column/_css/default.css
	http://www.thefifthcolumn.co.uk/wp-content/themes/the-fifth-column/_css/default.css */

/* 
Theme Name: The Fifth Column
Theme URI: http://www.studiomister.com
Description: WordPress theme for The Fifth COlumn website
Author: David Cole, Mayfield Digital
Author URI: http://www.mlayfielddigital.co.uk
Version: 1.0 
. 
You may not use, copy or distribute this theme, its associated assets or associated content in any form without explicit written permission of the copyright holder.
. 
*/  

/* RESET */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, nav, section, article, header, footer, section, header, footer, article, aside, hgroup {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 1em;
	vertical-align: baseline;
	background: transparent;
	font-weight: normal;
} 
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none;  }
blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; }
:focus{ outline: 0; }
ins{ text-decoration: none; }
del{ text-decoration: line-through; }
table{ border-collapse: collapse; border-spacing:0; }
a{ text-decoration: none; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section{ display: block; }

html{
	font-family: Helvetica, Arial, sans-serif;
	font-size: 62.5%;
	background-color: #ffffff;
	-webkit-font-smoothing: antialiased;
}
/* allows us to specify font sizes as EMs - 1em = 1px */

input, textarea{ font-family: Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -webkit-appearance: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; margin: 0px; }
/* inputs seem to need font family specified separately, and iOS seems to like to do its own thing */

img { -ms-interpolation-mode: bicubic; }
/* takes care of image resizing issues in Internet Explorer */

p, h1, h2, h3, h4, h5, h6, h7, li, li li, li ul, li ul li, label, dd, dt, input {
	font-size: 0.68em;
}
/* helps take care of unexpected effects due to inheritence of font sizes */ 



/* ****************************************** NOTES ******************************************* */

/*

COLOUR PALLETTE:

	Yellow: #fdd153
	Aqua: #70cbcc
	Peppermint: #9edaaa
	Peach: #fd9353
	Pink: #f76b6b
	
	Light blue: #ecf0f4
	
	Light buff grey: #edebe6 (used in main content area)
	Mid buff grey: #57574b (used in hero panel, contributors panel and footer)
	Dark buff grey: #3b3b33 (used in hero panel below main image and footer small text panel)
	Darkest buff grey: #313123 (used in homepage strand panels)
	Dark blue grey: #383a3e (used in Editor picks and sites we like panels)

*/

/* ************************************** COMMON ELEMENTS ************************************** */

#container{
		
}

#banner_panel, #hero_panel, #player_panel, #main, #header_nav, #footer .logo_panel, #footer nav, #footer_extras_container{
	width: 980px;
	margin-left: auto;
	margin-right: auto;
}

input[type=email], input[type=text], textarea, input.email, input.text{
	color: #bbbbbb;
	
	-webkit-transition: color .4s ;
	-moz-transition: color .4s;
	-o-transition: color .4s;
	transition: color .4s;	
}

input[type=email]:focus, input[type=text]:focus, textarea:focus, input.email:focus, input.text:focus{
	color: #000000;
}

a, input[type=submit], input[type=image]{
	-webkit-transition: opacity .4s ;
	-moz-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;
	cursor: pointer;
	color: #000000;
}

a:hover, input[type=submit]:hover, input[type=image]:hover{
	opacity: 0.4;
	filter: alpha(opacity = 40);
}

a.no_hover:hover{
	opacity: 1;
	filter: alpha(opacity = 100)
}

/* background elements - this is to allow the background colours to stretch to the edge of the browser - it's a bit hacky, sorry! */

#header_container, #hero_container, #header_nav_container, #main_container, #player_panel_container, #footer{
	margin-left: 18px;
	margin-right: 18px;
	
	overflow: hidden;
	clear: both;
}

#header_container{
	background: url(_img/header_container_bg_2.png) top no-repeat;
}

#header_nav_container{
	background: url(_img/header_nav_bg_new1.png) top repeat-x;
}

#page #header_nav_container{
	border-bottom: 1px solid #dedede;
}

#hero_container{
	background: #0d2139;
}

#main_container{
	background: url(_img/main_container_bg.png) center repeat-y;	
}

#player_panel_container{
	display: none;
	border-top: 1px solid #ffffff;
	background: #1b1b19;
}

#footer{
	background: #a6a6a8 url(_img/footer_container_bg.png) bottom no-repeat;
}

#footer_nav_container{
	background: url(_img/footer_nav_bg_new.png) top repeat-x;
}

/*
#footer_logo_panel_container, #footer_nav_container, #footer_extras_container
*/

/* IE7 hacks (also see separate IE7 stylesheet - you're gonna love it! */

.ie_only{
	display: none;
}

/* hide certain elements from mobile devices (smartphones & ipad) and vice versa */

.only_mobile{
	display: none;
}

.mobile .not_mobile{
	display: none;
}

.mobile .only_mobile{
	display: block;
}



/* ************************************** HEADER ELEMENTS ************************************** */

/* header panel */

#banner_panel{
	
}

/* latest tweet */

#latest_tweet{
	overflow: hidden;
	height: 6px;
	padding: 14px 0px 0px 0px;

	background: #000000;
	color: #ffffff;
}

#latest_tweet img{
	float: left;
	margin-right: 14px;
	vertical-align: middle;
}

#latest_tweet h3{
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	color: #fdd153;
	font-size: 2.4em;
	text-transform: uppercase;
	float: left;
	margin-right: 28px;
	line-height: 16px;
}

#latest_tweet p{
	float: left;
	width: 789px;
	margin-top: 3px;
	font-size: 1.1em;
}

#latest_tweet a{
	color: #fdd153;
}

/* newsletter subscription */

.newsletter_signup{
	float: left;
	overflow: hidden;
	width: 561px;
	height: 15px;
	background: #006652;
	color: #000000;
	padding: 10px 14px 0px 0px;
}

.rice_logo{
	float: right;
	overflow: hidden;
	width: 50px;
	height: 20px;
	color: #000000;
	padding: 30px 14px 0px 0px;
}

.newsletter_signup h3{
	float: left;
	margin-top: 5px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	color: #000000;
	font-size: 2.4em;
	text-transform: uppercase;
}

.newsletter_signup form{
	float: right;
	margin-top: -3px;
}

.newsletter_signup input[type="email"], .newsletter_signup input.email{	
	margin-right: 16px;
	border: 1px solid #e0e0e0;
	padding: 8px;
	font-size: 1.2em;
	width: 181px;
}

.newsletter_signup input[type="submit"]{
	position: relative;
	top: 5px;
	border: none;
	padding: 0px;
	background: none;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	color: #000000;
	font-size: 2.4em;
	text-transform: uppercase;	
}

/* social share links panel */

.social_share{
	float: right;
	overflow: hidden;
	width: 387px;
	height: 11px;
	padding: 15px 0px 0px 18px;
	background: #ecf0f4;
}

.social_share h3{
	float: left;
	margin-right: 12px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.4em;
}

.social_share .addthis_toolbox, .social_share .share_buttons{
	float: right;
	margin-left: 8px;
}

.social_share .share_buttons img{
	margin-left: 4px;
}
	
/* logo & strapline */

.logo_panel{
	position: relative;
	clear: both;
	overflow: hidden;
	padding: 0px 0px 10px 0px;
}

.logo_panel h2{
	position: absolute;
	bottom: 23px;
	left: 250px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	color: #333;
}

.logo_panel h4{
	position: absolute;
	bottom: 65px;
	right: 433px;
	color: #fdd153;
}


.today {
	font-family:arial;
	font-size: 0.8em;
	line-height:normal;
	color:#333333;
	display:block;
	clear:both;
	margin:0 0px 15px 0;
	}	
	
	.today a {
	text-decoration:none;
	font-size:1.5em;
	font-weight:600;
	color:#333333;
	}
.today a:hover {
	color:#666666;
	}
/* search form */

.logo_panel .search{
	position: absolute;
	right: 200px;
	bottom: 0px;
	width: 250px;
	height: 86px;
}
.logo_panel .rice{
	position: absolute;
	right: -1px;
	bottom: 35px;
	width: 142px;
	height: 40px;
}

.logo_panel .search h3{
	margin-bottom: 14px;
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 1.5em;
}

.logo_panel .search form{
	border: 1px solid #e0e0e0;
	padding: 10px;
	width: 170px;
	overflow: hidden;
}

.logo_panel .search input[type=text], .logo_panel .search input.text{
	float: left;
	width: 140px;
	border: 0px;
	font-size: 1.2em;
}

.logo_panel .search input[type=image]{
	float: right;
}

/* ************************************** MAIN NAVIGATION MENU ************************************** */
.img_l{
	float:left;
	padding: 15px 15px 15px 0;
	clear:both;
	}

.img_l1{
	float:left;
	padding: 0px 15px 15px 0;
	clear:both;
	}
#header_nav ul{
	overflow: hidden;	
	background: url(../_img/header_nav_bg_new1.png) top repeat;
}

#footer nav li, #header_nav li{
	float: left;
	height: 28px;
	padding: 10px 18px 0px 18px;
	font-family: Helvetica, Arial, sans-serif;
	text-transform:uppercase;
	
	font-size: 1.9em;
}
#footer nav li, #header_nav H1{
	float: left;
	height: 28px;
	padding: 10px 18px 0px 18px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	
	font-size: 1.9em;
}

#header_nav li{
	border-right: 1px solid #dedede;
	
	background-image:url(_img/header_nav_bg_new1.png);
	

	font-size: 1.2em;
}
#header_nav l{
	background: #ffffff;
	border-right: 1px solid #dedede;
	
	
}
#footer nav li:nth-of-type(1), #header_nav li:nth-of-type(1){
	padding-left: 0px;	
}

#header_nav li.last{
	border-right: none;
}

/* ************************************** HERO PANEL ************************************** */

#hero_panel{
	overflow: hidden;
	clear: both;
	background: #0d2139;
}

#homepage #hero_panel{
	height: 285px;
}

#homepage #hero_panel1{
	height: 270px;
}

#strand #hero_panel, #podcast #hero_panel, #archive #hero_panel{
	position: relative;
	height: 217px;
	background-image: url(_img/banner_top.png);
}

#hero_panel .container{
	position: absolute;
	bottom: 21px;
	left: 14px;
	width: 375px;
}

#hero_panel .container h1{
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 4.7em;
	color: #ffffff;
	margin-bottom: 28px;
	line-height: 0.9;
}

#hero_panel .container p{
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.3em;
	color: #ffffff;
}

#hero_panel .container img{
	position: absolute;
	left: 0px;
	top: 0px;
}

/* main carousel panel */

#main_carousel{
	position: relative;
	float: left;
	width: 980px;
	height: 285px;
	overflow: hidden;
	background: #0e0e0e;
}

#main_carousel .carousel_nav{
	position: absolute;
	z-index: 200;
	top: 0px;
	right: 0px;
	
}

#main_carousel .carousel_nav img{
	background: #fdd153;
	padding: 21px 22px 21px 22px;
	
	cursor: pointer;
	
	-webkit-transition: opacity .4s ;
	-moz-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;	
}

#main_carousel .carousel_nav img:hover{
	opacity: 0.4;
	filter: alpha(opacity = 40);
}

#main_carousel .carousel_pagination{
	position: absolute;
	top: 286px;
	right: 21px;	
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.4em;
	color: #70cbcc;
	
}

#main_carousel .carousel_pagination i{
	margin-right: 1px;
	margin-left: 2px;
	font-size: 0.65em;
	color: #ffffff;
	font-style: normal;
}

#main_carousel .carousel_slides{
	position: relative;
	overflow: hidden;
	width: 670px;
	height: 285px;
	-webkit-transform: translate3D(0px,0px,0px);
}

#main_carousel .carousel_slides article{
	display: none;
	position: absolute;
	top: 0px;
	left: 0px;
	width: 670px;
	height: 274px;
}

#main_carousel .carousel_slides .first{
	display: block;	
}

#main_carousel .carousel_slides article a{
	display: block;
}

#main_carousel .carousel_slides article h1{
	position: absolute;
	bottom: 86px; left: 0px; right: 0px;
	padding: 12px 21px 9px 21px;
	/* margin-left: 21px; margin-right: 21px; */
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 3.2em; color: #70cbcc;
	/* background: rgba(0,0,0,0.5); */
	background:  transparent url(../_img/carousel-slide-header-bg.png);
}


#main_carousel .carousel_slides article h2{
	position: absolute;
	bottom: 16px; left: 0px; right: 0px;
	padding: 12px 21px 9px 21px;
	/* margin-left: 21px; margin-right: 21px; */
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif; text-transform: uppercase; font-size: 1.5em; color: #70cbcc;
	/* background: rgba(0,0,0,0.5); */
	background:  transparent;
}


#main_carousel .carousel_slides article p{
	position: absolute;
	top: 286px;
	width: 550px;
	margin-left: 21px;
	margin-right: 21px;
	/*
	font-family: 'LeagueGothicRegular', Helvetica, Arial, sans-serif;
	font-size: 2.6em;
	*/
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	font-size: 1.5em;
	line-height: 1.2;
	color: #ffffff;
}

#main_carousel .carousel_slides article b{
	text-transform: uppercase;
	margin-left: 12px;
	color: #70cbcc;
	/*
	font-size: 0.75em;
	*/
}

/* introduction panel */

#introduction{
	position: relative;
	float: right;
	width: 310px;
	height: 360px;
	overflow: hidden;
}

#introduction h1{
	height: 40px;
	overflow: hidden;
	padding: 15px 24px 0px 24px;	
	background: #3b3b33;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.9em;
	color: #fdd153;
}

#introduction p{
	margin-top: 28px;
	margin-left: 24px;
	margin-right: 8px;
	/*
	font-family: 'LeagueGothicRegular', Helvetica, Arial, sans-serif;
	font-size: 2.6em;
	*/
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	font-size: 2.3em;
	line-height: 1.1;
	color: #ffffff;
}

#introduction p a{
	color: #fdd153;
	text-transform: uppercase;
}

#introduction p:last-of-type{
	position: absolute;
	bottom: 14px;
	left: 0px;
}

/* ***************************************** PLAYER REVEAL PANEL ***************************************** */

#player_panel{
	position: relative;
	overflow: hidden;
	height: 98px;
	padding: 32px 0px 32px 0px;
	background: #1b1b19;	
}

#player_panel article{
	position: relative;
	display: none;
	width: 638px;
}

#player_panel article a{
	display: block;	
}

#player_panel article img{
	float: left;
	border-bottom: 4px solid #ffffff;
}

#player_panel article h2{
	margin-left: 145px;
	margin-bottom: 7px;
	font-size: 1.1em;
	text-transform: uppercase;
	color: #ffffff;
}

#player_panel article h1{
	margin-left: 145px;
	font-size: 1.8em;
	line-height: 1.2;
	color: #ffffff;
}

#player_panel article p{
	position: absolute;
	top: 63px;
	left: 0px;
	width: 493px;
	margin-left: 145px;
	font-size: 1.2em;
	line-height: 1.2;
	color: #ffffff;
}

#player_panel .player_controls{
	position: absolute; top: 33px; left: 670px;
}

#player_panel audio{
	width: 278px; height: 42px;
}

#player_panel_close_btn{
	position: absolute; top: 0px; right: 0px;
	-webkit-transition: opacity .4s ; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
	cursor: pointer;
}

#player_panel_close_btn:hover{
	opacity: 0.4; filter: alpha(opacity = 40);
}

/* ***************************************** MAIN PANEL ***************************************** */

#main{
	overflow: hidden;
	background: url(_img/main_panel_bg.png) repeat-y;
}

/* ***************************************** CONTENT PANEL ***************************************** */

#content_panel{
	float: left;	
	width: 670px;
	margin-bottom: 74px;
	background: #ffffff;
}

/* content header panel */

#content_header{
	background: #edebe6;
	padding: 12px;
}

#content_header.share_subscribe ul{
	margin-top: 5px;
	margin-bottom: 15px;
	overflow: hidden;
}

#content_header.share_subscribe li{
	display: inline;
	float: right;
	font-size: 1.1em;
	margin-left: 18px;
}

#content_header.share_subscribe li a{
	text-decoration:  underline;
}

#content_header_share{
	clear: both;
	overflow: hidden;
	background: #dfddd8;
	padding: 3px 8px 1px 4px;
}

#content_header_share .addthis_toolbox, #content_header_share .share_buttons{
	float: right;	
	margin-top: 5px;
	margin-left: 8px;
}

#content_header_share .share_buttons img{
	margin-left: 4px;
}

#content_header.share_subscribe h1{
	float: left;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 3.2em;
	color: #3b3b33;
}

#content_header.sort{
	overflow: hidden;
	padding-top: 43px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 3.2em;
	color: #3b3b33;
}

#content_header.sort h1{
	float: left;
	padding: 3px 56px 1px 4px;
	margin-right: 1px;
}

#content_header.sort li{
	display: block;
	float: left;
	margin-right: 1px;
}

#content_header.sort li a{
	display: block;
	float: left;
	padding: 3px 35px 1px 16px;
	background-image: url(../_img/sort_ascending_icon.png);
	background-position: right;
	background-repeat: no-repeat;
	color: #3b3b33;
}

#content_header.search h1{
	padding: 3px 4px 1px 4px;
}

#content_header.archives li a.selected{
	background-color: #ffffff;
}

/* podcast list */

#podcast_list{
	
}

#podcast_list article{
	clear: both;
	position: relative;
	overflow: hidden;
	margin: 12px 12px 0px 12px;
	padding: 12px;
	background: #edebe6;
}

#podcast_list article .left{
	float: left;
	width: 134px;
}	

#podcast_list article .right{
	float: left;
	width: 472px;
}	

#podcast_list article h2{
	margin-bottom: 10px;
	margin-left: 16px;
	font-size: 1.2em;
	color: #4d545e;
}

#podcast_list article h1{
	margin-bottom: 13px;
	margin-left: 16px;
	font-size: 2.4em;
	font-weight: bold;
	text-decoration: underline;
	text-transform: uppercase;
}

#podcast_list article p{
	margin-left: 16px; margin-bottom: 13px;
	font-size: 1.1em;
	line-height: 1.2;
	
}

#podcast_list article p a img{
	margin-right: 5px;
}

#podcast_list article p strong{
	font-weight: bold;
	font-size: 1.3em;
}

#podcast_list article ul{
	/*
	position: absolute;
	left: 162px;
	bottom: 12px;
	*/
	overflow: hidden;
	margin-left: 16px;
}

#podcast_list article li{
	display: block;
	float: left;
	margin-right: 1px;
}

#podcast_list article li a{
	display: inline-block;
	padding: 6px 34px 6px 34px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	color: #57574b;
}

#podcast_list article a.play{
	background: #ffffff url(../_img/play_icon.png) left center no-repeat;
}

#podcast_list article a.download{
	background: #ffffff url(../_img/download_icon.png) left center no-repeat;
}

#podcast_list article a.comments{
	background: #ffffff url(../_img/podcast_list_comments_icon.png) left center no-repeat;
}

#podcast_list article li.mobile_only{
	display: none;	
}

.mobile #podcast_list article li.mobile_only{
	display: block;	
}

.mobile #podcast_list article li.not_mobile{
	display: none;	
}

/* audio player in podcast list */

#podcast_list .mejs-container{	
	-webkit-transition: opacity .4s ; -moz-transition: opacity .4s; -o-transition: opacity .4s; transition: opacity .4s;
}

#podcast_list .mejs-container:hover{
	filter: alpha(opacity = 40);
	opacity: 0.4;
}

.mobile #podcast_list article audio{
	width: 0px; height: 0px;
	display: none;
}

/* main article / podcast */

#main_article{
	overflow: hidden;
	padding: 12px;
	margin: 12px;
	background: #edebe6;
}

#page #main_article{
	background: #f6f5f4;
}

#main_article header h2{
	margin-bottom: 10px;
	font-size: 1.2em;
	color: #4d545e;
}

#main_article header h1{
	margin-bottom: 13px;
	font-size: 2.4em;
	font-weight: bold;
	text-decoration: underline;
	text-transform:  uppercase;
	color: #333;
}


#main_article h1, #main_article h2, #main_article h3, #main_article h4, #main_article h5{
	margin-bottom: 13px;
	font-size: 1.5em;
	line-height: 1.2;
	font-weight: normal;
}

#main_article h3{
	margin-top: 26px;
	font-size: 1.8em;
}

#main_article h4{
	margin-top: 26px;
	font-size: 1.5em;
}

#main_article p{
	margin-bottom: 13px;
	font-size: 1.4em;
	line-height: 1.4;
}

#main_article p strong{
	font-weight: bold;
}

#main_article h6{
	font-size:1.8em;
	font-weight:bold;
	color: #000;
}

#main_article > ul, #main_article > ol, #transcript > ul, #transcript > ol{
	margin: 26px;
	padding-left: 18px;
}

#main_article > ul, #transcript > ul{
	list-style: square;
}

#main_article > ol, #transcript > ol{
	list-style: decimal;
}

#main_article > ul > li, #main_article > ol > li, #transcript > ul > li, #transcript > ol > li{
	margin-bottom: 6px;
	font-size: 1.1em;
	line-height: 1.2;
}

#main_article blockquote{
	margin: 26px;
	font-size: 1.1em;
	line-height: 1.2;
}


.transcript_link a{
	font-weight: bold;
}

#transcript{
	display: none;
	margin-bottom: 32px;
}

/* article image */

#main_article .wp-post-image{
	float: left;	
}

/* audio */

#media{
	float: right;	
}

#media .mejs-container{
	margin-bottom: 1px;
}

#media li{
	width: 278px;	
}

#media li a{
	display: block;
	margin-top: 1px;
	padding: 11px 8px 11px 34px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.1em;
	color: #57574b;
}

#media li.mobile_only{
	display: none;	
}

.mobile #media li.mobile_only{
	display: block;	
}


#media li.share{
	position: relative;
	overflow: hidden;
	margin-top: 1px;
	padding: 11px 8px 11px 34px;
	width: 236px;
	background: #ffffff url(../_img/embed_icon.png) left center no-repeat;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.1em;
	color: #57574b;
}

#media li.share a{
	position: absolute; left: 0px; top: 11px;
	margin: 0px;
	padding: 0px;
	background: none;
	font-size: 1em;
}

#media li.share a.twitter{
	left: 88px;
}

#media li.share a.facebook{
	left: 116px;
}

#media li.share a.google{
	left: 144px;
}

#media li a.play{
	background: #ffffff url(../_img/play_icon.png) left center no-repeat;
}

#media li a.download{
	background: #ffffff url(../_img/download_icon.png) left center no-repeat;
}

#media li a.share{
	background: #ffffff url(../_img/embed_icon.png) left center no-repeat;
}

#media li a.stream{
	background: #ffffff url(../_img/stream_icon.png) left no-repeat;
}

#media audio{
	width: 278px; height: 42px;
}

/*
#media li.mobile_only{
	display: none;	
}

.mobile #media li.mobile_only{
	display: block;	
}

.mobile #media li.not_mobile{
	display: none;	
}
*/
/* comments panel */

#comments{
	padding: 12px;
	margin: 12px;
	background: #f6f5f4;
}

#comments h1, p.leave_a_comment{
	margin-bottom: 10px;	
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.4em;
}

#comments h1{
	float: left;	
}

#comments p.leave_a_comment{
	float: right;
	padding-left: 32px;
	background: url(../_img/comment_icon_grey.png) left no-repeat;
}

#comments li{
	clear: both;
	min-height: 40px;
	border-top: 1px solid #e3e2e1;	
	padding: 14px 0px 14px 70px;
	background: url(../_img/comment_bg_grey.png) top left no-repeat;
	font-size: 1.1em;
	line-height: 1.2;
}

#comments li p{
	margin-bottom: 13px;
}

#comments article:last-of-type{
	padding-bottom: 0px;
}

#comments li time{
	color: #e6aa00;
	font-weight: bold;
}

#comments li .article_meta, #comments li .article_meta a{
	margin-top: 20px;
	font-weight: bold;
}

/* pagination */

#pagination{
	margin: 20px 12px 20px 12px;
	font-size: 1.2em;
	overflow: hidden;
}

#pagination .prev{
	padding-right: 7px;
}

#pagination .prev img{
	margin-right: 9px;
	vertical-align: middle;
}

#pagination .next{
	padding-left: 7px;
	border-left: 1px solid #cccccc;
}

#pagination .next img{
	margin-left: 9px;
	vertical-align: middle;
}

#pagination .next a, #pagination .prev a{
	color: #fdd153;
}

#pagination ul{
	display: inline;	
}

#pagination li{
	display: inline;
	padding: 0px 7px;
	border-left: 1px solid #cccccc;
	color: #cccccc;
}

#pagination li a{
	color: #000000;	
}


/* comments form */

#comment_form{
	margin: 12px;
	border-top: 1px solid #ebebeb;
}

#comment_form h2{
	padding: 0px 0px 28px 32px;
	margin-top: 18px;
	margin-bottom: 32px;
	background: url(../_img/comment_icon_grey_2.png) top left no-repeat, url(../_img/repeating_chevron_bg.png) bottom left repeat-x;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.4em;
}

#comment_form label{
	position: relative;
	top: 5px;
	display: block;
	float: left;
	margin-left: 16px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.6em;
}

#comment_form input[type=text], #comment_form input[type=email], #comment_form textarea, #comment_form input.text, #comment_form input.email{
	display: block;
	float: left;
	clear: both;
	border: 1px solid #e0e0e0;
	margin-bottom: 20px;
	padding: 8px;
	font-size: 1.2em;
}

#comment_form input[type=text], #comment_form input[type=email], #comment_form input.text, #comment_form input.email{
	width: 200px;
}

#comment_form textarea{
	width: 585px;
	height: 140px;
}

#comment_form input[type=submit]{
	display: block;
	clear: both;
	border: none;
	padding: 0px;
	background: none;	
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.6em;
	color: #fdd153;
}

/* *********************************** STRANDS LIST (homepage) *********************************** */

/* strands list */

#strands_list{
	float: left;	
	width: 670px;
	padding: 18px 0px 20px;
	background: #edebe6;
}

#strands_list li{
	float: left;
	width: 600px;
	margin-right: 25px;
	margin-bottom: 54px;
}

#strands_list li.full_width{
	float: left;
	width: 645px;
	margin-right: 25px;
	margin-bottom: 54px;
}

#strands_list li h2{
	display: inline-block;
	height: 36px;
	padding: 8px 10px 0px 10px;
	
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 3.2em;
	color: #ffffff;
}

#strands_list li h2 a{
	color: #ffffff;
}

#strands_list li .panel{
	position: relative;
	overflow: hidden;
	height: 248px;
	background: #313123 url(../_img/strand_panel_bg.png) bottom repeat-x;
}

#strands_list li .panel img{
	position: absolute;
	left: 0px;
	top: 0px;
}

#strands_list li .panel_text{
	position: absolute;
	z-index: 100;
	bottom: 20px;
	left: 10px;
	height: 76px;
	width: 266px;
	padding: 20px 12px 14px 12px;
	background: #ffffff;
}	

#strands_list li.full_width .panel_text{
	width: 601px;
}	

#strands_list li .panel_text p{
	font-size: 1.2em;
	line-height: 1.2;
}

#strands_list li .panel_text p.highlighted_link{
	position: absolute;
	bottom: 4px;
	left: 12px;
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2.2em;
}

/* ************************************ STRANDS COLOUR CODING ************************************ */

/* agitate */

#strands_list .the-agitator h2, #content_header.the-agitator, #header_nav.the-agitator li.current-post-ancestor, #header_nav.the-agitator li.current-menu-item{
	background: #70cbcc;
}

#strands_list .the-agitator p.highlighted_link a, #player_panel article.the-agitator h1, #hero_panel.the-agitator .container h1{
	color: #70cbcc;
}

#player_panel article.the-agitator img{
	border-bottom: 4px solid #70cbcc;
}

.the-agitator #content_header_share{
	background: #b6e4e5;	
}

/* interrogate */

#strands_list .the-interrogator h2, #content_header.the-interrogator, #header_nav.the-interrogator li.current-post-ancestor, #header_nav.the-interrogator li.current-menu-item{
	background: #fdd153;
}

#strands_list .the-interrogator p.highlighted_link a, #player_panel article.the-interrogator h1, #hero_panel.the-interrogator .container h1{
	color: #fdd153;
}

#player_panel article.the-interrogator img{
	border-bottom: 4px solid #fdd153;
}

.the-interrogator #content_header_share{
	background: #fee8a7;	
}

/* fifth column presents */

#strands_list .fifth-column-presents h2, #content_header.fifth-column-presents, #header_nav.fifth-column-presents li.current-post-ancestor, #header_nav.fifth-column-presents li.current-menu-item{
	background: #9edaaa;
}

#strands_list .fifth-column-presents p.highlighted_link a, #player_panel article.fifth-column-presents h1, #hero_panel.fifth-column-presents .container h1{
	color: #9edaaa;
}

#player_panel article.fifth-column-presents img{
	border-bottom: 4px solid #9edaaa;
}

.fifth-column-presents #content_header_share{
	background: #ceecd4;	
}

/* on the inside */

#strands_list .on-the-inside h2, #content_header.on-the-inside, #header_nav.on-the-inside li.current-post-ancestor, #header_nav.on-the-inside li.current-menu-item{
	background: #fd9353;
}

#strands_list .on-the-inside p.highlighted_link a, #player_panel article.on-the-inside h1, #hero_panel.on-the-inside .container h1{
	color: #fd9353;
}

#player_panel article.on-the-inside img{
	border-bottom: 4px solid #fd9353;
}

.on-the-inside #content_header_share{
	background: #fec8a7;	
}

/* the test tube */

#strands_list .the-test-tube h2, #content_header.the-test-tube, #header_nav.othe-test-tube li.current-post-ancestor, #header_nav.the-test-tube li.current-menu-item{
	background: #8f99ce;
}

#strands_list .the-test-tube p.highlighted_link a, #player_panel article.the-test-tube h1, #hero_panel.the-test-tube .container h1{
	color: #8f99ce;
}

#player_panel article.the-test-tube img{
	border-bottom: 4px solid #8f99ce;
}

.the-test-tube #content_header_share{
	background: #c7cce7;	
}

/* archives */

#strands_list .archives h2, #content_header.archives, #header_nav.archive li.current-menu-item, #header_nav.archive li.current_page_parent
{
	background: #dedede;
	height: 25px;
}

#strands_list .archives p.highlighted_link a, #player_panel article.archives h1, #hero_panel.archives .container h1{
	color: #f76b6b;
}

#player_panel article.archives img{
	border-bottom: 4px solid #f76b6b;
}

#content_header.archives h1, #content_header.archives li a, .archives #content_header_share{
	background-color: #fbb4b4;	
}

/* reset colours */

#player_panel article .player_controls img{
	border-bottom: none;	
}

/* ****************************************** SIDE BAR ****************************************** */

#sidebar{
	width: 310px;
	float: right;
	margin-bottom: 74px;
}

/* shared rules */

#tabbed_panel section, #contributors, #twitter_feed, #sites_we_like, #latest_comments, #sidebar_newsletter_signup, #related_podcasts{
	margin-top: 18px; 
}

#tabbed_panel section .panel, #contributors, #twitter_feed, #sites_we_like, #latest_comments, #sidebar_newsletter_signup, #related_podcasts{
	background: url(../_img/sidepanel_section_bg.png) bottom repeat-x;
}

#contributors, #twitter_feed, #sites_we_like, #latest_comments, #sidebar_newsletter_signup, #related_podcasts{
	padding: 14px 12px 24px 12px;
}

#tabbed_panel section > h1, #contributors > h1, #twitter_feed > h1, #sites_we_like > h1, #twitter_feed p.follow_us, #latest_comments > h1, #sidebar_newsletter_signup > h1, #related_podcasts > h1{
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 2em;
	color: #ffffff;
}

#tabbed_panel section > h2, #contributors > h2, #twitter_feed > h2, #sites_we_like > h2, #twitter_feed p.follow_us, #latest_comments > h2, #sidebar_newsletter_signup > h2, #related_podcasts > h2{
	font-family: Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 3em;
	color: #ffffff;
	padding-bottom: 14px;
}

#tabbed_panel article, #contributors article, #related_podcasts article{
	position: relative;
	background: #edebe6;
	margin-bottom: 3px;
	padding: 8px;
	height: 46px;
	overflow: hidden;
}

#tabbed_panel article:last-of-type, #contributors article:last-of-type, #related_podcasts article:last-of-type{
	margin-bottom: 0px;
}

#tabbed_panel article img, #contributors article img, #related_podcasts article img{
	position: absolute;
	top: 0px;
	left: 0px;
}

#tabbed_panel article time, #related_podcasts article time, #contributors article p, #related_podcasts article p, #tabbed_panel article p, #tabbed_panel article h1, #contributors article h1, #related_podcasts article h1{
	margin-left: 60px;
	color: #000000;
}

#tabbed_panel article a, #contributors article a, #related_podcasts article a{
	display: block;	
}

/* tabbed panel - most popular etc. (+ related podcasts) */

#tabbed_panel section{
	display: none;
}

#archive #tabbed_panel section, #strand #tabbed_panel section, #page #tabbed_panel section{
	margin-top: 43px;
}

#tabbed_panel section.selected{
	display: block;	
}

#tabbed_panel section > h1{
	padding: 14px 12px 14px 12px;
	background:	#383a3e url(../_img/tabbed_panel_shadow_bg.png) left repeat-y;
	float: left;
}

#tabbed_panel .tab{
	float: left;
	margin-top: 15px;
	padding: 4px 14px;
	padding-left: 14px;
	padding-right: 14px;
	font-size: 1.2em;
}

#tabbed_panel section .panel{
	clear: both;
	
	background:	url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/tabbed_panel_shadow_bg.png) left repeat-y;
	background-color: #383a3e;
	
	padding: 10px 10px 20px 10px;
}

#tabbed_panel article time, #related_podcasts article time{
	display: block;	
	margin-bottom: 4px;
	background: #ffffff; /* needed to combat IE-only text rendering issue affecting bold text with transparency applied */
	font-size: 1.1em;
	font-weight: bold;
	color: #e6aa00;
}

#tabbed_panel article h1, #related_podcasts article h1{
	font-size: 0.9em;
	line-height: 1.2;
}

#editor_picks .tab:nth-of-type(2){
	border-left: 1px solid #000000;
}

#most_listened .tab:nth-of-type(1){
	border-right: 1px solid #000000;
}

/* Related podcasts */

#related_podcasts{	
	margin-top: 43px;
	background:	url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/tabbed_panel_shadow_bg.png) left repeat-y;
	background-color: #383a3e;
}

#related_podcasts h1{
	padding-bottom: 14px;
}

/* contributors */

#contributors{
	position: relative;
	padding-bottom: 56px;
	background:	url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/contributors_shadow_bg.png) left repeat-y;
	background-color: #0d2139;
}


#contributors > h1{
	position: relative;
	width: 250px;
	padding-bottom: 14px;
}

#contributors .slides_viewport{
	position: relative;
	width: 290px;
	height: 200px;
	overflow: hidden;
}

#contributors_carousel_slides_container{
	position: absolute;
	left: 0px;
	top: 0px;
	width: 290px;
	
	-webkit-transform: translate3D(0,0,0);
}

#contributors .carousel_nav{
	position: absolute;
	top: 0px;
	left: 0px;
}

#contributors .carousel_nav img{
	-webkit-transition: opacity .4s ;
	-moz-transition: opacity .4s;
	-o-transition: opacity .4s;
	transition: opacity .4s;	
	
	cursor: pointer;
	
	padding: 15px;
}

#contributors .carousel_nav img:hover{
	opacity: 0.4;
	filter: alpha(opacity = 40);
}

#contributors .carousel_nav .prev{
	position: absolute;
	top: 6px;
	left: 270px;
}

#contributors .carousel_nav .next{
	position: absolute;
	top: 181px;
	left: 270px;
}

#contributors article h1, #contributors article h2{
	font-size: 1.2em;
}

#contributors article h1{
	margin-bottom: 4px;	
}

#contributors article p{
	font-size: 1.2em;
	margin-bottom: 4px;	
}

#contributors article p.username{
	font-size: 1.2em;
}

/* Newsletter sign up */

#sidebar_newsletter_signup{
	background:	url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/contributors_shadow_bg.png) left repeat-y;
	background-color: #57574b;
}

#sidebar_newsletter_signup h1{
	padding-bottom: 14px;
}

#sidebar_newsletter_signup p, #sidebar_newsletter_signup input[type=submit], #sidebar_newsletter_signup label{
	font-family: 'BebasNeueRegular', Helvetica, Arial, sans-serif;
	text-transform: uppercase;
	font-size: 1.8em;
}

#sidebar_newsletter_signup p{
	margin-bottom: 20px;
	color: #fdd153;
}

#sidebar_newsletter_signup label{
	display: block;
	margin-bottom: 6px;
	color: #ffffff;
}

#sidebar_newsletter_signup input[type=email], #sidebar_newsletter_signup input[type=text], #sidebar_newsletter_signup input.email, #sidebar_newsletter_signup input.text{
	display: block;
	width: 200px;
	margin-bottom: 12px;
	border: none;
	padding: 6px;
	font-size: 1.2em;
}

#sidebar_newsletter_signup input[type=submit]{
	display: block;
	padding: 0px;
	border: none;
	background: none;
	color: #fdd153;
}

/* twitter feed */

#twitter_feed{
	background: url(../_img/twitter_feed_icon.png) top right no-repeat,
				url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/twitter_feed_shadow_bg.png) left repeat-y;
	background-color: #fdd153;
}

#twitter_feed > h1{
	padding-bottom: 14px;
	border-bottom: 1px solid #fee8a9;
	color: #000000;
}

#twitter_feed article{
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #fdda75;	
	line-height: 1.2;
}

#twitter_feed article p{
	font-size: 1.2em;
	margin-bottom: 6px;
}

#twitter_feed article p:nth-of-type(2){
	margin-bottom: 0px;	
}

#twitter_feed article p:last-of-type{
	font-size: 1em;
	text-transform: uppercase;
}

#twitter_feed p.follow_us{
	padding-top: 14px;	
}

/* sites we like */

#sites_we_like{
	background: url(../_img/sites_we_like_icon.png) top right no-repeat,
				url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/sites_we_like_shadow_bg.png) left repeat-y;
	background-color: #0d2139;
	
}

#sites_we_like > h1{
	padding-bottom: 14px;
	border-bottom: 1px solid #9c9d9f;	
}

#sites_we_like article{
	padding-top: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid #6c6d70;
	line-height: 1.2;
}

#sites_we_like article:last-of-type{
	padding-bottom: 0px;
	border-bottom: none;	
}

#sites_we_like article a{
	
	color: #ffffff;
	font-weight:500;
}

#sites_we_like article h1{
	font-size: 1.4em;
	color: #ffffff;
}

#sites_we_like article p{
	font-size: 1.2em;
	color: #FFF;
	line-height:20px;
}

#sites_we_like article p2{
	font-size: 1.2em;
	color: #F90;
	line-height:20px;
}


/* latest comments */

#latest_comments{
	background: url(../_img/latest_comments_icon.png) top right no-repeat,
				url(../_img/sidepanel_section_bg.png) bottom no-repeat,
				url(../_img/sites_we_like_shadow_bg.png) left repeat-y;
	background-color: #383a3e;
}

#latest_comments > h1{
	padding-bottom: 14px;
	border-bottom: 1px solid #9c9d9f;	
}

#latest_comments li{
	padding: 12px 0px 12px 70px;
	border-bottom: 1px solid #6c6d70;
	background: url(../_img/comment_bg_white.png) top left no-repeat;
	line-height: 1.4;
	font-size: 1.1em;
	color: #ffffff;	
}

#latest_comments li:last-of-type{
	padding-bottom: 0px;
	border-bottom: none;	
}

#latest_comments li a{
	color: #fdd153;
}

#latest_comments .article_meta{
	margin-top: 8px;	
}

/* ************************************** FOOTER ELEMENTS ************************************** */

/* footer logo panel & search form */

#footer .logo_panel{
	padding: 20px 0px 20px 0px;
}

#footer .logo_panel .search{
	position: absolute;
	right: 0px;
	bottom: 21px;
}

#footer .logo_panel .search form{
	border: 1px solid #e0e0e0;
	background: #ffffff;
}

#footer .logo_panel .search h3{
	position: absolute;
	width: 200px;
	bottom: -19px;
	right: 104px;
	color: #ffffff;
}

/* footer navigation menu */

#footer nav ul{
	overflow: hidden;
	background: url(../_img/footer_nav_bg_new.png) top repeat;
}

#footer nav li{
	border-right: 1px solid #7d7d74;
	border-top: 1px solid #7d7d74;
	color: #ffffff;
	background: #a6a6a8;
	font-size: 1.2em;
}

#footer nav li a{
	color: #ffffff;
}

/* legals, credits, small text */

#credits_legals{
	position: relative;
	clear: both;
	height: 15px;
	padding-top: 14px;
	padding-right:-1px;
	background: #a6a6a8;
	font-size: 1.2em;
	color: #FFF;
}

#credits_legals .credits{
	position: absolute;
	right: 0px;
	bottom: 14px;
}

#credits_legals a{
	color: #929279;
}