/* The main calendar widget.	DIV containing a table. */
.calendar { position:relative;
	display:none;
	border:1px solid;
	border-color:#fff #5A657A #5A657A #E7E3E3;
	font-size: 11px;
	color:#000;
	cursor:default;
	background:#DEEEF7;
	z-index: 201; }
.calendar table { border-top:1px solid #000;
	border-left:1px solid #000;
	font-size:11px;
	color:#000;
	cursor:default;
	background:#F7F6F4;}

/* Header part -- contains navigation buttons and day names. */
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
	text-align: center;
	padding: 1px;
	border-right: 1px solid #000;
	border-bottom: 1px solid #000;}
/* This holds the current "month, year" */
.calendar thead .title { font-weight:bold;
	padding:0px 1px;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	background:#7A8599;
	color:#fff;
	text-align:center;}

/* Cells <TD> containing the day names */
.calendar thead .name { border-bottom:1px solid #5A657A;
	padding:1px 2px;
	text-align:center;
	background:#E7E3E3;}
.calendar thead .weekend { /* How a weekend day name shows in header */
	font-weight:bold;}
.calendar thead .hilite { /* How do the buttons in header appear when hover */
	border:1px solid;
	border-color:#E7E3E3 #000 #000 #E7E3E3;
	padding:0px;
	background:#5A657A;
	color:#fff;}
.calendar thead .active { /* Active (pressed) buttons in header */
	color:#000;
	padding:1px 0 0 1px;
	border:1px solid;
	border-color:#E7E3E3 #000 #000 #E7E3E3;
	background:#D3D6DD;}

/* The body part -- contains all the days in month. */
.calendar tbody .day { /* Cells <TD> containing month days dates */
	width:2em;
	text-align:right;
	padding:2px 4px 2px 2px;}
.calendar table .wn { padding:2px 3px 2px 2px;
	border-right:1px solid #000;
	background:#D3D6DD;}
.calendar tbody .rowhilite td { background:#E7E3E3;}
.calendar tbody .rowhilite td.wn { background:#A6ADBB;}
.calendar tbody td.hilite { /* Hovered cells <TD> */
	padding:1px 3px 1px 1px;
	border:1px solid;
	border-color:#fff #000 #000 #fff;}
.calendar tbody td.active { /* Active (pressed) cells <TD> */
	background:#D3D6DD;
	padding:2px 2px 0px 2px;
	border:1px solid;
	border-color:#000 #fff #fff #000;}
.calendar tbody td.selected { /* Cell showing selected date */
	color:#5A657A;
	font-weight:bold;
	padding:2px 2px 0px 2px;
	border:1px solid;
	border-color:#000 #fff #fff #000;
	background:#D3D6DD;}
.calendar tbody td.selected a { /* Cell showing selected date */
	color:#5A657A;}
.calendar tbody td.weekend { /* Cells showing weekend days */
	font-weight:bold;
	color:#5A657A;}
.calendar tbody td.today { /* Cell showing today date */
	font-weight:bold;}
.calendar tbody .disabled { color: #999;}
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
	visibility:hidden;}
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
	display:none;}

/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */ }
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
	background:#F2F2F2;
	padding:0 1px;
	border-top:1px solid #000;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	background:#7A8599;
	color:#fff;
	text-align:center;}
.calendar tfoot .hilite { /* Hover style for buttons in footer */
	color:#fff;
	padding:1px;
	background:#5A657A;}
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
	padding:2px 0px 0px 2px;}

/* Combo boxes (menus that display months/years for direct selection) */
.combo { color:#fff;
	position:absolute;
	display:none;
	width:4em;
	top:0px;
	left:0px;
	cursor:default;
	border:1px solid;
	border-color:#E7E3E3 #5A657A #5A657A #E7E3E3;
	background:#7A8599;
	font-size:smaller;
	padding:1px;}
.combo .label { text-align:center;
	padding:0px 1px;}
.combo .active { color:#5A657A;
	background:#D3D6DD;
	padding:0px 1px;}
.combo .hilite { background:#5A657A;
	color:#F7F6F4;}