html {
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #333333;

    margin: 0;
    padding: 0;
    height: 100%;
    font-family: sans-serif;
    font-size: 11px;
}

#centreMe {
    width: 500px;
    height: 500px;
    position: absolute;
    margin-top: -250px;
    margin-left: -250px;
    top: 50%;
    left: 50%;
}

#xyloBorder {
    width: 480px;
    height: 480px;
    padding: 10px;
    padding-right: 0px;
    background-color: white;
}

.xyloButton1,
.xyloButton2,
.xyloButton3,
.xyloButton4,
.xyloButton5 {
    margin: -2px;
    display: inline-block;
    width: 96px;
    height: 480px;
    cursor: pointer;

}

.xyloButton1,
.xyloButton2,
.xyloButton3,
.xyloButton4,
.xyloButton5 {
    cursor: pointer;
}

.xyloButton1 {
    background-color: #00ccff;
}

.xyloButton2 {
    background-color: #ffff00;
}

.xyloButton3 {
    background-color: #00ff00;
}

.xyloButton4 {
    background-color: #fa0096;
}

.xyloButton5 {
    background-color: #0f4295;
}

.xyloButton1:active {
    background-color: #33d6ff;
}

.xyloButton2:active {
    background-color: #feff33;
}

.xyloButton3:active {
    background-color: #33ff33;
}

.xyloButton4:active {
    background-color: #ff2fab;
}

.xyloButton5:active {
    background-color: #0059e9;
}

#content {
    width: 1000px;
}

.gridBox {
    float: left;
    background-repeat: no-repeat;
    background-position: 0 0px;
    background-color: #222;
    background-size: 320px 300px;
    border: 0px solid #666;
    width: 320px;
    height: 100px;
}

.gridBox:hover {
    background-position: 0 -100px;
    background-color: #322;
    cursor: pointer;
}

.gridBox.active,
.gridbox.active:hover {
    background-position: 0 -200px;
    cursor: auto;
}