m.TDK

by lukerichison

HTML

<ul>
    <li>
        <p class="info">Sunday, September 9, 1:00pm<span class="icon-unlock"></span></p>
        <table class="game">
            <tr class="home">
                <td rowspan="2" class="graph"><span style="height: 35%;"></span></td>
                <td class="team"><label for="game1H"><span class="icon-facebook logo"></span>Facebook</label><input type="radio" name="game1" id="game1H" /></td>
                <td rowspan="2" class="spread">8.5</td>
            </tr>
            <tr class="away">
                <td class="team"><label for="game1A"><span class="icon-googleplus logo"></span>Google+</label><input type="radio" name="game1" id="game1A" /></td>
            </tr>
        </table>
        <a class="url" href="#"><span class="icon-globe"></span>Matchup on ESPN</a>
    </li>
    <li>
        <p class="info">Sunday, September 9, 4:00pm<span class="icon-unlock"></span></p>
        <table class="game">
            <tr class="home">
                <td rowspan="2" class="graph"><span style="height: 85%;"></span></td>
                <td class="team"><label for="game2H"><span class="icon-linkedin logo"></span>LinkedIn</label><input type="radio" name="game2" id="game2H" /></td>
                <td rowspan="2" class="spread">-4</td>
            </tr>
            <tr class="away">
                <td class="team"><label for="game2A"><span class="icon-twitter logo"></span>Twitter</label><input type="radio" name="game2" id="game2A" /></td>
            </tr>
        </table>
        <a class="url" href="#"><span class="icon-globe"></span>Matchup on ESPN</a>
    </li>
    <li>
        <p class="info">Sunday, September 9, 8:00pm<span class="icon-unlock"></span></p>
        <table class="game">
            <tr class="home">
                <td rowspan="2" class="graph"><span style="height: 65%;"></span></td>
                <td class="team"><label for="game3H"><span class="icon-pinterest logo"></span>Pinterest</label><input type="radio" name="game3"...

CSS

</style><meta name="viewport" content="width=device-width"><link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'><link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'><link rel="stylesheet" type="text/css" href="/css/elusive-webfont.css?StillNoSpring"><style>
/**
 * "Google Now" Card
 */
body {
	background: #e1e1e1;
    font-size: 10px;
	min-height: 100%;
	font-family: Open Sans;
}
ul {
	margin: 1em;
}
ul li {
    margin-bottom: 1em;
	list-style: none;
	padding: 1.5em;
	background: #fff;
	position: relative;
	color: #444;
	box-shadow: 0px 3px rgba( 0, 0, 0, 0.1 );
	-webkit-border-radius: 2px;
	   -moz-border-radius: 2px;
	        border-radius: 2px;
}
ul li table.game {
    width: 100%;
}
ul li table.game tr {
    height: 3.6em;
}
ul li table.game tr.home td.team label.selected {
background: linear-gradient(to right, rgba(67,162,224,0) 0%, rgba(67,162,224,1) 100%);
}
ul li table.game tr.away td.team label.selected {
background: linear-gradient(to right, rgba(218,236,87,0) 0%, rgba(218,236,87,1) 100%);
}
ul li table.game td {
    vertical-align: middle;
}
ul li table.game td:not(.team) {
    width: 1em;
}
ul li table.game td.spread {
    font-size: 5em;
    border-left: 0.375em solid transparent;
}
ul li table.game td.team {
    font-size: 2.4em;
}
ul li table.game td.team input {
    display: none;
}
ul li table.game td.team label {
    width: 100%;
    text-align: left;
	font-family: Open Sans;
}
ul li table.game td.team label:before {
    margin-right: 0.5em;
}
ul li table.game td.team span.logo {
    margin-right: 0.5em;
}
ul li table.game td.graph {
    background-color: #DAEC57;
    position: relative;
    border-right: 1.5em solid transparent;
}
ul li table.game td.graph span {
    background-color: #43A2E0;
    width: 100%;
    position: absolute;
    top: 0;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
    line-height: 0.8;
}
ul li p.info {
    color: #888;
   ...

JavaScript

$('input:radio').change(function(){
    $('label[for^='+$(this).attr('name')+'].selected').toggleClass('selected');
    $('label[for='+$(this).attr('id')+']').toggleClass('selected');
});