* { 
    box-sizing: border-box; 
}

body { 
    background: #000000 url(images/main-bg.gif) repeat-x; 
    color: #7F7F7F; 
    font-family: tahoma, arial; 
    font-size: 10px; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
    width: 100%; 
} 

* html body { } 

#banner img { 
    width: 100%; 
    height: auto; 
    display: block; 
} 

img { 
    max-width: 100%; 
    height: auto; 
    border: 0px; 
} 

a:link { 
    color: #9D9D9B; 
    font-size: 11px; 
    font-weight: bold; 
    text-decoration: underline; 
} 

a:visited { 
    color: #9D9D9B; 
    font-size: 11px; 
    font-weight: bold; 
    text-decoration: underline; 
} 

a:hover, 
a:active { 
    color: #FFFFFF; 
    font-size: 11px; 
    font-weight: bold; 
    text-decoration: none; 
} 

#footer a:link { 
    color: #FFFFFF; 
    font-size: 11px; 
    font-weight: bold; 
    margin-left: 10px; 
    margin-right: 10px; 
    text-decoration: none; 
} 

#footer a:visited { 
    color: #FFFFFF; 
    font-size: 11px; 
    font-weight: bold; 
    margin-left: 10px; 
    margin-right: 10px; 
    text-decoration: none; 
} 

#footer a:hover, 
#footer a:active { 
    color: #000000; 
    font-size: 11px; 
    font-weight: bold; 
    margin-left: 10px; 
    margin-right: 10px; 
    text-decoration: underline; 
} 

#banner { 
    clear: both; 
    height: auto; 
    min-height: 100px; 
    width: 100%; 
    overflow: hidden; 
} 

#container { 
    margin: 0px auto; 
    text-align: left; 
    width: 776px; 
    max-width: 100%; 
    padding: 0 10px; 
} 

#content { 
    clear: both; 
    background-image: url(images/content-bg.gif); 
    background-repeat: repeat; 
    width: 100%; 
    overflow: hidden; 
} 

#footer { 
    background: url(images/footer-bg.gif) no-repeat; 
    clear: both; 
    color: #FFFFFF; 
    display: block; 
    font-size: 11px; 
    height: auto; 
    min-height: 108px; 
    padding-top: 20px; 
    padding-bottom: 20px; 
    text-align: center; 
    width: 100%; 
} 

#headlines { 
    background: #1F1F1F; 
    padding: 10px; 
    width: 100%; 
    overflow: hidden; 
} 

#left { 
    background: #333333 url(images/content-top-bg.gif) no-repeat 0% 0%; 
    float: left; 
    padding-bottom: 20px; 
    padding-left: 20px; 
    padding-right: 20px; 
    padding-top: 80px; 
    width: 462px; 
} 

#logo { 
    height: auto; 
    width: 100%; 
} 

#logo img { 
    width: 100%; 
    height: auto; 
    display: block; 
} 

#nav { 
    clear: both; 
    display: block; 
    height: auto; 
    min-height: 43px; 
    width: 100%; 
    background-image: url(images/nav-bg.gif); 
    background-repeat: repeat-x; 
    padding-bottom: 5px; 
} 

#nav ul li a { 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 14px; 
    font-weight: bolder; 
    text-transform: uppercase; 
    color: #FFFFFF; 
    text-decoration: none; 
} 

#nav ul { 
    list-style: none; 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 

.nlink, 
.nlinkend { 
    float: left; 
    width: auto; 
    list-style: none; 
    display: inline; 
    text-align: center; 
    padding-top: 15px; 
    padding-left: 17px; 
    padding-right: 17px; 
    height: 28px; 
} 

.nlink { 
    background-image: url(images/nav-line.gif); 
    background-repeat: no-repeat; 
    background-position: right top; 
} 

.nlinkend { 
    background-image: none; 
} 

#right { 
    float: left; 
    width: 274px; 
} 

#right p { 
    margin-top: 0px; 
} 

* html #right p { 
    margin-top: -5px; 
} 

#stats { 
    background: #494949; 
    padding: 10px; 
    width: 100%; 
} 

* html #stats { 
    height: 170px; 
} 

.date { 
    color: #827961; 
    font-weight: bold; 
} 

.flt-lft { 
    float: left; 
    margin-right: 20px; 
} 

.flt-rgt { 
    float: right; 
} 

.heading1 { 
    background: url(images/heading-bg-1.gif) no-repeat; 
    color: #909090; 
    display: block; 
    font-family: arial, tahoma; 
    font-size: 14px; 
    font-weight: bold; 
    height: 21px; 
    margin-bottom: 12px; 
    padding-left: 40px; 
    padding-top: 4px; 
    width: 181px; 
} 

* html .heading1 { 
    margin-bottom: 5px; 
} 

