/* The main calendar widget.  DIV containing a table. */
div.calendar 
{ 
	position: relative; 
}



.calendar, .calendar table 
{
	border:				solid 1px #562921;
	background:			white;
	color:				#562921;
	font-family:		Cambria, Times New Roman;
	font-size:			11px;
	cursor:				default;
}



/* Header part -- contains navigation buttons and day names. */

/*	"<<", "<", ">", ">>" buttons have this class
	They are the navigation buttons
	Make the buttons seem like they're pressing */
.calendar .button 
{								
	text-align:			center;		
	padding:			2px;
}



.calendar .nav 
{
	background:			white url(menuarrow.gif) no-repeat 100% 100%;
}



 /* This holds the current "month, year. Pressing it will take you to the current date */
.calendar thead .calendartitle
{
	padding:			2px;
	border:				solid 1px #562921;
	background:			white;
	font-weight:		bold;
	text-align:			center;
}



/* Row <TR> containing navigation buttons */
.calendar thead .headrow 
{ 
	background:			white;
}



/* Row <TR> containing the day names */
.calendar thead .daynames 
{ 
	background:			#FFE2A6;
}



/* Cells <TD> containing the day names */
.calendar thead .name 
{ 
	border-bottom:		solid 1px #FFE2A6;
	padding:			2px;
	text-align:			center;
}



/* How a weekend day name shows in header */
.calendar thead .weekend 
{
}



/* How do the buttons in header appear when hover */
.calendar thead .hilite 
{
	border:				1px solid #FFD277;
	padding:			1px;
	background-color:	#FFF4DF;
}



/* Active (pressed) buttons in header */
.calendar thead .active 
{ 
	background-color:	#FFD277;
	padding:			2px 0px 0px 2px;
}



/* The body part -- contains all the days in month. */

/* Cells <TD> containing month days dates */
.calendar tbody .day 
{ 
	width:				2em;
	text-align:			right;
	padding:			2px 4px 2px 2px;
}



.calendar tbody .othermonth 
{
	width:				2em;
	padding:			2px 4px 2px 2px;	
	background:			#FFF4DF;
	color:				#CF7767;
	text-align:			right;
}



.calendar tbody .oweekend
{
	color:				#F4777D;
}



.calendar table .wn 
{
	padding:			2px 3px 2px 2px;
	border-right:		solid 1px #FFE2A6;
	background:			#FFE2A6;
}



.calendar tbody .rowhilite td 
{
	background:			#FFE2A6;
}



.calendar tbody .rowhilite td.wn 
{
	background:			#FFF4DF;
}



/* Hovered cells <TD> */
.calendar tbody td.hilite 
{ 
	padding:			1px 3px 1px 1px;
	border:				1px solid #FFD277;
	background:			#FFF4DF;
}



/* Active (pressed) cells <TD> */
.calendar tbody td.active 
{ 
	background:			#d1d1d1;
	padding:			2px 2px 0px 2px;
}



/* Cell showing today date */
.calendar tbody td.selected 
{	
	border:				1px solid black;
	padding:			1px 3px 1px 1px;
	background:			white;
	font-weight:		bold;
}



/* Cells showing weekend days */
.calendar tbody td.weekend 
{ 
	color:				#ED1C24;
}



/* Cell showing selected date */
.calendar tbody td.today 
{ 
	font-weight:		bold;
}



.calendar tbody .disabled 
{ 
	color:				#999999; 
}



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



.calendar tbody .emptyrow /* Empty row (some months need less than 6 rows) */
{ 
	display:			none;
}



/* The footer part -- status bar and "Close" button */

/* The <TR> in footer (only one right now) */
.calendar tfoot .footrow 
{ 
	text-align:			center;

}



/* Tooltip (status bar) cell <TD> */
.calendar tfoot .ttip 
{
	border-top:			solid 1px #FFE2A6;
	padding:			1px;

}



/* Hover style for buttons in footer */
.calendar tfoot .hilite 
{
	border:				solid 1px #FFE2A6;
	padding:			1px;
	background:			#FFE2A6;
}



/* Active (pressed) style for buttons in footer */
.calendar tfoot .active 
{
	padding:			2px 0px 0px 2px;
	background:			#FFD277;
}



/* Time part */

.calendar td.time 
{
	border-top:			solid 1px #FFE2A6;
	padding:			1px 0px;
	text-align:			center;
}



.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm 
{
	border:				solid 1px #FFE2A6;
	padding:			0px 3px 0px 4px;
	background-color:	white;
	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 
{
	border-color:		#FFE2A6;
	background-color:	#FFE2A6;
}



.calendar td.time span.active 
{
	border-color:		#FFD277;
	background-color:	#FFE2A6;
}



/* Combo boxes (menus that display months/years for direct selection) */

.calendar .combo 
{
	position:			absolute;
	display:			none;
	top:				0px;
	left:				0px;
	width:				4em;
	cursor:				default;
	border:				solid 1px #FFE2A6;
	background:			#FFE2A6;
	font-size:			90%;
	z-index:			100;
}



.calendar .combo .label,
.calendar .combo .label-IEfix 
{
	text-align:			center;
	padding:			1px;
}



.calendar .combo .label-IEfix 
{
	width:				4em;
}



.calendar .combo .hilite 
{
	background:			#FFF4DF;
}



.calendar .combo .active 
{
	border-top:			solid 1px #FFE2A6;
	border-bottom:		solid 1px #FFE2A6;
	background:			#FFE2A6;
	font-weight:		bold;
}