#warning {
	position: fixed;
	left: 20px;
	top: 20px;
	width: 200px;
	border: 3px #eee solid;
	font-size: 24px;
	color: #eee;
	background: #000;
	padding: 0.5em;
	font-weight: bold;

	display: none;
	/*
	*/
}

#progress {
	position: fixed;
	left: 20px;
	top: 160px;
	width: 200px;
	border: 3px #eee solid;
	font-size: 24px;
	color: #eee;
	background: #000;
	padding: 0.5em;
	font-weight: bold;

	display: none;
	/*
	*/
}


* {
	margin: 0;
	padding: 0;
}

html, body {
	background-color: #050505;
	color: #eee;
}

body {
	padding: 1.0em;
}

textarea,
input[type='text'] {
	font-size: 20px;
	width: 100%;
	padding: 0.5em;
}

ul#messages {
	width: 800px;
	margin: 0 auto;
}

	li {
		list-style-type: none;
		padding: 0.5em;
		transition: opacity 0.3s, max-height 1.5s;
		overflow: hidden;
	}

	li > h1 {
		font-size: 36px;
		color: #9c7a7a;
		border-bottom: 1px #a76b6b solid;
		text-align: center;
	}

	li > h2 {
		font-size: 24px;
		color: #ccc;
		margin: 0.5em 0 0.0em 0;
	}

	li.dim {
		opacity: 0.5;
	}

.buttons {
	color: #eee;
	display: flex;
}

	.buttons > * {
		font-size: 24px;
		border: 2px #945b5b solid;
		color: #e8aead;
		padding: 0.25em;
		margin: 0.5em 0;
		text-align: center;
		display: inline-block;
		flex: 1;
	}

	.buttons > .spacer {
		flex: 0;
		border: 0;
	} .buttons > .dont-render {
		border: 0; /* just hides "fake" buttons (so they function as spacers) */
	} .buttons > .highlight {
		border-color: #aaa;
		color: #bbb;
	}

	.buttons > .button {
		background-color: #151515;
		cursor: pointer;
	} .buttons > .button:hover {
		border-color: #eee;
		color: #eee;
		background-color: #333;
	}

	.button.xactivated {
		border-color: green;
	}
	.button.not-activated {
		opacity: 0.375;
	}

.game-over {
	border-color: #ea6060;
	color: #e64e4e;
}