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