/*Stylesheet copyright 2019 The Farr Homestead*/

/*********General styles***********/

@font-face{
 font-family: DroidSans;
 src: url(fonts/DroidSans.ttf);
}

*{
 margin: 0;
 padding: 0;
}

html{
 height: 100%;
}

body{
 /*Default font face for basic systems*/
 font-family: "Times New Roman", serif;
 height: 100%;
 display: flex;
 flex-direction: column;
}

header{
 color: #166b01;
 font-style: italic;
 background-color: white;
 border-bottom: 1px solid #e6e6e6;
}

header h1{
 font-weight: normal;
 font-size: 9vw;
 text-align: center;
 margin-top: 6vw;
}

header h2{
 font-weight: normal;
 font-size: 2.8vw;
 text-align: center;
 white-space: nowrap;
 margin-bottom: 20px;
}

/*Hide secondary header on small screens*/
@media(max-width: 699px){
 header h2{
  display: none;
 } 
 header h1{
  margin-bottom: 10px;
 }
}

/*Set up large screen header display*/
@media(min-width: 700px){
 header{
  background: url('pics/header-dark.jpg');
  font-size: 40px;
  color: white;
  padding-left: 45px;
  min-height: 200px;
  max-height: 200px;
 }
 header h1{
  font-size: 45px;
  color: #fefff6;
  text-align: left;
  margin-top: 60px;
 }
 header h2{
  color: white;
  text-align: left;
  font-size: 19px;
  margin-top: 4px;
 }
}

/*adjust margins on  header*/
@media(min-width: 450px) and (max-width: 699px){
 header h1{
  margin-top: 3vw;
 }
}

/*Set up dropdown menus*/

nav{
 height: auto;
 box-shadow: 0 4px 5px -5px black;
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 color: #166b01;
 padding: 4px;
}

nav > a, .dropdown-button{
 color: #166b01;
 text-decoration: none;
 border: 1px solid #e1e1e1;
 padding: 5px;
 border-radius: 4px;
 align-self: flex-start;
 cursor: pointer;
}

/*change menubar display on large screens*/
@media(min-width: 700px){
 nav{
  justify-content: center;
 }
 nav > a, .dropdown-button{
  margin-left: 1.57vw;
 }
}

