html {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    font-size: 14px;
    font-family: 'Maven Pro', sans-serif;
}

body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
#main {
    position: relative;
    width: 100%;
    min-height: 100%;
    background: rgba(0,59,92,.7);
}
.clear{clear: both;}

/*makes padding/margins included input size*/
body, html, header, #headContain, #main,
nav, #navContain, section, #contentContain, footer, #logo, #footContain,
#homeSecondNav, #homeLftContent, #homeRtContent, #search, #commissioner,
#upperNavContain, #mainNavContain
{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box; /* Firefox, other Gecko */
    box-sizing: border-box; /* Opera/IE 8+ */
}

/*-----------------------------------------HEADER-------------------------------------------*/
header {
    height: 110px;
    width: 100%;
    /*background: #3f2d0d url("/img/site/header_backPattern.png") no-repeat center bottom;*/
    background: white;
}
#headContain {
    position: relative;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    color: white;
    /*background: url("/img/site/header_sdScript.png") no-repeat 6% -5px;*/
}
    #headContain #logo {
        position: absolute;
        left: 0;
        height: 110px;
        width: 35%;
        max-width: 450px;
        background: url("/img/site/header_logo.png") no-repeat 0 center;
        background-size: 100%;
    }
    #headContain #logo a {
        position: relative;
        left: 8%;
        width: 88.5%;
        display: block;
        height: 100%;
        text-align: right;
        padding-top: 40px;
        font-size: 1.2em;
        color: #003B5C;
        text-decoration: none;
    }
#headContain #logo a:hover {color: white;}
#headContain #search {
    position: absolute;
    right: 0;
    top: 20px;
    width: 20%;
    text-align: right;
    padding: 0;
    color: black;
}
.gsc-control-cse {
    padding: 0 !important; 
    margin: 0 !important;
    background: none !important;
    border: none !important;
}
.gsc-control-cse table, .gsc-control-cse table tr, .gsc-control-cse table td  {margin-right: 0 !important; padding-right: 0 !important; border: 0 !important;}
.gsc-input-box {
    height: 24px !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}
form.gsc-search-box {margin-bottom: 0 !important; margin-right: 0 !important; font-size: 20px !important; padding-top: 10px !important;}
input.gsc-search-button-v2 {
    padding: 11px 12px 10px 12px !important;
    margin-top: -1px !important;
    
}
.gsc-search-button{
    margin-left: -5px !important;
}
.gsc-search-button-v2 {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: 7px 12px 6px 12px !important;
}
/*table.gsc-search-box td {vertical-align: top !important;}*/
/*se input.gsc-input, input.gsc-input {
    background: none !important;
    text-indent: 0 !important;
}*/ /*hides GCS logo and text*/

            /*this chunck of code fixes bug where bootstrap overwrites google CSE styles*/
            .gsc-control-cse .gsc-table-result {
	            font-family : inherit;
            }
            .gsc-control-cse .gsc-input-box {
	            height : inherit;
            }
            input.gsc-input,
            .gsc-input-box,
            .gsc-input-box-hover,
            .gsc-input-box-focus,
            .gsc-search-button, input.gsc-search-button-v2 {
	            box-sizing  : content-box;
	            line-height : normal;
	            margin-top  : 0px;
            }
            /*end bug fix code*/

#headContain #commissioner {
    position: absolute;
    right: 0;
    bottom: 20px;
    font-size: 1.5em;
    color: #003B5C;
    font-family: 'Maven Pro', sans-serif;
}



/*-------------------------------------------NAV---------------------------------------------*/
nav {
    height: 70px;
    width: 100%;
    background: #F6BE00;
    border-top: 2px solid white;
    border-bottom: 2px solid white;
}
#navContain {
    position: relative;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: 'Maven Pro', sans-serif;
    font-weight: bold;
    font-size: .8em;
}
.hambMenu {
    display: none;
    margin-top: 0;
    font-size: 1.7em;
    font-weight: 500;
    text-align: center;
    margin-right: initial;
}
.hambMenu.right {
    text-align: right;
    margin-right: 10px;
}
#navContain #navigation #upperNavContain {
    position: absolute;
    top: 3px;
    width: 100%;
    text-align: center;
}
    #upperNavContain ul {
        padding: 0;
        margin: 0;
        font-size: 1.2em;
    }
    #upperNavContain ul li {
        display: inline-block;
    }
    #upperNavContain ul li a {
        padding: 3px 10px 5px 10px;
        margin: 2px 5px 0 5px;
        background: rgba(256,256,256,.7);
        text-decoration: none;
        /*color: #efd189;*/
        color: black;
        border-radius: 0 0 8px 8px;
    }
    /*#upperNavContain ul li:first-of-type a {color: #efd189;}
    #upperNavContain ul li:last-of-type a {color: #efd189;}*/
    #upperNavContain ul li a:hover {
        background: rgba(256,256,256,.9);
    }
