body {
  padding: 0;
  margin: 0;
  font-family: 'Droid Serif';
}

body.dark {
  background: #000;
}

#container {
  position: relative;
  width: 640px;
  margin: 120px auto;
  border: 1px solid #dedede;
  background: #fff;
}

body.dark #container {
  background: #000;
  border-color: #1c1c1c;
}

#clock { 
  position: relative;
  width: 600px;
  padding: 20px;
  margin: 0px auto;
  background: #fff;
}

body.dark #clock {
  background: #000;
}

.hide {
  visibility: hidden;
}

p {
  width: 100%;
  font-size: 60px;
  text-transform: uppercase;
  line-height: 66px;
  padding: 0;
  margin: 0;
}

span {
  color: #f3f3f3;
  padding: 0;
  float: left;
}

body.dark span {
  color: #1c1c1c;
}

span.middle {
  display: inline-block;
  text-align: center;
}

span.active {
  color: #333;
}

body.dark span.active {
  color: #ddd;
}


span.last {
  float: right;
}

.bar {
  width: 100%;
  height: 1px;
  position: relative;
  overflow: hidden;
}

.bar .progress {
  position: absolute;
  width: 100%;
  height: 100%;
  left: -100%;
  background: #323232;
  z-index: 10;
}

body.dark .bar .progress {
  background: #dedede;
}

.bar .tick {
  position: absolute;
  width: 3px;
  margin-left: -1px;
  height: 100%;
  background: #bbb;
  z-index: 20;
}

body.dark .bar .tick {
  background: #333;
}

.bar .p20 { left: 20%; }
.bar .p40 { left: 40%; }
.bar .p60 { left: 60%; }
.bar .p80 { left: 80%; }


.cf:before,
.cf:after {
    content: " "; /* 1 */
    display: table; /* 2 */
}

.cf:after {
    clear: both;
}