#keyboard_yesno, #keyboard_esc, #keyboard_numbers2, #keyboard_numbers3, #keyboard_numbers4, #keyboard_space, #keyboard_spacereturn, #keyboard_spaceesc, #keyboard_freeformnumberstring, #keyboard_spacereturnyesno, #keyboard_numbers, #keyboard_numberstring, #keyboard_string, #keyboard_string2, #keyboard_game, #keyboard_game2, #keyboard_game3, #keyboard_game5 {
  color:               white;
  text-align:          center;
  position:            absolute;
  top:                 220px;
  left:                120px;
  opacity:             .70;
  margin:              0 auto;
  padding:             2px;
  z-index:             100;
}

#keyboard_esc {
  left:                4px;
  top:                 20px;
  z-index: 100;
}

#keyboard_game {
  left:                530px;
  top:                 160px;
  z-index: 100;
}

#keyboard_game2 {
  left:                530px;
  top:                 200px;
  z-index: 100;
}

#keyboard_game3 {
  left:                530px;
  top:                 160px;
  z-index: 100;
}

#keyboard_game5 {
  left:                530px;
  top:                 90px;
  z-index: 100;
  opacity:             .95;
}

#keyboard_string {
  top:                 220px;
  left:                144px;
}

#keyboard_string2 {
  top:                 180px;
  left:                144px;
}

#keyboard_numbers, #keyboard_numberstring {
  top:                 200px;
  left:                520px;  
}

#keyboard_freeformnumberstring {
  top:                 140px;
  left:                520px;  
}

#keyboard_numbers2 {
  top:                 168px;
  left:                520px;   
}

#keyboard_numbers3 {
  top:                 148px;
  left:                520px;   
}

#keyboard_numbers4 {
  top:                 140px;
  left:                520px;   
}

#keyboard_spacereturnyesno {
  top:                 220px;
  left:                560px;    
}

#keyboard_yesno {
  top:                 180px;
  left:                580px;
}

#keyboard_space, #keyboard_spacereturn, #keyboard_spaceesc {
  top:                 280px;
  left:                540px;
}

.keyinputspace {
  position:absolute;
  left:110px;
  top:335px;
}

.keyinputspaceesc {
  position:absolute;
  left:25px;
  top:335px;
}

