/*** Removes browser default settings ***/
		* {margin: 0; padding: 0;}
		
		table#cal{
			font-family: times, serif;
			margin-bottom: 240px;
		}
		
		table#cal table { text-align: left; }
		
		table#cal div p{
			margin: 0.5em 0.5em;
			padding: 0;
		}
		
		/*** Style the calendar headers and
		 *   make them darken when hovered.
		***/
		th.may, th.jun { 
			width: 40px; 
			color: #000;
			background-color: #bbbbdd; 
			border: 1px solid #000; 
		}
		th:hover { 
			color: #fff; 
			background-color: #057;
		}
		th:hover table{ color: #000; }
		
		/*** Calendar daily headers - will not
		 *   affect the monthly headers because
		 *   that CSS identifier was more specific.
		***/
		th{
			color: #fff;
		}
		
		/*** Make the calendar cells a uniform size. ***/
		td { 
			width: 40px; 
			height: 40px; 
			background-color: #fff;
		}
		
		/*** Make the text element the same size and make
		 *   it 'block' so fills the whole table cell.
		***/
		td span { 
			display: block; 
			width: 40px; 
			height: 40px; 
		}
		
		td .spec, .lab, .hwk, .due, .exam{
			display: inline;
			margin-left:1px;
			font-size: 0.8em;
		}
.spec{
	color: #a0f;
}
.lab{
	color: #0f0;
}
.hwk{
	color: #0f7;
}
.due{
	color: #f70;
}
.exam{
	color: #f00;
}
		/*** The calendar table needs to be 'absolute' positioned
		 *   so it doesn't force the other month headers away.
		***/
		.may table {
			position: absolute;
			margin-left:-1px;
			background-color: #069;
		}
		
		/*** Initially, table is hidden, but will appear
		 *   when it's monthly header is hovered over.
		***/
		.jun table { 
			display: none;
			position: absolute;
			margin-left:-45px;
			background-color: #069;
		}
		th.jun:hover table {
			display: block;
		}
		
		/*** The hidden information for each calendar date. ***/
		td div{
			display: none;
			position: absolute;
			width: 300px;
			height: 210px;
			color: #fff;
			background-color: #069;
			border: 1px solid #000;
		}
		
		
		/***************************************/
		/*  Making the table cells highlight
		    and the hover boxes appear.        */
		td:hover {
			color: #fff;
			background-color: #036;
		}
		td:hover div{
			display: block;
		}
		
		
		/***************************************/
		/*  Setting specific appearance locations 
		 *  for each calendar date's hover box.  
		 */
		/*** Row 1 ***/
		td.a div {
			margin-left: 317px;
			margin-top: -42px;
		}
		td.b div {
			margin-left: 275px;
			margin-top: -42px;
		}
		td.c div {
			margin-left: 233px;
			margin-top: -42px;
		}
		td.d div {
			margin-left: 191px;
			margin-top: -42px;
		}
		td.e div {
			margin-left: 149px;
			margin-top: -42px;
		}
		td.f div {
			margin-left: 107px;
			margin-top: -42px;
		}
		td.g div {
			margin-left: 65px;
			margin-top: -42px;
		}
		
		/*** Row 2 ***/
		td.h div {
			margin-left: 317px;
			margin-top: -84px;
		}
		td.i div {
			margin-left: 275px;
			margin-top: -84px;
		}
		td.j div {
			margin-left: 233px;
			margin-top: -84px;
		}
		td.k div {
			margin-left: 191px;
			margin-top: -84px;
		}
		td.l div {
			margin-left: 149px;
			margin-top: -84px;
		}
		td.m div {
			margin-left: 107px;
			margin-top: -84px;
		}
		td.n div {
			margin-left: 65px;
			margin-top: -84px;
		}
		
		/*** Row 3 ***/
		td.o div {
			margin-left: 317px;
			margin-top: -126px;
		}
		td.p div {
			margin-left: 275px;
			margin-top: -126px;
		}
		td.q div {
			margin-left: 233px;
			margin-top: -126px;
		}
		td.r div {
			margin-left: 191px;
			margin-top: -126px;
		}
		td.s div {
			margin-left: 149px;
			margin-top: -126px;
		}
		td.t div {
			margin-left: 107px;
			margin-top: -126px;
		}
		td.u div {
			margin-left: 65px;
			margin-top: -126px;
		}
		
		/*** Row 4 ***/
		td.v div {
			margin-left: 317px;
			margin-top: -168px;
		}
		td.w div {
			margin-left: 275px;
			margin-top: -168px;
		}
		td.x div {
			margin-left: 233px;
			margin-top: -168px;
		}
		td.y div {
			margin-left: 191px;
			margin-top: -168px;
		}
		td.z div {
			margin-left: 149px;
			margin-top: -168px;
		}
		td.z1 div {
			margin-left: 107px;
			margin-top: -168px;
		}
		td.z2 div {
			margin-left: 65px;
			margin-top: -168px;
		}
		
		/*** Row 5 ***/
		td.z3 div {
			margin-left: 317px;
			margin-top: -210px;
		}
		td.z4 div {
			margin-left: 275px;
			margin-top: -210px;
		}
		td.z5 div {
			margin-left: 233px;
			margin-top: -210px;
		}
		td.z6 div {
			margin-left: 191px;
			margin-top: -210px;
		}
		td.z7 div {
			margin-left: 149px;
			margin-top: -210px;
		}
		td.z8 div {
			margin-left: 107px;
			margin-top: -210px;
		}
		td.z9 div {
			margin-left: 65px;
			margin-top: -210px;
		}