/* CSS Document */

/* The following Styles for the Event Calendar Display code provide many 
of the class declarations you should need to style the calendars to suit
your web site visually.

You should look at the source HTML for your calendars
so that you can perform considerably more innovative styling than we could
use here for this generic calendar display. For instance, you could use a class 
called "sku_XXX" (where XXX is the actual SKU ID from your database) for 
Grouping by SKUs and for each "event_instance" so that you can use graphics
or other forms of customization for your individual course types.

Finally, all colors used in this style sheet begin with "#" so you can easy 
perform a search and replace to quickly color the default template for your needs.

*/





/* calendar global setting 

The width of the register DIV is not set here so that it automatically 
expands to fit the remaining space. This allows calendars with fewer 
columns to display correctly. For instance, if you're building a multi-SKU
calendar and using a Display Template to sort by SKU, you don't need an 
"Event Name" DIV since the Grouping will already display the Event Name
above each set of events scheduled for that event. The same can be done 
with Grouping by Location.

*/

.event_calendar {
	clear: both;
}

.event_calendar div{
	padding: 0;
	margin: 0;
	font-size: 10px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

.event_calendar div a{
	font-weight: normal;
	text-decoration: underline;
	color: blue;
}

.event_calendar div a:hover {
}

.event_calendar p {
	line-height: normal;
}


.event_calendar {
	width: 99%;
	border: solid #000000 2px;

}

.event_calendar div.description {
	width: 30%;
}

.event_calendar div.date {
	width: 30%;
}

.event_calendar div.location{
	width: 20%;
}

.event_calendar div.venue{
	width: 20%;
}

.event_calendar div.availability{
}

.event_calendar div.register{
}

.event_calendar div.odd div.description,
.event_calendar div.odd div.date,
.event_calendar div.odd div.location,
.event_calendar div.odd div.venue,
.event_calendar div.odd div.availability,
.event_calendar div.odd div.register {
	background-color: #DDDDDD;
}

.event_calendar div.even div.description,
.event_calendar div.even div.date,
.event_calendar div.even div.location,
.event_calendar div.even div.venue,
.event_calendar div.even div.availability,
.event_calendar div.even div.register {
	background-color: #FFFFFF;
}

/* /calendar global setting */





/*  header */

.event_calendar div.header {
	background-color: #215bb2;
	border-bottom: solid #000000 1px;
}

.event_calendar div.header div{
	float: left;
	color: #FFFFFF;
	background-color: inherit;
	border-right: solid #000000 1px;
}

.event_calendar div.header p {
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
	margin:0;
}

.event_calendar div.header div.availability{
	float: none;
	border-right: none;
}


/*  /header */





/*  footer */

.event_calendar div.footer {
	background-color: #215bb2;
	border-top: solid #000000 1px;
}

.event_calendar div.footer div{
	float: left;
	color: #FFFFFF;
	background-color: inherit;
	border-right: solid #000000 1px;
}

.event_calendar div.footer p {
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	padding: 5px 0;
	margin:0;
}

.event_calendar div.footer div.availability{
	float: none;
	border-right: none;
}


/*  /footer */





/* event_instance  */

.event_calendar div.event_instance{
	clear: both;
	border-bottom: solid #000000 1px;
}

.event_calendar div.event_instance div{
	float: left;
	border-right: solid #000000 1px;
	height: 10em;
}

.event_calendar div.event_instance div.availability{
	float: none;
	border-right: none;
}

.event_calendar div.event_instance p {
	padding: 0 5px;
	margin:0;
	font-size: 1em;
}


/* /event_instance  */





/* description - "Event Name"  */


.event_calendar div.event_instance div.description p{
	font-size: 1.25em;
	font-weight: bold;
}

.event_calendar div.event_instance div.description a{
	font-weight: bold;
}

.event_calendar div.event_instance div.description span.event_id{
	display: none;
}

/* /description - "Event Name"  */





/* date  */


div.date span.vague_date {
	display:block;
	font-weight: normal;
	text-align: center;
	font-size: 1.5em;
}

.event_calendar div.date span.single_day {
	font-weight:bold;
}

.event_calendar div.date span.single_day span.time{
	display:block;
}

.event_calendar div.date span.multi_day span.end {
	display:block;
}

.event_calendar div.date span.multi_day {
	font-weight:normal;
}

.event_calendar div.date span.multi_day span.start_day,
.event_calendar div.date span.multi_day span.start_time,
.event_calendar div.date span.multi_day span.end_day,
.event_calendar div.date span.multi_day span.end_time {
	font-weight:bold;
}

.event_calendar div.date span.multi_day span.start_time,
.event_calendar div.date span.multi_day span.end_time {
	padding-left: 4px;
	font-weight:normal;
}

.event_calendar div.date span.registration {
	display:block;
	margin-top: 10px;
	font-style:italic;
}

.event_calendar div.date span.registration > span.single_day{
}

.event_calendar div.date span.registration span.instructions {
	padding-right: 4px;
}

.event_calendar div.date span.registration span.multi_day span.reg_time span.instructions,
.event_calendar div.date span.registration span.single_day span.reg_time + span.instructions {
	padding-left: 4px;
}

.event_calendar div.date span.registration span.multi_day,
.event_calendar div.date span.registration span.single_day {
	font-weight:normal;

}

.event_calendar div.date span.registration span.multi_day span.reg_end {
	display: block;
}

.event_calendar div.date span.registration span.multi_day span.reg_date {
	padding-right: 4px;
}

.event_calendar div.date span.registration span.single_day span.reg_time {
	display: block;
	float: left;
	padding-right: 4px;
}

.event_calendar div.date span.registration span.single_day span.reg_time + span.instructions {
	float: left;
	display: block;
}



/* /date  */





/* location  */

.event_calendar div.event_instance div.location p{
	font-weight: bold;
	text-align: center;
}


/* /location  */





/* venue  */

.event_calendar div.event_instance div.venue p{
	text-align: center;
}

.event_calendar div.event_instance div.venue span.venue_address {
	display: block;
}

.event_calendar div.event_instance div.venue span.venue_name {
	font-weight: bold;
}

.event_calendar div.event_instance div.venue span.web_map{
	display: block;
	text-align: left;
	float: left;
	margin-top: 10px;
}

.event_calendar div.event_instance div.venue span.booking_info {
	display: block;
	text-align: left;
	float: right;
	margin-top: 10px;
}

/* /venue  */





/* availability  */

.event_calendar div.event_instance div.availability p{
	text-align: center;
}

.event_calendar div.event_instance span.seating_available {
	font-weight: bold;
}

.event_calendar div.event_instance span.sold_out {
	font-weight: bold;
	color: #FF0000;
}

.event_calendar div.event_instance span.wait_list {
	display: block;
	font-weight: bold;
	margin-top: 10px;
}

.event_calendar div.event_instance span.no_wait_list {
	display: block;
	margin-top: 10px;
}

.event_calendar div.event_instance span.null_capacity {
	color: #FF0000;
}
/* /availability  */





/* register  */

.event_calendar div.event_instance div.register p{
	text-align: center;
}

.event_calendar div.event_instance div.register span.free{
}

.event_calendar div.event_instance div.register span.web_display {
	display: block;
}

.event_calendar div.event_instance div.register span.web_display span.price{
	text-decoration: line-through;
}

.event_calendar div.event_instance div.register span.selling_price {
	display: block;
	font-size: 1.25em;
}

.event_calendar div.event_instance div.register span.web_display + span.selling_price {
	
}

.event_calendar div.event_instance div.register span.selling_price span.price {
	display: block;
	text-decoration: underline;
}

.event_calendar div.event_instance div.register span.selling_price span.price_description {
	display: block;
	margin-top: 10px;
}

.event_calendar div.event_instance div.register ul.sku_prices_missing {
	padding: 0 25px 0 0 ;
	margin: 0;
	text-align: right;
}



/* /register  */





/* Display Template Grouping Styles

The following styles are used when your "Calendar Display Template"
Groups by Sku, Program or Location. 

*/

div.sort_by_sku .event_calendar div.header div.register{
	float: none;
}

div.sort_by_sku .event_calendar div.venue{
	width: 15%;
}

div.sort_by_sku div.description_divider div,
div.sort_by_program div.program_divider div,
div.sort_by_location div.location_divider div {
	background-color: #AAAAAA;
	padding: 0;
	margin:0;
}

div.sort_by_sku div.description_divider div.left,
div.sort_by_program div.program_divider div.left,
div.sort_by_location div.location_divider div.left {
	display: none;
}

div.sort_by_sku div.description_divider div.right,
div.sort_by_program div.program_divider div.right,
div.sort_by_location div.location_divider div.right {
	display: none;
}

div.sort_by_sku div.description_divider div.center,
div.sort_by_program div.program_divider div.center,
div.sort_by_location div.location_divider div.center {
border-bottom: solid 1px #000000;
}

div.sort_by_sku div.description_divider div.center p,
div.sort_by_program div.program_divider div.center p,
div.sort_by_location div.location_divider div.center p {
	padding: 0 0 0 15px;
	margin: 0;
	line-height: 2em;
	font-size: 1.5em;
	color: #000000;
}



/* /Display Template Grouping Styles  */





/* Calendars without scheduled events  */

.event_calendar div.no_events {
	background-color: #DDDDDD;
	padding: 0;
	margin:0;
}

.event_calendar div.no_events p{
	padding: 0;
	margin: 0;
	line-height: 4em;
	font-size: 1.5em;
	color: #000000;
	text-align: center;
}


/* /Calendars without scheduled events  */