.time-input {
  margin: 20px;
  text-align: center;
  width: 400px;
  display: inline-block; }

#time-slider {
  background: url("../gfx/time-slider.png");
  height: 50px;
  width: 400px;
  position: relative;
  margin: 0 auto;
  margin-bottom: 30px; }

#time-slider-knob {
  position: absolute;
  top: 16px;
  width: 4px;
  height: 20px;
  background: #000;
  margin-left: -2px; }

.time-slider-display {
  display: inline-block;
  position: relative;
  background: url("../gfx/clock-background.png");
  vertical-align: middle; }

.time-slider-display,
.time-slider-display .minute,
.time-slider-display .hour {
  height: 64px;
  width: 64px; }

.time-slider-display .minute,
.time-slider-display .hour {
  position: absolute;
  left: 0px;
  top: 0px; }

.time-slider-display .minute.animated,
.time-slider-display .hour.animated {
  transition: transform 0.5s; }

.time-slider-display .hour {
  background: url("../gfx/clock-hand-hour.png"); }

.time-slider-display .minute {
  background: url("../gfx/clock-hand-minute.png"); }

#time-slider-form {
  display: inline-block;
  vertical-align: middle;
  margin-left: 20px; }

#time-slider-form input[type="text"] {
  width: 2em;
  padding: 0;
  display: inline-block;
  text-align: center;
  font-size: 2em;
  height: 1.7em; }