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

div.calendar 				{position:relative;}

.calendar,
.calendar table 			{border:1px solid #556; font-size:11px; color:#000; cursor:default; background:#F5F5F5; font-family:tahoma,verdana,sans-serif;}


/* 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;}

/* This holds the current "month, year" */
/* Pressing it will take you to the current date */
.calendar thead .title 			{font-weight:bold; text-align:center; background:#fff; color:#000; padding:2px;}

/* Row <TR> containing navigation buttons */
.calendar thead .headrow 		{background:#aaa; color:#fff;}

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

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

/* How a weekend day name shows in header */
.calendar thead .weekend 		{color:#a66;}

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

/* Active (pressed) buttons in header */
.calendar thead .active 		{background:#77c; 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; color:#456; text-align:right; padding:2px 4px 2px 2px;}

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

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

/* Cell showing today date */
.calendar tbody .selected 		{font-weight:bold; border:1px solid #000; padding:1px 3px 1px 1px; background:#fff; color:#000;}

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

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

.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;}



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

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

/* Tooltip (status bar) cell <TD> */
.calendar tfoot .ttip 			{background:#145B9F; color:#fff; border-top:1px solid #556; padding:1px;}

/* Hover style for buttons in footer */
.calendar tfoot .hilite 		{background:#aaf; border:1px solid #04f; color:#000; padding:1px;}

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



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

.combo 					{position:absolute; display:none; top:0px; left:0px; width:4em; cursor:default; border:1px solid #655; background:#def; color:#000; font-size:smaller;}
.combo .label 				{width:100%; text-align:center;}
.combo .hilite 				{background:#acf;}