/* First we style the container element.  */
.calendar{
	margin:.25em 10px 10px 0;
	padding-top:5px;
	float:left;
	width:65px;
	background:#c0dda8;
	background: -webkit-gradient(linear, left top, left bottom, from(#c0dda8), to(#ccc)); 
	background: -moz-linear-gradient(top,  #c0dda8,  #ccc); 
	font:bold 25px/50px Arial Black, Arial, Helvetica, sans-serif;
	text-align:center;
	color:#4b8f29;
	cursor:default;
	text-shadow:#fff 0 1px 0;	
	border-radius:3px;	
	position:relative;
	box-shadow:0 2px 2px #888;
	}

/* Em element is also styled, it contains the months name. */
.calendar em{
	display:block;
	font:normal bold 11px/30px Arial, Helvetica, sans-serif;
	color:#fff;
	text-shadow:#4e4a3d 0 -1px 0;	
	background:#4b8f29;
	background:-webkit-gradient(linear, left top, left bottom, from(#4b8f29), to(#4e4a3d)); 
	background:-moz-linear-gradient(top,  #4b8f29,  #4e4a3d); 
	border-bottom-right-radius:3px;
	border-bottom-left-radius:3px;	
	border-top:1px solid #eef10a;
	}

/* Now I am styling the pseudo elements. Containers pseudo elements (:before and :after) are used to create thos circles, "holes in te paper". */
.calendar:before, .calendar:after{
	content:'';
	float:left;
	position:absolute;
	top:5px;	
	width:8px;
	height:8px;
	background:#111;
	z-index:1;
	border-radius:10px;
	box-shadow:0 1px 1px #fff;
	}
.calendar:before{left:11px;}	
.calendar:after{right:11px;}

/* and ems pseudo elements are used to create the rings: */
.calendar em:before, .calendar em:after{
	content:'';
	float:left;
	position:absolute;
	top:-5px;	
	width:4px;
	height:14px;
	background:#dadada;
	background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa)); 
	background:-moz-linear-gradient(top,  #f1f1f1,  #aaa); 
	z-index:2;
	border-radius:2px;
	}
.calendar em:before{left:13px;}	
.calendar em:after{right:13px;}