html {
	margin: 0;
	/* height: 100%; - no height for you; see resizeBody() in pix.js */
	min-height: 100%;
}

body {
	background-color: #000;
	background-image: url('/pics/bg_sourcecode_1.png');
	background-size: cover;
	margin: 0;
	padding: 0 0 0 0;
	position: relative;
	font-family: CarlitoRegular, Carlito, Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif;
	font-size: 1em;
	height: 100%;
	min-height: 100%;
}

div.maincontainer {
	position: relative;
	margin: 0 auto 0 auto;
	max-width: 95%;
}

canvas {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

section {
	position: relative;
	margin: 2em 0 2em auto;
	padding: 1em;
	width: 65%;
	opacity: 0.95; /* just a default - will be randomized individually anyway */
	transition: opacity 0.5s ease-in-out;
}

section.noopacity {
	opacity: 1; /* just as a hint - the js that sets opacities will need to read this out */
}

section:hover {
	opacity: 1 !important; /* make this important to get over the randomized values */
}

input.input-checkbox {
	width: 18pt;
	height: 18pt;
}

input.input-checkbox, label.input-checkbox-label {
	vertical-align: middle;
}

label.input-checkbox-label {
	padding-left: 4pt;
}

div.insec {
	position: relative;
	color: #222;
	padding: 1.2em 1.5em 1.2em 1.5em;
	z-index: 100;
	font-size: 110%;
}

div.leftnavcontainer {
	float: left;
	margin-top: 2em;
	margin-bottom: 2em;
	width: 30%;
}

section.leftnav {
	width: 100%;
	height: 4.04em;
	text-align: center;
	margin: 0 0 0.5em 0;
	padding: 0;
}

section.leftnav > div.insec {
	padding: 0;
	position: unset;
	font-size: 115%;
	font-weight: bold;
}

section.leftnav > div.insec > a {
	position: absolute;
	left: 5%;
	right: 5%;
	padding: 1.3em 0 0.65em 0;
	color: #300060;
	text-decoration: none;
	z-index: 100;
}

section.leftnav > div.insec > a > div {
	transition: transform 0.3s;
}

section.leftnav > div.insec > a:hover > div {
	transform: scale(1.1);
}

a.resource_preview {
	text-decoration: none;
	display: block;
	margin: 1em 0 0 0;
	white-space: nowrap;
	overflow-x: hidden;
	position: relative;
}

div.resource_preview_fadeout {
	position: absolute;
	right: 0;
	top: 0;
	bottom: 0;
	width: 3em;
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 255, 255, 1));
}

a.paperpreview {
	box-shadow: 0.2em 0.2em 0.5em rgba(0, 0, 0, 0.6);
	position: absolute;
	text-decoration: none;
	color: #000;
	margin-top: 0.45em;
}

a.paperpreview, a.paperpreview > img {
	width: 6.25em;
}

a.paperpreview > img {
	display: block;
}

div.papertable {
	margin-left: 8em;
	min-height: 8.063em;
}

div#topofpage {
	height: 2em;
}

header {
	position: relative;
	margin: 0 0 1em 0;
	opacity: 0.98;
	transition: opacity 0.5s ease-in-out;
	height: 5.05em;
	overflow: hidden;
}

header:hover {
	opacity: 1 !important;
}

header > div > div {
	transition: transform 0.3s;
}

header > div > div:hover {
	transform: scale(1.1);
}

header > div > div > a {
	color: #222;
	text-decoration: none;
	margin: 0 0.3em 0 0.3em;
}

div.headerbar {
	position: absolute;
	top: 1.4em;
	left: 12.5em;
	font-size: 125%;
	white-space: nowrap;
}

a.alogo {
	position: absolute;
	z-index: 1000;
}

a.aburger {
	position: absolute;
	top: 0.55em;
	left: 3%;
	z-index: 1100;
	display: none;
}

img.burger {
	width: 4em;
	height: 4em;
	transition: transform 0.5s;
}

img.burger:hover {
	transform: scale(1.25);
}

img.logo {
	width: 14.16185em;
	height: 3.5em;
	transition: transform 0.5s;
	padding-left: 1em;
	padding-top: 0.72em;
}

img.logo:hover {
	transform: scale(1.1);
}

div.footerplaceholder {
	height: 6em;
	visibility: hidden;
}

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 5.1em;
	margin-top: 2em;
	overflow: hidden;
}

footer img.backtotop {
	transition: transform 0.5s, opacity 0.5s;
	opacity: 0.8;
}

footer img.backtotop:hover {
	transform: scale(1.25);
}

div.footertext {
	position: absolute;
	width: 100%;
	left: 0;
	top: 0;
	right: 0;
	color: rgb(68, 109, 129);
	z-index: 100;
}

div.footertextblock {
	padding: 0.7em;
}

