/**
Theme Name: Botanic Gardens
Theme Description: Botanic Gardens
*/
body { background: #fff;
       font-size: 1em;
       color: #373d3f;
       margin: 0px;
      }

ul { list-style-image: url('/wp-content/uploads/images/arrow.png'); }

#thepage { top: 0px;
            width: 100%;
            height: auto;
            background-color: transparent;
            font-size: 1em;
            font-family: arial, verdana, sans-serif;
            margin-left: auto;
            margin-right: auto;
            /*border: 1px #000 solid;*/
         }

#pageheader { position: relative;
              top: 0px;
              left: 0px;
              max-width: 1200px;
              width: 100%;
              height: 112px;
              background: transparent;
            margin-left: auto;
            margin-right: auto;
           }

#logoimg { position: absolute; 
        top: 8px;
        left: 0px;
        width: 8%;
        background-color: transparent;
        padding: 0;
        cursor: pointer;
     }
#logoimg img { width: 100%; max-width: 95px; }
#logotxt { position: absolute; 
        top: 1px;
        left: 8%;
        max-width: 890px;
        width: 69%;
        height: auto;
        font-weight: bold;
        /*color: #788a36;*/
        background-color: transparent;
        padding-top: 10px;
        padding-left: 0.5%;
        cursor: pointer;
     }
#logosocial { position: absolute; 
        top: 0px;
        left: 94%; /*80%;*/
        max-width: 200px;
        width: 6%; /*20%;*/
        height: 75px;
        font-weight: bold;
        color: #788a36;
        background-color: transparent;
        padding-top: 5px;
     }
#logosocial ul { list-style: none; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; }
#logosocial li { float: left; width: 100%; }

.logosml { color: #000; font-size: 0.7em; letter-spacing: 2.8px; }
.logolrg { color: #4C9D2F; font-size: 1.4em; line-height: 1em; }
.logosp4 { letter-spacing: 2.6px; }
.logosp6 { letter-spacing: 3.8px; }

#mobnav { display: none; }

#navdiv { position: relative;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 40px;
          margin-left: auto;
          margin-right: auto;
          background-color: #4C9D2F;
          z-index:111;
          display: block;
       }

#nav { max-width: 1200px; width: 100%; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; z-index:111; }
#nav a { height: 32px; text-align: center; text-transform: uppercase; font-family: arial, verdana, sans-serif; font-weight: bold; font-size: 0.9em; display: block; margin: 0; padding: 8px 0px 0px 8px; }
#nav a { color: #ffffff; background: transparent; text-decoration: none; }
#nav a:hover { color: #ffffff; background: #9B562B; }

#nav ul { position:relative; list-style: none; margin: 0; padding: 0; top: 0px; left: 0px; width: 100%; }
#nav li { position:relative; float: left; width: 12.5%; background: #4C9D2F; }

#nav ul ul { position: absolute; list-style: none; margin: 0; padding: 0; top: 40px; left: 0px; width: 150%; }
#nav ul ul li { position:relative; width: 110%; float: none; background: #4C9D2F; border-top: 1px #dddddd solid; border-bottom: 0px; }
#nav ul ul li a { text-align: left; }

#nav ul ul ul { position: absolute; list-style: none; margin: 0; padding: 0; top: 0px; left: 100%; width: 100%; }
#nav ul ul ul li { position:relative; width: 100%; float: none; background: #4C9D2F; width: 100%; border: 1px #dddddd solid; border-top: 0px; }
#nav ul ul ul li a { text-align: left; }

div#nav ul ul, div#nav ul li:hover ul ul, div#nav ul ul ul, div#nav ul ul li:hover ul ul { display: none; }
div#nav ul li:hover ul, div#nav ul ul li:hover ul, div#nav ul ul li:hover ul, div#nav ul ul ul li:hover ul { display: block; z-index:100; }


#subnav { position: relative;
          top: 0px;
          left: 0px;
          width: 100%;
          height: auto;
          margin-left: auto;
          margin-right: auto;
          background: transparent;
          z-index:111;
          display: block;
       }

