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

div.calendar {
	position: relative;
}

.calendar table {
  border: 1px solid #BFC5C7;
  font-size: 11px;
  color: #FFFFFF; /* this is the color of ? and the x in the top row*/
  cursor: default;
/*  background: #666666;*/ /* this is the Background in the top row*/
  background-color: transparent !important;
  background-image: url('/images/calendar/calendar-background.png') !important;
  background-position: 0px 0px;
  font-family: tahoma,verdana,sans-serif;
/*  border-collapse: collapse; */
}

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

.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
  text-align: center;    /* They are the navigation buttons */
  padding: 2px;          /* Make the buttons seem like they're pressing */
}

.calendar .nav {
  background: url(http://static.weblife1.com/images/calendar/menuarrow.gif) no-repeat 100% 100%;
  /* his background gives the arrows in the second row the color
	 keep an eye on the image!!!! */
}

.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: #000;*/ /*background for the current month and year (first Line)*/
  color: #fff; /*Font-Color for the current month and year (first Line)*/
  padding: 9px 2px;
}

.calendar thead .headrow { /* Row <TR> containing navigation buttons */
/*  background: #666;*/ /*this is the background of the "today"-Button */
  color: #fff;	/* this is the font-color of the "today"-button */
}

.calendar thead .daynames { /* Row <TR> containing the day names */
  background: #252628 ; /* this is the background for the daynames (mo, di mi do fr..)*/
}

.calendar thead .name { /* Cells <TD> containing the day names */
  border-top: 1px solid #ffffff;  /* this border is the line between the navigation daynames (use "0px" to hide)*/
  border-bottom: 1px solid #8E9193; /* this border is the line between the daynames (see above) and the calendar-days*/
  padding: 2px;
  text-align: center;
  color: #fff; /* this is the color of week-days (weekend see below!)*/
}

.calendar thead .weekend { /* How a weekend day name shows in header */
  color: #FFFEC5; /*Color of the weekend-day, (Sa,So) 2nd row*/
}

.calendar thead .hilite { /* How do the buttons in header appear when hover */
/*  background-color: #eee; */ /* background-color when a button in the first 3 rows is "over" */
/*  color: #000; */ /* Font-color when a button (n the first 3 rows) is "over" */
/*  border: 0px solid #fff; */ /* border when a button (n the first 3 rows) is "over" */
}

.calendar thead .active { /* Active (pressed) buttons in header */
/*  background-color: #ccc;*/ /* background-color when a button (n the first 3 rows) is been clicked */
/*  color: #000; */ /* font-color when a button in the first 3 rows is clicked */
  padding: 2px 0px 0px 2px;
}

/* The body part -- contains all the days in month. */
.calendar tbody td {
/*	border-top: 1px solid #8E9193; */
/*	border-bottom: 1px solid #8E9193; */
}

.calendar tbody .day { /* Cells <TD> containing month days dates */
  width: 2em;
  color: #FFFFFF; /* this is the color of the weekdays-numbers*/
  text-align: right;
  padding: 2px 4px 2px 2px;
}
.calendar tbody .day.othermonth {
  font-size: 80%;
  color: #aaa; /* this is used, when the WEEK-days of the last/next month are also shown!*/
}
.calendar tbody .day.othermonth.oweekend {
  color: #ffeecc; /* this is used, when the days on a WEEKEND of the last/next month are also shown!*/
}

.calendar table .wn {
  padding: 2px 3px 2px 2px;
/*  border-left: 1px solid #BFC5C7; */
  background: #252628;  /* this is the row with the calender-week-numbers*/
}

.calendar tbody .rowhilite td {
  color:#fff; /* the color of the text (the numbers), when week-number is over*/
  background: #656567; /* this is, when the calender-week-number is "over" */
}

.calendar tbody .rowhilite td.wn {
  background: #434345; /* This is the background of the current week number, when the week is "hover" */
}

.calendar tbody td.hilite { /* Hovered cells <TD> */
/*  background: #ccc; */ /* this is the background of the cell with the current day when the mouse is over it */
  color:#fff; /* this is the font-color of the text in the cell with the current day when the mouse is over it */
  padding: 0px 2px 0px 0px;
  border: 1px solid #fff; /* this is the border around the cell, use 0px to deactivate*/
}

.calendar tbody td.active { /* Active (pressed) cells <TD> */
/*  background: #aaa;*/ /* Background when a date-number-cell is "down" (on click) - Same as "Over" the 10 rows above*/
  padding: 2px 2px 0px 2px;
}

.calendar tbody td.selected { /* this is for the cell, that shows the "current-selected"-date...*/
  font-weight: bold;  /* show "current-selected"-date bold*/
/*  border: 1px solid #000000; */  /* the border around the cell*/
/*  padding: 1px 3px 1px 1px; */
  background: #fff; /* the background - color*/
  color: #000 !important; /* the font-color*/
}

.calendar tbody td.weekend { /* Cells showing weekend days */
  color: #FFFEC5; /* this is the color of the numbers on WEEKEND-Days*/
}

.calendar tbody td.today { /* Cell showing selected date */
  font-weight: bold;
  background: #891112; /* this font-color is used for the "today"-day, when showing current month, but not selected "today"*/
	/* you may use background:#<yourfont>; to highlight it too!*/
}

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

.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) */
  text-align: center;
/*  background: #556;*/
  color: #fff;
}

.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
/*  background: #ddd;*/ /* background of the Tooltip-bar*/
/*  color: #445;*/ /* fontcolor of the tool-tip-text*/
  border-top: 1px solid #000; /* border around the tool-tip-box*/
  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 #000; /* border of the combo-box for selection of the month/year */
  background: #ccc; /* background of the combo-box for selection of the month/year */
  color: #000; /* font-color of the combo-box for selection of the month/year */
  font-size: 90%;
  z-index: 100;
}

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

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

.calendar .combo .hilite {
  background: #999; /* color of the highlighted selection in the combo-box (month/year) -> "Over"-status*/
/*
  you might also use
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  to highlight it more...
*/

}

.calendar .combo .active {  /* configure the current selection in the combobox , when it's selected -> "down"-status*/
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  background: #eee;
  font-weight: bold;
}


/* now we will configure the timeline*/
.calendar td.time {
  border-top: 1px solid #000; /*this is the border on top-side()*/
  padding: 1px 0px;
  text-align: center;
/*  background-color: #333;*/ /* Background-color of the time-selection-row*/
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
  padding: 0px 3px 0px 4px;
  border: 1px solid #000; /*this is the border around the time-fields, when it is NOT selected!*/
  font-weight: bold;
  color:#000;  /*this is the timefield-fontcolor, when it is NOT selected!*/
/*  background-color: #fff;*/ /*this is the the time-fields Background, when it is NOT selected!*/
}

.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; /* This is the border, when the time-field is "mouse-over"*/
/*  background-color: #000;*/ /*this is the background, when the time-field is "mouse-over"*/
  color: #fff; /*this is the fontcolor, when the time-field is "mouse-over"*/
}

.calendar td.time span.active {
  border-color: #f00; /* This is the border, when the time-field is active, this means, the time is changed!*/
/*  background-color: #000; *//* This is the cell-background, when the time-field is active, this means, the time is changed!*/
  color: #ff0000; /* This is the fontcolor, when the time-field is active, this means, the time is changed!*/
}