/*
	Plugin Name: WP Arabic Virtual Keyboard
	Plugin URI: https://webexplorar.com/wordpress-plugins/wordpress-arabic-virtual-keyboard-plugin/
	Description: Make it very easy to type using this virtual keyboard without any 3rd party Software or Web sites.Really easy to type in Arabic language.You can search something in Google or Youtube by using this keyboard.If your keyboard is not working, or you can type in mobile phone easy using this virtual keyboard.Use <strong>[wp-arabic-virtual-keyboard]</strong> shortcode to display the keyboard any place.
	Author: Sumith Harshan
	Author URI: https://webexplorar.com/wordpress-plugins/wordpress-arabic-virtual-keyboard-plugin/
	Version: 4.1
*/	
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; 
}