terom@37: /* The calendar uses up all available horizontal width */
terom@37: table.calendar
terom@37: {
terom@37:     width: 100%;
terom@46: 
terom@46:     table-layout: fixed;
terom@37: }
terom@37: 
terom@46: /* Each column in the table is exactly the same width */
terom@37: table.calendar th
terom@37: {
terom@37:     width: 14%;
terom@47: 
terom@47:     border: thin solid #ffffff;
terom@37: }
terom@37: 
terom@37: /* The prev-month link is on the left edge */
terom@37: table.calendar a.prev-month
terom@37: {
terom@37:     float: left;
terom@37: }
terom@37: 
terom@37: /* The next-month link is on the right edge */
terom@37: table.calendar a.next-month
terom@37: {
terom@37:     float: right;
terom@37: }
terom@37: 
terom@37: /* The weekdays-in-week header is fixed-height */
terom@37: table.calendar thead tr
terom@37: {
terom@37:     height: 1em;
terom@37: }
terom@37: 
terom@37: /* A day's header is a fixed height cell */
terom@37: table.calendar tbody tr.week-header
terom@37: {    
terom@37:     height: 1em;
terom@37: }
terom@37: 
terom@37: /* The day number is visible inside the header */
terom@37: table.calendar tbody tr.week-header th
terom@37: {
terom@37:     padding-left: 0.5em;
terom@37: 
terom@37:     text-align: left;
terom@43: 
terom@43:     font-weight: normal;
terom@37: }
terom@37: 
terom@37: /* The numbers of days that are a part of the current month are clearly visible */
terom@37: table.calendar tbody th.in-month
terom@37: {
terom@37:     background-color: #eeeeee;
terom@37: }
terom@37: 
terom@37: /* The numbers of days that are outside the current month are less noticable */
terom@37: table.calendar tbody th.out-month
terom@37: {
terom@37:     background-color: #ffffff;
terom@37: 
terom@37:     color: #888888;
terom@37: }
terom@37: 
terom@43: /* The current day is emphasized */
terom@43: table.calendar tbody tr.week-header th.today
terom@43: {
terom@43:     background-color: #cccccc;
terom@43:     
terom@43:     font-weight: bold;
terom@43: }
terom@43: 
terom@37: /* Each row of day-event-data for a week is fixed height */
terom@37: table.calendar tbody tr.week-data
terom@37: {
terom@37:     height: 1em;
terom@37: }
terom@37: 
terom@46: /* The event cell is filled up by the <a> */
terom@47: table.calendar td
terom@46: {
terom@46:     padding: 0px;
terom@47:     
terom@47:     /* Vertical borders between cells */
terom@47:     border: 1px solid #d8d8d8;
terom@47: 
terom@47:     border-style: none solid;
terom@46: }
terom@46: 
terom@39: /* Each event is visible as its own block */
terom@40: table.calendar td.event a
terom@39: {
terom@39:     display: block;
terom@39: 
terom@46:     overflow: hidden;
terom@46:     white-space: nowrap;
terom@46: 
terom@39:     background-color: #A6C6E3;
terom@39: 
terom@39:     padding: 4px;
terom@39: 
terom@39:     /* Rounded corner for cosmetic effect */
terom@39:     border-radius: 4px;
terom@39:     -moz-border-radius: 6px;
terom@39:     
terom@39:     text-align: center;
terom@39: }
terom@39: 
terom@40: /* An event that also continues on the following week has a straight right border */
terom@40: table.calendar td.continues-next a
terom@40: {
terom@40:     border-top-right-radius: 0px;
terom@40:     border-bottom-right-radius: 0px;
terom@40:     
terom@40:     -moz-border-radius-topright: 0px;
terom@40:     -moz-border-radius-bottomright: 0px;
terom@40: }
terom@40: 
terom@40: /* An event that also continues on the previous week has a straight left border */
terom@40: table.calendar td.continues-prev a
terom@40: {
terom@40:     border-top-left-radius: 0px;
terom@40:     border-bottom-left-radius: 0px;
terom@40:     
terom@40:     -moz-border-radius-topleft: 0px;
terom@40:     -moz-border-radius-bottomleft: 0px;
terom@40: }
terom@40: 
terom@40: /* Fake arrow using borders */
terom@40: table.calendar div.arrow-right,
terom@40: table.calendar div.arrow-left
terom@40: {
terom@40:     display: inline;
terom@40: 
terom@40:     font-size: 0px; line-height: 0%; width: 0px;
terom@40: 
terom@40:     border-top: 6px solid #A6C6E3; /* Background */
terom@40:     border-bottom: 6px solid #A6C6E3; /* Background */
terom@40: }
terom@40: 
terom@40: table.calendar div.arrow-right
terom@40: {
terom@40:     float: right;
terom@40: 
terom@40:     border-left: 6px solid #ffffff; /* Arrow color */
terom@40: }
terom@40: 
terom@40: table.calendar div.arrow-left
terom@40: {
terom@40:     float: left;
terom@40: 
terom@40:     border-right: 6px solid #ffffff; /* Arrow color */
terom@40: }
terom@40: