@charset "UTF-8";
/* Initial style content before modifications from https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */

/* https://www.sitepoint.com/community/t/restrict-website-width/39254/3 */
.allcontent {
 max-width: 1400px;  /*restircts width*/
 /* display: inline-block; /*  to center elements ( in combination with your body{ text-align:center}) and contain floats)*/ 
display: block;
    margin-left: auto;
    margin-right: auto;    
}

.pagepad {
padding: 0px 14px;
max-width: 1400px;  /*restircts width*/
 /* display: inline-block; /*  to center elements ( in combination with your body{ text-align:center}) and contain floats)*/ 
display: block;
    margin-left: auto;
    margin-right: auto;
}

/* https://stackoverflow.com/questions/39858998/zoom-in-and-out-on-mouse-click-with-css 

Sample code:
<div class="click-zoom">
  <label>
    <input type="checkbox">
    <img class="border" src="projects/Queen_Louisa_1000.png" alt="Queen Louisa - Queen Patti">
  </label>
</div> */

.click-zoom input[type=checkbox] {
  display: none
}

.click-zoom img {
  margin-top: 5px;
  transition: transform 0.25s ease;
  cursor: zoom-in
}

.click-zoom input[type=checkbox]:checked~img {
  transform: scale(2);
  cursor: zoom-out
}

body {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1.3em;  /* Added to match KVCC site */
  /* color: white;
  background-color: #000000; use on the photo page. Use a gradient for all other pages */
}

/* STEP 2 */
/* Add a black background color to the top navigation */
.topnav {
  overflow: hidden; 
  background-color: #000000;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: #3399ff; /* changed to match gradient */
  color: #000000; /* changed from white to black due to Lighthouse accessibility */
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* MY NEW CLASSES FOLLOW */

/* https://www.w3schools.com/css/css3_gradients.asp
also change line 74 to match*/
.grad1 {
 background-image: linear-gradient(#3399ff, #FFFFFF);
 padding: 14px 0px 14px 0px;
}

.left {
 margin-left:20px;
}

h1 {
  margin-top: 20px;
  margin-bottom: 25px;
  color: #050244;
}
.fontsmall {
  font-size: 95%;
  margin-top: 50px;
  text-align: center;
}

/* to style the Google search button to match iPhone Chrome default */
button {
  margin-right: 4px;
  margin-top: 12px;
  margin-bottom: 12px;
  border: none;
  background-color: #006DDA;
  color: #FFFFFF;
  font-size: 12px;
  font-weight: bold;
  border-radius: 16px;
  padding: 5px 15px;
 }
/* https://support.w3schools.com/hc/en-gb/articles/4410240180113-How-do-I-center-images- */
.center {
  display: block;
  margin: 0 auto;
  text-align: center;
}
/* https://www.w3schools.com/css/css_rwd_images.asp */
img {
 width: 90%;    
  margin-bottom: 35px;
}
.border {border: 1px solid #000000;}  /* Marty uses on all Canvas images */

img.small {
  max-width: 400px;
  height: auto;
  /* if no value it will inherit the value from non media queriy */
  margin-bottom: 20px;
}

/* Dotted red border https://www.w3schools.com/howto/howto_css_style_hr.asp */
hr.new {
  margin-top: 24px;
  margin-bottom: 20px;
  color: solid gray;
  height: 1px;
}
/* https://www.w3schools.com/css/css_border_rounded.asp */
p.top {
  /* border: 1px solid gray; */
  border-radius: 3px;
  padding: 5px;
  margin: 45px 0px;
}
.topspace  {
   margin-top: 18px; 
}
table {
  margin-top: 40px;
  margin-bottom: 40px;
}
td, th {
  width: 350px;  
  border-style: none;
  padding: 9px;
  background-color: #A1D7F9;
}
footer {
  position: fixed;
  bottom: 0;
  height: 50px;
  width: 100%;
  text-align: center;
  /* background-color: lightgray; /* Debugging */
  z-index: 1000; /* Ensure it stays on top */
  font-size: 18px; /* Increase as needed */
  
}

  


/* ADD MEDIA QUERIES FOLLOWS from https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */

 /* When the screen is less than 720 pixels wide (before links wrap on next line), hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 720px) {
 /* .topnav a:not(:first-child) {display: none;} -- this line can't be active along with a.hidden for menu to appear */
  .topnav a.icon {
    float: right;
    display: block;
  }
/* prevents display of a specific link(s) in the topnav menu RAL */
   a.hidden {display: none;}
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */

@media screen and (max-width: 720px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}
/* END W3C SUPPLIED MEDIA QUERIES */

/* MY MEDIA QUERIES */
@media screen and (max-width: 720px) {

  body {
    font-size: 1.2em;  
  }
iframe {
height: 500px; /* to override inline height of 1000 on larger screens. 500 works best for iphone */
}
.left {
 margin-left:0px;
}
h1 {
  margin-top: 8px;
  margin-bottom: 12px;
  font-size: 1.7em;
}
h2 {
  font-size: 1.3em;
}
img {
  /* if no value it will inherit the value from non media queriy */
  width: 100%;
  margin-bottom: 20px;
}
img.small {
  width: 80%;
  margin-bottom: 20px;
}
img.border {border: 1px solid #C6C6C6;}
p.top {
  border: 1px solid gray;
  border-radius: 3px;
  padding: 4px;
  margin: 24px 0px;
}
hr.new {
  margin-top: 6px;
  margin-bottom: 12px;
  color: solid gray;
  height: 1px;
}
table {margin-top: 30px;}
    
}

@media screen and (min-width: 721px) and (max-width: 1100px){

iframe {
height: 800px /* to override inline height of 1000 on larger screens. 500 works best for iphone */
}
.left {
 margin-left: 25px;
}

}