/*
      Yard To Yard LLC Style Sheet

      Author:   Scott Stiever
      Date:     03/14/2021
      Filename: layout.css


*/

/* Layout styles for desktop screen display */



/* Body styles */

body {
   background-color: rgb(102, 155, 0);
   margin: 0px auto;
   border: 2px solid rgb(0, 0, 0);
   border-radius: 10px;
   margin-top: 36px;
   margin-bottom: 36px;
   max-width: 941px;
}



/* Header styles */
   
.header {
   background: rgb(248, 245, 237);
   border-bottom: 1px solid rgb(0, 0, 0);
   height: 160px;
   width: 100%;
	 border-radius: 10px 10px 0px 0px;
}

.bgimg3 {
   position: absolute;
   left: 775px;
   height: 160px;
   width: 166px;
}

.bgimg2 {
   position: absolute;
   left: 166px;
   height: 160px;
}

.bgimg1 {
   position: absolute;
   left: 0px;
   height: 160px;
   width: 166px;
}

.bgimg {
   position: absolute;
   z-index: 1; /* <-- Added */
   margin: 0px;
   padding: opx;
}

.clickable {
   position: absolute; /* <-- Added */
   z-index: 2; /* <-- Added */
   height: 160px;
   width: 941px;
   margin: 0px;
   padding: opx;
	 border-radius: 10px 10px 0px 0px;
}

/* Main section styles */

section#main {
   background: rgb(248, 245, 237);
   position: relative;
   top: 0px;
   left: 0px;
   width: 100%;
	 border-radius: 0px 0px 10px 10px;
}

section#main h1 {
   font-size: 36px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
   text-align: center;
   padding-top: 20px;
   width: 100%;
   color: #669B00;
	 font-weight: normal;
}


/* Main section article styles */

section#main article {
   width: 720px;
   height: 410px;
   position: absolute;
   top: 150px;
   left: 133px;
   padding-left: 19px;
}


