CSS Semantic Challenge #1

Full Featured

Cabo Cervera

APARTMENT
1 Bedroom
1250 sq.ft.

Cabo Cervera

APARTMENT
1 Bedroom
1250 sq.ft.

Lite weight

Cabo Cervera

APARTMENT
1 Bedroom
1250 sq.ft.

The Markup

<div class="listing">
	<div class="description">
		<img src="challenge-1.jpg" width="121" height="91" alt="Cabo Cervera" />
		<h2>Cabo Cervera</h2>
		APARTMENT<br />
		1 Bedroom<br />
		1250 sq.ft.
	</div>
	<div class="links">
		<ul>
			<li class="price">
			<a href="#">Request Price</a></li>
			
			<li class="details"><span class="more"><a href="#">View more details</a>
			</span></li>
			
			<li class="request"><span class="more">
			<a href="#">Request information</a></span></li>
		</ul>
	</div>
	<br class="clearall" />
</div>

The CSS

.listing {
	background:#f0f6fb;
	border-bottom:1px solid #425d80;
	border-top:1px solid #425d80;
	color:#385069;
	font:bold 80% Verdana, Arial, Helvetica, sans-serif; 
	padding:4px 0 4px 4px;
	margin:10px 0 0 0;
	width:505px;
	voice-family: "\"}\""; voice-family: inherit;
	width: 501px;
	} html>body .listing { width: 501px; }

/* layout */

.listing .description {
	float:left;
	width:260px;
	}

.listing .links { 
	float:left;
	text-align:right;
	width:241px;
	}

.listing h2 { 
	font-size:1.25em;
	font-weight:bold;
	margin:0 0 4px 0;
	}

.listing .description img { border:0; float:left; margin-right:4px; }
.listing ul {	list-style-type:none; margin:0; padding:0; }
.listing ul li a { color:#385069; margin:0; padding:0; }
.listing ul li.price { margin-bottom:15px; }
.listing ul li.price a { background:none; text-align:right; text-decoration:underline; }
.listing ul li.details { margin-bottom:10px; }
.listing ul li.details a, .listing ul li.request a {
	background:url(arrowA.gif) no-repeat right center; 
	display:block;
	margin:0;
	padding:0 28px 0 0;
	font-size:1.1em;
	voice-family: "\"}\""; voice-family: inherit;
	display:inline;
	} 
html>body .listing ul li.details a, html>body .listing ul li.request a { display:inline; }

.listing .more { 
	background:#dfecf5;
	padding:3px;
	}

.clearall { clear:both; }