#navContain #navigation #mainNavContain {
    position: absolute;
    bottom: 3px;
    width: 100%;
    text-align: center;
    font-weight: bold;
}
    #mainNavContain ul {
        padding: 0;
        margin: 0;
        font-size: 1.5em;
        list-style: none;
    }
    #mainNavContain ul li {
        position: relative;
        display: inline-block;
    }
        #mainNavContain ul li a {
            padding: 8px 30px;
            text-decoration: none;
            text-transform: uppercase;
            color: rgb(0,59,92);
        }
            #mainNavContain ul li a:hover {
                color: rgba(0,59,92,.7);
            }
        #mainNavContain ul li:before {
            content: ":";
            position: absolute;
            top: -2px;
            color: rgba(0,59,92,.7);
        }
    #mainNavContain ul li:first-of-type:before {
        content: "";
    }
        #mainNavContain ul li ul.dropDown {
            display: none;
            position: absolute;
            top: 31px;
            left: -13%;
            width: 120%;
            background: rgba(0,59,92,.7);
            z-index: 10;
        }
            #mainNavContain ul li ul.dropDown:before {
                position: absolute;
                top: -10px;
                left: 48%;
                content: "";
                width: 0;
                height: 0;
                border-left: 10px solid transparent;
                border-right: 10px solid transparent;
                border-bottom: 10px solid rgba(0,59,92,.7);
            }
        #mainNavContain ul li ul.dropDown li {
            display: block;
            padding: 0;
        }
        #mainNavContain ul li ul.dropDown li a {
            padding-left: 0;
            display: block;
            color: white;
            font-size: .6em;
            text-transform: capitalize;
            border-top: 1px solid transparent;
            border-bottom: 1px solid transparent;
        }
            #mainNavContain ul li ul.dropDown li a:hover {
                /*color: #efd189;*/
                background: rgb(0,59,92);
                border-top: 1px solid black;
                border-bottom: 1px solid black;
            }
        #mainNavContain ul li ul.dropDown li:before {
            content: "";
        }


/*-----------------------------------------HOMEPAGE------------------------------------------*/
#contentContain .home {height: 450px;}
#homeLftContent {
    position: relative;
    float: left;
    width: 70%;
    height: 450px;
    border-left: 2px solid white;
    background: gray;
}
#homeLftContent .owl-carousel {
    position: relative;
    width: 100%;
    height: 450px;
}
.picSliderIMG {
    position: relative;
    width: 100%;
    height: 450px;
    background-size: cover;
    background-repeat: no-repeat;
}
.picSlider-credit {
    position: absolute;
    right: 10px;
    bottom: 5px;
    color: white;
    font-size: .7em;
}
#homeLftContent .owl-dots {
    position: relative;
    bottom: 40px;
}
#homeRtContent {
    float: right;
    width: 30%;
    height: 450px;
    padding: 15px;
    border: 2px solid white;
    background: white;
    overflow: auto;
    font-family: 'Maven Pro', sans-serif;
}
#homeRtContent h2{font-size: 1.4em; color: rgb(0,59,92) !important;}
    #homeRtContent h3 {
        margin-top: 8px;
        font-size: 1.2em !important;
        font-weight: bold !important;
        color: rgb(237,139,0) !important;
    }
