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