/*  BBSRC Mobile Stylesheet
 *  Created by Dan Sheerman for Headscape
 *  dan@headscape.co.uk
 *
 *  This stylesheet served to devices with viewports 481px wide and up - a base for tablets,
 *  should be used for layout styles from 481px wide to 800px wide viewport.
*/


#header {
	background: url('../img/bg-header.png') repeat-x center -65px;
	padding-bottom: 20px;
	}
	
	#header h1 {
		margin-bottom: 0.5em;
		}
	
	#header.magazine {
		}
	
	#primaryNav {
		display: block !important; /* overrides inline if jQ collapsed in mobile view */
		padding-top: 0em;
		}
		
		#primaryNav li {
			width: 33%;
			}
			
		#primaryNav a {
			border: 2px solid #eee;
			}
		
		#primaryNav #primaryNavHome a {
			position: relative;
			width: 1.75em;
			text-indent: -9999em;
			}
		
		#primaryNav #primaryNavHome img {
			position: absolute;
			top: 1em;
			left: 0.7em;
			}
	
/*
	#secondaryNav > ul > li > a {
		background: rgb(103,115,135); /* Old browsers */
		background: url('../img/li-darr-grey.png') 5px 7px no-repeat, -moz-linear-gradient(top, rgba(103,115,135,1) 0%, rgba(84,93,110,1) 100%); /* FF3.6+ */
		background: url('../img/li-darr-grey.png') 5px 7px no-repeat, -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(103,115,135,1)), color-stop(100%,rgba(84,93,110,1))); /* Chrome,Safari4+ */
		background: url('../img/li-darr-grey.png') 5px 7px no-repeat, -webkit-linear-gradient(top, rgba(103,115,135,1) 0%,rgba(84,93,110,1) 100%); /* Chrome10+,Safari5.1+ */
		background: url('../img/li-darr-grey.png') 5px 7px no-repeat, -o-linear-gradient(top, rgba(103,115,135,1) 0%,rgba(84,93,110,1) 100%); /* Opera 11.10+ */
		background: url('../img/li-darr-grey.png') 5px 7px no-repeat, -ms-linear-gradient(top, rgba(103,115,135,1) 0%,rgba(84,93,110,1) 100%); /* IE10+ */
		background: url('../img/li-darr-grey.png') 5px 7px no-repeat, linear-gradient(top, rgba(103,115,135,1) 0%,rgba(84,93,110,1) 100%); /* W3C */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#677387', endColorstr='#545d6e',GradientType=0 ); /* IE6-9 */
		}
*/
		
	#siteTools form, #siteTools .sForm {
		font-size: 0.9em;
		}
	
	#togglePrimaryNav {
		display: none !important; /* overrides inline jQ */
		}
	#toggleSecondaryNav {
		position: absolute;
		right: 25px;
		top: 144px;
		border-radius: 5px;
		}
	
	#fsCarousel .flex-viewport {
		display: block;
		}

		

#footer ul {
	margin: 0px;
	padding: 0px;
	}

#footer .additionalInfo ul {
	padding: 0px;
	}
	
#footer .additionalInfo li {
	display: block;
	margin: 0px;
	}

#footer .socialMedia, #footer .contactDetails {
	float: left;
	width: 47.5%;
	margin-right: 5%;
	}

#footer .contactDetails {
	margin-right: 0px;
	}


#content {
	}


