.vial.large {
  width:54px;
  height:317px;
  position:relative;
  top:23px;
  z-index:1; /* above main menu */
  /*width:58px;
  height:317px;*/
  background-position:center;
  background-repeat:no-repeat;
  background-color:transparent;
}
.vial.large.hp {
  left:-28px;
}
.vial.large.mp {
  position:absolute;
  right:-25px;
}
.vial.large .value {
  position:absolute;
  top:auto;
  bottom:18px;
  left:0;
  text-align:center;
  width:54px;
}


.vial.small .value {
  width:5px;
  position:absolute;
  bottom:0;
}
.vial.small img {
  position:absolute;
  top:0;
  left:0;
}
  
.vial.small {
  position:absolute;
  top:48px;
  width:5px;
  height:98px;
}
.vial.small.hp {
  left:7px;
}
.vial.small.mp {
  left:16px;
}
.vial.small.hp .value {
  background-color:red;
}
.vial.small.mp .value {
  background-color:blue;
}