another css3 pricing table ui element

http://codepen.io/arkev/pen/EDeuG

by Ali Khaled

HTML

<div id="pricing-table" class="clear">
    <div class="plan">
         <h3>Enterprise<span>$59</span></h3>
 <a class="signup" href="">Sign up</a> 
        <ul>
            <li><b>10GB</b> Disk Space</li>
            <li><b>100GB</b> Monthly Bandwidth</li>
            <li><b>20</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>
        </ul>
    </div>
    <div class="plan" id="most-popular">
         <h3>Professional<span>$29</span></h3>
 <a class="signup" href="">Sign up</a> 
        <ul>
            <li><b>5GB</b> Disk Space</li>
            <li><b>50GB</b> Monthly Bandwidth</li>
            <li><b>10</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>
        </ul>
    </div>
    <div class="plan">
         <h3>Standard<span>$17</span></h3>
	<a class="signup" href="">Sign up</a>

        <ul>
            <li><b>3GB</b> Disk Space</li>
            <li><b>25GB</b> Monthly Bandwidth</li>
            <li><b>5</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>
        </ul>
    </div>
    <div class="plan">
         <h3>Basic<span>$9</span></h3>
 <a class="signup" href="">Sign up</a>	
        <ul>
            <li><b>1GB</b> Disk Space</li>
            <li><b>10GB</b> Monthly Bandwidth</li>
            <li><b>2</b> Email Accounts</li>
            <li><b>Unlimited</b> subdomains</li>
        </ul>
    </div>
</div>

CSS

body {
    background: #303030;
}
#pricing-table {
    margin: 100px auto;
    text-align: center;
    width: 892px;
    /* total computed width = 222 x 3 + 226 */
}
#pricing-table .plan {
    font: 12px'Lucida Sans', 'trebuchet MS', Arial, Helvetica;
    text-shadow: 0 1px rgba(255, 255, 255, .8);
    background: #fff;
    border: 1px solid #ddd;
    color: #333;
    padding: 20px;
    width: 180px;
    /* plan width = 180 + 20 + 20 + 1 + 1 = 222px */
    float: left;
    position: relative;
}
#pricing-table #most-popular {
    z-index: 2;
    top: -13px;
    border-width: 3px;
    padding: 30px 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
    box-shadow: 20px 0 10px -10px rgba(0, 0, 0, .15), -20px 0 10px -10px rgba(0, 0, 0, .15);
}
#pricing-table .plan:nth-child(1) {
    -moz-border-radius: 5px 0 0 5px;
    -webkit-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}
#pricing-table .plan:nth-child(4) {
    -moz-border-radius: 0 5px 5px 0;
    -webkit-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}
/* --------------- */
 #pricing-table h3 {
    font-size: 20px;
    font-weight: normal;
    padding: 20px;
    margin: -20px -20px 50px -20px;
    background-color: #eee;
    background-image: -moz-linear-gradient(#fff, #eee);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));
    background-image: -webkit-linear-gradient(#fff, #eee);
    background-image: -o-linear-gradient(#fff, #eee);
    background-image: -ms-linear-gradient(#fff, #eee);
    background-image: linear-gradient(#fff, #eee);
}
#pricing-table #most-popular h3 {
    background-color: #ddd;
    background-image: -moz-linear-gradient(#eee, #ddd);
    background-image: -webkit-gradient(linear, left...