Zeek Widgets

by ritcheyer

HTML

<link rel="stylesheet" href="http://static.move.com/lib/rdx/6.0.03_1/common.css">
<!-- http://ued/present/MSN/MSN_RDC_SRP_v1.jpg -->
<!-- Widget Numero Uno -->​
<hr />
<p class="notifier srpOffMarket">
    <span>The status of <a href="#" title="1234 Home Street, San Jose, CA 91234">1234 Home Street, San Jose, CA 91234</a>, has changed to a For Sale property and is no longer Off Market. <a href="#" title="Explore Homes For Sale">Explore Homes For Sale</a> &raquo;</span>
</p>

<br /><br />

<!-- Widget Numero Dos -->
<b>Second Widget</b><br />
<hr />
<div id="FCMAHousesWorth" class="content">
    <table class="summaryTable">
        <thead>
            <tr>
                <th colspan="2">
                    <h2>How Much Are Houses Worth Now?</h2>
                    <p>in San Jose, CA 91234</p>
                </th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th>Homes for Sale</th>
                <td><strong>--</strong></td>
            </tr>
            <tr>
                <th>Sold Homes</th>
                <td><strong>12</strong></td>
            </tr>
            <tr>
                <th>Average Listing Price</th>
                <td><strong>$1,019,225</strong></td>
            </tr>
            <tr>
                <th>Median Listing Price</th>
                <td><strong>$825,000</strong></td>
            </tr>
            <tr>
                <th>Average Days on Market</th>
                <td><strong>105</strong></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th colspan="2">
                    <a href="#">Get a free home value report!</a>
                </th>
            </tr>
        </tfoot>
    </table>
</div>

CSS

/* Widget Numero Uno */
.notifier {
    font-size: 140%;
    margin: 0 0 10px 0;
}
.srpOffMarket {
    
    background-position: 0px -10240px;
    width: 539px;
    height: 60px;
    padding-top: 7px;
}
.srpOffMarket span {
    display: block;
    padding: 7px 0px 8px;
    height: 30px;
    margin-left: 45px;
    background-color: #e7edf2;
}

/* Widget Numero Dos */​
#FCMAHousesWorth { margin-top: 20px; padding: 0 10px 10px 10px; background-color: #e8f0fa; }
#FCMAHousesWorth h2,
#FCMAHousesWorth p  { padding-left: 60px; }
#FCMAHousesWorth p  { margin: 5px 0 0 0; color: #000; font-size: 100%; }
#FCMAHousesWorth h2 { margin: 0; border: 0; font: normal 160%/1 Georgia, serif; color: #103966; }
#FCMAHousesWorth th { color: #666; }
#FCMAHousesWorth tbody,
#FCMAHousesWorth tfoot    { background-color: #fff; display: inline-block; padding-left: 10px; padding-right: 10px; }
#FCMAHousesWorth thead    { background-position: 0 -10349px; }
#FCMAHousesWorth tfoot th { padding-left: 20px; margin-left: 20px; font-weight: 700; background-position: 0 -10321px; border-bottom: 0; }
#FCMAHousesWorth thead th { padding-top: 15px; padding-bottom: 15px; }

#FCMAHousesWorth thead th,
#FCMAHousesWorth tfoot th { width: 540px; }

#FCMAHousesWorth tbody th,
#FCMAHousesWorth tbody td { width: 255px; }

#FCMAHousesWorth tbody th { padding-left: 10px; }
#FCMAHousesWorth tbody td { margin-right: 10px; }