#homeRtContent p {font-size: 1.2em;}
#homeRtContent a {text-decoration: underline;}
#homeRtContent a:hover {color: gray; text-decoration: underline;}
#homeRtContent .nav a {display: block; background: rgba(164, 124, 66, .2); padding: 8px 12px; margin-top: 10px; font-size: 1.4em; }
#homeRtContent .nav a:hover {background: rgba(164, 124, 66, .1); text-decoration: none;}
#homeSecondNav {
    position: relative;
    width: 100%;
    height: 250px;
    background: rgb(237,139,0);
    border-top: 2px solid white;
    font-family: 'Maven Pro', sans-serif;
}
#homeSecondNavContain {
    position: relative;
    width: 90%;
    margin: 0 auto;
}

.bttmNavBox {
    position: relative;
    margin: 15px 0 2px 0;
    padding: 6px;
    background: rgba(256,256,256,.3) ;
    height:233px;
    text-align: center;
    border: 2px solid #efd189 ;
    border-bottom: 0;
}
.bttmNavBox h1 {font-size: 1.2em; font-weight: 500; margin-top: 3px; z-index: 10; color: white; padding: 0 5px;}
.bttmNavBox h1 a {color: white; text-decoration: none;}
.bttmNavBox h1 a:hover {color: #efd189;}
.bttmNavBox ul {padding: 0; margin: 0; list-style-type: none; text-align: left; font-size: 1.1em; position: absolute; bottom: 0; left: 0; right: 0;}
.bttmNavBox ul.scroll {height: 196px; overflow: auto;}
.bttmNavBox ul li {}
    .bttmNavBox ul li a {
        color: black;
        text-decoration: none;
        padding: 2px 0 2px 10px;
        display: block;
        background: rgba(242,174,77,.5);
        margin-bottom: 3px;
    }
        .bttmNavBox ul li a:hover {
            text-decoration: none;
            background: rgb(237,139,0);
        }
#visitCapitol {
    background: #f2ae4d url("/img/site/homeSecondNav_back_visit.png") no-repeat center bottom;
    background-size: cover;
}
#useOf {
    background: #f2ae4d url("/img/site/homeSecondNav_back_useof.png") no-repeat center top;
    background-size: cover;
}
#intheLoop {
    background: #f2ae4d url("/img/site/homeSecondNav_back_intheLoop.png") no-repeat center top;
    background-size: cover;
}

/*-----------------------------------------CONTENT-------------------------------------------*/
#contentContain p {margin-bottom: 20px;}

/*styles for unordered lists*/
#contentContain ul {list-style-type: none; position: relative;}
    #contentContain ul li:before {
        content: "\f054";
        padding-right: 10px;
        position: relative;
        top: -2px;
        font-size: .6em;
        font-family: FontAwesome;
    }
#contentContain ul li ul {list-style-type: square;}
#contentContain ul li ul li:before {content: ""; padding-right: 0;}
#contentContain ul li ul li ul {list-style-type:circle;}
#contentContain ul li ul li:before {content: ""; padding-right: 0;}
#contentContain ol.upperLett {list-style-type:upper-alpha; padding-right: 0;}
#contentContain ol.upperLett li:before {content: "";}

/*styles for headers*/
#contentContain h1 {color: #003b5c ; font-weight: 400; font-size: 1.3em; padding: 0; margin-bottom: 5px; text-transform: uppercase; border-bottom: 1px solid #3f2d0d; }
#contentContain h2 {
    color: #003b5c;
    font-weight: 600;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
}
#contentContain h3 {color: #ed8b00; font-weight: 500;}

/*styles for tables*/
#contentContain table {width: 100%; border-collapse: collapse; border: 1px solid #a47c42;}
#contentContain table th, table td {padding: 5px; text-align: center; border: 1px solid rgba(164, 124, 66, .2);}
#contentContain table tr:nth-child(odd) {background: rgba(164, 124, 66, .1);}
#contentContain table tr:hover {background: rgba(164, 124, 66, .2);}
#contentContain th {background: #003b5c; color: white; white-space:nowrap; }

#centDup table {width: auto; border: 1px solid gray; margin-top: 30px;}
#centDup table tr th, #centDup table tr td {padding: 5px 20px; text-align: center; background: transparent; border: 5px solid white;}
#centDup table tr:nth-child(odd) {background: transparent;}
#centDup table tr:first-of-type {background: lightgray;}
#centDup table tr td:first-of-type {width: 100px;}
#centDup table tr:hover {border: blue;}


