/* The main calendar widget.  DIV containing a table. */
div.calendar { position: relative; width: 230px; height: 175px; z-index: 100000; margin-top: -17px; margin-left: 30px;}
.calendar, .calendar table {margin: 0; padding: 0; border: 1px solid #556; font-size: 11px; color: #000; cursor: default; background: #fff; font-family: tahoma,verdana,sans-serif;}

/* Header part -- contains navigation buttons and day names. */
.calendar .nav { background: #778 url(menuarrow.gif) no-repeat 100% 100%;}
.calendar thead .title { /* This holds the current "month, year" */ font-weight: bold;      /* Pressing it will take you to the current date */ text-align: center; background: #fff; color: #000; padding: 2px;}
.calendar thead .headrow { /* Row <TR> containing navigation buttons */ background: #fff; color: #000;}
.calendar thead .daynames { /* Row <TR> containing the day names */ background: #fff;}


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

/* 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: 1px solid #655; background: #fff; color: #000; font-size: 90%; z-index: 100; background: #fff !important;}
.calendar .combo .label,.calendar .combo .label-IEfix { text-align: center; padding: 1px;}
.calendar .combo .label-IEfix { width: 4em;}
.calendar .combo .hilite { background: #acf;}
.calendar .combo .active { border-top: 1px solid #46a; border-bottom: 1px solid #46a; background: #88A5D0; font-weight: bold;}
.calendar td.time { border-top: 1px solid #000; padding: 1px 0px; text-align: center; background-color: #f4f0e8;}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm { padding: 0px 3px 0px 4px; border: 1px solid #889; font-weight: bold; background-color: #fff;}
.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: #000; background-color: #fff; color: #000;}
.calendar td.time span.active { border-color: #f00; background-color: #fff; color: #000;}


/* */
.calendar {background: #fff; border: 1px solid #a0a0a0; padding: 3px;}
.calendar table {margin: 0; padding: 0; border: 0; font-size: 10px; color: #000; cursor: default; background: #88A5D0; background: #fff; width: 100%;}
.calendar tbody .day.othermonth { font-size: 10px;}
.calendar .combo { position: absolute; display: none; top: 0px; left: 0px; width: 4em; cursor: default; border: 1px solid #655; background: #fff; color: #000; font-size: 10px; z-index: 100;}
.calendar thead, .calendar thead .title, .calendar .button {background: #ff6000; color: #fff;}

.calendar * {font-family: arial; font-size: 10px;}

.wn {/*display: none;*/}
.calendar thead .name {background: #fff; color: #000; font-weight: bold; padding: 10px 0 5px 0; font-size: 11px;}
.calendar tbody .day {background: #fff; color: #000;}
.calendar tbody .weekend { color: #999;}
.calendar tbody td {padding: 2px; border: 1px solid #fff; text-align: center; vertical-align: middle;}
.footrow {display: none;}
.calendar tbody, .calendar theader, .calendar tfooter {background: #fff;}
.calendar tbody td.selected, .calendar tbody td.hilite {border: 1px solid #a0a0a0; color: red; background: #fff;}
.calendar tbody .rowhilite td {background: #f7f7f7;}

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */ text-align: center; padding: 2px;}
.calendar .button * {color: #fff;}

.calendar thead .hilite { /* How do the buttons in header appear when hover */ cursor: pointer; color: red; border: none;}
.calendar tbody .disabled { color: #999; }
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */visibility: hidden;}
.calendar tbody td.active { /* Active (pressed) cells <TD> */padding: 2px 2px 0px 2px; border-top: 1px solid #000; border-right: 1px solid #fff; border-bottom: 1px solid #fff; border-left: 1px solid #000;}
.calendar tbody td.today { /* Cell showing today date */font-weight: bold; font-size: 11px;}