#subnav ul { position:relative; list-style: none; margin: 0; padding: 0; top: 0px; left: 0px; width: 100%; }
#subnav li { position:relative; width: 100%; }

#subnav ul li a { height: 24px; font-weight: bold; font-size: 0.9em; display: block; margin: 0; padding: 6px 0px 0px 8px; }
#subnav ul li a { color: #000; text-decoration: none; border-bottom: 1px #4C9D2F solid; background: rgba(76,157,47,0.02); }
#subnav ul li a:hover { color: #000; background: rgba(155,86,43,0.3); border-bottom: 1px #fff solid; }

#subnav ul li ul li a { padding: 6px 0px 0px 22px; }
#subnav ul li ul li a { background: rgba(76,157,47,0.1); }
#subnav ul li ul li a:hover { color: #000; background: rgba(155,86,43,0.6); }

#homesplash { position: relative;
              top: 0px;
              left: 0px;
              width: 99.8%;
              /*max-width: 1200px;*/
              height: 600px;
              background: #8ca17f url('/wp-content/uploads/images/escslider/home.jpg') no-repeat;
              background-size: 100% 100%;
              border: 1px #dddddd solid;
              margin-left: auto;
              margin-right: auto;
              overflow: hidden;
          }

/* slider start */

#homeslides { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px; margin: 0px; background: transparent; overflow: hidden; }
#homeslides img { position: relative; left: 50%; display: block; min-height: 100%; min-width: 100%; width: auto; height: auto; max-width: none; max-height: none; transform: translateX(-50%); /*translate(-50%, -50%);*/ }

#homeslidenum { position: absolute;
               bottom: 26%;
               right: 1px;
               width: auto;
               height: auto;
               padding: 1%;
               background: transparent;
               z-index: 11;
               overflow: hidden;
             }

#slidenum ul { list-style: none; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; }
#slidenum li { list-style: none; float: left; width: 24px; padding: 0px; margin: 0px; background: transparent; }
#slidenum li a { width: 100%; width: 20px; cursor: pointer; background: rgba(35,31,32,0.8); font-size: 0.7em; color: #fff; padding: 6px; border: 1px #ffffff solid; }
#slidenum li a:hover { color: #00ff00; }
#slidenum li a:visited { color: #fff; }
#slidenum li a.activeslide { color: #00ff00; border: 1px #00ff00 solid; }

#homeslidehd { position: absolute;
             bottom: 1px;
             left: 1px;
             right: 1px;
             width: 100%;
             height: auto;
             font-size: 1.4em;
             color: #ffffff;
             padding: 2%;
             background: rgba(35,31,32,0.6);
             z-index: 11;
             text-align: center;
             overflow: hidden;
           }

.slidehd { font-family: arial, verdana; letter-spacing: 2px; font-size: 1.1em; padding: 10px; padding-left: 20px; display: none; background: transparent; }
.slideword { font-size: 0.9em; }

.homeslide { display: none; }

/* slider end */

#splash { position: relative; top: 0px; left: 0px; width: 99.8%; height: auto !important; height: 0px; padding-top: 18%; background-color: transparent; border-top: 1px #dddddd solid; border-left: 1px #dddddd solid; border-right: 1px #dddddd solid; }
#splash img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }

#contentpage { position: relative;
           top: 0px;
           left: 0px;
           width: 100%;
           height: 100%;
           background: transparent;
         }

#pagecontent { position: relative;
               top: 0px;
               left: 0px;
               display: table;
               width: 100%;
               max-width: 1200px;
               height: 300px;
               background-color: transparent;
               padding-top: 10px;
               margin-left: auto;
               margin-right: auto;
             }

#homepane { position: absolute;
            top: 0px;
            left: 0px;
             width: 100%;
             max-width: 1200px;
             height: 300px;
            background-color: transparent;
            padding-top: 4px;
            vertical-align: top;
            text-align: justify;
            font-size: 0.8em;
            font-family: arial, verdana, sans-serif;
           }

