/**************************************************************************************
	htmlDatePicker CSS file
	
	Feel Free to change the fonts, sizes, borders, and colours of any of these elements
***************************************************************************************/
/* The containing DIV element for the Calendar */
#dpCalendar {
	display: none;					/* Important, do not change */
	position: absolute;				/* Important, do not change */
	background-color: #eeeeee;
	color: black;
	font-size: xx-small;
	font-family: "Segoe UI";
    width: 50%;
    max-width: 500px;
}
/* The table of the Calendar */
#dpCalendar table {
	border: 2px solid black;
	background-color: whitesmoke;
	color: black;
	font-size: xx-small;
	font-family: "Segoe UI";
	width: 100%;
}
    #dpCalendar table tr td {
        width: 14%;
    }
/* The Next/Previous buttons */
#dpCalendar .cellButton {
	background-color: darkgray;
	color: black;
    font-size: 14px;
    text-align: center;
}
/* The Month/Year title cell */
#dpCalendar .cellMonth {
	background-color: darkgray;
	color: white;
    text-transform: uppercase;
    font-size: 14px;
	text-align: center;
}
/* Any regular day of the month cell */
#dpCalendar .cellDay {
	background-color: lightgrey;
    font-size: 12px;
	color: black;
	text-align: center;
}
    #dpCalendar .cellDay:hover {
	    background-color: darkgray;
	    color: black;
    }
#dpCalendar .cellJour {
    text-align: center;
    font-size: 12px;
}
/* The day of the month cell that is selected */
#dpCalendar .cellSelected {
	border: 1px solid black;
	background-color: gray;
    font-size: 12px;
	color: black;
	text-align: center;
}
    #dpCalendar .cellSelected:hover {
	    background-color: darkgray;
	    color: black;
    }
/* The day of the month cell that is Today */
#dpCalendar .cellToday {
	background-color: gray;
    font-size: 12px;
	color: black;
	text-align: center;
}
    #dpCalendar .cellToday:hover {
	    background-color: darkgray;
	    color: black;
    }
/* The day of the month cell that is inside a valid Range */
#dpCalendar .cellRange {
	background-color: #ffccff;
	color: black;
	text-align: center;
}
/* Any cell in a month that is unused (ie: Not a Day in that month) */
#dpCalendar .unused {
	background-color: transparent;
	color: black;
}
/* The Cancel/No Date button */
#dpCalendar .cellCancel {
	background-color: black;
	color: white;
    font-size: 12px;
	text-align: center;
    -moz-border-top-left-radius: 10;
    border-top-left-radius: 10px;
}

    #dpCalendar .cellCancel:hover {
	    background-color: darkgray;
	    color: black;
    }

#dpCalendar .cellAjd {
	background-color: black;
	color: white;
    font-size: 12px;
	text-align: center;
    -moz-border-top-right-radius: 10;
    border-top-right-radius: 10px;
}

    #dpCalendar .cellAjd:hover {
	    background-color: darkgray;
	    color: black;
    }
/* The text inside the Cancel/No Date button */
#dpCalendar .cellCancel a {
	display: block;
}
/* The clickable text inside the calendar */
#dpCalendar a {
	text-decoration: none;
	background-color: transparent;
	color: white;
	display: block
}