/* Pure CSS Calendar Icon */

.calicon{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:50px;
	background:#ededef;
	background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc)); 
	background: -moz-linear-gradient(top,  #ededef,  #ccc); 
	font:bold 20px/40px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#000;
	text-shadow:#fff 0 1px 0;	
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;	
	position:relative;
	-moz-box-shadow:0 2px 2px #888;
	-webkit-box-shadow:0 2px 2px #888;
	box-shadow:0 2px 2px #888;
	}
.calicon em{
	display:block;
	font:normal bold 11px/20px Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	color:#fff;
	text-shadow:#00365a 0 -1px 0;	
	background:#04599a;
	background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a)); 
	background:-moz-linear-gradient(top,  #04599a,  #00365a); 
	-moz-border-radius-bottomright:3px;
	-webkit-border-bottom-right-radius:3px;	
	border-bottom-right-radius:3px;
	-moz-border-radius-bottomleft:3px;
	-webkit-border-bottom-left-radius:3px;	
	border-bottom-left-radius:3px;	
	border-top:1px solid #00365a;
	}	
.calicon:before, .calicon:after{
	content:'';
	float:left;
	position:absolute;
	top:4px;	
	width:6px;
	height:6px;
	background:#111;
	z-index:1;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	box-shadow:0 1px 1px #fff;
	}
.calicon:before{left:7px;}	
.calicon:after{right:7px;}	
.calicon em:before, .calicon em:after{
	content:'';
	float:left;
	position:absolute;
	top:-3px;	
	width:2px;
	height:10px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	border-radius:2px;
	}
.calicon em:before{left:9px;}	
.calicon em:after{right:9px;}

/*<p class="calicon">21 <em>Mar</em></p>*/

.caldate{ background: none repeat scroll 0 0 transparent;
    border: 0 none;
    line-height: inherit;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
	color: #999999;
    text-align: center;
	font-size:14px;
	margin-bottom:5px;
	text-transform:uppercase;
	display:block;
	float:left;
	width:40px;
	height:55px;
	text-align:center;
	clear:left;
	font-size:30px;
	color:#999999;
	font-weight:bold}
.caldate .day{display:block;font-size:30px;line-height: 25px; height: 20px}
.caldate .month{font-size:14px;}
/* <span class="caldate"><span class="month">Mar</span><span class="day">21</span></span> */