bugfix: the slice page was broken when nobody is in slice
[plewww.git] / plekit / datepicker / datepicker.css
index c3d0f0b..c03362b 100644 (file)
-/* This is a very basic stylesheet for the date-picker. Feel free to create your own. */\r
-\r
-/* The wrapper div */\r
-div.datePicker\r
-        {\r
-        position:absolute;        \r
-        z-index:9999;\r
-        text-align:center;\r
-\r
-        /* 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
-        font:900 0.8em/1em Verdana, Sans-Serif;\r
-\r
-        /* For Example: If using the YUI font CSS, uncomment the following line to get a 10px font-size within the datePicker */\r
-        /* font:900 77%/77% Verdana, sans-serif; */\r
-        \r
-        /* Or, if you prefer a pixel precision */\r
-        /* font:900 12px/12px Verdana, sans-serif; */\r
-        \r
-        background:transparent;\r
-\r
-        /* Mozilla & Webkit extensions to stop text-selection. Remove if you wish to validate the CSS */\r
-        -moz-user-select:none;\r
-        -khtml-user-select:none;                 \r
-        }    \r
-/* You can add focus effects (for everything but IE6) like so: */\r
-div.datePicker:focus\r
-        {\r
-        /* Naughty, naughty - but we add a highlight using the table's border colour */\r
-        outline:none;\r
-        }\r
-div.datePicker:focus table\r
-        {\r
-        border-color:#aaa;\r
-        }\r
-/* Make the wrapper div larger if weeks are to be displayed */\r
-div.weeks-displayed\r
-        {\r
-        /* min-width:28em; \r
-        width:28em; */\r
-        }\r
-/* Styles for the static datePickers */\r
-div.static-datepicker\r
-        {\r
-        position:relative;        \r
-        top:5px;\r
-        left:0;\r
-        }\r
-div.datePicker table\r
-        {\r
-        width:auto;\r
-        height:auto;\r
-        }\r
-/* Draggable datepickers */\r
-div.datePicker tfoot th.drag-enabled,\r
-div.datePicker thead th.drag-enabled,\r
-div.datePicker thead th.drag-enabled span\r
-        {\r
-        cursor:move;\r
-        }\r
-/* The iframe hack to cover selectlists in Internet Explorer <= v6 */\r
-iframe.iehack\r
-        {\r
-        position:absolute;\r
-        background:#fff;\r
-        z-index:9998;\r
-        padding:0;\r
-        border:0;\r
-        display:none;\r
-        margin:0;\r
-        }\r
-/* The "button" created beside each input for non-static datePickers */\r
-a.date-picker-control:link,\r
-a.date-picker-control:visited\r
-        {\r
-        position:relative;\r
-        /* Moz & FF */\r
-        display: -moz-inline-stack;\r
-        border:0 none;\r
-        padding:0;\r
-        margin:0 0 0 4px;\r
-        background:transparent url(../media/cal-grey.gif) no-repeat 50% 50%;\r
-        min-width:16px;\r
-        line-height:1;\r
-        cursor:pointer;\r
-        visibility:visible;\r
-        text-decoration:none;\r
-        vertical-align:top;\r
-        }\r
-a.date-picker-control:hover,\r
-a.date-picker-control:active,\r
-a.date-picker-control:focus,\r
-a.dp-button-active:link,\r
-a.dp-button-active:visited,\r
-a.dp-button-active:hover,\r
-a.dp-button-active:active,\r
-a.dp-button-active:focus\r
-        {\r
-        background:transparent url(../media/cal.gif) no-repeat 50% 50% !important;\r
-        }\r
-/* Feed IE6 the following rule, IE7 should handle the min-width declared above */\r
-* html a.date-picker-control\r
-        {\r
-        width:16px;\r
-        }\r
-/* IE, Safari & Opera. Seperate CSS rule seems to be required. */\r
-a.date-picker-control\r
-        {\r
-        display:inline-block;\r
-        }\r
-a.date-picker-control span\r
-        {\r
-        display:block;\r
-        width:16px;\r
-        height:16px;\r
-        margin:auto 0;\r
-        }\r
-/* Default "button" styles */\r
-div.datePicker thead th span\r
-        {\r
-        display:block;\r
-        padding:0;\r
-        margin:0;\r
-        text-align:center;\r
-        line-height:1em;\r
-        border:0 none;\r
-        background:transparent;\r
-        font-weight:bold;\r
-        cursor:pointer;\r
-        }\r
-/* The "month, year" display */\r
-div.datePicker th span.month-display,\r
-div.datePicker th span.year-display\r
-        {\r
-        display:inline;\r
-        text-transform:uppercase;\r
-        letter-spacing:1px;\r
-        font:normal 1.2em Verdana, Sans-Serif;\r
-        cursor:default;          \r
-        }\r
-/* Next & Previous (month, year) buttons */\r
-div.datePicker th span.prev-but,\r
-div.datePicker th span.next-but\r
-        {\r
-        font-weight:lighter;\r
-        font-size:2.4em;\r
-        font-family: georgia, times new roman, palatino, times, bookman, serif;\r
-        cursor:pointer !important;\r
-        }\r
-/* Hover effect for Next & Previous (month, year) buttons */\r
-div.datePicker th span.prev-but:hover,\r
-div.datePicker th span.next-but:hover,\r
-div.datePicker th span.today-but:hover\r
-        {\r
-        color:#a84444;\r
-        }\r
-/* Today button */\r
-div.datePicker th span.today-but\r
-        {\r
-        text-align:center;\r
-        margin:0 auto;\r
-        font:normal 1em Verdana, Sans-Serif;\r
-        width:100%;\r
-        text-decoration:none;\r
-        padding-top:0.3em;\r
-        text-transform:uppercase;\r
-        vertical-align:middle;\r
-        cursor:pointer !important          \r
-        }\r
-/* Disabled Today button - IE6 will not see this rule as it should */\r
-div.datePicker th span.today-but.fd-disabled\r
-        {\r
-        display:none;\r
-        }\r
-/* Disabled buttons */\r
-div.datePicker th span.prev-but.fd-disabled:hover,\r
-div.datePicker th span.next-but.fd-disabled:hover,\r
-div.datePicker thead th span.fd-disabled\r
-        {\r
-        color:#aaa;\r
-        cursor:default !important; \r
-        display:block; /* required to get IE6 to play ball */\r
-        }\r
-\r
-/* The mon, tue, wed etc day buttons */\r
-div.datePicker th span.fd-day-header\r
-        {\r
-        text-align:center;\r
-        margin:0 auto;\r
-        font:900 1em Verdana, Sans-Serif;\r
-        text-decoration:none;\r
-        text-transform:lowercase;\r
-        cursor:pointer;          \r
-        }\r
-/* The table */\r
-div.datePicker table\r
-        {               \r
-        margin:0;\r
-        padding:0px;\r
-        border:1px solid #ccc;        \r
-        background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;\r
-        text-align:center;\r
-        border-spacing:2px;\r
-        padding:0.3em; \r
-        width:auto;             \r
-        empty-cells:show;               \r
-        -moz-border-radius:0.8em;        \r
-        }\r
-/* Common TD & TH styling */\r
-div.datePicker table td,\r
-div.datePicker table tbody th\r
-        {                 \r
-        border:0 none;\r
-        padding:0;\r
-        text-align:center;\r
-        vertical-align:middle;               \r
-        cursor:pointer;\r
-        background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;\r
-        width:3em;\r
-        height:3em;         \r
-        outline:none;        \r
-        border:1px solid #ccc;\r
-        text-transform:none;\r
-        -moz-border-radius:2px;\r
-        -webkit-border-radius:2px;\r
-        border-radius:2px;\r
-        }\r
-div.datePicker table th\r
-        {\r
-        border:0 none;\r
-        padding:0;        \r
-        font-weight:bold;\r
-        color:#222;\r
-        text-align:center;\r
-        vertical-align:middle; \r
-        text-transform:none;        \r
-        }\r
-div.datePicker table thead th\r
-        {\r
-        height:auto !important;\r
-        }\r
-div.datePicker table tbody th\r
-        {                          \r
-        border:1px solid #dcdcdc;        \r
-        }\r
-/* Week number display */\r
-div.datePicker table thead th.date-picker-week-header,\r
-div.datePicker table tbody th.date-picker-week-header\r
-        {\r
-        font-style:oblique;  \r
-        background:transparent;\r
-        cursor:default;         \r
-        }\r
-div.datePicker table thead th.date-picker-week-header\r
-        {\r
-        cursor:help;\r
-        border:0 none;\r
-        padding:0 0 0.2em 0;\r
-        }\r
-/* tfoot status bar */\r
-div.datePicker tfoot th\r
-        {\r
-        cursor:default;\r
-        font-weight:normal;\r
-        text-transform:uppercase;\r
-        letter-spacing:0.1em;\r
-        border:0 none;\r
-        background:transparent;\r
-        height:2.8em;\r
-        }\r
-/* TD cell that is _not_ used to display a day of the month */\r
-div.datePicker table tbody td.date-picker-unused\r
-        {\r
-        background:#fff url(../media/backstripes.gif);\r
-        border-color:#dcdcdc;          \r
-        cursor:default !important;\r
-        }\r
-\r
-/* The TH cell used to display the "month, year" title */\r
-div.datePicker table thead th.date-picker-title\r
-        {\r
-        width:auto;\r
-        height:auto;\r
-        padding:0.4em 0;\r
-        }\r
-/* The "mon tue wed etc" day header styles */\r
-div.datePicker table thead th.date-picker-day-header\r
-        {\r
-        text-transform:lowercase;\r
-        cursor:help;\r
-        height:auto;\r
-        }\r
-/* The "todays date" style */\r
-div.datePicker table tbody td.date-picker-today\r
-        {\r
-        background:#fff url(../media/bullet2.gif) no-repeat 0 0;\r
-        color:rgb(100,100,100) !important;\r
-        }\r
-\r
-div.datePicker table tbody td.month-out.date-picker-highlight \r
-        {\r
-        color:#aa8866 !important;\r
-        }\r
-/* The "highlight days" style */\r
-div.datePicker table tbody td.date-picker-highlight,\r
-div.datePicker table thead th.date-picker-highlight\r
-        {\r
-        color:#a86666 !important;\r
-        }\r
-/* The "active cursor" style */\r
-div.datePicker table tbody td.date-picker-hover\r
-        {\r
-        background:#fff url(../media/bg_header.jpg) no-repeat 0 0;\r
-        cursor:pointer;\r
-        border-color:rgb(100,130,170) !important;\r
-        color:rgb(100,130,170);                 \r
-        }\r
-/* The "disabled days" style */\r
-div.datePicker table tbody td.day-disabled\r
-        {          \r
-        background:#fff url(../media/backstripes.gif) no-repeat 0 0;\r
-        color:#aaa !important;\r
-        cursor:default;\r
-        text-decoration:line-through;\r
-        } \r
-div.datePicker table tbody td.month-out \r
-        {\r
-        border-color:#ddd;\r
-        color:#aaa !important;\r
-        background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;                       \r
-        } \r
-/* The "selected date" style */\r
-div.datePicker table tbody td.date-picker-selected-date\r
-        {\r
-        color:#333 !important;\r
-        border-color:#333 !important;\r
-        }\r
-/* The date "out of range" style */\r
-div.datePicker table tbody td.out-of-range,\r
-div.datePicker table tbody td.not-selectable\r
-        {\r
-        color:#ccc !important;\r
-        font-style:oblique;\r
-        background:#fcfcfc !important;\r
-        cursor:default !important;\r
-        opacity:0.6;\r
-        } \r
-/* Week number "out of range" && "month-out" styles */\r
-div.datePicker table tbody th.month-out,\r
-div.datePicker table tbody th.out-of-range\r
-        {\r
-        color:#aaa !important;\r
-        font-style:oblique;\r
-        background:#fcfcfc !important;          \r
-        }\r
-div.datePicker table tbody th.out-of-range\r
-        {\r
-        opacity:0.6;\r
-        }  \r
-/* Used when the entire grid is full but next/prev months cannot be selected */\r
-div.datePicker table tbody td.not-selectable\r
-        {\r
-        opacity:0.8;\r
-        }\r
-div.datePicker table tbody tr\r
-        {\r
-        display:table-row;\r
-        }\r
-div.datePicker table tfoot sup\r
-        {\r
-        font-size:0.8em;\r
-        letter-spacing:normal;\r
-        text-transform:none;\r
-        height: 0;\r
-       line-height: 1;\r
-       position: relative;\r
-       top: -0.2em;    \r
-       vertical-align: baseline !important;\r
-       vertical-align: bottom;  \r
-        }\r
-/* INTERNET EXPLORER WOES\r
-   ======================\r
-   \r
-   Hover Effects\r
-   -------------\r
-   \r
-   Cannot deal with :focus and so the datePicker script adds the class "dp-row-highlight" to the\r
-   row currently being hovered over. This should enable you to add hover effects if desired.\r
-   \r
-   e.g. the following rule will highlight the cell borders in another colour when a row is moused over,\r
-   it looks like crap though so I didn't include the rule within the demo:\r
-   \r
-div.datePicker table tbody tr.dp-row-highlight td\r
-        {\r
-        border-color:#aaa;\r
-        }\r
-*/\r
-\r
-/* Remove the images for Internet Explorer <= v6 using the "* html" hack - (NTS: move this to it's own file) \r
-   This is a workaround for a nasty IE6 bug that never caches background images on dynamically created DOM nodes\r
-   which means that they are downloaded for every cell for every table - nasty shit indeed! */    \r
-* html div.datePicker table td\r
-        {\r
-        background-image:none;\r
-        }\r
-* html div.datePicker table td.date-picker-unused\r
-        {\r
-        background:#f2f2f2;\r
-        }        \r
-@media screen and (-webkit-min-device-pixel-ratio:0) {\r
-        div.datePicker table\r
-                {\r
-                border-spacing:0.3em;\r
-                /* Naughty, naughty */\r
-                -webkit-box-shadow:0px 0px 5px #aaa;\r
-                -webkit-border-radius:0.8em;\r
-                }\r
-        div.static-datepicker table\r
-                {\r
-                -webkit-box-shadow:0 0 0 transparent;\r
-                }\r
-        div.static-datepicker:focus table\r
-                {\r
-                -webkit-box-shadow:0px 0px 5px #aaa;\r
-                }\r
-        div.datePicker table td,\r
-        div.datePicker table tbody th\r
-                {\r
-                padding:0.1em;\r
-                -webkit-border-radius:2px;\r
-                }\r
-        div.datePicker table tbody td.date-picker-hover\r
-                {\r
-                text-shadow:0px 0px 1px #fff;\r
-                -webkit-box-shadow:0px 0px 1px rgb(100,130,170);\r
-                }\r
-\r
-}\r
-\r
+/* This is a very basic stylesheet for the date-picker. Feel free to create your own. */
+
+/* The wrapper div */
+div.datePicker
+        {
+        position:absolute;        
+        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/1em 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, sans-serif; */
+        
+        /* Or, if you prefer a pixel precision */
+        /* font:900 12px/12px Verdana, sans-serif; */
+        
+        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;                 
+        }    
+/* You can add focus effects (for everything but IE6) like so: */
+div.datePicker:focus
+        {
+        /* Naughty, naughty - but we add a highlight using the table's border colour */
+        outline:none;
+        }
+div.datePicker:focus table
+        {
+        border-color:#aaa;
+        }
+/* Make the wrapper div larger if weeks are to be displayed */
+div.weeks-displayed
+        {
+        /* min-width:28em; 
+        width:28em; */
+        }
+/* 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 4px;
+        background:transparent url(../media/cal-grey.gif) no-repeat 50% 50%;
+        min-width:16px;
+        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(../media/cal.gif) no-repeat 50% 50% !important;
+        }
+/* Feed IE6 the following rule, IE7 should handle the min-width declared above */
+* html a.date-picker-control
+        {
+        width:16px;
+        }
+/* 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:16px;
+        height:16px;
+        margin:auto 0;
+        }
+/* Default "button" styles */
+div.datePicker thead th span
+        {
+        display:block;
+        padding:0;
+        margin:0;
+        text-align:center;
+        line-height:1em;
+        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;
+        text-transform:uppercase;
+        letter-spacing:1px;
+        font:normal 1.2em Verdana, Sans-Serif;
+        cursor:default;          
+        }
+/* Next & Previous (month, year) buttons */
+div.datePicker th span.prev-but,
+div.datePicker th span.next-but
+        {
+        font-weight:lighter;
+        font-size:2.4em;
+        font-family: georgia, times new roman, palatino, 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:#a84444;
+        }
+/* Today button */
+div.datePicker th span.today-but
+        {
+        text-align:center;
+        margin:0 auto;
+        font:normal 1em Verdana, Sans-Serif;
+        width:100%;
+        text-decoration:none;
+        padding-top:0.3em;
+        text-transform:uppercase;
+        vertical-align:middle;
+        cursor:pointer !important          
+        }
+/* Disabled Today button - IE6 will not see this rule as it should */
+div.datePicker th span.today-but.fd-disabled
+        {
+        display:none;
+        }
+/* Disabled buttons */
+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
+        {
+        color:#aaa;
+        cursor:default !important; 
+        display:block; /* required to get IE6 to play ball */
+        }
+
+/* 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;
+        text-decoration:none;
+        text-transform:lowercase;
+        cursor:pointer;          
+        }
+/* The table */
+div.datePicker table
+        {               
+        margin:0;
+        padding:0px;
+        border:1px solid #ccc;        
+        background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;
+        text-align:center;
+        border-spacing:2px;
+        padding:0.3em; 
+        width:auto;             
+        empty-cells:show;               
+        -moz-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;
+        background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;
+        width:3em;
+        height:3em;         
+        outline:none;        
+        border:1px solid #ccc;
+        text-transform:none;
+        -moz-border-radius:2px;
+        -webkit-border-radius:2px;
+        border-radius:2px;
+        }
+div.datePicker table th
+        {
+        border:0 none;
+        padding:0;        
+        font-weight:bold;
+        color:#222;
+        text-align:center;
+        vertical-align:middle; 
+        text-transform:none;        
+        }
+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;
+        background:transparent;
+        height:2.8em;
+        }
+/* TD cell that is _not_ used to display a day of the month */
+div.datePicker table tbody td.date-picker-unused
+        {
+        background:#fff url(../media/backstripes.gif);
+        border-color:#dcdcdc;          
+        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:0.4em 0;
+        }
+/* The "mon tue wed etc" day header styles */
+div.datePicker table thead th.date-picker-day-header
+        {
+        text-transform:lowercase;
+        cursor:help;
+        height:auto;
+        }
+/* The "todays date" style */
+div.datePicker table tbody td.date-picker-today
+        {
+        background:#fff url(../media/bullet2.gif) no-repeat 0 0;
+        color:rgb(100,100,100) !important;
+        }
+
+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:#a86666 !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) !important;
+        color:rgb(100,130,170);                 
+        }
+/* The "disabled days" style */
+div.datePicker table tbody td.day-disabled
+        {          
+        background:#fff url(../media/backstripes.gif) no-repeat 0 0;
+        color:#aaa !important;
+        cursor:default;
+        text-decoration:line-through;
+        } 
+div.datePicker table tbody td.month-out 
+        {
+        border-color:#ddd;
+        color:#aaa !important;
+        background:#fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;                       
+        } 
+/* 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;
+        background:#fcfcfc !important;
+        cursor:default !important;
+        opacity:0.6;
+        } 
+/* Week number "out of range" && "month-out" styles */
+div.datePicker table tbody th.month-out,
+div.datePicker table tbody th.out-of-range
+        {
+        color:#aaa !important;
+        font-style:oblique;
+        background:#fcfcfc !important;          
+        }
+div.datePicker table tbody th.out-of-range
+        {
+        opacity:0.6;
+        }  
+/* Used when the entire grid is full but next/prev months cannot be selected */
+div.datePicker table tbody td.not-selectable
+        {
+        opacity:0.8;
+        }
+div.datePicker table tbody tr
+        {
+        display:table-row;
+        }
+div.datePicker table tfoot sup
+        {
+        font-size:0.8em;
+        letter-spacing:normal;
+        text-transform:none;
+        height: 0;
+       line-height: 1;
+       position: relative;
+       top: -0.2em;    
+       vertical-align: baseline !important;
+       vertical-align: bottom;  
+        }
+/* INTERNET EXPLORER WOES
+   ======================
+   
+   Hover Effects
+   -------------
+   
+   Cannot deal with :focus and 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:#aaa;
+        }
+*/
+
+/* Remove the images for Internet Explorer <= v6 using the "* html" hack - (NTS: move this to it's own file) 
+   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 shit indeed! */    
+* html div.datePicker table td
+        {
+        background-image:none;
+        }
+* html div.datePicker table td.date-picker-unused
+        {
+        background:#f2f2f2;
+        }        
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+        div.datePicker table
+                {
+                border-spacing:0.3em;
+                /* Naughty, naughty */
+                -webkit-box-shadow:0px 0px 5px #aaa;
+                -webkit-border-radius:0.8em;
+                }
+        div.static-datepicker table
+                {
+                -webkit-box-shadow:0 0 0 transparent;
+                }
+        div.static-datepicker:focus table
+                {
+                -webkit-box-shadow:0px 0px 5px #aaa;
+                }
+        div.datePicker table td,
+        div.datePicker table tbody th
+                {
+                padding:0.1em;
+                -webkit-border-radius:2px;
+                }
+        div.datePicker table tbody td.date-picker-hover
+                {
+                text-shadow:0px 0px 1px #fff;
+                -webkit-box-shadow:0px 0px 1px rgb(100,130,170);
+                }
+
+}
+