/* tom-hunt.com web stylesheet   */
/* Created 16 Sep 2023           */
/* Revised 18 Dec 2024           */
/* Thomas Hunt, Whiting, Vermont */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	}

body {
	padding: 15px; 
	font-family: 'Taviraj','Times New Roman','Georgia',serif;
	font-size: 18px;
  color: #001020; 
  /*
	color: #d9e6f2; */
	background-color: #003870;
  background-image: url("../images/bodybg2.png");
  background-size: 40px 40px;
  background-repeat: repeat, repeat;
	line-height: 1.35;
	/*background-size: cover;*/
	}
/* Taviraj font is used in Light 300, Light 300 Italic, Regular 400, Regular 400 Italic, SemiBold 600, SemiBold 600 Italic, ExtraBold 800 and ExtraBold 800 Italic. */

.extraspace {
	margin: 5px 0px;
	}

.centered {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	}

.newrow {
	clear: both;
	}

.white {
  color: #ffffff;
  text-shadow: 1px 1px #000000;
  }

.black {
  color: #000000;
  text-shadow: 3px 3px #203570;
  }

video.vid {
  display: block;
  margin: 2% auto;
  width: 70%;
  max-width: 640px;
  height: auto;
  border: solid #303870 2px;
  }

/* DIVS */
div.biobox {
  width: 97%;
  padding: 0% 1% 2% 2%;
  border: solid white 1px;
  float: right;
/*  background-image: linear-gradient(#365843, #003870);
  } */
  background: #e0e0e0;
  } 

div.close {
  background-color: #304050;
  }  

div.infobox {
  width: 97%;
  padding: 0% 1% 2% 1%;
  margin: 0% 0% 2% 0%;
  float: left;
  color: #003870;
  background-color: #d0d3e0;
  box-shadow: 4px 4px 2px #102040;
  }

div.infoboxg {
  width: 97%;
  padding: 0% 1% 2% 1%;
  margin: 0% 0% 2% 0%;
  float: left;
  color: #000000;
  background-color: #f0f0f0;
  box-shadow: 4px 4px 2px #102040;
  }

div.infoboxrev {
  width: 97%;
  padding: 0% 1% 2% 1%;
  margin: 0% 0% 2% 0%;
  float: left;
  color: #003870;
  background-color: #203658;
  box-shadow: 4px 4px 2px #102040;
  }

div.infcont {
  margin-bottom: 0%;
  }

/* TODAY IN HISTORY */

div.tih {
  height: 238px;
  overflow-y: scroll;
  background-color: rgb(240,235,220);  
  border: 1px solid rgb(150,100,80); 
  padding: 10px;
  box-shadow: -5px 5px 5px #988070;
  background-image: linear-gradient(132deg, #f8eae3, #f0e0d0, #d8c5b3);  
  }

.tihdate {
  font-family: 'Lato','Helvetica',sans-serif;
  font-size: 105%;
  font-weight: bold;
  text-align: left;
  color" #000000;
  margin: 10px 10px 0px 20px;
  text-indent: 0px;
  letter-spacing: 0.4px;
  text-shadow: .4px .4px #909090;  
  }

div.otdpic {
  float: right;
  margin: 1px 20px 0px 20px; 

  }

.otdimg {
  width: 110px;
  height: 148px;
  border: 1px solid #909090; 
}  

.tihstory > p {
  font-family: 'Taviraj','Times New Roman','Georgia',serif;
  font-size: 90%;
  font-weight: 600;
  text-align: left;
  color: #101010;
  line-height: 1.2;
  margin: 10px 30px 15px 30px;
  padding-left: 20px;
  text-indent: -20px;
  }

.otdcap {
  font-family: 'Lato','Helvetica',sans-serif;
  font-size: 75%;
  font-style: italic;
  text-align: center;
  text-indent: 0px;
  color" #000000;  
  margin: 2px 2px 10px 2px;
  letter-spacing: -0.5px;
  }





/* HEADINGS */

h1 {
	font-family: 'Taviraj','Times New Roman','Georgia',serif;
	font-size: 200%;
	font-weight: 800;
	color: #000010;
	line-height: 1.2;
	margin: 10px auto 20px auto;
  text-shadow: 1.2px 1.2px 1.2px #707070;
	}

h2 {
  font-family: 'Taviraj','Times New Roman','Georgia',serif;
  font-size: 150%;
  font-weight: 800;
  color: #404660;
  line-height: 1.2;
  margin: 20px auto 20px 20px;
  text-shadow: 1.2px 1.2px 1.0px #606060;
  }

h2.g {
  font-family: 'Taviraj','Times New Roman','Georgia',serif;
  font-size: 150%;
  font-weight: 800;
  color: #000000;
  line-height: 1.2;
  margin: 20px auto 20px 20px;
  text-shadow: 1.0px 1.0px 1.0px #A0B0D0;
  }  

h2.rev {
  font-family: 'Taviraj','Times New Roman','Georgia',serif;
  font-size: 150%;
  font-weight: 800;
  color: #BFB99F;
  line-height: 1.2;
  margin: 20px auto 20px 20px;
  text-shadow: 1.0px 1.0px 1.0px #9F9F9F;
  }  

h4 {
  font-family: 'Taviraj','Times New Roman','Georgia',serif;
  font-size: 115%;
  font-weight: 600;
  color: #505050;
  margin: 16px auto 0px auto;
  text-shadow: 1.0px 1.0px 1.0px #808080;
  text-align: center;
  }

/* IMAGES */

img.small { /* Small pic */
  width: 110px; 
  margin: 4px 15px 6px 12px; 
  }

img.left { /* Pic to left with text wrapped */
  margin: 1% 1% 0% 1%;
  float: left; 
  }

img.right { /* Pic to right with text wrapped */
  margin: 1% 1% 0% 1%;
  float: right; 
  }

img.center { /* Center pic - no text wrapping */
  display: block;
  margin-left: auto;
  margin-right: auto;
  }

img.halfcolpic {
  width: 50%;
  max-width: 400px;  
  border: solid black 1px;
  }

img.fullcolpic {
  width: 96%;
  border: solid black 1px;
  }

img.rounded { /* Border with rounded corners */
  border-style: solid; 
  border-width: 1px; 
  border-color: #e0e0e0 #707070 #303030 #d0d0d0; 
  box-shadow: 3px 3px 3px #707070;
  border-radius: 20px; 
  }

/* PARAGRAPHS */
p {
	font-family: 'Taviraj','Times New Roman','Georgia',serif;
	font-size: 100%;
	font-weight: 400;
	line-height: 1.3;
	}

p.bio {
  font-size: 90%;
  font-weight: 400;
  text-align: center;
  text-indent: 0;
  margin: 0% 3% 3% 3%;
  }

.fine {
  font-family: 'Lato','Helvetica',sans-serif;
  font-weight: 300;
  font-size: 80%;
  line-height: 1.2;
  margin: 20px auto;
  }
/* Lato font is used in Light 300, Light 300 Italic. */

p.info {
  font-size: 92%;
  font-weight: 400;
  color: #003870;
  margin: 1% 4% 0% 4%;
  }

p.linkdark {
  text-align: center;
  text-indent: 0;
  margin: 0% 2% 3% 2%;
  color: #303870;
  }

p.linklight {
  text-align: center;
  text-indent: 0;
  margin: 0% 2% 3% 2%;
  color: #BFB99F;
  }

/* LINKS */

a.light {
  color: #d9f0ff;
  text-shadow: 0.5px 0.5px 0.5px #f0f0f0;
  text-decoration: none;
}

a.gray {
  color: #303030;
  text-shadow: 1.0px 1.0px 1.0px #808080;
  text-decoration: none;
}

a.dark {
  color: #303870;
  text-shadow: 0.5px 0.5px 0.5px #808080;
  text-decoration: none;
}

hr.green {
  border: 4px solid #166343;
  }

hr.blgray {
  border: 4px solid #253045;
  }



/* MEDIA QUERIES */
/* Large devices only */
@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left;
    border: 0px;  
  }
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.6%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.66%;
  }
  .col-lg-9 {
    width: 74.99%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
  div.infobox {
    margin-left: 1.8%;
    margin-bottom: 2%;
  }
  div.infoboxg {
    margin-left: 1.8%;
    margin-bottom: 2%;
  }  
  div.infoboxrev {
    margin-left: 1.8%;
    margin-bottom: 2%;
  }  
}
  
