m.TDK Pick 'Em

by lukerichison

HTML

<ul>
    <li>
        <div id="spread">-7.5</div>
        <div id="bar-graph"><span style="height: 62.12%;"></span></div>
        <div id="matchup">
            <input type="radio" name="MM130101" id="BAL" value="BAL" />
            <label for="BAL">Baltimore Ravens</label>
            <input type="radio" name="MM130101" id="DEN" value="DEN" />
            <label for="DEN">Denver Broncos</label>
        </div>
        <p><a href="http://scores.espn.go.com/nfl/gamecast?gameId=330905007&version=mobile" target="_blank">View matchup on <b>ESPN</b></a>Thursday Sep 5, 7:00p <span class="icon-unlock"></span></p>
    </li>
    <li>
        <div id="spread">9</div>
        <div id="bar-graph"><span style="height: 88.82%;"></span></div>
        <div id="matchup">
            <input type="radio" name="MM130102" id="NE" value="NE" />
            <label for="NE">New England Patriots</label>
            <input type="radio" name="MM130102" id="BUF" value="BUF" />
            <label for="BUF">Buffalo Bills</label>
        </div>
        <p><a href="http://scores.espn.go.com/nfl/gamecast?gameId=330908002&version=mobile" target="_blank">View matchup on <b>ESPN</b></a>Sunday Sep 8, 1:00p <span class="icon-unlock"></span></p>
    </li>
    <li>
        <div id="spread">-7</div>
        <div id="bar-graph"><span style="height: 31.68%;"></span></div>
        <div id="matchup">
            <input type="radio" name="MM130103" id="TEN" value="TEN" />
            <label for="TEN">Tennessee Titans</label>
            <input type="radio" name="MM130103" id="PIT" value="PIT" />
            <label for="PIT">Pittsburgh Steelers</label>
        </div>
        <p><a href="http://scores.espn.go.com/nfl/gamecast?gameId=330908023&version=mobile" target="_blank">View matchup on <b>ESPN</b></a>Sunday Sep 8, 1:00p <span class="icon-unlock"></span></p>
    </li>
    <li>
        <div id="spread">-3</div>
        <div id="bar-graph"><span style="height: 49.79%;"></span></div>
        <div id="matchup">
...

CSS

</style><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"><style>
@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400);
body {
    font: normal normal 300 1em/1.5em "Source Sans Pro", sans-serif;
    background-color: #d4d4d4;
    color: #666;
    margin: 0;
    padding: 0;
}
input[name^='MM'] {
    display: none;
}
ul {
    margin: 0.5em;
    padding: 0;
}
li {
    list-style-type: none;
    background-color: #FEFEFE;
    margin: 0 0 1em 0;
    padding: 0.5em;
    border-radius: 4px;
    box-shadow: 0 4px 0 #a4a4a4;
    background-repeat: no-repeat;
    background-size: auto, 50% auto;
    background-position: 0 0, 102% -4px;
}
#bar-graph,
#spread {
    font-size: 4.5em;
    height: 1em;
}
#bar-graph {
    float: left;
    width: 0.25em;
    background-color: #DAEC57;
}
#bar-graph span {
    display: block;
    height: 50%;
    background-color: #43A2E0;
}
#spread {
    float: right;
    line-height: 1em;
    text-shadow: 2px 2px 1px #f4f4f4;
}
#matchup {
    font-size: 1.5em;
}
#matchup label {
    display: block;
    white-space: nowrap;
    padding: 0.25em 0 0.25em 1.4em;
    margin-left: 0.75em;
    background-image: url(http://development.advncs.com/dev/suninspiredliving/i/check.png);
    background-repeat: no-repeat;
    background-size: 1.5em 6em;
}
#matchup label + input + label { background-position: 0 -1.5em }
#matchup input:checked + label { background-position: 0 -3em; }
#matchup label + input:checked + label { background-position: 0 -4.5em; }
li p {
    clear: both;
    text-align: right;
    font-size: 0.75em;
    margin: 1em 0 0;
    border-top: 1px solid #d4d4d4;
}
li p a {
    float: left;
    font-style: italic;
    color: #43A2E0;
    text-decoration: none;
}
li.BUF {background-image: -webkit-radial-gradient(110% -100%, circle cover, rgba(255, 255, 255, 0.25) 35%, rgba(255, 255, 255, 1) 55%),url('http://i.nflcdn.com/static/site/5.11/img/logos/svg/teams-matte-mascot/bills.svg');}
li.MIA...

JavaScript

$('input[name^="MM"]').change(function(){
    $(this).closest('li').removeClass().addClass($(this).val());
});