/* The main calendar widget.  DIV containing a table. */
div.calendar{
position:relative;
}
/* Header part -- contains navigation buttons and day names. */
.calendar .button{
background-color:transparent;
color:#363636;
padding:2px;/* Make the buttons seem like they're pressing */
text-align:center;/* They are the navigation buttons */
}
.calendar .nav{
background:url(menuarrow.gif) #eeddcc no-repeat 100% 100%;
}
.calendar table .wn{
background:#ffeedd;
border-right:1px solid #000000;
padding:2px 3px 2px 2px;
width:auto;
}
/* The body part -- contains all the days in month. */
.calendar tbody .day{
padding:2px 4px 2px 2px;
text-align:right;
width:2em;/* Cells <TD> containing month days dates */
}
.calendar tbody .day.othermonth{
background-color:transparent;
color:#aaaaaa;
font-size:80%;
}
.calendar tbody .day.othermonth.oweekend{
background-color:transparent;
color:#ffaaaa;
}
.calendar tbody .disabled{
background-color:transparent;
color:#999999;
}
.calendar tbody .emptycell{
visibility:hidden;/* Empty cells (the best is to hide them) */
}
.calendar tbody .emptyrow{
display:none;/* Empty row (some months need less than 6 rows) */
}
.calendar tbody .rowhilite td{
background:#ddddff;
}
.calendar tbody .rowhilite td.wn{
background:#eeffee;
}
.calendar tbody td.active{
background:#ddddcc;/* Active (pressed) cells <TD> */
padding:2px 2px 0px 2px;
}
.calendar tbody td.hilite{
background:#ffffee;/* Hovered cells <TD> */
border:1px solid #bbbbbb;
padding:1px 3px 1px 1px;
}
.calendar tbody td.selected{
background:#ffeeaa;
border:1px solid #000000;
font-weight:bold;/* Cell showing today date */
padding:1px 3px 1px 1px;
}
.calendar tbody td.today{
font-weight:bold;
}
.calendar tbody td.weekend{
background-color:transparent;
color:#ff0000;/* Cells showing weekend days */
}
.calendar td.time{
background-color:#ffeedd;
border-top:1px solid #aa8888;
padding:1px 0px;
text-align:center;
}
.calendar td.time .ampm{
text-align:center;
}
.calendar td.time .colon{
font-weight:bold;
padding:0px 2px 0px 3px;
}
.calendar td.time .hour,
.calendar td.time .minute,
.calendar td.time .ampm{
background-color:#ffffff;
border:1px solid #998888;
font-weight:bold;
padding:0px 3px 0px 4px;
}
.calendar td.time span.active{
background-color:#000000;
border-color:#ff0000;
color:#00ff00;
}
.calendar td.time span.hilite{
background-color:#886666;
border-color:#000000;
color:#ffffff;
}
.calendar tfoot .active{
background:#cc7777;/* Active (pressed) style for buttons in footer */
padding:2px 0px 0px 2px;
}
/* The footer part -- status bar and "Close" button */
.calendar tfoot .footrow{
background:#998888;
color:#000000;
text-align:center;/* The <TR> in footer (only one right now) */
}
.calendar tfoot .hilite{
background:#ffaaaa;/* Hover style for buttons in footer */
border:1px solid #ff4400;
padding:1px;
}
.calendar tfoot .ttip{
background:#ddccbb;
border-top:1px solid #665555;/* Tooltip (status bar) cell <TD> */
color:#363636;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#FFFFFF,EndColorStr=#DDDCCC);
font-weight:bold;
}
.calendar thead .active{
background-color:#cc7777;/* Active (pressed) buttons in header */
padding:2px 0px 0px 2px;
}
.calendar thead .daynames{
background-color:#ffeedd;/* Row <TR> containing the day names */
}
.calendar thead .headrow{
color:#363636;/*background:#3B86A0;*/
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#3b86a0);
font-weight:bold;
}
.calendar thead .hilite{
background-color:#ffcc86;/* How do the buttons in header appear when hover */
border:1px solid #b59345;
color:#000000;
padding:1px;
}
.calendar thead .name{
border-bottom:1px solid #665555;/* Cells <TD> containing the day names */
color:#363636;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DDDCCC,EndColorStr=#FFFFFF);
padding:2px;
text-align:center;
}
.calendar thead .title{
background:#665544;
color:#363636;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff,EndColorStr=#dddccc);
font-weight:bold;/* Pressing it will take you to the current date */
padding:2px;
text-align:center;
}
.calendar thead .weekend{
color:#ff0000;/* How a weekend day name shows in header */
}
.calendar,.calendar table{
background:#ffffdd;
border:1px solid #665555;
color:#000000;
cursor:default;
filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#DDDCCC,EndColorStr=#FFFFFF);
font-family:tahoma,verdana,sans-serif;
font-size:11px;
width:auto;
}
/* Combo boxes (menus that display months/years for direct selection) */
.combo{
background:#ffffee;
border:1px solid #665555;
color:#000000;
cursor:default;
display:none;
font-size:smaller;
left:0px;
position:absolute;
top:0px;
width:4em;
}
.combo .active{
background:#ffeeee;
border-bottom:1px solid #aa6644;
border-top:1px solid #aa6644;
font-weight:bold;
}
.combo .hilite{
background:#ffcc88;
}
.combo .label,
.combo .label-IEfix{
padding:1px;
text-align:center;
}
.combo .label-IEfix{
width:4em;
}