#large{
height: auto;
}
canvas{
display: block;
}
#pixels{
  position: relative;
  width: 100%;
  height: 26px;
  display: block;
  margin-bottom: 1px;
  overflow: hidden;
}
#total{
  width: 100%;
  height: 26px;
  display: block;
  overflow: hidden;
  margin-top: 2px;
  margin-bottom: 2px;
  background-repeat: repeat-y;
  background-size: 100% auto;
  position: relative;
}
#bar{
  width: 100%;
  height: 2px;
  display: block;
  background: #EEE;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
#progress{
  background: black;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
}
#totalprogress{
  opacity: 0.9;
  background: white;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  -webkit-transition: width 0.5s ease,left 0.5s ease;
  transition: width 0.5s ease,left 0.5s ease;
}
#small,#medium{
  width: 100%;
  height: 26px;
}
#medium{
  width: auto;
  position: absolute;
  left: 0;
  top: 0;
}
#hairline{
  stroke: red;
  stroke-width: 3;
}
#pixels,#total{  image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: -o-crisp-edges; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; }