/*------------------------------------*\
  CHART
\*------------------------------------*/
#chart{
  width:320px;
}
#chart dt{
  width:150px;
  float:left;
  margin:0 0px 5px 0;
  padding:2px 0;
  display:inline;
  font-weight:bold;
  text-align:right;
}
#chart dd{
  width:150px;
  border-right:1px solid #ddd;
  float:left;
  margin-bottom:5px;
  display:inline;
}
#chart dd span{
  color:#000;
  background:#09f;
  text-align:center;
  padding:2px 0;
  display:block;

  text-shadow:1px 1px 1px rgba(0,0,0,0.2);
  -moz-border-radius:2px;
  -webkit-border-radius:2px;
  border-radius:2px;
  background:-webkit-gradient(linear, left top, →
  left bottom, from(#09f), to(#077fd0));
  -webkit-box-reflect:below 0 →
  -webkit-gradient(linear, left top, →
  left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.25)));
}


#data-0{
  width:10%;
}
#data-1{
  width:1%;
}
#data-2{
  width:59%;
}
#data-3{
  width:26%;
}
#data-4{
  width:26%;
}
#data-5{
  width:26%;
}
#data-6{
  width:26%;
}
#data-7{
  width:26%;
}
#data-0{
  -webkit-animation-name:bar-0; /* Give the bar an animation with a
    unique name */
}
#data-1{
  -webkit-animation-name:bar-1; /* Give the bar an animation with a
    unique name */
}
#data-2{
  -webkit-animation-name:bar-2; /* Give the bar an animation with a
    unique name */
}
#data-3{
  -webkit-animation-name:bar-3; /* Give the bar an animation with a
    unique name */
}
#data-4{
  -webkit-animation-name:bar-4; /* Give the bar an animation with a
    unique name */
}
#data-5{
  -webkit-animation-name:bar-5; /* Give the bar an animation with a
    unique name */
}
#data-6{
  -webkit-animation-name:bar-6; /* Give the bar an animation with a
    unique name */
}
#data-7{
  -webkit-animation-name:bar-7; /* Give the bar an animation with a
    unique name */
}

#data-0,#data-1,#data-2,#data-3,#data-4,#data-5,#data-6,#data-7{ /* Define animation styles for all three
    bars at once */
  -webkit-animation-duration:0.5s; /* Animation duration in seconds */
  -webkit-animation-iteration-count:1; /* Amount of times to loop */
  -webkit-animation-timing-function:ease-out; /* Ease in, out etc. */
}
@-webkit-keyframes bar-0{
  0%{ /* Define bar-one styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-one styles at 100% (0.5 seconds) */
    width:10%;
  }
}
@-webkit-keyframes bar-1{
  0%{ /* Define bar-one styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-one styles at 100% (0.5 seconds) */
    width:1%;
  }
}
@-webkit-keyframes bar-2{
  0%{ /* Define bar-two styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-two styles at 100% (0.5 seconds) */
    width:59%;
  }
}
@-webkit-keyframes bar-3{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:26%;
  }
}
@-webkit-keyframes bar-4{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:26%;
  }
}
@-webkit-keyframes bar-5{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:26%;
  }
}
@-webkit-keyframes bar-6{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:26%;
  }
}
@-webkit-keyframes bar-7{
  0%{ /* Define bar-three styles at 0% (0 seconds) */
    width:0%;
  }
  100%{ /* Define bar-three styles at 100% (0.5 seconds) */
    width:26%;
  }
}