// ::selection{background-color:none; color:inherit;}

body{
//  background-color: #14B524; 
}

q4 { width: 50%; height: 50%; float: left;}
#yv{ background: #333; border-radius:2px 0px 0px 0px}
#yo{ background: #333; text-align:center; border-radius:0px 2px 0px 0px}
#you{ background: DarkMagenta; text-align:center; border-radius:0px 2px 0px 0px}
#av{ background: #333; border-radius:0px 0px 0px 2px}
#ao{ background: #333; text-align:center; border-radius:0px 0px 2px 0px}
#aou{ background: DarkMagenta; text-align:center; border-radius:0px 0px 2px 0px}

.keyboard{
  width: 614px; height: 210px;
  background-color: #111;
//  margin: 0px auto;	// auto keskittää sivusuunnassa
  margin: 0px;
  border-radius: 9px;
  padding: 30px;
  color: #eee;
}

.key{
  width: 40px; height:40px;
  display:block;
  background-color:#333;
  text-align: left;
  padding-left: 8px;
  line-height: 29px;
  border-radius:2px;
  float:left; margin-left: 2px;
  margin-bottom:2px;
  cursor: pointer;
  transition: box-shadow 0.7s ease;
}

spank {
  margin: 2px;
  padding: 0px;
  width: 62px;
  height: 40px;
  background-color: #333;
  border-radius:2px;
  display: inline-block;
}

.section-a{width:650px; height:260px; float:left;}
.section-b{width:150px; height:260px; float:left;}
.section-num{width:150px; height:180px; float:left;}

.function{font-size: 12px; width:30px; height:30px; margin-bottom:15px;}
.small{font-size:10px; line-height:13px; text-align: center; padding:0 5px; padding-top:2px; height:28px !important;}
.space1{margin-right: 43px !important;}
.space2{margin-right: 25px !important;}
.dual {font-size: 14px; line-height: 20px; width:30px; }
.backspace {width:84px; font-size: 12px; text-align: center;}
.tab {width: 50px; line-height: 18px; font-size:13px;}
.letter{width:30px;}
.slash{width:64px; text-align: center;}
.caps{width:60px; font-size:12px; line-height:18px;}
.enter{width:62px; line-height:40px; text-align: center; padding-left:0;}
.shift.left{width: 40px;line-height: 40px; font-size:12px;}
.shift.right{width: 114px;line-height: 40px; font-size:12px;}
.ctrl{width: 50px; line-height: 40px; font-size:13px;}
.space{width:234px;}
.arrows{position:relative; top:42px;}
.sec-func .key{width: 32px; font-size:10px; text-align:left; line-height:40px; float:left;}
.sec-func div.dual{line-height:20px;}
.arrows .key{text-align: center; padding-left: 7px; margin-left:2px;}
.hidden{visibility: hidden;}
.ujo{background-color: DarkMagenta;}
.puoliujo{background: linear-gradient(to right, #333 50%, DarkMagenta 50%);}
.pystis{line-height: 40px; font-size:13px;}
.numlabel{width: 110px; height: 30px; line-height: 26px; font-size:14px; background-color:#aaa;}

.key:hover{box-shadow:0px 0px 10px #14B524; z-index:1000;}