/* Prince Style Sheet (in progress) */
/*  
This is a style sheet for Prince XML. Prince XML can handle CSS3 Paged Media elements, like page numbers, headers and footers, etc. I'm trying to get it to style our standard posts. If that works, I can run it from the command line to get good pdfs. We can then add metadata to link to them if they are available. 

This can also work in conjuntion with @media print functions as well. I can try to get the two looking as much alike as possible….(BK: basically, pop this in for print.css and add some margins instead of the paged media commands.)

TO RUN THIS, from the command line:

Test code: (note the flag to set the media type)

prince http://nonsite.org/article/why-we-need-to-make-college-free-going-back-to-class princetest.pdf --media=prince

prince http://nonsite.org/article/passive-and-active-skepticism-in-nicholas-ray%E2%80%99s-in-a-lonely-place princetest.pdf --media=prince

prince http://nonsite.org/issues/issue-1/sonnenuntergang-on-philippe-parreno%E2%80%99s-june-8-1968 princetest.pdf --media=prince

prince http://nonsite.org/issues/issue-2/music-image-schemata-and-the-hidden-art princetest.pdf --media=prince

TODO: how can I install princexml on our server? How can I make a php module that runs it once we're all nicely styled?

1) DONE. Set page numbers from post's metadata. BK: I set up some fields in WP to hold the data. 
Now I need to generate my CSS in PHP so I can pass variables. 
CSS can't deal with variables. I am now passing the requisite variables via $_GET
        
2) set up another style sheet to turn the issue page into frontpiece for the issue, modeled on the designer's idea. 
Issue number, title, and a table of contents?
 
3) The amazing goal would be to print a whole issue via one prince command. Can I get the issue page to concatenate all the posts included in the issue and format them?? 
This is verging onto the book publishing side of things...
 
TODO: Fix the code that spits out categories for the print header. I always want the issue to come last! Maybe I need one that reads the categories minus issues, then another that just does issues...

*/ 

/* SET THE PHP HEADER TO CSS */

@font-face {
  font-family: "oswald";
  src: url("../fonts/oswald2/oswald.eot");
  src: local("~"),
    url("../fonts/oswald2/oswald.woff") format("woff"),
    url("../fonts/oswald2/oswalf.otf") format("opentype"),
    url("../fonts/oswald2/oswald.svg#oswald") format("svg");
  }

@font-face {
  font-family: "bebas neue";
  src: url("type/bebasneue.eot");
  src: local("~"),
    url("type/bebasneue.woff") format("woff"),
    url("type/bebasneue.otf") format("opentype"),
    url("type/bebasneue.svg#bebasneue") format("svg");
  }



.pagenumber {
    string-set: startpage content();
}

@page {
	size: US-Letter;
	margin: 1in 1.25in;
	counter-increment: page;
	font-size: 8pt;
	font-family: "oswald";
	text-transform: uppercase;
	text-transform: bold;
	color: gray;
	letter-spacing: 50%;
	
	@bottom-right {
	content: counter(page); 
    }
  
 } 
 
@page :first { 
	@top-right{
		content: none;
	}
	
	@bottom-right{
		content: none;
	}
 }

@page :blank {
	@top-right{
		content: none;
	}
	@top-left{
		content:none;
	}
	@bottom-right{
		content:none;
	}
}

@page :right {
	@top-right {
		content: string(section); 
	}
	
	@top-left {
	content: string(nonsite) " " string(issue-number) " " string(issue-title) " " string(issue-date);
	}
	
}

@page :left {
	@top-left {
		content: string(docauthor) " " string(doctitle) " " string(docsubtitle);
	}
	
	
}

@page last_page {
	@bottom-right {
		content: "LAST PAGE";
		size: A4 landscape;
	}
}

table.big {
	display: block;
	page: last_page;
	background-color: #8ABB55;
}

#mobile-nav {
	display: none;
}

#off-canvas-nav, #off-canvas-nav ul li a {
	display: none;
}

#navbar {
	display:none;
}

#title-page {
	font-family: "oswald";
}

#title-page .issue-logo {
	float: right;
	margin-bottom: 5.5in;
}


#title-page .title-table {
	margin-top: 1in;
}

#title-page .issue-number {
	font-size: 1in;
	color: #ffffff;
	text-align: center;
	vertical-align: center;
}

#title-page .issue-title {
	font-size: 0.3in;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	text-align: right;
	padding-left: 40px;
}

#title-page .issue-date {
	font-size: 0.5in;
	text-align: right;
}

