@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,300,700,600,300italic,400italic,600italic,700italic,800,800italic');
/* ############################################################################
   ##
   ##  Global Website Stylesheet
   ##
   ######################################################################### */

/* ####################################
   HTML Element Styles
   ################################## */

a
	{
	}
a:link
	{
	color: #018937;
	}
a:visited
	{
	color: #018937;
	text-decoration: none;
	}
a:hover
	{
	color: #000;
	text-decoration: underline;
	}
body
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	color: #404040;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	}
td {
	font-family: 'Open Sans',arial, helvetica, sans-serif;
    font-size: 87.5%;
}
th {
	font-weight: bold;
	text-align: left;
}

p
	{
	margin-top: 0;
	margin-bottom: 1.35em;
	}
h1
	{
	font-size: 200%;
	font-weight: normal;
	color: #000000;
	margin-top: 0;
	margin-bottom: 0.5em;
	}
h2
	{
	font-size: 150%;
	font-weight: normal;
	color: #000000;
	margin-bottom: 0.5em;
	}
h3
	{
	font-size: 120%;
	color: #000000;
	margin-top: 2em;
	margin-bottom: 0.5em;
	}
h4
	{
	font-size: 100%;
	color: #000000;
	margin-top: 2em;
	margin-bottom: 0.5em;
	}
h5
	{
	font-size: 100%;
	font-weight: normal;
	font-style: italic;
	color: #606060;
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	}
h6
	{
	font-size: 92.5%;
	font-weight: normal;
	text-decoration: underline;
	margin-top: 0;
	margin-bottom: 0.25em;
	}
ul
	{
	margin-top: 0.5em;
	margin-bottom: 1.35em;
	list-style: url("/images/ul_list_bullet_point_square.gif") square;
	}
ul li
	{
	margin-bottom: 0.7em;
	}
ol
	{
	margin-top: 0.5em;
	margin-bottom: 1.35em;
	}
ol li
	{
	margin-left: -1em;
	text-align: left;
	margin-bottom: 0.7em;
	}
big
	{
	font-size: 110%;
	}
small
	{
	font-size: 91.6%;
	}
hr
	{
	width: 100%;
	height: 1px;
	color: #cccccc;
	}
img
	{
	border-color: #333333;
	FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00,Duration=0.75,);
	}
caption
	{
	font-weight: bold;
	margin-top: 0;
	margin-bottom: 0.25em;
	text-align: left;
	}
address
	{
	font-style: italic;
	margin-top: 0;
	margin-bottom: 1.35em;
	}
pre
	{
	font-family: courier, 'Open Sans',arial, helvetica, sans-serif;
	}

/* ####################################
   Form Styles
   ################################## */

form
	{
	margin-top: 0px;
	margin-bottom: 0px;
	}
/* Don't use these, use the standards */
/*
input
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	border: #cccccc 1px solid;
	background-color: #ffffff;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #323232;
	margin-top: 0;
	margin-bottom: 0;
	}
input.blank
	{
	border: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
	padding-top: 0;
	padding-bottom: 0;
	background-color: transparent;
	background: url('/images/templates/spacer.gif');
	}
input.submit
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	color: #323232;
	border: #cccccc 1px outset;
	background: url('/images/templates/bg_nav.gif') #e0e0e0;
	}
input.submit-small
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 90%;
	color: #323232;
	border: #cccccc 1px outset;
	background: url('/images/templates/bg_nav.gif') #e0e0e0;
	}
select
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	border: #a6adaf 1px solid;
	background-color: #ffffff;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #323232;
	margin-top: 0;
	margin-bottom: 0;
	}
textarea
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	border: #a6adaf 1px solid;
	background-color: #ffffff;
	padding-left: 3px;
	padding-right: 3px;
	padding-top: 1px;
	padding-bottom: 1px;
	color: #323232;
	margin-top: 0;
	margin-bottom: 0;
	}
*/

/* ####################################
   Main Menu
   ################################## */
   
.mainmenu
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 11px;
	color: #111111;
	text-decoration : none;
	}
.mainmenu:hover
	{
	color: #666666;
	}
.mainmenu:active
	{
	color: #333333;
	}
.mainmenu:visited
	{
	color: #111111;
	}

/* Pull down menu (CoolMenu) styles */

.mainmenu-top
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 11px;
	color: #111111;
	text-decoration : none;
	padding: 2px 0;
	}
.mainmenu-top-over
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-decoration : none;
	padding: 2px 0;
	}

.mainmenu-sub
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 11px;
	color: #666666;
	text-decoration : none;
	padding: 2px 10;
	}
.mainmenu-sub-over
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 11px;
	color: #111111;
	text-decoration : none;
	padding: 2px 10;
	}

/* ####################################
   Sub Menu
   ################################## */

.submenu-section
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal
	}
.submenu-section:hover
	{
	}
.submenu-section:active
	{
	}
.submenu-section:visited
	{
	}
.submenu-section-selected
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 14px;
	font-weight: normal
	}
	
.submenu-level2
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	}
.submenu-level2:hover
	{
	}
