/**
 * graphical keyboard layout, fixed size (664*230px)
 */

#keyboard {
  padding: 0;
  width: 664px;
  margin: 20px auto;
  position: relative;
  height: 230px;
  font-size: 0;
}

/* normal keys */
#keyboard kbd {
  display: inline-block;
  position: relative;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 2px;
  border: 1px solid #aaa;
  border-radius: 5px;
  font-family: sans-serif;
  font-size: 15px;
}
#keyboard kbd span {
  display: inline-block;
  position: absolute;
  min-width: 18px;
  text-align: center;
}
#keyboard kbd .level1 { bottom: 2px;  left: 0; }
#keyboard kbd .level2 { top:    2px;  left: 0; }
#keyboard kbd .level3 { bottom: 2px; right: 0; }
#keyboard kbd .level4 { top:    2px; right: 0; }
#keyboard kbd .level5 { bottom: 2px;  left: 0; }
#keyboard kbd .level6 { top:    2px;  left: 0; }

#keyboard kbd .deadKey {
  font-size: larger;
  font-weight: bold;
  color: red;
  bottom: -2px;
}

/* special keys */
.specialKey {
  background-color: #e4e4e4;
}
#row_AA kbd {
  width: 56px;
  font-size: 13px;
  font-style: italic;
}
#keyboard #row_AA kbd span {
  left: 3px;
}
#keyboard #row_AA kbd .level3 {
  left: auto;
  right: 0;
}
#keyboard #key_TAB,
#keyboard #key_BKSP { width:  60px; }
#keyboard #key_CAPS,
#keyboard #key_RTRN { width:  73px; }
#keyboard #key_LFSH,
#keyboard #key_RTSH { width:  96px; }
#keyboard #key_SPCE { width: 240px; }
#keyboard #key_MENU { width:  40px; }


/******************************************************************************
 * Background Images for Tab, Backspace, Caps, Return, Shift
 */

kbd.specialKey {
  background-repeat: no-repeat;
  background-position: bottom left;
}

#key_TAB  { background-image: url(key-tab.png);  }
#key_BKSP { background-image: url(key-bksp.png); }
#key_CAPS { background-image: url(key-caps.png); }
#key_RTRN { background-image: url(key-rtrn.png); }
#key_LFSH,
#key_RTSH { background-image: url(key-shift.png); }


/******************************************************************************
 * Displayed if the keyboard rendering is altered by an ad blocker
 */

#badRendering {
  clear: both;
  text-align: center;
  font-weight: bold;
  color: brown;
  display: none;
}
