div#wpvrk_keyboard_main_wrapper { 
	display: block;
	margin: 0 auto;
	position: relative;
	width: 684px;
	margin-bottom:50px;
}

div#keyboard ul.cf li a, div#keyboard ul.cf li a:hover { text-decoration:none !important;cursor:pointer !important; color:#990033 !important; }
	
div#areawrapper {
	margin: 15px auto 0;
	width: 680px;
	height: 215px;
	position:relative;
	text-align:center;
}

div#wpvrk_keyboard_main_wrapper div#areawrapper textarea#area.resizable {
	border: 1px solid #CCCCCC;
	height: 190px;
	width: 670px;
	font-size:20px;	
	text-align:right;
}

#keyboard {
	margin: 1px auto 0;
	width: 680px;
	height: 290px;
	background:	#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: 30px 0 0 4px;
	
	-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;}

div#keyboard ul.cf  {
	list-style-type: none; 
	width: 685px; 
	margin: 0 auto;
}

div#keyboard ul.cf li {
	float: left;        
    margin: 0;
    padding: 0; 
	list-style-type: none !important;  
}

#to-search {
  background: none repeat scroll 0 0 #FFF9D7;
  border: 1px solid #E2C822;
  cursor: pointer;
  display: none;
  padding: 2px 4px;
  position: absolute;
  right: 6px;
  text-shadow: 0 1px 0 #FFFFFF;
  top: 45px;
  z-index: 5;
  max-width:325px;
}

#ssg {
	  float: left;
	  font-family: tahoma;
	  font-size: 16px;
	  position: relative;
	  top: 1px;
}


div#wpvrk_keyboard_main_wrapper div#details h3 {
	float: left;
	width: 300px;
}

 

.key{
	display: block;
	position:relative;
	color: #903;
	/*z-index:99999;*/
	font: 18px arial;
	text-decoration: none;
	text-align: center;
	width: 37px;
	height: 33px;
	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, .keydown {
	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;}
	
.fn span {
	display: block;
	margin: 14px 5px 0 0;
	text-align: right;
	font: bold 6pt arial;
}
	
#esc {
	margin: 6px 15px 0 0;
	font-size: 7.5pt;
}


#numbers li a span {
	display: block;
	color:#aaa;
	z-index:-999;
	font-size:11px;
}
	
#numbers li a b {
	margin: 3px 0 3px;
	display: block;
}

#numbers li .alt b {
	display: block;
	margin: 0 0 3px;
}

#numbers li #delete span {
	text-align: right;
	margin: 16px 4px 0 0;
}

ul#qwerty.additional li a.key	{
	height: 31px;
	padding-top: 3px;
}

#qwerty li a span {
	text-transform:uppercase;
	display: block;
	margin: 0px 0 0;
	font-size: 8px;
	color:#aaa;		height: 8px;
}
	
#qwerty li #tab span {
	text-align: left;
	margin: 12px 0 0 10px;
	text-transform:none;
        font-size: 11px;
}	

#qwerty li .alt b {
	display: block; 
	margin: 3px 0 0;
}

#qwerty li .alt span {
	margin: 2px 0 0;
}


#asdfg li a span {
	display: block;
	text-transform:uppercase;
	margin: 0px 0 0;
	font-size: 8px;color:#aaa;
}

#asdfg li .alt span {
	margin: 0;
}
#asdfg li .alt b {
	display: block; 
	margin: 3px 0 0;
}

#asdfg li #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;
}

#asdfg li #caps span {
	font-size: 11px;
	margin: 10px 0 0 10px;
	text-align: left;
	text-transform: none;
}
	
ul#bottomrow.cf li a.key {
	height: 31px;
	padding-top: 3px; 
	font-family: Arial Unicode MS;
}
	
	
#asdfg li #enter span {
	text-align: right;text-transform:none;
	margin: 15px 10px 0 0;
	font-size: 11px;color:#aaa;
}


#zxcvb li a span {
	display: block;
	margin: 0px 0 0;
	font-size: 8px;
	text-transform:uppercase;
	color:#aaa;
}

#zxcvb li .shiftleft span {
	text-align: left;
	text-transform:none;
	margin: 4px 0 0 10px;
	font-size: 11px;color:#aaa;
}

#zxcvb li .shiftright span {
	color: #AAAAAA;
	font-size: 11px;
	margin: 16px 10px 0 0;
	text-align: right;
	text-transform: none;
}

#zxcvb li .alt b {
	display: block;
	margin: 4px 0 0;
}

#zxcvb li .alt span {
	margin: 0;
}

	
#bottomrow li #fn span, #bottomrow li #control span, #bottomrow li #optionleft span, #bottomrow li #commandleft span {
	display: block;
	text-align: left;
	margin: 31px 0 0 8px;
	font-size: 12px;
	color:#aaa;
}

#bottomrow li #optionright span, #bottomrow li #commandright span {
	display: block;
	text-align: right;
	margin: 31px 8px 0 0;
	font-size: 12px;
	color:#aaa;
}

#bottomrow ol li #left span, #bottomrow ol li #right span, #bottomrow ol li #up span, #bottomrow ol li #down span {
	display: block;
	margin: 9px 0 0;
}

.fn {
	height: 26px; 
	width: 46px;
}

#delete {
	width: 55px;
}

#tab {
	width: 54px;
}

#caps {
	width: 65px;
}

#enter {
	width: 73px;
}

.shiftleft, .shiftright {
	width: 92px;
}

#fn, #control, .option, .command, #spacebar {
	height: 49px;
}

#control {
	width: 56px;
}

.option {
	width: 46px;
}
.command {
	width: 67px;
}

#spacebar {
	width: 288px;
}

#left img, #up img, #down img, #right img {border: none;}
div#keyboard ul ol {list-style-type: none;}
#down {height: 23px;}
#up, #left, #right {height: 24px;}
#left, #right {margin: 30px 5px 5px;}
#left:active, #right:active {margin: 32px 5px 3px;}
#up {margin: 5px 5px 1px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;}
#up:active {margin: 8px 5px -2px;}
#down {margin: 0 5px 5px; border-top-left-radius: 0px; border-top-right-radius: 0px;}
#down:Active {margin: 3px 5px 4px;}


div#keyboard ul, ol {padding: 0px; margin: 0;}
	
        /* For modern browsers */
.cf:before, .cf:after {content:""; display:table;}
.cf:after {clear:both;}

/* For IE 6/7 (trigger hasLayout) */
.cf {zoom:1;}
		
ul#qwerty.additional { 
	padding-left: 81px;
	width: 683px;
}

div#details {
 clear: both;
 height: 85px;
 width: 680px;
}


/* *******************  SETTINGS PAGE STYLES ***************** */
.wpakp-wrapper {
	margin: 4px 15px 0 15px;
}

#icon-keyboard {
	background: url(../images/keyboard-icon.png) no-repeat scroll 0 0 transparent;
	float: left;
	height: 35px;
	margin: 7px 8px 0 0;
	width: 35px;	
}

div.wpakp-wrapper h2 {
	color: #464646;
	font-family: "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",sans-serif;
	font-size: 23px;
	line-height: 29px;
	padding: 9px 15px 4px 0;
	font-weight:normal;

}
div#wpwrap div#wpcontent div#wpbody div#wpbody-content div.wpakp-wrapper div.updated, div.error {
  margin: 5px 15px 2px 2px;
}


 div#adminmenumain div#adminmenuwrap ul#adminmenu li#toplevel_page_wpavk_admin div.wp-menu-image.dashicons-before img { 
	 padding: 0 !important; 
} 
