:root {
    /* colors */
    --mainframe: #106096; /* frame around main div */
    --bodybackgr: #bfdfef;
    --footbackgr: #f0cd8c;
    --navbackgr: #f2b84a;
    --headbackgr: #EEB951;

    --maincolor: #000000;
    --updcolor: #106096;
    --footcolor: #000000; /* 106096 d8d8d8 */

    --shadow: #f2b84a; /* similar or same as footer bkgrnd */

    --navborder: #a52a2a;
    --backborder: 1px solid var(--navbackgr);
    --debugbordr3X: 1px solid var(--navbackgr);

    /* sizes */
    --backheight: 50%;
    --backmax: 95vh;
    --backmin: 40vh; /* height of long wide pics */
    --logo-size: 7rem;
    --logobig-size: 48%;
    --line-length: 90%;
    --std-length: 90%;
    --foot-length: 80%;
    --back-length: 90%;
}
@media only screen and ((max-width: 479px) or (max-width: 719px)) {
    :root {
        --line-length: 97%;
        --std-length: 90%;
        --back-length: 80%;
    }
}

/* BASIC STRUCTURE & NAV */
body {
    background-color: #106096; /* makes a frame around main div */
        /* if the browser cannot handle var()s then
         * at least the body background will work */
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 100%;
    margin-top: 0;
    padding-top: 0;
}
* {
    margin-top: 0;
    padding-top: 0;
}
#maindiv {
    display: block;
    background-color: var(--bodybackgr);
    width: var(--line-length);
    margin: 5px auto;
    padding: 5px;
}
.stdmain {
    display: block;
    width: var(--std-length);
    margin: 5px auto;
}
.back-divs { /* no longer used - not deleted in case clients change their minds */
    display: block;
    width: var(--back-length);
    border: var(--backborder);
    height: var(--backheight);
    min-height: var(--backmin);
    /*max-height: var(--backmax);*/
    background-color: var(--bodybackgr); /* fallback if no image*/
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
    /*background-size: 100% auto; /* was 100% 100%; - fit whole width (auto height) */
    background-attachment:fixed;
    opacity: 100%;
    margin: 0 auto;
    text-shadow: 0 0 4px var(--shadow); /* shadow to 'outline' the text */
}
.back-divs img { /* useful for screen sizes */
    width: 92%;
    height: auto;
    padding: 0;
    /*max-height: var(--backmax);*/
    margin: 0 auto;
}
#back-home01, #back-farm02, #back-fish03, #back-train04, #back-reach05 { /* centers the divs */
    width: var(--back-length);
    max-width: 85vw;
    height: auto;
    min-height: auto;
    padding: 2rem;
    margin: 0 auto;
}

.botright2, .botright1 {
    background:none;
    box-shadow: none;
    position: fixed;
    right: 0;
    bottom: 0;
    width: 22px;
    height: 22px !important; /* override #navtop a */
    margin: 0.2rem;
    padding: 0.1rem;
    border: 2px dashed #050505;
    color: #050505;
    font-size: 28px;
    font-weight: 500;
    line-height: 100% !important; /* override #navtop a */
    text-align: center;
}
.botright1 {
    right: 2.5rem;
}
#navtop {
    width: var(--line-length);
    color: #000000;
    margin: 5px auto;
}
.navactive, .navshow {
    display: inline-block;
    background-color: var(--navbackgr);
    margin: 8px 2px;
    padding: 2px;
}
.navactive {
    border: solid 1px var(--navborder);
    font-weight: bold;
    color:darkblue;
}
.navshow {
    border: dashed 1px var(--navborder);
    color: #000000;
}
.navline {
    color: #0000ff;
}
#banner {
    display: block;   /*display: flex;*/
    width: var(--std-length);
    margin: 0 auto;
    margin-bottom: 10px;
}
#logopic, #head1, #logobigpic, #head2 {
    display: block;
    border: solid 1px var(--bodybackgr);
    margin: 5px auto;
    padding: 5px;
}
#logobigpic {
    width: var(--logobig-size);
    height: var(--logobig-size);
}
#logopic {
    width: var(--logo-size);
    height: var(--logo-size);
}
#head1, #head2 {
    width: auto;
    height: auto;
    border: none;
    overflow: auto;
}
footer {
    background-color: var(--footbackgr);
    color: var(--footcolor);
    width: var(--foot-length);
    margin: 0.3rem auto;
    padding: 0.3rem;
}
/* GALLERY */
.gallist, .gallist img {
    width: 94%;
    max-width: 96%;
}
/* FORM */
#NoRobot, #mailer {
    width: 80%;
    margin: 0.3rem auto;
    text-align: center;
}
#emlbutton, #emladr, #emlbut {
    background-color: var(--footbackgr);
    font-size: 2rem;
    padding: 0rem;
}
#emladr {
    line-height: 160%;
}
#emlbutton, #emlbut {
    padding: 0.4rem;
    color: #0000ff;
    font-weight: bold;
}
#emlbut {
    background-color: unset;
    border: unset;
    color: var(--maincolor)
    /*font-size: unset;*/
}
.darkgray {
    color: #a9a9a9; /* dark grey */
}
.litegray {
    color: #d3d3d3 !important; /* light grey */
}
.notosea { /* , #form2, #formx */
    display: none !important;
}
.tosea {
    display: unset !important;
}
#formx {
    /*display: none;*/
    background-color: grey;
}
.formthru {
    display: block;
    background-color:#f2b84a;
}
.labl {
    display: block;
    width: 30%;
    padding: 0.3rem;
    margin: 0.1rem;
    border: dashed 1px #808080;
}
.dark {
    background-color: #778899;
    color: black;
}

