1
/* The main calendar widget. DIV containing a table. */
3
div.calendar { position: relative; }
5
.calendar, .calendar table {
6
border: 1px solid #206A9B;
11
font-family: tahoma,verdana,sans-serif;
14
/* Header part -- contains navigation buttons and day names. */
16
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
17
text-align: center; /* They are the navigation buttons */
18
padding: 2px; /* Make the buttons seem like they're pressing */
22
background: #007ED1 url(menuarrow2.gif) no-repeat 100% 100%;
25
.calendar thead .title { /* This holds the current "month, year" */
26
font-weight: bold; /* Pressing it will take you to the current date */
33
.calendar thead tr { /* Row <TR> containing navigation buttons */
38
.calendar thead .daynames { /* Row <TR> containing the day names */
42
.calendar thead .name { /* Cells <TD> containing the day names */
43
border-bottom: 1px solid #206A9B;
49
.calendar thead .weekend { /* How a weekend day name shows in header */
53
.calendar thead .hilite { /* How do the buttons in header appear when hover */
54
background-color: #34ABFA;
56
border: 1px solid #016DC5;
60
.calendar thead .active { /* Active (pressed) buttons in header */
61
background-color: #006AA9;
62
border: 1px solid #008AFF;
63
padding: 2px 0px 0px 2px;
66
/* The body part -- contains all the days in month. */
68
.calendar tbody .day { /* Cells <TD> containing month days dates */
72
padding: 2px 4px 2px 2px;
74
.calendar tbody .day.othermonth {
78
.calendar tbody .day.othermonth.oweekend {
83
padding: 2px 3px 2px 2px;
84
border-right: 1px solid #000;
88
.calendar tbody .rowhilite td {
92
.calendar tbody .rowhilite td.wn {
96
.calendar tbody td.hilite { /* Hovered cells <TD> */
98
padding: 1px 3px 1px 1px;
99
border: 1px solid #8FC4E8;
102
.calendar tbody td.active { /* Active (pressed) cells <TD> */
104
padding: 2px 2px 0px 2px;
107
.calendar tbody td.selected { /* Cell showing today date */
109
border: 1px solid #000;
110
padding: 1px 3px 1px 1px;
115
.calendar tbody td.weekend { /* Cells showing weekend days */
119
.calendar tbody td.today { /* Cell showing selected date */
124
.calendar tbody .disabled { color: #999; }
126
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
130
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
134
/* The footer part -- status bar and "Close" button */
136
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
142
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
145
border-top: 1px solid #206A9B;
149
.calendar tfoot .hilite { /* Hover style for buttons in footer */
151
border: 1px solid #178AEB;
156
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
158
padding: 2px 0px 0px 2px;
161
/* Combo boxes (menus that display months/years for direct selection) */
170
border: 1px solid #655;
177
.calendar .combo .label,
178
.calendar .combo .label-IEfix {
183
.calendar .combo .label-IEfix {
187
.calendar .combo .hilite {
189
border-top: 1px solid #46a;
190
border-bottom: 1px solid #46a;
194
.calendar .combo .active {
195
border-top: 1px solid #46a;
196
border-bottom: 1px solid #46a;
202
border-top: 1px solid #000;
205
background-color: #E3F0F9;
208
.calendar td.time .hour,
209
.calendar td.time .minute,
210
.calendar td.time .ampm {
211
padding: 0px 3px 0px 4px;
212
border: 1px solid #889;
214
background-color: #F1F8FC;
217
.calendar td.time .ampm {
221
.calendar td.time .colon {
222
padding: 0px 2px 0px 3px;
226
.calendar td.time span.hilite {
228
background-color: #267DB7;
232
.calendar td.time span.active {
234
background-color: #000;