Date time stamp using jquery ui framework

If you are using jquery ui framework then you can show you date time in a cool way. The final result will look like this,

It will of course depend on what theme you are using. Here it goes.

HTML

Apr ´10
    

25th


1:05 pm

CSS

.date {
 width: 55px;
 text-align:center;
 font-family: cursive;
}

.date .ui-widget-header {
 padding: 2px 5px 2px 5px;
 font-size: .9em !important;
}

.day, .time {
 font-size: .8em !important;
}

.date hr {
 margin: 0px;
 border: 0;
 height: 1px;
 background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0)); 
 background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0)); 
 background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0)); 
 background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(31,52,60,0.75), rgba(0,0,0,0));
}

sup, sub {
 vertical-align: baseline;
 position: relative;
 top: -0.4em;
}
sub { top: 0.4em; }

The style of hr element will of course vary for different theme.