/* This is a very basic stylesheet for the date-picker. Feel free to create your own. */

/* The wrapper div (note: ie7 hack at bottom of file) */
.datePicker {
	position		: absolute;
	min-width		: 21em;
	width			: 21em;
	z-index			: 9999;
	text-align		: center;
	font			: 900 0.8em/0.8em Verdana, Sans-Serif;
	background		: transparent;
}

.datePicker *{
	font-size		: 10px;
	font-family		: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/*
Quirksmode necessity
--------------------

If your HTML document renders in quirksmode (i.e. has no doctype declaration)
then uncomment the following CSS rule or the datePicker will be HUGE in IE...

.datePicker th,
.datePicker td{
	font-size:11px;
}
*/
/* The iframe hack to cover selectlists in Internet Explorer <= v6 */
.iehack{
	position		: absolute;
	background		: #fff;
	z-index			: 9998;
	padding			: 0;
	border			: 0;
	display			: none;
}
/* The button created beside each input. (position:relative required for correct positioning of datePicker in IE) */
.date-picker-control{
	border			: 0;
	padding			: 0 0 0 0;
	margin			: 0 0 0 4px;
	background		: transparent url(../media/cal.gif) no-repeat  0 0;
	width			: 16px;
	height			: 16px;
	line-height		: 16px;
	vertical-align	: baseline; 
	cursor			: pointer;
}

.date-picker-control:hover{
	 background			: transparent url(../media/cal.gif) no-repeat 0 0 !important;
}
/* The next & previous buttons */
.datePicker th button {
	padding			: 0;
	margin			: 0;
	color			: #000;
	border-width	: 0;
	font-family		: georgia, times new roman, palatino, times, bookman, serif;
	background		: transparent;
	font-weight		: bold;
	cursor			: pointer;
	/* Remove the next line (or add it to an IE specific stylesheet imported using conditional comments) should you wish to validate the css */
	outline			: expression(hideFocus="true");
}

.datePicker th button:active,
.datePicker th button:focus,
.date-picker-control:active,
.date-picker-control:focus,
.datePicker th button.disabled  {
	outline				: none !important;
	/* Remove the next line should you need to validate the css */
	-moz-outline-style	: none;
}

.datePicker th button.prev-but{
	text-align			: left;
}

.datePicker th button.next-but{
	text-align			: right;
}
.datePicker th button.disabled{
	color				: #aaa;
	cursor				: default;
}

/* The spacing between the buttons */
.but-spacer{
	margin-right		: .2em !important;
}

/* The mon, tue, wed etc day buttons */
.datePicker th button.fd-day-header{
	text-align			: center;
	margin				: 0 auto;
	font				: 900 1em Verdana, Sans-Serif;
	height				: auto;
	width				: auto;
	text-decoration		: none;
	color				: #333;
}

/* The table */
.datePicker table{
	position			: relative;
	margin				: 0;
	padding				: 0;
	border				: 1px solid #ccc;
	background			: #fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -20px;
	text-align			: center;
	width				: 100%;
}

.datePicker table tfoot td{
	background			: #fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -40px;
}

/* Common TD & TH styling */
.datePicker table td {
	border				: 1px solid #ccc;
	padding				: 0.6em 0.5em 0.5em 0.5em;
	vertical-align		: middle;
	/* Opera requires a line-height bigger than 1em in order to redraw properly */
	line-height			: 1.2em;
	cursor				: default;
	background			: #fff url(../media/gradient-e5e5e5-ffffff.gif) repeat-x 0 -50px;
}

.datePicker table th {
	border				: 0 none;
	padding				: 0;
	font-weight			: bold;
	color				: #222;
	text-align			: center;
	vertical-align		: middle;
}

/* The "mon tue wed etc" day header button styles */
.datePicker table th.date-picker-day-header{
	text-transform		: capitalize;
	cursor				: help;
}
/* The "todays date" style */
.datePicker table td.date-picker-today{
	background			: #fff url(../media/bullet2.gif) no-repeat 0 0;
	color				: rgb(100,100,100) !important;
}
/* The "selected date" style */
.datePicker table td.date-picker-selected-date{
	color				: #333 !important;
	border-color		: #333 !important;
}
/* the "highlight days" style */
td.date-picker-highlight {
	color				: #a86666;
}
/* The date "out of range" style */
.datePicker table td.out-of-range{
	color				: #ccc !important;
	font-style			: oblique;
	background			: transparent !important;
	cursor				: default !important;
}
/* The "disabled days" style */
.datePicker table td.day-disabled{
	color				: #aaa !important;
	background			: transparent !important;
	cursor				: default !important;
}
/* The "active cursor" style */
.datePicker table td#date-picker-hover {
	background			: #fff url(../media/bg_header.jpg) no-repeat 0 0;
	cursor				: pointer;
	border-color		: rgb(100,130,170);
	color				: rgb(100,130,170);
}
/* Remove the images for Internet Explorer <= v6 using the "* html" hack */
* html .datePicker table td.date-picker-selected,
* html .datePicker table td.date-picker-hover,
* html .datePicker table td{
	background-image	: none;
}
/* Target ie7 only */
*:first-child+html .datePicker{
	min-width			: 23em;
	width				: 23em;
}