/*brown/black */
/* tan*/
/* light yellow */
/* yellow */
/* light orange */
/* dark orange */
/* green */
/* logo green */
/* green to match banner bkgd */
/* green */
body, address, dd, dl, hr, p, form {
    margin: 0;
    padding: 0;
    font-size: 16px;
    line-height: 1.5em;
    text-decoration: none;
    font-family: Tahoma, Verdana, Geneva, sans-serif
    }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block
    }
img, embed, object, video {
    max-width: 100%;
    height: auto;
    margin: 0
    }
body {
    margin: 0 auto;
    padding: 0;
    background-color: #fdfdfa;
    background-image: url(../images/bkgd.jpg);
    font-family: Tahoma, Verdana, Geneva, sans-serif
    }
h1, h1 a:link, h1 a:visited {
    font-variant: small-caps;
    font-weight: bold;
    color: #d77804;
    /* dark orange */
    font-size: 145%;
    text-indent: none;
    margin: 0.5em 0 0.7em 0;
    padding: 0;
    line-height: 1.6em
    }
h2, h2 a:link, h2 a:visited {
    font-variant: small-caps;
    font-weight: 700;
    color: #0f5743;
    /* green */
    font-size: 120%;
    text-indent: none;
    margin: 0.5em 0;
    padding: 0;
    line-height: 1.6em
    }
h3, h3 a:link, h3 a:visited {
    font-variant: small-caps;
    font-weight: bold;
    color: #d77804;
    /* dark orange */
    font-size: 110%;
    margin: 0.6em 0 0 0;
    padding: 0;
    line-height: 1.4em
    }
h4, h4 a:link, h4 a:visited {
    font-variant: small-caps;
    font-weight: bold;
    color: #000;
    font-size: 110%;
    margin: 0.5em 0;
    padding: 0;
    line-height: 1.6em
    }
h4 a:active, h4 a:hover {
    text-decoration: none;
    color: #0f5743;
    /* green */
    }
h5 {
    font-variant: normal;
    font-weight: bold;
    color: #000;
    font-size: 100%;
    margin: 0.5em 0;
    padding: 0;
    line-height: 1.6em
    }
h6 {
    font-variant: small-caps;
    font-weight: bold;
    color: #0f5743;
    /* green */
    font-size: 100%;
    margin: 1em 0;
    padding: 0;
    line-height: 1.6em
    }
a, a:visited {
    text-decoration: none;
    color: #0f5743;
    /* green */
    }
a:hover, a:active {
    text-decoration: none;
    color: #d77804;
    /* dark orange */
    }
p {
    text-indent: 0;
    padding: 0;
    margin: 0.2em 0 1em;
    line-height: 1.5em
    }
.container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    text-align: left;
    background-image: url(../images/bkgd.jpg)
    }
