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
  width: 20.225em;
14
}
15

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

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

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

    
37
.calendar .nav {
38
  background: #DDDDDD url(menuarrow.gif) no-repeat 100% 100%;
39
}
40

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

    
50
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
51
height: 0.525em;
52
}
53

    
54
.calendar thead .daynames { /* Row <TR> containing the day names */
55

    
56
}
57

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

    
66
.calendar thead .weekend { /* How a weekend day name shows in header */
67
  color: #f00;
68
}
69

    
70
.calendar thead .hilite { /* How do the buttons in header appear when hover */
71
  border: 2px solid;
72
  padding: 0px;
73
  border-color: ButtonHighlight ButtonShadow ButtonShadow ButtonHighlight;
74
}
75

    
76
.calendar thead .active { /* Active (pressed) buttons in header */
77
  border-width: 1px;
78
  padding: 2px 0px 0px 2px;
79
  border-color: ButtonShadow ButtonHighlight ButtonHighlight ButtonShadow;
80
}
81

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

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

    
97
.calendar table .wn {
98
  padding: 2px 3px 2px 2px;
99
  border-right: 1px solid ButtonShadow;
100
  background: ButtonFace;
101
  color: ButtonText;
102
}
103

    
104
.calendar tbody .rowhilite td {
105
  background: Highlight;
106
  color: HighlightText;
107
}
108

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

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

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

    
132
.calendar tbody td.weekend { /* Cells showing weekend days */
133
  color: #f00;
134
}
135

    
136
.calendar tbody td.today { /* Cell showing today date */
137
  font-weight: bold;
138
  color: #00f;
139
}
140

    
141
.calendar tbody td.disabled { color: GrayText; }
142

    
143
.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
144
  visibility: hidden;
145
}
146

    
147
.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
148
  display: none;
149
}
150

    
151
/* The footer part -- status bar and "Close" button */
152

    
153
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
154
}
155

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

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

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

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

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

    
200
.calendar .combo .label,
201
.calendar .combo .label-IEfix {
202
  text-align: center;
203
  padding: 1px;
204
}
205

    
206
.calendar .combo .label-IEfix {
207
  width: 4em;
208
}
209

    
210
.calendar .combo .active {
211
  padding: 0px;
212
  border: 1px solid #000;
213
}
214

    
215
.calendar .combo .hilite {
216
  background: Highlight;
217
  color: HighlightText;
218
}
219

    
220
.calendar td.time {
221
  border-top: 1px solid ButtonShadow;
222
  padding: 1px 0px;
223
  text-align: center;
224
  background-color: ButtonFace;
225
}
226

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

    
236
.calendar td.time .ampm {
237
  text-align: center;
238
}
239

    
240
.calendar td.time .colon {
241
  padding: 0px 2px 0px 3px;
242
  font-weight: bold;
243
}
244

    
245
.calendar td.time span.hilite {
246
  border-color: #000;
247
  background-color: Highlight;
248
  color: HighlightText;
249
}
250

    
251
.calendar td.time span.active {
252
  border-color: #f00;
253
  background-color: #000;
254
  color: #0f0;
255
}
(4-4/11)