.heading2 { 
    background: url(images/heading-bg-2.gif) no-repeat; 
    color: #909090; 
    display: block; 
    font-family: arial, tahoma; 
    font-size: 14px; 
    font-weight: bold; 
    height: 21px; 
    margin-bottom: 5px; 
    padding-left: 38px; 
    padding-top: 4px; 
    width: 161px; 
}


/* ==========================================================================
   MOBILE SITE LAYOUT
   ========================================================================== */

@media screen and (max-width: 776px) {

    body {
        font-size: 14px;
        width: 100%;
        overflow-x: hidden;
    }

    #container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 5px !important;
        margin: 0 auto !important;
    }

    #content,
    #left,
    #right,
    #footer,
    #headlines,
    #stats {
        width: 100% !important;
        float: none !important;
        height: auto !important;
    }

    #left {
        padding-top: 30px;
    }

    #nav {
        height: auto !important;
    }

    #nav ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nlink,
    .nlinkend {
        float: none !important;
        display: inline-block !important;
        padding: 10px 12px !important;
        height: auto !important;
        background-image: none !important;
    }

}


/* ==========================================================================
   CALENDAR
   ========================================================================== */


/* Main calendar table */

#container > table:first-of-type {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    background-color: #1F1F1F;
    color: #FFFFFF;
    table-layout: fixed;
}


/* Calendar header row */

#container > table:first-of-type > tr:first-child > td {
    background-color: #808080;
    color: #FFFFFF;
    padding: 3px;
}


/* Calendar navigation table */

#container > table:first-of-type > tr:first-child table {
    width: 100%;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: auto;
}

#container > table:first-of-type > tr:first-child table td {
    display: table-cell;
    background-color: #808080;
    color: #FFFFFF;
    padding: 3px;
}


/* Calendar navigation links */

#container > table:first-of-type > tr:first-child table a,
#container > table:first-of-type > tr:first-child table a:link,
#container > table:first-of-type > tr:first-child table a:visited {
    color: #FFFFFF;
    text-decoration: none;
}

#container > table:first-of-type > tr:first-child table a:hover,
#container > table:first-of-type > tr:first-child table a:active {
    color: #FFFFFF;
    text-decoration: underline;
}


/* Days of week */

#container > table:first-of-type > tr:nth-child(2) td {
    display: table-cell;
    width: 14.2857%;
    background-color: #808080;
    color: #FFFFFF;
    border: 1px solid #666666;
    text-align: center;
    padding: 5px 2px;
}


/* Calendar day cells */

#container > table:first-of-type > tr:nth-child(n+3) td {
    display: table-cell;
    width: 14.2857%;
    min-height: 60px;
    height: auto;
    background-color: #2A2A2A;
    color: #FFFFFF;
    border: 1px solid #666666;
    padding: 4px;
    vertical-align: top;
    text-align: left;
    overflow: visible;
}


/* Today's date */

#container > table:first-of-type > tr:nth-child(n+3) td[style*="background-color:#4A4A4A"] {
    background-color: #4A4A4A !important;
}


/* ==========================================================================
   CALENDAR EVENT TITLES
   ========================================================================== */

/*
   Calendar event links are deliberately larger than the
   original 8px / 11px sizing.

   18px is used instead of 22px so event names remain
   readable while still fitting within the seven-column
   calendar.
*/

#container > table:first-of-type .calendar-event,
#container > table:first-of-type .calendar-event:link,
#container > table:first-of-type .calendar-event:visited {
    display: inline;
    color: #FFFFFF !important;
    font-family: tahoma, arial, sans-serif;
    font-size: 18px !important;
    font-weight: normal !important;
    line-height: 20px !important;
    text-decoration: none !important;

    /*
       Force long event names to remain inside
       their calendar cell.
    */
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}

#container > table:first-of-type .calendar-event:hover,
#container > table:first-of-type .calendar-event:active {
    color: #FFFFFF !important;
    font-size: 18px !important;
    line-height: 20px !important;
    text-decoration: underline !important;

    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
}


/* ==========================================================================
   OLD FONT TAG SUPPORT
   ========================================================================== */

/*
   Keeps existing calendar HTML working while allowing
   the new .calendar-event class to control event titles.
*/

#container > table:first-of-type font[size="2"] {
    font-size: inherit;
}

#container > table:first-of-type font[size="2"] a:not(.calendar-event) {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    text-decoration: none;
}

#container > table:first-of-type font[size="2"] a:not(.calendar-event):hover,
#container > table:first-of-type font[size="2"] a:not(.calendar-event):active {
    color: #FFFFFF;
    text-decoration: underline;
}


/* ==========================================================================
   ADD EVENT BUTTON
   ========================================================================== */

input[name="AddEvent"] {
    background-color: #494949;
    border: 1px solid #777777;
    color: #FFFFFF;
    cursor: pointer;
    font-family: tahoma, arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
}

input[name="AddEvent"]:hover {
    background-color: #666666;
}


/* ==========================================================================
   CALENDAR - MOBILE PHONES
   ========================================================================== */

