.key {
        -moz-box-shadow:inset -8px -10px 0px -3px #ffffff;
        -webkit-box-shadow:inset -8px -10px 0px -3px #ffffff;
        box-shadow:inset -8px -10px 0px -3px #ffffff;
        background-color:#ededed;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        border-radius:6px;
        border:2px solid #dcdcdc;
        display:block;
        float: left;
        color:#777777;
        font-family:arial;
        font-size:16px;
        font-weight:bold;
        text-decoration:none;
        padding:4px 16px 16px 4px;
        width: 24px;
        height: 24px;
        overflow: hidden;
        margin: 1px;
}
.key:hover {
        background-color:#dfdfdf;
}
.key:active {
        position:relative;
        top:1px;
}
.key-editing {
        background-color:#b4b4b4;
        position:relative;
        top:2px;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

/* Key size and pixel
 * key:         1.00    1.25    1.50    1.75    2.00 
 * size:        50      62.5    75      87.5    100
 * width:       24      36.5    49      61.5    74
 *
 * margin:1 + border:2 +  padding:4 + width:24 + padding:16 + border:2 + margin:1 = 50px
 * width:24 + 26px = 50px
 */
.btn100 { width:24px; }
.btn125 { width:36.5px; }
.btn150 { width:49px; }
.btn175 { width:61.5px; }
.btn200 { width:74px; }
.btn225 { width:86.5px; }
.btn250 { width:99px; }
.btn275 { width:111.5px; }
.btn600 { width:274px; }
.btn625 { width:286.5px; }
.btn700 { width:324px; }

.spc100 { width:24px; visibility:hidden; }
.spc125 { width:36.5px; visibility:hidden; }
.spc150 { width:49px; visibility:hidden; }
.spc175 { width:61.5px; visibility:hidden; }
.spc200 { width 74px; visibility:hidden; }

.clear {
        clear: left;
}

.keyboard {
    width: 1000px;
    overflow: auto;
}

#keycodes {
    font-size:12px;
    font-weight:bold;
    width: 200px;
}

/* http://www.w3schools.com/cssref/css3_pr_resize.asp */
.resizable {
        resize: both;
        overflow: auto;
}