html * {
    font-family:helvetica, arial, sans-serif;
}

.key, .keync {
    box-shadow:inset -3px -3px 2px 5px #ebebeb;
    background-color:#ffffff;
    border-radius:6px;
    border:2px solid #dcdcdc;
    display:inline-block;
    float: left;
    color:#777777;
    font-family:helvetica, arial, sans-serif;
    font-size:16px;
    font-weight:bold;
    text-decoration:none;
    padding:4px 16px 16px 4px;
    width: 25px;
    height: 25px;
    overflow: hidden;
    margin: 0px 1px 1px 0px;
    white-space: normal;
}
.key:hover {
    box-shadow:inset -3px -3px 2px 5px #cfcfcf;
    position:relative;
    top:2px;
}
.key:active {
}
.key:focus {
}
.key-editing {
    box-shadow:inset -3px -3px 2px 5px #cfcfcf;
    position:relative;
    top:2px;
    background-color:#efefef;
    border:2px solid #7f7f7f;
}
/* This imageless css button was generated by CSSButtonGenerator.com */

/* Key unit and pixel
 *
 * key unit:    1.00    1.25    1.50    1.75    2.00 
 * width:       25      37.5    50      62.5    75
 * overall:     50      62.5    75      87.5    100
 *
 * Key CSS Metrics
 * +---------------------------+
 * | margin                    |
 * | +-----------------------+ |
 * | |border    2            | |
 * | | +-------------------+ | |
 * | | |padding 4          | | |
 * | | | +--------------+  | | |
 * |0|2|4|width x height|16|2|1|
 * | | | +--------------+  | | |
 * | | |        16         | | |
 * | | +-------------------+ | |
 * | |          2            | |
 * | +-----------------------+ |
 * |            1              |
 * +---------------------------+
 * margin:1 + border:4 +  padding:20 = 25px
 */
.btn100 { width:25px; }     /* 50       - 25 */
.btn125 { width:37.5px; }   /* 62.5     - 25 */
.btn150 { width:50px; }     /* 75       - 25 */
.btn175 { width:62.5px; }   /* 87.5     - 25 */
.btn200 { width:75px; }     /* 100      - 25 */
.btn225 { width:87.5px; }   /* 112.5    - 25 */
.btn250 { width:100; }      /* 125      - 25 */
.btn275 { width:112.5px; }  /* 137.5    - 25 */
.btn600 { width:275px; }    /* 300      - 25 */
.btn625 { width:287.5px; }  /* 312.5    - 25 */
.btn700 { width:325px; }    /* 350      - 25 */
.btn750 { width:350px; }    /* 375      - 25 */

.spc050 { width:0px; visibility:hidden; }
.spc075 { width:12.5px; visibility:hidden; }
.spc100 { width:25px; visibility:hidden; }
.spc125 { width:37.5px; visibility:hidden; }
.spc150 { width:50px; visibility:hidden; }
.spc175 { width:62.5px; visibility:hidden; }
.spc200 { width:75px; visibility:hidden; }

.keyboard-row {
    width: auto;
    display: inline-block;
}

.keyboard-outline {
}

.keyboard-pane {
    width: 750px;
    font-size: 14px;
    font-weight:bold;
}



.action {
    font-size:16px;
    font-weight:bold;
    min-width: 30px;
}

.keycode_tabs {
    width: 750px;
    overflow: auto;
    font-size:14px;
    font-weight:bold;
}



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