#singlepane { position: relative;
            top: 0px;
            left: 0px;
             width: 100%;
             max-width: 1200px;
             height: auto;
            background-color: transparent;
            padding-top: 4px;
            vertical-align: top;
            text-align: justify;
            font-size: 0.8em;
            font-family: arial, verdana, sans-serif;
           }

#leftpane { position: relative;
            top: 0px;
            left: 0px;
             width: 80%;
             max-width: 1000px;
             height: 300px;
            background-color: transparent;
            padding-top: 4px;
            vertical-align: top;
            text-align: justify;
            display: table-cell;
            font-size: 0.8em;
            font-family: arial, verdana, sans-serif;
           }

#rightpane { position: relative;
             top: 0px;
             left: 0px;
            width: 20%;
            max-width: 200px;
             height: 300px;
             background-color: transparent;
             padding-top: 0px;
             vertical-align: top;
             text-align: justify;
             display: table-cell;
             font-size: 0.8em;
             font-family: arial, verdana, sans-serif;
            }

.hometext { font-size: 1.2em;
            font-family: arial, verdana, sans-serif;
            text-align: justify;
            background: transparent;
            padding: 0px 20px 0px 20px;
          }

.lefttext { font-size: 1.2em;
            font-family: arial, verdana, sans-serif;
            text-align: justify;
            background: transparent;
            padding: 0px 10px 0px 20px;
          }

.righttext { font-size: 1.2em;
             font-family: arial, verdana, sans-serif;
             text-align: justify;
            padding: 19px 0px 0px 5px;
            background: transparent;
           }

.padfooter { position: relative;
             top: 0px;
             left: 0px;
             width: 100%;
             height: 10px;
             background-color: #fff;
           }

#footer { position: relative;
          top: 0px;
          left: 0px;
          width: 100%;
          height: 100%;
          color: #fff;
          background: #4C9D2F url('/wp-content/uploads/images/footer_bg.png') no-repeat;
          background-size: contain;
          border-bottom: 1px #333333 solid;
        }

.footnav { text-align: left;
           padding-top: 140px;
           padding-left: 4%;
           max-width: 1200px;
           margin-left: auto;
           margin-right: auto;
           background: transparent;
         }

