div.calendar {
	background: #FFFFFF;
	border: 1px solid #1a67b2;
	font-size: 11px;
	width: 288px;
}

div.calendar * {
    font-size: 10.5px;
}

div.calendar table {
    clear: none;
}

.calendar, .calendar table {
	cursor: default;
}

.calendar table {
	float: left;
	width: 144px;
}

.calendar table {
	border-right: 1px solid #0C6CBB;
}

.calendar table.last {
	border-right: none;
}

.calendar table td.last {
	padding-right: 3px;
}

.calendar table.last td.last {
	padding-right: 2px;
}

.calendar table td.first {
	padding-left: 0px;
}

.calendar table.first td.first {
	padding-left: 0px;
}

div.calendar td.nav.left { float: none; }

.calendar .button { /* "<<", ">>" buttons have this class */
	color: #fff;
	text-align: center;
	background-color: #0c6cbb;
}

.calendar .nav {
	font-size: large;
}

.calendar thead .title { /* This holds the current "month year" */
	font-size: 11px;
	color: #fff;
	font-weight: bold;
	text-align: center;
	padding: 2px 0;
	background-color: #0c6cbb;
}

.calendar thead .weekend,
.calendar thead .name { /* Cells <TD> containing the day names */
	color: #fff;
	padding: 2px 1px 2px 0;
	background-color: #a0a6ab;
	text-align: center;
}

.calendar tbody .day { /* Cells <TD> containing month days dates */
	width: 1.4em;
	text-align: center;
	padding: 1px 2px 1px 0px;
	cursor: pointer;
}

.calendar tbody .invalid { /* Cells <TD> containing days that can't be
selected. */
	color: #aaa;
	cursor: default;
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
	background: #C6E4FC;
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
	background: #f89838;
}

.calendar tbody td.today {
	font-weight: bold;
}

.calendar tbody .emptycell { /* Empty cells (the best is to hide them)
*/
	visibility: hidden;
}

.calendar .cal_arrow {
	font-size: large;
	color: #FFF;
	cursor: pointer;
}