#CalendarMonth000000001
<tmpl_if admin>
	<p><tmpl_var adminControls></p>
</tmpl_if>

<tmpl_if displayTitle>
	<h1><tmpl_var title></h1>
</tmpl_if>

<tmpl_if description>
	<tmpl_var description>
</tmpl_if>


<table cellspacing="0" cellpadding="0" width="630" id="mCAL">
<tr>
	<td style="text-align:right">
		<a class="tab" href="<tmpl_var urlDay>">Day</a>
		<a class="tab" href="<tmpl_var urlWeek>">Week</a>
		<a class="tab" href="<tmpl_var urlMonth>">Month</a>
		<a class="tab" href="<tmpl_var urlSearch>">Search</a>

		<div class="controls"><tmpl_if editor><a href="<tmpl_var urlAdd>">Add Event</a></tmpl_if> &bull; <a href="<tmpl_var urlPrint>">Print</a> 
			<!--&bull; <a href="#">Subscribe</a>-->
		</div>
	</td>
</tr>
<tr>
	<td class="months">
		<div style="padding:3px 0px;">
			<a href="<tmpl_var pagePrevUrl>" style="font-weight:bold;margin-right:8px;">&laquo; <tmpl_var pagePrevYear></a>&bull;
			<tmpl_loop months>
			<a style="margin-right:4px;" href="<tmpl_var monthUrl>" class="monthLink<tmpl_if monthCurrent> current</tmpl_if>"><tmpl_var monthAbbr></a>
			</tmpl_loop>
			&bull;
			<a href="<tmpl_var pageNextUrl>" style="font-weight:bold;padding-left:8px"><tmpl_var pageNextYear> &raquo;</a>	 
		</div>
	</td>
</tr>
<tr>
	<td>
		<div  class="curMonth">
			<tmpl_var monthName> <tmpl_var year>
		</div>
	</td>
</tr>
<tr>
	<td style="width:100%">
	
	<!-- the calendar table -->
	<table id="month" width="100%" cellspacing="2" cellpadding="0">	
		<!-- day names -->
		<tr><tmpl_loop dayNames>
			<th><tmpl_var dayName></th>
		</tmpl_loop></tr>
		
		<!-- the grid -->
		<tmpl_loop weeks><tr>
		<tmpl_loop days><td><div class="<tmpl_if dayMonth>active</tmpl_if><tmpl_if dayCurrent> current</tmpl_if>">
			<tmpl_if dayMonth>
			<a class="number" href="<tmpl_var dayUrl>"><tmpl_var dayMonth></a>

			<tmpl_if events>
			<ul class="events"><tmpl_loop events>
				<li><a href="/<tmpl_var eventUrl>">
					<tmpl_var eventMenuTitle>
				</a></li>
			</tmpl_loop></ul>			
			<a href="#" onmouseover="DelayedRollover.showPopup('more<tmpl_var dayMonth>')" onmouseout="DelayedRollover.hidePopup('more<tmpl_var dayMonth>')" class="moreButton" onclick="return false;">
				<img src="/extras/wobject/Calendar/images/more.gif" />
			</a>
			<div style="display: none" id="more<tmpl_var dayMonth>" class="moreDisplay" onmouseover="DelayedRollover.showPopup('more<tmpl_var dayMonth>')" onmouseout="DelayedRollover.hidePopup('more<tmpl_var dayMonth>')" >
			<tmpl_loop events>
			<a href="/<tmpl_var eventUrl>"><tmpl_var eventTitle></a><br/>
			</tmpl_loop>
			</div>
			</tmpl_if> <!--/events-->
			</tmpl_if> <!--/day-->
		</div></td></tmpl_loop> <!--/days-->
		</tr></tmpl_loop>
	</table>
