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

.popup {border: 1px solid #30324C; width:180px;background-color: #fff;}

#calendar-container {}
#calendar-load {font-size:12px}
#siteCalendar .calendar, #siteCalendar .calendar table, .popup table, .popup table tbody td, .popup table thead td, .popup .combo .label{font-size:11px}

#siteCalendar .calendar {margin:10px 0 3px 0}
div.calendar {position:relative; margin:10px 0}

.calendar, .calendar table {font-size:14px;color:#000;cursor:default;font-family:Arial, Helvetica, sans-serif;border-collapse:collapse}
.calendar table{border:0px}

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

.calendar .button {/* "<<", "<", ">", ">>" buttons have this class */
  text-align:center;    /* They are the navigation buttons */
  padding:4px 0;          /* Make the buttons seem like they're pressing */
  cursor:pointer;  border:1px solid #79b30d}
#siteCalendar .calendar .button, .popup .button {padding:2px 0}
.calendar .nav {background:#79b30d}

.calendar thead .title {/* This holds the current "month, year" */
  font-weight:bold;      /* Pressing it will take you to the current date */
  text-align:center;border:1px solid #b7b7b7;border-bottom:0;color:#000;padding:4px;font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px}
#siteCalendar .calendar thead .title, .popup thead .title{border:medium none;font-size:11px}

.calendar thead .headrow {/* Row <TR> containing navigation buttons */
  background:#79b30d;color:#fff; font:normal bold 12px Verdana, Arial, Helvetica, sans-serif}
#siteCalendar .calendar thead .headrow, .popup thead .headrow {font-size:11px; font-weight:normal}
.calendar thead .daynames {/* Row <TR> containing the day names */
  font-weight:bold;}

.calendar thead .name {/* Cells <TD> containing the day names */
  border:1px solid #b7b7b7;padding:7px;text-align:center;font-weight:bold;color:#000}
#siteCalendar .calendar thead .name, .popup thead .name {padding:2px}
.calendar thead .weekend {/* How a weekend day name shows in header */
  color:#000}

.calendar thead .hilite {/* How do the buttons in header appear when hover */
  background-color:#ffdc65;color:#FFF}

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

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

.calendar tbody .day {/* Cells <TD> containing month days dates */
  border:1px solid #b7b7b7;width:46px; line-height:42px;color:#000;text-align:right;padding:0; text-align:center;}
#siteCalendar .calendar tbody .day, .popup tbody .day {width:25px; line-height:16px}

#date_active {color:#79B30D;cursor:pointer}
#calendar-container #date_active {color:#000; background-color:#CFE0EA}
#calendar-container .calendar tbody tr.rowhilite #date_active.hilite {background-color:#ffdc65}
.popup #notactive {cursor:pointer}

.calendar tbody .day.othermonth {font-size:80%;color:#bbb}
.calendar tbody .day.othermonth.oweekend {color:#fbb}
.calendar table .wn {padding:2px 3px 2px 2px;border-right:1px solid #b7b7b7;background:#bdf}
.calendar tbody .rowhilite td {background:#acdc7d}
.calendar tbody .rowhilite td.wn {background:#eef}
.calendar tbody td.hilite {/* Hovered cells <TD> */
  background:#ffdc65;padding:0}
.calendar tbody td.active {/* Active (pressed) cells <TD> */
  background:#ffdc65;padding:0}
.calendar tbody td.selected, #calendar-container #date_active.selected{/* Cell showing today date */
  font-weight:bold;padding:0;background:#ffba00;color:#fff}
.calendar tbody td.weekend {/* Cells showing weekend days */
  color:#000}
.calendar tbody td.today, #calendar-container #date_active.today {/* Cell showing selected date */
  font-weight:bold;color:#000}
.calendar tbody .disabled {color:#999}
.calendar tbody .emptycell {/* Empty cells (the best is to hide them) */
  border:1px solid #b7b7b7}

.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) */
  text-align:center;background:#556;color:#fff; font:normal 11px Verdana, Arial, Helvetica, sans-serif}

.calendar tfoot .ttip {/* Tooltip (status bar) cell <TD> */
  background:#fff;color:#000;border:1px solid #b7b7b7;padding:7px}
#siteCalendar .calendar tfoot .ttip, .popup tfoot .ttip {padding:2px; border:medium none}
.calendar tfoot .hilite {/* Hover style for buttons in footer */
  background:#acdc7d;border:1px solid #b7b7b7;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 #b7b7b7;background:#84ce48;color:#fff;font-size:90%;z-index:100;cursor:pointer}
.calendar .combo .label,
.calendar .combo .label-IEfix {text-align:center;padding:1px}
.calendar .combo .label-IEfix {width:4em}
.calendar .combo .hilite {background:#ffdc65}
.calendar .combo .active {background:#ffc501;font-weight:bold}
.calendar td.time {border-top:1px solid #b7b7b7;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 #b7b7b7;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:#b7b7b7;background-color:#667;color:#fff}
.calendar td.time span.active {border-color:#b7b7b7;background-color:#000;color:#0f0}