.banner {
    height: auto;
    min-height: 254px;
    width: auto;
    max-width: 1200px;
    margin: 0.2em auto 0.1em auto;
    padding: 0.3em 0 0 0;
    background-image: url(../images/banner.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    border-radius: 1.5em 1.5em 1em 1em;
    border-top: solid 0.2em #d77804;
    /* dark orange */
    border-bottom: 0.2em solid #f4f1aa;
    /* light yellow */
    background-color: #0f5743;
    /* green to match banner bkgd */
    z-index: 100
    }
.content {
    margin: 0 auto;
    padding: 0;
    width: auto;
    max-width: 1200px;
    background-color: #eee7db;
    /* tan*/
    border-radius: 1em 1em 0 0
    }
.main {
    margin: auto;
    padding: 0.4em 2em 0.2em 1.6em;
    width: auto;
    max-width: 1200px;
    min-height: 40em;
    background-color: #eee7db;
    /* tan*/
    border-top: solid 0.3em #f3b505;
    /* light orange */
    border-radius: 1em 1em 0 0
    }
.col-one {
    width: 30%;
    margin: 1em 0 0 0;
    padding: 0 4% 1em 1.5%;
    border-right: 2px solid #000;
    float: left;
    background-color: #eee7db;
    /* tan*/
    }
.col-two {
    width: 29%;
    margin: 1em 0 0 0;
    padding: 0 1% 1em 4%;
    float: left;
    background-color: #eee7db;
    /* tan*/
    }
.left {
    visibility: visible;
    float: left;
    margin: 0.8em 2.8em 1.5em 0.4em;
    padding: 0;
    width: 16.1em;
    min-height: 70em;
    height: auto
    }
.left-officials {
    visibility: visible;
    float: left;
    margin: 0.8em 2.2em 1.5em 0.4em;
    padding: 0;
    width: 15em;
    min-height: 88em;
    height: auto
    }
.left-sanitary {
    visibility: visible;
    float: left;
    margin: 0.8em 2.2em 1.5em 0.4em;
    padding: 0;
    width: 15em;
    min-height: 108em;
    height: auto
    }
.nav {
    visibility: visible;
    background: none;
    margin: 0;
    padding: 0 0.2em;
    display: block
    }
.nav a:link, .nav a:visited {
    color: #fff;
    background-color: #0f5743;
    /* green */
    text-align: left;
    text-decoration: none;
    display: block;
    line-height: 1em;
    border-bottom: 3px solid #f3b505;
    /* light orange */
    border-radius: 0.2em;
    padding: 0.5em 0 0.5em 0.7em;
    margin: 0 0 0.5em 0;
    font-stretch: extra-expanded;
    font-weight: 600
    }
.nav a:first-child {
    border-radius: 0.8em 0.8em 0.2em 0.2em;
    border-top: 3px solid #f3b505;
    /* light orange */
    }
.nav a:last-child {
    border-radius: 0.2em 0.2em 0.8em 0.8em
    }
.nav a:active, .nav a:hover {
    color: #0e6d41;
    /* green */
    background-color: #f3b505;
    /* light orange */
    display: block;
    border-bottom: 3px solid #0f5743;
    /* green */
    }
.calendar {
    float: none;
    display: block;
    margin: 1em 0;
    padding: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
    }
h2.calendar {
    padding: 0 0 0 1em;
    margin: 0
    }
#footer {
    margin: 0 auto;
    padding: 0.6em 0 1em 0;
    height: auto;
    line-height: 1em;
    background-color: #0f5743;
    /* green to match banner bkgd */
    border-top: solid 0.2em #f3b505;
    /* light orange */
    }
.footer, .footer a:link, .footer a:visited {
    text-align: center;
    color: #eee7db;
    /* tan*/
    font-weight: bold
    }
.footer a:hover, .footer a:active {
    color: #eee7db;
    /* tan*/
    }
.byline {
    font-size: 0.7em;
    font-weight: bold;
    text-indent: 0;
    line-height: 1.8em;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #eee7db;
    /* tan*/
    }
.byline a:link, .byline a:active, .byline a:visited {
    font-size: 1em;
    font-weight: bold;
    text-indent: 0;
    line-height: 1.8em;
    text-align: center;
    margin: 0;
    padding: 0;
    color: #eee7db;
    /* tan*/
    }
.byline a:hover, .byline a:active {
    color: #d77804;
    /* dark orange */
    }
.disclaimer, .disclaimer a:link, .disclaimer a:active, .disclaimer a:visited {
    font-size: 1em;
    font-weight: bold;
    text-indent: 0;
    line-height: 1.5em;
    text-align: center;
    margin: 0.5em 0;
    padding: 0;
    color: #eee7db;
    /* tan*/
    }
.disclaimer a:hover, .disclaimer a:active {
    color: #d77804;
    /* dark orange */
    }
.title {
    font-variant: small-caps;
    font-weight: bold;
    font-size: 140%;
    color: #0f5743;
    /* green */
    margin: 0.3em 0.6em 1em 1.2em;
    padding: 0;
    line-height: 1.6em
    }
.officials {
    font-variant: small-caps;
    font-weight: bold;
    color: #0f5743;
    /* green */
    font-size: 100%;
    line-height: 1.2em;
    margin: 1em 0 0 0;
    padding: 0
    }
.email a:link, .email a:visited {
    color: #069;
    font-weight: 500;
    font-size: 94%
    }
img.facebook {
    margin: 0.5em 0 0 1.5em
    }
.notice {
    font-size: 75%;
    font-weight: 700;
    text-align: center;
    color: #c00;
    margin: 0 0 1em 0
    }
.notice-left {
    font-size: 75%;
    font-weight: 700;
    text-align: left;
    color: #c00;
    margin: 0 0 1.5em 0
    }
