td {Font: Bold 10px Arial, Verdana; color: #5c2406;} th {Font: 14px Arial, Verdana; color: #5c2406;} /* This is a very basic stylesheet for the date-picker. Feel free to create your own. */ /* Hide the input by using a className */ input.fd-hidden-input, select.fd-hidden-input {display:none;} /* Screen reader class - hides it from the visual display */ .fd-screen-reader {position:absolute; left:-999em; top:0; width:1px; height:1px; overflow:hidden; outline: 0 none; -moz-outline: 0 none; } /* Disabled datePicker and activation button */ .dp-disabled {opacity:.3 !important; /* This doesn't seem to work for IE... */ filter:alpha(opacity=30); } .dp-disabled, .dp-disabled td, .dp-disabled th, .dp-disabled th span {cursor:default !important; } a.date-picker-control:focus, div.datePicker table td:focus {overflow:hidden; outline:0 none; -moz-outline: 0 none; Font: Bold 10px Arial, Verdana; color: #5c2406;} /* The wrapper div */ div.datePicker { position: absolute; Margin: -50px 0px 0px -40px; Font: 10px "Lucida Grande", Arial, Verdana; background: url(../images/datepicker_back.png) No-Repeat; Width: 197px; Height: 191px; z-index:9999; text-align:center; -moz-user-select:none; -khtml-user-select:none;} /* Styles for the static datePickers */ div.static-datepicker {position:relative; top:5px; left:0; } div.datePicker table { width:auto; height:auto; } /* Draggable datepickers */ div.datePicker tfoot th.drag-enabled, div.datePicker thead th.drag-enabled, div.datePicker thead th.drag-enabled span {cursor:move;} /* The iframe hack to cover selectlists in Internet Explorer <= v6 */ iframe.iehack {position:absolute; background:#fff; z-index:9998; padding:0; border:0; display:none; margin:0;} /* The "button" created beside each input for non-static datePickers */ a.date-picker-control:link, a.date-picker-control:visited {position:relative; /* Moz & FF */ display: -moz-inline-stack; border:0 none; padding:0; margin:0 0 0 0px; background:transparent url(../images/but_edit_calendar.png) no-repeat 50% 50%; min-width:75px; line-height:1; cursor:pointer; visibility:visible; text-decoration:none; vertical-align:top; } a.date-picker-control:hover, a.date-picker-control:active, a.date-picker-control:focus, a.dp-button-active:link, a.dp-button-active:visited, a.dp-button-active:hover, a.dp-button-active:active, a.dp-button-active:focus {background:transparent url(../images/but_edit_calendar.png) no-repeat 50% 50% !important;} /* Feed IE6 the following rule, IE7 should handle the min-width declared above */ * html a.date-picker-control {width:76px;} /* IE, Safari & Opera. Seperate CSS rule seems to be required. */ a.date-picker-control {display:inline-block; } a.date-picker-control span {display:block; width:76px; height: 15px; margin:auto 0;} /* Default "button" styles */ div.datePicker thead th span {display:block; padding:0; margin:0; text-align:center; border:0 none; background:transparent; font-weight:bold; cursor:pointer;} /* The "month, year" display */ div.datePicker th span.month-display, div.datePicker th span.year-display {display:inline; letter-spacing:2px; Font: Bold 10px Palatino Linotype, Arial, Verdana; Color: #942323; cursor:default;} /* Next & Previous (month, year) buttons */ div.datePicker th span.prev-but, div.datePicker th span.next-but {font: 18px/14px Palatino Linotype,Arial, times, bookman, serif; cursor:pointer !important;} /* Hover effect for Next & Previous (month, year) buttons */ div.datePicker th span.prev-but:hover, div.datePicker th span.next-but:hover, div.datePicker th span.today-but:hover {color:#a3401d;} /* Today button */ div.datePicker th span.today-but {text-align:center; margin:0 auto; Font: 10px "Lucida Grande", Arial, Verdana; width:100%; text-decoration:none; Padding: 0px 0px 2px 0px; text-transform:uppercase; vertical-align:middle; cursor:pointer !important } /* Disabled buttons */ div.dp-disabled th span.prev-but, div.dp-disabled th span.next-but, div.dp-disabled th span.today-but, div.dp-disabled th span.prev-but:hover, div.dp-disabled th span.next-but:hover, div.dp-disabled th span.today-but:hover, div.datePicker th span.prev-but.fd-disabled:hover, div.datePicker th span.next-but.fd-disabled:hover, div.datePicker thead th span.fd-disabled, div.datePicker th span.fd-disabled:hover {color:#8f7959; cursor:default !important; } /* The mon, tue, wed etc day buttons */ div.datePicker th span.fd-day-header {text-align:center; margin: 3px auto; Font: 8px Arial, Verdana; Color: #8f7959; text-decoration:none; text-transform:uppercase; cursor:pointer;} /* The table */ div.datePicker table {margin: 5px 0px 0px 12px; padding:0px; border:0px solid #ccc; text-align:center; border-spacing: 1px; padding: 3px; width:auto; empty-cells: Show; -moz-border-radius:0.8em; border-radius:0.8em;} /* Common TD & TH styling */ div.datePicker table td, div.datePicker table tbody th {border:0 none; padding:0; text-align:center; vertical-align:middle; cursor:pointer; width: 24px; height: 20px; overflow:hidden; outline:transparent none 0px; border:1px solid #ddd; text-transform:none; -moz-border-radius:2px; border-radius:2px; } div.datePicker table td:focus, div.datePicker table td:active {outline:0 none red; } div.datePicker table th {border:0 none; padding:0; color:#222; text-align:center; vertical-align:middle; text-transform: Uppercase; } div.datePicker table thead th {height:auto !important; } div.datePicker table tbody th { border:1px solid #dcdcdc;} /* Week number display */ div.datePicker table thead th.date-picker-week-header, div.datePicker table tbody th.date-picker-week-header {font-style:oblique; background:transparent; cursor:default; } div.datePicker table thead th.date-picker-week-header {cursor:help; border:0 none; padding:0 0 0.2em 0;} /* tfoot status bar */ div.datePicker tfoot th {cursor:default; font-weight:normal; text-transform:uppercase; letter-spacing:0.1em; border:0 none; height: 5px;} /* TD cell that is _not_ used to display a day of the month */ div.datePicker table tbody td.date-picker-unused {cursor:default !important; } /* The TH cell used to display the "month, year" title */ div.datePicker table thead th.date-picker-title {width:auto; height:auto; padding: 5px 0 0px;} /* The "mon tue wed etc" day header styles */ div.datePicker table thead th.date-picker-day-header { Font: 8px Arial, Verdana; Color: #8f7959; text-transform: uppercase; height:auto;} /* The "todays date" style */ div.datePicker table tbody td.date-picker-today { Font: Bold 11px Arial, Verdana; Color: #942323;} div.datePicker table tbody td.month-out.date-picker-highlight {color:#aa8866 !important;} /* The "highlight days" style */ div.datePicker table tbody td.date-picker-highlight, div.datePicker table thead th.date-picker-highlight {color:#5c2406 !important;} /* The "active cursor" style */ div.datePicker table tbody td.date-picker-hover {cursor:pointer; border-color: #8a5d08; Font: Bold 12px Arial, Verdana; color: #a3401d;} /* The "disabled days" style */ div.datePicker table tbody td.day-disabled {color:#8f7959 !important; cursor:default; text-decoration:line-through; } div.datePicker table tbody td.month-out {border-color:#ddd; color:#8f7959 !important; background: Transparent;} /* The "selected date" style */ div.datePicker table tbody td.date-picker-selected-date {color:#333 !important; border-color:#333 !important;} /* The date "out of range" style */ div.datePicker table tbody td.out-of-range, div.datePicker table tbody td.not-selectable {color:#ccc !important; font-style:oblique; cursor:default !important;} /* Week number "out of range" && "month-out" styles */ div.datePicker table tbody th.month-out, div.datePicker table tbody th.out-of-range {color:#8f7959 !important; font-style:oblique; background:#fcfcfc !important;} /* week numbers "out of range" */ div.datePicker table tbody th.out-of-range {opacity:0.6; filter:alpha(opacity=60); } /* Used when the entire grid is full but the next/prev months dates cannot be selected */ div.datePicker table tbody td.not-selectable {opacity:0.8; filter:alpha(opacity=80);} div.datePicker table tbody tr {display:table-row; } div.datePicker table tfoot sup {font-size:0.86em; letter-spacing:normal; text-transform:none; height: 0; line-height: 1; position: relative; top: -0.2em; vertical-align: baseline !important; vertical-align: top;} div.datePicker table thead th.date-picker-day-header, div.datePicker table thead span.month-display, div.datePicker table thead span.year-display {text-shadow: 0px 1px 1px #fff;} /* INTERNET EXPLORER WOES ====================== Hover Effects ------------- IE cannot deal with :focus on the TR so the datePicker script adds the class "dp-row-highlight" to the row currently being hovered over. This should enable you to add hover effects if desired. e.g. the following rule will highlight the cell borders in another colour when a row is moused over, it looks like crap though so I didn't include the rule within the demo: div.datePicker table tbody tr.dp-row-highlight td {border-color:#8f7959; } */ /* Remove the images for Internet Explorer <= v6 using the "* html" hack This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes which means that they are downloaded for every cell for every table - nasty! */ * html div.datePicker table td {background-image:none; } * html div.datePicker table td.date-picker-unused {background: transparent;}