#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 * {
        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;
}

{
    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>

