#virtualKeyboard {
    width: 100%;
	color:darkblue;
    text-align: left;
	font-size:9px; font-family:Arial Unicode MS;font-weight:normal;
	overflow:hidden;
	
    /*background-color:#7b8490;*/
    /*border-top:3px solid #000;*/
}

#keyboard{
   
    width:340px;
    margin: 6px;
    height:288;
    display:block;
    position:center;
	position: fixed;
	z-index:9999;
    bottom:2px; left:2px;
	border:1px solid red;

/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U1N2ZlNyIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM2JSIgc3RvcC1jb2xvcj0iI2NiNzRkNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijg0JSIgc3RvcC1jb2xvcj0iI2E5NjViZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(229,127,231,0) 0%, rgba(203,116,213,1) 36%, rgba(169,101,190,1) 84%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(229,127,231,0)), color-stop(36%,rgba(203,116,213,1)), color-stop(84%,rgba(169,101,190,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(229,127,231,0) 0%,rgba(203,116,213,1) 36%,rgba(169,101,190,1) 84%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(229,127,231,0) 0%,rgba(203,116,213,1) 36%,rgba(169,101,190,1) 84%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(229,127,231,0) 0%,rgba(203,116,213,1) 36%,rgba(169,101,190,1) 84%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(229,127,231,0) 0%,rgba(203,116,213,1) 36%,rgba(169,101,190,1) 84%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00e57fe7', endColorstr='#a965be',GradientType=0 ); /* IE6-8 */

	
	
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2EwZTg3ZSIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM2JSIgc3RvcC1jb2xvcj0iIzcwYzQ1MSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijc3JSIgc3RvcC1jb2xvcj0iIzM5OWExZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top,  rgba(160,232,126,0) 0%, rgba(112,196,81,1) 36%, rgba(57,154,30,1) 77%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(160,232,126,0)), color-stop(36%,rgba(112,196,81,1)), color-stop(77%,rgba(57,154,30,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(160,232,126,0) 0%,rgba(112,196,81,1) 36%,rgba(57,154,30,1) 77%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(160,232,126,0) 0%,rgba(112,196,81,1) 36%,rgba(57,154,30,1) 77%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(160,232,126,0) 0%,rgba(112,196,81,1) 36%,rgba(57,154,30,1) 77%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(160,232,126,0) 0%,rgba(112,196,81,1) 36%,rgba(57,154,30,1) 77%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a0e87e', endColorstr='#399a1e',GradientType=0 ); /* IE6-8 */


 }
#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:22px; height:29px;
    background-color:#fff;
    position:relative;
    float:left;
    margin-right:9px;
    margin-top:5px;
	margin-bottom:5px;
    cursor:pointer;
    font-size:2.2em;
	border: 1px solid red ;
    /*box shadow*/
    -webkit-box-shadow: 0px 1px 3px #000000;-moz-box-shadow: 0px 1px 3px #000000;box-shadow: 0px 1px 3px #000000;
    /*box radius*/
    -moz-border-radius: 5px;border-radius: 5px;
    /*gradient*/
    background: #ffffff; /* old browsers */
    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 */
}
.buttonDown {background:none;background-color: #c9cdd5; -webkit-box-shadow:none;-moz-box-shadow: none;box-shadow: none;}
.button_a {margin-left:5px;}
.button_ae {margin-left:5px;margin-top:-34px;}
.button_umlaute {margin-top:-34px;}
.button_q {margin-left:5px;}
.button_y {margin-left:5px;}
.button_dash {margin-left:6px;display:none;}
.button_underscore {margin-left:6px;display:none}
.button_enter {width:90px;height:67px;  font-size:1.3em; }
.button_del{width:25px; text-align:center;background:url(../images/backspace.png) no-repeat center ; background-color: #FFF }
.button_smallletter{font-size:1.3em;}
.button_capitalletterleft{font-size:1.3em;}
.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 {width:120px;margin-top:-34px; font-size:1.3em;margin-left:0px;}
.button_symbolsleft{width:172px; font-size:1.3em; margin-left:26px;display:none}
.button_symbolsright{width:129px; font-size:1.3em;display:none;}


.key {width:100%; height:100%; text-align:center; margin-top:-1px;padding-right:12px; padding-top:0px; text-shadow: 0px 1px 1px #ffffff;filter: dropshadow(color=#ffffff, offx=0, offy=1);}
.key_del {padding-top:4px}
.key_enter {padding-top:20px;}
.key_smallletter {padding-top:4px;}
.key_capitalletterleft {padding-top:4px;}
.key_capitalletterright {padding-top:4px;}
.key_number {padding-top:4px;}
.key_symbols {padding-top:4px;}
.key_space {padding-top:5px;}

.button:hover {
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 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}