* {
margin: 0;
padding: 0;
}
ul ol {
list-style-type: none;
}
#display {
margin: 30px auto 0;
width: 70px;
height: 50;
background: none repeat-x scroll 0 0 #d0d0d0;
}
#keyboard {
margin: 15px auto 0;
width: 794px;
height: 315px;
background: none repeat-x scroll 0 0 #d5d9dc;
-moz-border-radius-topleft: 7px 21px;
-moz-border-radius-topright: 7px 21px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-top-left-radius: 7px 21px;
border-top-right-radius: 7px 21px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding: 50px 0 0 10px;
-webkit-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
-moz-box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
box-shadow: inset 0 0 8px #bbb, 0 1px 0 #aaa, 0 4px 0 #bbb, 0 10px 30px #ddd;
}
#keyboard ul {
list-style-type: none;
width: 784px;
margin: 0 auto;
}
#keyboard li {
float: left;
}
#keyboard ul, ol {
padding: 0px;
margin: 0;
}
/*!
* less-keyboard v1.0.0 (http://emalherbi.github.io/less-keyboard/)
* Copyright 2015-2015 emalherbi
* Licensed under MIT (http://en.wikipedia.org/wiki/MIT_License)
*/
/* key */
.key {
display: block;
color: #aaaaaa;
font: bold 9pt arial;
text-decoration: none;
text-align: center;
width: 44px;
height: 41px;
margin: 5px;
background: #eff0f2;
-moz-border-radius: 4px;
border-radius: 4px;
border-top: 1px solid #f5f5f5;
-webkit-box-shadow: inset 0 0 25px #e8e8e8,
0 1px 0 #c3c3c3,
0 2px 0 #c9c9c9,
0 2px 3px #333;
-moz-box-shadow: inset 0 0 25px #e8e8e8,
0 1px 0 #c3c3c3,
0 2px 0 #c9c9c9,
0 2px 3px #333;
box-shadow: inset 0 0 25px #e8e8e8,
0 1px 0 #c3c3c3,
0 2px 0 #c9c9c9,
0 2px 3px #333;
text-shadow: 0px 1px 0px #f5f5f5;
}
.key:active {
color: #888;
background: #ebeced;
margin: 7px 5px 3px;
-webkit-box-shadow: inset 0 0 25px #ddd,
0 0 3px #333;
-moz-box-shadow: inset 0 0 25px #ddd,
0 0 3px #333;
box-shadow: inset 0 0 25px #ddd,
0 0 3px #333;
border-top: 1px solid #eee;
}
.key > span,
.key > b {
background: inherit;
}
/* fn */
.fn {
height: 26px;
width: 46px;
}
.fn > span {
display: block;
text-align: right;
margin: 14px 5px 0 0;
font: bold 6pt arial;
text-transform: uppercase;
}
/* esc */
.esc {
height: 26px;
width: 46px;
}
.esc > span {
display: block;
text-align: right;
margin: 6px 15px 0 0;
font-size: 7.5pt;
text-transform: lowercase;
}
/* numbers */
.number > span {
display: block;
}
.number > b {
margin: 3px 0 3px;
display: block;
}
.number.alt > b {
display: block;
margin: 0 0 3px;
}
/* delete */
.delete {
width: 72px;
}
.delete > span {
display: block;
text-align: right;
margin: 23px 10px 0 0;
font-size: 7.5pt;
text-transform: lowercase;
}
/* qwerty, asdfg, zxcvb */
.qwerty > span,
.asdfg > span,
.zxcvb > span {
display: block;
margin: 13px 0 0;
text-transform: uppercase;
}
.qwerty > b,
.asdfg > b,
.zxcvb > b {
display: block;
margin: 3px 0 0;
}
.qwerty.alt > span,
.asdfg.alt > span,
.zxcvb.alt > span {
text-transform: lowercase;
}
.asdfg.alt > span,
.zxcvb.alt > span {
margin: 0;
}
.qwerty.alt > span {
margin: 2px 0 0;
}
.zxcvb.alt > b {
margin: 4px 0 0;
}
/* tab */
.tab {
width: 72px;
}
.tab > span {
display: block;
text-align: left;
margin: 23px 0 0 10px;
font-size: 7.5pt;
text-transform: uppercase;
}
/* caps */
.caps {
width: 85px;
}
.caps > b {
display: block;
background: #999;
width: 4px;
height: 4px;
border-radius: 10px;
margin: 9px 0 0 10px;
-webkit-box-shadow: inset 0 1px 0 #666;
-moz-box-shadow: inset 0 1px 0 #666;
box-shadow: inset 0 1px 0 #666;
}
.caps > span {
display: block;
text-align: left;
margin: 10px 0 0 10px;
font-size: 7.5pt;
text-transform: lowercase;
}
/* enter */
.enter {
width: 85px;
}
.enter > span {
display: block;
text-align: right;
margin: 23px 10px 0 0;
font-size: 7.5pt;
}
/* shift */
.shiftleft,
.shiftright {
width: 112px;
}
.shiftleft > span,
.shiftright > span {
display: block;
font-size: 7.5pt;
text-transform: lowercase;
}
.shiftleft > span {
text-align: left;
margin: 23px 0 0 10px;
}
.shiftright > span {
text-align: right;
margin: 23px 10px 0 0;
}
/* bottomrow */
.bottomrow {
height: 49px;
}
.bottomrow.fn {
height: 49px;
}
.bottomrow.fn > span {
display: block;
font-size: 7.5pt;
margin: 31px 0 0 5px;
text-transform: lowercase;
text-align: left;
}
.bottomrow.optionleft,
.bottomrow.optionright {
width: 46px;
}
.bottomrow.optionleft > span,
.bottomrow.optionright > span {
display: block;
font-size: 7.5pt;
text-transform: lowercase;
}
.bottomrow.commandleft,
.bottomrow.commandright {
width: 67px;
}
.bottomrow.commandleft > span,
.bottomrow.commandright > span {
display: block;
font-size: 7.5pt;
text-transform: lowercase;
}
.bottomrow.optionleft > span,
.bottomrow.commandleft > span {
margin: 31px 0 0 5px;
text-align: left;
}
.bottomrow.optionright > span,
.bottomrow.commandright > span {
margin: 31px 5px 0 0;
text-align: right;
}
.bottomrow.spacebar {
width: 226px;
}
.bottomrow.control {
width: 54px;
}
.bottomrow.control > span {
display: block;
font-size: 7.5pt;
margin: 31px 0 0 5px;
text-transform: lowercase;
text-align: left;
}
/* up, down, left, right */
.down {
height: 23px;
margin: 0 5px 5px;
}
.down:active {
margin: 3px 5px 4px;
}
.up {
height: 24px;
margin: 5px 5px 1px;
}
.up:active {
margin: 8px 5px -2px;
}
.down,
.up {
border-bottom-right-radius: 0px;
border-bottom-left-radius: 0px;
}
.left,
.right {
height: 24px;
margin: 30px 5px 5px;
}
.left:active,
.right:active {
margin: 32px 5px 3px;
}
.cf {
zoom: 1;
}
.cf:before,
.cf:after {
content: "";
display: table;
}
.cf:after {
clear: both;
}