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