Hi everyone

I'm trying to create an HTML[5] and CSS[3] pricing table that hasrounded corners, fills and so forth, but getting myself in all sorts of knots.

The table is:

The current CSS is:

body {
   font-family: Arial, Helvetica, sans-serif;
     font-size: 0.7em;
   background: none;
}

table {
   margin: auto;
   padding: 0;
   width: 70%;
   color: #4e4e4e;
   border-spacing: 0;
   border: 1px solid #474747;
   background:#e2e2e2;
    -moz-border-radius: 1em;
   -webkit-border-radius: 1em;
   border-radius: 1em;
    -webkit-background-clip: padding-box; 
    background-clip: padding-box;
}

th, tr{
   text-align: center;
}

td,th { 
   border-left: 1px solid #474747;      
}

td:first-child,th:first-child {
   border-left:none;
}

thead tr:nth-child(2) th:first-child{
    border-left: 1px solid #474747;      
}

thead {
      padding: 0em;
background: #cdc;
   color: #fff;
    -moz-border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
   border-radius: 0.5em;
     border: 1px solid #fff;      
    -webkit-background-clip: padding-box; 
    background-clip: padding-box;
}

th {
   font-size: 0.9em;
   font-weight: normal;
}

th.rowhead{
   text-align: left;
   font-size: 1.2em;
}

th.bighead {
   font-size: 1.6em;
}

th>span {
   font-size: 4em;
}

button {
   width: 10em;
   height: 3em;
   margin: 1em;
   padding: 0;
   border: 1px solid #9e9e9e;   
   -moz-border-radius: 0.5em;
   -webkit-border-radius: 0.5em;
   border-radius: 0.5em;
   background: #cdcdcd;
   background-image: -moz-linear-gradient(top, #f0f0f0, #cdcdcd);
   background-image: linear-gradient(top, #f0f0f0, #cdcdcd);
}

Now what I am trying to achieve is based on:

http://shegystudio.deviantart.com/art/Pricing-table-206742296

Any hints and tips for me?

thanks

Ady