/* dynarch calendar widget */

   .calendar 
   { 
      position: relative; display: none; border: 1px solid #000000; font-size: 11px;
      color: #000000; cursor: default; background: #FFFFFF; font-family: Arial, sans-serif;
   }

   .calendar table 
   {
      border: none; font-size: 11px; color: #000; cursor: default; background: #FFFFFF;
     font-family: Arial, sans-serif;
   }

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

   /* "<<", "<", ">", ">>" buttons have this class */
   .calendar .button 
   { 
      text-align: center; padding: 1px;
      border-top: 1px solid #217CCD; border-right: 1px solid #124470;
      border-bottom: 1px solid #124470; border-left: 1px solid #217CCD;
      background-color: #185B96; color: #FFFFFF;
   }

   .calendar .nav { background-color: #185B96; }

   /* This holds the current "month, year" */
   .calendar thead .title 
   { 
     font-weight: bold; padding: 1px; border: 1px solid #000;
     background: #207AC9; color: #FFFFFF; text-align: center;
   }

   .calendar thead .headrow { /* Row <TR> containing navigation buttons */ }
   .calendar thead .daynames { /* Row <TR> containing the day names */ }

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

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

   /* How do the buttons in header appear when hover */
   .calendar thead .hilite 
   { 
      border-top: 2px solid #E5A56B; border-right: 2px solid #A14D00;
      border-bottom: 2px solid #A14D00; border-left: 2px solid #E5A56B;
      padding: 0px; background-color: #D26400;
   }

   /* Active (pressed) buttons in header */
   .calendar thead .active 
   { 
      /*  padding: 2px 0px 0px 2px; */
     border-top: 2px solid #E5A56B; border-right: 2px solid #A14D00;
     border-bottom: 2px solid #A14D00; border-left: 2px solid #E5A56B;
     padding: 0px; background-color: #D26400;
   }

   /* 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 .day.othermonth { font-size: 80%; color: #aaa; }
   .calendar tbody .day.othermonth.oweekend { color: #faa; }
   .calendar table .wn { padding: 2px 3px 2px 2px; border-right: 1px solid #000; background: #FDF0C8; }
   .calendar tbody .rowhilite td { background: #FDF0C8; }
   .calendar tbody .rowhilite td.wn { background: #FDF0C8; }
   /* Cells showing weekend days */
   .calendar tbody td.weekend { color: #FCC600; }
   /* Hovered cells <TD> */
   .calendar tbody td.hilite 
   {  
      padding: 1px 3px 1px 1px; border: 1px solid; border-color: #FFFFFF; 
      background-color: #D26400; color: #FFFFFF;
   }

   /* Active (pressed) cells <TD> */
   .calendar tbody td.active 
   { 
      padding: 2px 2px 0px 2px;
      border: 1px solid; border-color: #000 #fff #fff #000;
   }

   /* Cell showing selected date */
   .calendar tbody td.selected 
   {
      font-weight: bold; padding: 2px 2px 0px 2px; border: 1px solid;
      border-color: #FFFFFF; background-color: #D26400; color: #FFFFFF;
   }



.calendar tbody td.today { /* Cell showing today date */
  font-weight: bold;
  color: #FFFFFF;
  background-color: #000000;
}

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

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

.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) */
display: none;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
  background: #e8f0f4;
  padding: 1px;
  border: 1px solid #000;
  background: #788084;
  color: #fff;
  text-align: center;
}

.calendar tfoot .hilite { /* Hover style for buttons in footer */
  border-top: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #fff;
  padding: 1px;
  background: #d8e0e4;
}

.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
  padding: 2px 0px 0px 2px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

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

.calendar .combo {
  position: absolute;
  display: none;
  width: 4em;
  top: 0px;
  left: 0px;
  cursor: default;

      border-top: 1px solid #217CCD; border-right: 1px solid #124470;
      border-bottom: 1px solid #124470; border-left: 1px solid #217CCD;
      background-color: #185B96; color: #FFFFFF;
  font-size: 90%;
  padding: 1px;
  z-index: 100;
}

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

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

.calendar .combo .active {
  background: #D26400;
  padding: 0px;
  border-top: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  border-left: 1px solid #000;
}

.calendar .combo .hilite {
  background: #048;
  color: #aef;
}

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

.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: #667;
  color: #fff;
}

.calendar td.time span.active {
  border-color: #f00;
  background-color: #000;
  color: #0f0;
}