html * { font-family:helvetica, arial, sans-serif; } .key, .key-nc { -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: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 { 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 unit and pixel * key unit: 1.00 1.25 1.50 1.75 2.00 * px: 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 | * +---------------------------+ * width/height:25 + (margin:0 + border:2 + padding:4 + padding:16 + border:2 + margin:1) = 50px */ .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 */ .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 { display: inline-block; } .keyboard-outline { } .keyboard-pane { font-size: 14px; font-weight:bold; } .action { font-size:16px; font-weight:bold; min-width: 30px; } .keycode_tabs { max-width: 750px; overflow: auto; font-size:14px; font-weight:bold; } /* http://www.w3schools.com/cssref/css3_pr_resize.asp */ .resizable { resize: both; overflow: auto; }