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

#bar1 { left: 8.75%; top: 5.2%; }

#bar1num { left: 10%; top: 43.875%; }

#bar2 { left: 15%; top: 5.2%; }

#bar2num { left: 16.25%; top: 43.875%; }

#bar3 { left: 21.25%; top: 5.2%; }

#bar3num { left: 22.5%; top: 43.875%; }

#bar4 { left: 27.5%; top: 5.2%; }

#bar4num { left: 28.75%; top: 43.875%; }

#bar5 { left: 33.75%; top: 5.2%; }

#bar5num { left: 35%; top: 43.875%; }

#bar6 { left: 40%; top: 5.2%; }

#bar6num { left: 41.25%; top: 43.875%; }

#bar0 {left: 46.875%; top: 5.2%; }

#bar7 { left: 53.75%; top: 5.2%; }

#bar7num { left: 55%; top: 43.875%; }

#bar8 { left: 60%; top: 5.2%; }

#bar8num { left: 61.25%; top: 43.875%; }

#bar9 { left: 66.25%; top: 5.2%; }

#bar9num { left: 67.5%; top: 43.875%; }

#bar10 { left: 72.5%; top: 5.2%; }

#bar10num { left: 73.75%; top: 43.875%; }

#bar11 { left: 78.75%; top: 5.2%; }

#bar11num { left: 80%; top: 43.875%; }

#bar12 { left: 85%; top: 5.2%; }

#bar12num { left: 86.25%; top: 43.875%; }

#blackbearoff { left: 1.25%; }
#blackbearoffname {left: 1.25%; height: 1px; }

#bar24, #bar23, #bar22, #bar21, #bar20, #bar19, #bar18, #bar17, #bar16, #bar15, #bar14, #bar13, #bar25 {
    top: 50%; 
}

#bar24 { left: 8.75%; }

#bar24num { left: 10%; top: 51%; }

#bar23 { left: 15%; }

#bar23num { left: 16.25%; top: 51%; }

#bar22 { left: 21.25%; }

#bar22num { left: 22.5%; top: 51%; }

#bar21 { left: 27.5%; }

#bar21num { left: 28.75%; top: 51%; }

#bar20 { left: 33.75%; }

#bar20num { left: 35%; top: 51%; }

#bar19 { left: 40%; }

#bar19num { left: 41.25%; top: 51%; }

#bar25 {left: 46.875%; }

#bar18 { left: 53.75%; }

#bar18num { left: 55%; top: 51%; }

#bar17 { left: 60%; }

#bar17num { left: 61.25%; top: 51%; }

#bar16 { left: 66.25%; }

#bar16num { left: 67.5%; top: 51%; }

#bar15 { left: 72.5%; }

#bar15num { left: 73.75%; top: 51%; }

#bar14 { left: 78.75%; }

#bar14num { left: 80%; top: 51%; }

#bar13 { left: 85%; }

#bar13num { left: 86.25%; top: 51%; }

#whitedicepos1, #whitedicepos2, #blackdicepos1, #blackdicepos2
{
    position: absolute;
    top: 47.0%;
    width: 5%;
    height: 5%;
}

#whitedicepos1 {
    left: 22.25%;
}

#whitedicepos2 {
    left: 29.125%;
}

#blackdicepos1 {
    left: 67.25%;
}

#blackdicepos2 {
    left: 74.125%;
}

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

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

.cubemiddle
{
    position: absolute;
    top: 44.375%;
}

.cubetop
{
    position: absolute;
    top: 7%;
}

.plustop
{
    position: absolute;
    top: 10.25%;
}

.minustop
{
    position: absolute;
    left: 92.875%;
    top: 10.25%;
}

.plustop,.minustop,.plusbottom,.minusbottom
{
    width: 2%;
    height: 2%;
}

.cubetop,.cubebottom,.cubemiddle
{
    width: 6%;
    height: 5%;
}

.cubebottom
{
    position: absolute;
    top: 81.75%;
}

.plusbottom,.plustop
{
    left: 95.875%;
}

.plusbottom
{
    position: absolute;
    top: 81%;
}

.minusbottom,.minustop
{
    left: 92.875%;
}

.minusbottom
{
    position: absolute;
    top: 81%;
}

.player_black
{
    position: absolute;
    top: 73.75%;
    width: 5%;
    height: 5%;
}

.player_white
{
    position: absolute;
    top: 15%;
    width: 5%;
    height: 5%;
}

.player_black,.player_white,.cubemiddle,.middleuparrow,.middlebottomarrow,.cubebottom,.cubetop
{
    left: 92.75%;
}

.whitepip
{
    position: absolute;
    top: 1.25%;
    left: 2%;
} 

.blackpip
{
    position: absolute;
    top: 95%;
    left: 2%;
} 

#whiteclock
{
    position: absolute;
    top: 1.25%;
    left: 92%;
} 
#whiteclockadd
{
    position: absolute;
    top: 4.25%;
    left: 92%;
} 

#blackclock
{
    position: absolute;
    top: 93%;
    left: 92%;
} 
#blackclockadd
{
    position: absolute;
    top: 90%;
    left: 92%;
} 

@media (max-width: 650px) {
    #bar24, #bar23, #bar22, #bar21, #bar20, #bar19, #bar18, #bar17, #bar16, #bar15, #bar14, #bar13, #bar25, #blackbearoff {
        top: 50%;
    }
}

#scorecard {
    position: absolute;
    background: black;
    width: 13%;
    height: 7%;
    left: 89.5%;
    top: 28%;
    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 */
}

#p40logo {
    position: absolute;
    left: 92%;
    top: 58%;
}

#p40logoimage {
    width: 95%;
}

#whitescorecard, #blackscorecard, #lengthscorecard {
    background: white;
    text-align: center;
    float: left;
}

#lengthscorecard {
    font-size: medium;
    width: 30%;
    height: 55%;
}

#whitescorecard, #blackscorecard,#middlescorecard {
    width: 35%;
}

#whitescorecard, #blackscorecard {
    top: 12%;
    position: relative;
    font-size: x-large;
    height: 70%;
}

@media (max-width: 1280px) {
#whitescorecard, #blackscorecard {
    font-size: large;
}
}

@media (max-width: 650px) {
#whitescorecard, #blackscorecard {
    font-size: small;
}
#lengthscorecard {
    font-size: smaller;
    height: 75%;
}
}