S0810049 - Case one

by dixalex

HTML

<table class="base_case">
    <tbody>
        <tr>
            <td class="question_text_row" colspan="2">
                <p>Imagine you are planning to visit Bronx Zoo in the next 12 months and the following attractions are offered.</p>
                <p>If only memberships were offered, which membership would you prefer to buy? <i>Please review the benefits associated with each membership as you pick an option.</i></p>
            </td>
        </tr>
        <tr>
            <td class="row_two_cell_one">
                <table class="party_size_table">
                    <tbody>
                        <tr>
                            <td class="traveling_party" colspan="3">Traveling Party</td>
                        </tr>
                        <tr>
                            <td colspan="2">Your Traveling Party for
                                <br/> whom you would pay</td>
                            <td>Price per ticket for a single trip</td>
                        </tr>
                        <tr>
                            <td class="person_class_header">Adult/Teen (13 &amp; over):</td>
                            <td class="body_count_pipe">body_count_pipe</td>
                            <td class="per_ticket_cell">price_pipe</td>
                        </tr>
                        <tr>
                            <td class="person_class_header">Child (3-12):</td>
                            <td class="body_count_pipe">body_count_pipe</td>
                            <td class="per_ticket_cell">price_pipe</td>
                        </tr>
                        <tr>
                            <td class="person_class_header">Senior (65 &amp; over):</td>
                            <td class="body_count_pipe">body_count_pipe</td>
                            <td class="per_ticket_cell">price_pipe</td>
                        </tr>
                        <tr>
                            <td class="person_class_header">Child (2 &amp;...

CSS

table.base_case {
    border-collapse: collapse;
    width: 950px;
    margin: 0 auto;
    font-family: arial;
}

.base_case td.question_text_row {
    background-color: #008484;
    color: #FFF;
    text-align: left;
    padding-top: 1em;
    padding-left: 1em;
    font-weight: bold;
    font-size: 1.2em;
}

.base_case td.question_text_row p {
	margin-bottom: 1.2em;
}

.base_case .question_text_row {
    border-bottom: solid 5px #FFF;
}

.base_case .row_two_cell_one {
    color: #008484;
    width: 50%;
    vertical-align: top;
}

.base_case .row_two_cell_two {
    color: #008484;
    width: 50%;
    vertical-align: top;
}

.base_case .availability_row {
    color: #008484;
}

table.party_size_table {
    border: solid 1px #CCC;
    border-collapse: collapse;
    width: 435px;
}

table.party_size_table td {
    border: solid 1px #CCC;
    padding: 1em;
}

table.party_size_table .per_ticket_cell {
    border: solid 1px #CCC;
    background-color: #d7e4bd;
    text-align: center;
    font-weight: bold;
    color: #000;
}

table.annual_membership_table {
    border-collapse: collapse;
}

table.annual_membership_table td {
    border: solid 1px #CCC;
    text-align: center;
    padding: 1em;
    color: #000;
}

table.annual_membership_table td p {
	margin-bottom: 1.2em;
}

table.annual_membership_table td:nth-child(even) {
    border-left: 15px solid #CCC;
}

table.annual_membership_table .membership_header {
    font-weight: bold;
    text-align: center;
    color: #008484;
}

table.party_size_table .traveling_party {
    font-weight: bold;
    text-align: center;
}

table.annual_membership_table .per_ticket_cell {
    border: solid 1px #CCC;
    text-align: center;
    font-weight: bold;
}

.person_class_header,
.body_count_pipe {
    color: #000;
}

.body_count_pipe {
    font-weight: bold;
    width: 17%;
}

.annual_headers {
    font-weight: bold;
}

table.availability_table {
    border-collapse: collapse;
    float: right;
    width: 750px;
    margin-top:...

JavaScript

//Imagine you are planning to visit Bronx Zoo in the next 12 months and the following attractions are offered.<br /><br />If only memberships were offered, which membership would you prefer to buy? Please review the benefits associated with each membership as you pick an option.<br /><br />Your Traveling Party for whom you would pay<br />Price per ticket for a single trip<br /><br />Adult/Teen (13 &amp;amp; over):<br />${party.r1.val}<br />$29.49 - $44.49<br /><br />Child (3-12):<br />${party.r2.val}<br />$21.49 - $32.49<br /><br />Senior (65 &amp;amp; over): <br />${party.r3.val}<br />$25.49 - $38.49<br /><br />Child (2 &amp;amp; under): <br />${party.r4.val}<br />Free<br /><br />Zoo Attractions Availability by Season<br /><br />Fall<br />Winter<br />Summer<br />Spring<br /><br />4-D Theater, Bug Carousel , Congo Gorilla Forest, JungleWorld, Madagascar!, Tiger Mountain, Himalayan Highlands, World of Birds<br />Free<br />✔<br />✔<br />✔<br />✔<br /><br />Butterfly Garden, Children’s zoo, Wild Asia Monorail<br />Free<br />✔<br />✔<br />&amp;nbsp;<br />✔<br /><br />Zoo Shuttle<br />Free<br />✔<br />&amp;nbsp;<br />✔<br />&amp;nbsp;<br /><br />Camel Rides<br />$6<br />✔<br />✔<br />&amp;nbsp;<br />✔