.datepicker.column_2 { width: 393px; } .datepicker.column_3 { width: 592px; } .datepicker.column_4 { width: 791px; } .datepicker.column_5 { width: 990px; } /* body ********************************************************/ /* time ********************************************************/ .datepicker .time { width: 100%; height: 100%; background: #eee; } .datepicker .time .hour, .datepicker .time .separator, .datepicker .time .minutes { border: 1px solid #ccc; background: #fff; width: 50px; font-size: 32px; position: absolute; top: 50px; text-align: center; padding: 2px; } .datepicker .time .hour { left: 30px; } .datepicker .time .separator { background: transparent; border: 0px; width: 10px; left: 91px; } .datepicker .time .minutes { left: 110px; } .datepicker .time .ok { position: absolute; top: 105px; width: 136px; left: 30px; font-size: 20px; } /* days-grid ********************************************************/ /* .datepicker .days .day { float: left; background: #ccc; cursor: pointer; text-align: center; padding-top: 4px; width: 25px; overflow: hidden; height: 21px; margin: 0 3px 3px 0; } .datepicker .days .day0 { margin-right: 0; } .datepicker .days .week5 .day { margin-bottom: 0; } */ /* months ********************************************************/ .datepicker .months .month { float: left; background: #eee; cursor: pointer; text-align: center; overflow: hidden; width: 62px; height: 31px; padding-top: 15px; margin: 0 3px 3px 0; } .datepicker .months .month3, .datepicker .months .month6, .datepicker .months .month9, .datepicker .months .month12 { margin-right: 0; width: 64px; } .datepicker .months .month10, .datepicker .months .month11, .datepicker .months .month12 { margin-bottom: 0; } /* years ********************************************************/ .datepicker .years .year { float: left; background: #eee; cursor: pointer; text-align: center; padding-top: 11px; width: 46px; overflow: hidden; height: 25px; margin: 0 3px 3px 0; } .datepicker .years .year3, .datepicker .years .year7, .datepicker .years .year11, .datepicker .years .year15, .datepicker .years .year19 { margin-right: 0; width: 47px; } .datepicker .years .year16, .datepicker .years .year17, .datepicker .years .year18, .datepicker .years .year19 { margin-bottom: 0; height: 26px; } /* global ********************************************************/ .datepicker .selected { /* background: #8C929F !important; color: #fff !important; */ } .datepicker .days .otherMonth.selected { /* background: #bbbfc8 !important; */ } .datepicker .unavailable, .datepicker .body .days .week .day.unavailable:hover { /* background: #edd !important; */ color: #b88 !important; cursor: default !important; } .datepicker .days .week .day:hover, .datepicker .months .month:hover, .datepicker .years .year:hover { /* background: #5D6E95 !important; */ /* color: #fff !important; */ } .datepicker .days.weeknumbers .day { width: 22px; } .datepicker .days.weeknumbers .day.weeknumber, .datepicker .days.weeknumbers .day.weeknumber:hover { color: #AAA !important; width: 16px !important; background: #EEE !important; } .datepicker table { border-spacing: 0; } .datepicker th, .datepicker td { padding: 0; } .datepicker { position: absolute; font-size: 10px; font-family: Tahoma, sans-serif; color: #232323; line-height: normal; width: 172px; height: 135px; padding: 14px; background: url(images/frame.png) no-repeat; z-index: 102; } /* header ********************************************************/ .datepicker .header { position: relative; background: #676767; height: 15px; padding-top: 2px; margin-bottom: 2px; overflow: hidden; } .datepicker .header .title { text-align: center; padding-top: 0px; position: absolute; color: #fff; font-weight: bold; width: 99999px; text-transform: capitalize; } .datepicker .header .titleText { } .datepicker .header .next, .datepicker .header .previous, .datepicker .header .closeButton { position: absolute; text-indent: -40px; overflow: hidden; width: 12px; height: 12px; text-align: center; color: #666; top: 2px; cursor: pointer; background-image: url(images/buttons.png); background-position: left top; background-repeat: no-repeat; } .datepicker .header .previous { left: 4px; } .datepicker .header .previous:hover { background-position: left bottom; } .datepicker .header .next { right: 4px; background-position: -13px top; } .datepicker .header .next:hover { background-position: -13px bottom; } .datepicker .header .closeButton { display: none; right: 0px; top: 0px; background-position: right top; } .datepicker .header .closeButton:hover { background-position: right bottom; } /* body ********************************************************/ .datepicker .body { position: relative; top: 0px; left: 2px; width: 168px; height: 112px; overflow: hidden; } /* Columns */ .datepicker .body .column { float: left; width: 168px; min-height: 112px; margin-left: 5px; } .datepicker .body .column.column_1 { margin-left: 0; } .datepicker .titleText .column { float: left; width: 168px; margin-left: 5px; } .datepicker .titleText .column.column_1 { margin-left: 0; } /* Footer */ .datepicker.footer { height: 280px; } .datepicker .footer { margin-top: 3px; padding: 15px 5px; height: 26px; } /* time ********************************************************/ .datepicker .time { position: relative; width: 100%; height: 100%; } .datepicker .time .hour, .datepicker .time .separator, .datepicker .time .minutes { border: 1px solid #ccc; background: #fff; width: 50px; font-size: 32px; position: absolute; top: 10px; text-align: center; padding: 2px; } .datepicker .time .hour { left: 15px; } .datepicker .time .separator { background: transparent; border: 0px; width: 10px; left: 76px; } .datepicker .time .minutes { left: 95px; } .datepicker .time .ok { position: absolute; top: 65px; width: 136px; left: 15px; font-size: 20px; } /* days-grid ********************************************************/ .datepicker .days .day { float: left; text-align: center; overflow: hidden; width: 23px; height: 16px; margin: 0 1px 1px 0; padding-top: 2px; } .datepicker .days .titles { height: 18px; border-bottom: 1px solid #e0e0e0; margin-bottom: 1px; color: #232323; text-transform: capitalize; } .datepicker .days .day0 { margin-right: 0; } .datepicker .days .week5 .day { margin-bottom: 0; } /* days-colors ********************************************************/ .datepicker .days .week .day { cursor: pointer; } .datepicker .days .week .day:hover { background: url(images/days1.png) center top no-repeat; color: #338833; } .datepicker .days .otherMonth { color: #A33; background: url(images/days1.png) center bottom no-repeat; } .datepicker .days .selected { background: url(images/days1.png) center -18px no-repeat; color: #FFFFFF; } /* months-grid ********************************************************/ .datepicker .months .month { float: left; cursor: pointer; text-align: center; padding-top: 6px; width: 55px; overflow: hidden; height: 21px; margin: 0 1px 1px 0; } .datepicker .months .month3, .datepicker .months .month6, .datepicker .months .month9, .datepicker .months .month12 { margin-right: 0; } .datepicker .months .month10, .datepicker .months .month11, .datepicker .months .month12 { margin-bottom: 0; } /* months-colors ********************************************************/ .datepicker .months .month:hover { background: url(images/months.png) left top no-repeat; color: #0084AA; } .datepicker .months .selected { background: url(images/months.png) left bottom no-repeat; color: #316879; } /* years-grid ********************************************************/ .datepicker .years .year { float: left; cursor: pointer; text-align: center; padding-top: 6px; width: 32px; overflow: hidden; height: 21px; margin: 0 1px 1px 0; } .datepicker .years .year4, .datepicker .years .year9, .datepicker .years .year14, .datepicker .years .year19 { margin-right: 0; } .datepicker .years .year15, .datepicker .years .year16, .datepicker .years .year17, .datepicker .years .year18, .datepicker .years .year19 { margin-bottom: 0; } /* years-colors ********************************************************/ .datepicker .years .year:hover { background: url(images/years.png) left top no-repeat; color: #0084AA; } .datepicker .years .selected { background: url(images/years.png) left bottom no-repeat; color: #316879; } /* global ********************************************************/ .datepicker .unavailable { background: none !important; color: #fbb !important; cursor: default !important; } .datepicker table { border-spacing: 0; } .datepicker th, .datepicker td { padding: 0; }