#title-page .open-access-one {
	font-family: Helvetica;
	font-size: 6pt;
}

#title-page .open-access-two {
	font-family: Helvetica;
	font-size: 6pt;
letter-spacing: 0.08em;
	color: gray;
}

#title-pic {
	display: block;
	font: 0.125in Garamond;
	margin-bottom: 1cm;
}


img[class*="attachment-"] {
	height: auto; 
	width: 100%;
}
	
	
.nonsite-article-info {
	display: none;
}


#editorial-board {
	display: block;
	page-break-inside: avoid; 
	margin-bottom: 1cm;
}

#editorial-board .header {
	font: 0.15in "oswald";
	text-transform: uppercase;
	padding-top: 1cm;
	padding-bottom: 0.3cm;
	letter-spacing: 0.1em;
}

#editorial-board .editor-block {
	column-count: 3;
}

#editorial-board .editor {
	font: 0.125in Garamond;
}

#nonsite-info {
	text-align: justify;
	page-break-after: right;
}

#nonsite-info .title {
	font: 0.15in "oswald";
	text-transform: uppercase;
	padding-bottom: 0.3cm;
	letter-spacing: 0.1em;
}

#nonsite-info p {
	font: 0.125in Garamond;
}

#nonsite-info strong {
	display: block;
	font: 0.1in "oswald";
	text-transform: uppercase;
	letter-spacing: 0.1em;
	page-break-after: avoid;
}

#TOC .nonsite-org {
	string-set: nonsite content() " - ";
	display: none;
}

#TOC .issue-number {
	font: 0.3in "oswald";
	text-transform: uppercase;
	letter-spacing: 0.1em;
	string-set: issue-number content() ":";
	content: string(issue-number);
}

#TOC .issue-title {
	font: 0.3in "oswald";
	text-transform: uppercase;
	letter-spacing: 0.1em;
	string-set: issue-title content();
}

#TOC .issue-date {
	font: 0.3in "oswald";
	text-transform: uppercase;
	letter-spacing: 0.1em;
	string-set: issue-date "(" content() ")";
	display: block;
	padding: 0.2cm 0cm;
}

#container{ /* According to Princexml forum, page will not accept counter-increment. It will accept counter-reset if it is a block element (?) and not floating?? Whatever that means…(http://www.princexml.com/doc/8.1/page-numbers/) I can set the number here, but I can't seem to pass it in via set-string. Hmmm…Do I need to rewrite this CSS in PHP, where I can pass in a variable?? BK: looks like the answer is yes.*/

counter-reset: page ; */ 
}

/* TABLE OF CONTENT STYLING */

#TOC {
	font: 0.18in Garamond;
}

#TOC h1 {
	font: 0.2in "oswald";
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.toc-header {
	font-family: "oswald";
    text-transform: uppercase;
	letter-spacing: 0.1em;
	padding-top: 0.3cm;
	padding-bottom: 0.2cm;
}

.toc-item {
	display: block;
	page-break-inside:avoid;
}

.toc-title {
	padding-top: 0.2cm;
	font-weight: bold;
}

.toc-title a[href]::after {content: leader(" . ") target-counter(attr(href), page) }

.toc-author{
	padding-bottom: 0.2cm;
}

#comments { display: none}
.sidebar {display: none }
ul.nav {display: none }
.single-sidebar { display: none }
.navigation-post { display: none }
#respond {display: none }
#commentform { display:none }
.post-data {display: none }
.shareinpost {display: none } /* social media plugin */


h1, h2, h3, h4, h5, h6 { page-break-after:avoid; 
     page-break-inside:avoid }

img { display: block;
    page-break-inside:avoid; 
    page-break-after:avoid;
    margin-left: auto;
    margin-right: auto;
    max-width: 500px;
}
	
img.size-large { /* this is actually impacting the size of images! I might need other div classes, depending on the post…(BK) */
    max-width: 100%; 
}



table, pre { page-break-inside:avoid }
ul, ol, dl  { page-break-before:avoid }

a {
	color: #000;
	text-decoration: none;
}


/* BK: THIS IS THE PARAGRAPH SPACING AND FONT FOR YOUR SINGLE POST */

p { text-indent: 0cm; /*This can be adjusted to add paragraph indents */
    font-family: Garamond;
	font-size: 12pt;
	text-align: justify; 
	letter-spacing: 0px;
	line-height: 140%;
	padding: 6px 0px;
	margin-bottom: 0; 
	margin-top: 0;
    orphans:3;
    widows:2;

}

