MSN/PDP FAH Widget

by ritcheyer

HTML

<!DOCTYPE>
<html>
    <head>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">
        <title>FAH/MSN Widget</title>
        <link rel="stylesheet" href="css/rdcwdgt.css" type="text/css" media="screen" />
    </head>
    <body>
        <div class="rdcwdgt fah">
            <h6>Find a home</h6>
            <p>The most comprehensive source for real estate listings.</p>
            <fieldset>
                <label for="fahHomeType">Home Type</label>
                <select id="fahHomeType">
                    <option value="">choose</option>
                    <option value="">option1</option>
                    <option value="">option2</option>
                </select>
                <label for="fahHomeLoc">Location</label>
                <input type="text" id="fahHomeLoc" class="full" />
                <ul>
                    <li><a href="#" title="Search by MLS#">Search by MLS#</a></li>
                    <li><a href="#" title="Advanced Search">Advanced Search</a></li>
                </ul>
                <a href="#" title="Search" class="button">Search</a>
            </fieldset>
            <ul class="extras">
                <li><a href="#" title="something intelligent">Morbi leo risus, porta ac consectetur ac</a></li>
                <li><a href="#" title="something intelligent">Morbi leo risus, porta ac consectetur ac</a></li>
                <li><a href="#" title="something intelligent">Morbi leo risus, porta ac consectetur ac</a></li>
            </ul>
        </div>
        <div class="rdcwdgt fah msn">
            <h6 class="logo">Find a home</h6>
            <p>The most comprehensive source for real estate listings.</p>
            <fieldset>
                <label for="fahHomeLoc">Location</label>
                <input type="text" id="fahHomeLoc" class="full" />
                <div class="youGotOptions">
                    <span>
                        <label for="fahMaxPrice">Max Price</label>
                 ...

CSS

/* -- setting up browser reset ---------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { margin: 0; padding: 0; }
body { font-size: 62.5%; padding: 0px; font-family: Arial, Helvetica, sans-serif; color: #3c404e; }
/* -- end browser reset ----------------- */

/*---- TEMPORARY ONLY ----*/
body { margin: 40px; }

/* -- setting up typography and colors -- */
.rdcwdgt.fah h6 {
    color: #103C69;
    font: normal 250% Georgia, serif;
}
.rdcwdgt.fah,
.rdcwdgt.fah p { font-size: 110%; }
.rdcwdgt.fah fieldset li a,
.rdcwdgt.fah .extras li,
.rdcwdgt.fah .extras a { color: #fff; }
/* -- end typography -------------------- */

/* ultra basic structure */
.rdcwdgt {
    width: 300px;
    min-height: 250px;
    position: relative;
}

/* background images */
.rdcwdgt.fah,
.rdcwdgt.fah fieldset,
.rdcwdgt.fah .logo { background: url('http://move/fah_widget/img/sprite_fah.png') no-repeat 0 0; }

/* background image positioning */
.rdcwdgt.fah       { background-position: -75px 0; }
.rdcwdgt.fah .logo { background-position: 16px  -311px; }
.rdcwdgt.fah fieldset { background-position: bottom right; }

/* combined attributes for FAH widget */
.rdcwdgt.fah h6,
.rdcwdgt.fah p,
.rdcwdgt.fah fieldset { padding: 10px 10px 0; }
.rdcwdgt.fah fieldset,
.rdcwdgt.fah .youGotOptions { overflow: hidden; }
.rdcwdgt.fah label,
.rdcwdgt.fah input,
.rdcwdgt.fah select { display: block; }

/* additional styling for FAH widget */
.rdcwdgt.fah {
    background-color: #6bab4d;

    border-radius:         5px;
    -moz-border-radius:    5px;
    -webkit-border-radius: 5px;
}
.rdcwdgt.fah p {
    max-width: 180px;
    margin: 0;
    padding-top: 0;
}
.rdcwdgt.fah input { padding: 4px; }
.rdcwdgt.fah input.full { width: 98%; }
.rdcwdgt.fah fieldset { margin-top: 40px; border: 0; }
.rdcwdgt.fah fieldset ol,
.rdcwdgt.fah fieldset ul,
.rdcwdgt.fah fieldset li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.rdcwdgt.fah...