/*
Theme Name:   Amodern - THEME
Theme URI:    http://amodern.net/
Description:  Wordpress theme ( No more Annotum :] ).
Author:       John Schmidt > Mart L. > Max Stein
Author URI:
Version:      1.0.0 | October 20, 2014
*/

/* ----------------------------------------------------
  FIRST IMPORT JOHN SCHMIDT'S WORK
------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Inconsolata:400,700');
@import url("style-core.css");
	/*  Note that the changes herein aren't necessarily
		conventional. style-core.css is only the last of
		many css files that have built up to get us here.
		There are several conflicting issues at play so
		the changes here are put into place to bend the
		whole system to our will.

		Given the time, it's best to build this
		whole theme from scratch.
	*/

/* ----------------------------------------------------
  GLOBAL TWEAKS
------------------------------------------------------*/
	body{
		line-height:1.5em;
		font-family:'Merriweather', serif;
	}
	#pagecontain, #header, #navsocial{
		width:100%;
	}
	h1{/*color:#CA2C1E;*/}
	h1,h2,h3,h4,h5,h6{
		margin-bottom:0.25em;
		line-height:1.2em;
		font-family:'Lato', Helvetica, Arial, sans-serif;
		font-weight:400;
	}
	#issue_title{
		margin-bottom:1em;
	}
	p{
		font-family:'Merriweather', serif;
		font-weight:400;
		line-height:1.5em;
	}
	#singlearticlecontent{
		margin-top:0;
	}
	.articletitle{
		letter-spacing:2px;
	}
	/*.references{
		font-family:'Merriweather', serif;
		font-size:0.9em;
	}*/
	.footnotes, .workscited{
		font-family:'Merriweather', serif;
		font-size:0.9em;
	}
	.workscited p { margin-bottom:15px!important; }

	#acknowledgements{
		font-size:0.8em;
	}

	pre { background:#fff; border:none; padding:0px 20px 20px 20px; }

	p code {
	    line-height: 0.95;
	    padding-bottom: 2px;
	}
	pre, code { font-family: 'Inconsolata', monospace; }
	pre code { border:none; background:transparent; margin:0px; padding:0px; padding-left:10px; font-weight:bold; }
	pre.wide { padding-right:20px; padding:0px; }
	pre.wide code { font-size:80%; font-weight:normal; padding-left:0px; width: 90%; }

	pre code.indent, pre code.indent1 { /*text-indent: 3em;*/ padding-left: 3em; }
	pre code.indent2 { padding-left: 6em; }
	pre code.indent3 { padding-left: 9em; }
	pre code.indent4 { padding-left: 12em; }
	code span.red { color:#d53c4c; }
	code span.purple { color:#6e47be; }

	code.angular { background:transparent; border:none; }
	code.angular span.red { color:#96040c; }
	code.angular span.green { color:#94c380; }

	pre.wide code { color:#333693; }
	pre.wide code span.green { color:#0a6548; }
	pre.wide code span.purple { color:#943794; font-weight:bold; }
	pre.wide code span.olive { color:#7d7d1f; }
	pre.wide code span.lightblue { color:#1797c6; font-weight:bold; }
	pre.wide code span.orange { color:#ee824d; font-weight:bold; font-style:italic; }
	pre.wide code span.func { color:#1d521e; font-style:italic; }
	pre.wide code span.blue { color:#0920e2; }
	pre.wide code span.black { color:#000; font-weight:bold; }

	p.audio-caption {
		font-size: 0.8rem !important;
    padding-top: 0px;
    margin-bottom: 20px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    line-height: 1.2em;
		//margin-top:-35px;
    margin-top:10px;
    font-weight: normal;
    letter-spacing: -0.5px;
	}

	p.video-caption {
		font-size: 0.8rem !important;
    padding-top: 0px;
    margin-bottom: 40px;
    font-family: 'Lato', Helvetica, Arial, sans-serif;
    line-height: 1.2em;
		margin-top:5px;
    font-weight: normal;
    letter-spacing: -0.5px;
	}

	.split {
		width:47%;
		float:left;
	}
	.split:first-child {
		padding-right:6%;
	}
	.split blockquote {
		padding:0px 0px 20px 0px;
	}

	/* All Articles
	--------------------------------------------------*/
	article .entry{
		line-height:1.5em;
	}
	#article_tools{
		float:right;

		margin:0 1em 1em 1em;
		font-size:0.9rem;
	}
	.authortitle{
		font-family:'Lato', Helvetica, Arial, sans-serif;
	}
	#singlearticlecontent{
		margin:0 0 1em 0;
	}
/*	#singlearticlecontent h2.title{
		font-family:'Merriweather';
		font-style:italic;
		line-height:1.5em;
	}
*/
	#singlearticlecontent p h2{
		font-family:'Lato';
		line-height:1.5em;
	}
	blockquote {
		padding:0px 40px 20px 40px;
	}

  blockquote pre {
    margin: 0px;
    padding: 0px;
    line-height: 100%;
  }
	/* All Editorials
	--------------------------------------------------*/
	.home #articlebox_container, .single-issues #articlebox_container{
		padding-top:2em;
		border-top:dotted 1px #777;
	}
	/* Article Teasers
	--------------------------------------------------*/
	#articlebox_container .articlebox{
		margin-top:0;
		margin-left:0;
		margin-right:1em;
		margin-bottom:1em;
	}
	#articlebox_container li{
		margin-bottom:1em;
		font-size:0.8em;
	}

	#articlebox-1{
		clear:both;
	}

	#singlearticlecontentbody.entry { margin-top:0px; }


/* ----------------------------------------------------
  RESPONSIVE TWEAKS
------------------------------------------------------*/
@media only screen and (max-width:480px){
	#singlearticlecontent { width:100%; }

	.container{
		width:96%;
		margin-top:10px;
		margin-left:2%;
		margin-right:2%;
	}
	.container .column, .container .columns{
		margin-left:0;
		margin-right:0;
	}
	article, header{
		padding:10px;
	}
	header{
		padding-bottom:0px;
	}
	/* Navs
	--------------------------------------------------*/
	#mobileclearing{
		clear:none;
	}
	.menu-footer, #navigation{
		width:180px;
	}
	#navigation{
		padding:10px 0 10px 10px;
	}
	.menuright_holder{
		float:right;
		margin-left:0;
		margin-right:0;
		padding:10px;
	}
	#nav_menu-1 .footerwidget_title{
		display:none;
	}

	/* Type
	--------------------------------------------------*/
	#issue_title{font-size:1.25em;}

	article .entry{font-size:1.1em;}
	/* + one unique version of .entry */
	.home #editorialcontentbody, .single-issues #editorialcontentbody{font-size:1.15em;}
	h1{font-size:1.5em;}
	h2{font-size:1.4em;}
	h3{font-size:1.3em;}
	h4{font-size:1.2em;}
	h5{font-size:1.1em;}
	h6{font-size:1em;}
	/*.references{font-size:0.8em;}*/
	.footnotes, .workscited{font-size:0.8em;}
	.workscited p { margin-bottom:10px!important; }
	#acknowledgements{font-size:0.8em;}

	/* + one override that probably shouldn't be here.
	It's just covering up user habits and issn't correct.*/
	/*	#singlearticlecontentbody h2.title{font-size:1.15em;}*/

}



	.entry h2 { margin-top:20px; margin-bottom:10px; }
	/*h2.articlesubtitle, h2.issue_title { margin-top:0px; }*/

	.entry h2.toptitle { margin-top:0px; }

	section.tableofcontents {
	}

	section.tableofcontents h2 {
		margin-bottom:-30px;
	}


	.mejs-audio { margin:20px 0px 40px 0px; padding:0px 0px 0px 0px; }


	section.tableofcontents h4 {
		line-height:1.5em;
		font-size: 1em !important;
		font-weight: bold;
		margin:20px 0px;
		padding-top: 20px;
		font-family:'Merriweather', serif;
		letter-spacing:0px;
	}

@media only screen and (min-width:481px) and (max-width:767px){
	.container{
		width:90%;
		margin-top:20px;
		margin-left:5%;
		margin-right:5%;
	}
	.container .column, .container .columns{
		margin-left:0;
		margin-right:0;
	}
	article, header{
		padding:10px;
	}
	header{
		padding-bottom:0px;
	}
	#editorialthumbnail{
		width:20%;
	}
	#singlearticlecontent, #editorialcontent{
		margin-left:20px;
		width:70%;
	}
	/* Navs
	--------------------------------------------------*/
	#mobileclearing{
		clear:none;
	}
	.menu-footer, #navigation{
		width:180px;
	}
	#navigation{
		padding:10px 0 10px 10px;
	}
	.menuright_holder{
		float:right;
		margin-left:0;
		margin-right:0;
		padding:10px;
	}
	#nav_menu-1 .footerwidget_title{
		display:none;
	}

	/* Type
	--------------------------------------------------*/
	#issue_title{font-size:1.25em;}

	article .entry{font-size:1.1em;}*/
	/* + one unique version of .entry */
	.home #editorialcontentbody, .single-issues #editorialcontentbody{font-size:1.2em;}
	h1{font-size:1.55em;}
	h2{font-size:1.45em;}
	h3{font-size:1.35em;}
	h4{font-size:1.25em;}
	h5{font-size:1.15em;}
	h6{font-size:1.5em;}
	/*.references{font-size:0.85em;}*/
	.footnotes, .workscited{font-size:0.85em;}
	.workscited p { margin-bottom:12px!important; }
	#acknowledgements{font-size:0.85em;}

	/* + one override that probably shouldn't be here.
	It's just covering up user habits and isn't correct.
	If this were implemented it should go in the other
	responsive states as well. It's commented out for now.

	#singlearticlecontentbody h2.title{font-size:1.15em;}*/



	/* Article Teasers
	--------------------------------------------------*/
	.articlebox { width:22%; }
	.articlebox h2, .articlebox h3{font-size:1.1em; }
	.articlebox h4 { font-size:1.05em; margin-bottom:0.5em; }
	.articlebox img { width:100%; height:inherit; }

}

