html {
  background:#000;
  color:#999;
  font-size:12px;
  font-family:arial;
  font-weight:bold;
}

body {
  overflow-x:hidden;
}

body.rotating {
  overflow-y:hidden;
}

a, a:visited {
  color:inherit;
  text-decoration:none;
  border-bottom:2px solid #444;
}

hr {
  margin-top:20px;
  opacity:.25;
}

button {
  cursor:pointer;
}

#controls button {
  margin:2px 15px;
}

#clock {
  width:680px;
  height:680px;
  margin:5px auto;
  display:block;
  background:#000;
  z-index:1;
}

#personal-options {
  margin-top:20px;
  border-top:1px dashed #444;
}

#options {
  position:absolute;
  left:15px;
  top:45px;
  width:300px;
  z-index:10;
  background:rgba(15,15,15,.9);
  border:1px solid #222;
  border-radius:5px;
  text-align:center;
  padding:.7em 2em;
  text-align:left;
}

#options #okay, #options #reset {
  float:right;
  position:relative;
  top:-15px;
}

#options #reset {
  color:red;
  right:7px;
}

#options-toggle {
  color:#aaa;
  position:absolute;
  top:15px;
  left:15px;
  background:#151515;
  color:#666;
  padding:.6em .8em;
  cursor:pointer;
  border-radius:3px;
}

#options-toggle:hover {
  background:#222;
  color:#fff;
}

#options label {
  clear:left;
  width:50%;
  margin-top:15px;
  display:inline-block;
}

.output {
  width: 20px;
  display:inline-block;
}

input[type=range] {
  position:relative;
  top:7px;
  margin-right:15px;
}

input[type=number], input.birthday {
  width:50px;
  font-weight:bold;
  background:#111;
  padding:5px;
  color:#aaa;
  border:1px solid #333;
  margin-right:15px;
}
input.birthday {
  width:100px;
}