#key_editor
{
width:720px;
position:relative;
text-align:center; 
margin:0 auto; 
}

#kbrd {
display: inline-block;
position:relative;
text-align:center; 
margin:0 auto; 
padding:5px;
-moz-box-shadow: 0 0 8px rgba(0, 0, 0, .5);
-webkit-box-shadow: 0 0 8px rgba(0, 0, 0, .5);
box-shadow: 0 0 8px rgba(0, 0, 0, .5);    
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
background:#ccc;
}

.keyboardEditor{
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;  
border: 1px solid #ccc;
overflow-y:auto;
width: 100%;
padding: 10px;
height:400px;
color:#4F5A8A;
font:normal 28px "Lucida Sans Unicode", "Lucida Grande", "Arial Unicode MS", sans-serif;
width:90%;
}

#kbrd .button{
float:left;
display:block;
margin:2px;	    
font:normal 13px Verdana, Tahoma, Arial, Verdana, Helvetica;
text-decoration:none;
text-align:center;		
border:0;
border-top:1px solid rgba(255,255,255,.45);		
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
-moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
cursor:pointer;
height: 40px;
}

#kbrd .key{width: 40px; font:normal 21px Helvetica, Arial, Verdana;}
#kbrd  #backspace{width: 82px;}
#kbrd  #tab {width: 82px;}
#kbrd  #caps {width: 82px;}
#kbrd  #enter {width: 82px;}
#kbrd  #shift_left, #kbrd  #shift_right {width: 104px;}
#kbrd  #ctrl_left, #kbrd  #ctrl_right {width: 72px;}
#kbrd  #alt_left, #kbrd  #alt_right {width: 72px;}
#kbrd  #spacebar {width: 250px;}

#caps b {
display: block;
background: #ddd;
width: 8px;
height: 8px;
border-radius: 10px;
margin: 9px 0 -10px 10px;
-webkit-box-shadow: 0 -1px 0 #000;
-moz-box-shadow:0 -1px 0 #000;
box-shadow:0 -1px 0 #000;
}

#backspace div, #tab div, #caps div, #backspace div, #enter div, #shift_left div, #shift_right div, #alt_left div, #alt_right div, #ctrl_left div, #ctrl_right div {
margin:0;
text-align: right;
margin: 23px 10px 0 0;
font-size: 8.0pt;
}

#bkspace  {
display:block;
margin-top:17px;
font-size: 8.0pt;
}

#kbrd .silver{    
color:#000; /*3A3D42*/
text-shadow:0 1px -1px #ccc;
background:#ECEDEF;
background-image:-moz-linear-gradient(#f8f8f9, #dddfe1);
background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1));
}

#kbrd .button.silver:hover{
box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
-o-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
cursor:pointer;
}

#kbrd .button.silver:active {
background-image:-moz-linear-gradient(#E2E3E4, #AAADB4);
background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4));
cursor:pointer;
position:relative; top:1px;
}

#kbrd .dark{
color:#ddd;
text-shadow:0 -1px 1px #666;
background:#959CA5;
background-image:-moz-linear-gradient(#A3A6AC, #808287);
background-image:-webkit-gradient(linear, left top, left bottom, from(#A3A6AC), to(#808287));	
font-size: 8.0pt;	
text-align: right;
padding-top:20px;
padding-right:10px;	
}

#kbrd .button.dark:hover{
opacity: 1 !important;
box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
-o-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
-moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
-webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
cursor:pointer;
}

#kbrd .button.dark:active{
background:#ECEDEF;
background-image:-moz-linear-gradient(#A3A6AC, #444);
background-image:-webkit-gradient(linear, left top, left bottom, from(#A3A6AC), to(#444));
cursor:pointer;
position:relative; top:1px;
}

#kbrd .cyan{
	color:#fff;
	text-shadow:0 -1px 1px #333;
	background:#757D8A;
	background-image:-moz-linear-gradient(#00C0FF, #04A8DE);
	background-image:-webkit-gradient(linear, left top, left bottom, from(#00C0FF), to(#04A8DE));	
}


#kbrd .shadow{
	box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 3px;
	-o-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 3px;
	-moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 3px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 3px;
}


#kbrd .button.cyan:hover, #copy_button.hover{
	opacity: 1 !important;
	box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
	-o-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
	-moz-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.75) 0 0 8px 2px;
	cursor:pointer;
}

#kbrd .button.cyan:active, #copy_button.active{
	background:#ECEDEF;
	background-image:-moz-linear-gradient(#00C0FF, #04A8DE);
	background-image:-webkit-gradient(linear, left top, left bottom, from(#00C0FF), to(#04A8DE));
	cursor:pointer;
	position:relative; top:1px;
}

#iWall{
margin:10px auto 10px auto;
padding:6px 4px;
}

.iService{
position:relative;
display:inline;
color:#000000;
background:#fff;
text-shadow:0 1px 0 #fff;
box-shadow:0 0 1px #000;
-moz-box-shadow:0 0 1px #000;
-webkit-box-shadow:0 0 1px #000;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
width:90px;
padding:15px 5px 10px 5px;
cursor:pointer;
text-align:center;
margin:0 2px;
}

.iService:hover{
cursor:pointer;
background:#eee;
}

.iService:active{
cursor:pointer;
position:relative;
top:2px;
}

.iService span {
display: block;
position:absolute;
left:10px;
top:5px;
font:normal 9px tahoma;
color:#888;
text-shadow:0 -1px 0 #fff;
}

.sups{
color:#F875A0;
font:normal 9px arial; 
text-shadow:0 -1px 1px #eee;
top:4px;
left:6px;
position:absolute;
}

.frm{
position:relative;
float:left;
}

#google_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 0; width: 70px; height: 25px; } 
#bing_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -25px; width: 70px; height: 25px; } 
#yahoo_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -50px; width: 70px; height: 25px; } 
#youtube_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -75px; width: 70px; height: 25px; } 
#flickr_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -100px; width: 70px; height: 25px; } 
#wikipedia_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -125px; width: 70px; height: 25px; } 
#twitter_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -150px; width: 70px; height: 25px; } 
#facebook_small{display:inline-block;background:url(https://www.i2symbol.com/mob/css/images/services.png);background-position: 0 -175px; width: 70px; height: 25px; }