body { font-family: "Ace Attorney", "MS PGothic", "MS UI Gothic", "MS Sans Serif", "Hiragino Maru Gothic Pro", "Mitra Mono", "Mukti Narrow", "Meera", "Khmer OS", "FreeSans", "Gargi" , sans-serif; } img { image-rendering: -moz-crisp-edges; image-rendering: -o-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; -ms-interpolation-mode: nearest-neighbor; } .client_button { margin: 1px; padding: 2px 15px; cursor: pointer; text-align: center; font-weight: bold; color: white; background-color: #7b2900; border-radius: 3px; border-style: solid; border-width: 1px; border-color: #fff; box-shadow: 1px 1px inset; } #client_defense_hp { text-align: left; } #client_defense_hp>.health-bar { background-color: #169de0; } #client_prosecutor_hp { text-align: right; } #client_prosecutor_hp>.health-bar { background-color: #e01f5f; } .health-box { background-color: #555; height: 20px; width: 50%; margin: 0 auto; border: solid 2px #aaa; border-radius: 5px; box-sizing: border-box; display: block; } .health-bar { width: 100%; height: 100%; border-radius: 3px; bottom: 0; position: relative; display: inline-block; transition: 1s linear; transition-property: width; }