/*----------------------------------------------------*/
/* DATE PICKER STYLES */
/*----------------------------------------------------*/

/* the div that holds the date picker calendar */
.dpDiv {} 
 
/* the table (within the div) that holds the date picker calendar */
.dpTable {position:absolute; top:1em; left:-6em;
	font:normal normal normal 100% Arial, Helvetica, sans-serif;
	text-align:center;
	color: #369;
	background-color:#fff;
	background-image:linear-gradient(#faffff, #faffff, #fff);
	border:thin solid #0880cb;
	border-radius:0.3em;	
	box-shadow: 0.7em 0.4em 0.9em #aaa;} 
 
/* a table row that holds date numbers (either blank or 1-31) */
.dpTR {} 
 
/* the top table row that holds the month, year, and forward/backward buttons */
.dpTitleTR {} 
 
/* the second table row, that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTR {} 
 
/* the bottom table row, that has the "This Month" and "Close" buttons */
.dpTodayButtonTR {} 
 
/* a table cell that holds a date number (either blank or 1-31) */
.dpTD {border:thin solid #369; border-radius:0.15em; background-color:#FFF;}
.dpTD:empty {border:thin solid #eee; background-color:transparent;}
 
 /* a table cell that grays out past days */
 .dpTDpast {border:thin solid #f1f1f1; background-color:transparent; color:#bbb;}
	
/* a table cell that holds a highlighted day (usually either today's date or the current date field value) */
.dpDayHighlightTD {background-color: #0880cb; border:thin solid #000; color: #fff;} 
 
/* the date number table cell that the mouse pointer is currently over (you can use contrasting colors to make it apparent which cell is being hovered over) */
.dpTDHover {background-color: #0880cb; border:thin solid #0880cb; border-radius:0.15em; box-shadow: 0.5em 0.2em 0.7em #aaa; color: #fff; cursor: pointer;} 
 
/* the table cell that holds the name of the month and the year */
.dpTitleTD {}
 
/* a table cell that holds one of the forward/backward buttons */
.dpButtonTD {} 
 
/* the table cell that holds the "This Month" or "Close" button at the bottom */
.dpTodayButtonTD {} 
 
/* a table cell that holds the names of days of the week (Mo, Tu, We, etc.) */
.dpDayTD {background-color: #fff; border-left:thin solid #0880cb; color:#369;} 
.dpDayTD:first-child {border-left:none;} 
 
/* additional style information for the text that indicates the month and year */
.dpTitleText {font-size: 1em; color:#369; text-shadow: 0.3em 0.1em 0.5em #ccc; font-weight: bold;} 
 
/* additional style information for the cell that holds a highlighted day (usually either today's date or the current date field value) */ 
.dpDayHighlight {color:#FFF; font-weight: bold;} 
 
/* the forward/backward buttons at the top */
.dpButton {font:bold normal normal 1em Arial, Helvetica, sans-serif;
	  color: #FFF; background: #0880cb; margin:0.3em; padding:0 0.3em;
	  border: thin solid #0880cb; border-radius:0.3em;}

.dpButton:hover {background:#369; box-shadow: 0.7em 0.4em 0.9em #aaa;} 
 
/* the "This Month" and "Close" buttons at the bottom */
.dpTodayButton {font:bold normal normal 1em Arial, Helvetica, sans-serif;
	  color: #FFF; background: #0880cb; margin:0.3em; padding:0 0.3em;
	  border: thin solid #0880cb; border-radius:0.3em;}

.dpTodayButton:hover {background:#369; box-shadow: 0.7em 0.4em 0.9em #aaa;}