/* 
 * Phillip Thomas (c) 2015
 */

/************************************************** GLOBAL STYLING
*/

.mono { font-family: monospace; }
.small { font-size: 90%; }
.underline { text-decoration: underline; }
.italic { font-style: italic; }
.hidden { display: none; }
.center { text-align: center; }

html {
	-webkit-text-size-adjust: 100%;
}

body {
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	font-family: "Times New Roman", Times, Serif;
	font-size: 14px;
	margin: 0.5em;
	line-height: 1.0 !important; /* iOS had a line-height > 1.0 */
}


a {
	color: rgb(220, 220, 220);
}




/************************************************** PHOTOLINK ELEMENTS
*/

span.photolink {
	position: relative;
	display: inline-block;
	width: 10em;
	height: 6.67em;
	margin: 0.5em 1em;
	padding: 0.5em;
	vertical-align: top;
	overflow: hidden;
	cursor: pointer;
	background-color: rgb(0, 0, 0); /* incase it's empty */
}

span.photolink > p,
span.photolink > a {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 0.5em;
	z-index: 50;
	background-color: rgba(40, 40, 40, 0.98);
	text-decoration: none;
}

span.photolink > img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	min-height: 100%; /* this may stretch some photos */
}

/* Portrait adjustments
 * assume photo exactly fits 1.5 aspect ratio
 */
span.photolink > img.top { /* default */ }
span.photolink > img.bottom { top: initial; bottom: 0; }
span.photolink > img.middle { top: -62.5%; }
span.photolink > img.lowmiddle { top: -100%; }
span.photolink > img.highmiddle { top: -37.5%; }

span.photolink > span.noimg {
	display: block;
	text-align: center;
	font-size: 3em;
	line-height: 2.22em;
}



/************************************************** MAIN PAGE STYLING
	beware generic selectors !!!
*/

body.main { 
	min-height: 87.5em; /* just enough for 4 sections, 1 expanded */
}

div.section {
	position: relative;
	height: 15em;
	margin: 1.5em 0;
	padding: 1em;
	/* min-width: 59em; */
	/* transition: height 300ms ease-out; */
}
div.section:nth-child(1) { background-color: rgb(0, 128, 220); }
div.section:nth-child(2) { background-color: rgb(255, 220, 0); }
div.section:nth-child(3) { background-color: rgb(128, 255, 0); }
div.section:nth-child(4) { background-color: rgb(255, 128, 0); }

div.section.expanded { height: 32em; }


div.section > div.button,
div.section > div.content-container {
	position: relative;
	display: inline-block;
	vertical-align: top;
	margin: 0;
	border-style: solid;
	border-width: 1.5em;
	overflow: hidden;
	/* */
	border-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.85);
}

div.section > div.button:before,
div.section > div.button:after,
div.section > div.content-container:before,
div.section > div.content-container:after { content: none; }


div.section > div.button {
	width: 15em;
	height: calc(100% - 3em);
	text-align: center;
}

div.section > div.button > span {
	display: inline-block;
	width: 100%;
	font-size: 3em;
}

div.section > div.button > img {
	position: relative;
	display: inline-block;
	width: 200%;
	left: -50%;
}

div.section > div.content-container {
	padding: 1em;
	height: calc(100% - 5em);
	width: calc(100% - 23em); /* minus self(padding, border) + sibling(border, size) */
}

div.section div.content > h1 {
	font-size: 5em;
	font-weight: normal;
	margin: 0;
	padding: 0;
	height: 1.1em; /* oversized for lowercase letters */
	overflow: hidden;
}

div.section div.content > div.links {
	display: none;
	margin-top: 1em;
	/*max-width: 37em;*/
}
div.section.expanded div.content > div.links { display: block; }

div.section div.links a.tag {
	display: inline-block;
	padding: 0.5em;
	margin: 1em;
	font-size: 1.3em;
	letter-spacing: 1px;
	text-decoration: none;
	color: rgb(220, 220, 220);
	background-color: rgba(64, 64, 64, 1.0);
}
div.section div.links > a.tag.hidden { display: none; }

div.section span.photolink > a.tag {
	display: block;
	margin: 0;
	background-color: rgba(64, 64, 64, 0.95);
}

/************************************************** MORE PAGE STYLING
*/

body.more {
	margin: 0 1em 1em;
	font-size: 18px;
	letter-spacing: 0.5px;
	background-color: rgba(64, 64, 64, 1.0);
	color: rgb(220, 220, 220);
}

body.more > #page-container {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.more nav > a {
	display: inline-block;
	padding: 0.5em;
	margin: 1em;
	font-size: 0.9em;
	letter-spacing: 1px;
	text-decoration: none;
	color: rgb(220, 220, 220);
	background-color: rgba(40, 40, 40, 1);
	border: 2px solid rgb(28, 28, 28);
}

header.tag { visibility: hidden; height: 0; }

div.divider {
	width: 100%;
	height: .2em;
	background-color: rgba(128, 128, 128, 0.3);
}

.more article {
	padding: 1.5em 1em;
	/* border-bottom: 0.2em dashed rgba(0, 0, 0, 0.2); */
}
.more article + article { margin-top: 1em; }
.more article p:first-of-type { margin-top: 0; }
.more article p { margin-bottom: 0; }


.more article a {
	/* letter-spacing: initial; */
	color: rgb(220, 220, 220);
}

.more article p.missing,
.more article a.missing { /* invert colors for missing stuff */
	padding: 0 0.2em;
	background-color: rgb(220, 220, 220);
	color: rgb(64, 64, 64);
}


.more article div.photolink-list {
	margin-top: 1em;
}

.more article > div.article-left,
.more article > div.article-right {
	display: inline-block;
	vertical-align: top;
}

div.article-left.icon-container {
	width: 10em; /* NOTE: matches size of icon defined below */
}

div.article-left.icon-container + div.article-right {
	margin-left: 2em;
	width: calc(100% - 12em);
}

.more div.icon {
	width: 10em;
	height: 10em;
	overflow: hidden;
}

.more div.app-icon {
	display: inline-block;
	border-radius: 1.5em;
	box-shadow: 0 0 1em 2px black;
	margin: 1em;
}

.more div.icon img.app-icon {
	width: 100%;
	height: 100%;
}

.more div.uc-icon {
	width: 10em;
	height: auto;
	background-color: white;
	/* color: #651110; */
	color: #7d0101;
	border-radius: 1em;
	box-shadow: 0 0 1em 2px black;
}

.more div.uc-icon > div.maroonbg {
	width: 100%;
	height: 1.3em;
	background-color: white;
}
/* from UC styles, www.uchicago.edu
***
.more div.uc-icon > div.maroonbg:first-child { background: -webkit-linear-gradient(top, #651111 0%, #7d0101 100%); }
.more div.uc-icon > div.maroonbg:last-child { background: -webkit-linear-gradient(bottom, #651111 0%, #7d0101 100%); }
***
*/

.more div.uc-icon > p {
	text-align: center;
	margin: 0;
	padding: 0 0.4em;
	/* font size will be automatically generated */
	/* from UC styles, www.uchicago.edu */
	font-family: "ProximaNova-Light","Helvetica Neue",Helvetica,Arial,sans-serif;
}
.more div.uc-icon > p:first-of-type { padding-top: 0.2em; }
.more div.uc-icon > p:last-of-type { padding-bottom: 0.4em; }