@media only screen and (min-width:481px) and (max-width:570px){
	.articlebox{width:21%;}
	.articlebox h2, .articlebox h3{font-size:1em;}

	#singlearticlecontent, #editorialcontent{
		margin-left:20px;
		width:60%;
	}

}


@media only screen and (min-width:768px) and (max-width:959px){
	.container{
		margin-top:30px;
	}
	.footer{
		margin-left:10px;
		margin-right:10px;
	}
	.slideshow_title{
		bottom:10px;
	}
	.slideshow_title h2{
		font-size:1.3em;
	}
	article, header{
		padding:20px;
	}
	header{
		padding-bottom:0px;
	}
	#editorialthumbnail{
		overflow:hidden;
		width:175px;
	}
	.amodernarticlelist{
		margin:0;
		list-style-type:none;
	}

	#singlearticlecontent, #editorialcontent{
		margin-left:30px;
		width:65%;
	}

	/* Type
	--------------------------------------------------*/
	article .entry{font-size:1.15em;}
	/* + one unique version of .entry */
	.home #editorialcontentbody, .single-issues #editorialcontentbody{font-size:1.2em;}
	h1{font-size:1.8em;}
	h2{font-size:1.5em;}
	h3{font-size:1.2em;}
	h4{font-size:1.15em;}
	h5{font-size:1.1em;}
	h6{font-size:1em;}
	/*.references{font-size:0.8em;}*/
	.footnotes,.workscited{font-size:0.8em;}
	.workscited p { margin-bottom:10px!important; }
	#acknowledgements{font-size:0.8em;}

	/* Article Teasers
	--------------------------------------------------*/
	.articlebox{ width:168px;}
	.articlebox h2, .articlebox h3{font-size:1.15em;}
	.articlebox h4{font-size:1.1em; margin-bottom:0.5em;}
	.articlebox img{ width:100%; height:inherit;}

	.bluebird { font-size: 8px; }

}

