#keyboard{
	margin:12px;
}
.row{
	clear:both;
	width:867px; height:52px;
	margin:0 auto;
}
.key {
	float:left;
	position:relative;
	border-radius:4px;
	width:48px; height:45px;
	margin:4px; padding:0 1px 1px 0;
	background: rgba(255, 255, 255, 0.2);
	/*background: -moz-linear-gradient(100% 100%, 0 0, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)));*/

	-webkit-box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.5)
		, 1px 1px 3px 0px rgba(0, 0, 0, 0.5);
	/*box-shadow: inset 0px 0px 1px 1px rgba(255, 255, 255, 0.5);*/
	box-shadow: 1px 2px 6px 1px rgba(0, 0, 0, 0.4)
		, inset 0px 0px 4px 2px rgba(255, 255, 255, 0.3);

	color:rgba(0, 0, 0, 1);
	text-shadow:1px 1px 0px rgba(255, 255, 255, 0.7);
}
	div.key.pressed{ 
		background:rgba(170, 170, 170, 0.1);
		-webkit-box-shadow: inset -1px -1px 6px 1px rgba(0, 0, 0, 0.2)
			, -1px -1px 0px 0px rgba(0, 0, 0, 0.3);
		box-shadow: inset -1px -1px 6px 1px rgba(0, 0, 0, 0.2)
			, -1px -1px 0px 0px rgba(0, 0, 0, 0.3);
		padding:1px 0 0 1px;
		text-shadow:1px 1px 0px rgba(255, 255, 255, 0.3);
	}
.level1{
	position:absolute;
	right:6px;
	bottom:4px;
	font-size:1.15em;
	line-height:1;
}
div.pressed .level1{right:7px; bottom: 5px;}

.level2, .level3, .level4 {
	position: absolute;
	top: 2px;
	font-size: 0.9em;
	line-height: 1;
}
.level2 {right: 6px;}
div.pressed .level2{right: 7px; top: 1px;}

.level3 {left: 18px;}
div.pressed .level3{left: 17px; top: 1px;}

.level4 {left: 4px;}
div.pressed .level4{left: 3px; top: 1px;}

.keylabel{
	position:absolute;
	bottom:4px;
	left:4px;
	font-family:sans-serif;
	font-style:italic;
	font-size:x-small;
	line-height: 1;
	color:#999;
}
div.pressed .keylabel{bottom:5px; left: 3px;}

.vowel { 
	background: rgba(255, 255, 176, 0.3);
	/*background: -moz-linear-gradient(100% 100%, 0 0, from(rgba(255, 255, 176, 0.3)), to(rgba(255, 255, 176, 0.2)));*/
}

/* special widths */
#backspace{ width: 117px;}
#leftctrl, #rightctrl, #backslash { width: 82px;}
#tab { width: 83px;}
#capslock{ width: 98px;}
#enter{ width: 124px;}
#leftshift, #rightshift{ width: 139px;}
#spacebar{ width: 300px;}
#leftwin, #rightwin, #leftalt, #rightalt, #contextmenu{ width: 66px; }
#spacebarrow{ padding-bottom:4px;}

#x .plain, #hyphen .plain, #d .plain {display:block;}
#x .shifted, #hyphen .shifted, #d .shifted{display:none;}

/*.labels_off .keylabel{display:none;}*/

.white .key{ background-color: #ffffff; } 
.white .vowel{ background-color: rgba(255, 255, 176, 0.3); }

.black .key{ background-color: #444; color: #eee; text-shadow:none;} 
.black .keylabel{ color:#999; }

/*
.white .key{ background-color: #333;
	color: #eee;
	text-shadow:1px 1px 0px rgba(0, 0, 0, 0.7);
}
.white .keylabel{ color:#999; }
.white .vowel{ background-color: rgba(33, 33, 11, 0.8);
*/