/* 
farmstyle.css Style Sheet for Hillside Farm Hawaii 
code in alphabetical order - more or less, anyway
*/

.aside {
  display: block;
  float: left;
  width: 12%;
  border-style: double;
  border-width: 6px;
  border-color: #009900;
  background-image: linear-gradient(to bottom, #7dbde8, #e6ffe6);
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;    
  border-bottom-left-radius: 1.5em;
  box-shadow: 15px 15px 15px -1px rgba(0,0,0,0.75);
  margin: auto;
  font-style: normal;
  color: #001a00;
  text-indent: 12px;
}

/* 
this banner is for the navigation div to always keep it at the top of the page
*/

.banner {
  position: absolute;
  margin: 0px auto;
  top: 10%;
  width: 85%;
}

body {
font-family: "times new roman", garamond, serif;
font-size: "120%";
color: #001a00;
background-image: linear-gradient(to bottom, #e6ffe6, #d3e9f8);
}

/*
adds a box around the body of the text - options are solid, dotted, dashed, double, groove, ridge, inset, outset, hidden
*/

body, bold {
  border-style: double;
  border-width: 6px;
  border-color: #009900;
  background-image: linear-gradient(to bottom, #e6ffe6, #d3e9f8);
  border-top-right-radius: 2em;   
  border-top-left-radius: 2em; 
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  box-shadow: 15px 15px 15px -1px rgba(0,0,0,0.75);
  margin: auto;
  padding: 8px 12px 8px 12px;
  text-indent: 12px;
}

/* text columns - hmm, tried it, didn't work will zero it out here and put it back in later if necessary */

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

 /* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
} 



/*
.column {
    float: left;
    width: 33.33%;
}

*/

/* clear floats after columns */
/*
.row after {
    content: "";
    display: table;
    clear: both;
}
*/

/* unequal text columns */
/*
.column2 {
    float: left;
}

.left, .right {
    width:25%;
}
.middle {
    width: 50%;
}
*/
/*end of text columns */


/* ****************************************  */
/*
menu button colors: 
#c0c0c0 silver color 
004d00 dark green  
00cc00 bright green
#a6a6a6 dark gray
*/

/* DROP DOWN AND DROP UP MENU BUTTONS */


.nestedbtn  {
    display: block;
    position: absolute;
}

/*   DROP UP BUTTON    */



/* DropUP Button (NOTE: DROP UP BUTTONS NOT WORKING */
.dropbtn {
    background-color: #3498db;
    background-image: linear-gradient(to bottom, #7dbde8, #e6ffe6);
    border-radius: 16px;
    border-width: 12px;
    font-family: "times new roman", garmond, serif;
    text-shadow: 5px 6px 3px #bfbfbf;
    text-decoration: none;
    box-shadow: 6px 11px 6px #666666;
    color:  #005900;  /* text color of button */
    font-size: 140%; strong;
    padding: 6px 12px;
    border: double #c0c0c0 3px;  /* c0c0c0 is silver */
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropup {
    position: relative;
    display: inline-block;
    margin-top:100%;
    border: double #e6ffe6 3px; opacity="60%"; /* match background or zero pix to be invisible */
}

/* Dropup Content (Hidden by Default) */
.dropup-content {
    display: none;
    position: absolute;
    font-size: 120%;
    font-family: "Times New Roman", Times, serif;
    background-color: #3498db;  /*med blue */
    background-image: linear-gradient(to bottom, #92c8ed, #e6ffe6); /*#92c8ed light clear blue, e6ffe6 very pale warm green i.e. borco color */
    border-radius: 25px;
    border: double #e6ffe6 3px; opacity="60%"; 
    text-align: center; 
    text-shadow: 5px 8px 5px #bfbfbf;
    text-decoration: none;
    box-shadow: 6px 11px 9px #666666; /* 666666 = dark gray */
    min-width: 210px;
    z-index: 1;
}

/* Links inside the dropup */
.dropup-content a {
    /* color: 001a00; */
    background-color: #3498db; /* 3498db = med blue */
    background-image: linear-gradient(to bottom, #92c8ed, #e6ffe6);    
    padding: 10px 4px;
    border-radius: 25px;
    /* border: solid #006600 5px; */
    border: double #a6a6a6 2px;
    box-shadow: 6px 11px 9px #666666;
    font-family: "Times New Roman", Times, serif;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover   #00ff00 = very bright green  #e6ffe6 = borco green, 00cc00 = medium green  c0c0c0 = silver */

.dropup-content a:hover {background-color: #e6ffe6; background-image: linear-gradient(to bottom, #e6ffe6, #00ff00); border: solid #c0c0c0 4px; }

/* Show the dropup menu on hover */
.dropup:hover .dropup-content {
    display: block;
    border: double #c0c0c0 3px; /* this is the outline around all the drop down buttons */
}

/* Change the background color of the dropup button when the dropup content is shown 
#3e8e41 = med dark green */
.dropup:hover .dropbtn {
    background-color: #3e8e41; 
}


/*   **************************************  */

/* Dropdown Button */
.dropbtn {
    background-color: #3498db;
    background-image: linear-gradient(to bottom, #7dbde8, #e6ffe6);
    border-radius: 16px;
    border-width: 12px;
    font-family: "times new roman", garmond, serif;
    text-shadow: 5px 6px 3px #bfbfbf;
    text-decoration: none;
    box-shadow: 6px 11px 6px #666666;
    color:  #005900;  /* text color of button */
    font-size: 140%; strong;
    padding: 6px 12px;
    border: double #c0c0c0 3px;  /* c0c0c0 is silver */
    cursor: pointer;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
    border: double #e6ffe6 0px;  /* match background or zero pix to be invisible */
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    font-size: 120%;
    font-family: "Times New Roman", Times, serif;
    background-color: #3498db;  /*med blue */
    background-image: linear-gradient(to bottom, #92c8ed, #e6ffe6); /*#92c8ed light clear blue, e6ffe6 very pale warm green i.e. borco color */
    border-radius: 25px;
    border: double #e6ffe6 3px; opacity="60%"; 
    text-align: center; 
    text-shadow: 5px 8px 5px #bfbfbf;
    text-decoration: none;
    box-shadow: 6px 11px 9px #666666; /* 666666 = dark gray */
    min-width: 210px;
    z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
    /* color: 001a00; */
    background-color: #3498db; /* 3498db = med blue */
    background-image: linear-gradient(to bottom, #92c8ed, #e6ffe6);    
    padding: 10px 4px;
    border-radius: 25px;
    /* border: solid #006600 5px; */
    border: double #a6a6a6 2px;
    box-shadow: 6px 11px 9px #666666;
    font-family: "Times New Roman", Times, serif;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover   #00ff00 = very bright green  #e6ffe6 = borco green, 00cc00 = medium green  c0c0c0 = silver */
.dropdown-content a:hover {background-color: #e6ffe6; background-image: linear-gradient(to bottom, #e6ffe6, #00ff00); border: solid #c0c0c0 4px; }

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
    border: double #c0c0c0 3px; /* this is the outline around all the drop down buttons */
}

/* Change the background color of the dropdown button when the dropdown content is shown 
#3e8e41 = med dark green */
.dropdown:hover .dropbtn {
    background-color: #3e8e41; 
}



/*CONTENT (MOSTLY TEXT) ALIGNMENT 
HTML for aligned content:
<div class="center"></div>
<h2>text-align: center:</h2>
<p class="center">Text which will be centered, left, right,etc.</p>


Default value: 	left if direction is ltr, and right if direction is rtl
Inherited: 	yes
Animatable: no 
Version: 	CSS1
JavaScript syntax: 	object.style.textAlign="right"
*/

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
} 

.justify {
  text-align: justify;
} 






/*  clears the floats */
.clear {
 clear: both;
 }
 
 
/*  <div class="clearfix">  */ 

.clearfix {
  overflow: auto;
}


/* FADING IMAGES OF RENOVATION HTML "renofader" 
may need to write CSS on HTML pages?
<style> <div class="renofader">
renofader {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation: renofader 15s infinite;
}

@keyframes renofader {
  from {top: 0px;}
  to {top: 200px;}
}
</style>

*/

/*  WELL, THIS ISN'T WORKING YET
.renofader {
  position: relative;
  width: 800px;
  height: 600px;
  animation-name: renofader;
  animation-duration: 24s;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
 
  -webkit-position: relative;
  -webkit-width: 800px;
  -webkit-height: 600px;
  -webkit-animation-name: renofader;
  -webkit-animation-duration: 24s;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-delay: 0s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  
  -moz-position: relative;
  -moz-width: 800px;
  -moZ-height: 600px;
  -moz-animation-name: renofader;
  -moz-animation-duration: 24s;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-delay: 0s;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: alternate;
  
  -o-position: relative;
  -o-width: 800px;
  -o-height: 600px;
  -o-animation-name: renofader;
  -o-animation-duration: 24s;
  -o-animation-timing-function: ease-in-out;
  -o-animation-delay: 0s;
  -o-animation-iteration-count: infinite;
  -o-animation-direction: alternate;
}
  
@keyframes renofader {
  0%   {image: url('../../pages/renovation/house1.jpg');}
  25%  {image: url('../../pages/renovation/house2.jpg');}
  50%  {image: url('../../pages/renovation/house3.jpg');}
  75%  {image: url('../../pages/renovation/house4.jpg');}
  100% {image: url('../../pages/renovation/house5.jpg');}
}
*/

.fancycap {
    float: left;
    width: 0.7em;
    font-size: 400%;
    font-family: algerian, courier;
    line-height: 80%;
}

figure {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 40px;
  margin-right: 40px;
}

.figcaption {
  
  text-align: center;
  font-style: italic;
  font-size: smaller;
  text-indent: 0;
  border: thin silver solid;
  margin: 0.5em;
  padding: 0.5em;
}


footer {
 clear: both;
 }

/*fashioned off of 'herdbun' attributes */

.gallery {
  float: left; 
  margin: 10px;
  padding: 8px 8px 10px 8px;
  text-align: center;
  border: 2px solid #00cc00;
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;    
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}


/* HTML FOR TWO SIDE BY SIDE & CENTERED PICTURES

<div class=“center”>  ?? <div class="center; twinpic;">
<img class=“twinpic” src=“../../etc.jpg” alt="alt text here">
<img class=“twinpic” src=“../../etc.jpg” alt="alt text here">
</div>  
*/

.twinpic
{
display:inline-block;
margin-left:auto;
margin-right:auto;
width:100%;
height:auto;
}


/*
Font Sizes main headers with drop shadows
*/
h1 {
font-family: "times new roman", garamond, serif;
font-size: 225%;
color: #001a00;
text-shadow: 9px 6px #d9d9d9;
text-align: center;
}

/* 
main headers with no shadow 
*/

h1b {
font-family: "times new roman", garamond, serif;
font-size: 220%;
color: #001a00;
text-align: center;
}


h2 {
font-family: "times new roman", garamond, serif;
font-size: 190%;
color: #001a00;
text-align: center;
}

h3 {
font-family: "times new roman", garamond, serif;
font-size: 160%;
color: #001a00;
text-align: center;
}

h4 {
font-family: "times new roman", garamond, serif;
font-size: 140%;
color: #001a00;
text-align: center;
}

h5 {
font-family: "times new roman", garamond, serif;
font-size: 130%;
color: #001a00;
text-align: center;
}

h6 {
font-family: "times new roman", garamond, serif;
font-size: 120%;
color: #001a00;
text-align: center;
}

h7 {
font-family: "times new roman", garamond, serif;
font-size: 110%;
color: #001a00;
text-align: center;
}

hsmall {
font-family: "times new roman", garamond, serif;
font-size: 40%;
color: #001a00;
text-align: center;
}

/* default float is left, use < class="herdbunright"> for right side float */
.herdbun {
  float: left;
  margin: 10px; auto;
  padding: 14px 8px 15px 8px;
  max-width: 400px;
  min-height: 200px;
  text-align: center;
  border: 2px solid #008000;
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;    
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}


.herdbunright {
  float: right;
  margin: 10px; auto;
  padding: 14px 8px 15px 8px;
  max-width: 400px;
  min-height: 200px;
  text-align: center;
  border: 2px solid #008000;
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;    
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}























/* herdbun 2 - no floats - if it's just these blocks, they will all line up vertically */

.herdbun2 {
  float: none;
  margin: 10px;
  padding: 14px 8px 15px 8px;
  max-width: 400px;
  min-height: 200px;
  text-align: center;
  border: 2px solid #008000;
  border-top-right-radius: 1.5em;
  border-top-left-radius: 1.5em;    
  border-bottom-left-radius: 1.5em;
  border-bottom-right-radius: 1.5em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}







/* HR is no longer supported as HTML in some newer browsers */

hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset; double;
  border-width: 1px;
}


.smframe {
  float: left;
  margin: 8px;
  padding: 10px 6px 10px 8px;
  max-width: 200px;
  min-height: 200px;
  text-align: center;
  border: 2px solid #008000;
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;    
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}



.medframe {
  float: left;
  margin: 12px;
  padding: 10px 8px 10px 7px;
    max-width: 320px;
  min-height: 250px;
  text-align: center;
  border: 3px solid #008000;
  border-top-right-radius: 2em;
  border-top-left-radius: 2em;    
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
}


/* image details */
/* border style options - 
border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;
border-style: none;
border-style: hidden;
border-style: dotted dashed solid double; */

img {
  display:inline-block;
  border-style: double;
  border-width: 6px;
  border-color: #008000;
  /* padding: 2px; */
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
  border-top-right-radius: 2em;
  border-top-left-radius: 2em;    
  border-bottom-left-radius: 2em;
  border-bottom-right-radius: 2em;
  box-shadow: 15px 15px 15px -1px rgba(0,0,0,0.75);
  margin: auto;
  text-indent: 12px;
  text-align: center; 
}

/*  HTML for various images
<img src="" class="image1">
<img src="" class="image2">

in css file you can define

.image1
{
width:200px;
height:200px;
}
.image2
{
width:300px;
height:300px;
}

*/

/* HTML for img2  <img src="put URL here" class="img2" */

.img2 {
  padding: 16px 8px 8px 8px;
  box-shadow: 12px 12px 12px -1px rgba(0,0,0,0.75);
  margin: auto;
  text-indent: 12px;
  text-align: center; 
}


.img3 {
  display:inline-block;
  border-style: none;
  border-width: 0px;
  border-color: #008000;
  padding: 3px;  
  background-image: linear-gradient(to bottom, #d3e9f8, #e6ffe6);
  border-top-right-radius: 0em;
  border-top-left-radius: 0em;    
  border-bottom-left-radius: 0em;
  border-bottom-right-radius: 0em;
  box-shadow: 15px 15px 15px -1px rgba(0,0,0,0.75);  
  margin: auto;
  text-indent: 12px;
  text-align: center; 
}

*/ html  class="curveshadow top bottom"   /*
 .curveshadow {
    position: relative;
 }

    .curveshadow:before
    {
      position: absolute;
      z-index: -1;
      content: "";
      bottom: 25px;
      left: 10px;
      width: 50%;
      top: 80%;
      -webkit-box-shadow: 0 35px 20px #989898;
      -moz-box-shadow: 0 35px 20px #989898;
      box-shadow: 0 35px 20px #989898  ;
      -webkit-transform: rotate(-10deg);
      -moz-transform: rotate(-10deg);
      -o-transform: rotate(-10deg);
      -ms-transform: rotate(-10deg);
      transform: rotate(-10deg);
    }
    .curveshadow:after
    {
      -webkit-transform: rotate(10deg);
      -moz-transform: rotate(10deg);
      -o-transform: rotate(10deg);
      -ms-transform: rotate(10deg);
      transform: rotate(10deg);
      right: 10px;
      left: auto;
    }


/*CODE FOR SIDE BY SIDE IMAGES */

 /* Three image containers (use 25% for four, and 50% for two, etc) */
.column3 {
  float: left;
  width: 30%;
  padding: 3px;
}

.column4 {
  float: left;
  width: 24%;
  padding: 3px;
}


.column5 {
  float: left;
  width: 20%;
  padding: 3px;
}

.column7 {
  float: left;
  width: 10%;
  padding: 3px;
}





/* Clear floats after image containers */
.row::after {
  content: "";
  clear: both;
  display: table;
}  

/*
HTML for side by side pictures:
<div class="row">
  <div class="column">
    <img src="img_snow.jpg" alt="Snow" style="width:100%">
  </div>
  <div class="column">
    <img src="img_forest.jpg" alt="Forest" style="width:100%">
  </div>
  <div class="column">
    <img src="img_mountains.jpg" alt="Mountains" style="width:100%">
  </div>
</div>
*/

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 500px) {
  .column {
    width: 100%;
  }
} 








/*   CODE FOR MARQUEE that pauses on hover  */

      .marquee {
      margin: 0 auto;
      width: 600px;
      height: 30px;  
      white-space: nowrap;
      overflow: hidden;
      /* box-sizing: border-box; */
      position: relative;
      }
      .marquee:before, .marquee:after {
      position: absolute;
      top: 0;
      width: 50px;
      height: 30px;
      content: "";
      z-index: 1;
      }
      .marquee:before {
      left: 0;
      background: linear-gradient(to right, #ccc 10%, transparent 80%);
      }
      .marquee:after {
      right: 0;
      background: linear-gradient(to left, #ccc 10%, transparent 80%);
      }
      .marquee__content {
      width: 300%;
      display: flex;
      line-height: 30px;
      animation: marquee 10s linear infinite forwards;
      }
      .marquee__content:hover {
      animation-play-state: paused;
      }
      .list-inline {
      display: flex;
      justify-content: space-around;
      width: 33.33%;
      /* reset list */
      list-style: none;
      padding: 0;
      margin: 0;
      }
      @keyframes marquee {
      0% {
      transform: translateX(0);
      }
      100% {
      transform: translateX(-66.6%);
      }
      }
/*  HTML FOR MARQUEE WITH HOVER       

    <div class="marquee">
      <div class="marquee__content">
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
        <ul class="list-inline">
          <li>Text 1</li>
          <li>Text 2</li>
          <li>Text 3</li>
          <li>Text 4</li>
          <li>Text 5</li>
        </ul>
      </div>
      */

/* marquee that goes back and forth  */

        .bounce {
           /* height: 50px; */
            height: 250px;
            overflow: hidden;
            position: relative;
            /*
            background: #fefefe;
            color: #333;
            border: 1px solid #4a4a4a;*/
        }
        
        .bounce p {
            position: absolute;
            width: 100%;
            height: 100%;
            margin: 0;
            line-height: 50px;
            text-align: center;
            -moz-transform: translateX(50%);
            -webkit-transform: translateX(50%);
            transform: translateX(50%);
            -moz-animation: bouncing-text 20s linear infinite alternate;
            -webkit-animation: bouncing-text 20s linear infinite alternate;
            animation: bouncing-text 20s linear infinite alternate;
        }
        
        @-moz-keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
            }
        }
        
        @-webkit-keyframes bouncing-text {
            0% {
                -webkit-transform: translateX(50%);
            }
            100% {
                -webkit-transform: translateX(-50%);
            }
        }
        
        @keyframes bouncing-text {
            0% {
                -moz-transform: translateX(50%);
                -webkit-transform: translateX(50%);
                transform: translateX(50%);
            }
            100% {
                -moz-transform: translateX(-50%);
                -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
            }
        }


/* HTML for bouncy marquee:
  <div class="bounce">
        <p> Bouncy Marquee </p>
    </div>   */ 



/* NAVIGATION - UNORDERED LIST FOR MENUS, removed bullets and default padding 
Html can add a class or ID to each unordered list. 
There can be multiple classes on the same page but only one ID.  
Use "." for class and '#' in the HTML for ID.  

<ul class="nav">
   <li></li>
   <li></li>
</ul>

Sticky makes it scroll
up and not move off the page */

ul.nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

@media screen and (max-width: 600px) {
  ul.nav li.right, 
  ul.nav li {float: none;}
}







/*slightly larger than standard text for paragraphs*/
p {
font-size: 110%;
font-family: "Times New Roman", Times, serif;
color: #001a00;
padding: 2px;
text-indent: 0px;
text-align: left;
}

.nodecorate {
text-decoration: none;
}

/* REVERSED TEXT 
<span class="rev">add text here</span>   */

.rev {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    -o-transform:rotateY(180deg);
    -ms-transform:rotateY(180deg);
    transform:rotateY(180deg);
}







/* html code that goes with the sidebyimg code    
<img id="sideby" border="0" alt="alt text" src="/images/etc.jpg"/></a>
</a>`
*/

.sideby30 {
    float: right;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%; 
    clear: both;
}    



/* add in class="dropshadow" on HTML page to use this*/
.dropshadow {
text-shadow: 6px 6px 3px; 
color: #004d00 }

/* an attempt to center the nav bar */
.navigation {
  text-align:center;
  margin: 0px auto;
}


/* add in class="curveshadow" on HTML to use this */

.curveshadow
{
  position: relative;
}
.curveshadow:before, .curveshadow:after
{
  position: absolute;
  z-index: -1;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  -webkit-box-shadow: 0 35px 20px #989898;
  -moz-box-shadow: 0 35px 20px #989898;
  box-shadow: 0 35px 20px #989898  ;
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
.curveshadow:after
{
  -webkit-transform: rotate(10deg);
  -moz-transform: rotate(10deg);
  -o-transform: rotate(10deg);
  -ms-transform: rotate(10deg);
  transform: rotate(10deg);
  right: 10px;
  left: auto;
}



#navtop {
  position: absolute;
  width: 100%;
  height: 30px;
  z-index: 15;
  top: 50%;
  left: 50%;
  margin: -100px 0 0 -150px;
}

/*  add HTML <div id="navcenter"></div>  */


.nav li {
display:inline;
}

.section {
  display: block;
  float: right;
  margin: 0 1.5%;
  width: 77%;
}

/*CODE FOR SLIDESHOW  */



/*CODE FOR FAST SLIDESHOW  change every half second  put within HTML <style>*/


var slideIndex = 0;
showSlidesfast();

function showSlidesfast() {
  var i;
  var slides = document.getElementsByClassName("mySlidesfast");
  var dots = document.getElementsByClassName("dot");
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";  
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}    
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " active";
  setTimeout(showSlides, 500); // Change image every half second
}


/*END OF CODE FOR FAST SLIDE SHOW */



















* {box-sizing: border-box;}
body {font-family: Verdana, sans-serif;}
.mySlides {display: none;}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

/* Caption text */
.text {
  color: #000000;
  font-size: 20px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 1s ease;
}

.active {
  background-color: #717171;
}

/* Fading animation */
.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 22s;
  animation-name: fade;
  animation-duration: 22s;
}

/* 
@-webkit-keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}
*/

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .text {font-size: 11px}
}

/* END CODE FOR SLIDESHOW  */










/* START  CODE FOR TABLES     CODE FOR TABLES {border-collapse:collapse;border-spacing:0;margin:0px auto;}     CODE FOR TABLES  START  */

.table {
	width: 75%; border-collapse: collapse; border-spacing:0; margin:0px auto; padding: 14px; 
}
.zone{
	padding: 14px; 
	background-color: #bedef4; 
	font-family: "times new roman"; garamond; serif; 
	font-size: 120%;
	text-align: center; 
	color: #001a00; 
}
th {
	background-color: #12496d;
	padding: 14px; 
	color: White; 
	font-size: 130%;
	font-family: "times new roman"; garamond; serif; 
}
a:link.subline, .subline {color:gray;}
a:visited.subline {color:gray;}
a:hover.subline {color:gray;}
a:active.subline {color:gray;}


.separate {
	border-radius: 2px;
	border-spacing: 0;
	/* border-collapse: separate; */
	border-collapse: collapse;
    border: 2px solid green;
    padding: 14px;
}
.separate td, table.separate th {
	border-bottom: 2px solid Green;
	padding: 14px;
/*	border-right: 2px solid Green; */
}
.separate tr:last-child td:first-child {
	border-bottom-left-radius: 2px;
}
.separate tr:last-child td:last-child {
	border-bottom-right-radius: 2px;
}
.separate tr th:first-child, table.separate tr td:first-child {
	border-left: 2px solid Green;
}
.separate tr:first-child th, table.separate tr:first-child td {
	border-top: 2px solid Green;
}
.separate tr:first-child th:first-child, table.separate tr:first-child td:first-child {
	border-top-left-radius: 2px
}
.separate tr:first-child th:last-child, table.separate tr:first-child td:last-child {
	border-top-right-radius: 2px;	
}


/* END  CODE FOR TABLES     CODE FOR TABLES     CODE FOR TABLES  END  */


/* START CODE FOR TWO SIDE BY SIDE TABLES /*

table.smalltable {
border:3px solid #000000;
width:21.875em; /* 350px */ margin: 5px;
border-collapse: collapse } 

table.smalltable td {
font-size:100%;
padding: 5px;
text-align:left;
vertical-align:top; }

table.smalltable td:nth-child(odd) {font-weight:bold; width:30%; text-align: center; }
table.smalltable td:nth-child(even) {font-weight:normal; width:30%; text-align: center;}

@media only screen and (min-width : 768px) and (max-width : 959px) and (orientation:portrait) { .smalltable {float:none; width:100%; display:block; margin:0 auto; } }

/* HTML code for small table: 
<div class="box750">
<table class="smalltable floatleft"><!-- 350px --> 
   <tr>
    <td><img src="add url here" alt="name"><br>image name</td>
    <td class="exsmallfont" style="line-height:1.0; text-align:left;">add descriptive side text here</td>
   </tr>
</table>

<table class="smalltable floatleft"><!-- 350px --> 
   <tr>
    <td><img src="add url here" alt="name"><br>image name</td>
    <td class="exsmallfont" style="line-height:1.0; text-align:left;">add description side text here, up to paragraphs</td>
   </tr>
</table>
</div><!-- this div closes the box750 -->

*/


.box750 {
	width: 98%;
	margin:0 auto;
}



.table2 {
	width: 80%; border-collapse: collapse; border-spacing:0; margin:0px auto; 
}
.zone{
	padding: 4px; 
	font-family: "times new roman"; garamond; serif; 
	font-size: 120%;
	text-align: center; 
	color: 001a00; 
}
th {
	padding: 6px; 
	font-size: 130%;
	font-family: "times new roman"; garamond; serif; 
}





/* get HTML via JavaScript, dunno if it will work here */



};
include-html = function(cb) {
  var z, i, elmnt, file, xhttp;
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    file = elmnt.getAttribute("include-html");
    if (file) {
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
          elmnt.innerHTML = this.responseText;
          elmnt.removeAttribute("include-html");
          w3.includeHTML(cb);
        }
      }      
      xhttp.open("GET", file, true);
      xhttp.send();
      return;
    }
  }
  if (cb) cb();
};


/* end of javascript */

/*
  .showbox {
    float: left;
    margin: 4em 1em;
    border: 2px solid green;
    background-color: #fff;
    line-height: 60px;
    text-align: center;
  }



.showbox.scale:hover {
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  -ms-transform: scale(2);
  transform: scale(2);
}

.grow { 
    transition: all .2s ease-in-out; 
    
}

.grow:hover { 
    transform: scale(1.1); 
    
}

*/


/*   if the hashtags are replaced by periods then the list items have to have a tag of <class="menu-item"> on the HTML page  */
/* hash tags are for id="-"  and over ride the periods which are for class="-" */

/*<!-- Colors used:
#e699ff
white #ffffff
black  #000000
very dark green (text) #001a00
med bright blue (hover over link)#0000cc 
bright pink (active link)#ff0066  or #e699ff
bright green (active link) #00ff00
med dark green (visited links) #004d00
med dark green (text shadow)	#004d00
alternate text shadow #009900
med gray shadow (text shadow) #bfbfbf
bright green text shadow #00cc00
cold medium gray (shadows) #004d00
very light green (background)#f4fff4
another very light green #eafbea (65% opacity)
slightly darker green (for box backgrounds): #e6ffe6
medium green for box borders: #009900
bright red #e60000
bright blue #0000ff
royal purple  #9900cc
silver #c0c0c0
-->*/