1 /* This is a very basic stylesheet for the date-picker. Feel free to create your own. */
\r
3 /* The wrapper div */
\r
10 /* Change the font-size to suit your design's CSS. The following line is for the demo that has a 12px font-size defined on the body tag */
\r
11 font:900 0.8em/1em Verdana, Sans-Serif;
\r
13 /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */
\r
14 /* font:900 77%/77% Verdana, sans-serif; */
\r
16 /* Or, if you prefer a pixel precision */
\r
17 /* font:900 12px/12px Verdana, sans-serif; */
\r
19 background:transparent;
\r
21 /* Mozilla & Webkit extensions to stop text-selection. Remove if you wish to validate the CSS */
\r
22 -moz-user-select:none;
\r
23 -khtml-user-select:none;
\r
25 /* You can add focus effects (for everything but IE6) like so: */
\r
26 div.datePicker:focus
\r
28 /* Naughty, naughty - but we add a highlight using the table's border colour */
\r
31 div.datePicker:focus table
\r
35 /* Make the wrapper div larger if weeks are to be displayed */
\r
41 /* Styles for the static datePickers */
\r
42 div.static-datepicker
\r
48 div.datePicker table
\r
53 /* Draggable datepickers */
\r
54 div.datePicker tfoot th.drag-enabled,
\r
55 div.datePicker thead th.drag-enabled,
\r
56 div.datePicker thead th.drag-enabled span
\r
60 /* The iframe hack to cover selectlists in Internet Explorer <= v6 */
\r
71 /* The "button" created beside each input for non-static datePickers */
\r
72 a.date-picker-control:link,
\r
73 a.date-picker-control:visited
\r
77 display: -moz-inline-stack;
\r
81 background:transparent url(../media/cal-grey.gif) no-repeat 50% 50%;
\r
86 text-decoration:none;
\r
89 a.date-picker-control:hover,
\r
90 a.date-picker-control:active,
\r
91 a.date-picker-control:focus,
\r
92 a.dp-button-active:link,
\r
93 a.dp-button-active:visited,
\r
94 a.dp-button-active:hover,
\r
95 a.dp-button-active:active,
\r
96 a.dp-button-active:focus
\r
98 background:transparent url(../media/cal.gif) no-repeat 50% 50% !important;
\r
100 /* Feed IE6 the following rule, IE7 should handle the min-width declared above */
\r
101 * html a.date-picker-control
\r
105 /* IE, Safari & Opera. Seperate CSS rule seems to be required. */
\r
106 a.date-picker-control
\r
108 display:inline-block;
\r
110 a.date-picker-control span
\r
117 /* Default "button" styles */
\r
118 div.datePicker thead th span
\r
126 background:transparent;
\r
130 /* The "month, year" display */
\r
131 div.datePicker th span.month-display,
\r
132 div.datePicker th span.year-display
\r
135 text-transform:uppercase;
\r
136 letter-spacing:1px;
\r
137 font:normal 1.2em Verdana, Sans-Serif;
\r
140 /* Next & Previous (month, year) buttons */
\r
141 div.datePicker th span.prev-but,
\r
142 div.datePicker th span.next-but
\r
144 font-weight:lighter;
\r
146 font-family: georgia, times new roman, palatino, times, bookman, serif;
\r
147 cursor:pointer !important;
\r
149 /* Hover effect for Next & Previous (month, year) buttons */
\r
150 div.datePicker th span.prev-but:hover,
\r
151 div.datePicker th span.next-but:hover,
\r
152 div.datePicker th span.today-but:hover
\r
157 div.datePicker th span.today-but
\r
161 font:normal 1em Verdana, Sans-Serif;
\r
163 text-decoration:none;
\r
165 text-transform:uppercase;
\r
166 vertical-align:middle;
\r
167 cursor:pointer !important
\r
169 /* Disabled Today button - IE6 will not see this rule as it should */
\r
170 div.datePicker th span.today-but.fd-disabled
\r
174 /* Disabled buttons */
\r
175 div.datePicker th span.prev-but.fd-disabled:hover,
\r
176 div.datePicker th span.next-but.fd-disabled:hover,
\r
177 div.datePicker thead th span.fd-disabled
\r
180 cursor:default !important;
\r
181 display:block; /* required to get IE6 to play ball */
\r
184 /* The mon, tue, wed etc day buttons */
\r
185 div.datePicker th span.fd-day-header
\r
189 font:900 1em Verdana, Sans-Serif;
\r
190 text-decoration:none;
\r
191 text-transform:lowercase;
\r
195 div.datePicker table
\r
199 border:1px solid #ccc;
\r
200 background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;
\r
202 border-spacing:2px;
\r
206 -moz-border-radius:0.8em;
\r
208 /* Common TD & TH styling */
\r
209 div.datePicker table td,
\r
210 div.datePicker table tbody th
\r
215 vertical-align:middle;
\r
217 background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;
\r
221 border:1px solid #ccc;
\r
222 text-transform:none;
\r
223 -moz-border-radius:2px;
\r
224 -webkit-border-radius:2px;
\r
227 div.datePicker table th
\r
234 vertical-align:middle;
\r
235 text-transform:none;
\r
237 div.datePicker table thead th
\r
239 height:auto !important;
\r
241 div.datePicker table tbody th
\r
243 border:1px solid #dcdcdc;
\r
245 /* Week number display */
\r
246 div.datePicker table thead th.date-picker-week-header,
\r
247 div.datePicker table tbody th.date-picker-week-header
\r
249 font-style:oblique;
\r
250 background:transparent;
\r
253 div.datePicker table thead th.date-picker-week-header
\r
257 padding:0 0 0.2em 0;
\r
259 /* tfoot status bar */
\r
260 div.datePicker tfoot th
\r
263 font-weight:normal;
\r
264 text-transform:uppercase;
\r
265 letter-spacing:0.1em;
\r
267 background:transparent;
\r
270 /* TD cell that is _not_ used to display a day of the month */
\r
271 div.datePicker table tbody td.date-picker-unused
\r
273 background:#fff url(../media/backstripes.gif);
\r
274 border-color:#dcdcdc;
\r
275 cursor:default !important;
\r
278 /* The TH cell used to display the "month, year" title */
\r
279 div.datePicker table thead th.date-picker-title
\r
285 /* The "mon tue wed etc" day header styles */
\r
286 div.datePicker table thead th.date-picker-day-header
\r
288 text-transform:lowercase;
\r
292 /* The "todays date" style */
\r
293 div.datePicker table tbody td.date-picker-today
\r
295 background:#fff url(../media/bullet2.gif) no-repeat 0 0;
\r
296 color:rgb(100,100,100) !important;
\r
299 div.datePicker table tbody td.month-out.date-picker-highlight
\r
301 color:#aa8866 !important;
\r
303 /* The "highlight days" style */
\r
304 div.datePicker table tbody td.date-picker-highlight,
\r
305 div.datePicker table thead th.date-picker-highlight
\r
307 color:#a86666 !important;
\r
309 /* The "active cursor" style */
\r
310 div.datePicker table tbody td.date-picker-hover
\r
312 background:#fff url(../media/bg_header.jpg) no-repeat 0 0;
\r
314 border-color:rgb(100,130,170) !important;
\r
315 color:rgb(100,130,170);
\r
317 /* The "disabled days" style */
\r
318 div.datePicker table tbody td.day-disabled
\r
320 background:#fff url(../media/backstripes.gif) no-repeat 0 0;
\r
321 color:#aaa !important;
\r
323 text-decoration:line-through;
\r
325 div.datePicker table tbody td.month-out
\r
328 color:#aaa !important;
\r
329 background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;
\r
331 /* The "selected date" style */
\r
332 div.datePicker table tbody td.date-picker-selected-date
\r
334 color:#333 !important;
\r
335 border-color:#333 !important;
\r
337 /* The date "out of range" style */
\r
338 div.datePicker table tbody td.out-of-range,
\r
339 div.datePicker table tbody td.not-selectable
\r
341 color:#ccc !important;
\r
342 font-style:oblique;
\r
343 background:#fcfcfc !important;
\r
344 cursor:default !important;
\r
347 /* Week number "out of range" && "month-out" styles */
\r
348 div.datePicker table tbody th.month-out,
\r
349 div.datePicker table tbody th.out-of-range
\r
351 color:#aaa !important;
\r
352 font-style:oblique;
\r
353 background:#fcfcfc !important;
\r
355 div.datePicker table tbody th.out-of-range
\r
359 /* Used when the entire grid is full but next/prev months cannot be selected */
\r
360 div.datePicker table tbody td.not-selectable
\r
364 div.datePicker table tbody tr
\r
368 div.datePicker table tfoot sup
\r
371 letter-spacing:normal;
\r
372 text-transform:none;
\r
375 position: relative;
\r
377 vertical-align: baseline !important;
\r
378 vertical-align: bottom;
\r
380 /* INTERNET EXPLORER WOES
\r
381 ======================
\r
386 Cannot deal with :focus and so the datePicker script adds the class "dp-row-highlight" to the
\r
387 row currently being hovered over. This should enable you to add hover effects if desired.
\r
389 e.g. the following rule will highlight the cell borders in another colour when a row is moused over,
\r
390 it looks like crap though so I didn't include the rule within the demo:
\r
392 div.datePicker table tbody tr.dp-row-highlight td
\r
398 /* Remove the images for Internet Explorer <= v6 using the "* html" hack - (NTS: move this to it's own file)
\r
399 This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes
\r
400 which means that they are downloaded for every cell for every table - nasty shit indeed! */
\r
401 * html div.datePicker table td
\r
403 background-image:none;
\r
405 * html div.datePicker table td.date-picker-unused
\r
407 background:#f2f2f2;
\r
409 @media screen and (-webkit-min-device-pixel-ratio:0) {
\r
410 div.datePicker table
\r
412 border-spacing:0.3em;
\r
413 /* Naughty, naughty */
\r
414 -webkit-box-shadow:0px 0px 5px #aaa;
\r
415 -webkit-border-radius:0.8em;
\r
417 div.static-datepicker table
\r
419 -webkit-box-shadow:0 0 0 transparent;
\r
421 div.static-datepicker:focus table
\r
423 -webkit-box-shadow:0px 0px 5px #aaa;
\r
425 div.datePicker table td,
\r
426 div.datePicker table tbody th
\r
429 -webkit-border-radius:2px;
\r
431 div.datePicker table tbody td.date-picker-hover
\r
433 text-shadow:0px 0px 1px #fff;
\r
434 -webkit-box-shadow:0px 0px 1px rgb(100,130,170);
\r