/* Saint Louis County Website styles */
/*  REFERENCE:

	FONT NAMES:
		body: 'Roboto'
		headers: 'PT Sans', 'Nunito'

	COLORS:
		body text: #333333
		turquoise: #264e5f
		dark turquoise: #153947
		dark grey: #282828
		lt tan: #fafae0
		med tan: #d6d1a3
*/
/******************************/
/* general elements           */
/******************************/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
}

body
{
    font-family: 'Roboto', 'Arial', 'Helvetica', sans-serif;
    font-size: 12pt;
    font-size: 1.0vw;
    color: #333333;
    margin: 0;
    position: relative;
}

h2
{
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 1.75em;
    margin: 0;
    color: #949494;
    text-transform: uppercase;
}

h3
{
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 1.25em;
    margin: 0;
    color: #949494;
}

h4
{
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: 0;
    color: #949494;
}

p
{
    margin-top: 1em;
}

/******************************/
/* default links              */
/******************************/

a, a:visited, a:active, a:focus
{
    /*color: #264e5f;*/
    color: #333333;
	text-decoration:underline;

}

    a:hover
    {
        /*color: #333333;*/
        color: #264e5f;
        transition: color .5s;
        -moz-transition: color .5s;
        -o-transition: color .5s;
        -webkit-transition: color .5s;
    }

    /*-------------------------------------*/
/* lIST STYLES */
/*-------------------------------------*/
ul, ol {
    margin-bottom: 18px;
    margin-left: 18px;
    padding-left: 18px;
}

ul {
    list-style: square;
}

ol {
    list-style: decimal;
}

    /* Nested Styles */
    ul ul, ul ol,
    ol ol, ol ul {
        margin-left: 18px;
        margin-bottom: 0;
    }

    ul ul {
        list-style: circle;
    }

    ol ol {
        list-style: lower-alpha;
    }

li p {
    line-height: 18px;
}

/******************************/
/* margins of content column  */
/******************************/
.contentmargin
{
    padding-left: 10%;
    padding-right: 10%;
}

.innermargin
{
    padding-left: 10% !important;
    padding-right: 10% !important;
}

/******************************/
/* primary page divisions     */
/******************************/

#pagesurround
{
    width: 100%;
    margin: 0;
    padding: 0;
}

#topbar
{
    background-color: #d6d1a3;
}

#pagecontent
{
    background-color: #FFFFFF;
}

#contentbgleft
{
    background-image: url(../img/headertrees_left.png);
    background-position: top left;
    background-repeat: no-repeat;
}

#contentbgright
{
    background-image: url(../img/headertrees_right.png);
    background-position: top right;
    background-repeat: no-repeat;
    min-height: 700px;
}

#header
{
    position: relative;
}

#footer
{
    clear: both;
}
/* 12272017 DP min-height was 120  */
#footertop
{
    background-color: #f1f1d2;
    min-height: 60px;
}

#footerinfo
{
    background-color: #fafae0;
    color: #264e5f;
    font-weight: bold;
}

.footerinfopad
{
    padding: 20px 20px 40px 0;
}

#footerinfo a
{
    color: #264e5f;
    text-decoration: underline;
}

#footerinfo a.phonelink
{
    font-size: 1.25em;
}

#footerinfo ul
{
    list-style-type: none;
    margin: 1em 0 0 0;
    padding: 0;
}

    #footerinfo ul li a
    {
        color: #264e5f;
        text-decoration: underline;
        font-size: 1em;
    }

#footerinfo h2
{
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 2em;
    margin: 0;
    color: #949494;
    text-transform: uppercase;
    text-decoration: none;
}

#footerinfo h2 a
{
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 1em;
    margin: 0;
    color: #949494;
    text-transform: uppercase;
    text-decoration: none;
    padding-right: 40px;
    background-image: url('../img/roundarrowbutton_grey_right.png');
    background-position: center right;
    background-repeat: no-repeat;
}

#footerinfoleft
{
    float: left;
    width: 30%;
}

#footerinfocenter
{
    float: left;
    width: 40%;
}

#footerinforight
{
    float: left;
    width: 30%;
}

#footerbottom
{
    background-color: #264e5f;
    padding-top: 20px;
    padding-bottom: 40px;
    color: #ffffff;
}

#footerlogo
{
    float: left;
    width: 33%;
}

    #footerlogo img
    {
        width: 100%;
        height: auto;
    }

#footerbottomright
{
    margin-left: 40%;
    text-align: right;
}

#footersocial
{
    text-align: right;
}

    #footersocial ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        #footersocial ul li
        {
            display: inline-block;
            padding-left: 10px;
        }

            #footersocial ul li a
            {
                display: block;
                width: 35px;
                height: 35px;
                line-height: 35px;
                background-color: #ffffff;
                border: 1px solid #ffffff;
                border-radius: 5px;
                color: #264e5f;
                text-align: center;
            }

                #footersocial ul li a:hover
                {
                    color: #ffffff;
                    background-color: #264e5f;
                    transition: background,color .5s;
                    -moz-transition: background,color .5s;
                    -o-transition: background,color .5s;
                    -webkit-transition: background,color .5s;
                }

#footercopyright
{
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 0.75em;
    padding-top: 10px;
}

#DNNUserBar
{
    padding-top: 10px;
}

    #DNNUserBar a
    {
        font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
        color: #ffffff;
        font-size: 1em;
        padding: 0 10px;
        text-decoration: none;
        text-transform: uppercase;
        border-right: 1px solid #ffffff;
    }

        #DNNUserBar a:hover
        {
            color: #f1f1d2;
        }

        #DNNUserBar a:last-child
        {
            border-right: none;
        }

/******************************/
/* nav menus                  */
/******************************/

#topbar ul
{
    list-style: none;
    margin: 0;
    padding: 0 40px;
    text-align: right;
}

    #topbar ul li
    {
        display: inline-block;
    }

        #topbar ul li a
        {
            color: #264e5f;
            font-size: 1em;
            line-height: 3em;
            padding: 0 10px;
            text-decoration: none;
            text-transform: uppercase;
            border-left: 1px solid #264e5f;
        }

        #topbar ul li:first-child a
        {
            border-left: none;
        }

        #topbar ul li:last-child a
        {
            padding-right: 0;
        }

        #topbar ul li a:hover
        {
            color: #153947;
            transition: color .5s;
            -moz-transition: color .5s;
            -o-transition: color .5s;
            -webkit-transition: color .5s;
        }