@media screen and (max-width: 776px) {

    /*
       Keep the calendar as a genuine HTML table.

       Seven columns:
       Sunday through Saturday.
    */

    #container > table:first-of-type {
        display: table !important;
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed !important;
        border-collapse: collapse !important;
        border-spacing: 0 !important;
    }


    /* Keep calendar rows as rows */

    #container > table:first-of-type > tr {
        display: table-row !important;
    }


    /* Keep calendar cells as cells */

    #container > table:first-of-type > tr > td {
        display: table-cell !important;
    }


    /* Seven equal columns */

    #container > table:first-of-type > tr:nth-child(2) > td,
    #container > table:first-of-type > tr:nth-child(n+3) > td {
        width: 14.2857% !important;
    }


    /* Weekday headings */

    #container > table:first-of-type > tr:nth-child(2) > td {
        height: auto !important;
        padding: 5px 0 !important;
        font-size: 10px !important;
        text-align: center !important;
        white-space: nowrap;
    }


    /*
       Day cells.

       Do NOT force a fixed height here.
       The cell can grow when an event title wraps.
    */

    #container > table:first-of-type > tr:nth-child(n+3) > td {
        height: auto !important;
        min-height: 55px !important;
        min-width: 0 !important;
        padding: 3px !important;
        font-size: 10px !important;
        line-height: 12px !important;
        vertical-align: top !important;
        text-align: left !important;
        overflow: visible !important;
    }


    /* Current day */

    #container > table:first-of-type > tr:nth-child(n+3) > td[style*="background-color:#4A4A4A"] {
        background-color: #4A4A4A !important;
    }


    /*
       Navigation table inside calendar header.
       This remains a normal table and does NOT become
       seven columns.
    */

    #container > table:first-of-type > tr:first-child > td > table {
        display: table !important;
        width: 100% !important;
        table-layout: auto !important;
    }

    #container > table:first-of-type > tr:first-child > td > table tr {
        display: table-row !important;
    }

    #container > table:first-of-type > tr:first-child > td > table td {
        display: table-cell !important;
        width: auto !important;
        padding: 3px !important;
    }


    /* Month and year */

    #container > table:first-of-type > tr:first-child > td > table td:nth-child(2) {
        font-size: 12px;
        white-space: nowrap;
    }


    /* Previous / next arrows */

    #container > table:first-of-type > tr:first-child > td > table td:first-child,
    #container > table:first-of-type > tr:first-child > td > table td:nth-child(3) {
        width: 25% !important;
    }


    /* Close button */

    #container > table:first-of-type > tr:first-child > td > table td:last-child {
        width: 20px !important;
    }


    /*
       Event titles.

       Keep the same 18px size on mobile.
       The link itself is forced to wrap so it
       cannot extend into another calendar cell.
    */

    #container > table:first-of-type .calendar-event,
    #container > table:first-of-type .calendar-event:link,
    #container > table:first-of-type .calendar-event:visited {
        display: inline !important;
        color: #FFFFFF !important;
        font-size: 18px !important;
        line-height: 20px !important;
        font-weight: normal !important;

        white-space: normal !important;
        overflow-wrap: anywhere !important;
        word-wrap: break-word !important;
        word-break: break-word !important;

        text-decoration: none !important;
    }

    #container > table:first-of-type .calendar-event:hover,
    #container > table:first-of-type .calendar-event:active {
        font-size: 18px !important;
        line-height: 20px !important;
        color: #FFFFFF !important;
        text-decoration: underline !important;
    }


    /*
       Existing calendar links that do not use
       .calendar-event retain their smaller size.
    */

    #container > table:first-of-type font[size="2"] a:not(.calendar-event) {
        font-size: 11px !important;
        line-height: 12px !important;
        font-weight: normal !important;
    }


    /*
       Add Event button
    */

    input[name="AddEvent"] {
        font-size: 13px;
        padding: 8px 14px;
    }


    /*
       Upcoming Events table.

       This is deliberately separate from the calendar.
       The calendar remains seven columns.
    */

    #container > table:not(:first-of-type) {
        max-width: 100%;
    }

	/* ==========================================================================
   EVENT DETAILS
   ========================================================================== */

#container .event-details {
    color: #FFFFFF !important;
    font-family: tahoma, arial, sans-serif !important;
    font-size: 18px !important;
    line-height: 24px !important;
}

#container .event-details b {
    color: #FFFFFF !important;
    font-size: 18px !important;
    font-weight: bold !important;
}

#container .event-details p {
    margin-top: 18px;
    margin-bottom: 18px;
}


/* ==========================================================================
   EVENT DETAILS - MOBILE
   ========================================================================== */

@media screen and (max-width: 776px) {

    #container .event-details {
        font-size: 18px !important;
        line-height: 24px !important;
    }

    #container .event-details b {
        font-size: 18px !important;
    }

}
}