* {
  margin: 0px;
  padding: 0px;
}

body {
  background-color: #c8b8a8;
}

canvas {
  left: 50%;
  top: 250px;
  margin: -250px 0px 0px -400px;
  position: relative;
  background-color: #404040;
}

header {
  padding: 15px 30px 30px 30px;
  text-align: center;
}

footer {
  position: fixed;
  bottom: 2%;
  left: 50%;
}

.menu-items {
  display:inline;
  overflow:visible;
}

.menu {
  padding: 5px 15px;
  position: absolute;
  width: 770px;
  background-color: #ddddff;
  left: 50%;
  top: 50%;
  height:75px;
  margin: 255px 0px 0px -400px;
}

.speed-menu {
  width:800px;
}

.interactive {
  width:450px;
  padding: 15px 0 0 0;
  float:left;
}

.statistics {
  width: 240px;
  float: right;
  text-align:right;
}
.statistics span {
  display: block;
}

/*.speed-input {
  float: left;
}*/

.speed-slider {
  width: 715px;
  /*margin-top: 5px;*/
  -webkit-appearance: none;
  border-radius: 8px;
  height: 15px;
  border: 1px solid #bdc3c7;
  background-color: #dddddd; 
}
.speed-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #2255aa;
  border: 3px solid #474747;
  width: 20px;
  height: 15px;
  border-radius: 10px;
  cursor: pointer;
}

.pause-slider {
  width: 100px;
  /*margin-top: 5px;*/
  -webkit-appearance: none;
  border-radius: 8px;
  height: 15px;
  border: 1px solid #bdc3c7;
  background-color: #dddddd; 
  float:left;
}
.pause-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #2255aa;
  border: 3px solid #474747;
  width: 20px;
  height: 15px;
  border-radius: 10px;
  cursor: pointer;
}

.speed-label {
  margin-right: 1%;
}

.control {
  position: relative;
}

.copyright {
  text-align: center;
  font-size: 8pt;
}

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 9999;
  opacity:0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog div {
  overflow:hidden;
}

.modalDialog:target {
  opacity:1;
  pointer-events: auto;
}

.modalDialog > div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #999);
  background: -o-linear-gradient(#fff, #999);
  z-index: 1;
}

.modalDialog .left {
  width: 140px;
  float: left;
}
.modalDialog .right {
  width: 160px;
  float: right;
  text-align: right;
  font-weight: bold;
}

.close {
  text-align: center;
  font-weight: bold;
  font-family: garamond;
  -webkit-font-smoothing: antialiased;
  color: black;
  float: right;
  width: 45px;
  line-height:20px;
  border: 3px solid;
  border-radius: 15px;
  background-color: blue;
  text-decoration: none;
}

#pauseClose {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  width:200px;
  line-height:100px;
  border-radius: 50px;
}

.close:hover { background: #555555; }

option {
	color:red;
	font-size:6pt;
}

.color {
	z-index: -1;
}