/* busy indicator */

@-webkit-keyframes dimdown {
  from{opacity: 1;}
  to{opacity: .25;}
}

#busy {
  width: 96px;
  height: 96px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -48px;
  background-image: -webkit-gradient(
    linear,
    left top, left bottom,
    from(rgba(0,0,0,0.3)), 
    to(rgba(0,0,0,0.5))
    );
  -webkit-border-radius: 12px;
}

#busy > * {
  width: 4px;
  height: 48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -24px -2px;
}

#busy > * > * {
  position: absolute;
  width: 4px;
  height: 12px;
  left: 0;
  background-color: white;
  opacity: 0;
}


.bar0 { }
.bar1 { -webkit-transform: rotate(30deg); }
.bar2 { -webkit-transform: rotate(60deg); }
.bar3 { -webkit-transform: rotate(90deg); }
.bar4 { -webkit-transform: rotate(120deg); }
.bar5 { -webkit-transform: rotate(150deg); }

.tick0 { top: 0; }
.tick1 { bottom: 0; }

.bar0 .tick0 { -webkit-animation: dimdown 960ms infinite; }
.bar1 .tick0 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 80ms; }
.bar2 .tick0 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 160ms; }
.bar3 .tick0 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 240ms; }
.bar4 .tick0 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 320ms; }
.bar5 .tick0 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 400ms; }
.bar0 .tick1 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 480ms; }
.bar1 .tick1 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 560ms; }
.bar2 .tick1 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 640ms; }
.bar3 .tick1 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 720ms; }
.bar4 .tick1 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 800ms; }
.bar5 .tick1 { -webkit-animation: dimdown 960ms infinite; -webkit-animation-delay: 880ms; }