/* Sooper fonts */
/* I made these! */


/* Generated by Font Squirrel (http://www.fontsquirrel.com) on August 4, 2012 */

@font-face {
    font-family: 'SooperSansThick';
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/soopersans-thick-webfont.eot');
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/soopersans-thick-webfont.eot#iefix') format('embedded-opentype'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/soopersans-thick-webfont.woff') format('woff'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/soopersans-thick-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
	}

@font-face {
    font-family: 'SooperSerifThinCondensed';
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed-webfont.eot');
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed-webfont.eot#iefix') format('embedded-opentype'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed-webfont.woff') format('woff'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}

@font-face {
    font-family: 'SooperSerifThinCondensed2x';
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed2x-webfont.eot');
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed2x-webfont.eot#iefix') format('embedded-opentype'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed2x-webfont.woff') format('woff'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/sooper/sooperserif-thincondensed2x-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
	}


/*
 * Web Font from fontspring.com
 *
 * Vendor:      Hoftype
 * License URL: http://www.fontspring.com/fflicense/hoftype
 *
 */


@font-face {
    font-family: 'CassiaWeb-full';
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialig-web-full.eot');
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialig-web-full.eot#iefix') format('embedded-opentype'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialig-web-full.woff') format('woff'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialig-web-full.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


@font-face {
    font-family: 'CassiaWeb-full';
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialigita-web-full.eot');
    src: url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialigita-web-full.eot#iefix') format('embedded-opentype'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialigita-web-full.woff') format('woff'),
         url('/National_Library/20160930123623oe_/https://ericportis.com/fonts/cassia-full/cassialigita-web-full.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;

}



body {
	font-family: 'CassiaWeb-full', Georgia, serif;
	background-color: #e6e6e6;
	color: #222;
	margin: 0;
	padding-bottom: 3em;
	font-size: 1rem;
	line-height: 1.6;
	min-width: 12rem;
    font-kerning: normal; /* CSS3 editor's draft way of doing this that works in no browsers */
    text-rendering: optimizeLegibility; /* non-standard way implemented by lots of things, might make stuff slow for body text and buggy on android? */
	}

* { box-sizing: border-box; }

.lights-out {
	background-color: #161616;
	color: #eee;
	}

.white-out {
	background-color: white;
	}

a {
	color: #49e;
	text-decoration: none;
	}
	a:hover {
		border-bottom-width: 1px;
		border-bottom-style: solid;
		border-bottom-color: #49e;
		}
	a:active {
		color: yellow;
		border-bottom-color: yellow !important; /* important to override javascript cyclotron applied style in html */
		}
		 
.accent-color {
	color: #49e;
	}

.accent-background-color {
	background-color: #49e;
	}

.hide-text {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	}



#e {
	display: block;
	width: 6em;
	height: 6em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1em;
	}
	/* don't show our fallback img intitially if we're not going to need it */
	/* ie if modernizr has set the svg and js classes on the html element after detecting support */
	.js.inlinesvg #e-to-replace {
		display: none;
	}	
	@media all and (min-width: 32em) { #e {
			width: 7em;
			height: 7em;
			}}
	
	@media (min-width: 56em) { #e {
			width: 7.5em;
			height: 7.5em;
			}}

	#e-goes-here a:hover {
		border-bottom: none;
		}



header .big-h {
	text-align: center;
	}

.big-h {
	font-family: 'SooperSansThick', 'Helvetica', sans-serif;
	line-height: 1;
	font-weight: bold;
	font-size: 3.5em;
	margin: 0.1em 0;
	}
	
.little-h {
	font-family: 'SooperSerifThinCondensed', 'Courier New', 'Courier', serif;
	font-weight: normal;
	font-size: 2.5em;
	line-height: 1;
	}
	
.tiny-h {
	font-family: 'SooperSerifThinCondensed', 'Courier New', 'Courier', serif;
	font-weight: normal;
	font-size: 1.75em;
	line-height: 1;
	}

.center {
	text-align: center;
	}

.lights-out .big-h:not(a), .lights-out .little-h:not(a) {
	color: white;
	}

section > .little-h {
	margin-top: 5rem;
	text-transform: uppercase;
	}


