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