body{font-family:Verdana, Geneva, sans-serif; font-size:0.95em; line-height:1.5; color:#333;background:#fff;}
@-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} } /* http://timpietrusky.com/advanced-checkbox-hack ebe8de*/

header {border-top:5px solid #d9bd13; padding:10px 5px; height:50px; min-height:50px; color:#FFF; background-color:#000;}
.txt-article {text-align: justify;}
.bar-side-1,.bar-side-2 {font-family:Georgia, "Times New Roman", Times, serif; color:#333; padding:0;text-align:center}

.content{margin-top:20px;}

.bar-side-1 .blurb {padding:0 15px; font-size:1.75em; line-height:2; font-style:italic}
.bar-side-2 .blurb {padding:0 15px; font-size:1.5em; line-height:1.5; font-style:italic;}
.teammembers{font-style: normal;line-height:1.5;font-size:0.9rem; text-align: justify}
.nobr {white-space: nowrap}

aside h1,
.box h1 {
  text-align: center;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-gap: 20px;
  font-size:120%;
  color: #fff;
} 

.blurb h1 {color:#000}

.banner-ad{display: none}
.banner-ad-image{display: none}

.boxer {
    display: grid;
    grid-gap: 5px;
    grid-template-columns: repeat(auto-fill, auto ) ;
    grid-template-rows: repeat(auto-fill, auto  );
    background-color: #fff;
    color: #444;
}

.box {background-color: #999; color: #fff; border-radius: 5px; padding: 10px; font-size: 100%; margin-bottom:10px; }
.box {display: flex; flex-direction: column;}
.box .boxcontent {flex: 1 0 auto; padding: 10px 20px;}
.box .boxfooter {flex-shrink: 0;}
.box h1:before,
.box h1:after {content: ""; align-self: center; border-top: 1px solid #000; margin-top:8px}

div.transbox {
  padding:10px; font-size:90%; color:#000;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.8;
  font-weight:bold; font-size:100%
}

.btn-bar a {padding:5px 10px}
.btn-bar a:first-child {background-color: #003366;}
.btn-bar a:nth-child(2) {background-color: #af0202;}
.btn-bar a:nth-child(3) {background-color: #000;}


h1 a:link {color:#fff;;padding:0 15px 2px 15px}

.bxA { grid-column: 1; grid-row: 1 ; }
.bxB { grid-column:  1; grid-row: 3; }
.bxC { grid-column: 1; grid-row: 2 ; }

aside .page_title {text-align:center;font-style:italic}

@supports (display: grid) {
  .page-content > *,
   {margin: 0;}
  h1 {border:none}

  .boxer h1:before,
  .boxer h1:after {
    content: "";
    align-self: center;
    border-top: 1px solid #fff;
  }
  
  .blurb  h1:before,
  .blurb h1:after {
    content: "";
    align-self: center;
    border-top: 1px solid #000;
  }
}

.toon {color:#d9bd13; font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold}
.d1892{color:#6CF;font-family:Georgia, "Times New Roman", Times, serif; font-weight:bold}
.tagline {display:none; font-size:80%; font-style:italic;}
.pprofile{color: #66c; font-weight:bold}

.page_title {font-size:150%; text-align:left;font-family:Georgia, "Times New Roman", Times, serif;}

.hidden {position:absolute; top:-999px; left:-999px}

footer{background-color:#333}


.smiley {font-size: 1.5rem; color: navy}

a{text-decoration:none; color:#00007f;}
a:hover{color:#e56038; text-decoration:underline;background-color:#000}
/* In Header */
header a {text-decoration:none; color:#fff;}
/* In Footer */
footer a {text-decoration:none; color:#aff;}

/* In-Line */
.nobr { white-space: no-wrap; }

footer h4 {margin-top:10px;}

img {max-width:100%; height: auto;}
.midigal img { width:130px;height:auto;display:inline-block	 }
.minigal img {width:60px;height:auto;display:inline-block}

/* TYPOGRAPHY */
h1 {font-size:150%; line-height:.8}/*margin:0 0 10px 10px;*/
h1 span {font-size:60%; font-style:italic}/*margin:0 0 10px 10px;*/

.banner-text h1 {text-shadow: 2px 2px #000; color: #fff; margin-bottom:20px;}

h3,h4,h5{font-weight:bold;}

h4 {font-size:100%;margin:0;}

.btn-bar { display: flex; flex-flow: row wrap; justify-content: center; margin: 10px auto 10px auto }
.btn-category { display: inline-block; margin: 0 2px; padding: 8px 16px; color: #fff; font-size: 100%; border-radius: 4px; white-space: nowrap; text-align: center }
.btn-category-plain { width:100%; display: inline-block; margin: 0 2px; padding: 8px 16px; color: #fff; font-size: 100%; border-radius: 4px; white-space: nowrap; text-align: left }
.btn-subcat { background: #4d85d1; flex: 1 1 0; }
.btn-subcat-lvl1 { background: #8156a7; flex: 1 1 0; }
.btn-support { display:inline-block; margin: 0 2px; padding:8px 16px; color: #fff; background: #244a23; font-size: 100%; border-radius:4px; white-space:nowrap; text-align:center }

q { quotes: "\201C" "\201D" "\2018" "\2019"; }
q span {font-style:italic;}

.singlequoted:before,
.singlequoted:after,
.sq:before,
.sq:after,
q:before,
q:after,
blockquote:before,
blockquote:after { font-family:Georgia, "Times New Roman", Times, serif; }

.banner {height:250px;min-height:200px; width:100%; color:#FFF; background-color:#000; position:relative; text-align:center;background-position: center left; background-repeat: no-repeat; background-size: cover;}
.banner-text {font-family:Georgia, "Times New Roman", Times, serif;text-align: center;position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.banner-text h3 {text-shadow: 1px 1px #000; color: #fff; margin-top:0;}
.banner { background-image: url("../images/bkground3.jpg"); background-image: -webkit-image-set(url("../images/webps/bkground3.webp") 1x); }

.bckgnd_westend {background-color: #003366;background-position: top left; background-repeat: no-repeat; background-size: cover;}
.bckgnd_eastend {background-color: #af0202;background-position: bottom left; background-repeat: no-repeat; background-size: cover;}
.bckgnd_black {background-color: #000;background-position: bottom left; background-repeat: no-repeat; background-size: cover; }


.bckgnd_westend {
  background-image: url("../images/imgs_index/netting.jpg");
  background-image: -webkit-image-set(url("../images/imgs_index/netting.webp") 1x);
}
.bckgnd_eastend {
  background-image: url("../images/imgs_index/LynnAtSJP.jpg");
  background-image: -webkit-image-set(url("../images/imgs_index/LynnAtSJP.webp") 1x);
}
.bckgnd_black {
  background-image: url("../images/imgs_index/training.jpg");
  background-image: -webkit-image-set(url("../images/imgs_index/training.webp") 1x);
}

@media (min-width: 600px) {
	.boxer{font-size:120%}
	.bxA {grid-column: 1; grid-row: 1;}
	.bxB {grid-column:  1 / span 2; grid-row: 2;}
	.bxC {grid-column: 2; grid-row: 1;}
	.bxD {grid-column: 2; grid-row: 2;}
	.bxE {grid-column: 1 / span 4; grid-row: 3;}
	.banner-ad{display:block;relative; top: 0; left: 0; height: 94%; overflow: hidden; padding: 0}
	.banner-ad-image{display:block; position: absolute; top: 10px; left: 10px; max-height: 92%}
}

@media all and (min-width: 800px) {
	.banner-text h1 {font-size:3em} 
	.banner-text h3 {font-size:1.75em}
}

@media all and (min-width: 1000px) {
	aside {max-width:50%}
}

@media all and (min-width: 1200px) {
	aside {max-width:20%}
	.txt-article { padding:0 20px; }
	.banner-text h1 {font-size:4em} 
	.banner-text h3 {font-size:2em}
}