@media only screen and (min-width:960px) and (max-width:1080px){
	.container{
		width:90%;
		margin-top:30px;
		margin-left:auto;
		margin-right:auto;
	}

	.container .column, .container .columns{
		margin-left:0;
		margin-right:0;
	}
	.slideshow_title{
		bottom:10px;
	}
	.slideshow_title h2{
		font-size:1.3em;
	}
	article, header{
		padding:20px;
	}
	header{
		padding-bottom:0px;
	}
	#editorialthumbnail{
		overflow:hidden;
		width:225px;
	}
	.amodernarticlelist{
		margin:20px;
	}
	#singlearticlecontent, #editorialcontent{
		margin-left:30px;
		width:65%;
	}

	/* Type
	--------------------------------------------------*/
	article .entry{font-size:1.35em;}
	/* + one unique version of .entry*/
	.home #editorialcontentbody, .single-issues #editorialcontentbody{font-size:1.3em;}
	h1{font-size:2em;}
	h2{font-size:1.6em;}
	h3{font-size:1.3em;}
	h4{font-size:1.25em;}
	h5{font-size:1.2em;}
	h6{font-size:1.1em;}
	/*.references{font-size:0.8em;}*/
	.footnotes,.workscited{font-size:0.8em;}
	.workscited p { margin-bottom:10px!important; }
	#acknowledgements{font-size:0.8em;}

	/* Article Teasers
	--------------------------------------------------*/
	.articlebox{ width:23.5%;}
	.articlebox h2, .articlebox h3{font-size:1.2em;}
	.articlebox h4{font-size:1.15em; margin-bottom:0.5em;}
	.articlebox img{ width:100%; height:inherit;}

	article.index div.index-column{width:190px; }

	.bluebird { font-size: 11px; }

}