#mainnav
{
    margin-left: 21%;
    padding-top: 40px;
}

    #mainnav ul
    {
        list-style: none;
        margin: 0;
        padding: 0 20px 0 0;
        text-align: right;
    }

        #mainnav ul li
        {
            display: inline-block;
        }

 /*  DP changed  padding: 8px 16px 48px 16px; and margin bot  */
            #mainnav ul li a
            {
                display: block;
                color: #153947;
                font-size: 1.25em;
                font-weight: bold;
                padding: 8px 16px 26px 16px;
                text-decoration: none;
                text-transform: uppercase;
                border-top: 10px solid #ffffff;
                border-top: 10px solid rgba(255, 255, 255, 0);
                transform: perspective(1px) translateZ(0);
                box-shadow: 0 0 1px transparent;
				        margin-bottom: 2px;
            }

                #mainnav ul li.active a
                {
                    color: #ffffff;
                    transition: color .5s;
                    -moz-transition: color .5s;
                    -o-transition: color .5s;
                    -webkit-transition: color .5s;
                    border-top: 10px solid #d2cd8f;
                }

                #mainnav ul li a:hover
                {
                    color: #ffffff;
                    transition: color .5s;
                    -moz-transition: color .5s;
                    -o-transition: color .5s;
                    -webkit-transition: color .5s;
                    border-top: 10px solid #d2cd8f;
                }

                #mainnav ul li a:before
                {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: #264e5f;
                    -moz-transform: scaleY(0);
                    -ms-transform: scaleY(0);
                    -o-transform: scaleY(0);
                    -webkit-transform: scaleY(0);
                    transform: scaleY(0);
                    -moz-transform-origin: 50% 0;
                    -ms-transform-origin: 50% 0;
                    -o-transform-origin: 50% 0;
                    -webkit-transform-origin: 50% 0;
                    transform-origin: 50% 0;
                    -moz-transition-property: transform;
                    -o-transition-property: transform;
                    -webkit-transition-property: transform;
                    transition-property: transform;
                    -moz-transition-duration: 0.3s;
                    -o-transition-duration: 0.3s;
                    -webkit-transition-duration: 0.3s;
                    transition-duration: 0.3s;
                    -moz-transition-timing-function: ease-out;
                    -o-transition-timing-function: ease-out;
                    -webkit-transition-timing-function: ease-out;
                    transition-timing-function: ease-out;
                }

                #mainnav ul li a:hover:before
                {
                    -moz-transform: scaleY(1);
                    -ms-transform: scaleY(1);
                    -o-transform: scaleY(1);
                    -webkit-transform: scaleY(1);
                    transform: scaleY(1);
                }

            #mainnav ul li ul
            {
                display: none;
            }

/*  12272017 DP remove  min-height: 200px; and added padding top, changed padding bot from 20px  */
#megamenucontainer
{
    background-color: #264e5f;

    display: none;
    border: 1px solid #264e5f;
    padding-bottom: 10px;
    padding-top: 10px;
}

#megamenudivider1, #megamenudivider2, #megamenudivider3
{
    width: 100%;
    height: 100%;
    position: relative;
}

    #megamenudivider1:before, #megamenudivider2:before, #megamenudivider3:before
    {
        content: '';
        position: absolute;
        border-left: 2px solid #68838f;
        height: 100%;
    }

    #megamenudivider1:before
    {
        left: 25%;
    }

    #megamenudivider2:before
    {
        left: 50%;
    }

    #megamenudivider3:before
    {
        left: 75%;
    }

#megamenucontainer div
{
    /*display: none;*/
}

    #megamenucontainer ul, #megamenucontainer ul li
    {
        list-style-type: none;
    }

/*   12272017 DP removed  padding: 1em 0;  */

    #megamenucontainer ul
    {
        list-style: none;
        margin: 0;

    }

        #megamenucontainer ul li
        {
            float: left;
            width: 25%;
            /*border-left: 2px solid #68838f;*/
        }

            #megamenucontainer ul li:nth-child(4n+1)
            {
                border-left: none;
            }

            #megamenucontainer ul li a
            {
                display: block;
                padding: 5px 20px;
                font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
                color: #ffffff;
                font-size: 1.5em;
                font-weight: bold;
                text-decoration: none;
                position: relative;
            }

                #megamenucontainer ul li a .arrow
                {
                    display: none;
                }

                #megamenucontainer ul li a:hover
                {
                    color: #ffffcc;
                }

                    #megamenucontainer ul li a:hover .arrow
                    {
                        width: 0;
                        height: 0;
                        border-top: 5px solid transparent;
                        border-bottom: 5px solid transparent;
                        border-left: 5px solid #ffffcc;
                        display: block;
                        position: absolute;
                        top: 0.8em;
                        left: 0;
                    }
/*JC added styles to clean menu up 2018/05/09 */
#megamenucontainer ul {
  float: left;
  width: 25%;
}
        #megamenucontainer ul li
        {
            float: none;
            width: auto;
            /*border-left: 2px solid #68838f;*/
        }
        /* end styles added 2018/05/09 */
#mobilemenutoggle
{
    display: none;
}

#mobilemenu
{
    display: none;
}

