anchor.diff:  position:fixed;
   bottom:0;
   }
  -#keyboard {
  -margin: 0;
  -padding: 0;
  -list-style: none;
  +  @media (orientation: landscape) {
  +    #keyboard-container {
  +      height:48%
  +    }
  +  }
  +  @media (orientation: portrait) {
  +    #keyboard-container {
  +      height:24%
  +    }
  +  }
  +  #keyboard {
  +  margin: 0;
  +  padding: 0;
  +  list-style: none;
  +  height: 100%;
  +  }
  +  .letter {
  +  display: table;
  +  height: 40px;
  +  line-height: 1;
  +  text-align: center;
  +  vertical-align: middle;
  +  float: left;
  +  margin-left: 0.5%;
  +  margin-right: 0.5%;
  +  // TODO: these should be relative
  +  margin-top: 2px;
  +  margin-bottom: 2px;
  +  width: 9%;
  +  background: #fff;
  +  border: 1px solid #f9f9f9;
  +  -moz-border-radius: 5px;
  +  -webkit-border-radius: 5px;
   }
  -                .letter {
  -                height: 40px;
  -                line-height: 40px;
  -                text-align: center;
  -                float: left;
  -                margin-left: 0.5%;
  -                margin-right: 0.5%;
  -                // TODO: these should be relative
  -                margin-top: 2px;
  -                margin-bottom: 2px;
  -                width: 9%;
  -                background: #fff;
  -                border: 1px solid #f9f9f9;
  -                -moz-border-radius: 5px;
  -                -webkit-border-radius: 5px;
  -                }
  -                .topfiller-2 {
  -                  height: 2px;
  -                }
  -                .leftfiller-0 {
  -                clear: both;
  -                float: left;
  -                margin-left: 0px;
  -                width: 0px;
  -		}
  -                .leftfiller-5 {
  -                clear: both;
  -                float: left;
  -                margin: 0 0.5% 5px 0;
  -                width: 4.5%;
  -		}
  -                .leftfiller-10 {
  -                clear: both;
  -                float: left;
  -                margin: 0 1% 5px 0;
  -                width: 9%;
  -		}
  -                .rightfiller {
  -                height: 44px;
  -		}
  -		.uppercase {
  -		text-transform: uppercase;
  -		}
  -		#keyboard .space {
  -		clear: left;
  -		width: 681px;
  -		}
  -		.on {
  -		display: none;
  -                }
  -                .filler {
  -                width: 5%;
  -                margin-left: 0;
  -                margin-right: 0;
  -                }
  -		.letter:hover {
  -		position: relative;
  -		top: 1px;
  -		left: 1px;
  -		border-color: #e5e5e5;
  -		cursor: pointer;
  -		}
  +.letter span {
  +  display: table-cell;
  +  vertical-align: middle;
  +}
  +  .topfiller-2 {
  +    height: 2px;
  +  }
  +  .leftfiller-0 {
  +  clear: both;
  +  float: left;
  +  margin-left: 0px;
  +  width: 0px;
  +  }
  +  .leftfiller-5 {
  +  clear: both;
  +  float: left;
  +  margin: 0 0.5% 5px 0;
  +  width: 4.5%;
  +  }
  +  .leftfiller-10 {
  +  clear: both;
  +  float: left;
  +  margin: 0 1% 5px 0;
  +  width: 9%;
  +  }
  +  .rightfiller {
  +  height: 44px;
  +  }
  +  .filler {
  +  width: 5%;
  +  margin-left: 0;
  +  margin-right: 0;
  +  }
  +  .letter:hover {
  +  position: relative;
  +  top: 1px;
  +  left: 1px;
  +  border-color: #e5e5e5;
  +  cursor: pointer;
  +  }
  +@media (orientation: landscape) {
  +  .letter {
  +    height:30%;
  +    margin-top:0.3%;
  +  }
  +  .rightfiller {
  +    height:30%;
  +  }
  +  .topfiller-2 {
  +    height: 1%;
  +  }
  +}
  +@media (orientation: portrait) {
  +  .letter {
  +    height:30%;
  +    margin-top:0.5%;
  +  }
  +  .rightfiller {
  +    height:30%;
  +  }
  +  .topfiller-2 {
  +    height: 1%;
  +  }
  +}
     //-->
   </style>
   
  
positive.code:   <ul id="keyboard">
      <li class="topfiller-2"></li>
                  <li class="leftfiller-0"></li>
  		<li class="letter">Q</li>
  		<li class="letter">W</li>
  		<li class="letter">E</li>
  		<li class="letter">R</li>
  		<li class="letter">T</li>
  		<li class="letter">Y</li>
  		<li class="letter">U</li>
  		<li class="letter">I</li>
  		<li class="letter">O</li>
                  <li class="letter">P</li>
                  <li class="rightfiller"></li>
                  <li class="leftfiller-5"></li>
  		<li class="letter">A</li>
  		<li class="letter">S</li>
  		<li class="letter">D</li>
  		<li class="letter">F</li>
  		<li class="letter">G</li>
  		<li class="letter">H</li>
  		<li class="letter">J</li>
  		<li class="letter">K</li>
  		<li class="letter">L</li>
                  <li class="rightfiller"></li>
                  <li class="leftfiller-10"></li>
  		<li class="letter">Z</li>
  		<li class="letter">X</li>
  		<li class="letter">C</li>
  		<li class="letter">V</li>
  		<li class="letter">B</li>
  		<li class="letter">N</li>
  		<li class="letter">M</li>
                  <li class="rightfiller"></li>
                </ul>
              </div>
  
negative.code: $(function(){
    $('#keyboard li').click(function(){
      var $this = $(this),
      character = $this.children().first().html(); // If it's a lowercase letter, nothing happens to this variable
      // this is yucky
      // TODO make not yucky
      $('#letter').val(character)
  