/* Basd on TRPC Responsive CSS.
 * Original Authors Alan Rutherford, Greg Patterson 
 * August 20, 2018  
 * December 9, 2018
 * -------
 * Revised to improve responsivenesss.
 * Ted Baker
 * February, 2019
 * Revised to adapt for Gabriel Wu Lee art pages
 * August, 2024
 */

/* Notes:

   I make use of calc() to do "responsive"
   adjustments to variations in viewport proportions
   and dimensions.
   However, I read the Android phones only very recently support it,
   and I don't own any Android devices, on which to test it.
   So, I have put in alternate sizings, e.g.
     height: auto;
     height: calc(100% - 18px);

   I have done similarly for uses of transform, e.g.
     -o-transform: translate(-50%, -50%);
     -webkit-transform: translate(-50%, -50%);
     -moz-transform: translate(-50%, -50%);
     -ms-transform: translate(-50%, -50%);
     transform: translate(-50%, -50%);

   The above works because browsers skip over stuff they 
   do not support, and always apply the last specification.

   There are lots of other newer CSS features that would help
   with responsive layout, such as flex-boxes, and variables.
   However, it seems they are also not yet widely supported,
   and not so easilty worked around.

   The color scheme is what I inherited, namely:
      ivory for white
      #0F8913 for green
      #14131E for dark backgrounds, taken by eyedropper
       from the background of the eagle graphic in the banner

   The following rules simplify responsive positioning and sizing:
   
   1) The initial/default formatting is for "portrait" orientation
      and a typical smart phone.
   2) At the end of this file there are @media() rules to
      adjust for other orientations and dimensions.
   3) For sanity, the adustments try to maintain fixed proportions 
      for the four main regions of the view:
         #topmatter (banner and top navigation menu)
         the main body, a division of class "pagecontent"
         #footer
      The adjustment rules also try to address each of these three
      regions independently.
   4) Also, for sanity, boxes generally have no specifc margins or padding.
      They are added in a few places, where necessary only.
      Preference is given to padding over margin, because
      padding does not modify external dimensions of a block.
      Margin "auto" is used for hosizontal centering.
   5) Explicit whitespace is minimized, for benefit of devices
      with small viewports.  The appearance on such devices is
      crowded.  However, inevitably, for larger devices, the
      amount of whitespace grows.  I have made a few
      adjustments to fill the space on such devices, but my
      experiments so far (while avoiding new CSS features
      that are not yet universally supported) have not been
      very successful.
   6) Font sizes (e.g. 14px for body) are fixed,
      except as explicitly adjusted for responsiveness.
      Blocks sized to hold text depend on this, and
      need corresponding adjustments if font size is changed.
      **********************************************************
        Any changes to base font sizes will require refiguring
        all of the @media cut-off values!!!
      **********************************************************

   It turns out that whitespace is important when using inline-block.
   If you have any whitespace between blocks in the HTML it will show up
   one the page.  To allow indentation, and keep the HTML reasonably
   readable, I've inserted comments that include the line breaks and
   gobble up spaces between divs that may be formatted as inline-block
   in the CSS.

   --Ted Baker (February 2019)
 */

/* Global/default styling
   --------------
 */
* {
  box-sizing: border-box; /* for sane dimensioning */
  margin: 0;  /* top right bottom left */
  padding: 0;  /* top right bottom left */
  border: none;
}
hr {
   border: 1px solid ivory
}
html, body {
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   top: 0;
   left: 0;
   font-family: helvetica, arial, sans-serif;
   font-size: 14px;
   font-weight: normal;
   text-decoration: none;
   background-color: ivory;
   color: black;
   overflow: auto;
}
/* clearfix is a hack purported to prevent floats
   from escaping a division, but I am phasing out
   floats in favor of inline-blocks.
 */
.clearfix {
  overflow: auto;
}
/* top-level divisions
   -------------------
   body contains:
   #topmatter (from file inc/InsertTop.txt)
   #main, or other div of class .pagecontent
   #footer (from file inc/InsertFoot.txt)

   We keep these at fixed proportions of the 
   viewport, and position them absolutely:
   #topmatter: 15%;
   #main:      80%;
   #footer:     5%;

 */
#topmatter {
  width: 100%;
  height: 15%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  overflow: visible; /* to allow drop-down of menu */
  background-color: ivory;
  color: black;
  text-align: center;
}
#main, .pagecontent { 
  height: 80%;
  width: 100%;
  display: block;
  position: absolute;
  top: 15%;
  left: 0;
  background-color: ivory;
  overflow: auto;
}
/* footer not currently used
*/
#footer {
  width: 100%;
  height: 5%;
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
  background-color: #09330f;
  color: ivory;
  overflow: hidden;
}
/* #topmatter contains:
    #banner (containing home page name and logo
    #mainmenu (class .topnav)
    return-to-top anchor: #pagetopanchor
 */
