bb5c2cbc9fb6e7332885b16599bf3c63b4a5ccac
[Plinn.git] / skins / jscalendar / calendar-win2k-cold-1.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: #c8d0d4;
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: #c8d0d4;
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: #788084;
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: #e8f0f4;
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: #d8e0e4;
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: #b8c0c4;
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: #e8f4f0;
107 }
108
109 .calendar tbody .rowhilite td {
110 background: #d8e4e0;
111 }
112
113 .calendar tbody .rowhilite td.wn {
114 background: #c8d4d0;
115 }
116
117 .calendar tbody td.hilite { /* Hovered cells <TD> */
118 padding: 1px 3px 1px 1px;
119 border: 1px solid;
120 border-color: #fff #000 #000 #fff;
121 }
122
123 .calendar tbody td.active { /* Active (pressed) cells <TD> */
124 padding: 2px 2px 0px 2px;
125 border: 1px solid;
126 border-color: #000 #fff #fff #000;
127 }
128
129 .calendar tbody td.selected { /* Cell showing selected date */
130 font-weight: bold;
131 padding: 2px 2px 0px 2px;
132 border: 1px solid;
133 border-color: #000 #fff #fff #000;
134 background: #d8e0e4;
135 }
136
137 .calendar tbody td.weekend { /* Cells showing weekend days */
138 color: #f00;
139 }
140
141 .calendar tbody td.today { /* Cell showing today date */
142 font-weight: bold;
143 color: #00f;
144 }
145
146 .calendar tbody .disabled { color: #999; }
147
148 .calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
149 visibility: hidden;
150 }
151
152 .calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
153 display: none;
154 }
155
156 /* The footer part -- status bar and "Close" button */
157
158 .calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
159 }
160
161 .calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
162 background: #e8f0f4;
163 padding: 1px;
164 border: 1px solid #000;
165 background: #788084;
166 color: #fff;
167 text-align: center;
168 }
169
170 .calendar tfoot .hilite { /* Hover style for buttons in footer */
171 border-top: 1px solid #fff;
172 border-right: 1px solid #000;
173 border-bottom: 1px solid #000;
174 border-left: 1px solid #fff;
175 padding: 1px;
176 background: #d8e0e4;
177 }
178
179 .calendar tfoot .active { /* Active (pressed) style for buttons in footer */
180 padding: 2px 0px 0px 2px;
181 border-top: 1px solid #000;
182 border-right: 1px solid #fff;
183 border-bottom: 1px solid #fff;
184 border-left: 1px solid #000;
185 }
186
187 /* Combo boxes (menus that display months/years for direct selection) */
188
189 .calendar .combo {
190 position: absolute;
191 display: none;
192 width: 4em;
193 top: 0px;
194 left: 0px;
195 cursor: default;
196 border-top: 1px solid #fff;
197 border-right: 1px solid #000;
198 border-bottom: 1px solid #000;
199 border-left: 1px solid #fff;
200 background: #d8e0e4;
201 font-size: 90%;
202 padding: 1px;
203 }
204
205 .calendar .combo .label,
206 .calendar .combo .label-IEfix {
207 text-align: center;
208 padding: 1px;
209 }
210
211 .calendar .combo .label-IEfix {
212 width: 4em;
213 }
214
215 .calendar .combo .active {
216 background: #c8d0d4;
217 padding: 0px;
218 border-top: 1px solid #000;
219 border-right: 1px solid #fff;
220 border-bottom: 1px solid #fff;
221 border-left: 1px solid #000;
222 }
223
224 .calendar .combo .hilite {
225 background: #048;
226 color: #aef;
227 }
228
229 .calendar td.time {
230 border-top: 1px solid #000;
231 padding: 1px 0px;
232 text-align: center;
233 background-color: #e8f0f4;
234 }
235
236 .calendar td.time .hour,
237 .calendar td.time .minute,
238 .calendar td.time .ampm {
239 padding: 0px 3px 0px 4px;
240 border: 1px solid #889;
241 font-weight: bold;
242 background-color: #fff;
243 }
244
245 .calendar td.time .ampm {
246 text-align: center;
247 }
248
249 .calendar td.time .colon {
250 padding: 0px 2px 0px 3px;
251 font-weight: bold;
252 }
253
254 .calendar td.time span.hilite {
255 border-color: #000;
256 background-color: #667;
257 color: #fff;
258 }
259
260 .calendar td.time span.active {
261 border-color: #f00;
262 background-color: #000;
263 color: #0f0;
264 }