/* description: Primary component stylesheet. */

.calendar {
	font: 11px tahoma, verdana, sans-serif;
	position: relative;
	display: none;
	z-index: 20000;
}

table.titlet {
	padding: 1px;
}

td.titlet_container {
	border-top: #FFFFFF 1px solid;
	border-right: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	border-left: #FFFFFF 1px solid;
}

.calendar table.container {

}

.calendar table.main {
	border-top: #CCCCCC 1px solid;
	border-right: none;
	border-bottom: #CCCCCC 1px solid;
	border-left: #CCCCCC 1px solid;
	font-size: 11px;
	cursor: pointer;
	background-color: #EEEEEE;
	color: #000000;
	font-family: tahoma, verdana, sans-serif;
}

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

.calendar .r {
	background: url("/components/calendar/images/r.png") top left no-repeat;
}

.calendar .b {
	background: url("/components/calendar/images/b.png") top left no-repeat;
}

.calendar .br {
	background: url("/components/calendar/images/br.png") top left no-repeat;
}

.calendar .main .button { /* "<<", "<", ">", ">>" buttons have this class */
	text-align: center;
	padding: 1px;
	border: 1px solid;
	border-color: #FFFFFF #CCCCCC #CCCCCC #FFFFFF;
	background-color: #EEEEEE;
}

.calendar .titlet .button {
	text-align: left;
	padding: none;
	border: none;
	border-color: none;
	background-color: none;
}

.calendar .closeButton {
	text-align: right;
	padding: none;
	border: none;
	border-color: none;
	background-color: none;
}

.calendar .main .nav {
  background: ButtonFace url("/components/calendar/images/menu_arrow.gif") no-repeat 100% 100%;
}

.calendar thead .title { /* This holds the current "month, year" */
	text-align: center;
	font: bold 11px tahoma, verdana, sans-serif;
	padding: 0px;
	border: none;
	border-color: none;
	background-color: #EEEEEE;
}

.calendar .main .headrow .daynames { /* row <tr> containing the day names */
	font-weight: bold;
}

.calendar .main .headrow .name { /* cells <td> containing the day names */
	border: 1px solid;
	border-color: #FFFFFF #CCCCCC #CCCCCC #FFFFFF;
	padding: 1px;
	text-align: center;
	background-color: #EEEEEE;
	color: #000000;
}

.calendar .main .headrow .weekend { /* how a weekend day name shows in header */
	color: #CC0000;
	font-weight: bold;
}

.calendar .main .headrow .hilite { /* how do the buttons in header appear when hover */
	border: none;
	padding: none;
}

.calendar .main .headrow .active { /* active (pressed) buttons in header */
	border-width: 1px;
	padding: 1px;
	border-color: #CCCCCC #FFFFFF #FFFFFF #CCCCCC;
}

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

.calendar .main .day { /* cells <td> containing month days dates */
	text-align: right;
	padding: 1px 5px 1px 5px;
	border-top: #FFFFFF 1px solid;
	border-right: #CCCCCC 1px solid;
	border-bottom: #CCCCCC 1px solid;
	border-left: #FFFFFF 1px solid;
	background-color: #FFFFFF;
	width: 14px;
	height: 14px;
}
.calendar .main .day.othermonth { /* weekdays of other months (if shown) */
	color: #CCCCCC;
	border-top: #EEEEEE 1px solid;
	border-left: #EEEEEE 1px solid;
	background-color: #EEEEEE;
}
.calendar .main .day.othermonth.oweekend { /* weekend days of other months (if shown) */
	color: #fe9f9f;
	background-color: #EEEEEE;
}

.calendar .main .wn {
	padding: 1px 2px 1px 2px;
	border-right: #FF0000 1px solid;
	background-color: #EEEEEE;
	color: #000000;
}

/* hovered row <tr>
.calendar tbody .rowhilite td { 
  background-color: #D8F8D1;
  color: #000000;
}
*/

.calendar .main .headrow td.hilite { /* hovered cells <td> */
	padding: 0px 2px 0px 2px;
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #FFFFFF;
	background-color: #EBEBEB;
}

.calendar .main .headrow td.active { /* active (pressed) cells <td> */
	padding: 0px 2px 0px 2px;
	border: 1px solid;
	border-color: #CCCCCC #FFFFFF #FFFFFF #CCCCCC;
}

.calendar .main td.selected { /* cell showing selected date */
	padding: 0px 2px 0px 2px;
	border: #0000FF 1px dotted;
	background-color: #e3f5ff;
}

.calendar .main td.weekend { /* cells showing weekend days */
	color: #CC0000;
}

.calendar .main td.today { /* cell showing today's date */
	margin: 0px;
	padding: 1px 2px 1px 2px;
	border: #00CC00 1px dotted;
	color: #000000;
	background-color: #D8F8D1;
}

.calendar .main td.disabled {
	color: #BBBBBB;
}

.calendar .main .emptycell { /* empty cells */
	background-color: #DDDDDD;
	border-right: #DDDDDD 1px solid;
	border-bottom: #DDDDDD 1px solid;
}

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

/* the footer areas -- status bar and "close" button */

.calendar tfoot .footrow { /* the <tr> in footer (only one right now) */
}

.calendar tfoot .ttip { /* tooltip (status bar) cell <td> */
	background-color: #EEEEEE;
	padding: 1px;
	border-top: #FFFFFF 1px solid;
	border-left: #FFFFFF 1px solid;
	border-right: #CCCCCC 1px solid;
	color: #AAAAAA;
	text-align: center;
}

.calendar tfoot .hilite { /* hover style for buttons in footer */
	border-top: 1px solid #FFFFFF;
	border-right: 1px solid #CCCCCC;
	border-bottom: 1px solid #CCCCCC;
	border-left: 1px solid #FFFFFF;
	padding: 1px;
	background: #e4e0d8;
}

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

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

.calendar .combo {
	position: absolute;
	display: none;
	width: 4em;
	top: 0px;
	left: 0px;
	cursor: pointer;
	border: 1px solid;
	border-color: #FFFFFF #CCCCCC #CCCCCC #FFFFFF;
	background-color: #EEEEEE;
	color: #000000;
	font-size: 90%;
	padding: 1px;
	z-index: 20000;
}

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

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

.calendar .combo .active {
	padding: 0px;
	border: #00CC00 1px dotted;
	font-weight: bold;
	color: #000000;
	background-color: #D8F8D1;
}

.calendar .combo .hilite {
	padding: 0px;
	border: 1px solid;
	border-color: #CCCCCC #FFFFFF #FFFFFF #CCCCCC;
	background-color: #EEEEEE;
	font-weight: bold;
	color: #000000;
}

.calendar td.time {
	padding: 5px;
	background-color: #EEEEEE;
	/* border-left: #FFFFFF 1px solid; */
	border-top: #FFFFFF 1px solid;
	border-bottom: #DDDDDD 1px solid;
}

.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm {
	padding: 0px 3px 0px 4px;
	border: 1px solid #AAAAAA;
	font-weight: bold;
	background-color: #FFFFFF;
}

.calendar td.time .ampm {
	text-align: left;
}

.calendar td.time .colon {
	padding: 0px 2px 0px 3px;
	font-weight: bold;
}

.calendar td.time span.hilite {
	border-color: #000000;
	background-color: Highlight;
	color: HighlightText;
}

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