anchor.diff:    <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="letter"><span>Q</span></li>
  +                <li class="letter"><span>W</span></li>
  +                <li class="letter"><span>E</span></li>
  +                <li class="letter"><span>R</span></li>
  +                <li class="letter"><span>T</span></li>
  +                <li class="letter"><span>Y</span></li>
  +                <li class="letter"><span>U</span></li>
  +                <li class="letter"><span>I</span></li>
  +                <li class="letter"><span>O</span></li>
  +                <li class="letter"><span>P</span></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="letter"><span>A</span></li>
  +                <li class="letter"><span>S</span></li>
  +                <li class="letter"><span>D</span></li>
  +                <li class="letter"><span>F</span></li>
  +                <li class="letter"><span>G</span></li>
  +                <li class="letter"><span>H</span></li>
  +                <li class="letter"><span>J</span></li>
  +                <li class="letter"><span>K</span></li>
  +                <li class="letter"><span>L</span></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="letter"><span>Z</span></li>
  +                <li class="letter"><span>X</span></li>
  +                <li class="letter"><span>C</span></li>
  +                <li class="letter"><span>V</span></li>
  +                <li class="letter"><span>B</span></li>
  +                <li class="letter"><span>N</span></li>
  +                <li class="letter"><span>M</span></li>
                   <li class="rightfiller"></li>
                 </ul>
               </div>
  
positive.code: $(function(){
    $('#keyboard li').click(function(){
      var $this = $(this),
      character = $this.html(); // If it's a lowercase letter, nothing happens to this variable
      // this is yucky
      // TODO make not yucky
      $('#letter').val(character)
  
negative.code: position:fixed;
  bottom:0;
  }
    @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 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>
  
  