/* top area w/ month title and buttons */
.full-calendar-title { text-align: left; }
.full-calendar-buttons { float: right; margin: 0 0 1em; }
.full-calendar-buttons button { vertical-align: middle; margin: 0 0 0 5px; font-size: 1em; } 	
.full-calendar-buttons button span { padding: 0 10px; }
/* table layout & outer border */
.full-calendar-month-wrap { clear: both; border: 1px solid #ccc; /* outer border color & style */ } 	
.full-calendar-month { width: 100%; overflow: hidden; }
.full-calendar-month table { border-collapse: collapse; border-spacing: 0; } 	
/* cell styling */
.full-calendar-month th,
.full-calendar-month td.day { padding: 0; vertical-align: top; border-style: solid; /* inner border style */ border-color: #ccc; /* inner border color */ border-width: 1px 0 0 1px; }
.full-calendar-month th { border-top: 0; text-align: center; } 
.full-calendar-month th.first, 
.full-calendar-month td.first { border-left: 0; }
.full-calendar-month td.today { background: #D58C3A; }
.full-calendar-month .day-number { text-align: right; padding: 0 2px; }
.full-calendar-month .other-month .day-number { color: #bbb; } 
.full-calendar-month .day-content {
	padding: 2px 2px 0; /* distance between events and day edges */
	}
	
	/* FullCalendar automatically chooses a cell's height,
	 * but this can be overridden:
	 *
	 * .full-calendar-month td.day {
	 *    height: 100px !important;
	 *    }
	 */

/* event styling */
.full-calendar-month .event { margin-bottom: 2px; font-size: .85em; cursor: pointer; text-align: left; } 	
.full-calendar-month .ui-draggable-dragging td { cursor: move; }	
.full-calendar-month .event td { background: #BBB; color: #000; padding: 0; }
.full-calendar-month .event td.ne,
.full-calendar-month .event td.nw,
.full-calendar-month .event td.se,
.full-calendar-month .event td.sw { background: none; width: 1px; height: 1px; }
.full-calendar-month .nobg td { background: none; }	
.full-calendar-month .event td.c { padding: 0 2px; }
.full-calendar-month .event-time { font-weight: bold; }
	
	/* To change the color of events on a per-class basis (such as with the
	 * "className" attribute of a CalEvent), do something like this:
	 *
	 * .full-calendar-month .myclass td {
	 *    background: green;
	 *    }
	 */
	
/* the rectangle that covers a day when dragging an event */
.full-calendar-month .over-day { background: #ADDBFF; opacity: .2; filter: alpha(opacity=20); /* for IE */ }
/* right-to-left support */
.r2l .full-calendar-title { text-align: right; }
.r2l .full-calendar-buttons { float: left; } 	
.r2l .full-calendar-buttons button { margin: 0 5px 0 0; } 	
.r2l .full-calendar-month .day-number { text-align: left; } 	
.r2l .full-calendar-month .event { text-align: right; }