body {
  background: -webkit-gradient(linear, center top, center bottom, from(#ffffff), to(#dddddd));
  text-align: center;
  font-family: "Gill Sans", Calibri, "Trebuchet MS", sans-serif;
}
p {
  margin: 20px 0 150px;
  color: #bbbbbb;
}
p a {
  color: #70b0d1;
  text-decoration: none;
}
.clock {
  position: relative;
  display: inline-block;
  padding: 25px;
  margin: 30px;
  background: -webkit-gradient(linear, left 55%, right 45%, from(#555555), to(#555555), color-stop(50%, #dddddd));
  -webkit-box-shadow: 4px 14px 12px rgba(0, 0, 0, 0.5);
  -webkit-border-radius: 300px;
}
.clockBorderShadow {
  padding: 4px;
  background: -webkit-gradient(linear, 45% top, 55% bottom, from(#222222), to(#ffffff), color-stop(30%, #666666), color-stop(50%, #eeeeee));
  -webkit-border-radius: 300px;
}
.clockBackground {
  position: relative;
  width: 200px;
  height: 200px;
  background: -webkit-gradient(linear, 45% top, 55% bottom, from(#bbbbbb), to(#ffffff), color-stop(40%, #eeeeee));
  -webkit-border-radius: 300px;
}
.seconds {
  position: absolute;
  left: 49.5%;
  height: 58%;
  top: 2%;
  width: 1%;
  background: #ff0000;
  z-index: 3;
}
.minutes {
  position: absolute;
  left: 48.5%;
  height: 48%;
  top: 10%;
  width: 3%;
  background: #000000;
  z-index: 2;
}
.hours {
  position: absolute;
  left: 48%;
  height: 36%;
  top: 20%;
  width: 4%;
  background: #000000;
  z-index: 1;
}
.center {
  position: absolute;
  left: 47.5%;
  top: 47.5%;
  height: 5%;
  width: 5%;
  background: #333333;
  z-index: 4;
  -webkit-border-radius: 50px;
}
.handles { margin: 0; }
.handles li {
  margin: 0;
  list-style: none;
  padding: 0;
  position: absolute;
  top: 0%;
  left: 49%;
  width: 1%;
  height: 5%;
  text-indent: -9999px;
  overflow: hidden;
  background: #000000;
  -webkit-transform-origin: center 1000%;
}
.handles li:nth-child(2) { -webkit-transform: rotate(30deg); }
.handles li:nth-child(3) { -webkit-transform: rotate(60deg); }
.handles li:nth-child(4) { -webkit-transform: rotate(90deg); }
.handles li:nth-child(5) { -webkit-transform: rotate(120deg); }
.handles li:nth-child(6) { -webkit-transform: rotate(150deg); }
.handles li:nth-child(7) { -webkit-transform: rotate(180deg); }
.handles li:nth-child(8) { -webkit-transform: rotate(210deg); }
.handles li:nth-child(9) { -webkit-transform: rotate(240deg); }
.handles li:nth-child(10) { -webkit-transform: rotate(270deg); }
.handles li:nth-child(11) { -webkit-transform: rotate(300deg); }
.handles li:nth-child(12) { -webkit-transform: rotate(330deg); }
.label {
  font-size: 18px;
  text-transform: uppercase;
  width: 150px;
  margin: 0 29px;
  padding: 5px 0;
  background: #ffffff;
  border: 1px solid #dddddd;
  position: absolute;
  bottom: -70px;
  -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);
}