gistfile1.rhtml

<style type="text/css" media="screen">
  #spotlight {zoom:1; z-index:1;
  	width:390px; 
  	margin:5px 0 0 5px;
  	min-height:400px;
  	display: -moz-inline-stack;
  	display: inline-block;
  	vertical-align: top;
  	zoom: 1;
  	*display: inline;
  	_height: 400px;
  }

  #spotlight h1 {text-align:left; padding-left:10px;}

  .deal-item {zoom:1; z-index:1;
  	display:block;
  	position:relative;
  	background:url(../images/template/promo-gradient.png) 0 0 repeat-x; 
  	height:80px;
  	width:390px; 
  	overflow:hidden;
  	margin-bottom:10px;
  }

  #deals-heading {padding-left:98px; height:50px; display:block;position:relative;background:url(../images/template/deals-key.png) 0 0 no-repeat;}

  #deals-heading {color:#034e42; font-size:18px; font-weight:bold}

  #deals-heading .first-line {font-size:18px;line-height:1.1;}
  #deals-heading .first-line .popit {font-size:24px; color:#fb5901;}
  #deals-heading .second-line {font-size:24px;}

  .deal-item .pad {padding:5px; zoom:1; z-index:1;}
  .deal-item p {font-size:12px;}

  .img-outer {display:inline-block; vertical-align:top; border:solid 1px #000; width:64px;height:64px;overflow:hidden}

  .deal-text{zoom:1; z-index:1; font-size:12px;width:300px; display:inline-block;vertical-align:top;}
  .deal-text h2 {font-size:15px;}
  .name-description {display:inline-block; text-align:left;}
  .from-price { text-align:right; color:#f00; font-size:18px}
  .from-price small{font-size:11px; color:#000; display:block;}
</style>

<!-- close button should load back the default (this content)-->
<li class="deal-item"> 
  <div class="pad">
    <div class="img-outer">
    <%= property_image(deal) -%>
    </div>
    <div class="deal-text">
      <%= content_tag(:h2, (link_to deal.title, property_path(deal))) %>
      <p><%= deal.short_description -%></p>
      <div class="from-price">
        <strong>$100.00</strong>
        <small>Lowest Avg Nightly Rate</small>
      </div>
    </div>
  </div>
</li>