.minutes {
    font-variant: small-caps;
    font-weight: 700;
    color: #d77804;
    /* dark orange */
    font-size: 100%;
    margin: 0;
    padding: 0;
    line-height: 1.8em
    }
.agenda, .agenda a:link, .agenda a:visited {
    font-variant: small-caps;
    font-weight: 800;
    color: #0f5743;
    /* green */
    font-size: 120%;
    margin: 1em 0;
    padding: 0;
    line-height: 0.8em
    }
.agenda a:active, .agenda a:hover {
    color: #d77804;
    /* dark orange */
    }
.special {
    color: #d77804;
    /* dark orange */
    text-indent: 1.5em;
    font-weight: bold;
    font-variant: small-caps;
    line-height: 2em;
    font-size: 140%;
    padding: 0;
    margin: 0
    }
.meetings, .meetings {
    font-variant: small-caps;
    font-weight: bold;
    color: #0f5743;
    /* green */
    font-size: 90%;
    text-align: center;
    margin: 0.5em 0;
    padding: 0;
    line-height: 1.4em
    }
.form {
    text-align: center;
    font-weight: 900
    }
.img {
    float: none;
    margin: 0.6em 0.2em;
    border: 2px solid #0f5743;
    /* green */
    vertical-align: top
    }
.imgMap {
    float: right;
    margin: 0.6em 1em
    }
.imgRight {
    float: right;
    margin: 0.6em 1em;
    border: 2px solid #0f5743;
    /* green */
    }
.imgLeft {
    float: left;
    margin: 0.6em 1em;
    border: 2px solid #0f5743;
    /* green */
    }
.imgCenter {
    float: none;
    text-align: center;
    border: 2px solid #0f5743;
    /* green */
    }
.imgHide {
    margin: 1em;
    visibility: visible
    }
.main ul li {
    list-style: none;
    padding: 0;
    margin: 0.2em 0 0.4em 1.5em
    }
li {
    list-style: none;
    padding: 0;
    margin: 0.2em 0 0.2em 1em
    }
.hr {
    text-align: left;
    border-top: 2px ridge #d77804;
    /* dark orange */
    padding: 0 10%;
    margin: 1em auto
    }
.hr-thick {
    text-align: left;
    width: 80%;
    border-top: 1px ridge #0f5743;
    /* green */
    border-bottom: 4px ridge #d77804;
    /* dark orange */
    padding: 0 10%;
    margin: 1em auto
    }
.clearfloat {
    /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0
    }
/******mobile nav & menu button hidden on desktop ******/
#mobile_nav ul {
    display: none
    }
a.menu {
    display: none
    }
