1/**
2 * DokuWiki Plugin datepicker (CSS-Print Component)
3 *
4 * @license GPL 2 (http://www.gnu.org/licenses/gpl.html)
5 * @author  lisps
6 */
7/* The main calendar widget.  DIV containing a table. */
8div.calendar { position: relative; z-index:100;}
9
10
11img.datepicker {
12	width:20px;
13	padding:0px 0px;
14}
15
16.calendar, .calendar table {
17  border: 1px solid #8CACBB;
18  font-size: 11px;
19  color: #000;
20  cursor: default;
21  background: #Ffffff;
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;    /* They are the navigation buttons */
29  padding: 2px;          /* Make the buttons seem like they're pressing */
30}
31
32.calendar .nav {
33  background: #DEE7EC url(script/jscalendar-1.0/menuarrow2.gif) no-repeat 100% 100%;
34}
35
36.calendar thead .title { /* This holds the current "month, year" */
37  font-weight: bold;      /* Pressing it will take you to the current date */
38  text-align: center;
39  background: #DEE7EC;
40  color: #000;
41  padding: 2px;
42}
43
44.calendar thead tr { /* Row <TR> containing navigation buttons */
45  background: #DEE7EC;
46  color: #000;
47}
48
49.calendar thead .daynames { /* Row <TR> containing the day names */
50  background: #F5F5F5;
51}
52
53.calendar thead .name { /* Cells <TD> containing the day names */
54  border-bottom: 1px solid #206A9B;
55  padding: 2px;
56  text-align: center;
57  color: #000;
58}
59
60.calendar thead .weekend { /* How a weekend day name shows in header */
61  color: #a66;
62}
63
64.calendar thead .hilite { /* How do the buttons in header appear when hover */
65  background-color: #8CACBB;
66  color: #000;
67  border: 1px solid #016DC5;
68  padding: 1px;
69}
70
71.calendar thead .active { /* Active (pressed) buttons in header */
72  background-color: #8CACBB;
73  border: 1px solid #008AFF;
74  padding: 2px 0px 0px 2px;
75}
76
77/* The body part -- contains all the days in month. */
78
79.calendar tbody .day { /* Cells <TD> containing month days dates */
80  width: 2em;
81  color: #456;
82  text-align: right;
83  padding: 2px 4px 2px 2px;
84}
85.calendar tbody .day.othermonth {
86  font-size: 80%;
87  color: #bbb;
88}
89.calendar tbody .day.othermonth.oweekend {
90  color: #fbb;
91}
92
93.calendar table .wn {
94  padding: 2px 3px 2px 2px;
95  border-right: 1px solid #000;
96  background: #F5F5F5;
97}
98
99.calendar tbody .rowhilite td {
100  background: #DEE7EC;
101}
102
103.calendar tbody .rowhilite td.wn {
104  background: #F1F8FC;
105}
106
107.calendar tbody td.hilite { /* Hovered cells <TD> */
108  background: #DEE7EC;
109  padding: 1px 3px 1px 1px;
110  border: 1px solid #8FC4E8;
111}
112
113.calendar tbody td.active { /* Active (pressed) cells <TD> */
114  background: #cde;
115  padding: 2px 2px 0px 2px;
116}
117
118.calendar tbody td.selected { /* Cell showing today date */
119  font-weight: bold;
120  border: 1px solid #000;
121  padding: 1px 3px 1px 1px;
122  background: #fff;
123  color: #000;
124}
125
126.calendar tbody td.weekend { /* Cells showing weekend days */
127  color: #a66;
128}
129
130.calendar tbody td.today { /* Cell showing selected date */
131  font-weight: bold;
132  color: #D50000;
133}
134
135.calendar tbody .disabled { color: #999; }
136
137.calendar tbody .emptycell { /* Empty cells (the best is to hide them) */
138  visibility: hidden;
139}
140
141.calendar tbody .emptyrow { /* Empty row (some months need less than 6 rows) */
142  display: none;
143}
144
145/* The footer part -- status bar and "Close" button */
146
147.calendar tfoot .footrow { /* The <TR> in footer (only one right now) */
148  text-align: center;
149  background: #DEE7EC;
150  color: #000;
151}
152
153.calendar tfoot .ttip { /* Tooltip (status bar) cell <TD> */
154  background: #DEE7EC;
155  color: #000;
156  border-top: 1px solid #206A9B;
157  padding: 1px;
158}
159
160.calendar tfoot .hilite { /* Hover style for buttons in footer */
161  background: #B8DAF0;
162  border: 1px solid #178AEB;
163  color: #000;
164  padding: 1px;
165}
166
167.calendar tfoot .active { /* Active (pressed) style for buttons in footer */
168  background: #006AA9;
169  padding: 2px 0px 0px 2px;
170}
171
172/* Combo boxes (menus that display months/years for direct selection) */
173
174.calendar .combo {
175  position: absolute;
176  display: none;
177  top: 0px;
178  left: 0px;
179  width: 4em;
180  cursor: default;
181  border: 1px solid #655;
182  background: #DEE7EC;
183  color: #000;
184  font-size: 90%;
185  z-index: 100;
186}
187
188.calendar .combo .label,
189.calendar .combo .label-IEfix {
190  text-align: center;
191  padding: 1px;
192}
193
194.calendar .combo .label-IEfix {
195  width: 4em;
196}
197
198.calendar .combo .hilite {
199  background: #34ABFA;
200  border-top: 1px solid #46a;
201  border-bottom: 1px solid #46a;
202  font-weight: bold;
203}
204
205.calendar .combo .active {
206  border-top: 1px solid #46a;
207  border-bottom: 1px solid #46a;
208  background: #F1F8FC;
209  font-weight: bold;
210}
211
212.calendar td.time {
213  border-top: 1px solid #000;
214  padding: 1px 0px;
215  text-align: center;
216  background-color: #E3F0F9;
217}
218
219.calendar td.time .hour,
220.calendar td.time .minute,
221.calendar td.time .ampm {
222  padding: 0px 3px 0px 4px;
223  border: 1px solid #889;
224  font-weight: bold;
225  background-color: #F1F8FC;
226}
227
228.calendar td.time .ampm {
229  text-align: center;
230}
231
232.calendar td.time .colon {
233  padding: 0px 2px 0px 3px;
234  font-weight: bold;
235}
236
237.calendar td.time span.hilite {
238  border-color: #000;
239  background-color: #267DB7;
240  color: #fff;
241}
242
243.calendar td.time span.active {
244  border-color: red;
245  background-color: #000;
246  color: #A5FF00;
247}
248