.info-line {
	font-family: "Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif;
	color: #888;
	font-size: 0.7rem;
	line-height: 1;
	}
	.info-line.center { margin-left: 0; }
	
	.lights-out .info-line {
		color: #444;
		}
	.info-line:not(.footnotes) li {
		display: inline;
		}
	.info-line:not(.footnotes) li:before {
		content: " — ";
		}
	.info-line:not(.footnotes) li:first-child:before {
		content: none;
		}
		
	@media all and (max-width: 32em) { .info-line, ol.footnotes {
		font-size: 0.5625rem;
		}}


em {
	font-style: italic;
	}

			blockquote {
				padding-left: 1em;
				margin: 2em 0;
				border-left: 3px solid #aaa;
			}


blockquote p {
	margin-left: 1em;
	}
blockquote p:first-child:before {content: '“'}
blockquote p:last-child:after {content: '”'}

address {
	margin: 1em auto;
}


.top-text {
	font-family: 'SooperSerifThinCondensed';
	font-weight: normal;
	width: 100%;
	color: white;
	font-size: 2.25em;
	font-weight: normal;
	line-height: 1.25;
	margin-bottom: 0.5em;
	margin-top: 0;
	padding-left: 0;
	}
	.top-text > * { display: inline-block; }
	.top-text > *:after {content: ", ";}
	.top-text > *:last-child:after {content: none;}
	.top-text > *:last-child:before {content: "& ";}
	.top-text .current { border-bottom: 1px solid white; }

	@media (min-width: 22em) { .top-text {
		font-size: 2em;
		}}
	
	@media (min-width: 28em) { .top-text {
		margin-bottom: 1em;
		}}
	
	@media (min-width: 48em) { .top-text {
		font-size: 1.75em;
		}}


/* typesetting finickiyness */


/* citations in things that don't have italics */
.big-h cite, .little-h cite, .thumb-h cite {font-style: normal;}
.big-h cite:before, .little-h cite:before, .thumb-h cite:before {content: '“'}
.big-h cite:after, .little-h cite:after, .thumb-h cite:after {content: '”'}


/* small caps what what */

@supports (font-variant-caps: all-small-caps) {

	.small-caps {
		font-variant-caps: all-small-caps;
		
	    font-size: 1.05em;
	    letter-spacing: 0.05em;
	}

}

@supports (not (font-variant-caps: all-small-caps)) and ((font-feature-settings: "smcp", "c2sc") or (-moz-font-feature-settings: "smcp", "c2sc") or (-ms-font-feature-settings: "smcp", "c2sc") or (-webkit-font-feature-settings: "smcp", "c2sc") or (-o-font-feature-settings: "smcp", "c2sc")) {

	.small-caps {
		-webkit-font-feature-settings: "smcp", "c2sc";
		-moz-font-feature-settings: "smcp", "c2sc";
		-ms-font-feature-settings: "smcp", "c2sc"; 
		-o-font-feature-settings: "smcp", "c2sc";
		font-feature-settings: "smcp", "c2sc";

	    font-size: 1.05em;
	    letter-spacing: 0.0375em;
	}

}


/* code */

code, var {
	background-color: #ddd;
	padding: .1875em .375em; /* has to be this big to cover up link underline when they're links! */
	border-radius: .25em;
	font-family: monospace;
	white-space: nowrap;
	}
var {
	font-style: normal;
}
pre {
	background-color: #ddd;
	padding: 1em 1.5em;
	border-radius: 1em;
	overflow: scroll;
	}
	pre code, code pre { white-space: pre; }
	pre code { padding: 0; }
	.info-line code, .info-line pre {
		background-color: #eee;
	}


a:hover code {
	color: white;
	background-color: #49e; /* need to update this in cyclotron! */
	}

a:active code {
	background-color: yellow;
	}


/* footnotes */

sup {
	font-size: 65%;
	vertical-align: super;
	line-height: 0;
	}

.footnote-hr {
	width: 20%;
	height: 1px;
	border: 0;
	background-color: #ccc;
	margin-top: 4rem;
	}
	.lights-out .footnote-hr {
		background-color: #444;
		}

.footnotes {
	margin-top: 2em;
	}
	.footnotes li {
		list-style: decimal;
		margin: 1rem;
		line-height: 1.5;
		}
	.footnote-return-link {
		margin-left: 0.5em;
		}


/* fancy footnote marks (& custom fractions & anything sup/sub) */

