:root {
    --bantrak-green: #006600;
    /*    --bantrak-green: red;*/
    --bantrak-yellow: #f9d716;    /*  from David email 8?
    /* --bantrak-yellow: #f1d410; */
    /*    --bantrak-yellow: blue;*/
    --bantrak-dues: $45;
}


/* used to make dues amount changeable in only one spot for entire site */

.dues::before {

    /*content: var(--dues);*/
    content: "45";

}

#menu,
#menu>ul {
    /*        reset rule makes content look the same in all browsers  */
    /* but gets rid of ALL indentations like for ordered lists */
    /*            margin: 40px;*/
    margin: 0;
    /*    padding: 10px 0;*/
}

header {
    /*        reset rule makes content look the same in all browsers  */
    /* but gets rid of ALL indentations like for ordered lists */
    margin: 0;
    padding: 0;
}

.gotoTop {
    display: inline;
    position: fixed;
    bottom: 1em;
    right: .5em;
    /*    background: #006600;*/
    border-radius: .5em;

}

.gotoTop a {
    text-decoration: none;
}

.gotoTop div {
    border-radius: .5em;
    border: 2px solid var(--bantrak-yellow, #f1d410);
    background: #006600;
    background: var(--bantrak-green, #006600);


}

body {
    background-image: url(images/greenSky.gif);
    /*    background-attachment: fixed ;  holds background still while scrolling, not very noticable for our background image*/
    color: #006600;
    color: var(--bantrak-green, #006600);
    margin-top: 0px;
    /*            padding-top: 10px;*/
}



header {
    /*            height: 175px;*/
    background-image: url("images/slogan_back_strip.jpg");
    /*             border-bottom: 4px solid #f1d410;*/
    /*            border-bottom: 4px groove #f1d410;*/
}

header * {
    display: inline-block;
    vertical-align: middle;
    /*    color: #f2d410;*/
    color: #f1d410;
    color: var(--bantrak-yellow, #f1d410);

}


#headimage {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

img.bannerlogo {
    height: 130px;
}

#menu {
    padding-top: 0px;
    /*            padding-bottom: 5px;*/
    background: #006600;
    background: var(--bantrak-green, #006600);
    /*            background-image: none;*/
    /*position: sticky;
    top: 0px;*/
}

#menu li {
    color: #f1d410;
    color: var(--bantrak-yellow, #f1d410);
    background: #006600;
    background: var(--bantrak-green, #006600);
    list-style-type: none;
}

#menu li:hover {
    background: #1f9b65;
    /*    filter: brightness(120%);*/
}

#menu>ul>li {
    /*            display: inline-block; */
    /* http://learnlayout.com/inline-block.html */
    float: left;
    position: relative;
    text-align: center;
    min-width: 70px;
    margin-right: 24px;
}

#menu>ul>li>ul {
    margin-left: 0;
    padding-left: 0
}

#menu>ul>li>ul>li {
    border-top: 4px ridge #f1d410;
    border-left: 4px ridge #f1d410;
    border-right: 4px ridge #f1d410;
    border-top: 4px ridge var(--bantrak-yellow, #f1d410);
    border-left: 4px ridge var(--bantrak-yellow, #f1d410);
    border-right: 4px ridge var(--bantrak-yellow, #f1d410);

}

#menu>ul>li>ul>li:last-of-type {
    border-bottom: 4px ridge #f1d410;
    border-bottom: 4px ridge var(--bantrak-yellow, #f1d410);
}

#menu a {
    color: #f1d410;
    color: var(--bantrak-yellow, #f1d410);
    padding: 10px 15px;
    display: block;
    text-decoration: none;
}


/*

#menu > ul > li:hover> a {
color: #f1d410;
}

#menu > ul > li > ul > li:hover> a {
color: #f1d410;
}
*/

#menu>ul {
    padding-left: 15px;
    background: #006600;
    background: var(--bantrak-green, #006600);
}

#menu li ul {
    position: absolute;
    z-index: 2;
    left: 0;
    top: 100%;
    display: none;
}

#menu li:hover ul {
    display: block;
    color:red;
}

#menu li:focus-visible ul {
    display: block;
    color:red;
}

#menu #Togglemenu {
    display: none;
}


/*large status*/

@media (min-width: 605px) {
    .smallonly {
        display: none;
    }
}


/* smaller header */

@media (max-width: 1100px) {
    .smallerheader {
        display: none;
    }
}


/*small status*/

