/* The main calendar widget.  DIV containing a table. */



div.calendar {

	position: relative;

	border: 1px solid #000;

	font-family: Arial,Verdana, sans-serif;

	font-size: 0.8em;

}



.calendar table {

	color: #ad914b;

	background-color: #f9e79f;

	border: 9px solid #c2a561;

	cursor: default;

}



/* All cells */

.calendar table td {

	text-align: center;

}



/* ====== HEADER -- contains operational and navigation buttons, and day names ====== */



/*  "?", "X" buttons (also affects "<<", "<", ">", ">>" buttons)  */

.button {

	color: #c3b16e;

	background-color: #ad914b;

}



/* Current "month, year"; pressing it will take you to the current date */

.calendar thead .title {

	color: #876022;

	background-color: #c2a561;

	padding: 2px;

	font-weight: bold;

	text-align: center;

	text-transform: uppercase;

}



/*  Navigation row: "<<", "<", "Today", ">", ">>"  */

.calendar thead .headrow .button {

	color: white;

	padding-bottom: 2px;

}



/*  Navigation buttons: "<<", "<", ">", ">>"  */

.calendar .nav {

	background-color: #ad914b;

}



/*  Hover effect for the "?", "X", "<<", "<", ">", ">>" buttons  */

.calendar thead .hilite {

	background-color: #1f1f1f;

}



/*  onclick effect for the "?", "X", "<<", "<", ">", ">>" buttons  */

.calendar thead .active {

	background-color: #c2a561;

}



/* Row <TR> containing the day names */

.calendar thead .daynames {

	border: 0 solid #999;

}



/* Cells <TD> containing the day names */

.calendar thead .name {

	color: #ad914b;

	border-bottom: 0px solid black;

	padding: 5px;

	text-align: center;

	font-weight: bold;

}



/* Weekend day name */

.calendar thead .weekend {

	color: #876022;

}



/*  Hover effect for the cells <TD> containing the day names  */

.calendar thead .daynames .hilite {

	background-color: transparent;

}



/*  onclick effect for the cells <TD> containing the day names  */

.calendar thead .daynames .active {

	background-color: transparent;

}





/* ====== BODY -- contains the dates of the month ====== */



/* Cells <TD> containing dates */

.calendar tbody .day {

	text-align: center;

	border-left: 1px solid #fff;

}



.calendar tbody .day.othermonth {

	color: #f9e79f;

	font-size: 70%;

}



.calendar tbody .day.othermonth.oweekend {

	color: #fbb;

	background-color: #c1cd23;

}



.calendar table .wn {

	visibility: hidden;

	color: #000;

	background: transparent none;

}



.calendar table .wn {

	visibility: hidden;

	color: #fcae1d;

	background: transparent none;

}



.calendar tbody td {

	margin: 0;

	padding: 0;

	width: 2em;

	height: 1.5em;

}



.calendar tbody .rowhilite td {

}



.calendar tbody .rowhilite td.wn {

	background-color: #efe;

}



/* Hovered cells <TD> */

.calendar tbody td.hilite {

	background-color: #424242;

}



/* Active (pressed) cells <TD> */

.calendar tbody td.active {

	background-color: #f9e79f;

}



/* Cell showing chosen date */

.calendar tbody td.selected {

	color: #fff;

	background-color: #424242;

	font-weight: bold;

}



/* Cells showing weekend dates */

.calendar tbody td.weekend {

	color: #876022;

	background-color: #c2a561;

	border-color: #c2a561;

}



/* Hovered cells showing weekend dates */

.calendar tbody td.weekend:hover {

	color: #c2a561;

	background-color: white;

	font-weight: bold;

}



/* Cell showing today's date */

.calendar tbody td.today {

	font-weight: bold;

}



.calendar tbody .disabled {

	color: #999;

}



/* Empty cells (the best is to hide them) */

.calendar tbody .emptycell {

	visibility: hidden;

}



/* Empty row (some months need less than 6 rows) */

.calendar tbody .emptyrow {

	display: none;

}





/* ====== FOOTER -- status bar ====== */



/* The <TR> in footer (only one right now) */

.calendar tfoot .footrow {

}



/* Tooltip (status bar) cell <TD> */

.calendar tfoot .ttip {

	color: white;

	/* Zero the text: */

	line-height: 0;

	text-indent: -999em;

	font-size: 0px;

}

/* IE<=7 fails to zero the text completely, making this TD too big */

* html .calendar tfoot .ttip {

}

*:first-child+html .calendar tfoot .ttip {

}





.calendar tfoot .hilite {

}



.calendar tfoot .active {

}





/* ====== COMBO BOXES -- menus that display months/years for direct selection ====== */



.calendar .combo {

	display: none;

	color: black;

	background-color: white;

	position: absolute;

	top: 0px;

	left: 0px;

	border: 1px solid #000;

	width: 4em;

	cursor: default;

	font-size: 90%;

}



.calendar .combo .label,

.calendar .combo .label-IEfix {

	padding: 1px;

	text-align: center;

}



.calendar .combo .label-IEfix {

	width: 4em;

}



.calendar .combo .hilite {

background-color: #ad914b;

	color: #fff;

}



.calendar .combo .active {

	background-color: #c2a561;

	border-top: 1px solid #000;

	border-bottom: 1px solid #000;

	font-weight: bold;

	color: #fff;

}



.calendar td.time {

	background-color: #fed;

	border-top: 1px solid white;

	padding: 1px 0px;

	text-align: center;

}



.calendar td.time .hour,

.calendar td.time .minute,

.calendar td.time .ampm {

	background-color: white;

	border: 1px solid #988;

	padding: 0px 3px 0px 4px;

	font-weight: bold;

}



.calendar td.time .ampm {

	text-align: center;

}



.calendar td.time .colon {

	padding: 0px 2px 0px 3px;

	font-weight: bold;

}



.calendar td.time span.hilite {

	color: white;

	background-color: #866;

	border-color: black;

}



.calendar td.time span.active {

	background-color: black;

	border-color: #f00;

}