ul.bullets { list-style-type:disc !important; 	list-style-position: outside !important; margin-left:20px; margin-bottom:20px; }

.bluebird p {
	padding-left: 20px;
	text-indent: -20px;
 }

@media only screen and (min-width:1080px){
	.bluebird { font-size: 13px; }

	.container{
		width:1020px;
		margin-top:30px;
		margin-left:auto;
		margin-right:auto;
	}
	.container .column, .container .columns{
		margin-left:0;
		margin-right:0;
	}
	.slideshow_title{
		bottom:10px;
	}
	.slideshow_title h2{
		font-size:1.3em;
	}
	#editorialthumbnail{
		overflow:hidden;
		width:225px;
	}
	#singlearticlecontent, #editorialcontent{
		margin-left:30px;
		width:70%;
	}
	/* Article Teasers
	--------------------------------------------------*/
	.articlebox{
		width:225px;
	}


	.articlebox .authortitle{
		font-size:1.15em;
	}

	blockquote ul { list-style:disc; }

	/* Type
	--------------------------------------------------*/
	article .entry{font-size:1.35em;}
	h1{font-size:2em;}
	h2{font-size:1.6em;}
	h3{font-size:1.3em;}
	h4{font-size:1.25em;}
	h5{font-size:1.2em;}
	h6{font-size:1.1em;}
	/* + one unique version of .entry */
	.home #editorialcontentbody, .single-issues #editorialcontentbody{font-size:1.45em;}

	/*.references{font-size:0.8em;}*/
	.footnotes,.workscited{font-size:0.8em;}
	.workscited p { margin-bottom:10px!important; }
	#acknowledgements{font-size:0.8em;}

}


.wp-video, video.wp-video-shortcode, .mejs-container, .mejs-overlay.load {
	width: 100% !important;
	height: 100% !important;
  margin-bottom:1rem;
}
.mejs-container {
	padding-top: 56.25%;
}
.wp-video, video.wp-video-shortcode {
	max-width: 100% !important;
}
video.wp-video-shortcode {
	position: relative;
}
.mejs-mediaelement {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}
.mejs-controls {
	display: none;
}
.mejs-overlay-play {
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: auto !important;
	height: auto !important;
}


.skip-to-main {
  position: fixed;
  top: 0;
  left: 0;
  transform: translateY(-50px);
  padding: 1rem;
}
.skip-to-main:focus {
  transform: translateY(0);
  background: #d53c4c;
  color: #fff;
}

/* ----------------------------------------------------
  IMAGE TESTS
------------------------------------------------------*/
/* THIS SHOULD BE REMOVED.
This is just experimental and a bit of a proof of concept.
It's simply a test to force some kind of image management
smaller scales. We want to show something on the page but
varied sizes need to be processed. Ideally this should be
in JQuery, JS, or even through some pre-processing from
Wordpress.

The code here is impractical so it should definitely
be removed.

<Start Tests>-----------------------------------------*/
/*
@media only screen and (max-width:480px){
	#editorialthumbnail{
		overflow:hidden;
		position:relative;
		margin:0 0 1em 0;
		height:60px;
		width:100%;
	}
	#editorialthumbnail img{
		margin:-40% 0;
	}
}
@media only screen and (min-width:481px) and (max-width:570px){
	#singlearticlecontent, #editorialcontent{
		margin-left:20px;
		width:60%;
	}
	#editorialthumbnail img{
		margin:0 -35%;
	}
}
@media only screen and (min-width:570px) and (max-width:767px){
	#editorialthumbnail img{
		margin:0 -20%;
	}
}
*/

/*<End Tests>-----------------------------------------*/