/* The calendar uses up all available horizontal width */
table.calendar
{
    width: 100%;

    table-layout: fixed;
}

/* Each column in the table is exactly the same width */
table.calendar th
{
    width: 14%;

    border: thin solid #ffffff;
}

/* The prev-month link is on the left edge */
table.calendar a.prev-month
{
    float: left;
}

/* The next-month link is on the right edge */
table.calendar a.next-month
{
    float: right;
}

/* The weekdays-in-week header is fixed-height */
table.calendar thead tr
{
    height: 1em;
}

/* A day's header is a fixed height cell */
table.calendar tbody tr.week-header
{    
    height: 1em;
}

/* The day number is visible inside the header */
table.calendar tbody tr.week-header th
{
    padding-left: 0.5em;

    text-align: left;

    font-weight: normal;
}

/* The numbers of days that are a part of the current month are clearly visible */
table.calendar tbody th.in-month
{
    background-color: #eeeeee;
}

/* The numbers of days that are outside the current month are less noticable */
table.calendar tbody th.out-month
{
    background-color: #ffffff;

    color: #888888;
}

/* The current day is emphasized */
table.calendar tbody tr.week-header th.today
{
    background-color: #cccccc;
    
    font-weight: bold;
}

/* Each row of day-event-data for a week is fixed height */
table.calendar tbody tr.week-data
{
    height: 1em;
}

/* The event cell is filled up by the <a> */
table.calendar td
{
    padding: 0px;
    
    /* Vertical borders between cells */
    border: 1px solid #d8d8d8;

    border-style: none solid;
}

/* Each event is visible as its own block */
table.calendar td.event a
{
    display: block;

    overflow: hidden;
    white-space: nowrap;

    background-color: #A6C6E3;

    padding: 4px;

    /* Rounded corner for cosmetic effect */
    border-radius: 4px;
    -moz-border-radius: 6px;
    
    text-align: center;
}

/* An event that also continues on the following week has a straight right border */
table.calendar td.continues-next a
{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
    
    -moz-border-radius-topright: 0px;
    -moz-border-radius-bottomright: 0px;
}

/* An event that also continues on the previous week has a straight left border */
table.calendar td.continues-prev a
{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-bottomleft: 0px;
}

/* Fake arrow using borders */
table.calendar div.arrow-right,
table.calendar div.arrow-left
{
    display: inline;

    font-size: 0px; line-height: 0%; width: 0px;

    border-top: 6px solid #A6C6E3; /* Background */
    border-bottom: 6px solid #A6C6E3; /* Background */
}

table.calendar div.arrow-right
{
    float: right;

    border-left: 6px solid #ffffff; /* Arrow color */
}

table.calendar div.arrow-left
{
    float: left;

    border-right: 6px solid #ffffff; /* Arrow color */
}