#banner {
  width: 100%;
  height: auto;
  height: calc(100% - 18px);
  display: block;
  position: absolute;
  top: 0;
  bottom: 18px;
}
.topnav {
  width: 100%;
  height: 18px;
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  text-align: left;
  background-color: #09330f;
}
/* #banner contains:
    img .seal
    div .hpname
    img .eagle
 */
#banner .hpname {
  width: 50%;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 50%;
  -o-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #063b09;
  z-index: 5; /* allow overlay of graphics */
}
#banner .hpname p {
  width: auto;
  font-size: 24px;
  font-weight: bold;
  text-align: center;
  text-shadow:
    2px 2px 0 ivory,
   -2px 2px 0 ivory,
   -2px -2px 0 ivory,
    2px -2px 0 ivory;
  margin: 0;
  padding: 0;
}
#banner img.seal {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
}
#banner img.eagle {
  display: inline-block;
  position: absolute;
  top: 0;
  right: 0;
  width: auto;
  height: 100%;
}
/* normally, links are in-line, variable-width
   However, they are morphed if viewport width is narrow enough.
   (See end of file.)
 */
.topnav a {
   display: inline-block;
   width: auto;
   height: 18px;
   text-align: left;
   padding: 2px 5px 2px 5px; /* top right bottom left */ 
   text-decoration: underline;
   color: ivory;
}
.topnav a:hover {
   color: #09330f;
   background-color: ivory;
}
/* the menu link only appears when the viewport is too narrow for the
   horizontal menu
 */
.topnav a.menuicon {
   display: none;
   width: 5em;
}
/* #footer division has dark background color
   footer paragraphs may include either centered text,
   or a left piece and right piece
   .leftfoot and .rightfoot text are intended for a single line
   but may stack vertically if there is not enough width
 */
#footer a {
   color: ivory;
   text-decoration: underline;
}
#footer a:hover {
   color: #09330f;
   background-color: ivory;
}
#footer p {
  padding: 5px 5px 2px 5px;  /* top right bottom left */
  font-size: 14px;
}
.leftfoot {
  float: left; 
  text-align: left;
}
.rightfoot {
  float: right; 
  text-align: right;
  }
/* For the home page, #main contains:
   #hpinfo
   #hpslides
*/
/* for pages that use hpslides */
#hptitle { 
  height: 35px;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  vertical-align: middle;
}
#hpinfo {
  width: 100%;
  height: 45%;
  height: calc(50% - 10px);
  display: inline-block;
  position: relative;
  top: 10px;
  vertical-align: top;
  overflow: hidden;
}
#scrollinfo {
  width: 100%;
  height: 45%;
  height: calc(50% - 35px);
  display: inline-block;
  position: relative;
  top: 35px;
  vertical-align: top;
  overflow: auto;
}
#hpslides  {
  width: 100%;
  height: 50%;
  display: inline-block;
  position: relative;
  top: 10px;
  color: black;
  vertical-align: top;
}
/*
   #hpinfo contains text
   It moves around, as necessary, to fit the format.
 */
/* slideshow
 */
.hpslide {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
.hpslide img {
  display: block;
  object-fit: contain;
  max-width: 100%;
  max-height: 90%;
  max-height: calc(100% - 3em);
  position: absolute;
  top: 45%;
  top: calc(50% - 11px);
  left: 50%;
  -o-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
#hpslides .hpslide p {
  /* for caption */
  width: 80%;
  width: calc(100% - 3em);
  display: block;
  text-align: center;
  padding: 0;
  height: auto;
  position: absolute;
  left: 50%;
  bottom: 1em;
  -o-transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  font-style: italic;
  overflow: visible;
  background-color: transparent;
  text-shadow:
    1px 1px 0 ivory,
   -1px 1px 0 ivory,
   -1px -1px 0 ivory,
    1px -1px 0 ivory;
}
#hpslides button {
   display: inline-block;
   font-size: 25px;
   width: 1.25em;
   height: auto;
   color: #09330f;
   background-color: transparent;
   opacity: 0.99;
   z-index: 3; /* allow overlay of image */
   border: 2px solid #09330f;
}
#hpslides .triangle-right:hover {
   border-left: 15px solid ivory;
   background-color: #09330f;
   margin-left: 10px;
   color: ivory;
}
#hpslides .triangle-left:hover {
   border-right: 15px solid ivory;
   background-color: #09330f;
   margin-right: 10px;
   color: ivory;
}
.triangle-left {
 display: inline-block;
 font-size: 25px;
 color: #09330f;
 background-color: transparent;
 opacity: 0.99;
 z-index: 3; /* allow overlay of image */
 width: 0;
 height: 0;
 border-top: 15px solid transparent;
 border-right: 15px solid #09330f;
 border-bottom: 15px solid transparent;
 position: absolute;
 left: 0;
 bottom: 0.5em;
}
.triangle-right {
 display: inline-block;
 font-size: 25px;
 color: #09330f;
 background-color: transparent;
 opacity: 0.99;
 z-index: 3; /* allow overlay of image */
 width: 0;
 height: 0;
 border-top: 15px solid transparent;
 border-left: 15px solid #09330f;
 border-bottom: 15px solid transparent;
 position: absolute;
 right: 0;
 bottom: 0.5em;
} 
button.right {
 position: absolute;
 right: 0;
 bottom: 0.5em;
}
button.left {
 position: absolute;
 left: 0;
 bottom: 0.5em;
}
/* calendar page formatting
 */