.submenu-level2:active
	{
	}
.submenu-level2:visited
	{
	}
.submenu-level2-selected
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	}

.submenu-level3
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	}
.submenu-level3:hover
	{
	}
.submenu-level3:active
	{
	}
.submenu-level3:visited
	{
	}
.submenu-level3-selected
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	}

.submenu-level4
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	}
.submenu-level4:hover
	{
	}
.submenu-level4:active
	{
	}
.submenu-level4:visited
	{
	}
.submenu-level4-selected
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	}

/* ####################################
   Table Styles
   ################################## */

table
{
	empty-cells: show;
	border-collapse: collapse;
}

table.small td
{
	font-size: 68.75%;
}

.table-header
	{
	background: url("/images/bg_nav.gif") #dddddd;
	height: 19px;
	/*
	background: url("/images/templates/bg_table_header.gif") #cccccc;
	height: 19px;
	*/
	}
.table-footer
	{
	}
.table-bgdark
	{
	background: rgba(0,0,0,0.05);
	}
.table-bglight
	{
	background: rgba(255,255,255,0);
	}
.table-border
	{
	background: #eeeeee;
	}
.table-borderlight
	{
	background: #f8f8f8;
	}

/* ####################################
   Custom Element Styles
   ################################## */
   
.font-news
	{
	font-size: 90%;
	color: #999999;
	}

.font-fieldtitle
	{
	font-weight: bold;
	}
	
.date-author
	{
	font-family: 'Open Sans',arial, helvetica, sans-serif;
	font-size: 92.5%;
	color: #999999;
	}

.divider-vertical
	{
	background: #cccccc;
	}
.divider-vertical-light
	{
	background: #eeeeee;
	}
.divider-horizontal
	{
	width: 100%;
	height: 1px;
	background: #cccccc;
	margin-top: 1em;
	margin-bottom: 1em;
	}
.divider-horizontal-light
	{
	background: #eeeeee;
	}

.trailnavigation
	{
	font-size: 90%;
	}
.trailnavigation:hover
	{
	}
.trailnavigation:active
	{
	}
.trailnavigation:visited
	{
	}

ul.warnings
	{
	margin-top: 0.5em;
	margin-bottom: 1.35em;
	list-style: url("/images/ul_list_warning.gif") square;
	}
ul.warnings li
	{
	margin-bottom: 0.7em;
	}

#ProgressSummary {
}

    #ProgressSummary th {
        font-size: 87.5%;
        background: #f0f0f0;
    }

    #ProgressSummary td {
        font-size: 87.5%;
        background: #ffffff;
    }

#HelpDeskSummary {
    border-collapse: collapse;
}

    #HelpDeskSummary th, #HelpDeskSummary td {
        border: #e0e0e0 1px solid;
    }

        #HelpDeskSummary tr[bgcolor="#e0e0e0"] {
            background: #f0f0f0;
        }

        #HelpDeskSummary tr:hover {
            background: #e8e8e8;
        }

    #HelpDesk .toolbar {
        margin: 0 0 1em;
    }
    
        #HelpDesk .toolbar a {
            padding: 5px 10px;
            font-family: 'Open Sans Semibold', Arial, Helvetica, sans-serif;
            font-weight: normal;
            font-size: 87.5%;
            color: #ffffff;
	        background-color: #718b21;
            border-radius: 2px;
            cursor: pointer;
        }

        #HelpDesk .toolbar a:hover {
            text-decoration: none;
            background-color: #acd139;
        }

        #HelpDesk .toolbar form {
            display: inline-block;
            vertical-align: middle;
            margin-left: 20px;
            padding-left: 20px;
            border-left: #c0c0c0 1px solid;
            margin-top: -2px;
        }

            #HelpDesk .toolbar form table {
            }

                #HelpDesk .toolbar form table tr {
                }

                    #HelpDesk .toolbar form table tr td {
                    }

        #HelpDesk .toolbar form .submitButton.goButton {
            padding: 5px 8px;
            color: #ffffff;
            font-family: 'Open Sans Semibold', Arial, Helvetica, sans-serif;
            font-weight: normal;
            background: #718b21;
            border-radius: 2px;
            border: 0;
            cursor: pointer;
        }

            #HelpDesk .toolbar form .submitButton.goButton:hover {
                text-decoration: none;
                background-color: #acd139;
            }

