1 : |
dgarcia |
1 |
/* The main calendar widget. DIV containing a table. */
|
2 : |
|
|
.calendar {
|
3 : |
|
|
position: relative;
|
4 : |
|
|
display: none;
|
5 : |
|
|
border-top: 2px solid #fff;
|
6 : |
|
|
border-right: 2px solid #000;
|
7 : |
|
|
border-bottom: 2px solid #000;
|
8 : |
|
|
border-left: 2px solid #fff;
|
9 : |
|
|
font-size: 11px;
|
10 : |
|
|
color: #000;
|
11 : |
|
|
cursor: default;
|
12 : |
|
|
background: #d4d0c8;
|
13 : |
|
|
font-family: tahoma, verdana, sans-serif;
|
14 : |
|
|
}
|
15 : |
|
|
|
16 : |
|
|
.calendar table {
|
17 : |
|
|
border-top: 1px solid #000;
|
18 : |
|
|
border-right: 1px solid #fff;
|
19 : |
|
|
border-bottom: 1px solid #fff;
|
20 : |
|
|
border-left: 1px solid #000;
|
21 : |
|
|
font-size: 11px;
|
22 : |
|
|
color: #000;
|
23 : |
|
|
cursor: default;
|
24 : |
|
|
background: #d4d0c8;
|
25 : |
|
|
font-family: tahoma, verdana, sans-serif;
|
26 : |
|
|
}
|
27 : |
|
|
|
28 : |
|
|
/* Header part -- contains navigation buttons and day names. */
|
29 : |
|
|
.calendar .button { /* "<<", "<", ">", ">>" buttons have this class */
|
30 : |
|
|
text-align: center;
|
31 : |
|
|
padding: 1px;
|
32 : |
|
|
border-top: 1px solid #fff;
|
33 : |
|
|
border-right: 1px solid #000;
|
34 : |
|
|
border-bottom: 1px solid #000;
|
35 : |
|
|
border-left: 1px solid #fff;
|
36 : |
|
|
}
|
37 : |
|
|
|
38 : |
|
|
.calendar .nav {
|
39 : |
|
|
background: transparent url(menuarrow.gif) no-repeat 100% 100%;
|
40 : |
|
|
}
|
41 : |
|
|
|
42 : |
|
|
.calendar thead .title { /* This holds the current "month, year" */
|
43 : |
|
|
font-weight: bold;
|
44 : |
|
|
padding: 1px;
|
45 : |
|
|
border: 1px solid #000;
|
46 : |
|
|
background: #848078;
|
47 : |
|
|
color: #fff;
|
48 : |
|
|
text-align: center;
|
49 : |
|
|
}
|
50 : |
|
|
|
51 : |
|
|
.calendar thead .headrow { /* Row <TR> containing navigation buttons */
|
52 : |
|
|
|
53 : |
|
|
}
|
54 : |
|
|
|
55 : |
|
|
.calendar thead .daynames { /* Row <TR> containing the day names */
|
56 : |
|
|
|
57 : |
|
|
}
|
58 : |
|
|
|
59 : |
|
|
.calendar thead .name { /* Cells <TD> containing the day names */
|
60 : |
|
|
border-bottom: 1px solid #000;
|
61 : |
|
|
padding: 2px;
|
62 : |
|
|
text-align: center;
|
63 : |
|
|
background: #f4f0e8;
|
64 : |
|
|
}
|
65 : |
|
|
|
66 : |
|
|
.calendar thead .weekend { /* How a weekend day name shows in header */
|
67 : |
|
|
color: #f00;
|
68 : |
|
|
}
|
69 : |
|
|
|
70 : |
|
|
.calendar thead .hilite {
|
71 : |
|
|
/* How do the buttons in header appear when hover */
|
72 : |
|
|
border-top: 2px solid #fff;
|
73 : |
|
|
border-right: 2px solid #000;
|
74 : |
|
|
border-bottom: 2px solid #000;
|
75 : |
|
|
border-left: 2px solid #fff;
|
76 : |
|
|
padding: 0px;
|
77 : |
|
|
background-color: #e4e0d8;
|
78 : |
|
|
}
|
79 : |
|
|
|
80 : |
|
|
.calendar thead .active { /* Active (pressed) buttons in header */
|
81 : |
|
|
padding: 2px 0px 0px 2px;
|
82 : |
|
|
border-top: 1px solid #000;
|
83 : |
|
|
border-right: 1px solid #fff;
|
84 : |
|
|
border-bottom: 1px solid #fff;
|
85 : |
|
|
border-left: 1px solid #000;
|
86 : |
|
|
background-color: #c4c0b8;
|
87 : |
|
|
}
|
88 : |
|
|
|
89 : |
|
|
/* The body part -- contains all the days in month. */
|
90 : |
|
|
.calendar tbody .day { /* Cells <TD> containing month days dates */
|
91 : |
|
|
width: 2em;
|
92 : |
|
|
text-align: right;
|
93 : |
|
|
padding: 2px 4px 2px 2px;
|
94 : |
|
|
}
|
95 : |
|
|
|
96 : |
|
|
.calendar tbody .day.othermonth {
|
97 : |
|
|
font-size: 80%;
|
98 : |
|
|
color: #aaa;
|
99 : |
|
|
}
|
100 : |
|
|
|
101 : |
|
|
.calendar tbody .day.othermonth.oweekend {
|
102 : |
|
|
color: #faa;
|
103 : |
|
|
}
|
104 : |
|
|
|
105 : |
|
|
.calendar table .wn {
|
106 : |
|
|
padding: 2px 3px 2px 2px;
|
107 : |
|
|
border-right: 1px solid #000;
|
108 : |
|
|
background: #f4f0e8;
|
109 : |
|
|
}
|
110 : |
|
|
|
111 : |
|
|
.calendar tbody .rowhilite td {
|
112 : |
|
|
background: #e4e0d8;
|
113 : |
|
|
}
|
114 : |
|
|
|
115 : |
|
|
.calendar tbody .rowhilite td.wn {
|
116 : |
|
|
background: #d4d0c8;
|
117 : |
|
|
}
|
118 : |
|
|
|
119 : |
|
|
.calendar tbody td.hilite { /* Hovered cells <TD> */
|
120 : |
|
|
padding: 1px 3px 1px 1px;
|
121 : |
|
|
border-top: 1px solid #fff;
|
122 : |
|
|
border-right: 1px solid #000;
|
123 : |
|
|
border-bottom: 1px solid #000;
|
124 : |
|
|
border-left: 1px solid #fff;
|
125 : |
|
|
}
|
126 : |
|
|
|
127 : |
|
|
.calendar tbody td.active { /* Active (pressed) cells <TD> */
|
128 : |
|
|
padding: 2px 2px 0px 2px;
|
129 : |
|
|
border-top: 1px solid #000;
|
130 : |
|
|
border-right: 1px solid #fff;
|
131 : |
|
|
border-bottom: 1px solid #fff;
|
132 : |
|
|
border-left: 1px solid #000;
|
133 : |
|
|
}
|
134 : |
|
|
|
135 : |
|
|
.calendar tbody td.selected { /* Cell showing selected date */
|
136 : |
|
|
font-weight: bold;
|
137 : |
|
|
border-top: 1px solid #000;
|
138 : |
|
|
border-right: 1px solid #fff;
|
139 : |
|
|
border-bottom: 1px solid #fff;
|
140 : |
|
|
border-left: 1px solid #000;
|
141 : |
|
|
padding: 2px 2px 0px 2px;
|
142 : |
|
|
background: #e4e0d8;
|
143 : |
|
|
}
|
144 : |
|
|
|
145 : |
|
|
.calendar tbody td.weekend { /* Cells showing weekend days */
|
146 : |
|
|
color: #f00;
|
147 : |
|
|
}
|
148 : |
|
|
|
149 : |
|
|
.calendar tbody td.today { /* Cell showing today date */
|
150 : |
|
|
font-weight: bold;
|
151 : |
|
|
color: #00f;
|
152 : |
|
|
}
|
153 : |
|
|
|
154 : |
|
|
.calendar tbody .disabled {
|
155 : |
|
|
color: #999;
|
156 : |
|
|
}
|
157 : |
|
|
|
158 : |
|
|
.calendar tbody .emptycell {
|
159 : |
|
|
/* Empty cells (the best is to hide them) */
|
160 : |
|
|
visibility: hidden;
|
161 : |
|
|
}
|
162 : |
|
|
|
163 : |
|
|
.calendar tbody .emptyrow {
|
164 : |
|
|
/* Empty row (some months need less than 6 rows) */
|
165 : |
|
|
display: none;
|
166 : |
|
|
}
|
167 : |
|
|
|
168 : |
|
|
/* The footer part -- status bar and "Close" button */
|
169 : |
|
|
.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
|
170 : |
|
|
|
171 : |
|
|
}
|
172 : |
|
|
|
173 : |
|
|
.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
|
174 : |
|
|
background: #f4f0e8;
|
175 : |
|
|
padding: 1px;
|
176 : |
|
|
border: 1px solid #000;
|
177 : |
|
|
background: #848078;
|
178 : |
|
|
color: #fff;
|
179 : |
|
|
text-align: center;
|
180 : |
|
|
}
|
181 : |
|
|
|
182 : |
|
|
.calendar tfoot .hilite { /* Hover style for buttons in footer */
|
183 : |
|
|
border-top: 1px solid #fff;
|
184 : |
|
|
border-right: 1px solid #000;
|
185 : |
|
|
border-bottom: 1px solid #000;
|
186 : |
|
|
border-left: 1px solid #fff;
|
187 : |
|
|
padding: 1px;
|
188 : |
|
|
background: #e4e0d8;
|
189 : |
|
|
}
|
190 : |
|
|
|
191 : |
|
|
.calendar tfoot .active {
|
192 : |
|
|
/* Active (pressed) style for buttons in footer */
|
193 : |
|
|
padding: 2px 0px 0px 2px;
|
194 : |
|
|
border-top: 1px solid #000;
|
195 : |
|
|
border-right: 1px solid #fff;
|
196 : |
|
|
border-bottom: 1px solid #fff;
|
197 : |
|
|
border-left: 1px solid #000;
|
198 : |
|
|
}
|
199 : |
|
|
|
200 : |
|
|
/* Combo boxes (menus that display months/years for direct selection) */
|
201 : |
|
|
.calendar .combo {
|
202 : |
|
|
position: absolute;
|
203 : |
|
|
display: none;
|
204 : |
|
|
width: 4em;
|
205 : |
|
|
top: 0px;
|
206 : |
|
|
left: 0px;
|
207 : |
|
|
cursor: default;
|
208 : |
|
|
border-top: 1px solid #fff;
|
209 : |
|
|
border-right: 1px solid #000;
|
210 : |
|
|
border-bottom: 1px solid #000;
|
211 : |
|
|
border-left: 1px solid #fff;
|
212 : |
|
|
background: #e4e0d8;
|
213 : |
|
|
font-size: 90%;
|
214 : |
|
|
padding: 1px;
|
215 : |
|
|
z-index: 100;
|
216 : |
|
|
}
|
217 : |
|
|
|
218 : |
|
|
.calendar .combo .label,.calendar .combo .label-IEfix {
|
219 : |
|
|
text-align: center;
|
220 : |
|
|
padding: 1px;
|
221 : |
|
|
}
|
222 : |
|
|
|
223 : |
|
|
.calendar .combo .label-IEfix {
|
224 : |
|
|
width: 4em;
|
225 : |
|
|
}
|
226 : |
|
|
|
227 : |
|
|
.calendar .combo .active {
|
228 : |
|
|
background: #c4c0b8;
|
229 : |
|
|
padding: 0px;
|
230 : |
|
|
border-top: 1px solid #000;
|
231 : |
|
|
border-right: 1px solid #fff;
|
232 : |
|
|
border-bottom: 1px solid #fff;
|
233 : |
|
|
border-left: 1px solid #000;
|
234 : |
|
|
}
|
235 : |
|
|
|
236 : |
|
|
.calendar .combo .hilite {
|
237 : |
|
|
background: #048;
|
238 : |
|
|
color: #fea;
|
239 : |
|
|
}
|
240 : |
|
|
|
241 : |
|
|
.calendar td.time {
|
242 : |
|
|
border-top: 1px solid #000;
|
243 : |
|
|
padding: 1px 0px;
|
244 : |
|
|
text-align: center;
|
245 : |
|
|
background-color: #f4f0e8;
|
246 : |
|
|
}
|
247 : |
|
|
|
248 : |
|
|
.calendar td.time .hour,.calendar td.time .minute,.calendar td.time .ampm
|
249 : |
|
|
{
|
250 : |
|
|
padding: 0px 3px 0px 4px;
|
251 : |
|
|
border: 1px solid #889;
|
252 : |
|
|
font-weight: bold;
|
253 : |
|
|
background-color: #fff;
|
254 : |
|
|
}
|
255 : |
|
|
|
256 : |
|
|
.calendar td.time .ampm {
|
257 : |
|
|
text-align: center;
|
258 : |
|
|
}
|
259 : |
|
|
|
260 : |
|
|
.calendar td.time .colon {
|
261 : |
|
|
padding: 0px 2px 0px 3px;
|
262 : |
|
|
font-weight: bold;
|
263 : |
|
|
}
|
264 : |
|
|
|
265 : |
|
|
.calendar td.time span.hilite {
|
266 : |
|
|
border-color: #000;
|
267 : |
|
|
background-color: #766;
|
268 : |
|
|
color: #fff;
|
269 : |
|
|
}
|
270 : |
|
|
|
271 : |
|
|
.calendar td.time span.active {
|
272 : |
|
|
border-color: #f00;
|
273 : |
|
|
background-color: #000;
|
274 : |
|
|
color: #0f0;
|
275 : |
|
|
}
|