Linear exercise

HTML

<form>
<ul class='linear_exercise'>
<li class='cart'>
 <div class='cart_shell'>
  <div class='cart_header'>Cart</div>
	<div class='monthly_text'>Total Monthly Charges:</div>
	<div class='monthly_cost '>$<span class='running_total'>0.00</span></div>
 </div></li>
<li class='feature_header'>Choose Your Internet Speed</li>
<li class='feature_options'><table class='internet_speed'>
<tbody>
	<tr>
		<td><label for='test'>
			<div class='speed_shell'>
			<div class='speed_header'>Download Speeds Up To</div>
			<div class='speed_rating'>60 Mbps</div>
			<div class='speed_cost'>$ 29.99</div>
			<div class='speed_details' data-details='60Mbps - Good for up to 5 devices at the same time'>View details</div>
			</div>
		</label></td>
		<td><label for='test'>
			<div class='speed_shell'>
			<div class='speed_header'>Download Speeds Up To</div>
			<div class='speed_rating'>150 Mbps</div>
			<div class='speed_cost'>$ 39.99</div>
			<div class='speed_details' data-details='150Mbps - Good for up to 8 devices at the same time'>View details</div>
			</div>
		</label></td>
		<td><label for='test'>
			<div class='speed_shell'>
			<div class='speed_header'>Download Speeds Up To</div>
			<div class='speed_rating'>250 Mbps</div>
			<div class='speed_cost'>$ 49.99</div>
			<div class='speed_details' data-details='250Mbps - Good for up to 11 devices at the same time'>View details</div>
			</div>
		</label></td>
		<td><label for='test'>
			<div class='speed_shell'>
			<div class='speed_header'>Download Speeds Up To</div>
			<div class='speed_rating'>400 Mbps</div>
			<div class='speed_cost'>$ 59.99</div>
			<div class='speed_details' data-details='400Mbps - Good for 12+ devices at the same time'>View details</div>
			</div>
		</label></td>
	</tr>
</tbody>
</table></li>
<li class='feature_header'>Choose Your TV Service</li>
<li class='feature_options'><table class='tv_channels'>
<tbody>
	<tr>
		<td><label for='test'>
			<div class='tv_shell'>
			<div...

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway);
form {
    height: 100%;
    background-color: #FFF;
}

.linear_exercise label {
    cursor: pointer;
}

.linear_exercise {
    background-color: #FFF;
    font-family: Raleway, Calibri, Arial, sans-serif;
    font-size: .85em;
    padding: 0;
    width: 1080px;
}

.internet_speed table {
    border-collapse: collapse;
}

.internet_speed td {
    padding-right: 2em;
}

.tv_channels td {
    padding-right: .35em;
}

.feature_header {
    background-color: rgb(127, 127, 127);
    list-style-type: none;
    padding: .75em 0 0 .5em;
    height: 2em;
    margin: .30em 0 .30em 0;
    color: #FFF;
}

.feature_options {
    background-color: #FFF;
    list-style-type: none;
    padding: 0;
    color: #000;
}

.speed_shell {
    border: solid 1px #CCC;
    width: 13.5em;
    box-shadow: .40em .25em .5em #CCC;
}

.speed_header {
    clear: both;
    font-size: .75em;
    text-align: left;
    padding: .9em 0 0 2em;
}

.speed_rating {
    clear: both;
    font-size: 1.75em;
    text-align: center;
    font-weight: bold;
    margin-top: .7em;
}

.speed_cost,
.tv_cost {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#6db3f2+0,3690f0+34,1e69de+59 */
    background: #6db3f2;
    /* Old browsers */
    background: -moz-linear-gradient(left, #6db3f2 0%, #3690f0 34%, #1e69de 59%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #6db3f2 0%, #3690f0 34%, #1e69de 59%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #6db3f2 0%, #3690f0 34%, #1e69de 59%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=1);
    /* IE6-9 */
    color: #FFF;
    text-align: center;
    font-weight: bold;
    font-size: 1.6em;
    padding-top: .25em;
    height: 1.5em;
    margin: .9em 0 .9em 0;
}

.speed_details {
   ...

JavaScript

jQuery('.speed_details').tooltip({
    items: "[data-details]",
    content: function() {
        var element = jQuery(this);
        if (element.is("[data-details]")) {
            return element.data("details");
        }
    }
});

jQuery('.tv_details').on('click', function(evt) {
    jQuery.ajax({
        'url': '[rel channel_details.htm]',
        'success': function success(data, textStatus, xhr) {
            jQuery("<div>" + data + "</div>").dialog({
                "width": "auto",
                "height": "auto",
                "close": function(e, ui) {
                    jQuery(this).remove();
                }
            });
        }
    });
});