</tr>
</table>
~~~
<script type="text/javascript">
// Delayed rollovers
// From: http://www.pjhyett.com/articles/2006/07/05/timeout-your-mouseovers
// Modified by: Doug Bell
var DelayedRollover = {
    timeout : new Array(),
    showPopup : function(e){
	element = document.getElementById(e);
        clearTimeout(this.timeout[e]);
        if(element.style.display == 'none'){
            this.timeout[e] = setTimeout(function(){element.style.display="block"},10);
        }
    },
    hidePopup : function(e){
	element = document.getElementById(e);
         if(element.style.display == 'none'){
            clearTimeout(this.timeout[e]);
        }else{
            this.timeout[e] = setTimeout(function(){element.style.display="none"},10);
        }
    }    
}
</script>
<style type="text/css">
#mCAL { z-index: 0; }
		#mCAL * {
			margin:0px;			
		}
		#mCAL td {
			font-size:10px;
			font-family:arial;
		}
		#mCAL .tab {

			border-bottom-style:none;
			font-weight:bold;
			padding: 2px 15px 0px 15px;
			text-align;center;
			background-color:#E9ECF3;
			-moz-border-radius-topLeft:10px;
			-moz-border-radius-topRight:10px;
			color:#7588B5;
			text-decoration:none;
			font-size:10pt;
			display:block;
			float:left;
			margin-right:5px;
		}
		#mCAL .tab:hover {
			color:black;
		}	
		#mCAL .active {
			background-color:#DFE3EE;
			color:#404F77;
			border-bottom:solid #DFE3EE 1px;
		}	
		#mCAL .controls {
			float:right;
			vertical-align:bottom;
		}
		#mCAL a {
			font-size:11px;
			color:#517AC8;
		}	
		#mCAL .months {
			text-align:center;
			background-color:#DFE3EE;			
		}
		#mCAL .months a {
			color:#517AC8;
			text-decoration:none;
		}
		#mCAL .months .monthLink {
			text-decoration:none;			
			padding-left:5px;
			padding-right:5px;
			color:#AAB8D5;
			font-size:12px;
			font-weight:bold;
		}	

		#mCAL .months .current, #mCAL .months .monthLink:hover {
			font-weight:bold;
			color:#517AC8;
			background-color:#fff;			
			-moz-border-radius:5px;
		}
		#mCAL .curMonth {
			text-align:center;
			margin: 2px 0px;
			background-color:#517AC8;
			color:white;
			font-size:14px;
			font-weight:bold;
		}



/**** Month view ****/
/* Table */
#mCAL table#month
{

}

#mCAL table#month *
{
	padding:		0px;
	margin:			0px;
}

#mCAL table#month a
{
	text-decoration:	none;
}

#mCAL table#month th
{
	-moz-box-sizing:border-box;
	width:			85px;
	background-color:	#517AC8;
	text-align:		center;
	font-weight:		bold;
	color:			white;	
}

#mCAL table#month div
{
	position:		relative;
	width:			85px;
	height:			85px;
	margin:			0px;
	background-color:	#E9ECF3;
}

#mCAL table#month ul 
{	
	overflow:		hidden;
}

#mCAL table#month .active 
{
	-moz-border-radius-topLeft:	8px;
	-moz-border-radius-bottomLeft:	8px;
	-moz-border-radius-bottomRight:	8px;
	vertical-align:		top;		
	background-color:	#CCD2E3;
	border:			solid #CCD2E3 1px;
}

#mCAL table#month .current 
{
	background-color:	#FFE4B3;
	border-color:		orange;
}

#mCAL table#month .number 
{
	-moz-border-radius-bottomLeft:5px;
	display:		block;
	position:		absolute;
	top:			0px;
	right:			0px;
	height:			10px;
	width:			10px;
	background-color:	#516BA4;
	color:			white;
	text-align:		center;
	vertical-align:		middle;
	padding:		0px 3px 2px 2px;
	font-weight:		bold;
}

#mCAL table#month .current .number
{
	background-color:	orange;
	color:			black;
}

#mCAL table#month .events 
{
	padding:		3px;
	padding-top:		8px;
	font-weight:		bold;			
}

#mCAL table#month .events a 
{
	color:			#4F4F4F;
	text-decoration:	none;
	font-size:		9px;
}

#mCAL table#month .moreButton 
{
	border-style:		none;
	position:		absolute;
	bottom:			0px;
	width:			100%;
	height:			9px;
	background-color:	#517AC8;	
	font-size:		5px;
	text-align:		center;
	-moz-border-radius-bottomLeft:	8px;
	-moz-border-radius-bottomRight:	8px;
}

#mCAL table#month .moreButton img
{
	border:			none;
}

#mCAL table#month .moreButton:hover
{
	background-color:	orange;
}


/* MORE STYLES */

#mCAL table#month .moreDisplay 
{
	position: 		absolute;
	left: 			0px;
	top: 			85px;
	border:			solid orange 1px;
	border-top:		solid orange 2px;
	font-family:		arial;
	font-size:		10px;
	width:			300px;
	height: 		auto;
	padding:		2px;
	background-color:	#FFD3A8;
	z-index: 		100;
}
* html body table#month td { position: relative; z-index: 1; }
</style>