.footnav ul { list-style: none; background: transparent; margin: 0px;  padding: 0px; display:inline-block; }
.footnav li { float: left; width: 33%; }
.footnav li b, .footnav li strong { font-size: 1.05em; font-weight: bold; color: #fff; }

.eurologo { width: auto; padding-right: 4%; background: #4C9D2F; display:inline-block; }

ul.imglists { width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; z-index: 11; }
li.imglist { float: left; width: 19%; height:120px; text-align: center; background: #00ff00; margin: 0; padding: 0px; border: 1px #000000 solid; }

#events { position: relative; top: 0px; left: 0px; width: 100%; height: 100%; padding: 0px; margin: 0px; background: transparent; overflow: hidden; }
.pagetext { position: absolute;
            bottom: 12%;
            right: 1px;
            width: auto;
            height: auto;
            padding: 1%;
            background: transparent;
            z-index: 11;
            overflow: hidden;
          }

#slidenum ul { list-style: none; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; }
#slidenum li { list-style: none; float: left; width: 24px; padding: 0px; margin: 0px; background: transparent; }
#slidenum li a { width: 100%; width: 20px; cursor: pointer; background: rgba(35,31,32,0.8); font-size: 0.7em; color: #fff; padding: 6px; border: 1px #ffffff solid; }
#slidenum li a:hover { color: #00ff00; }
#slidenum li a:visited { color: #fff; }
#slidenum li a.activeslide { color: #00ff00; border: 1px #00ff00 solid; }

.slidetext { position: absolute;
             bottom: 1px;
             left: 1px;
             right: 1px;
             width: 100%;
             height: auto;
             color: #ffffff;
             padding: 1%;
             background: rgba(35,31,32,0.6);
             z-index: 11;
             text-align: center;
             overflow: hidden;
           }

.slidehd { font-family: arial, verdana; font-size: 1.4em; letter-spacing: 2px; display: none; background: transparent; }
.slideword { font-size: 0.9em; }

.event { display: none; }

#homebox { position: relative;
           top: 0px;
           left: 0px;
           width: 100%;
           text-align: center;
           font-weight: bold;
           font-family: verdana, Arial;
           background: #ffffff;
           margin-left: auto;
           margin-right: auto;
         }

#homebox ul { width: 100%; list-style: none; background: transparent; margin: 0px;  padding: 0px; padding-bottom: 4px; display:inline-block; }
#homebox ul li { position: relative; float: left; width: 19.4%; height: 200px; margin: 0.2%; padding: 0px; list-style: none; cursor: pointer; background: rgba(76,157,47,1); border: 1px #000 solid; }
#homebox ul li:hover { background: rgba(76,157,47,0.8); border: 1px #000 solid; }
#homebox ul li .homeboximg { padding-top: 32px; width: 100%; height: 168px; overflow: hidden; }
#homebox ul li .homeboximg img { max-width: 100%; -moz-transition: all 0.6s; -webkit-transition: all 0.6s; transition: all 0.6s; }
#homebox ul li .homeboximg:hover img { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); transform: scale(1.4); }
#homebox ul li .homeboxhd { position: absolute; top: 0px; width: 100%; height: 30px; text-align: center; color: #fff; font-size: 1em; padding-top: 2px; }

.boxtxt { position: absolute;
          top: 1px;
          left: 1px;
          width: 100%;
          height: 76px;
          font-size: 0.8em;
          background: rgba(35,31,32,0.55);
          text-align: center;
          padding-top: 6px;
          /*
          text-shadow:
             3px 3px 0 #000,
            -1px -1px 0 #000,  
             1px -1px 0 #000,
            -1px 1px 0 #000,
             1px 1px 0 #000;
          */
      }
.boxtxt h2 { color: #ffffff; font-size: 1.4em; }

#zonetxt { display: none; }
#zonemap { position: relative;
           top: 0px;
           left: 0px;
           width: 100%;
           height: 100%;
           background: transparent;
           margin-bottom: 20px;
         }
#zone1 { position: absolute;
         top: 74%;
         left: 50%;
         width: 10%;
         height: 12%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         -webkit-transform: rotate(-40deg);
         -moz-transform: rotate(-40deg);
         -ms-transform: rotate(-40deg);
         -o-transform: rotate(-40deg);
         transform: rotate(-40deg);
         z-index: 11;
       }
#zone2 { position: absolute;
         top: 64%;
         left: 40%;
         width: 14%;
         height: 12%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         -webkit-transform: rotate(40deg);
         -moz-transform: rotate(40deg);
         -ms-transform: rotate(40deg);
         -o-transform: rotate(40deg);
         transform: rotate(40deg);
         z-index: 11;
       }
#zone3 { position: absolute;
         top: 56%;
         left: 40%;
         width: 20%;
         height: 12%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         -webkit-transform: rotate(44deg);
         -moz-transform: rotate(44deg);
         -ms-transform: rotate(44deg);
         -o-transform: rotate(44deg);
         transform: rotate(44deg);
         z-index: 10;
       }
#zone4 { position: absolute;
         top: 62%;
         left: 61%;
         width: 24%;
         height: 32%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         -webkit-transform: rotate(-40deg);
         -moz-transform: rotate(-40deg);
         -ms-transform: rotate(-40deg);
         -o-transform: rotate(-40deg);
         transform: rotate(-40deg);
         z-index: 10;
       }
#zone5 { position: absolute;
         top: 42%;
         left: 42%;
         width: 18%;
         height: 14%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         z-index: 11;
       }
#zone6 { position: absolute;
         top: 40%;
         left: 32%;
         width: 12%;
         height: 10%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         -webkit-transform: rotate(32deg);
         -moz-transform: rotate(32deg);
         -ms-transform: rotate(32deg);
         -o-transform: rotate(32deg);
         transform: rotate(32deg);
         z-index: 10;
       }
#zone7 { position: absolute;
         top: 20%;
         left: 48%;
         width: 14%;
         height: 22%;
         background: transparent;
         /*background: rgba(0,0,0,0.2);
         border: 1px #000000 dashed;*/
         z-index: 11;
       }