section {
    position: relative;
    width: 100%;
    background-color: rgba(0,59,92,.4);
    /*background-image: url("/img/site/nav_dropShadow.png"), url("/img/site/mainContent_backPattern.png");
    background-position: 0 -6px, center;
    background-repeat: repeat-x, repeat;*/
}
#contentContain {
    font-family: 'Maven Pro', sans-serif;
    position: relative;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    background: rgba(256, 256, 256, 0.5); /*default for safari and older browsers*/
    background: linear-gradient(to right, rgba(256, 256, 256, 1) 80%, rgba(256, 256, 256, 0.5) 20%);
    background: -webkit-linear-gradient(to right, rgba(256, 256, 256, 1) 80%, rgba(256, 256, 256, 0.5) 20%);
    background: -moz-linear-gradient(to right, rgba(256, 256, 256, 1) 80%, rgba(256, 256, 256, 0.5) 20%);
    background: -o-linear-gradient(to right, rgba(256, 256, 256, 1) 80%, rgba(256, 256, 256, 0.5) 20%);
}
#pageTitle {
    float: left;
    width: 100%;
    min-height: 20px;
    padding: 8px 20px;
    background:#003b5c url("/img/site/secondaryPageTitle_icon.png") no-repeat 5px center;
    background-size: auto 80%;
}
    #pageTitle h1 {
        float: left;
        color: white;
        font-family: 'Maven Pro', sans-serif;
        font-weight: 400;
        font-size: 1.5em;
        text-transform: uppercase;
        margin: 0 0 0 10px;
        padding: 0;
    }
    #pageTitle h2 {
        float: left;
        color: #ed8b00;
        font-family: 'Maven Pro', sans-serif;
        font-weight: 400;
        font-size: 1.2em;
        margin: 0;
        padding: 5px 0 0 5px;
    }
#contentFULL {
    float: left;
    width: 100%;
    min-height: 300px;
    background: white;
    padding: 20px 30px;
    font-size: 1.4em;
}
.twoCol {
    float: left;
    width: 70%;
}
.oneCol {
    float: right;
    width: 28%;
    padding: 0 0 30px 30px;
    color: #a47c42;
}
#contentLFT {
    position: relative;
    float: left;
    width: 80%;
    min-height: 300px;
    background: white;
    padding: 20px 30px;
    font-family: 'Maven Pro', sans-serif;
    font-size: 1.4em;
}
.staff {
    margin-bottom: 30px;
}
#contentRT {
    height: 100%;
    float: right;
    width: 20%;
    padding: 6px;
}
    #contentRT #secondaryNav {
        font-family: 'Maven Pro', sans-serif;
        font-size: 1.2em;
    }
#contentRT #secondaryNav ul {padding: 0; margin: 0; list-style-type: none;border-top: 1px solid black;}
#contentRT #secondaryNav ul li:before {content: ""; display: none;}
#contentRT #secondaryNav ul li a {color: white; text-decoration: none; display: block; padding: 3px 0 3px 20px; border-bottom: 1px solid black;}
#contentRT #secondaryNav ul li a:hover {color: #003b5c; border-bottom: 1px solid black;}
#contentRT #secondaryNav .secondaryHambMenu {display: none;}

    #contentRT #secondaryNav-noLink {
        font-family: 'Maven Pro', sans-serif;
        font-size: 1.2em;
        margin-bottom: 20px
    }
#contentRT #secondaryNav-noLink ul {padding: 0; margin: 0; list-style-type: none;}
#contentRT #secondaryNav-noLink ul li {color: white; text-decoration: none; display: block; padding: 3px 0 3px 20px; }
#contentRT #secondaryNav-noLink ul li:before {content: ""; display: none;}
#contentRT #secondaryNav-noLink ul li a {color: white;}
    #contentRT #secondaryNav-noLink ul li a:hover {
        color: #003b5c;
    }