#content #featuredSlider {
	padding: 0px;
	}
	
	#content #featuredSlider h2, #content #featuredSlider h3 {
		font-size: 1.75em;
		line-height: 1.25em;
		display: block;
		padding: 1em 7.5em 0.75em 1em;
		}
	
	.jshowoff {
		position: relative;
		}
	
	.jshowoff-controls {
		position: absolute;
		bottom: 0.5em;
		right: 3em;
		z-index: 3;
		}
	
		.jshowoff-controls a {
			display: block;
			width: 34px;
			height: 34px;
			float: left;
			text-indent: -9999em;
			margin-bottom: 0.5em;
			}
			
			.jshowoff-controls a:hover {
				opacity: 0.9;
				}
			
			.jshowoff-controls a:active {
				position: relative;
				top: 1px;
				left: 1px;
				background: transparent;
				}
		
		.jshowoff-play {
			background: transparent url('../img/i-pause.png') no-repeat center center !important;
			}
		
		.jshowoff-play.jshowoff-paused {
			background: transparent url('../img/i-play.png') no-repeat center center !important;
			}
		
		.jshowoff-next {
			background: transparent url('../img/i-right.png') no-repeat center center !important;
			}
		
		.jshowoff-controls .jshowoff-prev {
			display: none;
			}

	
	.jshowoff-slidelinks {
		display: block;
		position: absolute;
		bottom: 0.25em;
		right: 1em;
		z-index: 3;
		}
		
		.jshowoff-slidelinks a {
			display: block;
			text-indent: -9999em;
			height: 10px;
			width: 10px;
			margin: 5px 0px;
			background: #fff;
			border-radius: 5px;
			}
			
			.jshowoff-slidelinks a:hover {
				background: #ddd;
				}
		
		.jshowoff-slidelinks a.jshowoff-active {
			background: #f69400;
			
		    -webkit-transition: background 300ms ease-in;
		    -moz-transition: background 300ms ease-in;
		    -o-transition: background 300ms ease-in;
		    transition: background 300ms ease-in;
			}
	
	
	.contentContact > ul:after {
		content: '';
		display: table;
		clear: both;
		}
	
		.contentContact > ul > li:nth-child(1n) {
			/* use an nth-child rule to select everything, but only by browsers that support the following nth-child rules */
			width: 47.5%;
			margin: 0px 0px 1.5em 5%;
			float: left;
			border-top: 1px solid #ccc;
			}
	
		.contentContact > ul > li:nth-child(odd) {
			clear: left;
			margin-left: 0px;
			}
	
		.contentContact > ul > li:nth-child(0n + 1), .contentContact > ul > li:nth-child(0n + 2) {
			border-top: 0px;
			}


#content .articlesList {
	position: relative;
	margin: 1em 0px 1em -3%;
	}
	
	#content .articlesList:after {
		content: '';
		display: block;
		clear: both;
		}
	
	#content .articlesList a > h1, #content .articlesList a > h2, #content .articlesList a > h3, #content .articlesList a > h4, .articlesList hgroup {
		font-size: 1em;
		position: absolute;
		bottom: 0px;
		left: 0px;
		right: 0px;
		margin: 0px;
		line-height: 1.5em;
		font-weight: 600;
		padding: 0.75em 0.75em;
		background: #000;
		background: rgba(0,0,0,0.7);
		color: #fff;
		}
	
	#content .articlesList a {
		color: #fff;
		text-decoration: none;
		}
	
	#content .articlesList img {
		display: block;
		width: 100%;
		}
	
	#content .articlesList li {
		position: relative;
		float: left;
		width: 30.333333%;
		margin: 0px 0px 3% 3%;
		height: auto;
		padding: 0px;
		background: none;
		}
	
		#content.listingWide .articlesList li {
			width: 47%;
			margin: 0px 0px 3% 3%;
			}
	
	#content .articlesList hgroup {
		font-size: 0.8em;
		}
		
		#content .articlesList hgroup h2, #content .articlesList hgroup h3 {
			color: #fff;
			font-weight: 600;
			margin-top: 0px;
			}
		
		#content .articlesList hgroup h2 + h3 {
			font-weight: 400;
			font-size: 1.2em;
			}
	
		#content .articlesList h3 + time, #content .articlesList h3 + h4, #content .articlesList h3 + p {
			color: #fff;
			font-size: 1.1em;
			font-weight: normal;
			margin: -0.75em 0px 0px;
			}
	
	#content.listingWide > h2, #content.listing > h2, #content.newsListing .features h2 {
		clear: both;
		background: #fff;
		font-size: 1.6em;
		}
	
		#content.listingWide > h2 b, #content.listing > h2 b, #content.newsListing .features h2 b, #content.newsArchive h3 b, #content.eventsArchive h3 b, #content.magazineListing h2 b, #content.magazine h2 b {
			position: relative;
			font-weight: 400;
			background: #fff;
			padding: 0px 0.5em 0px 0px;
			z-index: 3;
			}
	
		#content.listingWide > h2:after, #content.listing > h2:after, #content.newsListing .features h2:after, #content.newsArchive h3:after, #content.eventsArchive h3:after, #content.magazineListing h2:after, #content.magazine h2:after {
			content: '';
			display: block;
			position: relative;
			top: -0.65em;
			border-bottom: 2px solid #ccc;
			z-index: 2;
			}

#content .articlesArchiveYear {
	margin: 0px -0.66% 1.5em;
	}

	#content .articlesArchiveYear:after {
		content: '';
		display: table;
		clear: both;
		}

	#content .articlesArchiveYear li {
		padding: 0px;
		margin: 2px 0px 0px 0.66%;
		width: 16%;
		float: left;
		}
			