.popzones { width: 40%;
           height: auto;
           background-color: #ffffff;
	       text-align: left;
           z-index: 501;
           position: absolute;
           padding: 6px 6px 8px 6px;
           border: 1px #9a132c solid;
        }
.popzonelink { cursor: pointer; color: #0000ff; display: inline; }
.popzonelink:hover { color: #ff0000; }
.popzone img { width: 100%; }

.left {
    border: 0px;
    float: left;
    margin-top: 8px;
    margin-right: 15px;
    margin-bottom: 10px;
}
.right {
    border: 0px;
    float: left;
    margin-top: 8px;
    margin-left: 15px;
    margin-bottom: 10px;
}

#birdimal { width: 66%; height: auto; border: 4px #000000 double; }

.noStyleAccordion .ui-accordion-header, .noStyleAccordion .ui-accordion-content {
     padding: 0;
     background: none;
     border: none;
     outline: none;
}
.ui-state-focus { border: none; outline: none; }
.ui-accordion-header.ui-state-active { color: #000; background-color: #b2d3dc; }

#accordion { overflow: auto; width: 88%; margin-bottom: 20px; }
#accordion .ui-accordion-header { color: #fff; font-size: 1.1em; padding: 10px; margin: 2px; outline: none;  background: #4C9D2F url('/wp-content/uploads//images/downarrow.png') no-repeat; background-position: right 30px top 10px; cursor: pointer; }
#accordion .ui-accordion-header:hover { color: #fff; background: #9B562B url('/wp-content/uploads/images/downarrow.png') no-repeat; background-position: right 30px top 10px; }
#accordion .ui-accordion-content { padding: 6px; padding-left: 20px; border: 0px; font-size: 1em; }
#accordion .ui-accordion-content a { color: #0000ff; text-decoration: none; }
#accordion .ui-accordion-content a:visited { color: #0000ff; }
#accordion .ui-accordion-content a:hover { color: #ff0000; }
#accordion .ui-accordion-header.ui-state-active { color: #ffffff; background: #9B562B url('/wp-content/uploads//images/downarrow.png') no-repeat; background-position: right 30px top 10px; }
#accordion .ui-accordion-header.ui-state-active:hover { color: #000; background: #ccc url('/wp-content/uploads/images/uparrow.png') no-repeat; background-position: right 30px top 10px; }


/*.eventitem {  padding-top: 20px; border-bottom: 1px #bbbbbb solid; }*/
.eventitem { position: relative;
            top: 0px;
            left: 0px;
            width: 98%;
            padding: 10px;
            margin-bottom: 20px;
            height: auto;
            background: rgba(155,86,43,0.05); /* rgba(76,157,47, 0.05);*/
         }

/* start grid */

.grid { display: inline-block; }

.griditem {
  width: 48%;
  display: inline-block;
  vertical-align: top;
  background: rgba(238,244,245,0.4); /*#effbfb;*/
  text-align: justify;
}
.griditem:hover { background: rgba(238,244,245,0.8); /*#d7f5f6;*/ }

@supports (display:flex) {
  .grid {
    display: flex;
    flex-wrap: wrap;
    margin: -1em 0 1em -0.5em;
    justify-content: space-around;
  }

  .griditem {
    padding: 0px;
    max-width: 46%;
    width: 46%;
    margin: initial;
  }
}

@supports (display:grid) {
  .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46%, 1fr));
    grid-gap: 10px;
    margin-top: 12px;
  }

  .griditem {
    width: 100%;
    padding: initial;
    max-width: none;
  }
}

.pagenavitem { position: relative;
            top: 0px;
            left: 0px;
            width: 99%;
            margin-bottom: 12px;
            height: auto;
            display: table;
         }
.pagenavimg { position: relative;
           top: 0px;
           left: 0px;
           width: 20%;
           background-color: c;
           padding-top: 4px;
           vertical-align: top;
           text-align: justify;
           display: table-cell;
           }
