body {
    font-family: Arial;
}

.barfiller {
    width:100%;
    height:12px;
    background:#fcfcfc;
    border:1px solid #ccc;
    position:relative;
    margin-bottom:20px;
    box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 
    -moz-box-shadow: inset 1px 4px 9px -6px rgba(0,0,0,.5); 
}

.barfiller .fill {
  background: #1565C0 none repeat scroll 0 0;
  display: block;
  height: 6px;
  top:3px;
  position: relative;
  width: 0;
  z-index: 0;
}

.barfiller .tipWrap {
    display:none;
}

.barfiller .tip {
  background: #000 none repeat scroll 0 0;
  color: #fff;
  font-size: 11px;
  left: 0;
  margin-top: -30px;
  padding: 2px 4px;
  position: absolute;
  z-index: 0;
}

.barfiller .tip:after {
    border:solid;
    border-color:rgba(0,0,0,.8) transparent;
    border-width:6px 6px 0 6px;
    content:"";
    display:block;
    position:absolute;
    left:9px;
    top:100%;
    z-index:0;
}