footer {
  color: #666;
  text-align: right;
}

#div_container {
  margin: 0 auto;
  width: 90%;
}

#div_header {
  height: 100px;
}

#div_content {
  height: 500px;
}

#div_footer {
  height: 100px;
}

#div_content div {
  position: absolute;
}

.quiz_base {
  float: right;
  height: 500px;
  left: 600px;
  width: 500px;
}

#btn_quiz {
}

.clock_base {
  background-image: url('../img/clock.png');
  background-position: center top;
  background-repeat: no-repeat;
  -moz-background-size: cover;
  background-size: cover;
  height: 500px;
  width: 500px;
}

.clock {
  left: 50%;
  top: 50%;
}

.numpos {
  top: -195px;
}

.num {
  color: #333333;
  font-size: 30px;
  height: 60px;
  left: -30px;
  line-height: 60px;
  text-align: center;
  top: -30px;
  width: 60px;
}

.c1 {-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg)}
.c1 .num {-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg)}
.c2 {-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg)}
.c2 .num {-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg)}
.c3 {-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}
.c3 .num {-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}
.c4 {-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg)}
.c4 .num {-webkit-transform:rotate(-120deg);-moz-transform:rotate(-120deg)}
.c5 {-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg)}
.c5 .num {-webkit-transform:rotate(-150deg);-moz-transform:rotate(-150deg)}
.c6 {-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
.c6 .num {-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg)}
.c7 {-webkit-transform:rotate(210deg);-moz-transform:rotate(210deg)}
.c7 .num {-webkit-transform:rotate(-210deg);-moz-transform:rotate(-210deg)}
.c8 {-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg)}
.c8 .num {-webkit-transform:rotate(-240deg);-moz-transform:rotate(-240deg)}
.c9 {-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}
.c9 .num {-webkit-transform:rotate(-270deg);-moz-transform:rotate(-270deg)}
.c10 {-webkit-transform:rotate(300deg);-moz-transform:rotate(300deg)}
.c10 .num {-webkit-transform:rotate(-300deg);-moz-transform:rotate(-300deg)}
.c11 {-webkit-transform:rotate(330deg);-moz-transform:rotate(330deg)}
.c11 .num {-webkit-transform:rotate(-330deg);-moz-transform:rotate(-330deg)}
.c12 {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
.c12 .num {-webkit-transform:rotate(-0deg);-moz-transform:rotate(-0deg)}

.nummpos {
  top: -260px;
}

.numm {
  color: #666666;
  font-size: 16px;
  height: 40px;
  left: -20px;
  line-height: 40px;
  text-align: center;
  top: -20px;
  width: 40px;
}

.cm1 {-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg)}
.cm1 .numm {-webkit-transform:rotate(-30deg);-moz-transform:rotate(-30deg)}
.cm2 {-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg)}
.cm2 .numm {-webkit-transform:rotate(-60deg);-moz-transform:rotate(-60deg)}
.cm3 {-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg)}
.cm3 .numm {-webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg)}
.cm4 {-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg)}
.cm4 .numm {-webkit-transform:rotate(-120deg);-moz-transform:rotate(-120deg)}
.cm5 {-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg)}
.cm5 .numm {-webkit-transform:rotate(-150deg);-moz-transform:rotate(-150deg)}
.cm6 {-webkit-transform:rotate(180deg);-moz-transform:rotate(180deg)}
.cm6 .numm {-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg)}
.cm7 {-webkit-transform:rotate(210deg);-moz-transform:rotate(210deg)}
.cm7 .numm {-webkit-transform:rotate(-210deg);-moz-transform:rotate(-210deg)}
.cm8 {-webkit-transform:rotate(240deg);-moz-transform:rotate(240deg)}
.cm8 .numm {-webkit-transform:rotate(-240deg);-moz-transform:rotate(-240deg)}
.cm9 {-webkit-transform:rotate(270deg);-moz-transform:rotate(270deg)}
.cm9 .numm {-webkit-transform:rotate(-270deg);-moz-transform:rotate(-270deg)}
.cm10 {-webkit-transform:rotate(300deg);-moz-transform:rotate(300deg)}
.cm10 .numm {-webkit-transform:rotate(-300deg);-moz-transform:rotate(-300deg)}
.cm11 {-webkit-transform:rotate(330deg);-moz-transform:rotate(330deg)}
.cm11 .numm {-webkit-transform:rotate(-330deg);-moz-transform:rotate(-330deg)}
.cm12 {-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg)}
.cm12 .numm {-webkit-transform:rotate(-0deg);-moz-transform:rotate(-0deg)}

.arrow_hour, .arrow_min, .arrow_sec {
  position: absolute;
  box-shadow: #ffffff 0 0 20px;
}

.arrow_hour {
  background: #ff0000;
  border-radius: 12px;
  height: 24px;
  left: -12px;
  opacity: 0.8;
  top: -12px;
  width: 160px;
  -webkit-transform-origin: 12px 12px;
  -moz-transform-origin: 12px 12px;
  transform: rotate(0deg);
}

.arrow_min {
  background: #000000;
  border-radius: 10px;
  height: 16px;
  left: -10px;
  opacity: 0.8;
  top: -10px;
  width: 220px;
  -webkit-transform-origin: 10px 10px;
  -moz-transform-origin: 10px 10px;
  transform: rotate(270deg);
}