a.footeratop {
	position: absolute;
	top: 0.5em;
	right: 0.5em;
	z-index: 1000;
}

section a {
	color: #666;
}

div.content {
	margin: 1em 0 0 0; /* 1em 0 0 0: magic number 1 */
	max-height: 999999px; /* prevent chrome font boosting through this monstrosity */
}

div.content > img, div.content > a > img {
	max-width: 100%;
}

div.item {
	display:inline-block;
}

div.aligncontainer {
	position: relative;
}

div.right {
	position: absolute;
	top: 0;
	right: 0;
}

div.center {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, 0);
	text-align: center;
}

div.centerimg {
	text-align: center;
}

div.centerimg > img {
	width: 100%;
}

h1 {
	margin: 0;
	font-size: 125%;
	font-weight: normal;
	text-align: center;
}

h1 a {
	color: #222;
	text-decoration: none;
}

h1 a:hover {
	color: #555;
}

h2, h3 {
	margin: 0;
	font-size: 115%;
	font-weight: normal;
	font-style: italic;
	text-align: center;
}

h3 {
	font-size: 108%;
}

i {
	font-style: italic;
}

div.carouselcontainer {
	height: 5em;
	position: relative;
	overflow-x: hidden;

	/* achieve margin using padding such that scaled images look nice */
	margin: 0;
	padding: 1em 0 0 0; /* 1em 0 0 0: magic number 1 */
}

div.carousel {
	position: absolute;
	width: 5000em;
}

div.carousel > a {
	margin-right: 1.5em;
}

div.carousel img {
	transition: transform 0.5s;
	height: 4em;
}

div.carousel img:hover {
	transform: scale(1.25);
}

img.backtotop {
	height: 4em;
	width: 4em;
	margin-top: 0.05em;
	margin-right: 0.25em;
}

strong {
	font-weight: bold;
}

iframe {
	max-width: 100%;
}

textarea {
	width: 100%;
	height: 8em;
}

div.codeblock, span.inlinecodeblock {
	white-space: nowrap;
	font-size: 95%;
	background: rgba(0, 0, 0, 0.1);
}

span.inlinecodeblock {
	overflow: none;
	border-radius: 3pt;
	padding: 2pt 4pt 1pt 4pt;
}

div.codeblock {
	overflow-x: auto;
	border-radius: 6pt;
	padding: 5pt 6pt 3pt 6pt;
	margin: 2pt 8pt 2pt 0pt;
}

textarea.codebox, div.codecontainer, div.codeselector, div.codeblock, span.inlinecodeblock {
	font-family: "Consolas", "Courier New", Courier, monospace;
}

/* we set this explicitly, as otherwise the default font size of the browser
   actually overrides the inheritance from body... */
textarea.codebox, div.codeselector {
	font-size: 1em;
}

div.codecontainer span.warn {
	color: #F00;
}

div.codecontainer span.hidden {
	opacity: 0.5; /* use opacity instead of just color, such that we can combine warn and hidden */
}

div.option {
	cursor: pointer;
}

div.selected {
	font-weight: bold;
}

div.testimonial {
	padding-left: 8%;
	font-style: italic;
}
div.byName, div.byTitle {
	text-align: right;
	padding-right: 12%;
}
div.byName {
	font-weight: bold;
}

h2 > a {
	color: #222;
	text-decoration: none;
}

/* a full-width one-line input field that let's you copy its contents to the clipboard, but not necessarily edit them */
textarea.copyToClipboard {
	width: 100%;
	font-size: 100%;
	height: 1em;
	border: 0px none;
	border-radius: 5px;
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
	background: rgb(221, 221, 221) none repeat scroll 0% 0%;
	white-space: nowrap;
	resize: none;
	overflow: hidden;
	text-align: center;
}

.clearfix {
	overflow: auto;
}

.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/* makes things look at bit nicer in old IE... but in current IE / Edge, everything is just hopeless ^^ */
img {
	-ms-interpolation-mode: bicubic;
}

@media all and (max-width: 699px),
all and (min-resolution: 1.5dppx) and (max-width: 1049px),
all and (min-resolution: 2dppx) and (max-width: 1399px),
all and (min-resolution: 3dppx) and (max-width: 2099px),
all and (min-resolution: 4dppx) and (max-width: 2899px) {
	.above700 {
		display: none;
	}
}

@media all and (max-resolution: 1dppx) and (min-width: 700px),
all and (max-resolution: 1.5dppx) and (min-width: 1050px),
all and (max-resolution: 2dppx) and (min-width: 1400px),
all and (max-resolution: 3dppx) and (min-width: 2100px),
all and (min-width: 2800px) {
	.below700 {
		display: none;
	}
}