#breadcrumb
{
    padding-bottom: 1em;
}

    #breadcrumb ul
    {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

        #breadcrumb ul li
        {
            padding: 0;
            display: inline;
        }

            #breadcrumb ul li:after
            {
                content: ' /';
            }

            #breadcrumb ul li:last-child:after
            {
                content: '';
            }

            #breadcrumb ul li a
            {
                font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
                color: #264e5f;
                text-decoration: underline;
                font-size: 1em;
                font-weight: normal;
            }

                #breadcrumb ul li a:hover
                {
                    text-decoration: none;
                }

            #breadcrumb ul li:last-child a
            {
                text-decoration: none;
                font-weight: bold;
            }

    #breadcrumb a
    {
        font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
        color: #264e5f;
        text-decoration: underline;
        font-size: 1em;
        font-weight: normal;
    }

        #breadcrumb a:hover
        {
            text-decoration: none;
        }

/******************************/
/* main header content        */
/******************************/
#headertools
{
    padding-top: 25px;
    text-align: right;
    vertical-align: top;
}

#headersearch
{
    display: block;
    float: right;
    text-align: left;
}

.searchInputContainer
{
    width: 85%;
    margin: 0 !important;
    height: 2em;
}

#howcanwehelp input, #headersearch input
{
    width: 100%;
    border: 1px solid #949494;
    color: #949494;
    background-color: #ffffff;
    line-height: 2em;
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 1.25em;
    text-transform: uppercase;
    padding: 0 20px;
    float: left;
    height: 2.1em;
}

#howcanwehelp .stlcsearch, #headersearch .stlcsearch
{
    display: block;
    float: left;
    line-height: 2em;
    font-size: 1.25em;
    color: #ffffff;
    width: 2em;
    border: 1px solid #949494;
    background-color: #949494;
    border-radius: 10px 0 0 10px;
    text-align: center;

}

    #howcanwehelp .stlcsearch:hover, #headersearch .stlcsearch:hover
    {
        background-color: #333333;
        -moz-transition: background 0.5s;
        -o-transition: background 0.5s;
        -webkit-transition: background 0.5s;
        transition: background 0.5s;
    }

.dnnSearchBoxClearText
{
    display: block;
    float: left;
    line-height: 2em;
    font-size: 1.25em;
}

#headertranslate
{
    display: block;
    float: right;
}

    #headertranslate a
    {
        background-color: #949494;
        border: 2px solid #ffffff;
        border-radius: 8px;
        color: #ffffff;
        display: block;
        font-size: 1em;
        padding: 5px 15px;
        text-decoration: none;
        text-transform: uppercase;
        line-height: 2em;
    }

        #headertranslate a:hover
        {
            background-color: #264e5f;
            -moz-transition: background .5s;
            -o-transition: background .5s;
            -webkit-transition: background .5s;
            transition: background .5s;
        }

.goog-te-gadget-icon
{
    display: none;
}

.goog-te-gadget-simple
{
    border: none !important;
    padding: 0 !important;
}

#headerfontsize
{
    display: block;
    float: right;
    color: #949494;
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-size: 1em;
    font-weight: bold;
    padding: 0.5em 40px 0 20px;
}

    #headerfontsize a
    {
        color: #949494;
        text-decoration: none;
    }

        #headerfontsize a:hover
        {
            color: #153947;
            -moz-transition: color .5s;
            -o-transition: color .5s;
            -webkit-transition: color .5s;
            transition: color .5s;
        }

    #headerfontsize #fontsizesmall
    {
        font-size: 0.75em;
    }

    #headerfontsize #fontsizelarge
    {
        font-size: 1.25em;
    }

#headerlogonav
{
    clear: right;
}

#headerlogo
{
    float: left;
    height: auto;
    width: 20%;
}

    #headerlogo img
    {
        height: auto;
        width: 100%;
    }

/******************************/
/* county highlight box       */
/******************************/

#countyhighlight
{
    width: 100%;
    height: auto;
    background-position: top left;
    background-size: cover;
    position: relative;
    margin: 0;
    padding: 0;
}

#countyhighlighttexture
{
    width: auto;
    height: auto;
    background-image: url(../img/bg_topinfolines.png);
    background-position: top left;
    background-size: cover;
    padding: 0 25% 80px 25%;
}

#countyhighlightbox
{
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    background-color: rgba(255,255,255,0.83);
    border-radius: 0 0 25px 25px;
}

#countyhighlightlogo
{
    padding: 60px 20% 0 40px;
}

    #countyhighlightlogo img
    {
        width: 100%;
        height: auto;
    }

#countyhighlighttext
{
    float: left;
    width: 50%;
    padding: 0 20px 0 40px;
}

    #countyhighlighttext p
    {
        color: #333333;
    }

    #countyhighlighttext strong
    {
        color: #264e5f;
    }

#countyhighlightmap
{
    float: left;
    width: 30%;
    color: #264e5f;
    padding: 0 40px 0 0;
}

    #countyhighlightmap img
    {
        width: 100%;
        height: auto;
    }

#countyhighlightclose
{
    padding: 40px;
    text-align: center;
}

    #countyhighlightclose a
    {
        transform: none;
    }

        #countyhighlightclose a:hover img
        {
            transform: scale(1.1);
            -webkit-transition: all 0.5s ease;
            -moz-transition: all 0.5s ease;
            -o-transition: all 0.5s ease;
            transition: all 0.5s ease;
        }

/******************************/
/* home page content          */
/******************************/

#homecontent
{
    clear: both;
}

#innercontent
{
    clear: both;
    background-color: #FFFFFF;
    min-height: 500px;
}

.newsbar
{
    background-color: #c6a153; /* standard color: #c6a153, important color: #ff0000 */
    padding: 20px 40px;
    color: #ffffff;
}

.newsbartext
{
    float: left;
    width: auto; /* original value = width:80%; */	
	visibility: inherit; /* show text value: inherit, hide link value: hidden */
}

	/* add a space after the newsbartext when trying to show the newsbartext and newsbarlink content in one line, comment out when not using */
/* 	.newsbartext:after
	{
		content:'\00a0';
	} */

.newsbarlink
{
    margin-left: 0; /* original value = margin-left:83%; */
    text-align: right; /* original value = text-align: right; */
	visibility: inherit; /* show link value: inherit, hide link value: hidden */
}

    .newsbarlink a
    {
        color: #ffffff;
        text-decoration: underline;
		font-size:0;
    }
	
	/*  change the LINK tag text to whatever is needed, this was defaulting to Click Here rather than what the LINK tag specified, comment out when not using */
/* 	.newsbarlink a:after
	{
		content:'MN Secretary of State\0027s Website';
		font-size: 16px; 
	}

        .newsbarlink a:visited
        {
            color: #ffffff;
        }

        .newsbarlink a:hover
        {
            color: #ffffff;
            text-decoration: none;
        } */

.emergency
{
    background-color: #b8153a;
}

.warning
{
    background-color: #c0a361;
}

#homeinfo
{
    padding: 40px;
    background-color: #fafae0;
}

#homeinforight
{
    float: right;
    width: 33%;
    height: 100%;
    background-color: #ffffff;
    padding: 20px;
}

    #homeinforight h2
    {
        color: #949494;
        font-size: 1.5em;
    }

#seeallpopular
{
    text-align: right;
    margin-top: 10px;
}

    #seeallpopular a
    {
        color: #949494;
        text-decoration: underline;
    }

        #seeallpopular a:hover
        {
            text-decoration: none;
        }

#popularbuttons
{
    padding-top: 10px;
}

.popularbuttonlink
{
    /*display: inline-block;
    width: 48%;
    margin: 0 1% 1% 0;
    padding: 0;*/
    display: block;
    width: auto;
    margin: 0 0 1% 0;
    padding: 0;
}

#popularbuttons a
{
    display: block;
    background-color: #cccccc;
    padding: 3% 15% 3% 3%;
    color: #3c6c6c;
    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    font-weight: bold;
    font-size: 1em;
    text-decoration: none;
    /*line-height: 1.25em;*/
    line-height: normal;
    /*height: 72px;*/
    height: auto;
    overflow: hidden;
    background-image: url(../img/roundarrowbutton_blue_right.png);
    background-position: 95% 50%;
    background-repeat: no-repeat;
    background-size: 20px;
}

    #popularbuttons a:hover
    {
        background-color: #85b4cc;
        color: #ffffff;
        background-image: url(../img/roundarrowbutton_white_right.png);
        background-position: 95% 50%;
        background-repeat: no-repeat;
        background-size: 20px;
        -moz-transition: none;
        -o-transition: none;
        -webkit-transition: none;
        transition: none;
    }

/*#popularbuttons .popularbuttonlink:nth-child(odd) a
{
    border-radius: 0 18px 18px 0;
    text-align: left;
}

#popularbuttons .popularbuttonlink:nth-child(even) a
{
    padding: 4% 4% 4% 25%;
    border-radius: 18px 0 0 18px;
    text-align: right;
    background-position: 5% 50%;
}*/
#popularbuttons .popularbuttonlink a
{
    border-radius: 0 18px 18px 0;
    text-align: left;
}

#homeinfoleft
{
    float: left;
    width: 60%;
}

#howcanwehelp
{
    /*padding-top: 55px;*/
    padding-top: 0px;
    padding-bottom: 20px;
}

/*
  fix for extra padding being inserted by EasyDNNNews module on home page
  (the module is adding an empty div with top padding of 20px, this will remove that padding)
  added by Jan, 5/29/2018
 */
#dnn_ctr441_View_ctr448_ContentPane div:first-child {
  padding-top: 0px !important;
}