pre {
	font: 15px Georgia, "Times New Roman", Times, serif;	
	letter-spacing: 0px;
	line-height: 20px;
	padding: 5px 0px;
}

abbr {
	border-bottom: 1px dotted #999;
	cursor: help;
}

acronym {
	border-bottom: 1px dashed #999;
	cursor: help;
}

blockquote {
    display: block;
	padding: 0px 5px;
	font-size: 12px;
	min-height: 0px;
	line-height: 15px;
	clear: both;
    orphans:3;
    widows:2;
} 

#header { display: none;
}


#logo {
	background-color: white;
}

#tagline { display: none;
	font-family: "bebas neue";
	position: relative;
	top: 15%;
	background: #D42;
	color: white;
	text-transform: uppercase;
	float: right;
	padding: 2px;
	line-height: 100%;
	letter-spacing: -0.7pt;
	word-spacing: 0.6pt;
	font-size: 13pt;

}

.category {
    display: none;
}

.single-main hr {
    display: none;
}


.focus {
	width: 658px;
	padding: 10px;
	border-bottom: 1px solid #eaeaea;
	background-color: #fff;
}


/* BK: added */

.section {
	display: block;
	page-break-before: right;
	font-size: 0.4in;
    font-family: "oswald";
    font-weight: bold;
	color: #000;
	padding-bottom: 0.1cm;
    letter-spacing: 0.1em;
	text-transform: uppercase;
	string-set: section content();
}

.single-main {
    font: normal 12px Garamond;
	page-break-before: right; 
	width: 100%;
	float: left;
	text-align: left;
}


.single-main .title {
	display: block;
	
	font-size: 0.4in;
    font-family: "oswald";
    font-weight: bold;
	color: #000;
	padding-bottom: 0.1cm;
    letter-spacing: 0.1em;
    string-set: doctitle content() docsubtitle ""; /* Will this reset subtitles? */
    text-transform: uppercase
}

.single-main .subtitle {
    font-size: 0.2in;
    font-family: "oswald";
    text-transform: uppercase;
    font-weight: bold;
    string-set: docsubtitle content();
    letter-spacing: 0.1em;
}

.single-main .author {
    font-family: "oswald";
    text-transform: uppercase;
    font-weight: bold;
    font-size: 0.15in; 
    letter-spacing: 0.1em;
   /* margin-bottom: 7.5cm;*/
   margin-bottom: 2cm;
    padding-top: 0.8cm;
    string-set: docauthor content() " - ";
}

.single-main .author .a {
/*	string-set: docauthor content() "~~";*/
}

.single-main .author .author-web-only {display: none}

.single-main h3 {
	padding-top: 20px;
	font: normal 18px Georgia, "Times New Roman", Times, serif;
	color: #000;
	padding-bottom: 10px;
}


/* BK: added */

.single-main .caps {
	font-size: 13px;
	text-transform: uppercase;
	font-weight: bold;
	margin: 0;
	color: #000099;
	font-family: Georgia, "Times New Roman", Times, serif;
	padding-bottom: 10px;
	padding-top: 10px;
	
}

.single-main ol, .single-main ul {
	padding: 5px 5px 5px 30px;	
	font: 13px Georgia, "Times New Roman", Times, serif;
	line-height: 140%;
}

.single-main li {
    font-family: Garamond;
	font-size: 15px; /* NEW TYPEFACE suggested by the designer -- BK: does this need to be scaled or fixed for clarity? */	
	text-align: justify; 
	letter-spacing: 0px;
	line-height: 140%;
	padding: 5px 0px;

}

.author-detail h5 {
    display: none;
}
.author-detail, .author-detail p {
    font-size: 9pt;
    text-align: left; 
	line-height: 125%;
}

.tagline, .tagline p {
	font-size: 9pt;
	text-align: left; 
	line-height: 125%;
}

.wp-smiley {
    display: none;
}

.comments {
	display: none;
}


p.tags {
	border: 1px dotted #eaeaea;
	padding: 10px;
	background: #fcfcfc;
	margin-top: 10px;
}

#printfooter, #printfooter p {
    display: block;
	page-break-before: left;
    font-size: 8pt;
    font-family: "oswald";
    text-transform: uppercase;
    text-transform: bold;
    color: gray;
    letter-spacing: 50%;
	margin-top: 8in;
	string-set: docauthor none, doctitle none, docsubtitle none;
}

.emory-logo {
	display: none;
}

.footer-text {display: none; }

#footer {display: none; }

#wpstats {display: none; }

