/* --------------- page layout -------------- */

html {
	font-family: Helvetica, sans-serif;
	/*font-size: 16px;*/
	height: 100%;
}

body {
	background-color: white; /* #eee */
	height: 100%;
	margin: 0 auto;
}

/*
@media screen and (max-width: 500px) {
	html {
		font-size: 110%;
	}
}

@media screen and (max-width: 400px) {
	html {
		font-size: 130%;
	}
}
*/

#column {
	max-width: 670px;
	margin: 0 auto;
	height: 100%;
	/* max-height: 100%; */
	padding: 0 10px;
}

h1, #column>p, #drawing, #footer {
	margin: 1em auto;
}

h1 {
	font-size: 1em;
	font-weight: normal;
	float: left;
}

#drawing {
	clear: both;
	width: 100%;
	height: auto;
	max-width: 650px;
	background-color: white;
	margin: auto;
}

#caption {
	font-size: 1.5em;
	opacity: 1;
	transition: opacity 0.5s;
	min-height: 4em;
	overflow: auto;
	margin: 0 0 0.25em 0;
}

#caption.hidden {
	opacity: 0;
	transition: opacity 0.5s;
}

#player {
	width: 100%;
	overflow: auto;
}

#player>svg {
	display: block;
	float: left;
	background-color: white;
	margin: 0 0.5em 0.5rem 0;
	border-radius: 5px;
	border: solid 1px #aaa;
	text-align: center;
	overflow: auto;
}

#player>svg:hover {
	background-color: #ddd;
}

#player>svg:active {
	background-color: #aaa;
}

#player>p {
	clear: both;
	margin: 0 0 4rem 0;
	font-size: 0.8em;
}

#portal {
	min-height: 100%;
	height: auto;
	margin: 0 0 -3rem 0;
}

#footer {
	height: 3rem;
	margin: 0;
}

#footer p {
	font-size: 0.8em;
	margin: 0;
}

a {
	color: #36c;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:active {
	color: #38f;
}

/* ---------- SVG elements - constant properties etc. ------------ */

#player polygon, #player rect {
	fill: #333;
	stroke-width: 0;
}

#player rect.tooltip-area {
	width: 100%;
	height: 100%;
	x: -50%;
	y: -50%;
	fill: transparent;
	stroke: none;
}

#to-start {
	display: none;
}

#graphGrid * {
	stroke-width: 1;
	stroke: #0cc;
}

#mirrorLine {
	stroke-width: 1;
	stroke: #333;
}

.dark, .light {
	stroke-width: 0;
	stroke: #fff;
}

.dark {
	fill: #6ae;
}

.light {
	fill: #fd7;
}

#orientationTest {
	display: none;
}