.invisible {
	display: none;
}

.emscripten {
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block
}

div.emscripten {
	text-align: center
}

canvas.emscripten {
	border: 0 none;
	background-color: #000;
	height: calc(80vh - 70px); /* Need spaces around operator */
	aspect-ratio: 640/480;
}

#emscripten_logo {
	display: inline-block;
	margin: 0;
	padding: 6px;
	width: 265px
}

.spinner {
	height: 30px;
	width: 30px;
	margin: 0;
	margin-top: 20px;
	margin-left: 20px;
	display: inline-block;
	vertical-align: top;
	-webkit-animation: rotation .8s linear infinite;
	-moz-animation: rotation .8s linear infinite;
	-o-animation: rotation .8s linear infinite;
	animation: rotation .8s linear infinite;
	border-left: 5px solid #ebebeb;
	border-right: 5px solid #ebebeb;
	border-bottom: 5px solid #ebebeb;
	border-top: 5px solid #787878;
	border-radius: 100%;
	background-color: #bdd72e
}

@-webkit-keyframes rotation {
	from {
		-webkit-transform: rotate(0)
	}

	to {
		-webkit-transform: rotate(360deg)
	}
}

@-moz-keyframes rotation {
	from {
		-moz-transform: rotate(0)
	}

	to {
		-moz-transform: rotate(360deg)
	}
}

@-o-keyframes rotation {
	from {
		-o-transform: rotate(0)
	}

	to {
		-o-transform: rotate(360deg)
	}
}

@keyframes rotation {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

#status {
	display: inline-block;
	vertical-align: top;
	margin-top: 30px;
	margin-left: 20px;
	font-weight: 700;
	color: #787878
}

#progress {
	height: 20px;
	width: 300px
}

#controls {
	text-align: center;
}

#controls span {
	white-space: nowrap;
}

#controls span label {
	cursor: pointer;
}

#controls span+span {
	padding-left: 10px;
}

#output {
	width: 100%;
	height: 200px;
	margin: 0 auto;
	margin-top: 10px;
	border-left: 0;
	border-right: 0px;
	padding-left: 0;
	padding-right: 0;
	background-color: #000;
	color: #fff;
	font-family: 'Lucida Console', Monaco, monospace;
	outline: 0;
}

#output:focus {
	outline: none;
	/* Specifically removing outline when focused */
}