/* todo: 
 * using border with floatright, etc, causes error
 * presently commented out 
 * */

/* misc styling */
body{
        /* background-color: LightGray;   #DCDCDC */
        background-color: WhiteSmoke;   /* #F5F5F5 */
}

/* add external link symbol by using selector */
/*
a[target="_blank"]:after {
        content: " (external link)";
}
*/

/* emphasize <dt> */
dt {
        font-weight: bold;
}

/* don't underline ^ in ref links */
.ref{
        text-decoration: none;
}

/* float text around figures */
/* width: top, right, bottom, left */
.floatright {
        float: right;
        /* border: 10px, 0px, 10px, 15px; */
        width: 45.0%;
}

.floatright30 {
        float: right;
        /* border: 10px, 0px, 10px, 15px; */
        width: 30.0%;
}

/*
*/
.floatleft {
        float: left;
        /* border: 0px, 0px, 0px, 30px; */
        width: 30.0%;
}

/* support RWD */
/* # {
    box-sizing: border-box;
}
*/

/* some styling for images */
img {
        max-width: 100%;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
        border-radius: 10%;
}

figure {
        margin-left: 0px;
        margin-right: 0px;
        border: 5px solid #f0f0e6;
}

figcaption {
        text-align: center;
        font-weight: bold;
}
/* end styling for images */

.row::after {
          content: "";
          clear: both;
          display: table;
}

[class*="col-"] {
    float: left;
/*    padding: 15px; */
    border: 0px solid white;
}
.col-0 {width: 4.165%;}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

/* RWD styling */
/* W3C says breakpoints are 600px, 768px, 992px, 1200px */
/* phone (portait), tablet, laptop, desktop, large desktop */
/* when viewport is narrower than 500px, do this */
@media only screen and (max-width: 500px){ 
        .hideifphone{ display: none; }
        }

/* @media only screen and not (max-width: 500px){ 
        .isnotphone{ display: none; }
} */

@media only screen and (min-width: 500px){ 
        .hideifnotphone{ display: none; } 

}

/* legacy naming convention */
@media only screen and not (max-width: 500px){ 
        /* .hideifphone{ display: none; } */
}

/* for tablets and landscape samrt phones 501 - 768*/
/* when vp wider than 500 and narrower than 768*/
@media only screen and (min-width: 501px) and (max-width: 768px){ 
        .notablet{
                display: none;
        }
}

@media only screen and not ((min-width: 501px) and (max-width: 768px)){ 
        .istablet{
                display: none;
        }
}

/* for monitors wider than 768*/
@media only screen and (min-width: 768px){ 
        .nomonitor{
                display: none;
        }
}

@media only screen and not (min-width: 768px){ 
        .ismonitor{
                display: none;
        }
}

/* some color sets 
#06 Outdoorsy & natural
    #2E4600
    #486B00
    #A2C523
    #7D4427

#07 Watery blue-green
    #021C1E
    #004445
    #2C7873
    #6FB98F

#21 Warm naturals
    #2E2300
    #6E6702
    #C05805
    #DB9501

 */
body {
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

h1,h2,h3,h4,h5,h6 {
        text-align: center;
}

/* create a class of left-aligned <hn> */
.left {
    text-align: left;
    }

hr {
        height: 1px;
        color: black;
        background-color: black;
}

/* empty top row is the nav_list*/
.nav_list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden; 
  background-color: #2E4600;
}

/* define default dropdown property */
.dropdown {
  float: left;
  overflow: hidden;
}

/* dropbtn is mostly like droptdown */
.dropdown .dropbtn {
  display: inline-block;
  border: none;
  outline: none;
  color: white;
  /* top right bottom left */
  padding: 5px 15px 5px 15px;
  background-color: inherit;
  font-family: inherit;
  font-size: 18px;
  text-decoration: none;
}

/* any button, on hover */
a:hover, .dropdown:hover .dropbtn {
  /* background-color: red; */
  /* background-color: #7E4427; */
  background-color: #A2C523;
  color: black;
}

.dropdown-content {
  display: none;
  position: absolute;
  /* background-color: #f9f9f9; */
  background-color: red;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* dropped down but not hovering */
/* same as inactive nav bar */
.dropdown-content a {
  float: none;
  /* border-color:  #2E4600;
  border-width: thick;
  border-style: solid; */
  color: black;
  color: white;
  /* background-color: #daa; */
  background-color: #333;
  padding: 12px 14px;
  padding: 5px 15px 5px 15px;
  /* padding: inherit; */
  text-decoration: none;
  display: block;
  text-align: left;
}

/* dropped down and hovering */
.dropdown-content a:hover {
  background-color: #ddd;
  background-color: #A2C523;
  /* border-color:  #2E4600;
  border-width: thick;
  border-style: solid; */
  color: white;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}