/*#howcanwehelp input {
        width: 85%;
        border: 1px solid #949494;
        color: #949494;
        background-color: #ffffff;
        line-height: 2em;
        font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
        font-size: 1.25em;
        text-transform: uppercase;
        padding: 0 20px;
        float: left;
    }

    #howcanwehelp a {
        display: block;
        float: left;
        line-height: 2em;
        font-size: 1.25em;
        color: #ffffff;
        width: 2em;
        border: 1px solid #949494;
        background-color: #949494;
        border-radius: 0 10px 10px 0;
        text-align: center;
    }

        #howcanwehelp a:hover {
            background-color: #333333;
            -webkit-transition: background 0.5s;
            transition: background 0.5s;
        }*/

#featuredtext
{
    clear: left;
    padding: 20px;
    color: #949494;
}

#homemaincontent
{
    padding: 40px;
    background-color: #ffffff;
}

.homemaincolumn
{
    float: left;
    width: 50%;
}

.homemaincolumnpad
{
    padding: 0 20px 0 0;
}

.homeheadline
{
    padding: 20px 0 0 0;
    clear: left;
}

.homeheadlineimage
{
    float: left;
    width: 33%;
}

    .homeheadlineimage img
    {
        width: 100%;
        height: auto;
    }

.homeheadlinetext
{
    margin-left: 35%;
    padding: 20px 40px 0 20px;
}

    .homeheadlinetext a
    {
        color: #336666;
        font-weight: bold;
        font-size: 1.25em;
        text-decoration: none;
    }

        .homeheadlinetext a:hover
        {
            color: #666666;
            -moz-transition: color .5s;
            -o-transition: color .5s;
            -webkit-transition: color .5s;
            transition: color .5s;
        }

#homeeventsmonth
{
    float: right;
    width: 50%;
    text-align: right;
    color: #336666;
    font-weight: bold;
    font-size: 1.5em;
}

#homeeventlist
{
    padding-top: 40px;
}

.homeevent
{
    width: 50%;
    float: left;
    padding-bottom: 40px;
}

    .homeevent:nth-child(odd)
    {
        clear: left;
    }

.homeeventday
{
    float: left;
    width: 70px;
    height: 70px;
    border: 1px solid #336666;
    border-radius: 15px;
    background-color: #336666;
    color: #ffffff;
    font-size: 2em;
    line-height: 70px;
    text-align: center;
}

.homeeventtext
{
    color: #336666;
    margin-left: 90px;
    padding-right: 20px;
}

    .homeeventtext a
    {
        display: block;
        color: #336666;
        font-size: 1.25em;
        font-weight: bold;
        text-decoration: none;
    }

        .homeeventtext a:hover
        {
            color: #666666;
            -moz-transition: color .5s;
            -o-transition: color .5s;
            -webkit-transition: color .5s;
            transition: color .5s;
        }

/* 3 boxes on home page (Leadership/Transparency/Spotlight) */
.HomePageBoxes {
	border: none;
	border-radius: 0 0 20px 0;
	padding: 2% 0 4% 0;
	height:330px !important;
	overflow:hidden;
	margin-top:20px;
	width:90%;
}

