/* Calendar: a Javascript class for Mootools that adds accessible and unobtrusive date pickers to your form elements <http://electricprism.com/aeron/calendar> */
/* Default CSS for Calendar (navigation: 1), Copyright (c) 2007 Aeron Glemann <http://electricprism.com/aeron> */

input.date_field { width:90px !important; }

/*/////////////////////////////////// DEFAULT ///////////////////////////////////*/

.hidden { opacity: 0; position: absolute; }
.visible { opacity: 1; }
input.calendar, select.calendar { width: 99px; }
button.calendar:hover, button.calendar.active { background-position: 0 20px; }

div.blue_calendar *,
div.red_calendar * { margin: 0; padding: 0; }
div.blue_calendar div,
div.red_calendar div { background: none !important; cursor: move; height: 185px; overflow: hidden; padding-top: 10px; position: relative; width: 147px; }
div.blue_calendar caption,
div.red_calendar caption { color: #333; font: normal 12px/16px Arial, Helvetica, sans-serif; padding-top: 6px; text-align: center; width: 100%; }
div.blue_calendar caption a,
div.red_calendar caption a { cursor: pointer; display: block; height: 12px; overflow: hidden; position: absolute; text-indent: -100px; top: 17px; width: 11px; }
div.blue_calendar caption a:hover,
div.red_calendar caption a:hover { background-position: 0 12px; }
div.blue_calendar caption span,
div.red_calendar caption span { height: 25px; position: relative; text-align: center; }
div.blue_calendar caption span.month,
div.red_calendar caption span.month { padding-right: 8px; }
div.blue_calendar caption span.month:after,
div.red_calendar caption span.month:after { content: ','; }
div.blue_calendar table,
div.red_calendar table { background: #FFF; border: 0; border-collapse: collapse; border-spacing: 0; cursor: default; margin: 0 auto; overflow: hidden; width: 147px; }
div.blue_calendar td,
div.red_calendar td { background: url(/images/calendar/calendar-td.gif); color: #FFF; font-size: 11px; }
div.blue_calendar td.invalid,
div.red_calendar td.invalid { color: #999; }

/*//////////////////////////////////// BLUE /////////////////////////////////////*/

.sub_page_blue button.blue_calendar { background: url(/images/calendar/blue_calendar-icon.gif); border: 0; cursor: pointer; vertical-align: top; height: 20px; width: 20px; }
div.blue_calendar { background: url(/images/calendar/blue_calendar.png); height: 195px; padding: 0 6px; text-align: center; width: 147px; }
div.blue_calendar caption a.prev { background-image: url(/images/calendar/blue_calendar-prev.gif); left: 0; }
div.blue_calendar caption a.next { background-image: url(/images/calendar/blue_calendar-next.gif); right: 0; }
div.blue_calendar td,
div.blue_calendar th { border: 0; color: #999; font: normal 12px Arial, Helvetica, sans-serif; height: 21px; text-align: center; width: 21px; }
div.blue_calendar td.valid { background: url(/images/calendar/blue_calendar-valid.gif); color: #0597DB; cursor: pointer; }
div.blue_calendar td.hilite { background: url(/images/calendar/blue_calendar-hilite.gif); }
div.blue_calendar td.active,
div.blue_calendar td.hover { background: url(/images/calendar/blue_calendar-valid.gif) 0 100%; color: #FFF; cursor: pointer; }

/*//////////////////////////////////// RED //////////////////////////////////////*/

.sub_page_red button.red_calendar { background: url(/images/calendar/red_calendar-icon.gif); border: 0; cursor: pointer; vertical-align: top; height: 20px; width: 20px; }
div.red_calendar { background: url(/images/calendar/red_calendar.png); height: 195px; padding: 0 6px; text-align: center; width: 147px; }
div.red_calendar caption a.prev { background-image: url(/images/calendar/red_calendar-prev.gif); left: 0; }
div.red_calendar caption a.next { background-image: url(/images/calendar/red_calendar-next.gif); right: 0; }
div.red_calendar td,
div.red_calendar th { border: 0; color: #999; font: normal 12px Arial, Helvetica, sans-serif; height: 21px; text-align: center; width: 21px; }
div.red_calendar td.valid { background: url(/images/calendar/red_calendar-valid.gif); color: #621C1C; cursor: pointer; }
div.red_calendar td.hilite { background: url(/images/calendar/red_calendar-hilite.gif); }
div.red_calendar td.active,
div.red_calendar td.hover { background: url(/images/calendar/red_calendar-valid.gif) 0 100%; color: #FFF; cursor: pointer; }