/**************************************************************
/* DatePicker.css
/* jpl 9/26/08

	Styles for the DatePicker widget.

	This styling is keyed entirely on the "DatePicker".
	To create an alternate CSS theme for DatePicker object,
	copy the contents of this file entirely and replace all instances
	"DatePicker" with the "[alterateThemeName]".  Then
	supply that new name as the value of className in the options
	of the SelectInput constructor, as in:
	
	new DatePicker(container, {className: "[alterateThemeName]"};

/*************************************************************/

.DatePicker-input {
	width:					70px;
	cursor:					pointer;
	vertical-align:			middle;
}

.DatePicker-Icon {
	background:				url(../images/datePicker/iconCalendar.gif) 50% 0 no-repeat;
	width:					20px;
	height:					20px;
	margin-left:			3px;
	display:				inline-block;
	cursor:					pointer;
}

.DatePicker-Icon:hover {	background-position: 50% -20px; }

.DatePicker-WidgetDiv {
	background:				#fff;
	padding:				10px;
	border:					1px solid #FF008A;
	color:					#000;
}

.DatePicker-ControlDiv {
	text-align:				center;
	vertical-align:			middle;
}
.DatePicker-ControlDiv span {
	text-align:				center;
	vertical-align:			middle;
}
.DatePicker-BackButton {
	background:				url(../images/datePicker/backButton.gif) 50% 0 no-repeat;
	height:					12px;
	width:					13px;
	cursor:					pointer;
	float:					left;
	margin-top:				3px;
}
.DatePicker-BackButton:hover {
	background-position:	50% -12px;
}
.DatePicker-MonthLabel {
	font-weight:			900;
	font-size:				14px;
	text-align:				center;
	display:				block;
	margin:					0 auto 0px auto;
}
.DatePicker-ForwardButton {
	background:				url(../images/datePicker/forwardButton.gif) 50% 0 no-repeat;
	height:					12px;
	width:					13px;
	cursor:					pointer;
	float:					right;
	margin-top:				3px;
}

* html .DatePicker-ForwardButton {
	height:					9px;
}

.DatePicker-ForwardButton:hover {
	background-position:	50% -12px;
}

.DatePicker-CanvasGrid {
	width:					149px;
}
.DatePicker-CanvasGrid th {
	font-size:				14px;
	text-align:				center;
	padding:				0px;
	color:					#FF008A;
}
.DatePicker-CanvasGrid td {
	font-size:				12px;
	background:				url(../images/datePicker/validDay.gif) 50% 0 no-repeat;
	height:					21px;
	padding:				0px;
	width:					21px;
	text-align:				center;
	vertical-align:			middle;
	cursor:					pointer;
}
.DatePicker-CanvasGrid td:hover { background-position:	50% -21px; }
.DatePicker-CanvasGrid td.chosenDate { background-position:	50% -21px; }

.DatePicker-CanvasGrid td.DatePicker-DayOtherMonth {
	background:				url(../images/datePicker/validOtherMonthDay.gif) 50% 0 no-repeat;
}

.DatePicker-CanvasGrid td.DatePicker-DayOtherMonth:hover { background-position:	50% -21px; }

.DatePicker-CanvasGrid td.dayToday { background-color: #FF008A !important; }

.DatePicker-CanvasGrid td.DatePicker-invalidDay {
	background:				url(../images/datePicker/invalidDay.gif) 50% 0 no-repeat;
	cursor:					default;
	color:					#BBB;
}
.DatePicker-CanvasGrid td.DatePicker-invalidDay:hover { background-position: 50% -21px; }