/* The main calendar widget.  DIV containing a table. */
div.calendar,
div.calendar * {
	margin: 0;
	padding: 0;
	border: none;
}


div.calendar {
  position:             relative;
  display:              none;
  border:               1px solid #111;
  font-size:            11px;
  color:                #aaa;
  cursor:               default;
  background:           #444;
  font-family:          tahoma,verdana,sans-serif;
  z-index: 100;
}

div.calendar table {
  border:               none;
  border-spacing:       0px;
  font-size:            11px;
  color:                #aaa;
  cursor:               default;
  background:           #444;
  font-family:          tahoma,verdana,sans-serif;
}


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

div.calendar .button {
/* "<<", "<", ">", ">>" buttons have this class   "?", "×",  */
  text-align:           center;
  padding:              2px;
  border:               none;
  margin: 0;
}

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

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

div.calendar thead .headrow {
/* Row <TR> containing navigation buttons */
}

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

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

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

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

div.calendar thead .active {
/* Active (pressed) buttons in header */
  padding:              1px;
  border:               1px solid #ccc;
  background-color:     #111;
}






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

div.calendar tbody .day {
/* Cells <TD> containing month days dates */
  width:                2em;
  text-align:           right;
  padding:              2px 4px 2px 2px;
}
div.calendar tbody .day.othermonth {
  font-size:            80%;
  color:                #aaa;
}
div.calendar tbody .day.othermonth.oweekend {
  color:                #fc3;
}

div.calendar table .wn {
  padding:              2px 3px 2px 2px;
  border-right:         1px solid #000;
  background:           #444;
  color:                #aaa;
}

div.calendar tbody .rowhilite td {
  background:           #666;
}

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

div.calendar tbody td.hilite {
/* Hovered cells <TD> */
  padding:              2px 4px 2px 2px;
  border:               none;
  background:           #111;
}

div.calendar tbody td.active {
/* Active (pressed) cells <TD> */
  padding:              1px 3px 1px 1px;
  border:               1px solid #ccc;
  background:           #111;
}

div.calendar tbody td.selected {
/* Cell showing selected date */
  font-weight:          bold;
  border:               1px solid #aaa;
  padding:              1px 3px 1px 1px;
  background:           #333;
}

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

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

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

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

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




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

div.calendar tfoot .footrow {
/* The <TR> in footer (only one right now) */
}

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

div.calendar tfoot .hilite {
/* Hover style for buttons in footer */
  border-top:           1px solid #000;
  padding:              1px;
  background:           #ccc;
}

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





/* 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:               1px solid #fff;
  background:           #444;
  color:                #aaa;
  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:           #333;
  padding:              0px;
  border-top:           1px solid #ccc;
  border-bottom:        1px solid #ccc;
}

.calendar .combo .hilite {
  background:           #333;
  color:                #fc4;
}

.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 #888;
  font-weight:          bold;
  background-color:     #444;
}

.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:     #444;
  color:                #aaa;
}

.calendar td.time span.active {
  border-color:         #fc4;
  background-color:     #111;
  color:                #fc4;
}