.HomePageBoxes.HomePageBox-Left {
    background-color: #85b4cc;
	display:inline-block;
}

.HomePageBoxes.HomePageBox-Middle {
    background-color: #9ecc8c;
	display:inline-block;
}

.HomePageBoxes.HomePageBox-Right {
    background-color: #f3ce83;
	display:inline-block;
	padding-bottom:0px;
}

.HomePageBoxes h2 {
	text-align:left;
}

.HomePageBoxes h2 span {
	text-transform:uppercase;
/*	color:#fff; */
	text-indent:20px;
}

.HomePageBoxes .HomePageBoxContent {
	overflow:hidden;
	height:175px;
}

.HomePageBoxes.HomePageBox-Right .HomePageBoxContent {
	 height:330px !important; 
}

.HomePageBoxes.HomePageBox-Left .HomePageBoxContent img {
	width:100%;
	height:100%;
}

.HomePageBox-Right img {
	overflow-y:hidden;
}


/* .HomePageBoxes.HomePageBox-Right .HomePageBoxContent img {
	width:100%;
	height:100%;
	color: #ffffff;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
} */

/* .HomePageBoxes.HomePageBox-Right .HomePageBoxContent img:hover {
	color: #ffffff;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
} */

/* .HomePageBoxes.HomePageBox-Right .HomePageBoxContent .DNNModuleContent {
	height:100%;
}
 */
.HomePageBox-Middle .HomePageBoxContent h3 {
	padding: 0 10px 0 60px;
	margin: 0;
	color:#fff;
	text-align:left;
}

/******************************/
/* Inner Page Content         */
/******************************/
#innerheader
{
    background-color: #f1f1d2;
    margin: 0;
    padding: 0;
}

#innerheaderimage
{
    float: right;
    width: 25%;
    text-align: right;
    position: relative;
}

    #innerheaderimage img
    {
        width: 100%;
        height: auto;
        z-index: 50;
        max-width: 429px;
    }

    #innerheaderimage p
    {
        margin: 0;
        padding: 0;
    }

#InnerHeaderImageCover
{
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 50%;
    background-image: url(../img/subheadermask.png);
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 100;
}

#innerheadertext
{
    margin-right: 30%;

}

    #innerheadertext h1
    {
        font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
        font-size: 2em;
        color: #264e5f;
        font-weight: bold;
        text-transform: uppercase;
        padding-top: 0.5em;
        margin: 0;
    }

    #innerheadertext p
    {
        font-family: "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
        color: #666666;
    }

/******************************/
/* subpage sidebar menu       */
/******************************/
.sidebarmenu
{
    width: 100%;
}

#sidebarmenusmall
{
    display: none;
    text-align: left;
}

/* -------------------- Select Box Styles: stackoverflow.com Method */
/* -------------------- Source: http://stackoverflow.com/a/5809186 */
#sidebarmenusmall select::-ms-expand {
    display: none; /* hide the default down arrow in IE */
}

#sidebarmenusmall select {
   -webkit-appearance: none; /* hide default down arrow in browsers besides IE */
   -webkit-border-radius: 2px;
   -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
   -webkit-padding-end: 20px;
   -webkit-padding-start: 2px;
   -webkit-user-select: none;
   background-image: url('../img/dropdown-arrow-wht-trans.png');
   background-position: 97% center;
   background-repeat: no-repeat;
   border: 1px solid #AAA;
   color: #555;
   font-size: inherit;
   margin: 20px;
   overflow: hidden;
   padding: 5px 10px;
   text-overflow: ellipsis;
   white-space: nowrap;
   width: 300px;
}

