/* *** Base *** */

* {
	color: white;
	font-family: ProzaLibreRegular, Tahoma, Geneva, sans-serif;
	font-weight: normal;
	font-style: normal;
}

em { font-family: ProzaLibreItalic; }
strong { font-family: ProzaLibreBold; }
em strong, strong em  { font-family: ProzaLibreBoldItalic; }

html {
	padding: 20pt;
}

body {
	background: #003 url("../images/background.jpg") no-repeat fixed;
	background-size: cover;
	border: 2pt white solid;
	border-radius: 20pt;
	margin: auto;
	max-width: 700pt;
	min-width: 300pt;
	padding: 20pt;
}

/* *** Patches *** */

/* Fix lists next to floated elements */
.content ul, .content ol { display: table; }

/* *** Imagery and Diagrams *** */

img.logo {
	float: left;
	margin-right: 8pt;
	margin-left: 3pt;
}

.inset {
	border: 2pt solid white;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}

img.right, svg.right, div.right, span.right {
	clear: left;
	display: inline-block;
	float: right;
	margin-left: 8pt;
}

img.left, svg.left, div.left, span.left {
	clear: right;
	display: inline-block;
	float: left;
	margin-right: 8pt;
}

.thumbs {
	text-align: center;
}
.thumbs a {
	display: inline-block;
	border: 2px solid white;
	font-size: smaller;
	margin: 4pt;
	padding: 4pt;
	text-decoration: none;
}
.thumbs img {
	display: block;
}

svg.drawing {
	stroke-width: 2;
	stroke: white;
	fill: transparent
}

svg .fill {
	fill: white;
}

/* <p class="photos"><span><img />caption</span>[<span>...</span>][...]</p> */
.photos {
	font-size: smaller;
	text-align: center;
}
.photos span {
	display: inline-block;
}
.photos img {
	border: none;
	display: block;
}

/* *** "Loading" Animation *** */

#svg_loading {
	left: 50%;
	margin-left: -150;
	margin-top: -150;
	position: fixed;
	stroke: #78A;
	stroke-opacity: 0.75;
	top: 50%;
}

#svg_loading * {
	fill: #78A;
	stroke: #78A;
}

div#loading {
	font-style: italic;
	padding: 20pt;
	text-align: center;
}

/* *** Menus *** */

ul.menu {
	clear: left;
	display: block;
	float: left;
	list-style-type: none;
	padding-left: 0;
	text-align: center;
}

.menu a {
	background-color: rgba(60, 60, 60, 0.4);
	border: 1pt white solid;
	border-bottom-color: grey;
	border-radius: 3pt;
	border-right-color: grey;
	display: inline-block;
	margin: 4pt 10pt 4pt 0;
	padding: 2pt;
	text-decoration: none;
	width: 120pt;
}

ul.menu.inline {
	display: block;
	float: none;
	margin: auto;
	padding-top: 8pt;
	width: 100%;
}

ul.menu.inline li {
	display: inline-block;
}

ul.menu.inline a {
	margin: 2pt;
}

/* *** Page Content *** */

div.content {
	display: none;
	padding-bottom: 20pt;
	padding-top: 2pt;
}

div.footer {
	bottom: 0pt;
	clear: both;
	display: block;
	width: 100%;
}
.footer div {
	display: block;
	font-size: 67%;
	margin-top: 10pt;
	text-align: center;
}
.footer img {
	margin: 4pt;
}

/* *** Miscellaneous *** */

.center {
	text-align: center;
}

.inactive {
	display: none!important;
}

.spaced * {
	padding-bottom: 1em;
}

.linklist a {
	display: block;
	padding: 0;
}

/* *** Formula Support *** */

.math {
	display: inline-block;
	text-align: center;
	vertical-align: middle;
}
.math.large, .math .large {
	font-size: 200%;
	font-weight: 100;
}
.math.over, .math .over {
	border-top: 2pt solid white;
}
.math.under, .math .under {
	border-bottom: 2pt solid white;
}

/* *** Page Navigation *** */

.navigation {
	position: relative;
}

.navigation a {
	position: absolute;
	padding: 10pt;
	top: 200pt;
	z-index: 1;
}
.navigation #previous { left: 0; }
.navigation #next { right: 0; }

.navigation svg {
	stroke-width: 1;
	stroke: white;
	fill: rgba(255, 255, 255, 0.33);
}

/* *** Mobile *** */

html.mobile {
	padding: 0;
}

.mobile body {
	border-style: none;
	border-radius: 0;
	font-size: 130%;
	margin: 4pt;
	max-width: inherit;
	min-height: inherit;
	min-width: inherit;
	padding: 0;
}

.mobile img.logo {
	display: none;
}

.mobile h1, .mobile h2 {
	text-align: center;
}

.mobile ul.menu {
	display: block;
	float: none;
	margin: auto;
	width: 100%;
}

.mobile .menu li {
	display: inline-block;
}

.mobile .menu a {
	padding: 4pt;
	width: 160pt;
}

.mobile .navigation a {
	padding: 0!important;
	top: 50pt!important;
}

.mobile .photo {
	clear: both;
}

.mobile img {
	height: auto;
	max-width: 100%;
}