#recoreKeyboard {
    width: 100%;
    text-align: center;
}

#keyboard {
    padding: 10px;
    max-width: 660px;
    margin: 0 auto;
    height: auto;
    display: block;
    bottom: 0;
    left: 0;
}

#keyboard:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

#keyboardHeader {
    position: relative;
}

#keyboardHeader div {
    color: #fff;
    background-color: #7b8490;
    padding: 3px;
    padding-left: 15px;
    padding-right: 15px;
    position: absolute;
    cursor: pointer;
    right: -10px;
    top: -40px;
}

.closex {
    font-weight: bolder;
    color: #000;
}

#keyboardCapitalLetter {
    display: none;
}

#keyboardSmallLetter {
    display: block;
}

#keyboardNumber {
    display: none;
}

#keyboardSymbols {
    display: none;
}

.button {
    width: 7%;
    height: 50px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin-right: 1%;
    margin-top: 10px;
    cursor: pointer;
    font-size: 14px;
    text-transform: uppercase;

    /*box shadow*/
    -webkit-box-shadow: 0 1px 3px #000000;
    -moz-box-shadow: 0 1px 3px #000000;
    box-shadow: 0 1px 3px #000000;
    /*box radius*/
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*gradient*/
    background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(100%, #e5e5e5)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e5e5e5', GradientType=0); /* ie */
}

.button:hover, .textarea:focus {
    border-color: rgba(82, 168, 236, 0.8);
    outline: 0;
    outline: thin dotted 9;
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 0 3px rgba(82, 168, 236, 0.6), 0 1px 3px #000000;
    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 0 3px rgba(82,168,236,0.6), 0 1px 3px #000000;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 0 3px rgba(82, 168, 236, 0.6), 0 1px 3px #000000;
}

.buttonDown {
    background: none;
    background-color: #c9cdd5;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

.button_a {
    margin-left: 26px;
}

.button_dash {
    margin-left: 26px;
}

.button_underscore {
    margin-left: 26px;
}

.button_enter {
    width: 14%;
}

.button_del {
    width: 14%;
}

.button_smallletter {
    font-size: 1.3em;
}

.button_capitalletterleft {
    font-size: 1.3em;
    display: none;
}

.button_capitalletterright {
    width: 129px;
    font-size: 1.3em;
}

.button_numberleft {
    width: 172px;
    font-size: 1.3em;
    margin-left: 26px;
    display: none
}

.button_numberright {
    width: 129px;
    font-size: 1.3em;
    display: none
}

.button_space {
    max-width: 376px;
    width: 50%;
}

.button_symbolsleft {
    width: 172px;
    font-size: 1.3em;
    margin-left: 26px;
    display: none
}

.button_symbolsright {
    width: 129px;
    font-size: 1.3em;
    display: none
}

.textarea {
    width: 90%;
    height: 120px;
    font-family: arial;
    font-size: 14px;
    background-color: #fff;
    padding: 8px;
}

hr {
    border: 1px dashed #fff;
    margin: 24px 0;
}

.key {
    width: 100%;
    height: calc(100% - 14px);
    text-align: center;
    padding-top: 14px;
    text-shadow: 0 1px 1px #ffffff;
    filter: dropshadow(color=#ffffff, offx=0, offy=1);
}

.button_space > .key {
    display: flex;
    width: 84px;
    margin: 0 auto;
    height: 100%;
    text-align: center;
    align-items: center;
    padding: 0;
}

.key.a, .key.b, .key.c, .key.d, .key.e,
.key.f, .key.g, .key.h, .key.i, .key.k,
.key.l, .key.m, .key.n, .key.o, .key.p,
.key.r, .key.s, .key.t, .key.u, .key.v,
.key.w, .key.y, .key.j, .key.z, .key.q,
.key.x{
    height: 13px;
    padding-top: 0;
    padding-bottom: 40px;
    line-height: 14px;
    text-align: left;
    background-size: 50% !Important;
    background-position: center center;
    background-repeat: no-repeat;
    text-transform: uppercase;
    font-size: 12px;
    color: #990000;
    font-weight: bold;
    text-indent: 3px;
    font-family: arial;
}


.key.a { background-image: url('../img/A.png'); }
.key.b { background-image: url('../img/B.png'); }
.key.c { background-image: url('../img/C.png'); }
.key.d { background-image: url('../img/D.png'); }
.key.e { background-image: url('../img/E.png'); }
.key.f { background-image: url('../img/F.png'); }
.key.g { background-image: url('../img/G.png'); }
.key.h { background-image: url('../img/H.png'); }
.key.i { background-image: url('../img/I.png'); }
.key.k { background-image: url('../img/K.png'); }
.key.l { background-image: url('../img/L.png'); }
.key.m { background-image: url('../img/M.png'); }
.key.n { background-image: url('../img/N.png'); }
.key.o { background-image: url('../img/O.png'); }
.key.p { background-image: url('../img/P.png'); }
.key.r { background-image: url('../img/R.png'); }
.key.s { background-image: url('../img/S.png'); }
.key.t { background-image: url('../img/T.png'); }
.key.u { background-image: url('../img/U.png'); }
.key.v {background-image: url('../img/V.png'); }
.key.w { background-image: url('../img/W.png'); }
.key.y { background-image: url('../img/Y.png'); }
.key.j {background-image: url('../img/J.png'); }
.key.z { background-image: url('../img/Z.png'); }
.key.q { background-image: url('../img/Q.png'); }
.key.x { background-image: url('../img/X.png'); }


div[class*='key_'] {
    height: calc(100% - 17px);
    padding-top: 17px;
}