#sidebarmenusmall select {
   color: #fff;
   background-image: url('../img/dropdown-arrow-wht-trans.png');
   background-color: #264e5f;
   -webkit-border-radius: 20px;
   -moz-border-radius: 20px;
   border-radius: 20px;
   padding-left: 15px;
}

    .sidebarmenu ul
    {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .sidebarmenu ul li
        {
            list-style: none;
            margin: 0;
            padding: 0;
            padding-right: 42px;
            position: relative;
            border-bottom: 2px solid #CCCCCC;
        }

            .sidebarmenu ul li.current
            {
                border-bottom: none;
            }

            .sidebarmenu ul li.last
            {
                border-bottom: none;
            }

            .sidebarmenu ul li.current
            {
                border-top: 7px solid #CCCCCC;
                border-right: 7px solid #CCCCCC;
                border-bottom: 7px solid #CCCCCC;
                border-radius: 0 0 20px 0;
            }

                .sidebarmenu ul li.current:after
                {
                    background-image: url(../img/sidemenuarrow.gif);
                    background-position: top left;
                    background-repeat: no-repeat;
                    width: 28px;
                    height: 42px;
                    position: absolute;
                    top: 10px;
                    right: -28px;
                    content: '';
                }

                    .sidebarmenu ul li.current.nochildren:after
                    {
                        background-image: none;
                    }

            .sidebarmenu ul li a
            {
                display: block;
                width: 100%;
                /*padding: 20px 0px 20px 0px;*/
                padding: 10px 0px 10px 0px;
                font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
                font-weight: bold;
                font-size: 1.5em;
                margin: 0;
                color: #264e5f;
                text-transform: uppercase;
                text-decoration: none;
            }

            .sidebarmenu ul li.current a
            {
                /*padding: 20px 0px 8px 0px;*/
                padding: 10px 0px 8px 0px;
            }

            .sidebarmenu ul li ul
            {
                display: none;
            }

            .sidebarmenu ul li.current ul
            {
                display: block;
            }

            .sidebarmenu ul li ul li
            {
                border-bottom: none;
                padding-left: 20px;
            }

            .sidebarmenu ul li ul li.selected
            {
                background-color: #CCCCCC;
            }

                .sidebarmenu ul li ul li a
                {
                    display: block;
                    width: 100%;
                    padding: 10px 0px 10px 0px;
                    font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
                    font-weight: normal;
                    font-size: 1em;
                    margin: 0;
                    color: #264e5f;
                    text-transform: none;

                }

            .sidebarmenu ul li.current ul li a
            {
                /*padding: 8px 0px 8px 0px;*/
                padding: 5px 0px 5px 0px;
            }

            .sidebarmenu ul li.current ul li.last a
            {
                padding-bottom: 20px;
            }

/******************************/
/* miscellaneous              */
/******************************/
.clearfloat
{
    clear: both;
    height: 0;
    overflow: hidden;
}

.spacerrow
{
    height: 32px;
}

a.calloutBlue, a.calloutBlue:visited, a.calloutBlue:active, a.calloutBlue:focus
{
    display: inline-block;
    background-color: #264e5f;
    color: #FFFFFF;
    padding: 0.5em 1em 0.5em 1em;
    line-height: normal;
    border-radius: 1.25em;
    font-weight: bold;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    text-decoration: none;
}

a.calloutGrey, a.calloutGrey:visited, a.calloutGrey:active, a.calloutGrey:focus
{
    display: inline-block;
    background-color: #333333;
    color: #FFFFFF;
    padding: 0.5em 1em 0.5em 1em;
    line-height: normal;
    border-radius: 1.25em;
    font-weight: bold;
    text-align: center;
    width: 80%;
    margin: 0 auto;
    text-decoration: none;
}

    a.calloutBlue:hover, a.calloutGrey:hover
    {
        text-decoration: none;
        color: #CCCCCC;
        -moz-transition: all 0.5s;
        -o-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        transition: all 0.5s;
    }

    a.calloutBlueSmall, a.calloutBlueSmall:visited, a.calloutBlueSmall:active, a.calloutBlueSmall:focus
    {
        display: inline-block;
        background-color: #264e5f;
        color: #FFFFFF;
        padding: 0.5em 1em 0.5em 1em;
        line-height: normal;
        border-radius: 1.25em;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

    a.calloutGreySmall, a.calloutGreySmall:visited, a.calloutGreySmall:active, a.calloutGreySmall:focus
    {
        display: inline-block;
        background-color: #333333;
        color: #FFFFFF;
        padding: 0.5em 1em 0.5em 1em;
        line-height: normal;
        border-radius: 1.25em;
        font-weight: bold;
        text-align: center;
        text-decoration: none;
    }

        a.calloutBlueSmall:hover, a.calloutGreySmall:hover
        {
            text-decoration: none;
            color: #CCCCCC;
            -moz-transition: all 0.5s;
            -o-transition: all 0.5s;
            -webkit-transition: all 0.5s;
            transition: all 0.5s;
        }



  .bootstrap-tagsinput .tag {
    line-height: 30px;
    }

.twitter-typeahead .tt-query,
.twitter-typeahead .tt-hint
{
    margin-bottom: 0;
}

.twitter-typeahead .tt-hint
{
    display: none;
}

.tt-menu
{
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #cccccc;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    background-clip: padding-box;
    cursor: pointer;
}

.tt-suggestion
{
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    line-height: 1.428571429;
    color: #333333;
    white-space: nowrap;
}

    .tt-suggestion:hover,
    .tt-suggestion:focus
    {
        color: #ffffff;
        text-decoration: none;
        outline: 0;
        background-color: #428bca;
    }

input.tt-input
{
    width: 100% !important;
}

.youTubeVideoSurround {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  padding-top: 25px;
}

    .youTubeVideoSurround iframe {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0px;
      left: 0px;
    }

/******************************/
/* skin container styles          */
/******************************/
.ContainerWrapper
{
    height: auto;
}

.ContainerGreyBorder
{
    border: 6px solid #CCCCCC;
    border-radius: 0px 0px 19px 19px;
    padding: 20px;
    margin-bottom: 20px;
}

.ContainerGreyBorder h2
{
  font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
    color: #949494;
    font-size: 2em;
    position: relative;
    z-index: 1;
}

.ContainerTitleLine h2
{
    color: #949494;
    font-size: 2em;
    position: relative;
    z-index: 1;
}

    .ContainerTitleLine h2:before
    {
        border-top: 1px solid #999999;
        content: "";
        margin: 0 auto; /* this centers the line to the full width specified */
        position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */
        top: 50%;
        left: 0;
        right: 0;
        bottom: 0;
        width: 95%;
        z-index: -1;
    }

    .ContainerTitleLine h2 span
    {
        /* to hide the lines from behind the text, you have to set the background color the same as the container */
       /*  background: #fff; */
        padding: 0 15px 0 0;
    }

    #windowClose {
      display: none;
    }

/******************************/
/* jQuery UI datepicker       */
/******************************/

    /* DatePicker Container */
.ui-datepicker {
	width: 216px;
	height: auto;
	margin: 5px auto 0;
	font: 9pt Arial, sans-serif;
	-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
	-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .5);
}
.ui-datepicker a {
	text-decoration: none;
}
/* DatePicker Table */
.ui-datepicker table {
	width: 100%;
}
.ui-datepicker-header {
	background: #000;
	color: #e0e0e0;
	font-weight: bold;
	-webkit-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, 2);
	-moz-box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
	box-shadow: inset 0px 1px 1px 0px rgba(250, 250, 250, .2);
	text-shadow: 1px -1px 0px #000;
	filter: dropshadow(color=#000, offx=1, offy=-1);
	line-height: 30px;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: #111;
}
.ui-datepicker-title {
	text-align: center;
}
.ui-datepicker-prev, .ui-datepicker-next {
	display: inline-block;
	width: 30px;
	height: 30px;
	text-align: center;
	cursor: pointer;
	background-image: url('../img/arrow.png');
	background-repeat: no-repeat;
	line-height: 600%;
	overflow: hidden;
}
.ui-datepicker-prev {
	float: left;
	background-position: center -30px;
}
.ui-datepicker-next {
	float: right;
	background-position: center 0px;
}
.ui-datepicker thead {
	background-color: #f7f7f7;
	background-image: -moz-linear-gradient(top,  #f7f7f7 0%, #f1f1f1 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#f1f1f1));
	background-image: -webkit-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	background-image: -o-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	background-image: -ms-linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	background-image: linear-gradient(top,  #f7f7f7 0%,#f1f1f1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#f1f1f1',GradientType=0 );
	border-bottom: 1px solid #bbb;
}
.ui-datepicker th {
	text-transform: uppercase;
	font-size: 6pt;
	padding: 5px 0;
	color: #666666;
	text-shadow: 1px 0px 0px #fff;
	filter: dropshadow(color=#fff, offx=1, offy=0);
}
.ui-datepicker tbody td {
	padding: 0;
	border-right: 1px solid #bbb;
}
.ui-datepicker tbody td:last-child {
	border-right: 0px;
}
.ui-datepicker tbody tr {
	border-bottom: 1px solid #bbb;
}
.ui-datepicker tbody tr:last-child {
	border-bottom: 0px;
}

.ui-datepicker td.ui-datepicker-unselectable {
  background-color: #FFF;
}
.ui-datepicker td span, .ui-datepicker td a {
	display: inline-block;
	font-weight: bold;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
	color: #666666;
	text-shadow: 1px 1px 0px #fff;
	filter: dropshadow(color=#fff, offx=1, offy=1);
}
.ui-datepicker-calendar .ui-state-default {
	background: #ededed;
	background: -moz-linear-gradient(top,  #ededed 0%, #dedede 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ededed), color-stop(100%,#dedede));
	background: -webkit-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background: -o-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background: -ms-linear-gradient(top,  #ededed 0%,#dedede 100%);
	background: linear-gradient(top,  #ededed 0%,#dedede 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ededed', endColorstr='#dedede',GradientType=0 );
	-webkit-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
	-moz-box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
	box-shadow: inset 1px 1px 0px 0px rgba(250, 250, 250, .5);
}
.ui-datepicker-calendar .ui-state-hover {
	background: #f7f7f7;
}
.ui-datepicker-calendar .ui-state-active {
	background: #6eafbf;
	-webkit-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	-moz-box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	box-shadow: inset 0px 0px 10px 0px rgba(0, 0, 0, .1);
	color: #e0e0e0;
	text-shadow: 0px 1px 0px #4d7a85;
	filter: dropshadow(color=#4d7a85, offx=0, offy=1);
	border: 1px solid #55838f;
	position: relative;
	margin: -1px;
}
.ui-datepicker-unselectable .ui-state-default {
	background: #f4f4f4;
	color: #b4b3b3;
}
.ui-datepicker-calendar td:first-child .ui-state-active {
	width: 29px;
	margin-left: 0;
}
.ui-datepicker-calendar td:last-child .ui-state-active {
	width: 29px;
	margin-right: 0;
}
.ui-datepicker-calendar tr:last-child .ui-state-active {
	height: 29px;
	margin-bottom: 0;
}


/******************************/
/* responsive styles          */
/******************************/
@media only screen and (min-width: 1024px)
{
  /*a[href^="tel:"] {
    color: #333333;
    text-decoration: none;
  }*/
}

/* wide screens */
@media only screen and (min-width: 1600px)
{
    #headerlogo
    {
        padding-bottom: 20px;
        max-width: 280px;
		margin-top: -18px;
    }

    .contentmargin
    {
        padding-left: 150px;
        padding-right: 150px;
    }

    #footerlogo
    {
        max-width: 400px;
    }

	.HomePageBox-Middle .HomePageBoxContent h3 {
		padding-left:60px;
		padding-right:60px;
	}
}

/* standard screens (most style stay at default) */
@media only screen and (max-width: 1440px)
{
    #mainnav ul li a
    {
        font-size: 1em;
    }
}

/* small screens, large tablets */
@media only screen and (max-width: 1279px)
{
    body
    {
        font-size: 0.9vw;
    }

    #howcanwehelp input
    {
        width: 75%;
    }

    #mainnav ul li a
    {
        font-size: 0.9em;
    }


}

/* small screens, large tablets */
@media only screen and (max-width: 1150px)
{
    body
    {
        font-size: 0.8vw;
    }

    #mainnav ul li a
    {
        font-size: 0.85em;
    }

	.HomePageBoxes {
		height:330px !important;
	}

	.HomePageBoxes .HomePageBoxContent {
		height:175px;

	}

  .ContainerGreyBorder h2 {
    font-size: 1.5em;
  }
}

/* small devices, tablets */
@media only screen and (max-width: 1040px)
{

  #megamenucontainer {
    display: none !important;
  }

    #mobilemenutoggle
    {
        display: inline-block;
        position: absolute;
        top: 20px;
        right: 20px;
        width: 60px;
        height: 60px;
        padding: 0;
        margin: 0;
    }

        #mobilemenutoggle button
        {
            display: inline-block;
            line-height: 60px;
            height: 60px;
            width: 60px;
            border: 2px solid #949494;
            border-radius: 15px;
            background-color: #fafae0;
            color: #949494;
            text-align: center;
            font-size: 2.5em;
            font-weight: normal;
            padding: 0;
            margin: 0;
            font-family: FontAwesome
        }

            #mobilemenutoggle button:hover
            {
                color: #264e5f;
                border: 2px solid #264e5f;
                -moz-transition: all 0.5s;
                -o-transition: all 0.5s;
                -webkit-transition: all 0.5s;
                transition: all 0.5s;
            }

    #mobilemenu
    {
        z-index: 999;
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        width: 0;
        height: 100%;
        background-color: rgb(214, 209, 163);
        background-color: rgba(214, 209, 163, 0.68);
        padding: 0;
        margin: 0;
    }

    #mobilemenucontent
    {
        width: 100%;
        background-color: #264e5f;
        border: none;
        border-radius: 30px 0 0 30px;
        margin: 40px 0 40px 40px;
    }

    #mobilemenu #mobileprimary
    {
        list-style-type: none;
        margin: 0;
        padding: 20px 0 0 60px;
    }

        #mobilemenu #mobileprimary li
        {
            margin: 0;
            padding: 0;
            border-left: 3px solid #264e5f;
            border-top: 3px solid #264e5f;
            border-bottom: 3px solid #264e5f;
            border-right: none;
        }

            #mobilemenu #mobileprimary li a
            {
                display: block;
                color: #ffffff;
                font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
                font-size: 1.5em;
                font-weight: bold;
                line-height: 1.8em;
                padding: 0 0 0 10px;
                text-transform: uppercase;
                text-decoration: none;
            }

            #mobilemenu #mobileprimary li:hover
            {
                border-left: 3px solid #d6d1a3;
                border-top: 3px solid #d6d1a3;
                border-bottom: 3px solid #d6d1a3;
                border-right: none;
                border-radius: 10px 0 0 10px;
            }

            #mobilemenu #mobileprimary li a:hover
            {
                color: #d6d1a3;
            }

            #mobilemenu #mobileprimary li ul
            {
                display: none;
                list-style-type: none;
                margin: 0;
                padding: 0 0 0 20px;
            }

                #mobilemenu #mobileprimary li ul li
                {
                    margin: 0;
                    padding: 0;
                    border: none;
                }

                    #mobilemenu #mobileprimary li ul li a
                    {
                        display: block;
                        color: #ffffff;
                        font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
                        font-size: 1.25em;
                        font-weight: bold;
                        line-height: 1.75em;
                        padding: 0 0 0 10px;
                        border: none;
                        text-transform: none;
                    }

                    #mobilemenu #mobileprimary li ul li:hover
                    {
                        border: none;
                    }

                    #mobilemenu #mobileprimary li ul li a:hover
                    {
                        color: #d6d1a3;
                    }

    #mobilemenu #mobilesecondary
    {
        list-style-type: none;
        margin: 0;
        padding: 0px 0 20px 60px;
    }

        #mobilemenu #mobilesecondary li
        {
            margin: 0;
            padding: 0;
        }

            #mobilemenu #mobilesecondary li a
            {
                display: block;
                color: #d6d1a3;
                font-family: 'PT Sans', 'Arial', 'Helvetica', sans-serif;
                font-size: 1.1em;
                font-weight: normal;
                line-height: 1.8em;
                padding: 5px 10px;
                text-transform: uppercase;
                text-decoration: none;
            }

                #mobilemenu #mobilesecondary li a:hover
                {
                    color: #ffffff;
                }

    #mobilemenuclose
    {
        padding: 20px 0 0 20px;
    }

        #mobilemenuclose a
        {
            display: block;
            height: 40px;
            width: 40px;
            background-image: url(../img/roundarrowbutton_white_right.png);
            background-position: top left;
            background-size: 40px 40px;
        }

    #topbar
    {
        height: 20px;
    }

        #topbar ul
        {
            display: none;
        }

    .contentmargin
    {
        padding-left: 0;
        padding-right: 0;
    }

    #header
    {
        background-color: #ffffff;
    }

    #headertools
    {
        display: none;
    }

    #headerlogo
    {
        float: none;
        height: auto;
        width: auto;
        padding: 20px;
    }

        #headerlogo img
        {
            height: auto;
            width: 25%;
        }

    #mainnav
    {
        display: none;
    }

    #megamenucontainer
    {
        display: none;
    }

    #contentbgleft
    {
        background-image: none;
    }

    #contentbgright
    {
        background-image: none;
    }

    #homecontent
    {
        padding-top: 0;
    }

    #homeinforight
    {
        float: none;
        width: auto;
    }

    #homeinfoleft
    {
        float: none;
        width: auto;
    }

    .homemaincolumn
    {
        clear: left;
        float: none;
        width: auto;
        padding-top: 20px;
    }

    .homefeaturecolumn
    {
        float: none;
        width: auto;
        margin-top: 20px;
    }

    #footerinfoleft
    {
        float: none;
        width: auto;
    }

    #footerinfocenter
    {
        float: none;
        width: auto;
    }

    #footerinforight
    {
        float: none;
        width: auto;
    }

    #footerinfocenter
    {
        margin: 0;
    }

    .footerinfopad
    {
        padding: 20px;
    }

    #footerlogo
    {
        float: none;
        width: 75%;
        margin: 0 auto;
    }

    #footerbottomright
    {
        margin-left: 0;
        text-align: center;
        padding-top: 20px;
    }

    #footersocial
    {
        text-align: center;
    }

    .footerlinklist
    {
        display: none;
    }

	.HomePageBoxes h2 span {
		font-size: 90%;
	}

	.HomePageBox-Middle .HomePageBoxContent h3 {
		font-size: 130%;
		padding-right:30px;
		padding-left:30px;
	}
}

/* small devices, tablets */
@media only screen and (max-width: 991px)
{

  .sidebarmenu ul
  {
      display: none;
  }

  #sidebarmenusmall
  {
      display: block;
  }
  .ContainerGreyBorder
  {
      margin-top: 20px;
  }
}

/* small devices, tablets */
@media only screen and (max-width: 768px)
{

  #innerheaderimage {
    display: none;
  }

  #innerheadertext {
    margin-right: 0;
  }

    #countyhighlight
    {
        display: none !important;
    }

    .newsalertlink
    {
        margin-left: 0;
        text-align: center;
    }

    .newsalerttext
    {
        float: none;
        width: auto;
        text-align: center;
    }

    .popularbuttonlink
    {
        display: block;
        float: none;
        width: auto;
        margin: 0 0 10px 0;
    }

    #popularbuttons .popularbuttonlink a
    {
        padding: 4% 25% 4% 4%;
        border-radius: 0 18px 18px 0;
        text-align: left;
        background-position: 95% 50%;
        background-size: 5%;
    }

    .searchInputContainer {
      width: calc(100% - 42px);
    }

    #howcanwehelp input
    {
        width: 100%;
    }

    .homeevent
    {
        width: auto;
        float: none;
        padding-bottom: 40px;
    }

    #innerheadertext h1 {
      line-height: normal;
    }
}




/* phones */
@media only screen and (max-width: 640px)
{
  #modalClose {
    display: none;
  }
    #windowClose {
      display: block;
    }
}

/* phones */
@media only screen and (max-width: 480px)
{
    #headerlogo img
    {
        height: auto;
        width: 50%;
    }
}

/* small phones */
@media only screen and (max-width: 320px)
{
}