/* Medium devices only */
@media (min-width: 992px) and (max-width: 1199px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left;
    border: 0px;
  }
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.3%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 48%;    
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.66%;
  }
  .col-md-9 {
    width: 74.99%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }

  h1 {
    font-size: 210%;
  }
  div.infobox {
    margin-left: 2%;
  }
  div.infoboxg {
    margin-left: 2%;
  }  
  div.infoboxrev {
    margin-left: 1.8%;
    margin-bottom: 2%;
  }  
}

/* Small devices only */
@media (min-width: 768px) and (max-width: 991px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
    border: 0px;
  }
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 37.3%;
    margin: 0px 5px 10px 20px;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58%;
  }
  .col-sm-8 {
    width: 66.66%;
  }
  .col-sm-9 {
    width: 74.99%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }

  h1 {
    font-size: 200%;
  }

}

/* Extra small devices only */
@media (min-width: 641px) and (max-width: 767px) {
  .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
    border: 0px;
    margin: 0px 10px 10px 10px;
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 46%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.66%;
  }
  .col-xs-9 {
    width: 74.99%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }

  h1 {
    font-size: 185%;
  }

  div.biobox {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 1.8%;
    float: left;
  }  
}

/* Extra-extra small devices only */
@media (max-width: 640px) {
  .col-ss-1, .col-ss-2, .col-ss-3, .col-ss-4, .col-ss-5, .col-ss-6, .col-ss-7, .col-ss-8, .col-ss-9, .col-ss-10, .col-ss-11, .col-ss-12 {
    float: left;
    border: 0px;
    margin: 0px 10px 10px 0px;
  }
  .col-ss-1 {
    width: 8.33%;
  }
  .col-ss-2 {
    width: 16.66%;
  }
  .col-ss-3 {
    width: 25%;
  }
  .col-ss-4 {
    width: 33.33%;
  }
  .col-ss-5 {
    width: 41.66%;
  }
  .col-ss-6 {
    width: 50%;
  }
  .col-ss-7 {
    width: 58.33%;
  }
  .col-ss-8 {
    width: 66.66%;
  }
  .col-ss-9 {
    width: 74.99%;
  }
  .col-ss-10 {
    width: 83.33%;
  }
  .col-ss-11 {
    width: 91.66%;
  }
  .col-ss-12 {
    width: 100%;
  }

  h1 {
    font-size: 170%;
  }

  div.biobox {
    height: 300px;
    overflow-y: auto;
    margin-bottom: 1.5%;
    float: left;
  }  
}