#content.home #newsStories {
	}
	
	#content.home #newsStories ul {
		margin: 0px -1%;
		}
	
	#content.home #newsStories li, #content.home #newsStories li:first-child {
		width: 31.333%;
		margin: 1em 1%;
		font-size: 0.85em;
		}
	
	#content.home #latestVideo iframe, .ytpvideo object, .ytpvideo iframe {
		width: 100%;
		height: 400px !important;
		}
		

figure.data, figure.left, figure.right, #content figure img {
	width: auto;
	}
	
figure.data {
	max-width: 45%;
	}

figure.left, figure.right {
	position: relative;
	}

figure.left.narrow, figure.right.narrow {
	width: auto;
	}

figcaption {
	position: absolute;
	bottom: 0px;
	left: 0px;
	right: 0px;
	}

.imgBox.portrait {
	}

	.imgBox.portrait:after {
		content: '';
		clear: both;
		display: table;
		}
	
	.imgBox.portrait img {
		width: auto;
		max-height: 300px;
		float: right;
		border-left: 3px solid #fff;
		}


.imgBox.blogHeader {
	font-size: 1.35em;
	}
	
	.imgBox.blogHeader h2 {
		font-size: 0.9em;
		}



figure.video {
	padding: 1.5em;
	background: #DCDEDF;
	position: relative;
	}

	.ytpvideo p, .ytplayerbuttons, .ytplayerbox h4 {
		display: block;
		}
	
	.ytpvideo .vidTitle {
		margin-top: -0.75em;
		font-size: 1.2em;
		color: #c06;
		}
	
	.videoNavigateWrapper {
		position: relative;
		width: 55%;
		float: left;
		margin: 1em 0px;
		}
	
	.videoNavigate {
		display: table;
		position: relative;
		z-index: 1;
		}
	
	.videoNavigate a {
		width: 15%;
		padding-top: 50px;
		display: table-cell;
		}
	
		.videoNavigate a b {
			display: block;
			font-weight: 400;
			font-size: 0.9em;
			color: #666;
			line-height: 1.25em;
			height: 2.1em;
			padding: 0.2em 0.5em;
			text-align: center;
			border-left: 1px solid #BBB;
			}
		
		.videoNavigate a:first-child b {
			border-left: 0px;
			}
		
		.videoNavigate .play {
			background: transparent url('../img/i-play.png') no-repeat center 6px;
			}
		
		.videoNavigate .stop {
			background: transparent url('../img/i-stop.png') no-repeat center 3px;
			}
		
		.videoNavigate .back {
			background: transparent url('../img/i-back.png') no-repeat center 6px;
			}
		
		.videoNavigate .forward {
			background: transparent url('../img/i-forward.png') no-repeat center 6px;
			}
	
	.videoNavigateInsemanticBackgroundThingWrapper {
		position: absolute;
		z-index: 0;
		top: 0px;
		left: 0px;
		right: 5%;
		height: 45px;
		background: #BEBEBF;
		-webkit-box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
		box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.2);
		border-radius: 20px;
		}
		
		.videoNavigateInsemanticBackgroundThing {
			position: absolute;
			z-index: 0;
			top: 3px;
			left: 48%;
			right: 3px;
			height: 39px;
			background: #b3b3b3;
			-webkit-box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.05);
			box-shadow: inset 5px 5px 10px 0px rgba(0, 0, 0, 0.05);
			border-radius: 16px;
			}
	
	.videoVolume {
		float: right;
		position: relative;
		width: 38%;
		padding: 8px;
		margin: 1em 0px;
		background: #dbdbdb;
		border: 1px solid #c4c4c4;
		border-radius: 18px;
		}
		
		.videoVolumeInsemanticBackgroundThing {
			position: absolute;
			z-index: 0;
			top: 4px;
			left: 4px;
			width: 35px;
			background: #ccc;
			height: 4.75em;
			border-radius: 15px;
			}
		
		.videoVolume a {
			display: block;
			position: relative;
			z-index: 1;
			width: 20%;
			height: 2.2em;
			padding-left: 37px;
			margin-bottom: 0.75em;
			float: left;
			font-size: 0.85em;
			color: #666;
			}
		
		.videoVolume .vUp {
			background: transparent url('../img/i-vUp.png') no-repeat 0px center;
			}
		
		.videoVolume .vDown {
			background: transparent url('../img/i-vDown.png') no-repeat 0px center;
			clear: left;
			margin-bottom: 0px;
			}
		
		.videoVolume .mute {
			background: transparent url('../img/i-mute.png') no-repeat 10px center;
			padding-top: 0.5em;
			height: 1.7em;
			float: right;
			}
		
		.videoVolume .loop {
			background: transparent url('../img/i-loop.png') no-repeat 8px center;
			padding-top: 0.5em;
			height: 1.7em;
			float: right;
			margin-bottom: 0px;
			}
	
	.ytpvideo .vidTime {
		clear: both;
		font-size: 1.2em;
		text-transform: uppercase;
		background: #ccc;
		margin: 1em -1.3em -1.2em;
		padding: 1.7em 1em;
		color: #222;
		}
	
	.audiovideohelp {
		position: absolute;
		right: 1em;
		bottom: 0.5em;
		}