.inContentNav {padding: 0; margin: 0 0 15px 0; list-style-type: none;}
.inContentNav li {display: inline-block; margin-bottom: 20px;}
.inContentNav li:before {content: ""; display: none;}
.inContentNav li a {background: #ed8b00; color: white; padding: 10px 20px; text-decoration: none;}
.inContentNav li a:hover {background: rgba(237,139,0,.7); color: white; text-decoration: none;}
    .inContentNav li a.active {
        background: rgba(237,139,0,.3);
        color: black;
    }

/*form styles*/
.returnLink {position: absolute; right: 30px; top: 68px; z-index: 100;}
.returnLinkwMenu {position: absolute; right: 30px; top: 40px; z-index: 100;}
form .divisionLine {float: left; width: 100%; font-size: 1.2em; font-weight: bold; background: rgba(239, 209, 137, .4); padding: 1px 8px 5px 8px; margin-bottom: 10px;}
input {padding: 4px 8px; float: left;}
input:focus {border: blue;}
input.fullWidth {width: 80%;}
    input.autoWidth {
        width: auto;
    }
.txtbox { float: left; clear: both; width: 100%; margin-bottom: 10px; }
.txtbox .lbox { float: left; margin-right: 10px; text-align: right; font-weight: bold; font-size: .9em; padding: 6px 0; width: 35%; }
.txtbox .mbox { float: left; width: 60%; margin-right: 10px; }
.txtbox .label {float: right;}
.txtbox .expl {float: none; font-size: .8em; font-weight: normal; color: darkgray;  padding: 4px 0; margin-left: 15px;}
.txtbox .txtBoxLft {float: left; width: 80%;}
.txtbox .req {float: left; padding: 7px 0; margin-left: 5px; font-size: .8em;}
.txtbox .ddl {float: left; padding: 6px 0; min-width: 200px;}
#contentContain .txtbox table.rbl {border: none; background: none; padding: 0; margin: 5px; width: auto; float: left;}
#contentContain .txtbox table.rbl input {padding: 0; margin: 8px 5px 0 0;}
#contentContain .txtbox table.rbl tr {border: none; background: none;}
#contentContain .txtbox table.rbl td {float: left; padding: 0 25px 0 0; border: none; background: none;}
.txtbox .err {float: left; padding: 7px 0; margin-left: 10px; font-size: .8em; color: red;}
.subBttn {float: none; margin-top: 20px; padding: 5px 15px; font-weight: bold; cursor: pointer;}
.subBttn:hover {border: 2px solid #7FDBFF;}
.resBttn {float: none; margin-top: 20px; padding: 5px 15px; margin-left: 10px; opacity: 0.8; cursor: pointer;}
.resBttn:hover {opacity: 1;}



/*makes small pdf links use the pdf icon*/
a[href$=".pdf"]:after {
	content: "\f1c1";
    font-family: FontAwesome;
    vertical-align: super;
	padding: 0 5px 0 3px;
	font-size: .5em;
	display: inline-block;
}
a.noIcon[href$=".pdf"]:after {
	display: none;
}
/*makes small doc links use the doc icon*/
a[href$=".doc"]:after {
	content: "\f1c2";
    font-family: FontAwesome;
    vertical-align: super;
	padding: 0 5px 0 3px;
	font-size: .5em;
	display: inline-block;
}
a[href$=".docx"]:after {
	content: "\f1c2";
    font-family: FontAwesome;
    vertical-align: super;
	padding: 0 5px 0 3px;
	font-size: .5em;
	display: inline-block;
}

/*make youtube videos fluid 100% width*/
.videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*-----------------------------------------FOOTER--------------------------------------------*/
footer {
    width: 100%;
    height: 75px;
    background: #003b5c;
    /*background: #003b5c url("/img/site/footer_backPattern.png") no-repeat center;*/
    border-top: 2px solid #efd189;
    font-family: 'Maven Pro', sans-serif;
    font-size: .9em;
}
#footContain {
    position: relative;
    width: 90%;
    height: 100%;
    margin: 0 auto;
    color: white;
    padding-top: 10px;
    z-index: 500;
}
#footContain ul {margin: 0; padding: 0; float: left; width: 45%;}
#footContain ul li {
    display: inline-block;
    border-right: 1px solid white;
    padding: 0 20px 3px 20px;
}
#footContain ul li:last-of-type {border-right: none;}
#footContain ul li a {color: white;}
#footContain ul li a:hover {color: rgba(256,256,256,.5); text-decoration: none;}
#footContain ul.contactInfo {
    float: right;
    width: 50%;
    margin: 0;
    padding: 0;
    text-align: right;
}
#footContain ul.contactInfo li {
    display: inline;
    padding: 0 10px 3px 10px;
}