Word Clock 2

by jakie8

HTML

<table id="clock">
    <tr>
        <td class="verbage">i</td>
        <td class="verbage">t</td>
        <td> </td>
        <td class="verbage">i</td>
        <td class="verbage">s</td>
        <td> </td>
        <td class="10">t</td>
        <td class="10">e</td>
        <td class="10">n</td>
        <td class="20">t</td>
        <td class="20">w</td>
        <td class="20">e</td>
        <td class="20">n</td>
        <td class="20">t</td>
        <td class="20">y</td>
        <td class="20">-</td>
        <td class="30">t</td>
        <td class="30">h</td>
        <td class="30">i</td>
        <td class="30">r</td>
        <td class="30">t</td>
        <td class="30">y</td>
        <td class="30">-</td>
        <td class="40">f</td>
        <td class="40">o</td>
        <td class="40">r</td>
        <td class="40">t</td>
        <td class="40">y</td>
        <td class="40">-</td>
        <td>r</td>
        <td>h</td>
    </tr>
    <tr>
        <td class="50">f</td>
        <td class="50">i</td>
        <td class="50">f</td>
        <td class="50">t</td>
        <td class="50">y</td>
        <td class="50">-</td>
        <td class="1">o</td>
        <td class="1">n</td>
        <td class="1">e</td>
        <td class="2">t</td>
        <td class="2">w</td>
        <td class="2">o</td>
        <td class="3">t</td>
        <td class="3">h</td>
        <td class="3">r</td>
        <td class="3">e</td>
        <td class="3">e</td>
        <td class="4">f</td>
        <td class="4">o</td>
        <td class="4">u</td>
        <td class="4">r</td>
        <td class="5">f</td>
        <td class="5">i</td>
        <td class="5">v</td>
        <td class="5 11">e</td>
        <td class="11">l</td>
        <td class="11">e</td>
        <td class="11">v</td>
        <td class="11">e</td>
        <td class="11">n</td>
        <td>v</td>
    </tr>
    <tr>
        <td class="12">t</td>
        <td class="12">w</td>
        <td class="12">e</td>
        <td class="12">l</td>
  ...

CSS

html, body{
    height:100%;
    overflow:hidden;
    background:#000;
    color: #222;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font-weight:100;
    cursor:default;
    font-size:24px;
    text-shadow:0 0 1px rgba(0, 0, 0, 0.01);
}
body{
    -webkit-transition: background 1s linear;  /* Saf3.2+, Chrome */
     -moz-transition: background 1s linear;  /* FF4+ */
      -ms-transition: background 1s linear;  /* IE10 */
       -o-transition: background 1s linear;  /* Opera 10.5+ */
          transition: background 1s linear;
}
body.white{
    background:#fefefe;
    color:#ccc;
}
::selection{
    color:inherit;
    background:transparent;
}
::-moz-selection{
    color:inherit;
    background:transparent;
}

#clock{
    width: 850px;
    height: 310px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
    top: 50%;
    margin-top: -155px;
    left: 50%;
    margin-left: -425px;
}
#clock .active{
    color:#fff;
    text-shadow:0 0 20px white;
}
#clock td{
    -webkit-transition: color 1s linear;  /* Saf3.2+, Chrome */
     -moz-transition: color 1s linear;  /* FF4+ */
      -ms-transition: color 1s linear;  /* IE10 */
       -o-transition: color 1s linear;  /* Opera 10.5+ */
          transition: color 1s linear;
}
body.white #clock .active{
    color:#222;
}