/* Basic CSS for the calendar public pages */

/* -------------------- Calendar (this provides the overall background and border color between day cells) ----------------- */
#calendar_table {
    background-color: #f2f0f7;
    color: #000;
    font-size: 11px;
    padding: 5px;
}

/* Default for links. */
#calendar_table tr.day_row a { /* standard link appearance */
    color: #000;
    font-size: 11px;
    font-weight: bold;
    text-decoration: underline;
}

#calendar_table tr.day_row a:hover {  /* mouse-over link appearance */
    background-color: #000;
    color: #fff;
    text-decoration: none;
}

/* Month row - where the name of the month and year appear*/
#calendar_table .calendar_top_row th {
    background-color: #550e9b;
    color: #fff;
    font-size: 18px;
    font-style: normal;
    padding: 5px;
}

#calendar_month_and_year {
    text-align: center;
}

/* TH cells containing the prev / next links.  Alignment is set in HTML. */
#calendar_prev_month a,
#calendar_next_month a {
    color: #fff;
    font-size: 17px;
    font-style: italic;
}

#calendar_prev_month a:hover,
#calendar_next_month a:hover {
    color: #dedede;
    font-size: 17px;
    font-style: italic;
}

#calendar_prev_month {
    text-align: left;
}

#calendar_next_month {
    text-align: right;
}

/* The weekday name cells - style the font size color and background of the week days */
#calendar_table .calendar_header_cell {
    color: #000;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
}

/* Weekday columns */
#calendar_sat,
#calendar_sun {
    background-color: #f2f0f7;
}

/* The daily numbers */
/* Cell inside a "regular" row. */
#calendar_table .calendar_row .calendar_cell {
    background-color: #fff;
    border: #999 1px solid; /*displays between cells*/
    padding: 2px;
}

/* Cell inside an alternate row. */
#calendar_table .calendar_alt_row .calendar_cell {
    background-color: #fff;
    border: #999 1px solid; /*displays between cells*/
    padding: 2px;
}

/* Day cell background color for odd number rows */
#calendar_table .calendar_row #day_table td {
    margin: 0;
    padding: 2px;
}

/* Day cell background color for even number rows */
#calendar_table .calendar_alt_row #day_table td {
    background-color: #fff;
    margin: 0;
    padding: 2px;
}

/* Day cell width and height - No change is typically needed to this setting */
#calendar_table .calendar_cell {
    height: 100px;
    width: 14.286%;
}

#calendar_table td.calendar_inactive { /* This sets background color for any day cell that is for a past or future month */
    background-color: #999;
}

#calendar_table .calendar_number {
    color: #000;
    font-size: 11px;
}

/* This appears on each day.  The date number is inside it. */
#calendar_table .day_header_row th {
    text-align: left;
    width: 165px;
}

#calendar_table span.day_time { /* fonts used for the time next to events in a day cell */
    color: #000;
    display: block;
    font-size: 11px;
}

#calendar_table .day_time_cell { /* no change is typically needed to this setting */
    border: 0;
    margin: 0;
    padding: 2px;
    text-align: left;
    width: 70px;
}

/* A performance when it's not a link (because it's in the past). Sets font color and size for past events. */
#calendar_table .day_perf,
.content {
    color: #444;
    font-size: 11px;
    text-align: left;
}

/*---------------------------------------------------------------------------------------------------------*/
/* The below elements will be used to set the mode - calendar vs volunteer - of the calendar, once the volunteer system is launched */

.content .table_basic .curr_calendar_mode_link,
.content .table_basic .curr_calendar_mode_link a {  /* no change is typically needed to this setting */
    border: solid #fff 1px;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 5px;
    text-align: center;
    text-decoration: none;
}

.content .table_basic div.calendar_mode_link a {
    color: #00703D;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}

.content .table_basic .calendar_mode_link {
    background-color: #DCD7EB; /*15% light purple*/
}

.content .table_basic .curr_calendar_mode_link {
    background-color: #bdb3d6; /*med-light purple*/
    color: #000;
}

.content .table_basic div.calendar_mode_link,
.content .table_basic div.calendar_mode_link {
    border: solid #fff 1px;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    padding: 5px;
    text-align: center;
    text-decoration: none;
}