Project

General

Profile

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

    
3
.calendar {
4
  position: relative;
5
  display: none;
6
  border: 1px solid;
7
  border-color: #fff #000 #000 #fff;
8
  font-size: 11px;
9
  cursor: default;
10
  background: Window;
11
  color: WindowText;
12
  font-family: tahoma,verdana,sans-serif;
13
}
14

    
15
.calendar table {
16
  border: 1px solid;
17
  border-color: #fff #000 #000 #fff;
18
  font-size: 11px;
19
  cursor: default;
20
  background: Window;
21
  color: WindowText;
22
  font-family: tahoma,verdana,sans-serif;
23
}
24

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

    
27
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
28
  text-align: center;
29
  padding: 1px;
30
  border: 1px solid;
31
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
32
  background: ButtonFace;
33
}
34

    
35
.calendar .nav {
36
  background: ButtonFace url(menuarrow.gif) no-repeat 100% 100%;
37
}
38

    
39
.calendar thead .title { /* This holds the current "month, year" */
40
  font-weight: bold;
41
  padding: 1px;
42
  border: 1px solid #000;
43
  background: ActiveCaption;
44
  color: CaptionText;
45
  text-align: center;
46
}
47

    
48
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
49
}
50

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

    
54
.calendar thead .name { /* Cells <TD> containing the day names */
55
  border-bottom: 1px solid ButtonShadow;
56
  padding: 2px;
57
  text-align: center;
58
  background: ButtonFace;
59
  color: ButtonText;
60
}
61

    
62
.calendar thead .weekend { /* How a weekend day name shows in header */
63
  color: #f00;
64
}
65

    
66
.calendar thead .hilite { /* How do the buttons in header appear when hover */
67
  border: 2px solid;
68
  padding: 0px;
69
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
70
}
71

    
72
.calendar thead .active { /* Active (pressed) buttons in header */
73
  border-width: 1px;
74
  padding: 2px 0px 0px 2px;
75
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
76
}
77

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

    
80
.calendar tbody .day { /* Cells <TD> containing month days dates */
81
  width: 2em;
82
  text-align: right;
83
  padding: 2px 4px 2px 2px;
84
}
85
.calendar tbody .day.othermonth {
86
  font-size: 80%;
87
  color: #aaa;
88
}
89
.calendar tbody .day.othermonth.oweekend {
90
  color: #faa;
91
}
92

    
93
.calendar table .wn {
94
  padding: 2px 3px 2px 2px;
95
  border-right: 1px solid ButtonShadow;
96
  background: ButtonFace;
97
  color: ButtonText;
98
}
99

    
100
.calendar tbody .rowhilite td {
101
  background: Highlight;
102
  color: HighlightText;
103
}
104

    
105
.calendar tbody td.hilite { /* Hovered cells <TD> */
106
  padding: 1px 3px 1px 1px;
107
  border-top: 1px solid #fff;
108
  border-right: 1px solid #000;
109
  border-bottom: 1px solid #000;
110
  border-left: 1px solid #fff;
111
}
112

    
113
.calendar tbody td.active { /* Active (pressed) cells <TD> */
114
  padding: 2px 2px 0px 2px;
115
  border: 1px solid;
116
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
117
}
118

    
119
.calendar tbody td.selected { /* Cell showing selected date */
120
  font-weight: bold;
121
  border: 1px solid;
122
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
123
  padding: 2px 2px 0px 2px;
124
  background: ButtonFace;
125
  color: ButtonText;
126
}
127

    
128
.calendar tbody td.weekend { /* Cells showing weekend days */
129
  color: #f00;
130
}
131

    
132
.calendar tbody td.today { /* Cell showing today date */
133
  font-weight: bold;
134
  color: #00f;
135
}
136

    
137
.calendar tbody td.disabled { color: GrayText; }
138

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

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

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

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

    
152
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
153
  background: ButtonFace;
154
  padding: 1px;
155
  border: 1px solid;
156
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
157
  color: ButtonText;
158
  text-align: center;
159
}
160

    
161
.calendar tfoot .hilite { /* Hover style for buttons in footer */
162
  border-top: 1px solid #fff;
163
  border-right: 1px solid #000;
164
  border-bottom: 1px solid #000;
165
  border-left: 1px solid #fff;
166
  padding: 1px;
167
  background: #e4e0d8;
168
}
169

    
170
.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
171
  padding: 2px 0px 0px 2px;
172
  border-top: 1px solid #000;
173
  border-right: 1px solid #fff;
174
  border-bottom: 1px solid #fff;
175
  border-left: 1px solid #000;
176
}
177

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

    
180
.calendar .combo {
181
  position: absolute;
182
  display: none;
183
  width: 4em;
184
  top: 0px;
185
  left: 0px;
186
  cursor: default;
187
  border: 1px solid;
188
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
189
  background: Menu;
190
  color: MenuText;
191
  font-size: 90%;
192
  padding: 1px;
193
  z-index: 100;
194
}
195

    
196
.calendar .combo .label,
197
.calendar .combo .label-IEfix {
198
  text-align: center;
199
  padding: 1px;
200
}
201

    
202
.calendar .combo .label-IEfix {
203
  width: 4em;
204
}
205

    
206
.calendar .combo .active {
207
  padding: 0px;
208
  border: 1px solid #000;
209
}
210

    
211
.calendar .combo .hilite {
212
  background: Highlight;
213
  color: HighlightText;
214
}
215

    
216
.calendar td.time {
217
  border-top: 1px solid ButtonShadow;
218
  padding: 1px 0px;
219
  text-align: center;
220
  background-color: ButtonFace;
221
}
222

    
223
.calendar td.time .hour,
224
.calendar td.time .minute,
225
.calendar td.time .ampm {
226
  padding: 0px 3px 0px 4px;
227
  border: 1px solid #889;
228
  font-weight: bold;
229
  background-color: Menu;
230
}
231

    
232
.calendar td.time .ampm {
233
  text-align: center;
234
}
235

    
236
.calendar td.time .colon {
237
  padding: 0px 2px 0px 3px;
238
  font-weight: bold;
239
}
240

    
241
.calendar td.time span.hilite {
242
  border-color: #000;
243
  background-color: Highlight;
244
  color: HighlightText;
245
}
246

    
247
.calendar td.time span.active {
248
  border-color: #f00;
249
  background-color: #000;
250
  color: #0f0;
251
}
(3-3/10)