Full Featured


Lite weight

The Markup

        <ul>
            <li class="listing">
                <img src="http://www.fiftyfoureleven.com/challenge-1.jpg" alt=""/>
                <div>
                    <span class="name">Cabo Cervera</span>
                        <span class="hide">Details</span>
                    <ul>
                        <li>Apartment</li>
                        <li>1 Bedroom</li>
                        <li>1250 sq.ft.</li>
                    </ul>
                </div>
                    <span class="hide">Actions</span>
                <ul>
                    <li class="requestPrice"><a href="javascript;">Request Price</a></li>
                    <li class="other"><a href="javascript;">View more details</a></li>
                    <li class="other"><a href="javascript;">Request Information</a></li>
                </ul>
            </li>
	</ul>

The CSS

            ul {
                margin-left:0;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;
                padding-left:0;
            }

            li.listing {
                border-top:1px solid #425D80;
                border-bottom:1px solid #425D80;
                height:96px;
                width:505px;
                padding:3px 4px 3px 2px;
                margin-bottom:15px;
                background-color:#F0F6FB;
                color:#425D80;
                list-style-type:none;
                font-size:13px;
            }

            li.listing img {
                float:left;
                border:1px solid #425D80;
            }

            li.listing div {
                float:left;
                margin-left:4px;
            }

            li.listing .name {
                display:block;
                color:#374F6A;
                width:210px;
                font-weight:normal;
                font-size:17px;
                margin-top:0;
                margin-bottom:4px;
            }

            a:link, a:active, a:visited {
                color:#425D80;
            }

            li.listing li {
                list-style-type:none;
            }

            li.listing li.unitType {
                text-transform:uppercase;
            }

            li.listing ul.actions {
                float:right;
            }

            li.listing ul.actions li {
                text-align:right;
                list-style-type:none;
            }

            li.listing ul.actions li.requestPrice {
                margin-top:4px;
                margin-bottom:25px;
            }

            li.listing ul.actions li.other {
                font-size:14px;
                margin:7px 0px 7px 0px;
            }

            li.listing ul.actions li.other a {
                background-color:#DFECF5;
                padding:2px 2px 2px 2px;
            }

            .hide {
                display:none;
            }