Text Rotation with CSS

CSS
<style type="text/css">
body
    {
    margin:0px;
    padding:0px;
    }
#main
    {
    float:left;
    width:105px;
    margin:10px;
    height:88px;
    mos-radius:10px;
    -moz-border-radius-topright:10px;
    -moz-border-radius-bottomleft:10px;
    border-radius: 15px;
    background-color:#66CC00;
    font-family:Verdana, Arial, Helvetica, sans-serif;
  
    }
#main1
    {
    float:left;
    width:105px;
    margin:10px;
    height:88px;
    mos-radius:10px;
    -moz-border-radius-topleft:10px;
    -moz-border-radius-bottomright:10px;
    border-radius: 15px;
    background-color:#00FFFF;
    font-family:Verdana, Arial, Helvetica, sans-serif;
  
    }
.date
    {
    font-size:50px;
    padding:0px;
    margin:0px;
    width:76px;
    float:left;
    text-align:center;
    }
.month
    {
    font-size:18px;
    text-align:center;
  
    }
.year
    {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    float:left;
    width:23px;
    top:32px;
    left:0px;
    font-size:17px;
    text-align:center;
    position:relative;
    }
</style>

/*Code For Internet Explorer*/

<!--[if IE]>
    <style>
        .year {
            filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
            top:9px;       
        }
      
    </style>
    <![endif]-->


HTML

<div id="main">
   <span class="date">22</span>
   <span class="year">1990</span>
   <div class="month">December</div>
</div>