.whitebearoff {left: 1.25%; top: 5.2%;}
.whitebearoffname {left: 1.25%; top: 5.2%;}

.bar1num,.bar2num,.bar3num,.bar4num,.bar5num,.bar6num,.bar7num,.bar8num,.bar9num,.bar10num,.bar11num,.bar12num { top: 43.875%; }

.label1,.bar1 { left: 8.75% }
.bar1num,.bar24num { left: 9.75% }

.label2,.bar2 { left: 15% }
.bar2num,.bar23num { left: 16% }

.label3,.bar3 { left: 21.25% }
.bar3num,.bar22num { left: 22.25% }

.label4,.bar4 { left: 27.5% }
.bar4num,.bar21num { left: 28.5% }

.label5,.bar5 { left: 33.75% }
.bar5num,.bar20num { left: 34.75% }

.label6,.bar6 { left: 40% }
.bar6num,.bar19num { left: 41% }

.bar0 {left: 46.875%; top: 5.2%; }
.bar0num {left: 48% }

.label7,.bar7 { left: 53.75% }
.bar7num,.bar18num { left: 54.75% }

.label8,.bar8 { left: 60% }
.bar8num,.bar17num { left: 61% }

.label9,.bar9 { left: 66.25% }
.bar16num,.bar9num { left: 67.25% }

.label10,.bar10 { left: 72.5% }
.bar15num,.bar10num { left: 73.5% }

.label11,.bar11 { left: 78.75% }
.bar14num,.bar11num { left: 79.75% }

.label12,.bar12 { left: 85% }
.bar13num,.bar12num { left: 86% }

.blackbearoff { left: 1.25% }
.blackbearoffname {left: 1.25% } /* height: 1px; ?*/

.bar13num,.bar14num,.bar15num,.bar16num,.bar17num,.bar18num,.bar19num,.bar20num,.bar21num,.bar22num,.bar23num,.bar24num { top: 51%; }

.label24,.bar24 { left: 8.75% }
.label23,.bar23 { left: 15% }
.label22,.bar22 { left: 21.25% }
.label21,.bar21 { left: 27.5% }
.label20,.bar20 { left: 33.75% }
.label19,.bar19 { left: 40% }

.bar25 {left: 46.875% }
.bar25num {left: 47.9% }

.label18,.bar18 { left: 53.75% }
.label17,.bar17 { left: 60% }
.label16,.bar16 { left: 66.25% }
.label15,.bar15 { left: 72.5% }
.label14,.bar14 { left: 78.75% }
.label13,.bar13 { left: 85% }

.whitedicepos1, .whitedicepos2, .blackdicepos1, .blackdicepos2 {
    position: absolute;
    top: 47.0%;
    width: var(--dice-size);
    height: var(--dice-size);
}

.whitedicepos1 { left: var(--white-dice-left); }
.whitedicepos2 { left: 29.125%; }

.blackdicepos1 { left: var(--black-dice-left); }
.blackdicepos2 { left: 74.125%; }

.middleuparrow {
    position: absolute;
    top: 39.375%;
    width: 6%;
    height: 5%;
}

.middlebottomarrow {
    position: absolute;
    top: 49.375%;
    width: 5%;
    height: 5%;
}

.cubetop,.cubebottom,.cubemiddle { position: absolute; width: 6%; height: 5%; }
.cubemiddle {
    top: 45%;
    left: var(--cubemiddle-left);
    height: 10%;
}
.cubebar { left: 0.75%; }

.player_black,.player_white { left: 93.25%; }
.middleuparrow,.middlebottomarrow,.cubebottom,.cubetop  { left: 92.75%; }
.whiteclockframe { left: 92%; z-index: 4; }
.blackclockframe { left: 92%; z-index: 4; }

.whitescorecard, .blackscorecard, .lengthscorecard {
    transform: rotate(90.0deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}

.scorecard {
    left: 88%;
    transform: rotate(90.0deg);
    -ms-transform:rotate(90deg); /* IE 9 */
    -moz-transform:rotate(90deg); /* Firefox */
    -webkit-transform:rotate(90deg); /* Safari and Chrome */
    -o-transform:rotate(90deg); /* Opera */
}

.whitescorecard, .blackscorecard { left: 93%; }
.lengthscorecard { left: 93.5%; }

.boff, .woff { left: 2.6%; }
.bflag, .wflag { left: 2.2%; overflow:hidden; }

.player_black_alt { left: 93.5%; }
.player_white_alt { left: 93.5%; }