iframe.calendar {
   width: 100%;
   min-height: 700px;
}
/* -------------------
   pagecontent details
   -------------------
 */
/* Tables
 */
.pagecontent table {
  border: 1px solid black;
}
.pagecontent td {
  border: 1px solid black;
  text-align: center;
}
.pagecontent td.image {
    max-width: 20%;
}
td.header {
  font-weight: bold;
}
/* Links 
 */
a {
   color: #09330f;
}
a:hover {
   color: #09330f;
   background-color: ivory;
}
/* Fonts
 */
.larger {
  font-size: 16px;
  text-align: center;
}
/* Paragraphs
 */
p {
  padding: 0 10px 5px 10px; /* top right bottom left */ 
  text-align: left;
}
/* Headings
 */
h1 {
  text-align: center;
  display: block;
  font-size: 18px;
  font-weight: bold;
  padding: 5px 0 5px 0;  /* top right bottom left */
}
h2 {
  text-align: center;
  display: block;
  font-size: 16px;
  font-weight: bold;
  padding: 5px 0 5px 0;  /* top right bottom left */
}
h2.left {
  text-align: left;
}
h3 {
  text-align: left;
  display: block;
  font-weight: bold;
  padding: 5px 10px 5px 10px;  /* top right bottom left */
}
h3.centered {
  text-align: center;
}
/* Items for contact info.
 */
.unboxed {
   display: inline-block;
   text-align: left;
   width: 50%;
   vertical-align: top;
}
/* Lists
 */
ul {
  margin: 0 0 0 12px; /* top right bottom left */ 
  padding: 0 10px 5px 10px; /* top right bottom left */ 
}
ul.lower-latin {
  list-style-type: lower-latin;
}
ul.decimal {
  list-style-type: decimal;
}
li {
  margin: 0 0 3px 10px; /* top right bottom left */ 
}
/* images
 */
img.thumb {
  max-width: 100px;
  max-height: 100px;
  object-fit: contain;
  display: inline-block;
}
img.med {
  max-width: 40%;
  object-fit: contain;
  max-height: 300px;
  display: inline-block;
}
img.large {
  width: 100%;
  display: inline-block;
}
.caption {
  text-align: center;
  font-style: italic;
}
.red {
  color: red;
}
img.scaled {
  width: 100%;
}
img.limited {
  max-width: 100%;
}
img.top {
  max-height: 150px;
  display: inline-block;
}
img.withborder {
  border: 1px solid black;
}
.question {
  font-style: italic;
  font-size: 12px;
  color: brown;
}
/* two-column format */
div.left {
  display: inline-block;
  max-width: 50%;
  vertical-align: top;
}
div.right {
  display: inline-block;
  max-width: 50%;
  vertical-align: top;
}
div.image {
  display: inline-block;
  max-width: 50%;
  vertical-align: top;
}
img.hlf {
  display: inline-block;
  object-fit: contain;
  max-width: 50%;
  vertical-align: middle;
}
/* "responsiveness" adjustments
   ----------------------------
   all assume the following fixed ratios
   #topmatter: 15%;
   .pagecontent: 80%;
   #footer: 5%;

   adjustments within #topmatter
   -----------------------------

   Increase percent width of hpname
   if screen is very wide in proportion to height.
 */
@media (min-aspect-ratio: 2/3) {
   #banner .hpname {
     width: 70%;
   }
}
/* Increase size of font for hpname
   if screen is very wide.
 */
