Cabo Cervera
Details
Actions
A Long Apartment Building Name
Details
Actions
<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>
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;
}