/* ########################################################
   Header 
   ######################################################## */

    #Header {
        position: relative;
        float: left;
        width: 100%;
        z-index: 5;
        color: #ffffff;
        text-align: center;
        background-color: #23201f;
        background-image: url('/images/CritterHeaderBounce50.png');
        background-repeat: no-repeat;
        background-position: 102% -38px;
        background-size: 280px auto;
    }

    #Header:hover {
        background-image: url('/images/CritterHeaderBounce.png');
        transition: all 3s ease-in;
    }

    #HeaderInner {
        width: 81.16%;
        margin: 0 auto;
        text-align: left;
    }
 
        #Header a {
        }
    
            #Header a:link {
                color: #acd139;
            }
    
            #Header a:visited {
                color: #acd139;
            }
    
            #Header a:hover {
                color: #ffffff;
            }
    
            #Header a:active {
            }
        
        #Header #Logo {
            position: relative;
            float: left;
            width: 316px;
            margin: 25px 60px 25px -65px;
        }

            #Header #Logo img {
                max-width: 100%;
            }

        #Header #SearchSite {
            display: none;
        }

            #Header #SearchSite label {
            }
            
            #Header #SearchSite input {
            }

            #Header #SearchSite .submit {
            }

            #Header #SearchSite .keywords {
            }
                    
            #Header #SearchSite #AdvancedSearchLink {
                display: none;
            }

        #Header #LoginStatusShort {
        }

        #Header #AnchorMenu {
        }

            #Header #AnchorMenu a {
            }
                        
                #Header #AnchorMenu a:link {
                }
                
                #Header #AnchorMenu a:visited {
                }
                
                #Header #AnchorMenu a:hover {
                }
                
                #Header #AnchorMenu a:active {
                }

        #Header #MainMenu {
            position: relative;
            float: left;
            z-index: 1;
            margin: 52px 0 0 0;
        }

        #Header #MainMenuInner {
        }
        
/* ############################################################################
   ## 
   ##  MAIN MENU
   ##
   ######################################################################### */

/* ####################################
   GLOBAL - List Layout
   ################################## */

#MenuUL {
    /* The nav object. (A <ul> in the standard platform.) */
    position: relative; /* DON'T CHANGE - Assures nav container has proper cascading position. */
    float: left; /* DON'T CHANGE - Makes IE and FF behave the same regarding ul dimensions. */
    margin: 0; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
    text-transform: lowercase;
}

#MenuUL li {
    /* All list items within the nav object */
    float: left; /* float: left; makes the top level horizontal. */
    padding-right: 1em;
}

    #MenuUL li:hover, #MenuUL li.sfhover {
        /* All list items within the nav object - Hover */
    }

/* ####################################
   GLOBAL - Anchors (Links)
   ################################## */

#MenuUL a {
    /* All anchor tags within the nav object */
    display: block; /* DON'T CHANGE - Fills the width of the li with link rollover. */
    margin: 0 0 10px;
    padding-right: 0.75em;
    line-height: 125%;
	text-decoration: none;
    background-image: url('/images/icons/arrow16.png');
    background-position: 100% 65%;
    background-repeat: no-repeat;
    background-size: auto 45%;
}

    #MenuUL a:hover {
        /* All anchor tags within the nav object - Hover */
    }

/* ####################################
   LEVEL 2+ - List Layout
   ################################## */

#MenuUL li ul {
    /* Second level lists (all sub lists within list items) */
    position: absolute; /* DON'T CHANGE - Places second level lists in the right spot. */
    left: -10000em; /* DON'T CHANGE - Drop-down hover trick - Hide the menu off the screen. */
    margin: 0 0 0 -20px; /* DON'T CHANGE - Removes margin around the ul for neat layout. */
    padding: 0; /* DON'T CHANGE - Removes padding within the ul for neat layout. */
    list-style: none; /* DON'T CHANGE - Removes bullet points from list items. */
    min-width: 200px;
    background: #181818;
    font-size: 85.7%;
    font-weight: normal;
    border-bottom: 0;
}

#MenuUL li:hover ul, #MenuUL li li:hover ul, #MenuUL li.sfhover ul, #MenuUL li li.sfhover ul {
    /* Second level lists (all sub lists within list items) - Hover over the containing li */
    left: auto; /* DON'T CHANGE - Drop-down hover trick - Re-align the menu on the screen on rollover. */
}

#MenuUL li ul li {
    /* Second level list items */
    float: none; /* DON'T CHANGE - Makes second level list items vertical. */
    width: auto;
    padding-right: 0;
    white-space: nowrap;
    border-bottom: #23201f 2px solid;
}

    #MenuUL li ul li:hover, #MenuUL li ul li.sfhover {
        /* Second level list items - Hover */
        background: #2e2b2a;
    }

/* ####################################
   LEVEL 2+ - Anchors (Links)
   ################################## */

#MenuUL li ul li a {
    /* Second level list items - Anchor tags */
    margin: 0;
    padding: 10px 36px 10px 20px;
    background-position: 95% 55%;
    background-size: auto 30%;
}

    #MenuUL li ul li a:hover {
        /* Second level list items - Anchor tags - Hover */
    }

/* ####################################
   Custom Stuff / Hard Coded Elements
   ################################## */

#ExtranetPage {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
    text-align: center;
}

    #ExtranetPageInner {
        clear: both;
        width: 81.16%;
        margin: 0 auto;
        text-align: left;
    }

/* ############################################################################
   ## 
   ##  LAYOUT FOR DIFFERENT SCREENS
   ##  Check the following URL for a good device size reference:
   ##  https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices
   ##
   ######################################################################### */

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

    #ExtranetPageInner {
		width: calc(100% - 60px);
    }

}