/* The calendar. */
.calendar,
.calendar table
{
    font-family:        "Tahoma", "Verdana", "Helvetica", sans-serif;
    font-size:          10pt;
    background-color:   white;
    color:              black;
    white-space:        nowrap;
    margin:             0em;
}

/* Need more detailed selector than just ".calendar" to get IE to add the
   padding. */
table.calendar tr td
{
    border:             1px outset gray;
    padding:            1px;
}
                              
.calendar table
{
    border:             1px inset black;
}

table.calendar th,
table.calendar td
{
    border:             0px;
    padding:            0px;
}
                                
.calendar th
{
    text-decoration:    none;
}

/* The name of the month. */
.calendar .month .name
{
    background:         #EEF;
    color:              black;
    padding:            0em 0.5em;
    
    text-align:         center;
    
    cursor:             default;
}

.calendar .month td,
.calendar .month th
{
    border:             0px;
    border-bottom:      1px solid gray;
}

/* Don't style the links. */
.calendar a
{
    text-decoration:    none;
    color:              black;
}

/* Left and right arrow buttons. */
.calendar .back,
.calendar .forward
{
    cursor:             pointer;
    text-align:         center;
    background:         #669;
    border:             1px outset white;
    color:              white;
    font-weight:        bold;
    padding:            0em;
}

/* The days in the calendar. */
.calendar .days div
{
    text-align:         center;
}

.calendar .days,
.calendar .daysOfTheWeek
{
    width:              100%;
    text-align:         center;
}

.calendar .days .day
{
    background:         white;
    color:              black;
    border:             0px;
    padding:            0px;

    cursor:             default;
}

.calendar .days .day div
{
    padding:            2px; 
}

.calendar .days .clickable
{
    cursor:             pointer;
}

/* Color weekend days differently. */
.calendar .day.weekend div
{
    color:              #449;
}

/* Gray out days from other months. */
.calendar .day.notThisMonth
{
    color:              #BBB;
}

/* Outline today. */
.calendar .day.current div
{
    border:             1px solid red;
}

.calendar .day.current div
{
    padding:            1px;
}

* html .calendar .day.weekend div
{
    border-top:         1px solid white;
    border-bottom:      1px solid white;
}

/* Reverse the colors of the selected day. */
.calendar .day.selected div
{
    background:         black;
    color:              White;
}