/****************************************************************************************************************************/
/******************************************** large tablet styles ********************************/
@media only screen and (min-width: 781px) and (max-width: 980px) {
    .container {
        background-color: #0f5743;
        /* green to match banner bkgd */
        }
    .banner {
        height: auto;
        min-height: 200px;
        max-height: 350px;
        width: auto;
        margin: 0 auto;
        padding: 0 0.2em;
        background-image: url(../images/banner.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 0
        }
    .content {
        margin: 0.05em auto 0 auto;
        padding: 0;
        width: auto;
        max-width: 1000px;
        background-color: #eee7db;
        /* tan*/
        z-index: 0
        }
    .main {
        margin: auto;
        padding: 0.5em 1em 1em 1.5em;
        width: auto;
        float: none
        }
    .col-one {
        width: 30%;
        margin: 1em 0 0 0;
        padding: 0 3% 1em 0.5%;
        border-right: 2px solid #000;
        float: left;
        background-color: #eee7db;
        /* tan*/
        }
    .col-two {
        width: 29%;
        margin: 1em 0 0 0;
        padding: 0 0.5% 1em 3%;
        float: left;
        background-color: #eee7db;
        /* tan*/
        }
    .agenda, .agenda a:link, .agenda a:visited {
        font-variant: small-caps;
        font-weight: 800;
        color: #0f5743;
        /* green */
        font-size: 110%;
        margin: 1em 0 0 0;
        padding: 0;
        line-height: 1em
        }
    .agenda a:active, .agenda a:hover {
        color: #d77804;
        /* dark orange */
        }
    .left {
        visibility: visible;
        float: left;
        margin: 0.8em 2.2em 1.5em 0.4em;
        padding: 0;
        width: 14em
        }
    .nav {
        visibility: visible;
        background: none;
        margin: 0;
        padding: 0 0.2em;
        display: block;
        border-radius: 2em
        }
    .nav a:link, .nav a:visited {
        color: #fff;
        background-color: #0f5743;
        /* green */
        text-align: left;
        text-decoration: none;
        font-size: 95%;
        display: block;
        line-height: 1em;
        border-bottom: 3px solid #f3b505;
        /* light orange */
        border-radius: 0.2em;
        padding: 0.5em 0 0.5em 0.5em;
        margin: 0 0 0.5em 0
        }
    .nav a:first-child {
        border-radius: 0.8em 0.8em 0.2em 0.2em;
        border-top: 3px solid #f3b505;
        /* light orange */
        }
    .nav a:last-child {
        border-radius: 0.2em 0.2em 0.8em 0.8em
        }
    .nav a:active, .nav a:hover {
        color: #fff;
        background-color: #f3b505;
        /* light orange */
        display: block;
        border-bottom: 3px solid #0f5743;
        /* green */
        }
    .officials {
        font-variant: small-caps;
        font-weight: bold;
        color: #0f5743;
        /* green */
        font-size: 100%;
        line-height: 1.2em;
        margin: 1em 0 0 0;
        padding: 0
        }
    .email a:link, .email a:visited {
        color: #069;
        font-weight: 500;
        font-size: 75%
        }
    .calendar {
        float: none;
        display: block;
        margin: 1em 0;
        padding: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain
        }
    h2.calendar {
        font-size: 110%;
        padding: 0 0 0 1em;
        margin: 0
        }
    .footer, .footer a:link, .footer a:visited {
        font-size: 95%;
        font-weight: 800
        }
    .byline {
        font-weight: 800
        }
    .img {
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgRight {
        float: right;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgLeft {
        float: left;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgCenter {
        float: none;
        text-align: center;
        border: 2px solid #0f5743;
        /* green */
        }
    }
/****************************************************************************************************************************/
/************************************ between large & small tablet styles*************************/
@media only screen and (min-width: 721px) and (max-width: 780px) {
    .container {
        background-color: #0f5743;
        /* green to match banner bkgd */
        }
    .banner {
        height: auto;
        min-height: 165px;
        max-height: 260px;
        width: auto;
        margin: 0 auto;
        padding: 0 0.2em;
        background-image: url(../images/banner-tablet.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 0
        }
    .content {
        margin: 0.1em auto 0 auto;
        padding: 0;
        width: auto;
        max-width: 780px;
        background-color: #eee7db;
        /* tan*/
        z-index: 0
        }
    .main {
        margin: 0 auto;
        padding: 0.5em 0.8em 1em 1.2em;
        width: auto;
        background-color: #eee7db;
        /* tan*/
        float: none;
        font-size: 95%
        }
    .col-one {
        width: 34%;
        margin: 1em 0 0 0;
        padding: 0 1% 1em 0;
        border-right: 2px solid #000;
        float: left;
        background-color: #eee7db;
        /* tan*/
        }
    .col-two {
        width: 26%;
        margin: 1em 0 0 0;
        padding: 0 0 1em 1%;
        float: right;
        background-color: #eee7db;
        /* tan*/
        }
    .agenda, .agenda a:link, .agenda a:visited {
        font-variant: small-caps;
        font-weight: 800;
        color: #0f5743;
        /* green */
        font-size: 110%;
        margin: 1em 0 0 0;
        padding: 0;
        line-height: 1em
        }
    .agenda a:active, .agenda a:hover {
        color: #d77804;
        /* dark orange */
        }
    .officials {
        font-variant: small-caps;
        font-weight: bold;
        color: #0f5743;
        /* green */
        font-size: 90%;
        line-height: 1.2em;
        margin: 1em 0 0 0;
        padding: 0
        }
    .email a:link, .email a:visited {
        color: #069;
        font-weight: 500;
        font-size: 75%
        }
    .left {
        visibility: visible;
        float: left;
        margin: 0.8em 2.2em 1.5em 0.4em;
        padding: 0;
        width: 14em
        }
    .nav {
        visibility: visible;
        background: none;
        margin: 0;
        padding: 0 0.1em 0 0.2em;
        display: block;
        border-radius: 2em
        }
    .nav a:link, .nav a:visited {
        color: #fff;
        background-color: #0f5743;
        /* green */
        text-align: left;
        text-decoration: none;
        font-size: 90%;
        font-weight: 700;
        display: block;
        line-height: 1em;
        border-bottom: 3px solid #f3b505;
        /* light orange */
        border-radius: 0.2em;
        padding: 0.5em 0 0.5em 0.5em;
        margin: 0 0 0.5em 0
        }
    .nav a:first-child {
        border-radius: 0.8em 0.8em 0.2em 0.2em;
        border-top: 3px solid #f3b505;
        /* light orange */
        }
    .nav a:last-child {
        border-radius: 0.2em 0.2em 0.8em 0.8em
        }
    .nav a:active, .nav a:hover {
        color: #fff;
        background-color: #f3b505;
        /* light orange */
        display: block;
        border-bottom: 3px solid #0f5743;
        /* green */
        }
    .img {
        width: 85%
        }
    .img {
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgRight {
        float: right;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgLeft {
        float: left;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgCenter {
        float: none;
        text-align: center;
        border: 2px solid #0f5743;
        /* green */
        }
    #footer {
        margin: 0 auto 0 auto;
        padding: 0.6em 0 1.6em 0;
        background-color: #0f5743;
        /* green to match banner bkgd */
        }
    .footer, .footer a:link, .footer a:visited {
        font-size: 85%;
        font-weight: 700
        }
    .byline {
        font-weight: 700;
        font-size: 0.65em
        }
    }
/****************************************************************************************************************************/
/********************************************** small tablet styles **********************************************/
@media only screen and (min-width: 481px) and (max-width: 720px) {
    h1, h2 {
        font-size: 110%;
        margin: 0.5em 0;
        padding: 0;
        line-height: 1.2em
        }
    h3, h4, h5, h6 {
        font-size: 110%;
        margin: 0.5em;
        padding: 0;
        line-height: 1.6em
        }
    .imgHide {
        visibility: visible
        }
    .img {
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgRight {
        float: right;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgLeft {
        float: left;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgCenter {
        float: none;
        text-align: center;
        border: 2px solid #0f5743;
        /* green */
        }
    .container {
        width: 100%;
        margin: 0 auto;
        position: relative;
        text-align: left;
        background-image: none;
        background-color: #0f5743;
        /* green to match banner bkgd */
        }
    .banner {
        height: 100%;
        width: 100%;
        min-height: 160px;
        max-height: 224px;
        margin: 0 auto;
        padding: 0;
        background-image: url(../images/banner-tablet.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 0
        }
    .content {
        margin: 0 auto;
        padding: 0;
        width: auto;
        background-color: #eee7db;
        /* tan*/
        border-bottom: 2px solid #f3b505;
        /* light orange */
        }
    .main {
        width: auto;
        margin: 0 auto;
        padding: auto;
        background-color: #eee7db;
        /* tan*/
        min-height: 15em;
        border-bottom: 0
        }
    .col-one {
        width: 98%;
        margin: 0;
        padding: 0 0.5% 0.2em 0.5%;
        float: left;
        background-color: #eee7db;
        /* tan*/
        border-bottom: 2px solid #000;
        border-right: none
        }
    .col-two {
        width: 98%;
        margin: 0.2em 0 0 0;
        padding: 0 0.5% 0.2em 0.5%;
        float: left;
        background-color: #eee7db;
        /* tan*/
        }
    .agenda, .agenda a:link, .agenda a:visited {
        font-variant: small-caps;
        font-weight: 800;
        color: #0f5743;
        /* green */
        font-size: 110%;
        margin: 1em 0 0 0;
        padding: 0;
        line-height: 1em
        }
    .agenda a:active, .agenda a:hover {
        color: #d77804;
        /* dark orange */
        }
    .officials {
        font-variant: small-caps;
        font-weight: bold;
        color: #0f5743;
        /* green */
        font-size: 90%;
        line-height: 1.2em;
        margin: 1em 0 0 0;
        padding: 0
        }
    .email a:link, .email a:visited {
        color: #069;
        font-weight: 500;
        font-size: 100%
        }
    .calendar {
        float: none;
        display: block;
        margin: 1em 0;
        padding: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain
        }
    h2.calendar {
        font-size: 100%;
        padding: 0 0 0 1em;
        margin: 0
        }
    #footer {
        margin: 0 auto;
        padding: 0.4em 0 1.6em 0;
        background-color: #0f5743;
        /* green to match banner bkgd */
        border-top: 0
        }
    .footer, .footer a:link, .footer a:visited {
        font-size: 85%;
        font-weight: 700
        }
    .disclaimer, .disclaimer a:link, .disclaimer a:active, .disclaimer a:visited {
        font-size: 90%;
        font-weight: bold;
        text-indent: 0;
        line-height: 1.5em;
        text-align: center;
        margin: 0.3em 0;
        padding: 0;
        color: #eee7db;
        /* tan*/
        }
    .disclaimer a:hover, .disclaimer a:active {
        color: #d77804;
        /* dark orange */
        }
    .byline {
        font-weight: 700;
        font-size: 0.65em;
        line-height: 1.5em
        }
    /********* menu button links to nav at bottom of page ***********/
    a.menu {
        width: auto;
        min-height: 46px;
        background-image: url(../images/menu.png);
        background-repeat: no-repeat;
        background-position: center;
        padding: auto;
        margin: auto;
        display: block;
        visibility: visible;
        z-index: 1000
        }
    a.menu:hover, a.menu:focus {
        background-position: center;
        background-image: url(../images/menu-hover.png);
        background-repeat: no-repeat;
        border-radius: 0.6em;
        width: 150px
        }
    /********** desktop nav is hidden */
    .left {
        display: none
        }
    .left-long {
        display: none
        }
    /********* mobile nav at bottom of page ***********************************/
    /**** block of links *****/
    #mobile_nav ul {
        list-style: none;
        padding: 0 0 0.4em 0;
        margin: 1em 0 0 0;
        visibility: visible;
        display: block
        }
    /**** each link *****/
    #mobile_nav li a {
        color: #f2f2f2;
        /* off white */
        background-color: #0f5743;
        /* green */
        display: block;
        width: auto;
        padding: 0.4em 0.5em 0.2em 0.5em;
        margin: 0.2em 1em 0.2em 0;
        text-align: center;
        text-decoration: none;
        font-weight: 700;
        font-size: 95%;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        line-height: 2em;
        height: 2em;
        border-top: 2px ridge #f2f2f2;
        /* off white */
        border-bottom: 2px solid #f3b505;
        /* light orange */
        border-radius: 1em
        }
    #mobile_nav li a:hover, #mobile_nav li a:focus {
        color: #0e6d41;
        /* green */
        background-color: #f3b505;
        /* light orange */
        border-top: 2px ridge #0f5743;
        /* green */
        border-bottom: 2px solid #0f5743;
        /* green */
        }
    }
/****************************************************************************************************************************/
/****************************************************** mobile styles ***************************************/
@media only screen and (max-width: 480px) {
    h1, h2 {
        font-size: 120%;
        margin: 0.5em 0;
        padding: 0;
        line-height: 1.3em
        }
    h3, h4, h5, h6 {
        font-size: 100%;
        margin: 0.5em;
        padding: 0;
        line-height: 1.3em
        }
    p {
        font-size: 100%;
        line-height: 1.3em
        }
    .imgMap {
        display: none
        }
    .img {
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgRight {
        float: right;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgLeft {
        float: left;
        margin: 1em;
        width: 95%;
        border: 2px solid #0f5743;
        /* green */
        }
    .imgCenter {
        float: none;
        text-align: center;
        border: 2px solid #0f5743;
        /* green */
        }
    .container {
        width: 100%;
        margin: 0 auto;
        position: relative;
        text-align: left;
        background-image: none;
        background-color: #0f5743;
        /* green to match banner bkgd */
        }
    .banner {
        height: auto;
        min-height: 120px;
        max-height: 200px;
        width: auto;
        margin: 0 auto;
        padding: 0;
        background-image: url(../images/banner-mobile.jpg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        z-index: 0
        }
    .content {
        margin: 0 auto;
        padding: 0;
        width: auto;
        background-color: #eee7db;
        /* tan*/
        border-bottom: 2px solid #f3b505;
        /* light orange */
        }
    .main {
        width: auto;
        margin: 0 auto;
        padding: auto 1em;
        background-color: #eee7db;
        /* tan*/
        min-height: 15em;
        border-bottom: 0
        }
    .col-one {
        width: 98%;
        margin: 1em 0 0 0;
        padding: 0 0.5% 0.2em 0.5%;
        float: left;
        background-color: #eee7db;
        /* tan*/
        border-bottom: 2px solid #000;
        border-right: none
        }
    .col-two {
        width: 98%;
        margin: 1em 0 0 0;
        padding: 0 0.5% 0.2em 0.5%;
        float: left;
        background-color: #eee7db;
        /* tan*/
        }
    .agenda, .agenda a:link, .agenda a:visited {
        font-variant: small-caps;
        font-weight: 800;
        color: #0f5743;
        /* green */
        font-size: 110%;
        margin: 1em 0 0 0;
        padding: 0;
        line-height: 1em
        }
    .agenda a:active, .agenda a:hover {
        color: #d77804;
        /* dark orange */
        }
    .officials {
        font-variant: small-caps;
        font-weight: bold;
        color: #0f5743;
        /* green */
        font-size: 80%;
        margin: 1em 0 0 0;
        padding: 0
        }
    .email a:link, .email a:visited {
        color: #069;
        font-weight: 500;
        font-size: 90%
        }
    .calendar {
        float: none;
        display: block;
        margin: 1em 0;
        padding: 0;
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain
        }
    h2.calendar {
        font-size: 80%;
        padding: 0 0 0 1em;
        margin: 0
        }
    #footer {
        margin: 0 auto;
        padding: 0.4em 0 1.6em 0;
        background-color: #0f5743;
        /* green to match banner bkgd */
        border-top: 0
        }
    .footer, .footer a:link, .footer a:visited {
        font-size: 85%;
        font-weight: 700
        }
    .disclaimer, .disclaimer a:link, .disclaimer a:active, .disclaimer a:visited {
        font-size: 90%;
        font-weight: bold;
        text-indent: 0;
        line-height: 1.5em;
        text-align: center;
        margin: 0.3em 0;
        padding: 0;
        color: #eee7db;
        /* tan*/
        }
    .disclaimer a:hover, .disclaimer a:active {
        color: #d77804;
        /* dark orange */
        }
    .byline {
        font-weight: 700;
        font-size: 0.65em;
        line-height: 1.5em
        }
    /********* menu button links to nav at bottom of page ***********************************************/
    a.menu {
        width: auto;
        min-height: 46px;
        background-image: url(../images/menu.png);
        background-repeat: no-repeat;
        background-position: center;
        padding: auto;
        margin: auto;
        display: block;
        visibility: visible;
        z-index: 1000
        }
    a.menu:hover, a.menu:focus {
        background-position: center;
        background-image: url(../images/menu-hover.png);
        background-repeat: no-repeat;
        border-radius: 0.6em;
        width: 150px
        }
    /********** desktop nav is hidden */
    .left {
        display: none
        }
    .left-long {
        display: none
        }
    /********* mobile nav at bottom of page *****/
    /**** block of links *****/
    #mobile_nav ul {
        list-style: none;
        padding: 0 0 0.4em 0;
        margin: 1em 0 0 0;
        visibility: visible;
        display: block
        }
    /**** each link *****/
    #mobile_nav li a {
        color: #f2f2f2;
        /* off white */
        background-color: #0f5743;
        /* green */
        display: block;
        padding: 0.2em 0 0.4em 0;
        margin: 0.3em 0.4em 0.3em -0.6em;
        text-align: center;
        text-decoration: none;
        font-weight: 800;
        font-size: 100%;
        font-variant: small-caps;
        letter-spacing: 0.1em;
        line-height: 2em;
        height: 2em;
        border-top: 2px ridge #f3b505;
        /* light orange */
        border-bottom: 2px solid #f3b505;
        /* light orange */
        border-radius: 1em
        }
    #mobile_nav li a:hover, #mobile_nav li a:focus {
        color: #0e6d41;
        /* green */
        background-color: #f3b505;
        /* light orange */
        border-top: 2px ridge #0f5743;
        /* green */
        /* dark green */
        }
    }