.calSrch td  /* calendar search table */
{
	padding: 0 0 5px 0;
}

table#calendar  /* style of the calendar table */
{
	margin: 0;
	padding: 0;
	width: 100%;
	border-collapse: collapse; 
	border: solid 1px #666666;
}

table#calendar tr#title th /* style of the current Month Year title row */
{
	background: #3d4754; 
	color: #ffffff; 
	font-size: 120%; 
	padding: 3px;
	text-align: center;
}  

tr#title a /* style of the forward/backword month links in title row */
{
	color: #ffffff; 
	text-decoration: none;
} 

select#month, select#year 
{
	padding: 3px 4px;
	display: inline-block;
	vertical-align: top;
	color: #222222;
}

select#month option, select#year option
{
	color: #222222;
}

.calGo
{
	display: inline-block;
	height: 31px;
	vertical-align: top;
}


tr#days th  /* style of the Days title row */
{
	background-color: #4e5a6b; 
	color: #ffffff; 
	border-top: solid 1px #b0b0b0; 
	font-weight: bold; 
	text-align: center; 
	padding: 3px;
}

tr#days th.sun /* Sun Title Column width and border */
{
	width: 10%; 
	border-right: solid 1px #b0b0b0;
} 

tr#days th.mon /* Mon Title Column width and border */
{
	width: 16%; 
	border-right: solid 1px #b0b0b0;
} 

tr#days th.tue /* Tue Title Column width and border */
{
	width: 16%; 
	border-right: solid 1px #b0b0b0;
}

tr#days th.wed  /* Wed Title Column width and border */
{
	width: 16%; 
	border-right: solid 1px #b0b0b0;
}

tr#days th.thu  /* Thu Title Column width and border */
{
	width: 16%; 
	border-right: solid 1px #b0b0b0;
}
tr#days th.fri  /* Fri Title Column width and border */
{
	width: 16%; 
	border-right: solid 1px #b0b0b0;
}

tr#days th.sat  /* Sat Column width*/
{
	width: 10%;
}

table#calendar td   /* style of the weekday cells */
{
	vertical-align: top; 
	padding: 0; 
	border: solid 1px #2e5886;
}

div.date   /* style of the weekday date box */
{
	float: right;
	margin: 0;
	padding: 1px; 
	text-align: center; 
	border-left: solid 1px #3d4754;
	border-bottom: solid 1px #3d4754;
	background-color: #ffffff;
	font-size: 85%;
}

td.sat, td.sun  /* style of the Sat and Sun cells */
{
	background: #ffffff;
}

td.past   /* style of the Past Days cells */
{
	background-color: #e8e8e8; 
	padding: 0;
}

td.holiday  /* style of the holiday cells*/
{
	background-color: #dce6ed; 
	padding: 2px;
}
 
div.holiday   /* style of the Holiday text */
{
	font-size: 70%; 
	font-style: italic;
}

td.today  /* style of the current date cell */
{
	background-color: #ffdfdf; 
	padding: 2px;
}

td.today div.date   /* style of the current date text and background color in date box */
{
	font-weight: bold;
}

td.prev, td.next  /* color of the non-current month date cells */
{
	background-color: #c0c0c0;
}
 
td.prev div.date, td.next div.date  /* style of the non-current month date box and text */
{
	background-color: #c0c0c0; 
	color: #999999;
	font-weight: normal;
	border: 0;
} 

td.plain   /* style of cells with no borders or padding */
{
	padding: 0; 
	border: 0;
}

div.event  /* style of the event box */
{
	margin: 0;
	padding: 1px 2px 2px 2px;
	font-size: 80%;
}

div.event span  /* style of date events text block  */
{
	display: block;
}

span.blockcourse   /* style of course blocks  */
{
	background-color:  #f3ecab;
}

span.expiredcourse   /* style of expired courses  */
{
	color: #777777;
	background-color: transparent;
}

span.expiredcourse a   /* style of expired courses link  */
{
	color: #777777;
}

div.empty span /* style of empty cells text blocks */
{
	display: block;
}

tr#footer td /* style of the Footer row */
{
	background: #465369; 
	text-align: center; 
	padding: 5px;
} 
 
div.status  /* style of the Footer text */
{
	font-size: 90%; 
	color: #ffffff;
	text-align: center;
}


/* -- For screen width less than 700px -- */
@media screen and (max-width: 700px) 
{	
#calendar
{
	position: relative;
}

#calendar tr, #calendar th, #calendar td
{
	display: block;
}

#calendar tr.week td
{
	clear: both;
	border: none;
	border-top: solid 1px #dddddd;	
}

#calendar tr.week::before
{
	display: block;
	background-color: #59687b;
	color: #ffffff;
	text-align: center;
	padding: 2px;
	border-top: solid 1px #444444;	
	border-bottom: solid 1px #4444444;	
}

#calendar tr.week:nth-child(1)::before
{
	content: "Week 1";
}

#calendar tr.week:nth-child(2)::before
{
	content: "Week 2";
}

#calendar tr.week:nth-child(3)::before
{
	content: "Week 3";
}

#calendar tr.week:nth-child(4)::before
{
	content: "Week 4";
}

#calendar tr.week:nth-child(5)::before
{
	content: "Week 5";
}

#calendar tr.week:nth-child(6)::before
{
	content: "Week 6";
}

#calendar tr.week:nth-child(7)::before
{
	content: "Week 7";
}

#calendar tr.week:nth-child(8)::before
{
	content: "Week 8";
}

#calendar tr.week td.sun
{
	border: none;
}

#calendar tr.week td.sun div.date::before
{
	content: "Sun ";
}

#calendar tr.week td.mon div.date::before
{
	content: "Mon ";
}

#calendar tr.week td.tue div.date::before
{
	content: "Tue ";
}
#calendar tr.week td.wed div.date::before
{
	content: "Wed ";
}

#calendar tr.week td.thu div.date::before
{
	content: "Thu ";
}

#calendar tr.week td.fri div.date::before
{
	content: "Fri ";
}

#calendar tr.week td.sat div.date::before
{
	content: "Sat ";
}

div.date
{
	display: block;
    float: none;
	width: 50px;
    font-size: 80%;
    margin: 0 4px 4px 0;
    padding: 1px;
	color: #222222;
    border: none;
    text-align: center;
	border-right: solid 1px #dddddd;	
	border-bottom: solid 1px #dddddd;	
	background-color: transparent;
}

div.event
{
	display: block;
}

#calendar tr#title
{
	width: 100%;  
}

#calendar tr#title th
 {
	float: left;
	width: 12%;
	padding: 0;
	box-sizing: border-box; 
	min-height: 38px;
}

#calendar tr#title th#thismonth
 {
	width: 76%;
 }
 
#calendar tr#title th, #calendar tr#title th select, #calendar tr#title th input
{
 font-size: 80%;
}
 
#calendar tr#days th, #calendar tr.week td.prev, #calendar tr.week td.next, div.empty
{
	display: none;
}

}