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