/****************************************
SAMPLE CALENDAR CSS FILE
(c) 2003, Ryan Parman
http://www.skyzyx.com
****************************************/

/****************************************
This controls the master container for the calendar.  
Many CSS properties are inherited from here.
****************************************/
.calendar {
	background-color:#fff;
	font-family:"Trebuchet MS", Trebuchet, Verdana;
	font-weight:bold;
	color:#000;
	font-size:11px;
	margin-bottom:20px;
}


/****************************************
This controls the Month+Year that's displayed 
above the calendar.
****************************************/
.calendar .month {
	border-top:2px solid #09f;
	border-left:2px solid #09f;
	border-right:2px solid #03f;
	border-bottom:2px solid #03f;
	background-color:#06f;
	font-size:14px;
	color:#fff;
	padding:3px;
}


/****************************************
This controls the days of the week that run along 
near the top of the calendar.
****************************************/
.calendar .daysofweek {
	border:1px solid #000;
	padding:3px;
	background-color:#fff;
}


/****************************************
This controls the date cells, being the cells with 
the numbers.
****************************************/
.calendar .date {
	width:30px;
	height:30px;
	border:1px solid #000;
	padding:2px;
	background-color:#eee;
}


/****************************************
This controls the empty cells.  Personally, I just 
make them look faded out compared to the 
date cells.
****************************************/
.calendar .empty {
	width:30px;
	height:30px;
	border:1px solid #999;
	padding:2px;
	background-color:#ccc;
}


/****************************************
This controls the date+date highlighting of the 
current day.  This inherits properties from 
".calendar", but nothing else.  Should have same 
size and shape properties as ".calendar .date".  
Usually, you will only want to change colors.
****************************************/
.calendar .highlight {
	width:30px;
	border:1px solid #f90;
	background-color:#ffc;
	padding:2px;
	color:#000;
}


/****************************************
This controls the display of the events that are added 
to the calendar (if any).  Only colors and underlines work.
****************************************/
.calendar .event {
	color:#06f;
	font-size:10px;
}