

.Zebra_DatePicker *                          { margin: 0; padding: 0; color: #666; }
.Zebra_DatePicker                            { position: absolute; background: #11a2d5; border: 3px solid #11a2d5;  border-radius: 8px; display: none; z-index: 100;  font-size: 13px; }

/* = GLOBALS

----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker table                      { 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: #11a2d5; }

.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: #ffde00; color: #193d86; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; }
.Zebra_DatePicker .dp_header .dp_blocked    { color: #fff; cursor: default; }

/* = DATEPICKER
----------------------------------------------------------------------------------------------------------------------*/
.Zebra_DatePicker td.dp_week_number,
.Zebra_DatePicker .dp_daypicker th          { background: #F1F1F1 url('../images/picker/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('../images/picker/disabled-date.png'); color: #E0E0E0; cursor: default ;}

.Zebra_DatePicker td.dp_weekend             { background: #DEDEDE url('../images/picker/default-date.png') repeat-x top; color: #666; }

.Zebra_DatePicker td.dp_selected            { background: #ffde00; color: #193d86 !important ;}

/* = 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: #67AABB url('../images/picker/selected-date.png') repeat-x top; color: #E0E0E0 ;}
.Zebra_DatePicker td.dp_disabled            { background: #ECECEC url('../images/picker/disabled-date.png') repeat-x top; color: #DDD; cursor: default;}

/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
/* = ICON
----------------------------------------------------------------------------------------------------------------------*/
button.Zebra_DatePicker_Icon                { position: absolute; width: 16px; height: 16px; background: url('../images/picker/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('../images/picker/calendar-disabled.png'); }
button.Zebra_DatePicker_Icon_Inside         { margin: 0 3px 0 0; }

/* Fix icon position in Chrome & Safari */
@media screen and (max-width: 800px) {
    button.Zebra_DatePicker_Icon_Inside     { margin: 60px 5px 0 0 ;}
}

/* Fix icon position in Chrome & Safari */
@media screen and (max-width: 540px) {
    button.Zebra_DatePicker_Icon_Inside     { margin: 0 5px 0 0 ;}
}

@media screen and (max-width: 380px) {
    button.Zebra_DatePicker_Icon_Inside     { margin:60px 5px 0 0 ;}
}