/* BK: new classes */
.solid-line {
	padding-bottom: 15px;
	border-bottom: 2px solid #000000;
	margin-bottom: 15px;
}



/* BK: new styles */

.no-style {
}

.single-main .abstract { 
	font-size: small;
	color: #41383C;
	margin-bottom: 1em;
}

.single-main .epigram {
	font-size: 11px; 
	text-align: right;
	margin-left: 70%;
    padding-bottom: 3px;
}

.container {
}


.left-element { display: none;}
.right-element { display: none;}
.printme {display: none; }

.small-post{
	font-size: 10px;
}


.superscript { 
	position: relative;
	font-size: 60%;
	top: -0.8ex;
	margin-left: 0.2em;
	margin-right: 0.1em;
}

.footnote_head {
  display: block;
  page-break-before: always;
  font-size: 9pt;
  letter-spacing: 0.1em;
  font-family: "oswald";
  text-transform: uppercase;
  text-transform: bold;
  padding-bottom: 4px;
}

.footnote-text, .footnote-text p {
    font-family: Garamond;
    font-size: 9pt;
    text-align: left; 
	line-height: 125%;
	padding: 2px 0px;
}


/* BK -- this erases the return arrows in the footnotes on print!! */
/* NOTE: make sure you wrap the arrow with <span class="hide">.....</span>, in case up updates */

.hide { display: none}


/* BK -- ADDED CODE FOR IMAGES -- */
/* Begin Images */
p img, a img {
	padding: 0;
	max-width: 100%;
    display: block;
	margin-left: auto;
	margin-right: auto;
	}

/*	Using 'class="alignright"' on an image will (who would've
	thought?!) align the image to the right. And using 'class="centered',
	will of course center the image. This is much better than using
	align="center", being much more futureproof (and valid) */

img.centered {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}
    
img.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
	}

img.alignright {
	padding: 4px;
	margin: 0 0 2px 7px;
	display: inline;
	}

img.alignleft {
	padding: 4px;
	margin: 0 7px 2px 0;
	display: inline;
	}

.alignright {
	float: right;
	}

.alignleft {
	float: left;
	}
/* End Images */

/* Make sure images with WordPress-added height and width >attributes are scaled correctly. BK: This syntax is for an attribiute selector with a wildcard  */

img[class*="align"],
img[class*="wp-image-"] {
    height: auto; 
}


/* Captions */
.aligncenter { /* this is affecting the image + caption block */
	display: block;
    page-break-inside: avoid;
    max-width: 100%; /* this will constrain width of image + caption block */
	margin-left: auto;
	margin-right: auto;
    margin-bottom: 0.3cm;
    margin-top: 0.4cm;
}

.aligncenter img { /*this affects images but not the captions */
}

.wp-caption-text { /* this is controlling caption text */ 
	text-align: center;
    font-size: 85%;
    padding-top: 0.2cm;
}






/* End captions */

/* For Blakley Vermule's essay */

.single-main .indent1 {
text-indent: 2em
}

.single-main .indent2 {
text-indent: 4em;
}

.single-main .indent-paragraph1 {
/* padding-left: 4em; */
 margin-left: 2em; 
/* padding-top: 1em; */
/* padding-bottom: 1em; */
}

.single-main .indent-both {
padding-left: 2em;
padding-right: 4em;
}

/* ADD A SPACE */
.single-main .line-break {
	text-indent: 0em;
}

/* TWITTER AND FACEBOOK SHARE */
/* THIS hides twitter and facebook share links at bottom of post */
.interactive_bottom {
	display: none;
}



/* AUDIO AND VIDEO */
/* BK: could I get it to put the link instead of just suppressing it altogether? */

.mejs-audio { /* This hides the audio player */ 
    display: none;
}


.mejs-video { /* This blocks out the video, the image, play, and controlls are separate bits */
    display: none;
    page-break-inside: avoid;
    margin-left: auto;
    margin-right: auto;
}

.mejs-poster, .mejs-poster img, .mejs-poster.mejs-layer img {
    width: 100px;
    margin-left: auto;
    margin-right: auto;
}

.mejs-overlay, .mejs-controls { /* This got rid of the play button and controls */
    display: none
}

.mejs-mediaelement {
    display: none;
    }

id[class*='wp_mep_'] {
    display: none;
}

.screenonly { display: none; }

/* Post tabs formatting for print */

a[id*="anchor-id"] {display: none;} /*this gets rid of tabs */
.postTabs_divs { display: block !important;}  /* this unhides all the content */ 

/* Trying to hide the share buttons from Jetpack */
.sharedaddy {display: none}