S1910752 - Price Container

by dixalex

HTML

<span class='floatingPrice Q22'>
<table>
    <tbody>
        <tr>
            <td>
                <h3>Monthly price:</h3>
            </td>
            <td rowspan='3' class='priceToggle'>
                <h3>$85</h3></td>
        </tr>
        <tr>
            <td>For first 12 months</td>
            <td></td>
        </tr>
        <tr>
            <td><a class='mouseover' href='#' title='{#tableStart}{#tbodyStart}{#trStart}{#tdColSpan}{#singleQuote}2{#singleQuote}{#gtASCII}{#h3Start}Rates after promo period:{#h3End}{#tdEnd}{#trEnd}{#trStart}{#tdStart}Months 13-24:{#tdEnd}{#tdClass}{#singleQuote}{#y2Price}{#singleQuote}{#gtASCII}{#tdEnd}{#trEnd}{#trStart}{#tdStart}After Month 24:{#tdEnd}{#tdClass}{#singleQuote}{#y3Price}{#singleQuote}{#gtASCII}{#tdEnd}{#trEnd}{#tbodyEnd}{#tableEnd}'>See Pricing details</a></td>
            <td></td>
        </tr>
    </tbody>
</table>
</span>

CSS

span.floatingPrice table {
    border-collapse: collapse;
    border: none;
    font-family: arial;
}

span.floatingPrice table tbody tr td {
    border: solid 1px #FFF;
    background-color: #FFF;
}

span.floatingPrice table tbody tr td.priceToggle {
    border: solid 1px #FFF;
    background-color: #FFF;
    min-width: 120px;
    font-size: 2.5em;
	text-align: center;
	vertical-align: top;
}

span.floatingPrice table h3 {
    margin: 0;
}