style.css

body {
    background: rgb(238, 237, 163);
    color: #000;
    font: normal normal 15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 10px;
    padding: 0
}

a {
    color: #aabbff;
    text-decoration: none;
}

a:hover {
    color: #6677aa;
    text-decoration: underline;
    cursor: pointer;
}

canvas {
    padding-left: 0;
    padding-right: 0;
    margin-left: auto;
    margin-right: auto;
}

#options {
    width: 400px;
    float: left;
}

td {
    text-align: center;
    width: 64px;
}

span {
    /* style this span element so we can display nicely, this stlying is not neccessary */
    margin: 10px 0;
    display: block;
    width: 100%;
    float: left;
}

input[type="radio"] {
    /* hide the inputs */
    display: none;
}

/* style your lables/button */
input[type="radio"] + label {
    /* keep pointer so that you get the little hand showing when you are on a button */
    cursor: pointer;
    /* the following are the styles */
    padding: 4px 10px;
    border: 1px solid #ccc;
    background: #efefef;
    color: rgb(56, 56, 56);
    border-radius: 3px;
    text-shadow: 1px 1px 0 rgba(0,0,0,0);
    display: block;
    width: 100px;
    text-align: center;
}

input[type="radio"]:checked + label {
    /* style for the checked/selected state */
    background: #777;
    border: 1px solid #444;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.4);
    color: white;
}

input[type="text"] {
    font: normal normal 15px Verdana, Geneva, Arial, Helvetica, sans-serif;
    text-align: center;
    width: 55px;
    border-radius: 3px;
    border: 1px solid #ccc;
    height: 24px;
}

#Zoom100 + label, #Zoom150 + label, #Zoom200 + label {
    width: 40px;
}