.keyboard-key {
  cursor: pointer;
  position: relative;
  display: inline-block;
  color: #aaa;
  font-family:   'Press Start 2P',monospace;
  text-decoration: none;
  text-align: center;
  width: 30px;
  height: 26px;
  background: #eff0f2;
  border-radius: 0px;
  border: 2px solid rgba(255, 255, 255, 0.8);
  margin-left: 2px;
  margin-top: 1px;
  opacity: 75%;
}
.keyboard-key.dark {
  background: #222;
  box-shadow: inset 0 0 25px #333, 0 1px 0 #000, 0 2px 0 #222, 0 2px 3px #333;
  text-shadow: 0px -1px 0px #000;
  border: 2px solid rgba(0, 255, 255, 0.8);
  color: #333;
}
.keyboard-key:active,
.keyboard-keydown {
  color: #333;
  background: #333;
  border: 2px solid rgba(30, 30, 30, 0.8);
}
.keyboard-key.dark:active,
.keyboard-keydown.dark {
  color: #333;
  background: #222;
}
.short {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.centered {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
.bottom-right {
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.bottom-left {
  position: absolute;
  bottom: 5px;
  left: 5px;
}
.bottom-center {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}
/* functions */
.keyboard-key.f1 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f1::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F1";
}
.keyboard-key.f2 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f2::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F2";
}
.keyboard-key.f3 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f3::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F3";
}
.keyboard-key.f4 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f4::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F4";
}
.keyboard-key.f5 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f5::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F5";
}
.keyboard-key.f6 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f6::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F6";
}
.keyboard-key.f7 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f7::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F7";
}
.keyboard-key.f8 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f8::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F8";
}
.keyboard-key.f9 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f9::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F9";
}
.keyboard-key.f10 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f10::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F10";
}
.keyboard-key.f11 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f11::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F11";
}
.keyboard-key.f12 {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.f12::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "F12";
}
.keyboard-key.eject {
  font-size: 8px;
  height: 26px;
  width: 46px;
}
.keyboard-key.eject::before {
  position: absolute;
  bottom: 5px;
  right: 5px;
  content: "EJECT";
}
/* numbers */
.keyboard-key.one::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "1";
}
.keyboard-key.two::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "2";
}
.keyboard-key.three::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "3";
}
.keyboard-key.four::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "4";
}
.keyboard-key.five::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "5";
}
.keyboard-key.six::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "6";
}
.keyboard-key.seven::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "7";
}
.keyboard-key.eight::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "8";
}
.keyboard-key.nine::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "9";
}
.keyboard-key.zero::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "0";
}
/* alphabet */
.keyboard-key.q::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "q";
}
.keyboard-key.w::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "w";
}
.keyboard-key.e::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "e";
}
.keyboard-key.r::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "r";
}
.keyboard-key.t::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "t";
}
.keyboard-key.y::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "y";
}
.keyboard-key.u::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "u";
}
.keyboard-key.i::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "i";
}
.keyboard-key.o::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "o";
}
.keyboard-key.p::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "p";
}
.keyboard-key.a::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "a";
}
.keyboard-key.s::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "s";
}
.keyboard-key.d::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "d";
}
.keyboard-key.f::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "f";
}
.keyboard-key.g::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "g";
}
.keyboard-key.h::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "h";
}
.keyboard-key.j::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "j";
}
.keyboard-key.k::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "k";
}
.keyboard-key.l::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "l";
}
.keyboard-key.z::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "z";
}
.keyboard-key.x::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "x";
}
.keyboard-key.c::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "c";
}
.keyboard-key.v::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "v";
}
.keyboard-key.b::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "b";
}
.keyboard-key.n::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "n";
}
.keyboard-key.m::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  content: "m";
}
/* utility */
.keyboard-key.esc {
}
.keyboard-key.esc::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: "esc";
}
.keyboard-key.alt::before {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 10px;
  content: "alt";
}
.keyboard-key.cmd {
  width: 72px;
}
.keyboard-key.cmd::before {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 10px;
  content: "cmd";
}
.keyboard-key.ctrl::before {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 10px;
  content: "ctrl";
}
.keyboard-key.delete::before {
  position: absolute;
  top: 50%;
  margin-top: -1em;
  bottom: 14px;
  left: 0px;
  font-size: 10px;
  content: "Del";
}
.keyboard-key.option::before {
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: "option";
}
.keyboard-key.return::before {
  position: absolute;
  top: 50%;
  margin-top: -1em;
  bottom: 14px;
  left: 0px;
  font-size: 10px;
  content: "Ent";
}
.keyboard-key.shift {
  width: 72px;
}
.keyboard-key.shift::before {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 10px;
  content: "shift";
}
.keyboard-key.space {
  width: 66px;
}
.keyboard-key.space::before {
  position: absolute;
  top: 50%;
  margin-top: -1em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: "space";
}
.keyboard-key.tab {
  width: 72px;
}
.keyboard-key.tab::before {
  position: absolute;
  bottom: 5px;
  left: 5px;
  font-size: 10px;
  content: "tab";
}
/* arrows */
.keyboard-key.up {
  font-size: 8px;
  height: 64px;
  width: 64px;
  max-height: 44px;
  max-width: 44px;
  background-image: url("../images/snowshoeing/Arrow-up-button.png");
  background-position: center; 
}
.keyboard-key.up::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: " ";
}
.keyboard-key.down {
  font-size: 8px;
  height: 64px;
  width: 64px;
  max-height: 44px;
  max-width: 44px;
  background-image: url("../images/snowshoeing/Arrow-down-button.png");
  background-position: center; 
}
.keyboard-key.down::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: " ";
}
.keyboard-key.left {
  font-size: 8px;
  height: 64px;
  width: 64px;
  max-height: 44px;
  max-width: 44px;
  background-image: url("../images/snowshoeing/Arrow-left-button.png");
  background-position: center; 
}
.keyboard-key.left::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: " ";
}
.keyboard-key.right {
  font-size: 8px;
  height: 64px;
  width: 64px;
  max-height: 44px;
  max-width: 44px;
  background-image: url("../images/snowshoeing/Arrow-right-button.png");
  background-position: center; 
}
.keyboard-key.right::before {
  position: absolute;
  top: 50%;
  margin-top: -0.5em;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  font-size: 10px;
  content: " ";
}