@media (min-width: 1000px) {
   #banner .hpname p {
      font-size: 30px;
   }
}
/* Shift hpname to the right for 
   very narrow viewports.
 */
@media (max-aspect-ratio: 45/100) {
  #banner .hpname {
    left: 60%;
  }
}
/* reduce font for home page name for small viewports
   18px seems OK for height down to about 460px
   and width down to about 300px.
   If we want to handle smaller viewports another rule
   will be needed.
 */
@media (max-width: 380px) and (max-height: 720px),
       (max-width: 750px) and (max-height: 570px) {
   #banner .hpname p {
      font-size: 18px;
   }
}
/* reduce menu bar to single icon, if space is cramped

   Class responsive is added to #mainmenu .topnav
   in response to the menu icon link being clicked,
   by javascript function in inc/InsertTop.txt.

   The effect is to expand menu icon to full menu, but as a
   drop-down
 */

@media (max-height: 400px), (max-width: 425px) {
  .topnav.responsive {
    width: 11em;
    overflow: visible;
    opacity: 0.99;
    z-index: 2; /* allow overlay of page content */
  }
  .topnav a {
    display: none;
  }
  .topnav a.menuicon {
    display: block;
  }
  .topnav.responsive a {
    background-color: #09330f;
    color: ivory;
    display: block;
    width: 100%;
    text-align: left;
  }
  .topnav.responsive a:hover {
    background-color: ivory;
    color: #09330f;
  }
}
/* thicken menu bar if it wraps
 */
@media (max-width: 760px) and (min-width: 426px) and (min-height: 401px) {
 .topnav {
    height: 36px;
 }
 #banner {
    height: auto;
    height: calc(100% - 36px);
  }
}
/* adjustments within #footer
   --------------------------
   squeeze footer if viewport is not tall enough
   progressive reductions:
   1) reduce font from 14px to 12px
   2) drop newsponsor plug
   3) drop NRA membership plug
   4) drop sponsor plug
 */
@media (max-width: 682px), (max-height: 560px) {
 #footer p {
   font-size: 12px;
 }
}
@media (max-width: 590px) and (max-height: 660px) {
 #footer p.option1 {
   display: none;
 }
}
@media (max-height: 500px), (max-width: 357px) {
  #footer p.option2 {
    display: none;
  }
}
@media (max-height: 500px) and (max-width: 357px), (max-width: 247px) {
  #upperfooter {
    display: none;
  }
}
/* adjustments specific to #main of the home page
   ---------------------------------------------
 */
/* one item per line, if screen is narrow
 */
@media (max-width: 400px) {
  .unboxed {
     width: 100%;
  }
}
/* move slideshow to right (landscape mode) if viewport is wide enough
   and for very small viewports, reduce slide width
 */
@media (min-width: 400px) and (min-aspect-ratio: 1/1) {
  #hpinfo, #scrollinfo {
    width: 68%;
    height: 90%;
    height: calc(100% - 35px);
  }
  #hpslides {
    width: 32%;
    height: 90%;
    height: calc(100% - 35px);
  }
}
@media (min-width: 500px) and (min-aspect-ratio: 1/1) {
  #hpinfo, #scrollinfo {
    width: 63%;
    height: 90%;
    height: calc(100% - 35px);
  }
  #hpslides {
    width: 37%;
    height: 90%;
    height: calc(100% - 35px);
  }
}
@media (min-width: 600px) and (min-aspect-ratio: 1/1) {
  #hpinfo, #scrollinfo {
    width: 50%;
    height: 90%;
    height: calc(100% - 35px);
  }
  #hpslides {
    width: 50%;
    height: 90%;
    height: calc(100% - 35px);
  }
}
@media (min-width: 1100px) and (min-aspect-ratio: 1/1) {
  #hpinfo, #scrollinfo {
    width: 40%;
    height: 90%;
    height: calc(100% - 35px);
  }
  #hpslides {
    width: 60%;
    height: 90%;
    height: calc(100% - 35px);
  }
}

/* Some ideas for future tuning:

? If viewport is large, size up the slide area?

@media (min-height: 1000px) and (min-width: 700px){
  #hpinfo, scrollinfo {
    height: 30%;
  }
  #hpslides {
    height: 60%;
  }
}

? Give up on slideshow if viewport is really small?

@media (max-width: 480px) and (max-height: 480px) {
  #hpslides {
    display: none;
  }
}

? Enlarge font sizes in body and footer, if viewport is very large?

? Do we want any adjustments to main (.pagcontent) area for pages
  other than the home page?

*/