S0810049 - Base case

Based off of UMP

by dixalex

HTML

<table class="base_case answers">
    <colgroup>
        <col/>
        <col/>
    </colgroup>
    <thead>
        <tr>
            <td colspan="2" class="availability_row">
                <table class="availability_table grid grid-table-mode">
                    <tbody>
                        <tr>
                            <td colspan="6" class="availability_header border-collapse col-legend legend nonempty">Zoo Attractions Availability by Season</td>
                        </tr>
                        <tr>
                            <td colspan="2"></td>
                            <td>Fall</td>
                            <td>Winter</td>
                            <td>Summer</td>
                            <td>Spring</td>
                            <tr>
                                <td class="available_row_header">4-D Theater, Bug Carousel , Congo Gorilla Forest, JungleWorld, Madagascar!, Tiger Mountain, Himalayan Highlands, World of Birds</td>
                                <td>Free</td>
                                <td>&#10004;</td>
                                <td>&#10004;</td>
                                <td>&#10004;</td>
                                <td>&#10004;</td>
                            </tr>
                            <tr>
                                <td class="available_row_header">Butterfly Garden, Children’s zoo, Wild Asia Monorail</td>
                                <td>Free</td>
                                <td>&#10004;</td>
                                <td>&#10004;</td>
                                <td></td>
                                <td>&#10004;</td>
                            </tr>
                            <tr>
                                <td class="available_row_header">Zoo Shuttle</td>
                                <td>Free</td>
                                <td>&#10004;</td>
                                <td></td>
                                <td>&#10004;</td>
          ...

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;
    width: 50%;
}

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;
    width: 750px;
    margin:...

JavaScript

console.log(jQuery('.ump_c1'));
console.log(jQuery('.ump_c2'));