CSS promo boxes

using css3 to create neat 3 line box promos

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.css">
<div class='container'>
    
    <div class='row-fluid'>
        
        <div class='center'>
    <h1>Our Membership Programs</h1>
<p>Strap line &#038; opener</p>
                <img src="http://placehold.it/750x30&text=Getting you the best in business support" class="img-polaroid">
        </div>
            
<div id="offers" class="group">
<div id="offer-one">
<h3>Quarterly Membership</h3>
<h4>only £45 per quarter</h4>
<ul>
<li>10% off regular price</li>
<li>Get all Brand courses</li>
<li>Get all Brand interviews</li>
<li>Get trained by qualified founders</li>
<li>Download or watch online</li>
<li>Get full money-back guarantee</li>
</ul>
</div>
<div id="offer-two">
<h3>Monthly Membership</h3>
<h4>only £18 per month</h4>
<ul>
<li>Great value</li>
<li>Get all Brand courses</li>
<li>Get all Brand interviews</li>
<li>Get trained by business managers</li>
<li>Download or watch online</li>
<li>Get full money-back guarantee</li>
</ul>
<p>
</div>
<div id="offer-three">
<h3>Yearly Membership</h3>
<h4>only £159 per year</h4>

<ul>
<li>35% off regular price</li>

</ul>
    <p></p>
</div>
    
    </div></div>
    
    
        </div>
    </div>

CSS

.center{margin: 0 auto; display:block;text-align:center}

ul {list-style:square}

#offers {
	float:left;
	display: block;
	margin: 20px 0;
	padding:0 0 30px 0;
	border-bottom: 1px solid #ccc;
	font-size: 15px;
}

#offers h3 {
	text-align: center;
	margin:0 0 0px 0;
	font-size: 32px;
	letter-spacing: -1px;
    color:#1f3b54
}

#offers h4 {
	text-align: center;
	margin:0 0 15px 0;
	padding:0 0 15px 0;
	font-size: 22px;
	border-bottom: 1px solid #ccc;
}


#offers ul {
	margin:0;
	padding: 0 0 0 15px;
	text-indent: 0;
}

#offers ul li {
	margin:5px 0 10px 0;
	padding:0;
}

#offers #offer-one,
#offers #offer-two,
#offers #offer-three {

  transition: background .25s ease-in-out;
  -moz-transition: background .25s ease-in-out;
  -webkit-transition: background .25s ease-in-out;
	text-shadow: 1px 1px 0px #fff;
	
	background-color: #efefef;
	
}

#offers #offer-one:hover,
#offers #offer-two:hover,
#offers #offer-three:hover {
background-color: #ffffd9;

}

#offers #offer-one,
#offers #offer-three {
	width:260px;
	border:1px solid #ccc;
	margin-top:30px;
	float:left;
	min-height:330px;
	/*box-shadow: 1px 1px 1px #ccc;*/
	color:#222;
	background-color: #f6f5e9;
	z-index: 1;
}

#offers #offer-one {
	padding:10px 20px 20px 15px;
	border-right:0;
	box-shadow: inset -5px 0px 10px 0 rgba(0,0,0,.2);
	border-radius: 10px 0 0 10px;
}

#offers #offer-three {
	padding:10px 15px 20px 20px;
	border-left:0;
	box-shadow: inset 5px 0px 10px 0 rgba(0,0,0,.2);
	border-radius: 0px 10px 10px 0;
}


#offers #offer-two {
	width:290px;
	border:4px solid #2f87d4;
	float:left;
	min-height:430px;
	margin:0 0px 0 0px;
	padding:20px 20px;	
	background-color: #fff;
    -webkit-box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 4px 1px rgba(0, 0, 0, 0.5);
	z-index: 999;
	border-radius: 10px;
}

#offers #offer-two h3 {
	font-size: 36px;
	letter-spacing: -2px;
	margin:0;
	}


.sweet-button {
	margin:40px auto 20px;
	width:...

JavaScript

$('a').click(function(){ return false});