/* styles for header and footer */  
 body {
 background-color:#fffdfa;
 }  
    .webdesign {
  color: #fff;
  font-size: 20px;
  font-family: 'Open Sans', sans-serif;
  line-height: 32px;
  background-color: #c66;
  background-position: 0 0;
  margin: 0;
  text-align: center;
  padding: 0;
  border-width: 0;
}
img#logoimage {
  display: block;
  margin: 0 auto;
  border:none;
}
p#tagline {
  background-color: #444;
  color: #fff;
  width: 100%;
  max-width:100% !important;
  text-align: center;
  padding: 10px 0;
  margin: 0;
  border-bottom: 3px solid #fff;
  border-top: 3px solid #fff;
  font-weight: 400;
}


/* top nav buttons */

div#button-group {
    justify-content: center;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
box-sizing: border-box !important;
}
.arrows {
    font-size: 2rem !important;
    fill:#0d6efd;
  } 
  code { 
  background-color: #ececec;
  border-radius: .25rem;
  font-size: .875em;
  font-weight: 500;
  padding: .15rem .3rem;
  font-family: Arial, sans-serif;
  }
hr {
  margin-bottom: 3em;
  margin-top: 3em;
  max-width: 700px;
  color: #efefef;
  height: 1px;
  }
div#button-group a.on, div#button-group a.off {
    border: 1px solid #e04545 !important;
    color: #e04545;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: 600 !important;
    line-height: 1.4em;
    text-align: center;
    text-shadow: none !important;
    border-radius: 3px;
    display: inline-block;
    padding: 15px 1px !important;
    text-decoration: none !important;
margin: 3px !important;
width:130px;
height:40px;
}
div#button-group a.off:hover, div#button-group a.on {
  background-color:#e04545;
  color:#fff !important;
  outline: 1px solid white;
  outline-offset: -2px;
}
div#button-group a.off { 
   outline: 1px solid #e04545;
  outline-offset: -3px;
  background-color: #fff;
}
body#no-op a#no-opnav, body#media-query a#media-querynav, body#img-srcset a#img-srcsetnav, body#ssl-cdn a#ssl-cdnnav {
    background-color: #e04545 !important;
    color:#ffffff  !important;
}

/* specific to this page */
    body {
      font-family: Arial, sans-serif;
      font-size:20px;
      line-height: 1.6em;
	  margin:0;
    }
    .container {
      max-width: 1000px;
      margin: 0 auto;
      text-align: center;
    }
    h1, h2, h3 {
    color:#e04545;
line-height:1.3em;
     }
    img {
      width: 100%;
      height: auto;
      border:1px solid #ccc;
    }
	.herodetails {
	width:100%; 
	max-width:800px; 
	margin:0 auto 30px; 
	font-size:16px;
	line-height: 1.6em;
}
    div.gallery {
    width: 32%;
    min-width:295px;
    float:left; 
    }
	 
     div.gallery img {
     width:275px;
     height:275px;
     padding:10px;
     }
	 p.galleryimgsize {
	 position:absolute; 
	 color:#fff; 
	 font-size:26px !important; 
	 left:30px; 
	 bottom:10px;
	  }
	 p.heroimgsize {
	 position:absolute; 
	 color:#fff; 
	 font-size:36px; 
	 width:200px; 
	 left:3%; 
	 bottom:10%;
	 }
	h3 {
	font-size:26px;
 	}
	h4 {
    margin-bottom:0;
    font-size:26px;
	 } 
    p, ul, ol {
    max-width:700px;
    margin:20px auto;    
    text-align:left;  
    }
	ol li {
	margin-top:1.2em;
	 }
	p:nth-of-type(1) {
	font-size:; 
	}
	div.gallery p {
	width:100%; 
	max-width:800px; 
	margin-top:0;
     font-size:15px;
     }
#bottomIDbox {
  background-color: #e3e3e3;
  height: auto;
  width: 100%;
  bottom: 0;
  border-top: 2px solid gray;
  clear: both;
  padding-bottom: 15px;
  position: relative;
  margin-top: 60px;
  text-align: center;
  font-size: 18px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px inset, rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
}
#bottomIDbox h4 {
  color:black ;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
  font-weight: normal;
}
pre {
  display: block;
  background-color: #f0f0f0;
  padding: 20px;
  margin: 0 auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: break-word;
  text-align:left;
  max-width:700px;
}
.webdesigntip {
padding:3px 15px; 
border:1px solid gray; 
max-width:700px; 
margin:50px auto;
 }
 
 /* header left icons for intro and results */
 /* Hover styles for the parent div, affecting the child svg */
.svgbuttonboxon:hover svg,
.svgbuttonboxoff:hover svg {
  fill: #fff; /* Change the fill color of the svg icon */
}

/* Existing styles */
#svgbuttonbox {
  width: 30px; 
  height: 30px; 
  font-size: 16px; 
  outline: 1px solid #e04545; 
  outline-offset: -3px; 
  border: 2px solid white; 
  border-radius: 5px; 
  padding: 10px; 
  opacity: 0.8;
}
.svgbuttonboxoff {
  background-color: white; 
}
.svgbuttonboxon, .svgbuttonboxoff:hover {
  background-color: #e04545;
}

/* Default SVG fill */
.svgbuttonboxoff svg {
  fill: #e04545;
}
.svgbuttonboxon svg {
  fill: #fff;
}

 
 
/* icon tooltip */ 
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
/* Position the tooltip */
  position: absolute;
  z-index: 1;
  bottom: -50px;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
  .welcomeicon {
  left: 0px;
  }
  .resultsicon {
  right: 0px;
  }