@charset "UTF-8";

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.keyboard-wrap {
  padding: 2px 0px 8px 0px;
  text-align: center;
}

.keyboard-content {
  display: inline-block;
  text-align: left;
}

.keyboard {
  display: block;
  list-style: none;
}

.keyboard.area {
  display: inline-block;
  padding: 8px 10px;
  background: #f6f6f6;
/*  border: 1px solid rgba(221, 221, 221, 1.0);*/
  border-radius: 16px;
/*  box-shadow: 0px 0px 2px #e36009;*/
  box-shadow: 0px 1px 1px #dddddd;
}

.keyboard.area li {
  display: inline-block;
  padding: 2px 1px;
/*  vertical-align: middle;*/
  width: auto;
  margin: 0px;
}

.keyboard .keyboard-key {
  background-color: #fefefe;
  border: 1px solid rgba(238, 238, 238, 1.0);
  border-radius: 8px;
  box-shadow: 0px 1px 1px #eeeeee;
}

.keyboard-key.small {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
}
.keyboard-key.small:after {
  display: none;
}

.keyboard-key.small-a {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  margin: 0px 0px 0px 18px;}
.keyboard-key.small-a:after {
  display: none;
}

.keyboard-key.small-z {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: 30px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  margin: 0px 0px 0px 36px;
}
.keyboard-key.small-z:after {
  display: none;
}

.keyboard-key.space {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.9em;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: 182px;
  height: 30px;
  line-height: 28px;
  text-align: center;
  margin: 0px 0px 0px 100px;
}
.keyboard-key.space:after {
  display: none;
}

.keyboard-key.return {
/*  font-family: Verdana, Arial, Helvetica, sans-serif;*/
  font-size: 1.2em;
  color: rgba(0, 0, 0, 0.4);
  display: inline-block;
  width: 47px;
  height: 30px;
  line-height: 28px;
  text-align: center;
}
.keyboard-key.return:after {
  display: none;
}

.keyboard-key.small[class*="shake"]:before {
  content: '';
}
.keyboard-key.small-a[class*="shake"]:before {
  content: '';
}
.keyboard-key.small-z[class*="shake"]:before {
  content: '';
}
.keyboard-key.space[class*="shake"]:before {
  content: '';
}
.keyboard-key.return[class*="shake"]:before {
  content: '';
}