-- Car Offers page --

dabblet.css

/* -- Car Offers page -- */

/* basic housekeeping */
*{padding:0;margin:0;}
html,body{min-height:100%;}
body{font:normal 13px/1 'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333;}
a{color:#353978;}

abbr[title]{cursor:help;border-bottom:1px dotted;}

/* clearfix */
.LeasingOffer:after,.LeasingOffer:before{content:"";display:table;}
.LeasingOffer:after{clear:both;}
.LeasingOffer{zoom:1;}
/* list items */
.LeasingOffer{width:746px;overflow:hidden;color:#353978;background-color:#e5e5e5;border-radius:4px;margin:10px 0 0 10px;}
.LeasingOffer:hover,.LeasingOffer:hover .QuotesListTable th{background-color:#353978;}
.LeasingOffer:hover{color:#fff;}
.LeasingOffer:hover .QuotesListTable td{color:#333;}
.LeasingOffer .Button{float:right;}
/* vehicle title */
.VehicleTitle{width:726px;overflow:hidden;padding:0 10px;}
span.Model{display:block;font-weight:400;font-size:18px;line-height:36px;float:left;}
span.PricePerMonth{display:block;font-weight:bold;font-size:16px;line-height:36px;float:right;}
/* vehicle image */
.VehicleImage{display:block;width:242px;overflow:hidden;float:left;margin:22px 2px 0 2px;}
/* vehicle quotes table*/
.QuotesListTable{width:498px;min-height:160px;float:left;overflow:hidden;background-color:#fff;}
.QuotesListTable th,.QuotesListTable td{padding:3px 6px;}
.QuotesListTable th{font-weight:400;background-color:#e5e5e5;}
.QuotesListTable tr:first-child{border-top:0;}
.QuotesListTable tr{border-top:1px solid #e5e5e5;}
.muted{display:inline;color:#bbb;float:right;text-align:right;}
.Button{font-weight:bold;font-size:12bpx;color:#fff;text-transform:uppercase;text-shadow:0 1px 1px rgba(0,0,0,.5);text-decoration:none;background-color:#353978;background-image:url(http://st.listers.co.uk/img/site/bg-shiny.png);background-position:center center;background-repeat:repeat-x;border:1px solid #1b1d3c;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.5);-webkit-background-clip:padding-box;-moz-background-clip:padding-box;padding:3px 4px;}
span.Disclaimer{display:block;width:100%;overflow:hidden;float:none;text-align:center;margin:10px 0;}

dabblet.html

<div class="LeasingOffer">
    <div class="VehicleTitle">
        <span class="Model">Honda Accord Diesel Tourer</span>
        <span class="PricePerMonth">from &pound;199.99 per month</span>
    </div>
    <div class="VehicleImage">
        <img src="http://placehold.it/242x160" alt="Indicative image of a new %query%."width="242" height="160">
    </div>
    <table class="QuotesListTable" border=0>
        <thead>
            <tr>
                <th>Derivative</th>
                <th>Deposit</th>
                <th>Term</th>
                <th>Price</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>2.2 i-DTEC Type-S 5dr</td>
                <td>&pound;1,199.94</td>
                <td>36</td>
                <td>&pound;199.99</td>
                <td><a class="Button" href="#">Quote</a><span class="muted">quote based on 10,000 miles p/a</span></td>
            </tr>
            <tr>
                <td>2.2 i-DTEC Type-S 5dr</td>
                <td>&pound;1,439.94</td>
                <td>24</td>
                <td>&pound;239.99</td>
                <td><a class="Button" href="#">Quote</a><span class="muted">quote based on 10,000 miles p/a</span></td>
            </tr>
        </tbody>
    </table>
    <br style="clear:both">
    <span class="Disclaimer"><strong>Business users only.</strong> Prices excludes VAT.</span>
</div>

settings.json

{"view":"split","prefixfree":"1","page":"css"}