body
{
    font-family: arial;
}
h1, p
{
    margin: 0;
}

div.power_controls
{
    margin-right:70px;
}

div.html5_logo
{
    margin-left:70px;
}
table.power
{
    background-color: #cccccc;
    cursor: pointer;
    border:1px solid #333333;
}
table.power th
{
    background-color: white;
    cursor: default;
}
td.pw1
{
    background-color: #6fe8f0;
}
td.pw2
{
    background-color: #86ef6f;
}
td.pw3
{
    background-color: #ef6f6f;
}
/* Style applied to the spin button once a power has been selected */
.clickable
{
    cursor: pointer;
}
/* Other misc styles */
.margin_bottom
{
    margin-bottom: 5px;
}
#canvas{
    position: absolute;
    left: 31.9%;
    top: 26.3%;
}
@media (min-width: 992px) AND (max-width: 1199px){
    #canvas{
        position: absolute;
        left: 27.4%;
        top: 26.2%;
    }
}
@media (min-width: 768px) AND (max-width: 991px){
    #canvas{
        position: absolute;
        left: 19.9%;
        top: 31.2%;
    }
}
@media (min-width: 576px) AND (max-width: 767px){
    #canvas{
        position: absolute;
        left: 9.9%;
        top: 31.2%;
    }
}

@media (min-width: 570px) AND (max-width: 575px){
    #canvas{
        position: absolute;
        left: 12.3%;
        top: 31.2%;
    }
}
@media (min-width: 560px) AND (max-width: 570px){
    #canvas{
        position: absolute;
        left: 11.3%;
        top: 31.2%;
    }
}
@media (min-width: 550px) AND (max-width: 560px){
    #canvas{
        position: absolute;
        left: 10.8%;
        top: 31.2%;
    }
}
@media (min-width: 540px) AND (max-width: 550px){
    #canvas{
        position: absolute;
        left: 9.8%;
        top: 31.2%;
    }
}
@media (min-width: 530px) AND (max-width: 540px){
    #canvas{
        position: absolute;
        left: 9.3%;
        top: 31.2%;
    }
}
@media (min-width: 515px) AND (max-width: 530px){
    #canvas{
        position: absolute;
        left: 8.2%;
        top: 31.2%;
    }
}
@media (min-width: 500px) AND (max-width: 514px){
    #canvas{
        position: absolute;
        left: 7.2%;
        top: 31.2%;
    }
}

@media (min-width: 490px) AND (max-width: 499px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 31.2%;
    }
}
@media (min-width: 480px) AND (max-width: 490px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 31.2%;
    }
}
@media (min-width: 470px) AND (max-width: 480px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 31.2%;
    }
}
@media (min-width: 460px) AND (max-width: 470px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 31.8%;
    }
}
@media (min-width: 450px) AND (max-width: 460px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 32.2%;
    }
}
@media (min-width: 440px) AND (max-width: 450px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 33.2%;
    }
}
@media (min-width: 430px) AND (max-width: 440px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 33.8%;
    }
}
@media (min-width: 420px) AND (max-width: 430px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 34.3%;
    }
}
@media (min-width: 410px) AND (max-width: 420px){
    #canvas{
        position: absolute;
        left: 4.2%;
        top: 35%;
    }
}
@media (min-width: 400px) AND (max-width: 410px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 35.8%;
    }
}

@media (min-width: 390px) AND (max-width: 400px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 36.5%;
    }
}
@media (min-width: 375px) AND (max-width: 389px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 37.3%;
    }
}
@media (min-width: 370px) AND (max-width: 375px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 37.8%;
    }
}
@media (min-width: 360px) AND (max-width: 369px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 38.9%;
    }
}
@media (min-width: 350px) AND (max-width: 359px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 39.5%;
    }
}
@media (min-width: 340px) AND (max-width: 349px){
    #canvas{
        position: absolute;
        left: 5%;
        top: 40%;
    }
}
@media (min-width: 330px) AND (max-width: 339px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 40.4%;
    }
}
@media (min-width: 320px) AND (max-width: 329px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 41%;
    }
}
@media (min-width: 310px) AND (max-width: 319px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 42%;
    }
}
@media (min-width: 300px) AND (max-width: 309px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 42.8%;
    }
}
@media (min-width: 290px) AND (max-width: 299px){
    #canvas{
        position: absolute;
        left: 6%;
        top: 43.5%;
    }
}
@media (min-width: 280px) AND (max-width: 289px){
    #canvas{
        position: absolute;
        left: 7%;
        top: 44%;
    }
}

@media (max-width: 575px){
    img.Spin_bg{
        /*display: none;*/
        width: 100%;
    }
}
@media (max-width: 991px){
    img.Spin_bg{
        /*display: none;*/
        width: 100%;
    }
    .mobile-hide{
        display: none;
    }
}
@media (min-width: 992px){
    .desktop-hide{
        display: none;
    }
}