/*#############################################################################
##Calendar
#############################################################################*/
div.calendar-div
{
	display: inline-block;
	border: 1px solid #ccc;
	font-family: Tahoma;
	font-size: smaller;
	vertical-align: top;
}

/*#############################################################################
##Loading
#############################################################################*/
div.calendar-div div.loading
{
	background-color: White;
	width: 280px;
	height: 265px;
	
}

div.calendar-div table
{
	background: #ccc;
}

/*#############################################################################
##Controls Month Year
#############################################################################*/
div.calendar-div td.header
{
	height: 20px;
}


div.calendar-div img.previous
{
	float: left;
	width: 41px;
	height: 16px;
}

div.calendar-div img.next
{
	float: left;
}

div.calendar-div span.month-and-year
{
	float: right;
	color: #ffffff;
	font-size: medium;
}

/*#############################################################################
##Day Names
#############################################################################*/
div.calendar-div td.day-name
{
	color: #ffffff;
	text-align: center;
	width: 40px;
	height: 20px;
}

/*#############################################################################
##Dates
#############################################################################*/
div.calendar-div td.day
{
	border: 1px solid #ccc;
	height: 35px;
	font-size: small;
	vertical-align: top;
	background-color: White;
}

/*#############################################################################
##Day number
#############################################################################*/
div.calendar-div div.day-number 
{
	float: left;
}

div.calendar-div span.day-number
{
	vertical-align: top;
}

/*#############################################################################
##Rate
#############################################################################*/
div.calendar-div div.day-rate 
{
	clear: left;
	float: right;
	
}

div.calendar-div span.day-rate
{
	text-align: right;
	vertical-align: top;
}

/*#############################################################################
##Availability
#############################################################################*/
div.calendar-div div.day-availability
{
	display: block;
	visibility: hidden;
	float: right;
	width:0px;
	height:0px;
}

div.calendar-div span.day-availability
{
	text-align: right;
	vertical-align: top;
}

/*#############################################################################
##Previous or next month days
#############################################################################*/
div.calendar-div td[previousMonth='true'], div.calendar-div td[nextMonth='true']
{
	color: #ccc;
}

/*#############################################################################
##Restrictions
#############################################################################*/
div.calendar-div td[restriction='true']
{
	background-color: #F59090;
}

/*#############################################################################
##No Availability
#############################################################################*/
div.calendar-div td[noAvailability='true']
{
	background-color: #FF0000;
}

/*#############################################################################
##Day Selected
#############################################################################*/
div.calendar-div td.selected
{
	background-color: #00AA00;
	color: #FFFFFF;
}

/*#############################################################################
##Instructions
#############################################################################*/
div.calendar-div td.footer
{
	height:20px;	
}

div.calendar-div span.instructions
{
	color: #ffffff;	
}