TDK 2

by lukerichison

HTML

<header>
    <div>Week 16</div>
</header>

<div id="wrapper"><div id="scroller">
    <ul data-week="16">
        <li data-game="1" ><div class="spread">6</div></li>
        <li data-game="2" ><div class="spread">-3.5</div></li>
        <li data-game="3" ><div class="spread">6</div></li>
        <li data-game="4" ><div class="spread">-3.5</div></li>
        <li data-game="5" ><div class="spread">6</div></li>
        <li data-game="6" ><div class="spread">-3.5</div></li>
        <li data-game="7" ><div class="spread">6</div></li>
        <li data-game="8" ><div class="spread">-3.5</div></li>
        <li data-game="9" ><div class="spread">6</div></li>
        <li data-game="10"><div class="spread">-3.5</div></li>
        <li data-game="11"><div class="spread">6</div></li>
        <li data-game="12"><div class="spread">-3.5</div></li>
        <li data-game="13"><div class="spread">-3.5</div></li>
        <li data-game="14"><div class="spread">-3.5</div></li>
        <li data-game="15"><div class="spread">-3.5</div></li>
        <li data-game="16"><div class="spread">-3.5</div></li>
        <li data-game="17"><div class="spread">No line</div></li>
    </ul>
</div></div>

CSS

</style><meta name="viewport" content="initial-scale=1.0, width=device-width"><style>
html {
    min-height: 100%;
    background-color: #4A4843;
}
body {
    font: 1em/1.5em 'Myriad Web Pro', 'Myriad Web Pro', Helvetica, sans-serif;
    word-spacing: normal; letter-spacing: 0;
    padding-top: 3em;
}
header {
    position: fixed; top: 0; left: 0; right: 0; z-index: 2;
    text-align: center; padding: 0.5em;
    background: linear-gradient(to bottom, #ffffff 0%,#f1f1f1 50%,#e1e1e1 51%,#f6f6f6 100%);
    box-shadow: 0 -3em 1em 3em #000;
}
header div {
    font-size: 1.5em;
    text-shadow: -1px 1px 1px #FFF;
}
li {
    position: relative;
    margin: 1em 0.5em; padding: 0.5em;
    border-radius: 0.125em;
    box-shadow: 
        0 0.25em 0 #c0c0c0,
        0 0.5em 0.5em -0.125em #000,
        0 0.25em 0 #c0c0c0,
        inset 0 0.125em 0.25em -0.125em #FFF,
        inset 0 -0.125em 0.5em -0.25em #000;
}
li .spread {
    font-weight: bold; font-size: 2em; color: #FFF;
    text-shadow: -0.03125em 0.03125em 0.03125em #777;
    padding: 0.25em; text-align: center;
    background-repeat: no-repeat;
    background-position: 0 -50px;
}

li[data-game]     {background: #c0c0c0;}
li[data-game='1'] {background: linear-gradient(to right, #DAEC57 40%, #43A2E0 40%);}
li[data-game='2'] {background: linear-gradient(to right, #DAEC57 75%, #43A2E0 75%);}
li[data-game='3'] {background: linear-gradient(to right, #DAEC57 22%, #43A2E0 22%);}
li[data-game='4'] {background: linear-gradient(to right, #DAEC57 46%, #43A2E0 46%);}
li[data-game='5'] {background: linear-gradient(to right, #DAEC57 58%, #43A2E0 58%);}
li[data-game='6'] {background: linear-gradient(to right, #DAEC57 52%, #43A2E0 52%);}
li[data-game='7'] {background: linear-gradient(to right, #DAEC57 80%, #43A2E0 80%);}
li[data-game='8'] {background: linear-gradient(to right, #DAEC57 38%, #43A2E0 38%);}
li[data-game='9'] {background: linear-gradient(to right, #DAEC57 32%, #43A2E0 32%);}
li[data-game='10']{background:...