html,
body {
  height: 100%;
  width: 100%;
  overflow: auto;
}

#softkey {
	position:fixed;
	z-index:1050;
	width:100%;
	bottom:-200px;
	left:0px;
	-webkit-backface-visibility:hidden;
/*	-webkit-transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
	transition: all cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;*/
}

#softkey.active {
	bottom:0px;
}

#softkey .chrome {
	width:100%;
	height:100%;
    background: rgba(173, 174, 179, 0.8) none;
	border-top: 4px solid rgba(0,0,0,0.8);
	-webkit-box-shadow: inset 0 1px 0 #bfbfbf;
	box-shadow: inset 0 1px 0 #bfbfbf;
	padding:8px;
}

#softkey .keyscontainer {
	position:relative;
	max-width:960px;
	margin:auto;
}

#softkeytoggle {
	position:absolute;
	top:-50px;
	right:0px;
	height:40px;
	width:100px;

    background: rgba(0,0,0,0.8);
	border-radius:5px 5px 0px 0px;
	-webkit-border-radius:5px 5px 0px 0px;
	-moz-border-radius:5px 5px 0px 0px;

	cursor: pointer;
	text-align:center;
	padding-top:0;
    border-bottom: none;
}

#softkey .keycell1 {
	float:left;
	width:25%;
	padding-bottom:0.5em;
}
#softkey .keycell2 {
	float:left;
	width:50%;
	padding-bottom:0.5em;
}

#softkey .key {
	cursor: pointer;
	background: #eeeef0;
	background: -webkit-gradient(linear,left top,left bottom,color-stop(0,#eeeef0),color-stop(1,#d3d3d9));
	background: -webkit-linear-gradient(top,#eeeef0 0,#d3d3d9 100%);
	background: -moz-linear-gradient(top,#eeeef0 0,#d3d3d9 100%);
	background: -o-linear-gradient(top,#eeeef0 0,#d3d3d9 100%);
	background: -ms-linear-gradient(top,#eeeef0 0,#d3d3d9 100%);
	background: linear-gradient(top,#eeeef0 0,#d3d3d9 100%);
	height: 40px;
	text-align: center;
	font-size: 20px;
	font-family: "Times New Roman", Symbola, serif;
	font-weight:400;
	text-shadow: 0 1px 0 #fff;
	border: 1px solid #58575e;
	-webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.15),inset 0 1px 0 #fff;
	box-shadow: 0 2px 2px rgba(0,0,0,0.25),inset 0 -1px 0 rgba(0,0,0,0.15),inset 0 1px 0 #fff;
	-webkit-border-radius: 6px;
	border-radius: 6px;
	color: #3d3d3d;
	text-decoration: none;
	margin: auto 1px;
	padding:5px 0px 0px 0px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#softkey .key:active {
	cursor: pointer;
	background: #eeeef0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#fafafc),color-stop(1,#d3d3d9));
	background: -webkit-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: -moz-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: -o-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: -ms-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
}

#softkey .key:touchstart {
	background: #eeeef0;
	-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.25);
	background: -webkit-gradient(linear,left bottom,left top,color-stop(0,#fafafc),color-stop(1,#d3d3d9));
	background: -webkit-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: -moz-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: -o-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: -ms-linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
	background: linear-gradient(bottom,#fafafc 0,#d3d3d9 100%);
}

#softkey .keyblack {
    background: #000000;
    background: -webkit-gradient(none);
    background: -webkit-linear-gradient(none);
    background: -moz-linear-gradient(none);
    background: -o-linear-gradient(none);
    background: -ms-linear-gradient(none);
    background: linear-gradient(none);
    text-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    -webkit-border-radius: 6px;
    border: none;
    color: #ffffff;
}

.simulatedCursor {
	position:absolute;
    /*
	top:0px;
	left:0px;
    */
	border-right:1px solid #000;
	width:4px;
	height:22px;
}

.focussedElement {
    -webkit-appearance: none;
    -webkit-box-shadow: #68b4df 0 0 3px 2px;
    -moz-box-shadow: #68b4df 0 0 3px 2px;
    box-shadow: #68b4df 0 0 3px 2px;
}

#softkey .keyblack:hover, .keyblack:focus, .keyblack:active, .keyblack.active, .keyblack.disabled, .keyblack[disabled] {
    background: #000000;
}