* {box-sizing: border-box;}  /* so this is universal, which w3schools suggests */
h1, h2, h3 {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif;}
h1 {font-size: 3em;line-height: 115%; margin-top: 0 ; margin-bottom: 0;}
h2 {font-size: 2.2em;line-height: 115%; text-align: left; margin-top: 0; margin-bottom: 0;}
h3 {font-size: 1.6em;line-height: 115%; text-align: left; margin-top: 4; margin-bottom: 0;} /* h3 is esp. for school name */
h4 {font-size: 1.4em;line-height: 115%; margin-top: 0pix ; margin-bottom: 2;} /* h4 is esp. for sidebox */
h5 {font-size: 1.1em;line-height: 110%; margin-top: 2pix ; margin-bottom: 0;}   /* h5 is for small subheads in text and for school subnames for TK,BSM */
h6 {font-size: 0.6em;line-height: 100%; margin: 0;}   /* h6 is very small, no extra spacing, may be used just as spacer */

h2 + p {margin-top: 2 pix;}  /* this is called the the Adjacent sibling combinator. Without this there is too much space between <h3> and the text below it.*/
h3 + p {margin-top: 2 pix;}  /* this is called the the Adjacent sibling combinator. Without this there is too much space between <h3> and the text below it.*/
h4 + p {margin-top: 2 pix;}  /* Adjacent sibling combinator   But there is still too much space, waaay toomuch! Yet sometimes this combinator seems to work. */
h5 + p {margin-top: 2 pix;}  /* Adjacent sibling combinator. */
h5 + blockquote {margin-top: 2 pix;}  /* Adjacent sibling combinator. */
/* 7 feb 2026: Formerly these were for h3-5 +p and h5+blockquote, and always set it to 0. That is too tight on my brower, i'm trying 2 pix.. */

body {font-family: Verdana, Arial, Helvetica, sans-serif;  font-size: 1.05em;
   background-color: #e2edff;  line-height: 140%;  margin: 0; padding: 15px; }  /* border: 4px solid navy; */
.stats {font-size: 0.95em; line-height: 110%; margin: 0; padding: 3px;}

#headerimage {float: right; top: 3em; right: 2em; 
 padding-top: 0.3em; padding-right: 2em; margin-left: 2em; margin-bottom: .5em; border: none;}
#headerbox {border: 3px solid #7da5d8; padding: 0em 2em 0.3em 0.2em; margin: 1em 1em 1em 1em;}
#headerbbm {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: 3em;font-weight: 800; line-height: 115%;  padding: 10px 20px 0px 20px; margin-top: 0; margin-bottom: 0; }
#headersubhead {font-family: "Trebuchet MS", Helvetica, Arial, sans-serif; font-size: 2em;line-height: 115%; 
 padding: 10px 20px 10px 40px; margin-top: 0; margin-bottom: 0;}

#backtotop {border: 0px solid #7da5d8; padding: 0em; margin: 0em; text-align: center;}


#footerbox {border: 3px solid #7da5d8; padding: 0em 2em 0.3em 0.2em; margin: 1em 1em 3em 1em; text-align: center;}


#footer {clear: both;  bottom: 0; width: 100%; border: 3px solid #7da5d8; font-size: 70%; margin-top: 1.5em;text-align: center;}

.div-sidebox { border: 2px solid #888888; border-radius: 12px; background: LightYellow; padding: 2px 20px 10px;
box-shadow: -5px -6px rgba(136, 136, 136, .5);}

figure {border: 0px #cccccc solid; padding: 4px; margin: auto;} /* margin: 2 makes huge margins; */
figcaption {font-size: 0.9em;line-height: 125%;  color: black; font-style: italic; padding: 2px; text-align: left;}

img { max-width: 100%; height: auto; }
img.c3 { max-width: 100%; height: auto;}

.imgright {clear: right; float: right; margin: 0.5em 0em 0.5em 0.5em; border: 1px solid black}
.imgleft {clear: left; float: left; margin: 0.5em 1em 0.5em 0em;  border: 1px solid black}
.imgcenter {clear: center; float: center; margin: 0.5em 0em 0.5em 0em; border: 1px solid black}

.imgrightnb {clear: right; float: right; margin: 0.5em 0em 0.5em 0.5em; border: 0px solid black} /* no border */
.imgleftnb {clear: left; float: left; margin: 0.5em 1em 0.5em 0em;  border: 0px solid black}
.imgcenternb {clear: center; float: center; margin: 0.5em 0em 0.5em 0em; border: 0px solid black}

ul {list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #38444d; }
li {float: left; }
li a, .dropbtn {  display: inline-block;   color: white;   text-align: center;   padding: 14px 16px;   text-decoration: none; }
li a:hover, .dropdown:hover .dropbtn {  background-color: red; }
li.dropdown {  display: inline-block; }
.dropdown-content {  display: none;   position: absolute;   background-color: #f9f9f9;   min-width: 160px;   box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   z-index: 1; }
.dropdown-content a {  color: black;   padding: 12px 16px;   text-decoration: none;   display: block;   text-align: left; }
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {  display: block; }

[class*="col-"] { float: left; padding: 8px;}  /* orig: padding 15,too much between pix; but may need more above,below. padding doesnot collapse*/

.col-1 {width: 8.333%;} .col-2 {width: 16.666%;} .col-3 {width: 25%;} .col-4 {width: 33.333%;}
.col-5 {width: 41.666%;} .col-6 {width: 50%;} .col-7 {width: 58.333%;} .col-8 {width: 66.666%;}
.col-9 {width: 75%;} .col-10 {width: 83.333%;} .col-11 {width: 91.666%;} .col-12 {width: 97%;}  /* orig: col-12 width 100 made bottom box go off at right, setting to 97% fixed that.

.col-32 {width: 50%;} /* 4 pictures in the 30%wide section, with 2 shown side by side if it's wide, otherwis just 1. (Or all 4, if it's screen-wide, and under the other division) */

.column { float: left; padding: 10px;}
.column.side { width: 30%;}
.column.middle { width: 70%;}
.row::after { content: ""; display: table; clear: both;}

@media only screen and (max-width: 1000px) { [class="col-3"] {width: 50%; }}
@media only screen and (max-width: 750px) { [class="col-4"] {width: 50%; }}
@media only screen and (max-width: 550px) { [class*="col-"] {width: 100%; }}
@media screen and (max-width: 900px) {.column.side, .column.middle {width: 100%;}}

@media only screen and (max-width: 1400px) { [class="col-32"] {width: 100%; }}
@media only screen and (max-width: 900px) { [class="col-32"] {width: 25%; }}  /* at  900 width, the sidebox has become screen-width, so make pictures 4-wide*/
@media only screen and (max-width: 700px) { [class="col-32"] {width: 50%; }}