a:link {
   color: #669B00; 
   font-family: 'good_timesregular', Geneva, sans-serif; 
	 font-weight: lighter;
   padding-left: 2px;
   padding-right: 4px;
}
a:visited {color: #669B00; }
a:hover {color: #669B00; text-decoration: none; background-color: #none; }
a:active {color: #669B00; } 


a.external:link {
   color: #001c66; 
   font-family: 'good_timesregular', Geneva, sans-serif; 
   font-size: 32px;
	 font-weight: normal;
   padding-left: 2px;
   padding-right: 4px;
   padding-bottom: 2px;
}
a.external:visited {color: #001c66; }
a.external:hover {color: #ffffff; text-decoration: none; background-color: #001242; }
a.external:active {color: #ffffff; } 

.research {
   width: 300px;
   border: 0px;
   border-spacing: 0px 0px;
   padding: 0px;
   margin-left: 0px;
}

.research td {
   vertical-align: middle;
}

.intro {
   font-size: 28px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
	 font-weight: normal;
}

td {
   width: 650px;
   border: 0px;
   padding-top: 30px;
   text-align: center;
   padding-right: 48px;
   font-size: 24px;
}

.imgsvcs {
   height: 480px;
}   

/* Figure and photo styles */

figure {
   position: absolute;
   width: 147px;
   height: 172px;
   padding-top: 33px;
   padding-left: 51px;
}

figure img {
   display: block;
   width: 90%;
   margin: 0px auto;
}

figure figcaption {
   font-size: 10px;
   color: rgb(0, 0, 0);
	 font-family: 'good_timesregular', Geneva, sans-serif;
   font-style: italic;
   line-height: 12px;
   text-align: center;
   padding: 5px 0px;
}

a.caption:link {color: rgb(113, 0, 17); 
}
a.caption:visited {color: rgb(113, 0, 17); 
}
a.caption:hover {color: rgb(113, 0, 17); 
                text-decoration: underline; 
}
a.caption:active {color: rgb(113, 0, 17); 
} 


/* Page footer styles */

footer {
   margin-top: 600px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
   font-size: 10px;
   border-top: 1px solid rgb(0, 0, 0);
   padding-bottom: 20px;
   padding-top: 10px;
   word-spacing: 5px;
   padding-right: 5px;
}

footer span {
   float: right;
   margin-right: 10px;
}

.center{	
	text-align: center;
	margin:auto; 
	padding:0;
}

.left{
	float: left;
	margin-left: 10px;
}

.right{
	float: right;
	margin-right: 10px;
}

a.footer:link {color: rgb(113, 0, 17); 
                text-decoration: none; 
}
a.footer:visited {color: rgb(113, 0, 17); 
}
a.footer:hover {color: rgb(113, 0, 17); 
                 text-decoration: underline; 
}
a.footer:active {color: rgb(113, 0, 17); 
} 


/* Main section navigation list styles */


.menubar{
   height: auto;
	 width: 100%;
	 font-family: 'verdanaregular', Geneva, sans-serif;
}


/* 52em = 832px */

@media (min-width: 52em) {
  .navbar .menu-icon {
    display: none;
  }
}

.navbar{
   height: 20px;
   background-color: rgb(0, 173, 238);
	 width: 100%;
	 font-family: 'good_timesregular', Geneva, sans-serif;
}

.navbar ul.hori{
   list-style-type: none;
   width: auto;
   height: 20px;
   border-top: 1px solid rgb(0, 0, 0);
   border-bottom: 2px solid rgb(0, 0, 0);
}

.navbar ul.hori > li{
   display: block;
	 float: left;
   height: 20px;
   width: 25%;  
   background-color: rgb(0, 173, 238);
}

.navbar ul.hori li a{
   display: block;
   color: black;
   text-align: center;
   line-height: 20px;
   font-size: 13px;
   border-left: 1px solid rgb(0, 0, 0);
   border-right: 1px solid rgb(0, 0, 0);

}

.navbar ul.hori < li a{
	 float: left;
   height: 20px;
   line-height: 20px;
   color: white;
   text-align: center;
}

.navbar ul.hori li a:hover{
   color: white;
   text-align: center;
   height: 20px;
   line-height: 20px;
   font-size: 13px;
   background-color: rgb(0, 96, 132);
   font-weight: lighter;
}

.menubar .menu {
   display: none;
}

.menubar {
   display: none;
}

















/* Layout styles for tablet screen display */

/* 52em = 816px */

@media (max-width: 51em) {
.navbar .menu {
   display: none;
}

.navbar {
   display: none;
}

.menubar {
   display: block;
}

.header {
   background: rgb(248, 245, 237);
   border-bottom: 1px solid rgb(0, 0, 0);
   height: 120px;
   width: 100%;
	 border-radius: 10px 10px 0px 0px;
}

.bgimg3 {
   display: none;
}

.bgimg2 {
   position: absolute;
   left: 124px;
   height: 120px;
}

.bgimg1 {
   position: absolute;
   left: 0px;
   height: 120px;
   width: 124px;
}

.bgimg {
   position: absolute;
   z-index: 1; /* <-- Added */
   margin: 0px;
   padding: opx;
}

.clickable3 {
   position: absolute; /* <-- Added */
   z-index: 2; /* <-- Added */
   height: 120px;
   width: 99%;
   margin: 0px;
   padding: opx;
	 border-radius: 10px 10px 0px 0px;
}

.clickable {
   display: none;
}


section#main h1 {
   font-size: 24px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
   text-align: center;
   padding-top: 20px;
   width: 100%;
   color: #669B00;
	 font-weight: normal;
}

section#main article {
   width: 500px;
   height: 410px;
   position: absolute;
   top: 150px;
   left:100px;
   padding-left: 19px;
}

.research {
   width: 240px;
   border: 0px;
   border-spacing: 0px 0px;
   padding: 0px;
   margin-left: 0px;
}

.intro {
   font-size: 22px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
	 font-weight: normal;
}

.imgsvcs {
   height: 360px;
}   

td {
   width: 100px;
   border: 0px;
   padding-top: 30px;
   text-align: center;
   padding-right: 8px;
   font-size: 18px;
}

body {
   margin-top: 0px;
   margin-bottom: 0px;
   width: auto;
}

footer {
   margin-top: 510px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
   font-size: 8px;
   border-top: 1px solid rgb(0, 0, 0);
   padding-bottom: 20px;
   padding-top: 10px;
   word-spacing: 5px;
   padding-right: 5px;
}




.dropbtn {
  background-color: rgb(0, 173, 238);
  color: black;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 42px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
   background-color: rgb(0, 96, 132);
   color: white;
}

.dropbtn:focus {
  background-color: rgb(0, 173, 238);
  color: black;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(0, 173, 238);
  min-width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
}

.dropdown-content a {
  color: black;
  padding: 20px 16px;
  text-decoration: none;
  display: block;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  font-size: 24px;
}

.dropdown-content a:hover {background-color: rgb(0, 96, 132);
                           color: white;}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

}


/* 40em = 640px */

@media (min-width: 40em) {
.clickable2 {
   display: none;
}

}

















/* Layout styles for mobile screen display */

/* 40.95em = 655.2px */

@media (max-width: 40.95em) {
.navbar .menu {
   display: none;
}

.navbar {
   display: none;
}

.menubar {
   display: block;
}

.header {
   background: rgb(248, 245, 237);
   border-bottom: 1px solid rgb(0, 0, 0);
   height: 80px;
   width: 100%;
	 border-radius: 10px 10px 0px 0px;
}

.bgimg3 {
   display: none;
}

.bgimg2 {
   position: absolute;
   left: 83px;
   height: 80px;
}

.bgimg1 {
   position: absolute;
   left: 0px;
   height: 80px;
   width: 83px;
}

.bgimg {
   position: absolute;
   z-index: 1; /* <-- Added */
   margin: 0px;
   padding: opx;
}

.clickable2 {
   position: absolute; /* <-- Added */
   z-index: 2; /* <-- Added */
   height: 80px;
   width: 99%;
   margin: 0px;
   padding: opx;
	 border-radius: 10px 10px 0px 0px;
}

.clickable {
   display: none;
}

.clickable3 {
   display: none;
}

section#main h1 {
   font-size: 22px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
   text-align: center;
   padding-top: 20px;
   width: 100%;
   color: #669B00;
	 font-weight: normal;
}

section#main article {
   width: auto;
   height: 410px;
   position: absolute;
   top: 150px;
   left: 6px;
   padding-left: 19px;
}

.research {
   width: auto;
   border: 0px;
   border-spacing: 0px 0px;
   padding: 0px;
   margin-left: 0px;
}

.intro {
   font-size: 20px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
	 font-weight: normal;
}

.imgsvcs {
   height: 340px;
}   

td {
   width: 100px;
   border: 0px;
   padding-top: 30px;
   text-align: center;
   padding-right: 28px;
   font-size: 16px;
}

body {
   margin-top: 0px;
   margin-bottom: 0px;
   width: auto;
}

footer {
   margin-top: 490px;
	 font-family: 'good_timesregular', Geneva, sans-serif;
   font-size: 8px;
   border-top: 1px solid rgb(0, 0, 0);
   padding-bottom: 20px;
   padding-top: 10px;
   word-spacing: 5px;
   padding-right: 5px;
}




.dropbtn {
  background-color: rgb(0, 173, 238);
  color: black;
  padding-left: 12px;
  padding-right: 12px;
  font-size: 42px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover {
   background-color: rgb(0, 96, 132);
   color: white;
}

.dropbtn:focus {
  background-color: rgb(0, 173, 238);
  color: black;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(0, 173, 238);
  min-width: 100%;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
}

.dropdown-content a {
  color: black;
  padding: 20px 16px;
  text-decoration: none;
  display: block;
  border-top: 1px solid rgb(0, 0, 0);
  border-bottom: 1px solid rgb(0, 0, 0);
  font-size: 24px;
}

.dropdown-content a:hover {background-color: rgb(0, 96, 132);
                           color: white;}

.dropdown a:hover {background-color: #ddd;}

.show {display: block;}

}



/* Font styles */

@font-face {
    font-family: 'good_timesregular';
    src: url('font/good_times_rg-webfont.eot');
    src: url('font/good_times_rg-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/good_times_rg-webfont.woff2') format('woff2'),
         url('font/good_times_rg-webfont.woff') format('woff'),
         url('font/good_times_rg-webfont.ttf') format('truetype'),
         url('font/good_times_rg-webfont.svg#good_timesregular') format('svg');
    font-weight: normal;
    font-style: normal;

}