/* ELEMENTS */
hr {
    width: 75%;
    margin: 0 auto;
}
h1, h2, h3, h4 {
    display: block;
    padding: 0.7rem;
}
h4 {
    margin-bottom: 1px;
}
p {
    padding: 0.5rem
}
/* CLASSES */
.centers {
    text-align: center;
    margin: 0.1rem auto;
}
.updaily {
    background-color: var(--updcolor);
    /*border: 1px dashed blue;*/
    color:#f2b84a
}
.smalltext {
    font-size: 0.7rem !important;
}
.footnote1, .footnote2 {
    background-color: var(--mainframe);
    color: var(--footbackgr);
    font-size: 0.85rem;
    width: var(--foot-length);
    margin: 0.5rem auto;
}
.footnote2 {
    background-color: inherit;
    color: inherit;
    font-size: 1rem;
}
.obsoleted {
    background-color: #a9a9a9 !important;
    color: white !important;
    border: 1px dashed #a9a9a9;
}
.listing {
    width: 60%;
    #border: 1px dashed blue;
}
.listleft {
    display: inline-block;
    #color: darkblue;
    width: 57%;
    text-align: left;
}
.listright {
    display: inline-block;
    #color: darkblue;
    width: 37%;
    text-align: right;
    padding-right: 3px;
}

/* media - screen size related */

@media only screen and ((max-width: 479px) or (max-width: 719px)) {
    #maindiv {
        display: block;
        background-color: var(--bodybackgr);
        width: var(--line-length);
        margin: 5px auto;
        padding: 5px 0;
/*background-color: #bfdfef; /* same as bodybackgr */
/*        padding-left: 0;
        padding-right: 0;*/
    }
    #head1 {
        display: block;
        padding-bottom: 1rem;
        margin: 1rem auto;
    }
    #head2 {
        display: block;
        padding-top: 1rem;
        margin: 1rem auto;
    }
    .clicktext, .emlbutton {
        width: 96%;
        font-size: 2rem;
    }
    #emlbutton, #emladr, #emlbut {
        font-size: 1.5rem;
    }
    #NoRobot, #mailer, #emladrimg, #emlpic {
        display: block;
        width: 96%;
    }
    #banner,#logopic, #logobigpic { /* head1 has it's own margin & padding set for these screen sizes */
        margin: 0 auto;
        padding: 0;
    }
}
@media only screen and (max-width: 719px) {
    .listing {
        width: 96%;
        margin: 0 auto;
    }
    .back-divs {
        padding: 0;
        margin: 0 auto;
    }
    .back-divs img { /* useful for screen sizes */
        width: 92%;
        height: auto;
        padding: 0;
        margin: 0 auto;
    }
}
@media only screen and (max-width: 479px) {
    .listing, .listleft, .listright {
        width: 96%;
        margin: 0 auto;
    }
    .listright {
        margin-bottom: 2rem;
    }
    #head1 {
        padding-bottom: 2rem;
    }
    #head2 {
        padding-top: 2rem;
    }
}