@header1fontsize: 26pt;
@header2fontsize: 14pt;
@header3fontsize: 12pt;
@footerfontsize: 10pt;
@bodyfontsize: 10pt;
@textcolor: black;
@headfootbg: white;
@emphlinkcolor: #006;
@switchat: 667px;

.header1font() {
	font-family: 'Headland One', serif;
	font-size: @header1fontsize;
}

.header2font() {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: @header2fontsize;
}

.header3font() {
	font-family: 'Raleway', sans-serif;
	font-weight: 300;
	font-size: @header3fontsize;
}


.footerfont() {
	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	font-size: @footerfontsize;
}

.bodyfont() {
	font-family: 'Merriweather Sans', sans-serif;
	font-weight: 400;
	font-size: @bodyfontsize;
}

.justiphate() {
	text-align: justify;
	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;
}

.border-radius(@radius) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

/* Cross-browser flexbox: see https://gist.github.com/jayj/4012969 for more */

.flex(@direction: row) {
	display: -ms-flexbox;
	display: -ms-flex;
	display: -webkit-flex;
	display: -moz-flex;
	display: flex;
    -ms-flex-direction: @direction;
	-webkit-flex-direction: @direction;
    -moz-flex-direction: @direction;
    flex-direction: @direction;	
}

.flex-grow(@grow: 0) {
    -ms-flex-grow: @grow;
	-webkit-flex-grow: @grow;
    -moz-flex-grow: @grow;
    flex-grow: @grow;	
}

.flex-shrink(@shrink: 0) {
    -ms-flex-shrink: @shrink;
	-webkit-flex-shrink: @shrink;
    -moz-flex-shrink: @shrink;
    flex-shrink: @shrink;	
}

.justify-content(@justify: flex-start) {
	-ms-justify-content: @justify;
	-webkit-justify-content: @justify;
	-moz-justify-content: @justify;
    justify-content: @justify;
}

.align-items(@align: stretch) {
	-ms-align-items: @align;
	-webkit-align-items: @align;
	-moz-align-items: @align;
	align-items: @align;
}


/* This does the layout */

html, body {
	margin:0;
	padding:0;
	height:100%;
	.bodyfont;
	color: @textcolor;
	background: @headfootbg;
}

body {
	.flex(column);
	width:100%
}

header, footer {
	.flex-grow(0);
	.flex-shrink(0);
}

@media only screen and (max-device-width: @switchat) and (orientation: landscape) {
	header, footer { display: none; }
}

main {
	.flex-grow(1);
	.flex-shrink(1);
	position: relative;
	background-image: url('backdrop.jpg');
	background-size: cover;
	background-position: center;
}


.unit {
	white-space: nowrap;
}

#overlay {
	display: none;
	position: fixed;
	left: 0; right: 0; top: 0; bottom: 0;
	background-color: rgba(0,0,0,0.85);
	z-index: 20;
}

#overlay > div {
	height: 100%;
	.flex(column);
	.justify-content(center);
	.align-items(center);
}

/* This does the styling */

header {
	text-align:center;
	h1,h2,h3 {
		padding: 0;
		margin:	0.2em 0px;
	}
	h1 { .header1font; }
	h2 { .header2font; }
	h3 { .header3font; }
	margin: 1em 0 0.8em 0;
	a { color: @emphlinkcolor; }
}

main > nav {
	position: absolute;
	left: 0;
	right: 0;
	text-align: center;
}

main > nav#upper {
	top: 2ex;
}

main > nav#lower {
	bottom: 2ex;
}

main > article {
	.border-radius(5px);
	position: absolute;
	left: 14%;
	right: 14%;
	top: 7ex;
	bottom: 7ex;
	overflow-y: scroll;
	padding: 0ex 2em;
	background: rgba(0,0,0,0.5);
	color: white;
	
	.justiphate;
	line-height: 150%;
	
	a {
		color: inherit;
	}
	
	h2 {
		text-align: center;
	}
		
}

article .standfirst {
	font-size: 115%;
}

article .pubinfo {
	margin-top: 2em;
}

.pubinfo {
	> div { margin-bottom: 0.25ex; }
	.title {
		font-size: 125%;
		font-weight: bold;
	}
	.journal, .book {
		font-style: italic;
	}
	.volume {
		font-weight: bold;
	}
}

footer {
	text-align:center;
	.footerfont;
	margin: 1em 0 0.5em 0;
	line-height: 130%;
	
	a { text-decoration: none; &:hover {text-decoration: underline;} }
}

a {
	color: inherit; 
	text-decoration: underline;
}

.centered {
	text-align: center;
}

/* Buttons */

.button-base() {
	.border-radius(6px);
	padding: 3px 6px;
	display: inline-block;
	min-width: 6em;
	text-decoration: none;
}

.toggled-on {
	.button-base;
	border: solid 2px white;
	background: rgba(255,255,255,0.85);
	color: @emphlinkcolor;
}

.toggled-off {
	.button-base;
	border: solid 2px white;
	background: rgba(255,255,255,0.25);
	color: @emphlinkcolor;
	cursor: pointer;
}

.clickable {
	.button-base;
	border: solid 2px white;
	background: rgba(255,255,255,0.85);
	color: @emphlinkcolor;
	cursor: pointer;
}

.unclickable {
	.button-base;
	background: rgba(255,255,255,0.25);
	border: solid 1px #666;
	color: #666;
}