/* Zebra_DatePicker: a lightweight jQuery date picker plugin default stylesheet copyright (c) 2011 - 2012 Stefan Gabos http://stefangabos.ro/jquery/zebra-datepicker/ */ .Zebra_DatePicker * { margin: 0; padding: 0; color: #666 } .Zebra_DatePicker { position: absolute; background: #373737; border: 3px solid #373737; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; display: none; z-index: 100; font-family: Geneva, 'Lucida Sans', 'Lucida Grande', 'Lucida Sans Unicode', Verdana, sans-serif; font-size: 11px } /* = GLOBALS ----------------------------------------------------------------------------------------------------------------------*/ .Zebra_DatePicker table { width: 100%; border-collapse: collapse; border-spacing: 0 } .Zebra_DatePicker td, .Zebra_DatePicker th { text-align: center; padding: 5px 0 } .Zebra_DatePicker td { cursor: pointer } .Zebra_DatePicker .dp_daypicker, .Zebra_DatePicker .dp_monthpicker, .Zebra_DatePicker .dp_yearpicker { margin-top: 3px } .Zebra_DatePicker .dp_daypicker td, .Zebra_DatePicker .dp_daypicker th, .Zebra_DatePicker .dp_monthpicker td, .Zebra_DatePicker .dp_yearpicker td { width: 30px; border: 1px solid #BBB; background: #DEDEDE url('metallic/default-date.png') repeat-x top; color: #666 } /* = HEADER ----------------------------------------------------------------------------------------------------------------------*/ .Zebra_DatePicker .dp_header td { color: #E0E0E0; background: #373737 } .Zebra_DatePicker .dp_header .dp_previous, .Zebra_DatePicker .dp_header .dp_next { width: 30px } .Zebra_DatePicker .dp_header .dp_caption { font-weight: bold } .Zebra_DatePicker .dp_header .dp_hover { background: #222; color: #FFF; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px } .Zebra_DatePicker .dp_header .dp_blocked { color: #888; cursor: default } /* = DATEPICKER ----------------------------------------------------------------------------------------------------------------------*/ .Zebra_DatePicker td.dp_week_number, .Zebra_DatePicker .dp_daypicker th { background: #F1F1F1 url('metallic/titles.png') repeat-x top; font-size: 9px; padding-top: 7px } .Zebra_DatePicker td.dp_weekend_disabled, .Zebra_DatePicker td.dp_not_in_month { background: #ECECEC url('metallic/disabled-date.png'); color: #DDD; cursor: default } .Zebra_DatePicker td.dp_weekend { background: #DEDEDE url('metallic/default-date.png') repeat-x top; color: #666 } .Zebra_DatePicker td.dp_selected { background: #E26262 url('metallic/selected-date.png') repeat-x top; color: #E0E0E0 } /* = MONTHPICKER ----------------------------------------------------------------------------------------------------------------------*/ .Zebra_DatePicker .dp_monthpicker td { width: 33% } /* = YEARPICKER ----------------------------------------------------------------------------------------------------------------------*/ .Zebra_DatePicker .dp_yearpicker td { width: 33% } /* = SOME MORE GLOBALS (MUST BE LAST IN ORDER TO OVERWRITE PRESIOUS PROPERTIES) ----------------------------------------------------------------------------------------------------------------------*/ .Zebra_DatePicker td.dp_current { color: #E26261 } .Zebra_DatePicker td.dp_disabled_current { color: #E38585 } .Zebra_DatePicker td.dp_hover { background: #E26262 url('metallic/selected-date.png') repeat-x top; color: #E0E0E0 } .Zebra_DatePicker td.dp_disabled { background: #ECECEC url('metallic/disabled-date.png') repeat-x top; color: #DDD; cursor: default } /* = ICON ----------------------------------------------------------------------------------------------------------------------*/ /* = ICON ----------------------------------------------------------------------------------------------------------------------*/ button.Zebra_DatePicker_Icon { position: absolute; width: 16px; height: 16px; background: url('calendar.png') no-repeat left top; text-indent: -9000px; border: none; cursor: pointer; margin: 0 0 0 5px; padding: 0; line-height: 0 } button.Zebra_DatePicker_Icon_Disabled { background-image: url('calendar-disabled.png') } button.Zebra_DatePicker_Icon_Inside { margin: 0 0 0 2px } /* Fix icon position in Chrome & Safari */ @media screen and (-webkit-min-device-pixel-ratio:0) { button.Zebra_DatePicker_Icon_Inside { margin: 0 5px 0 0 } }