@media(min-width: 780px){
 nav{
  justify-content: left;
 }
 /*give buttons a hover effect; could change this to @media handheld funtion?*/
 nav > a:hover, .dropdown-button:hover{
  background: linear-gradient(to top, #eaeaea, transparent);
  color: #166b01;
 }
}

.dropdown{
 display: none;
 width: 100%;
 height: auto;
 overflow-y: scroll;
 overflow-x: hidden;
 color: #166b01;
 background-color: white;
 box-shadow: 1px 1px 1px gray;
 background-image: linear-gradient(to top, #f9f9f9, transparent);
 cursor: initial;	/*clear cursor from button*/
 position: absolute;
}

.selected{
 border: none;
}

.selected:hover{
 background: white;
}

.dropdown  a:hover, .dropdown  a:active{
 text-decoration: underline;
}

nav > a.selected{
 border: 1px solid #e1e1e1;
 background-color: #f2f2f2;
 background: linear-gradient(to top, #f2f2f2, transparent);
}

.dropdown a{
 text-decoration: none;
 color: inherit;
 display: list-item;
 margin-left: 16vw;
 margin-bottom: 5px;
 font-size: 16px;
 margin-top: 4px;
}

.dropdown h3{
 font-size: 18px;
 font-weight: normal;
 margin-left: 7vw;
}

/*Give smaller dropdown list more margin*/
.dropdown[dropdown-index="3"] a, .dropdown[dropdown-index="2"] a{
 margin-left: 26vw;
}

.dropdown[dropdown-index="3"] h3{
 margin-left: 26vw;
}

.dropdown hr{
 border: none;
 height: 1px;
 background-color: #c6c6c6;	/*fallback for browsers without gradient support*/
 background: linear-gradient(to right, #c6c6c6, transparent);
 margin-left: 5.5vw;
}

/*set up extra margin for line*/
.dropdown[dropdown-index="3"] hr{
 margin-left: 25vw;
 max-width: 210px;
}

/*Hide extra links on small screens*/

@media(max-width: 649px){
 a[link-name="orchard"]{
  display: none;
 }
}

@media(max-width: 411px){
 /*Hide 'Birds & Eggs' dropdown*/
 .dropdown-button[dropdown-index='2']{
  display: none;
 }
 /*Hide 'More Products' dropdown*/
 .dropdown-button[dropdown-index='3']{
  display: none;
 }
}

@media(min-width: 412px){
 /*Hide 'Our Products' dropdown*/
 .dropdown-button[dropdown-index='1']{
  display: none;
 }
 /*Show 'More Products' dropdown*/
 .dropdown-button[dropdown-index='3']{
  display: block;
 }
 /*Show 'Birds & Eggs' dropdown*/
 .dropdown-button[dropdown-index='2']{
  display: block;
 }
}

@media(min-width: 535px){
 /*Hide 'More Products' dropdown*/
 .dropdown-button[dropdown-index='3']{
  display: none;
 }
 /*Show seed and produce links*/
 nav > a[link-name="seed"], nav > a[link-name="produce"]{
  display: block;
 }
}

/*Hide links shown under 'Our Products' on smaller screens*/
@media(max-width: 534px){
 /*Hide seed and produce links*/
 nav > a[link-name="seed"], nav > a[link-name="produce"]{
  display: none;
 }
}

/*Take care of 'Birds & Eggs' on large screens*/
@media(max-width: 699px){
 nav > a[link-name="birds"]{
  display: none;
 }
}

@media(min-width: 700px){
 .dropdown-button[dropdown-index="2"]{
  display: none;
 }
 nav > a[link-name="birds"]{
  display: block;
 }
}

main{
 display: flex;
 flex: 1 0 auto;
}

aside{
 flex-grow: 1.09;
 border-right: 1px solid black;
 margin-right: 7vw;
 max-width: 200px;
 text-align: center;
}

/*hide sidebar on small screens and correct content display*/
@media(max-width: 929px){
 aside{
  display: none;
 }

 main{
  align-self: center;
 }
}

.availability-notice{
 color: #23800c;
 max-width: 700px;
 margin-bottom: 20px;
}

.availability-notice a{
 color: #23800c;
}
.availability-notice a:hover{
 text-decoration: none;
}

.gallery-separator{
 border: none;
 border-bottom: 1px solid #808080;
 max-width: 700px;
}

.gallery-viewbar{
 color: #575757;
 font-weight: bold;
 font-family: DroidSans, sans-serif;
}

.view-option object{
 width: 15px;
 height: auto;
 margin-left: 15px;
}

.view-option object:first-of-type{
 margin-left: 50px;
}

.view-option{
 cursor: pointer;
}

.view-option:hover, .selected-view-type{
 color: #707070;
}

.gallery-header{
 font-size: 39px;
 font-weight: normal;
 color: #166b01;
 margin-top: 20px;
 margin-bottom: 14px;
 max-width: 650px;
}

aside > img{
 margin-top: 1.9vw;
}

/*margin fixes for large screens*/

@media(min-width: 850px){
 aside{
  margin-right: 62px;
 }
}

@media(min-width: 1500px){
 aside > img{
  margin-top: 28px;
 }
}

aside > hr{
 border: none;
 border-top: 1px solid black;
 margin-top: 4px;
 margin-bottom: 4px;
}

aside > h3{
 color: #166b01;
 font-weight: normal;
 font-size: 24px;
}

.nav-fixed{
 margin-left: 52px;
 text-align: left;
 margin-top: 10px;
}
 
.nav-fixed ul{
 color: #166b01;
}

.sidebar-link{
 color: #166b01;
}

.sidebar-link:hover{
 color: #1ad00f;
 text-decoration: none; 
}

.sidebar-link[href="#top"]{
 margin-top: 19vh;
 position: fixed;
}


section{
 flex-grow: 2;
}

@media(max-width: 930px){
 section > picture > img{
  width: 90vw;
  height: auto;
 }
}

section > picture > img{
 margin-top: 6vw;
 margin-bottom: 3vw;
 max-width: 640px;
 max-height: 333px;
}

/*fix image margin on larger screens*/
@media(min-width: 850px){
 section > picture > img{
  margin-top: 62px;
  margin-bottom: 32px;
 }
}

section > p{
 width: 90vw;
 word-wrap: break-word;
 margin-top: 3px;
 margin-bottom: 3vw;
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 14.2px;
 max-width: 640px;
}

/*margins on large screens*/
@media(min-width: 1000px){
 section > p{
  margin-bottom: 32px;
 }
}

/*Scale the text on smaller screens but keep it from getting too large*/
@media(max-width: 300px){
 section > p{
  font-size: 5vw;
 }
}

/*Inline links*/
section > p > a{
 color: #558a2a;
}

section > p > a:hover{
 color: #1ad00f;
 text-decoration: none;
}

footer{
 background: #166b01;
 height: 100px;
 flex: 0 0 auto;
}

/*adjust height to keep image from overflowing*/
@media(max-width: 670px){
 footer{
  min-height: 15vw;
 }
}

.footer-links{
 padding-top: 2%;
 font-size: 15px;
}

/*Scale font size on smaller screens but not larger ones*/
@media(max-width: 252px){
 .footer-links{
  font-size: 6vw;
 }
} 

/*MOFGA page link logo-- maximum top margin is defined below*/
.footer-links > a > img{
 width: 15vw;
 height: auto;
 max-width: 60px;	/*keep the image from being stretched (size is 60 x 60px)*/
 border-radius: 2px;
 margin-top: 1%;
 margin-left: 5.5%;
 float: left;
}

@media(min-width: 670px){
 /*Max margin for logo*/
 .footer-links > a > img{
  margin-top: 2.7px;
 }
}

/*adjust margins on footer links for large screens*/
@media(min-width: 1000px){
 .footer-links{
  padding-top: 22px;
 }
 .footer-links > a > img{
  margin-left: 60px;
 }
}

.footer-links > a{
 color: white;
 margin-left: 13px;
 margin-right: 13px;
}

.footer-links > a:hover{
 text-decoration: none;
}

/*stop margin expansion on large screens*/
@media(max-width: 440px){
 .footer-links > a{
  margin-left: 3%;
  margin-right: 3%;
 }
}

.copy{
 font-size: 13px;
 margin-left: 2.5vw;
 margin-top: 5px;
 display: inline-block;
 color: white;
 width: 73vw;
 max-width: 386px;
}

/*copyright text margins*/
@media(min-width: 441px){
 .copy{
  margin-left: 38px;
 }
}


/*Scale text for small screens*/
@media(max-width: 295px){
 .copy{
  font-size: 4.5vw;
 }
}

.content-separator{
 border: none;
 border-bottom: 1px solid #166b01;
 margin-bottom: 6vw;
}

/*adjust bottom margin for screen size*/
@media(min-width: 500px){
 .content-separator{
  margin-bottom: 30px;
 }
}


/***********Form specific styles*********/

label{
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 5vw;
}

input, textarea{
 margin-top: 10px;
 margin-bottom: 10px;
 font-size: 5vw;
}

textarea{
 padding: 5px;
}

input[type="radio"]{
 margin-top: 6px;
 margin-bottom: 0px;
}

.num-chars{
 font-size: 4.5vw;
 font-style: italic;
 color: #166b01;
}

.verificationBox{
 font-size: 5vw;
 color: #166b01;
 margin-top: 15px;
 display: flow-root;
 margin-bottom: 40px;
}

.verificationOptions{
 float: left;
}

.verificationText{
 font-size: 5.5vw;
}

.form-result{
 display: none;
 font-size: 5.5vw;
}

#verificationImg{
 float: left;
 margin-right: 10px;
 margin-top: 3px;
}

/*keep form element text from becoming too large*/
@media(min-width: 301px){
 label, input, textarea{
  font-size: 14.2px;
 }
 .num-chars{
  font-size: 13px;
 }
 .verificationBox{
  font-size: 14.2px;
 }
 .verificationText{
  font-size: 16px;
 }
 .form-result{
  font-size: 16px;
 }
}

/*@media(min-width: 400px){
 .verificationBox{
  margin-bottom: 125px;
 }
}*/

/**********Product listing styles***********/

.product-listings{
 
}

@media(min-width: 680px){
 .product-listings{
  width: 640px;	/*if the window is large enough, set the width to full size*/
 }
}

.listing-group-title{
 font-size: 5.5vw;
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 border-bottom: 1px solid #868686;
 padding-bottom: 4px;
}

/*adjust font sizes*/
@media(min-width: 291px){
 .listing-group-title{
  font-size: 16px;
 }
}

.listing{
 word-wrap: break-word;
 width: 90vw;
 max-width: 640px;
 font-size: 5vw;
 margin-bottom: 3px;
}

.listing > img{
 float: left;
 width: 30vw;
 height: auto;
 max-width: 115px;
 max-height: 115px;
 margin-right: 2vw;
 margin-bottom: 1vw;
}

@media(min-width: 340px){
 .listing-group-title{
  margin-bottom: 15px;
 } 
}

@media(min-width: 284px){
 .listing{
  font-size: 14.2px;
  margin-bottom: 30px;
 }
}


.product-title{
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 color: #166b01;
}

/*adjust font size for larger screens*/
@media(min-width: 273px){
 .product-title{
  font-size: 15px;
  margin-top: 5.4px;
 }
}

.product-description{
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 color: #166b01;
 margin-top: 3px;
 margin-bottom: 5px;
}

.product-availability, .popup-availability{
 margin-top: 5px;
 font-weight: bold;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 color: #166b01;
}

.view-more{
 color: #558a2a;
 text-decoration: underline;
 cursor: pointer;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 color: #166b01; 
}

.view-more:hover{
 color: #1ad00f;
 text-decoration: none;
}

@media(min-width: 716px){
 .listing > img{
  margin-right: 0px;
  margin-bottom: 0px;
 }
 .product-title{
  margin-left: 122px;		/*image width plus desired margin*/
 }
 .product-description{
  margin-left: 124px;
 }
 .product-availability, .popup-availability{
  margin-left: 123px;
 }
 .view-more{
  margin-left: 123px;
  display: block;
 }
}

.popup{
 display: none;
 position: fixed;
 z-index: 1;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 overflow: auto;
 /*black fall-back color for older systems*/
 background-color: rgb(0, 0, 0);
 background-color: rgb(0, 0, 0, 0.4);
}

.popup-content{
 background-color: #fefefe;
 margin: 15% auto;
 padding: 20px;
 border-radius: 8px;
 width: 74%;
 display: grid;
}

.close{
 color: #aaa;
 font-size: 28px;
 font-weight: bold;
 margin-right: 8px;
}

.close:hover, .close:focus{
 color: #b50101;
 text-decoration: none;
 cursor: pointer;
}

.popup-img{
 max-width: 520px;
 width: 100%;
 height: auto;
}

.popup-title{
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 16px;
}

.popup-text{
 margin-top: 10px;
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 15.2px;
}

.popup-title, .popup-text, .popup-availability{
 margin-left: 20%;
}

.popup-availability{
 margin-top: 0px;
 color: #166b01;
}

.sidebar{
 width: 1px;
 height: 100%;
 border: none;
 border-left: 1px solid #b4b9b3;
 margin-left: 11%;
}


/*popup changes for different screen sizes*/

/********Three columns**********/
@media(min-width: 1075px){
 .popup-content{
  grid-template-columns: auto 7fr 1fr;
  grid-template-rows: auto 1fr 20px;
  max-width: 930px;
  height: 83vw;
  max-height: 390px;
 }
 .popup-img{
  grid-column: 1;
  grid-row: 1 / 3;
 }
 .close{
  grid-column: 4;
  grid-row: 1;
 }
 .popup-title{
  grid-column: 2;
  grid-row: 1;
 }
 .popup-text{
  grid-column: 2;
  grid-row: 2;
 }
 .popup-availability{
  grid-column: 2/4;
  grid-row: 3;
 }
 .sidebar{
  grid-column: 2;
  grid-row: 2;
 }
}

/******One column******/
@media(max-width: 1074px){
 .popup-content{
  grid-template-columns: auto 20px;
  grid-template-rows: auto auto auto auto;
  max-width: 545px;
 }
 .popup-img{
  grid-row: 1;
  grid-column: 1;
 }
 .close{
  grid-row: 1;
  grid-column: 2;
  margin-left: 10px;
  margin-right: 0px;
 }
 .popup-title{
  grid-row: 2;
  grid-column: 1 / 2;
  margin-left: 0px;
  margin-top: 8px;
 }
 .popup-text{
  grid-row: 3;
  grid-column: 1 / 2;
  margin-left: 0px;
  margin-top: 5px;
 }
 .popup-availability{
  grid-row: 4;
  grid-column: 1 / 2;
  margin-left: 0px;
  margin-top: 5px;
 }
 .sidebar{
  display: none;
 }
}

/*****Editor styles*******/

.edit-text{
 color: black;
 text-decoration: underline;
 text-decoration-color: white;
 padding: 0px;
 width: 115px;
 height: 115px;
 font-weight: bold;
 margin: 0px;
 word-wrap: break-word;
 font-size: 15px;
 float: left;
 display: none;
}

.edit-text-listing{
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 14.2px;
 width: 77%;
 height: 100px;
 overflow: auto;
 display: none;
 border: 1px solid #eaeaea;
 background: inherit;
 resize: none;
 padding-bottom: 0px;
 margin-left: 124px;
 margin-top: 0px;
 margin-bottom: 0px;
}

.save{
 display: none;
 width: 153px;
 float: left;
 margin-right: 10px;
}

.remove, .add{
 display: none;
 font-size: 17px;
 border: 1px solid gray;
 width: 20px;
 text-align: center;
 height: 21px;
 border-radius: 6px;
 cursor: pointer;
 color: #558a2a;
 float: left;
 margin-top: 12px;
 margin-right: 12px;
}

.remove:hover, .add:hover{
 color: #1ad00f; 
}

.seed-details{
 display: grid;
 grid-template-columns: 520px minmax(200px, 302px);
 grid-template-rows: 55px minmax(0px, auto) auto 1fr 1.5fr auto;
}

.location-links{
 color: #166b01;
 margin-top: 20px;
 margin-bottom: 10px;
 font-size: 15px;
 grid-column: 1 / span 2;
 grid-row: 1;
}

#seed-page-img{
 grid-column: 1;
 grid-row: 2 / span 4;
}

#grid-bottom-link{
 grid-column: 1;
 margin-top: 15px;
}

.seed-title, .seed-description, .seed-availability{
 grid-column: 2;
 margin-left: 12px;
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 14.2px;
}

.seed-title{
 grid-row: 2;
 font-family: "Times New Roman", Times, serif;
 font-size: 18px;
}

.seed-description{
 grid-row: 3;
 margin-top: 6px;
 margin-bottom: 10px;
}

.seed-availability{
 grid-row: 4;
 font-weight: bold;
}

.growing-tips{
 grid-column: 1;
 grid-row: 6;
 color: #166b01;
 font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 font-size: 14.2px;
 word-wrap: break-word;
}

.growing-header{
 margin-top: 10px;
 font-family: "Times New Roman", Times, serif;
 font-size: 20px;
 border-bottom: 1px solid #868686;
 margin-bottom: 8px;
}

.growing-sub-header{
 font-family: "Times New Roman", Times, serif;
 font-size: 19px
}

.species, .planting, .culture, .specs, .growing-sub-header{
 margin-bottom: 4px;
}

.species{
 font-style: italic;
}

/*scale seed details page*/

@media(max-width: 875px){
 .seed-details{
  grid-template-columns: 520px;
  grid-template-rows: auto auto auto auto auto;
  margin-left: 15px;
  margin-right: 15px;
 }
 .location-links{
  grid-column: 1;
 }
 #seed-page-img{
  grid-row: 2;
 }
 .seed-title, .seed-description, .seed-availability{
  margin-left: 0px;
  grid-column: 1;
 }
 .seed-title{
  margin-top: 10px;
  grid-row: 3;
 }
 .seed-description{
  grid-row: 4;
 }
 .seed-availability{
  grid-row: 5;
 }
}

@media(max-width: 750px){
 .seed-details{
  grid-template-columns: 81vw;
 }
 #seed-page-img{
  width: 80vw;
  max-width: 520px;
 }
}

@media(max-width: 300px){
  .seed-details{
   grid-template-rows: 8% 27% 9% 0fr 0fr;
  }
 .seed-description, .seed-availability, .location-links, .growing-tips{
  font-size: 5vw;
  margin-top: 1vw;
 }
 .seed-title{
  font-size: 5.5vw;
 }
 .growing-tips{
  margin-top: 11vw;
 }
 .growing-sub-header, .growing-header{
  font-size: 6vw;
 }
}

.no-show{
 color: #166b01;
 display: none;
 border-bottom: 1px solid #d3d0d0;
}