#button-box {
    height: 370px;
    width: 500px;
    position: relative;
    float: left;
    background-color: white;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0px 1px 1px #a5a4a6;
}

.button {
    border: 1px solid #0a3c59;
    background: #3e779d;
    background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
    background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
    background: -moz-linear-gradient(top, #65a9d7, #3e779d);
    background: -ms-linear-gradient(top, #65a9d7, #3e779d);
    background: -o-linear-gradient(top, #65a9d7, #3e779d);
    background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
    padding: 10.5px 21px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
    -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
    text-shadow: #7ea4bd 0 1px 0;
    color: #06426c;
    font-size: 14px;
    font-family: helvetica, serif;
    text-decoration: none;
    vertical-align: middle;
    position: absolute;
}

    .button:hover {
        border: 1px solid #0a3c59;
        text-shadow: #1e4158 0 1px 0;
        background: #3e779d;
        background: -webkit-gradient(linear, left top, left bottom, from(#65a9d7), to(#3e779d));
        background: -webkit-linear-gradient(top, #65a9d7, #3e779d);
        background: -moz-linear-gradient(top, #65a9d7, #3e779d);
        background: -ms-linear-gradient(top, #65a9d7, #3e779d);
        background: -o-linear-gradient(top, #65a9d7, #3e779d);
        background-image: -ms-linear-gradient(top, #65a9d7 0%, #3e779d 100%);
        color: #fff;
    }

    .button:active {
        text-shadow: #1e4158 0 1px 0;
        border: 1px solid #0a3c59;
        background: #65a9d7;
        background: -webkit-gradient(linear, left top, left bottom, from(#3e779d), to(#3e779d));
        background: -webkit-linear-gradient(top, #3e779d, #65a9d7);
        background: -moz-linear-gradient(top, #3e779d, #65a9d7);
        background: -ms-linear-gradient(top, #3e779d, #65a9d7);
        background: -o-linear-gradient(top, #3e779d, #65a9d7);
        background-image: -ms-linear-gradient(top, #3e779d 0%, #65a9d7 100%);
        color: #fff;
    }


#basic-controls {
    width: 200px;
    height: 620px;
    padding: 10px 20px 10px 20px;
    float: left;
    margin-left: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fcfcfc;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
}

.controls-container {
    width: 1100px;
    float: left;
    margin-top: 20px;
}

#controls {
    width: 200px;
    padding: 10px 20px 10px 20px;
    float: left;
    margin-right: 20px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background-color: #fcfcfc;
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.49), inset 0 1px 0 #fff;
    height: 240px;
}