h1
  float: left

#clock
  .duration
    font-size: 2em
    text-align: center

  .controls
    margin: 0 auto
    width: 30em
    text-align: center
    button, a
      display: inline-block
      border: none
      background: #fff
      color: #000
      box-shadow: inset 0 0 0.7ex white, 0 0 0.7ex white
      margin: 1ex
      &:not(:first-child)
        margin-left: 2ex
      padding: 1ex
      font-size: 2em
      border-radius: 1ex
      outline: none
      width: 3em
      height: 3em
      &:hover, &:active
        box-shadow: inset 0 0 0.7ex white, 0 0 1ex white
        background: #ddd
        color: #000
      &:hover, &:active, &:focus, &
        outline: none
    > *
      display: none
    &[data-state=loaded]  > .if_loaded,
    &[data-state=started] > .if_started,
    &[data-state=stopped] > .if_stopped
      display: initial

#timelist
  tr > td:first-child
    text-align: right
    width: 3em
  input
    background: black
    border: none
    color: white
    box-shadow: inset 0 0 1px white, 0 0 1px white
    &:hover, &:focus, &:active
      box-shadow: inset 0 0 0.7ex white, 0 0 1ex white
    &:hover, &:focus, &:active, &
      outline: none

main
  clear: both
  margin: 0 auto
  width: 20em
  text-align: center
  table
    text-align: initial
  min-height: 20em

.duration
  font-family: monospace

html, body
  border: none
  margin: 0
  padding: 0
  background-color: #111
  color: #fff

footer
  font-size: 0.5em
  color: #444
  text-align: right