@font-face
{
	font-family: 'Roboto Condensed';
	font-style: normal;
	font-weight: 400;
	src: local('Roboto Condensed'), local('RobotoCondensed-Regular'), url(roboto.ttf) format('truetype');
}
@keyframes spin {
	from
	{
		transform: rotate(0deg);
	}
	to
	{
		transform: rotate(360deg);
	}
}


html
{
	font-size: calc((1em + 1vw) * 0.6);
	font-family: 'Roboto Condensed';
}

body
{
	background-color: #12161a;
	color: #dadee2;
}

div#wallpaper
{
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0;
	z-index: 1;
}

div#wallpaper img,
div#glados img
{
	height: 100%;
	width: 100%;
	margin: 0;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	outline: 0;
}

div#wallpaper img
{
	object-fit: cover;
}

div#glados
{
	position: fixed;
	top: 0;
	right: 0;
	height: 50%;
	width: 22%;
	margin: 0;
	z-index: 2;
}

@media(max-width: 800px)
{
	div#glados
	{
		display: none;
	}
}

div#popup
{
	position: fixed;
	pointer-events: none;
	top: 25%;
	left: 0;
	width: 100%;
	background-color: rgba(25, 25, 50, 0.85);
	box-shadow: 0 0 1em rgba(0, 162, 255, 0.8);
	color: #00a2ff;
	font-size: 125%;
	text-shadow: 0 0 0.15em #000000;
	transition: opacity .5s ease-in-out;
	opacity: 0;
	z-index: 4;
}
div#popup.error
{
	background-color: rgba(50, 25, 25, 0.85);
	box-shadow: 0 0 1em rgba(255, 162, 0, 0.8);
	color: #ffa200;
}
div#popup p
{
	margin: 0.5em;
	text-align: center;
}

div#glados img
{
	object-fit: contain;
	object-position: top right;
}

div#wrapper
{
	position: absolute;
	top: 1em;
	left: 1em;
	max-width: 75%;
	z-index: 3;
}

@media(max-width: 800px)
{
	div#wrapper
	{
		max-width: 100%;
	}
}

div#content
{
	background-color: rgba(60, 60, 69, 0.7);
	box-shadow: 0 0 0.5em rgba(225, 225, 255, 0.3), 0 0 0.5em rgba(225, 225, 255, 0.2) inset;
	border-radius: 0.5em;
	padding: 0.5em;
	margin: 0 1em 1em 0;
	text-shadow: 0 0 0.15em #000000;
}

div#content .blue
{
	color: #00a2ff;
	font-size: 125%;
}

div#content .js
{
	display: none;
}

div#content h1
{
	margin: 0;
	font-size: 150%;
}

div#content p,
div#content table
{
	margin: 1.5em 0 0.2em 0;
}

div#content table
{
	border-collapse: collapse;
	width: 100%;
}

div#content table tr
{
	margin: 0;
	padding: 0;
}

div#content form
{
	margin: 0;
}

div#content a:link,
div#content a:visited,
div#content .link
{
	color: #ff8d00;
	text-decoration: none;
}

div#content a:hover,
div#content a:active,
div#content .link:hover
{
	color: #ffaa00;
	text-decoration: none;
}

div#content #autoplay img
{
	filter: brightness(0) saturate(100%) invert(61%) sepia(10%) saturate(147%) hue-rotate(169deg) brightness(91%) contrast(89%);
	width: 2em;
	height: auto;
	cursor: pointer;
}
div#content #autoplay img.enabled
{
	filter: brightness(0) saturate(100%) invert(43%) sepia(99%) saturate(2624%) hue-rotate(5deg) brightness(98%) contrast(101%);
}
div#content #autoplay img:hover
{
	filter: brightness(0) saturate(100%) invert(71%) sepia(72%) saturate(2568%) hue-rotate(358deg) brightness(101%) contrast(107%);
}

div#content .right { float: right; }
div#content .left { float: left; }

