/*
|
| TITLE:	Calendar of Events Master Style Sheet
| AUTHOR:	Eric Shiarla, eric@pendergraphics.com
|			
|			Based off Veerle's calendar 
|			http://veerle.duoh.com/index.php/blog/comments/a_css_styled_calendar/	
|			
| EMPLOYED:	Pendergraphics Design Group, http://www.pendergraphics.com 	
| 
| CREATED:	December 9, 2006
| MODIFIED: 
|
*/

#calendar {
	width: 694px;
	padding: 0;
	margin: 0 auto 20px auto;
	border-left: 1px solid #ccc;
	font: normal 12px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #666;
	text-align: center;
	background-color: #fff;
}


#calendar a {
	color: #DF9496;
}

#calendar .nav, #calendar .nav a {
	font: bold 18px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #fff;	
	text-align: center;
	text-decoration: none;
}	


#calendar caption {
	margin: 20px auto 0 auto;
	padding: 0;
	width: 694px;
	background: #a8a8a8;
	color: #fff;	 
	font: bold 12px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
}

#calendar th {
	font: bold 11px/20px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	color: #555;
	background: #efefef;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
}

#calendar .today, #calendar td.today a, #calendar td.today a:link, #calendar td.today a:visited {
	color: #fefefe;
	font-weight: bold;
	background: #ab7a5c url(../../images/bg-calendar-today.jpg) no-repeat top left;
}

	#calendar td.today a, #calendar td.today a:link, #calendar td.today a:visited {
		background: none;
	}

	#calendar td.today div.complete,
	#calendar td.today div.complete a, 
	#calendar td.today div.complete a:link, 
	#calendar td.today div.complete a:visited {
		color: #666;
		font-weight: normal;
		background: none;
	}
	
	#calendar td.today div.complete {
		background-color: #DDDDDD;
		border: 1px solid #CCCCCC;
	}
	
	#calendar td.today div.complete a.close {
		display: block;
		padding: 5px;
		font-weight: bold;
		background-color: #F0F0F0;
	}

#calendar .empty { background: #f6f6f6; }

#calendar td {
	border-right: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	width: 99px;
	height: 99px;
	text-align: center;
	background: url(images/bg_calendar.gif) no-repeat right bottom;
}

#calendar td div {
	width: 100%;
	height: 100%;
	position: relative;
	text-align: center;
}


	#calendar td div.fullDescription {
		display: none;
		position: absolute;
		top: 0;
		width: 300px;
		height: auto;
		text-align: left;
		/*opacity: .90;
		filter: alpha(opacity=90); */
		background-color: #DDDDDD;
		border: 1px solid #CCCCCC;
		z-index: 20;		
	}
	
		#calendar td div.fullDescription h5 {
			margin: 0;
			padding: 5px;
			color: #fff;
			width: 290px;
			background-color: #333333;			
		}
		
		#calendar td div.fullDescription h6 {
			margin: 8px;
			color: #333;
		}	

		#calendar td div.fullDescription p {
			margin: 8px;
			padding: 0;
		}
		

	#calendar td div.complete {
		display: none;
		padding: 0;
		width: 250px;
		height: auto;
		position: absolute;
		top: 0;
		left: 0;
		background-color: #DDDDDD;
		border: 1px solid #CCCCCC;
		z-index: 99;
	}
	
	#calendar td div.complete h4 {
		margin: 0;
		padding: 5px;
		width: 240px;
		color: #fff;
		text-align: left;
		background-color: #555;
	}
	
	#calendar td div.complete a.close {
		display: block;
		padding: 5px;
		font-weight: bold;
		color: #fff;
		background-color: #555;
	}
		
		#calendar td div.complete a.close:hover {
			background-color: #505050;
		}
	
	#calendar td div.complete ul {
		margin: 5px;
		padding: 0;
		width: auto;
		height: auto;
	}
	
	#calendar td div.complete li { padding: 5px; }
	
	#calendar td div.complete ul { background-color: #e8e8e8; }

#calendar td ul {
	margin: 0;
	padding: 4px 2px 2px 21px;
	width: 75px;
	height: 93px;
	list-style: none;
	font-weight: normal;
	font-size: 90%;
	text-align: left;
	
}

#calendar td li {
	margin: 0;
	padding: 2px;
	background: none;
	
	
}

	#calendar td li.highlight { background-color: #b0b0b0; }

#calendar td span {
	position: absolute;
	top: 5px;
	left: 5px;
	z-index: 1;
}

#calendar td a:link, #calendar td a:visited {	
	color: #666;
	text-decoration: none;
}

#calendar td a:hover, #calendar td a:active {
	color: #999;
	text-decoration: none;
}