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

/****************************************
This is only for the Skyzyx.com samples, and can 
be discarded...
****************************************/
body { font-family:Verdana, Arial, Helvetica; font-size:12px; }
h2 { font-size:25px; margin:3px; padding:0px; }


/****************************************
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:11pt;
        margin-bottom:20px;
}


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


/****************************************
This controls the days of the week that run along 
near the top of the calendar.
****************************************/
.calendar .daysofweek {
	  width:14%;
        border:3px outset #888;
        padding:3px;
        background-color:#fff;
}


/****************************************
This controls the date cells, being the cells with 
the numbers.
****************************************/
.calendar .date {
        width:30px;
        height:80px;
        border:2px inset #999;
        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:80px;
        border:2px inset #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:2px inset #f90;
        background-color:#ffc;
        padding:2px;
        color:#000;
}


/****************************************
This controls the display of the events that are added 
to the calendar (if any).  These will ALWAYS be links 
(whether you specified a URL or not), so be aware of 
that.  Only colors and underlines work.
****************************************/
.calendar .event {
        font-size:7.5pt;
        color:#03f;
}
.event {
        font-size:7.5pt;
        color#03f;
}