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

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

/**
 * @todo Figure out whether the orange background shown on mock-ups
 * is really necessary.  If so, alter this file and JS to hide the text
 * if arrows are not displayed.
 */
.calendar .button { /* "<<", ">>" buttons have this class */
	color: #fff;
	text-align: center;
	cursor: pointer;
	background-color: #336;
}

.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;
	background-color: #336;
}


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

.calendar tbody .day { /* Cells <TD> containing month days dates */
	width: 1.4em;
	text-align: right;
	padding: 1px 2px 1px 1px;
	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;
}