/* Calendar * * Styling Calendar mainly includes: * * 1. Calendar container * .dijitCalendar - main container * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active * * 2. Month * .dijitCalendarMonthContainer * .dijitCalendarMonthLabel * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active * * 3. Date * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S * .dijitCalendarDateTemplate - date label wrapper * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active * * 4. Year * .dijitCalendarYearContainer * .dijitCalendarYearLabel * .dijitCalendarPreviousYear /.dijitCalendarNextYear * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active * * 5. Dropdown Month Menu * .dijitCalendarMonthMenu - menu container * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state */ .claro .dijitCalendar { border: solid 1px #b5bcc7; background-color: #cfe5fa; background-image: url("images/calendarContainerImages.png"); background-position: 0 -448px; background-repeat: repeat-x; text-align: center; padding: 6px 5px 3px 5px; -moz-border-radius: 4px; border-radius: 4px; } .dj_ie6 .claro .dijitCalendar { background-image: none; } .claro .dijitCalendar img { border: none; } .claro .dijitCalendarHover, .claro .dijitCalendarActive { /* treat dijitCalenderActive like hover since there's * no concept of clicking a Calendar as a whole (although you can click things inside the calendar) */ background-color: #abd6ff; border: solid 1px #769dc0; } .claro .dijitCalendarMonthContainer th { text-align: center; padding-bottom: 4px; vertical-align: middle; } .claro .dijitCalendarMonthLabel { color: #000000; font-size: 1.091em; padding: 0 4px; } /* next/previous month arrows */ .claro .dijitCalendarIncrementControl { width: 18px; height: 16px; background-image: url("images/calendarArrows.png"); background-repeat: no-repeat; } .dj_ie6 .claro .dijitCalendarIncrementControl { background-image: url("images/calendarArrows8bit.png"); } .claro .dijitCalendarIncrease { background-position: -18px 0; } .claro .dijitCalendarArrowHover .dijitCalendarDecrease { background-position: -36px 0; } .claro .dijitCalendarArrowHover .dijitCalendarIncrease { background-position: -55px 0; } .claro .dijitCalendarArrowActive .dijitCalendarDecrease { background-position: -72px 0; } .claro .dijitCalendarArrowActive .dijitCalendarIncrease { background-position: -91px 0; } .claro .dijitA11ySideArrow { /* text +/- labels instead of arrow icons, for high contrast mode */ display: none; } .claro .dijitDayLabels th { padding: 0 4px 0 4px; font-weight: bold; text-align: center; } .claro .dijitCalendarDayLabelTemplate { padding-bottom: 0; text-align: center; border-bottom: 1px solid #b5bcc7; font-size: 0.909em; padding: 0 3px 2px; } .claro .dijitCalendarDateTemplate { text-align: center; background-color: #ffffff; background-image: url("images/calendarContainerImages.png"); background-position: 0 0; background-repeat: repeat-x; border-bottom: 1px solid #d3d3d3; padding-top: 0; font-size: 0.909em; font-family: Arial; font-weight: bold; letter-spacing: .05em; text-align: center; } .dj_ie6 .claro .dijitCalendarDateTemplate { background-image: none; } .claro .dijitCalendarPreviousMonth, .claro .dijitCalendarNextMonth { background-color: #e9f4fe; background-image: none; border-bottom: solid 1px #d3d3d3; /* todo: redundant with above .dijitCalendarDateTemplate rule */ } .claro .dijitCalendarDateTemplate .dijitCalendarDateLabel { text-decoration: none; display: block; padding: 3px 5px 3px 4px; border: solid 1px #ffffff; /* intentionally matches background-color, no visible border until hover/selection */ background-color: rgba(171, 212, 251, 0); /* transparent causes black-flash animation problem on webkit */ -webkit-transition-property: background-color, border; -moz-transition-property: background-color, border; transition-property: background-color, border; -webkit-transition-duration: 0.35s; -moz-transition-duration: 0.35s; transition-duration: 0.35s; } .claro .dijitCalendarPreviousMonth .dijitCalendarDateLabel, .claro .dijitCalendarNextMonth .dijitCalendarDateLabel { color: #769dc0; border-color: #e9f4fe; /* intentionally matches background-color, no visible border until hover/selection */ } .claro .dijitCalendarYearContainer { vertical-align: middle; } .claro .dijitCalendarYearControl { padding: 1px 2px 2px 2px; } .claro .dijitCalendarYearLabel { padding: 2px 0 0 0; margin: 0; } .claro .dijitCalendarYearLabel span { /* trying to center next/current/previous year vertically, doesn't work on IE6/7 though */ vertical-align: middle; } .claro .dijitCalendarSelectedYear { padding: 0 3px; } .claro .dijitCalendarNextYear, .claro .dijitCalendarPreviousYear { padding: 1px 6px 1px 6px; font-size: 0.909em; } .claro .dijitCalendarSelectedYear { font-size: 1.091em; color: #000000; } /* End Normal Calendar Style */ /* Hovered Calendar Style */ .claro .dijitCalendarHoveredDate .dijitCalendarDateLabel { background-color: #abd6ff; border: solid 1px #769dc0; color: #000000; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; transition-duration: 0.2s; } .claro .dijitCalendarNextYearHover, .claro .dijitCalendarPreviousYearHover { color: #000000; border: solid 1px #ffffff; padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ background-color: #e9f4fe; } /* End Hovered Calendar Style */ /* Active Calendar Style */ .claro .dijitCalendarNextYearActive, .claro .dijitCalendarPreviousYearActive { border: solid 1px #769dc0; padding: 0 5px 0 5px; /* reduced by 1 to make room for border */ background-color: #cfe5fa; } .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { background-image: url("images/calendarContainerImages.png"); background-position: 0 -300px; background-color: #7dbefa; border: solid 1px #ffffff; -webkit-transition-duration: 0.1s; -moz-transition-duration: 0.1s; transition-duration: 0.1s; } .dj_ie6 .claro .dijitCalendarActiveDate .dijitCalendarDateLabel { background-image: none; } /* End Active Calendar Style */ /* Selected Calendar Style */ .claro .dijitCalendarSelectedDate .dijitCalendarDateLabel { color: #000000; background-color: #abd6ff; border-color: #769dc0; } /* End Selected Calendar Style */ /* Disabled Calendar Style*/ .claro .dijitCalendarDisabledDate .dijitCalendarDateLabel { text-decoration: line-through; /* override hover effects above, hover and click on disabled date should have no effect */ background-color: transparent; border-width: 0; padding: 4px 6px 4px 5px; color: #818181; } /* End Disabled Calendar Style */ /* Styling for month DropDownButton */ .claro .dijitCalendar .dijitDropDownButton { margin: 0; } .claro .dijitCalendar .dijitButtonText { padding: 1px 0 3px; margin-right: -4px; } .claro .dijitCalendar .dijitDropDownButton .dijitButtonNode { background-color: transparent; background-image: none; padding: 0 3px 0 2px; border: solid 1px #b5bcc7; -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0); -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0); box-shadow: 0 0 0 rgba(0, 0, 0, 0); } .claro .dijitCalendar .dijitDropDownButtonHover .dijitButtonNode { background-color: #e9f4fe; border: solid 1px #ffffff; } /* Styling for month drop down list */ .claro .dijitCalendarMonthMenu { border-color: #769dc0; background-color: #ffffff; text-align: center; background-image: none; } .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabel { border-top: solid 1px #ffffff; /* intentionally invisible until hover */ border-bottom: solid 1px #ffffff; padding: 2px 0; } .claro .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { background-color: #abd6ff; border-color: #769dc0; border-width: 1px 0; background-image: url("images/commonHighlight.png"); background-repeat: repeat-x; }