/* This is a very basic stylesheet for the date-picker. Feel free to create your own. */ /* The wrapper div */ div.datePicker { position:absolute; min-width:24em; width:24em; z-index:9999; text-align:center; /* 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 */ font:900 0.8em/0.8em Verdana, Sans-Serif; /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */ /* font:900 77%/77% Verdana; */ background:transparent; /* Mozilla & Webkit extensions to stop text-selection. Remove if you wish to validate the CSS */ -moz-user-select:none; -khtml-user-select:none; } /* Styles for the static datePickers */ div.staticDP { position:relative; top:5px; left:0; } /* 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, a.date-picker-control:hover, a.date-picker-control:active, a.date-picker-control:focus { /*position:relative;*/ /* Moz & FF */ display: -moz-inline-stack; border:0 none; padding:0; margin:0 0 0 4px; background:transparent url(../media/cal.gif) no-repeat 50% 50%; min-width:16px; line-height:1; cursor:pointer; visibility:visible; text-decoration:none; vertical-align:middle; } /* Feed IE6 the following rule, IE7 should handle the min-width declared above */ * html a.date-picker-control { width:16px; } a.date-picker-control { /* IE, Safari & Opera. Seperate CSS rule seems to be required. */ display:inline-block; } a.date-picker-control span { display:block; width:16px; height:16px; margin:auto 0; } /* The next & previous buttons */ div.datePicker th span { display:inline; padding:0; margin:0; color:#000; text-align:center; line-height:1em; border-width:0; font-family: georgia, times new roman, palatino, times, bookman, serif; background:transparent; font-weight:bold; cursor:pointer; } div.datePicker th span.month-display, div.datePicker th span.year-display { text-transform:uppercase; letter-spacing:1px; font:normal 1.2em Verdana, Sans-Serif; cursor:default; } div.datePicker th span.prev-but, div.datePicker th span.next-but { font-size:1.8em; cursor:pointer !important; } div.datePicker th span.today-but { text-align:center; margin:0 auto; font:normal 1em Verdana, Sans-Serif; width:100%; text-decoration:none; line-height:1.6em; text-transform:uppercase; cursor:pointer !important } div.datePicker thead th span.fd-disabled { color:#aaa; cursor:default !important; } /* The mon, tue, wed etc day buttons */ div.datePicker th span.fd-day-header { text-align:center; margin:0 auto; font:900 1em Verdana, Sans-Serif; height:1.4em; width:2em; text-decoration:none; text-transform:lowercase; line-height:1.4em; } /* The table */ div.datePicker table { position:relative; margin:0; padding:0; border:1px solid #ccc; background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px; text-align:center; width:100%; border-spacing:2px; table-layout:fixed; border-collapse:separate; } /* Common TD & TH styling */ div.datePicker table td { border:1px solid #ccc; padding:0; text-align:center; vertical-align:middle; /* Opera requires a line-height bigger than 1em in order to redraw properly */ line-height:1.2em; cursor:pointer; background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px; width:3em; height:3em !important; height:2.8em; outline:none; color:#000; } div.datePicker table th { border:0 none; padding:0; line-height:1em; font-weight:bold; color:#222; text-align:center; vertical-align:middle; } div.datePicker table td.date-picker-unused { background:#fff url(../media/backstripes.gif); border-color:#dcdcdc; padding:0; cursor:default !important; } div.datePicker table thead th.date-picker-title { width:auto; height:auto; padding:0.4em 0; } /* The "mon tue wed etc" day header button styles */ div.datePicker table th.date-picker-day-header { text-transform:lowercase; width:3em; } div.datePicker table th.date-picker-day-header span { display:block; } /* The "todays date" style */ div.datePicker table td.date-picker-today { background:#fff url(../media/bullet2.gif) no-repeat 0 0; color:rgb(100,100,100) !important; } /* The "selected date" style */ div.datePicker table td.date-picker-selected-date { color:#333 !important; border-color:#333 !important; } /* the "highlight days" style */ td.date-picker-highlight { color:#a86666; } /* The date "out of range" style */ div.datePicker table td.out-of-range { color:#ccc !important; font-style:oblique; background:#fcfcfc !important; cursor:default !important; } /* The "disabled days" style */ div.datePicker table td.day-disabled { color:#aaa !important; background:transparent !important; cursor:default !important; } /* The "active cursor" style */ div.datePicker table tbody td.date-picker-hover { background:#fff url(../media/bg_header.jpg) no-repeat 0 0; cursor:pointer; border-color:rgb(100,130,170); color:rgb(100,130,170); } /* Quirksmode necessity? --------------------- If your HTML document renders in quirksmode (i.e. has no doctype declaration) then uncomment the following CSS rule to set a less drastic font-size in IE div.datePicker table th, div.datePicker table td { font-size:100%; } */ /* Remove the images for Internet Explorer <= v6 using the "* html" hack */ * html div.datePicker table td { background-image:none; } * html div.datePicker table td.date-picker-unused { background:#f2f2f2; }