.leaflet-control.leaflet-timeline-control
  width: 96%
  box-sizing: border-box;
  margin: 2%;
  margin-bottom: 20px;
  text-align: center
  *
    vertical-align: middle
  input[type=range]
    width: 80%
  .sldr-ctrl-container
    float: left
    width: 15%
    box-sizing: border-box;
  .button-container
    button
      position: relative
      width: 20%
      height: 20px
      // button icons are mostly from
      // http://nicolasgallagher.com/pure-css-gui-icons/demo/
      // but tweaked a bit for sizing
      &::before, &::after
        content: ''
        position: absolute
      &.play
        &::before
          border: 7px solid transparent
          border-width: 7px 0 7px 10px
          border-left-color: black
          margin-top: -7px
          background: transparent
          margin-left: -5px
      &.pause
        display: none
        &::before
          width: 4px
          height: 14px
          border: 4px solid black
          border-width: 0 4px
          margin-top: -7px
          margin-left: -6px
          background: transparent
      &.prev
        &::before, &::after
          margin: -8px 0 0
          background: black
        &::before
          width: 2px
          height: 14px
          margin-top: -7px
          margin-left: -7px
        &::after
          border: 7px solid transparent
          border-width: 7px 10px 7px 0
          border-right-color: black
          margin-top: -7px
          margin-left: -5px
          background: transparent
      &.next
        &::before, &::after
          margin: -8px 0 0
          background: black
        &::before
          width: 2px
          height: 14px
          margin-top: -7px
          margin-left: 5px
        &::after
          border: 7px solid transparent
          border-width: 7px 0 7px 10px
          border-left-color: black
          margin-top: -7px
          margin-left: -5px
          background: transparent
  &.playing
    button
      &.pause
        display: inline-block
      &.play
        display: none