@media (max-width: 604px) {
    #menu a {
        /*        color: red;*/
    }

    #menu li {
        /*        color: red;*/
    }

    #menu>ul>li,
    #menu>ul>a {
        /*        font-size: 150%;*/
    }

    #menu>ul>li {
        display: none;
        float: none;
    }

    #Togglemenu:checked~ul>li {
        display: block;
        float: none;
    }

    .largeonly {

        display: none;
    }

    article img:not(.emailImg) {
        display: none;
    }
    article video {
        display: none;
    }

    .articleImg p {
        display: none;

    }

    /*    a { font-size: 250%}*/
    header img.largeonly {
        display: none;
    }

    header {
        /*            height: 175px;*/
        background-image: none;
        background-color: #006600;
        background-color: var(--bantrak-green, #006600);
        /*        background-color: #1f9b65;*/
        /*             border-bottom: 4px solid #f1d410;*/
        /*            border-bottom: 4px groove #f1d410;*/
    }

    img.bannerlogo {
        height: 70px;
        margin-right: 20px;
    }
}

.toplink a {
    /*            font-size: 80%;*/
    text-decoration: none;
}

figure {
    display: inline-block;
    margin-left: 0px;
    margin-right: 0px;
}

figure img {
    max-width: 48%;
    height: auto;
    display: inline-block;
}

/*figcaption { position: absolute; display: inline-block; left: 10%; margin-bottom: 10px; background: white; padding: 5px;}*/


article {
    margin: auto;
    margin-top: 0px;
    padding: 0 40px;
    border-top: 4px ridge #f1d410;
    border-top: 4px ridge var(--bantrak-yellow, #f1d410);
    overflow: auto;
}

article hr {
    height: 10px;
    background: #006600;
    background: var(--bantrak-green, #006600);


}

/* 
article p { 
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
}
 */

body>article {
    font-size: 120%;
}

@media (max-width: 604px) {

    body>article {
        font-size: 100%;
    }
}

/*  W3C likes to have H1 elements at top level, that is inside <body> only, therefore style h1 inside and out of article   */

h1,
article h1 {
    font-size: 250%;
    font-family: Helvetica, Arial, "Luxi Sans", sans-serif;
    text-shadow: 2px 2px 1px #f1d410;
    text-shadow: 2px 2px 1px var(--bantrak-yellow, #f1d410);

    text-align: center;

    /*            margin-bottom: 0px;*/
}

/*jazz up the first h1 a little*/
/* maybe at a later date */
/*

article:first-of-type h1::before {
    content: "    \2297    ";
}

article:first-of-type h1::after {
    content: "   \2297    ";
}
*/

body>h1 {
    padding: 0 40px;

}

article h2 {
    font-size: 200%;
    font-family: Helvetica, Arial, "Luxi Sans", sans-serif;
    text-shadow: 2px 2px 1px #f1d410;
    text-shadow: 2px 2px 1px var(--bantrak-yellow, #f1d410);

    /*            margin-bottom: 0px;*/
}

article h3 {
    font-size: 150%;
    font-family: Helvetica, Arial, "Luxi Sans", sans-serif;
    text-shadow: 2px 2px 1px #f1d410;
    text-shadow: 2px 2px 1px var(--bantrak-yellow, #f1d410);
               margin-bottom: 0px;
}

@media (max-width: 604px) {
    article h1 {
        font-size: 150%;
    }

    article h2 {
        font-size: 150%;
    }

    article h3 {
        font-size: 150%;
    }
}

article img[align='left'] {
    margin-right: 50px;
}

h1.articleSubhead {
    text-shadow: none;
    margin-bottom: 0px;
}

h3.articleSubhead {
    margin-top: -10px;
    text-align: center;

}

article div {
    padding: 10px;
}

article>img {
    box-shadow: 5px 5px 5px #000;
}

img.centeredContent {
    display: block;
    box-shadow: 5px 5px 5px #000;
}

.centeredContent {
    text-align: center;
    margin: auto;
}

.articleImg {
    float: right;
    margin-left: 20px;
    /*            box-shadow: insert 2px 2px 5px #000;*/
    /*            margin-top: 30px;*/
    margin-bottom: 10px;
    box-shadow: 5px 5px 5px #000;
}


/*undo the characteristics due to .articleImg*/

article .emailImg {
    margin-left: 0;
    margin-bottom: 0;
    box-shadow: none;
    height: 25px;
    width: 25px;
}

.contact-table {
    /*    width: 100px;*/
    float: left;
    border: 0;
    padding-left: 70px;
    padding-bottom: 70px;
}

.contact-table a {
    text-decoration: none;
}

.contact-table .contact-name {
    /*    min-height: 140px;*/
    padding-bottom: 20px;
}

img.emailImg {
    height: 20px;
    width: 20px;
}


.note {
    color: #CC0000;
    font-style: italic;
    /*    padding-left: 50px;*/

}


/* used to duplicate look of original FAQ version */
.arrow ::marker {
    content: "\27A3  ";
    color: inherit;
}

/*align="center" border="0" cellpadding="2" cellspacing="0" width="80%"*/

.clearback {
    box-shadow: none;
}