@supports (font-variant-position: super) and (font-variant-position: sub) {

	sub, sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
	}

	sub { font-variant-position: sub; }
	sup { font-variant-position: super; }

}

@supports ( not ((font-variant-position: super) and (font-variant-position: sub)) ) and ( ((font-feature-settings: "sups") and (font-feature-settings: "subs")) or ((-moz-font-feature-settings: "sups") and (-moz-font-feature-settings: "subs")) or ((-ms-font-feature-settings: "sups") and (-ms-font-feature-settings: "subs")) or ((-webkit-font-feature-settings: "sups") and (-webkit-font-feature-settings: "subs")) or ((-o-font-feature-settings: "sups") and (-o-font-feature-settings: "subs")) ) {

	sub, sup {
		vertical-align: baseline;
		font-size: 100%;
		line-height: inherit;
	}

	sub {
		-webkit-font-feature-settings: "subs";
		-moz-font-feature-settings: "subs";
		-ms-font-feature-settings: "subs"; 
		-o-font-feature-settings: "subs";
		font-feature-settings: "subs";
	}
	sup {
		-webkit-font-feature-settings: "sups";
		-moz-font-feature-settings: "sups";
		-ms-font-feature-settings: "sups"; 
		-o-font-feature-settings: "sups";
		font-feature-settings: "sups";
	}

}


/* asterisms (for dividing sections of articles, kinda like an hr...) */

.asterism, .lights-out .asterism {
	margin-top: 6rem;
	margin-bottom: 6rem;
	text-align: center;
	color: #888; /* same as info line */
	}

footer p {
	margin-top: 2em;
	text-align: center;
	}	
		
footer {
	clear: both;
	}

small {
	display: block;
	width: 100%;
	text-align: center;
	}


/* bodytext paragraphs */


article p {
 	margin: 1rem 0;
 	}
 
article ul, article ol {
	padding-left: 1em;
	list-style: disc;
	}
	article header ul, article header ol {
		padding-left: 0;
		}

article > *:not(.wide) {
 	max-width: calc( 100% - 3rem );
	margin-left: 1.5rem;
	margin-right: 1.5rem;
	}

audio {
	display: block;
	}

.pagination {
	text-align: center;
	text-transform: uppercase;
	margin-top: 3em;
	margin-bottom: 3em;
	}
	.pagination.newer {
		margin-top: 1em;
		margin-bottom: 1em;
	}

iframe { margin-top: 1em; }

.spinner {
	min-height: 32px;
	background-image: url(/National_Library/20160930123623oe_/https://ericportis.com/images/16x16-Spinner.gif);
	background-repeat: no-repeat;
	background-position: center;	
}

/* LET'S SET THE METER OF THE TYPE AND THE ROOT BODY FONT-SIZE ACROSS ALL REASONABLE WINDOW SIZES */

/* default is 16px/1rem working our way down from that to super small sizes */


@media (max-width: 15em) {
	body {
		font-size: 0.9375rem; /* 15x */
		}	
	}


@media (max-width: 13em) {
	body {
		font-size: 0.875rem; /* 14px */
		line-height: 1.5;
		}	
	}


@media (max-width: 28em) {
	p {
		-webkit-hyphens: auto;
		hyphens: auto;
		}
}

/* default is 16px / 1 rem  working our way up from that... */

@media (min-width: 28em) {
	body {
		font-size: 1.0625rem; /* 17px */
		}
	article > *:not(.wide) {
		max-width: 24rem;
		margin-left: auto;
		margin-right: auto;
		}
	}	

@media (min-width: 40em) {
	body {
		line-height: 1.7;
		}
	article > *:not(.wide) {
		max-width: 32rem;
		}	
	}

@media (min-width: 48em) {
	body {
		font-size: 1.125rem; /* 18px */
		line-height: 1.8;
		}
	article > *:not(.wide) {
		max-width: 36rem;
		}
	}


@media (min-width: 60em) {
	body {
		font-size: 1.25rem; /* 20px */
		}
	article > *:not(.wide) {
		max-width: 42rem;
		}
	}

@media (min-width: 72em) {
	body {
		font-size: 1.375rem; /* 22px */
		}
	article > *:not(.wide) {
		max-width: 48rem;
		}
	}

figure {
	margin: 0;
}