@media all and (max-width: 399px),
all and (min-resolution: 1.5dppx) and (max-width: 599px),
all and (min-resolution: 2dppx) and (max-width: 799px),
all and (min-resolution: 3dppx) and (max-width: 1199px),
all and (min-resolution: 4dppx) and (max-width: 1599px) {
	.above400 {
		display: none;
	}
}

@media all and (max-resolution: 1dppx) and (min-width: 400px),
all and (max-resolution: 1.5dppx) and (min-width: 600px),
all and (max-resolution: 2dppx) and (min-width: 800px),
all and (max-resolution: 3dppx) and (min-width: 1200px),
all and (min-width: 1600px) {
	.below400 {
		display: none;
	}
}

@media all and (min-resolution: 1.5dppx) {
	body {
		font-size: 132%;
	}
	div.insec {
		font-size: 145%;
	}
	input.input-checkbox {
		width: 27pt;
		height: 27pt;
	}
	label.input-checkbox-label {
		padding-left: 5pt;
	}
}

@media all and (min-resolution: 2dppx) {
	body {
		font-size: 140%;
	}
	div.insec {
		font-size: 154%;
	}
	input.input-checkbox {
		width: 30pt;
		height: 30pt;
	}
	label.input-checkbox-label {
		padding-left: 6pt;
	}
}

@media all and (min-resolution: 3dppx) {
	body {
		font-size: 150%;
	}
	div.insec {
		font-size: 165%;
	}
	input.input-checkbox {
		width: 32pt;
		height: 32pt;
	}
	label.input-checkbox-label {
		padding-left: 8pt;
	}
}

@media all and (min-resolution: 4dppx) {
	body {
		font-size: 175%;
	}
	div.insec {
		font-size: 192%;
	}
	input.input-checkbox {
		width: 48pt;
		height: 48pt;
	}
	label.input-checkbox-label {
		padding-left: 10pt;
	}
}

/* prevent content from getting insanely large horizontally on insanely large devices */
@media all and (max-resolution: 1dppx) and (min-width: 1300px),
all and (max-resolution: 1.5dppx) and (min-width: 1950px),
all and (max-resolution: 2dppx) and (min-width: 2600px),
all and (max-resolution: 3dppx) and (min-width: 3900px),
all and (min-width: 5200px) {
	div.maincontainer {
		max-width: 90%;
	}
}

@media all and (max-resolution: 1dppx) and (min-width: 1600px),
all and (max-resolution: 1.5dppx) and (min-width: 2400px),
all and (max-resolution: 2dppx) and (min-width: 3200px),
all and (max-resolution: 3dppx) and (min-width: 4800px),
all and (min-width: 6400px) {
	div.maincontainer {
		max-width: 85%;
	}
}

@media all and (max-resolution: 1dppx) and (min-width: 2000px),
all and (max-resolution: 1.5dppx) and (min-width: 3000px),
all and (max-resolution: 2dppx) and (min-width: 4000px),
all and (max-resolution: 3dppx) and (min-width: 6000px),
all and (min-width: 8000px) {
	div.maincontainer {
		max-width: 80%;
	}
}

/* for 785px and less, we need a radically different approach,
making the left nav bar a dropdown (well, or something like that)! */

@media all and (max-width: 785px),
all and (min-resolution: 1.5dppx) and (max-width: 1178px),
all and (min-resolution: 2dppx) and (max-width: 1570px),
all and (min-resolution: 3dppx) and (max-width: 2355px),
all and (min-resolution: 4dppx) and (max-width: 3140px) {
	div.leftnavcontainer {
		display: none;
	}
	section {
		width: 100%;
		box-sizing: border-box;
	}
	div.maincontainer {
		max-width: 100%;
	}
	a.aburger {
		display: block;
	}
	a.alogo {
		top: 0;
		left: 0;
		right: 15%;
		text-align: center;
	}
	div.headerbar {
		display: none;
	}
}

@media all and (max-width: 500px),
all and (min-resolution: 1.5dppx) and (max-width: 750px),
all and (min-resolution: 2dppx) and (max-width: 1000px),
all and (min-resolution: 3dppx) and (max-width: 1500px),
all and (min-resolution: 4dppx) and (max-width: 2000px) {
	a.alogo {
		transform: scale(0.75);
	}
	a.paperpreview {
		left: 0;
		right: 0;
		margin-left: auto;
		margin-right: auto;
	}
	div.papertable {
		margin: 0;
		padding-top: 9em;
	}
}
@media all and (max-width: 360px),
all and (min-resolution: 1.5dppx) and (max-width: 540px),
all and (min-resolution: 2dppx) and (max-width: 720px),
all and (min-resolution: 3dppx) and (max-width: 1080px),
all and (min-resolution: 4dppx) and (max-width: 1440px) {
	a.alogo {
		display: none;
	}
}