body {
	background-color: #1a1a1a;
	color: #eee;
	font-family: arial;
}
a, a:visited {
	color: #008080;
	text-decoration: none;
}
a:hover {
	color: #00b0b0;
	text-decoration: none;
}

#page {
	margin: 0 auto;
	max-width: 50em;
	text-align: center;
}
#page h1 {
	margin-bottom: .2em;
}
table.maze {
	border-collapse: collapse;
	border-spacing: 0;
	margin: 0 auto;
}
table.maze td {
	background-color: #333333;
	background-position: center;
	background-repeat: no-repeat;
	border: .1em solid #1a1a1a;
	padding: 0;
	width: 2.3em; height: 2.5em;
	white-space: nowrap;
}
table.maze td.wh {background-image: url("img/wire-h.svg");}
table.maze td.wv {background-image: url("img/wire-v.svg");}
table.maze td.wtl {background-image: url("img/wire-tl.svg");}
table.maze td.wtr {background-image: url("img/wire-tr.svg");}
table.maze td.wbl {background-image: url("img/wire-bl.svg");}
table.maze td.wbr {background-image: url("img/wire-br.svg");}
table.maze td.wb {background-image: url("img/wire-b.svg");}
table.maze td.wf {background-image: url("img/wire-f.svg");}
table.maze td.h {background-image: url("img/human.svg");}
table.maze td.r {background-image: url("img/robot.svg");}

#ui {
	padding-top: .5em;
}

#msg {
	font-size: 1.4em;
	margin: .2em 0;
	text-align: center;
}

#ctrl {
	display: inline-block;
}
#ctrl td {
	background-color: #333;
	color: #555;
	cursor: pointer;
	font-size: 3em;
	text-align: center;
	width: 1.5em; height: 1.5em;
}
#ctrl.on td {
	background-color: #004040;
	color: #aaa;
}
#ctrl.on td:hover {
	background-color: #006060;
	color: #fff;
}

#menu {
	display: inline-block;
	margin-right:1em;
	text-align: left;
	vertical-align: top;
}
#menu button {
	background-color: #004040;
	color: #aaa;
	cursor: pointer;
	border: none;
	font-size: 1.6em;
	margin-bottom: .25em;
	padding: .4em .3em;
	width: 4em;
}
#menu button:disabled {
	background-color: #333;
	color: #555;
}
#menu button:enabled:hover {
	background-color: #006060;
	color: #fff;
}

.popup-overlay {
	display: none;
	position: fixed;
	z-index: 1;
	top: 0; left: 0;
	width: 100%; height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.5);
}
.popup {
	display: none;
	background-color: #1a1a1a;
	margin: 3em auto;
	padding: 1em 1.8em;
	border: .15em solid #888;
	border-radius: 1em;
	max-width: 40em;
}
.popup-close {
  color: #008080;
  float: right;
  font-size: 3em;
  font-weight: bold;
}
.popup-close:hover,
.popup-close:focus {
  color: #00b0b0;
  text-decoration: none;
  cursor: pointer;
}

#pu-about p, #pu-help p {
	font-size: 1.25em;
}
#pu-help p.quote {
	padding-left: 1em;
	padding-right: 1em;
}
#pu-msg {
	max-width: 30em;
}