body {
  background-color: #111;
  font-family: Helvetica, Arial, sans-serif;
  color: #CCC;
  font-size: 13px;
}
#container {
  width: 500px;
  margin: auto;
  text-align: center;
}
a {
  color: #CCF;
}
canvas {
  width: 500px;
  height: 500px;
  background: rgb(41,41,41);
  border-radius:7px;
}
span {
  display: inline-block;
  font-size: 13px;
  width: 95px;
  text-align: center;
}
label {
  color: #CCC;
  width: 150px;
  display: inline-block;
  font-size: 13px;
}
input {
  margin-bottom: 3px;
  font-size: 13px;
  width: 40px;
  font-weight: bold;
}
#info {
  padding: 3px;
}
#environmentSettings {
  width: 220px;
  padding: 10px;
  background-color: #555;
  float: left;
  border-radius:7px;
}
#startStop {
  padding: 10px;
  float: left;
}
#simulator {
  width: 500px;
  background-color: #333;
  margin-bottom: 5px;
  border-radius:7px;
}
#infected {
  color: #FF8833;
}
#notInfected {
  color: #33FF88;
}
#recovered {
  color: #3388FF;
}
#deceased {
  color: #000;
}
#vaccinated {
  color: #FFF;
}
#stepsMade {
  color: #999;
  display: block;
  font-size: 15px;
  text-align: center;
  width: 100%;
  padding: 5px;
}
.controlButton {
	box-shadow: 0px 1px 0px 0px #1c1b18;
	background:linear-gradient(to bottom, #eae0c2 5%, #ccc2a6 100%);
	background-color:#eae0c2;
	border-radius:7px;
	border:2px solid #333029;
	display:inline-block;
	cursor:pointer;
	color:#505739;
	font-size:14px;
	font-weight:bold;
	padding:12px 16px;
	text-decoration:none;
	text-shadow:0px 1px 0px #ffffff;
  width: 100px;
  text-align: center;

}
.controlButton:hover {
	background:linear-gradient(to bottom, #ccc2a6 5%, #eae0c2 100%);
	background-color:#ccc2a6;
}
.controlButton:active {
	position:relative;
	top:1px;
}