#content.events.listing time {
	display: block;
	position: relative;
	background: #c06;
	color: #fff;
	margin-bottom: 1px;
	padding: 0.25em;
	}


.yearNav {
	border-bottom: 0px;
	padding-bottom: 1em;
	}



	
.yearsNav:after {
	content: '';
	display: table;
	clear: both;
	}
		
	#content .yearsNav p {
		width: 6em;
		text-align: center;
		float: left;
		font-size: 12px;
		line-height: 19px;
		padding: 3px 12px 3px;
		margin: 0px;
		background: #bbb;
		}

	#content .yearsNav li {
		display: block;
		float: left;
		border-left: 1px solid #fff;
		background: #c06;
		color: #fff;
		text-transform: uppercase;
		text-align: center;
		font-size: 12px;
		line-height: 19px;
		padding: 3px 12px 3px;
		font-weight: 400;
		}
		
	#content .yearsNav li a {
		display: block;
		text-decoration: none;
		color: #FFF;
		margin: -3px -12px -3px -12px;
		padding: 3px 12px 3px 12px;
		background: #666;
		}
	
	#content .yearsNav li a:hover, #content .yearsNav li a:focus {
		background: #555;
		color: #FFF;
		text-decoration: underline;
		}

	
	#content .articlesListText figure {
		display: block;
		}
		
	#content .articlesListText .info {
		margin-left: 95px;
		}
		
		#content .articlesListText .info p {
			margin: 0.5em 0px;
			}


	
#content.magazineListing {
	}
	
	#content.magazineListing .latest .imgBox {
		font-size: 1.2em;
		}
		
	#content.magazineListing .latest .imgBox h3 {
		/* font-size: 1.5em; */
		padding: 0.75em;
		}
		
	#content.magazineListing .imgBox h3 {
		padding: 0.75em;
		}
	
	#content.magazineListing .issueList {
		margin: 0em 0px 1em -3%;
		}
		
		#content.magazineListing .issueList:after {
			content: '';
			display: table;
			clear: both;
			}
	
		#content.magazineListing .issueList > li, #content.magazine .mainHeadlines li {
			background: none;
			padding: 0px;
			width: 47%;
			margin: 0px 0px 3% 3%;
			float: left;
			}
	
		#content.magazineListing .issueList > li:nth-child(odd) {
			clear: left;
			}
		
		#content.magazineListing .issueList > li:nth-child(n+3) {
			border-top: 1px solid #ccc;
			}



	
#magHeader h1 {
	font-size: 7.5em;
	}

.shareThis {
	display: block;
	}
	

#content.blog:after {
	content: '';
	display: table;
	clear: both;
	}

	#content.blog .pagination a {
		font-size: 1.1em;
		}
	
	#content.blog .pagination .older {
		padding-left: 3%;
		}
	
	#content.blog .pagination .newer {
		padding-right: 3%;
		}
	
	#content .commentThread li {
		padding: 2em;
		}
	
	#content .commentThread li .vcard img {
		top: 2em;
		left: 2em;
		}
		
	#content .commentThread ul.children {
		margin: 1.5em -2em -2em;
		}
	
	#content.blog #commentform input {
		width: 50%;
		}
	
	#content.blog #commentform textarea {
		width: 100%;
		}




#contentAside:after {
	content: '';
	display: table;
	clear: both;
	}

#contentAside nav, #contentAside.magazine .about {
	float: left;
	padding: 0px;
	width: 47%;
	margin: 1em 5% 1em 0px;
	}
	
	#contentAside nav:nth-child(even)#contentAside .fundingCalls {
		position: relative;
		top: -9.1em;
		margin-right: 2.5%;
		font-size: 0.8em;
		} {
		margin-right: 0px;
		}
		
	
	
	#contentAside .responsiveMode {
		float: right;
		clear: right;
		margin-right: 0px;
		width: 45.25%;
		font-size: 0.8em;
		}
	
	#contentAside .cta {
		float: right;
		clear: right;
		width: 40%;
		}
	
	#contentAside .ceo {
		width: 37%;
		}
	
	#contentAside .sponsor {
		width: 20%;
		float: right;
		margin: 2em 2.5% 0px 0px;
		}
	
	#contentAside #tag_cloud-2 {
		float: right;
		}