.pagenavimg img { width: 100%; /*border: 1px #000 solid;*/ }
.pagenavdetail { position: relative;
           top: 0px;
           left: 0px;
           width: 77%;
           background: transparent;
           padding-left: 2%;
           padding-right: 1%;
           vertical-align: top;
           display: table-cell;
           font-size: 0.95em;
           }
.pagenavinfo { width: 88%; padding-right: 10px; font-weight: normal; }
.pagenavname { font-weight: bold; font-size: 1.1em; color: #f47b20; }

.pagenavitem ul { margin: 0px; padding: 0; top: 0px; left: 0px; }
.pagenavitem ul li { background: url('/wp-content/uploads/images/list_arrows.png') no-repeat 4px 2px transparent;
                     list-style-type: none;
                     margin: 0;
                     padding: 0px 0px 0px 18px;
                     vertical-align: middle;
                    }

/* end grid */

fieldset {
  font-family: arial;
  border: 0px;
  }
label {
  float:left;
  width:20%;
  margin-right:0.5em;
  text-align:right;
  font-family: arial;
  font-weight:bold;
  }
.frmele { clear: both; }

.formbox { width: 90%;
           margin-left: 2%;
           border-bottom: 1px #000000 solid;
           }

#flower, #fruit { width: 60%; }

.weeditem { position: relative;
            top: 0px;
            left: 0px;
            width: 100%;
            margin-bottom: 20px;
            height: auto;
            display: table;
            background: rgba(76,157,47, 0.03);
         }
.weedimg { position: relative;
           top: 0px;
           left: 0px;
           width: 25%;
           background-color: transparent;
           padding: 0.5%;
           vertical-align: top;
           text-align: justify;
           display: table-cell;
           }
.weeddetail { position: relative;
           top: 0px;
           left: 0px;
           width: 73%;
           background-color: transparent;
           padding: 0.5%;
           vertical-align: top;
           text-align: justify;
           display: table-cell;
           font-size: 0.95em;
           font-family: arial, verdana, sans-serif;
           }
.weedfld { width: 11%; font-weight: bold; padding-right: 1%; float: left; }
.weedinfo { width: 88%; padding-bottom: 4px; float: left; }
.weedname { font-weight: bold; }
.moreweed { color: #0000ff; font-weight: bold; cursor: pointer; }
.moreweed:hover { color: #ff0000; }

ul.natweed { list-style: none; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; }
ul.natweed li { float: left; width: 30%; background: #eeeeee; text-align: center; }

.lefttext p:first-of-type { font-weight: bold; }

a.radio {
    border: 1px #aaaaaa solid;
    display: inline-block;
    margin-right: 10px;
    margin-bottom: 30px;
    font-size: 0.8em;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}
a.radio:hover { border: 1px #000000 solid; }
a.border { border: 1px #000000 solid; box-shadow: 0px 0px 4px 1px #000000; }

input[type=submit] { background: #3D7DCA;
                     border: 1px #000000 solid;
                     color: #ffffff;
                     font-weight: bold;
                     letter-spacing: 2px;
                     padding: 6px 20px 6px 20px;
                     margin-top: 20px;
                     cursor:pointer;
                     -webkit-border-radius: 5px;
                     border-radius: 5px;
                   }
input[type=submit]:hover { background: #E18533; }

.shape { width: 140px;
       height: 84px;
     }
.serate { width: 98px;
       height: 99px;
     }
.branch { width: 100px;
       height: 100px;
     }
.col { width: 80px;
       height: 60px;
     }
.atext { font-weight: bold; line-height: 2em; }

.red { color: #ffffff; background: #ff0000; }
.yellow { color: #000000; background: #ffff00; }
.orange { color: #000000; background: #ffa500; }
.black { color: #ffffff; background: #000000; }
.blue { color: #ffffff; background: #0000ff; }
.purple { color: #ffffff; background: #8a2be2; }
.pink { color: #ffffff; background: #ff69b4; }
.green { color: #ffffff; background: #008000; }
.brown { color: #ffffff; background: #a52a2a; }
.white { color: #000000; background: #ffffff; border: 1px #000000 solid; }

.navpg { width:100%; text-align:center; margin-top: 40px; }
.pgnav { border: 1px #4C9D2F solid; padding: 8px; color: #4C9D2F; margin-right: 4px; font-weight: bold; cursor: pointer; display: inline-block; }
.pgnav:hover { background: #4C9D2F; color: #fff; }
.nonav { border: 1px #4C9D2F solid; background: #4C9D2F; color: #fff; padding: 8px; margin-right: 4px; font-weight: bold; cursor: initial; }

.evsocial { position: relative; text-align: right; left: 0px; width: 100%; padding-right: 8px; background: transparent; }

b, strong { color: #373d3f; font-size: 1.1em; font-weight: bold; }

h1 { color: #4C9D2F;
     font-family: arial, verdana, sans-serif;
     font-size: 1.8em;
     display: block;
     margin-top: 0px;
     padding-top: 0px;
     padding-left: 5px;
     border-bottom: 1px #4a612b solid;
     margin-bottom: 10px;
     padding: 0px;
     line-height: 1.2em;
     letter-spacing: 1px;
     font-weight: bold;
   }

h2 { color: #4C9D2F;
     font-family: arial, verdana, sans-serif;
     font-size: 1.3em;
     margin: 0px;
     padding: 0px;
     letter-spacing: 1px;
     font-weight: bold;
   }

h3 { color: #4C9D2F;
     font-family: arial, verdana, sans-serif;
     font-size: 1.1em;
     margin: 0px;
     padding: 0px;
     letter-spacing: 1px;
     font-weight: bold;
   }

h4 { color: #4C9D2F;
     font-family: arial, verdana, sans-serif;
     font-size: 1.2em;
     margin: 0px;
     padding: 0px;
     padding-top: 4px;
     padding-left: 8px;
     letter-spacing: 1px;
     font-weight: bold;
     border-bottom: 1px #4C9D2F solid;
     background: rgba(76,157,47,0.1);
   }

#imglabel { color: #4C9D2F;
     font-family: arial, verdana, sans-serif;
     font-size: 1.3em;
     margin: 0px;
     padding: 0px;
     letter-spacing: 1px;
     font-weight: normal;
   }

h4 {color: #4C9D2F;
    font-family: arial, verdana, sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0px;
    padding: 0px;
    line-height: 1em;
   }

p { margin-top: 2px; padding-top: 0px; }

a:link { color: #0000ff; text-decoration: none; }
a:visited { color: #0000ff; }
a:hover { color: #ff0000; }

a.btn { background: #3D7DCA;
       border: 1px #000000 solid;
       color: #ffffff;
       font-weight: bold;
       letter-spacing: 2px;
       padding: 6px 20px 6px 20px;
       margin-top: 20px;
       cursor:pointer;
       -webkit-border-radius: 5px;
       border-radius: 5px;
     }
a.btn:visited { color: #ffffff; }
a.btn:hover { color: #ffffff; background: #E18533; }

a.hdslide:link { color: #fff; text-decoration: none; }
a.hdslide:visited { color: #fff; }
a.hdslide:hover { color: #fff; text-decoration: underline; }

a.footer {    color: #fff;
              background-color: transparent;
              font-size: 1em;
              font-family: arial, verdana, sans-serif;
              text-decoration: underline;
            }
a.footer:visited { color: #fff; }
a.footer:hover { color: #000; font-weight: bold; } 


@media screen and (max-width: 960px) {
   #homebox ul li { width: 32.4%; }
}

@media screen and (max-width: 800px) {
   body { font-size: 1.2em; }
   .logosml { font-size: 0.6em; }
   .logolrg { font-size: 1em; }

   #fooddrink ul li { width: 48.4%; }

   #thepage { min-height: 0px; }
   /*#logotxt { left: 14%; }*/
   #nav a { font-size: 0.75em; }
   .pagetext { bottom: 16%; } 

   .boxdesc { display: none; }

   #contentpage { min-height: 0px; }

   #pagecontent { min-height: 0px; }
   #leftpane { position: relative; display: inline; float: none; width: 100%; min-height: 0px; clear: both; }
   #rightpane { position: relative; display: inline; float: none; width: 100%; min-height: 0px; top: 20px; clear: both; }
   .lefttext { padding-left:4px; padding-right: 4px; }

   #thissubnav { display: none; }

   #birdimal { width: 98%; height: auto; border: 2px #000000 double; }

   .weeditem { display: block; }
   .weedimg { display: block; position: relative; width: 96%; }
   .weedimg img { width: 100%; }
   .weeddetail { display: block; position: relative; width: 96%; }
   .weedfld { float: none;  }
   .weedinfo {  float: none; display: block; width: 100%; position: relative; top: 0px; left: 0px; padding-bottom: 6px; }

   li.imglist { float: left; width: 50%; text-align: center; background: transparent; margin: 0; padding: 0px; padding-bottom: 10px; }
   li.imglist img { width: 95%; }

   ul.natweed { list-style: none; height: auto; background: transparent; margin-left: auto; margin-right: auto; padding: 0px; }
   ul.natweed li { float: none; width: 100%; }

   .slidehd { font-size: 0.9em; }
   .footnav { padding-right: 0px;}
    .eurologo { width: 90%; }
    .eurologo img { width: 98%; }
}

@media screen and (max-width: 640px) {
   .pagetext { display: none; } 
   #navdiv { top: 90px; display: none; height: auto; z-index: 999; }

   #nav { position:relative; background: #ffffff; }
   #nav ul { list-style: none; top: 0px; left: 0px; width: 100%; }
   #nav li { position:relative; float: none; width: 100%; border-bottom: 1px #999999 solid; }
   #nav a { display:block; padding-left: 10px; color:#ffffff; text-align: left; font-size: 0.75em; height:22px; }

   #nav ul ul { position: relative; top: 0px; left: 0px; width: 100%; }
   #nav ul ul li { float: none; background: #8da731; width: 100%; }
   #nav ul ul li a { padding-left: 30px; }
   /*#nav ul ul li a:hover { background: #9a132c; }*/

   #nav ul ul ul { position: relative; top: 0px; left: 0px; width: 100%; }
   #nav ul ul ul li { float: none; background: #8da731; width: 100%; }
   #nav ul ul ul li a { padding-left: 60px; }
   /*#nav ul ul ul li a:hover { background: #9a132c; }*/

   #pageheader { height: 90px; position: fixed; background: #fff; z-index: 999; }
   #splash { margin-top: 90px; }
   /* #contentpage { margin-top: 90px; } */

   #mobnav { position: absolute;
             top: 17px;
             right: 4%;
             width: 40px;
             height: 40px;
             background: transparent;
             cursor: pointer;
             display: block;
             z-index: 501;
           }

   #logotxt { left: 56px; width: auto; }

   #navdiv.shownavdiv { display: block; }

   #logosocial { display: none; }

   #zonetxt { display: block; }
   .maptext { display: none; }
   #zonemap { display: none; }

   ul.events li img { width: 100%; height: 120px; overflow: hidden; }

   h1 { font-size: 1.4em; }
   h2, h3 { font-size: 1em; }

	   .grid { display: block; }
   .griditem {
       width: 98%;
       display: block;
   }

   @supports (display:flex) {
     .grid {
        flex-wrap: nowrap;
     }

     .griditem {
       max-width: 98%;
       width: 98%;
     }
   }

   @supports (display:grid) {
     .grid {
       grid-template-columns: auto;
   }

   .pagenavitem { display: block; }
   .pagenavdetail { display: block; position: relative; width: 96%; }
   .pagenavinfo { width: 100%; position: relative; top: 0px; left: 0px; padding-bottom: 6px; }

   #footnav ul { width: 100%; }
   #footnav ul li { float: none; width: 100%; }

   .evsocial img { display: inline; }

   h2, h3 { font-weight: bold; }
}

@media screen and (max-width: 480px) {
   .slidehd { font-size: 0.8em; }
   .pagetext { display: none; }

   #logoimg { display: none; }
   #logotxt { left: 6px; width: auto; }
   #logosocial { display: none; }
   #homesplashtxt { display: none; }

   #homebox { display: none; }
   .boxtxt h2 { font-size: 1em; }
}