div#content span#paging span
{
	cursor: default;
	padding-left: 0.1em;
	padding-right: 0.1em;
}

div#content span#paging span.link
{
	cursor: pointer;
}

div#content table.samples
{
	margin-top: 0;
}

div#content table.samples th { color: #00a2ff; font-weight: normal; }
div#content table.samples td:nth-child(1), div#content table.samples th:nth-child(1) { text-align: right; white-space: nowrap; }
div#content table.samples td:nth-child(2), div#content table.samples th:nth-child(2) { text-align: left; width: 100%; overflow-wrap: break-word; }
div#content table.samples td:nth-child(3), div#content table.samples th:nth-child(3) { text-align: right; white-space: nowrap; }
div#content table.samples td:nth-child(4), div#content table.samples th:nth-child(5) { text-align: center; white-space: nowrap; }

div#content table.samples td
{
	border-top: 0.15em solid rgba(0, 0, 0, 0.3);
}
div#content table.samples td,
div#content table.samples th
{
	border-left: 0.15em solid rgba(0, 0, 0, 0.3);
}
div#content table.samples td:nth-child(1),
div#content table.samples th:nth-child(1)
{
	border-left: 0;
}

div#content table.samples td,
div#content table.samples th
{
	padding: 0.25em;
}

div#content table.samples tr#samplesLoading
{
	cursor: wait;
}

div#content table.samples img#spinner
{
	width: 3em;
	height: auto;
	animation: spin 2s infinite linear;
	filter: brightness(0) saturate(100%) invert(62%) sepia(49%) saturate(7359%) hue-rotate(178deg) brightness(103%) contrast(106%);
}

div#content table.samples .fileButton
{
	margin: 0;
	display: inline-block;
	cursor: wait;
}

div#content table.samples .link .fileButton
{
	cursor: pointer;
}

div#content table.samples img.fileButton
{
	filter: brightness(0) saturate(100%) invert(61%) sepia(10%) saturate(147%) hue-rotate(169deg) brightness(91%) contrast(89%);
	width: 1em;
	height: auto;
}
div#content table.samples .link img.fileButton
{
	filter: brightness(0) saturate(100%) invert(43%) sepia(99%) saturate(2624%) hue-rotate(5deg) brightness(98%) contrast(101%);
}
div#content table.samples .link:hover img.fileButton
{
	filter: brightness(0) saturate(100%) invert(71%) sepia(72%) saturate(2568%) hue-rotate(358deg) brightness(101%) contrast(107%);
}

div#content table.samples#ghost
{
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
}

div#content table.samples,
div#content input[type=text],
div#content code
{
	background-color: rgba(0, 0, 0, 0.4);
	box-shadow: 0 0 0.2em rgba(225, 225, 255, 0.2);
	padding: 0.25em;
	border-radius: 0.25em;
}

div#content code
{
	display: block;
	font-size: 90%;
}

div#content input[type=text]
{
	resize: none;
	box-sizing: border-box;
	width: 100%;
	font-size: 0.75em;
	font-family: 'Roboto Condensed';
	color: #00a2ff;
	border: 0;
}

div#content input[type=button]
{
	font-size: 0.75em;
	font-family: 'Roboto Condensed';
	padding: 0.23em;
	margin-left: 0.5em;
	box-sizing: border-box;
	color: #dadee2;
	background-color: rgba(0, 162, 255, 0.8);
	text-shadow: 0 0 0.15em #000000;
	border: 0.1em solid rgba(0, 0, 0, 0.8);;
	border-radius: 0.25em;
}

div#content input[type=button]:hover
{
	color: #eaeef2;
	background-color: rgba(0, 162, 255, 1);
}

div#content input[type=button].disabled,
div#content input[type=button].disabled:hover
{
	color: #dadee2;
	background-color: rgba(162, 162, 255, 0.5);
	cursor: wait;
}





/* vim: set tabstop=4 softtabstop=4 shiftwidth=4 noexpandtab: */