%div.clock
  %div.col
    %span.d.h.h1
  %div.col
    %span.d.h.h2
  %div.col  
    %span.c :
  %div.col  
    %span.d.m.m1
  %div.col
    %span.d.m.m2
  %div.col
    %span.c :
  %div.col
    %span.d.s.s1
  %div.col
    %span.d.s.s2
  %div.col
    %span.per

@import compass

html, 
body
  height: 100%

body
  background: #151515
  /* Adjust font size to to change clock size */
  font: 300%/1.5em 'Droid Sans Mono', monospace
  text-align: center
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.5)

.clock
  background: #000
  border: 1px solid #000
  box-shadow: 0 0 0 1px #333
  display: inline-block
  margin: 100px 0 0 0
  height: 1.5em
  /* Remove the line below to see behind the curtain */
  overflow: hidden

.clock .col
  background: linear-gradient(#222 0%, #383838 50%, #222 100%)
  border-left: 1px solid rgba(255, 255, 255, 0.05)
  border-right: 1px solid rgba(255, 255, 255, 0.05)
  float: left
  height: 100%
  margin: 0 1px 0 0
  position: relative

.clock .col:last-child
  margin: 0

.clock .col:before
  content: ''
  display: block
  height: 100% 
  left: 0
  position: absolute
  top: 0
  width: 100%
  z-index: 2

.clock span 
  color: #fff
  display: block
  width: 1em
  word-break: break-all
  word-break: break-word

.clock .d,
.clock .per
  position: relative
  top: 0
  transition: top 500ms ease-out

.clock .d:before   
  content: ' 0 1 2 3 4 5 6 7 8 9 '

@for $i from 1 through 9
  .clock .d#{$i}
    top: -1.5em * $i

.clock .c,
.clock .per
  color: #777
  font-size: 0.5em

.clock .c
  width: 0.7em

.clock .per
  width: 2em

.clock .per:before   
  content: ' AM PM '

.clock .per.pm
  top: -3em

digits = $ '.d'
hour1 = $ '.h1'
hour2 = $ '.h2'
minute1 = $ '.m1'
minute2 = $ '.m2'
second1 = $ '.s1'
second2 = $ '.s2'
period = $ '.per'
updateClock = ->	
  d = new Date()
  h = d.getHours()
  m = d.getMinutes()
  s = d.getSeconds()
  if h >= 12 then p = 'pm' else p = 'am'
  if h >= 13 then h = '' + h - 12 else h = '' + h
  if h < 10 then h = '0' + h else h = '' + h
  if h == '00' then h = '12'
  if m < 10 then m = '0' + m else m = '' + m
  if s < 10 then s = '0' + s else s = '' + s 		
  digits.removeClass 'd0 d1 d2 d3 d4 d5 d6 d7 d8 d9'
  hour1.addClass 'd' + h.charAt 0
  hour2.addClass 'd' + h.charAt 1
  minute1.addClass 'd' + m.charAt 0
  minute2.addClass 'd' + m.charAt 1
  second1.addClass 'd' + s.charAt 0
  second2.addClass 'd' + s.charAt 1
  period.removeClass 'am pm'
  period.addClass p
updateClock()
setInterval updateClock, 250