/*
  File:      TMAStyle.css
  Author:    Arthur L. Farnsworth
  Purpose:   Cascading stylesheet for the Toastmaster Art page
  Created:   22 Sep 2025  From divstyle for my new Toastmaster Art page
  Revisions: 29 Jan 2026  Fix grid-template-rows lines by removing separating commas
             09 Feb 2026  Overhaul structure like LNR file
             13 Feb 2026  Work on seasonal-specific stuff
             28 Mar 2026  Add <H4> for other resources section titles, SkipToMainContent class
  Comments:  CLASS selectors start with '.', can be used on multiple tags
             ID selectors start with '#', are specific to one tag in the document
*/
/*
  HTML element type selectors
  
  First, the BODY tag, which encompasses the HEADER, MAIN, and FOOTER sections
*/
BODY {
  color: black;                          /* Text color */
  font-family: Trebuchet, sans-serif;
  font-size: 12pt;
  font-weight: normal;
  margin-left: 10%;
  margin-right: 10%;
}
  .clsSkipToMainContent {
    position: absolute;
    left: -1000px;
  }
  H1 {      /* For page title */
    font-size: 40pt;
    font-style: italic;
    text-align: center;
  }
  H2 {      /* For page subtitle */
    font-size: 20pt;
    text-align: center;
  }
  HEADER {
    padding: 2em 0em;
  }
  .BannerImage {                /* Class for IMG for main banner */
    width: auto;
    max-width: 100%;
    height: auto;
  }
/*
  --> Things that are part of the <MAIN> section
*/
  #idMain A {                   /* Set the default style for anchor tags */
    color: black;               /* Text color */
    text-decoration: none;      /* Added 1/17/26 per Chuck's class */
  }
  #idMain A:visited {           /* A link the user has visited */
    font-size: 100%;
    font-weight: normal;
  }
  #idMain A:hover {             /* A link when the user mouses over it.  MUST come after a:link and a:visited. */
    font-size: 125%;
    font-weight: bold;
  }
  #idMain A:focus {             /* A link when the user tabs to it */
    font-size: 100%;
    font-weight: bold;
  }
  #idMain A:active {            /* A link the moment it is clicked.  MUST come after a:hover. */
    background-color: white;
    font-weight: bold;
  }
  .clsGridContainer {                   /* This is the grid parent element (grid container) */
    /*border-collapse: separate;            /* Borders are separated; each cell displays its own borders (default).*/
    display: grid;                        /* Display element as block-level grid container */
    gap: 5px;                             /* Define size of gap between rows and columns.  Formerly grid-gap. */
    grid-template-columns: 15% 10% 75%;   /* Specify the number (2) and widths of the columns in a grid layout */
    grid-template-rows: auto auto auto;   /* Row size determined by size of container and on the size of the content of the row's items */
    text-align: left;
  }
  .clsRNC1 {                  /* R1C1 is NEWS title block, R2C1 is RESOURCES title block, R3C1 is CONNECT title block */
    align-items: center;        /* Vertical alignment */
    background-color: white;
    border: thick solid black;  /* Settings for the four "box" borders */
    display: grid;
    font-size: 16pt;
    font-weight: bold;
    grid-column-start: 1;       /* 12/9/25 */
    grid-column-end: 1;         /* 12/9/25 */
    padding-bottom: 0.25em;     /* Was 1.25 prior to 12/9/25 */
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 0.25em;        /* Was 2.0 prior to 12/9/25 */
  }
  .clsR1C2 {                  /* R1C2 is NEWS content image, if any */
    /*border: thin solid black;   /* Settings for the four "box" borders */
    /*grid-column-start: 2;       /* 12/9/25 */
    /*grid-column-end: 2;         /* 12/9/25 */
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
  }
  .clsR1C3 {                    /* R1C3 is NEWS content text */
    border: thin solid black;
  /*  font-size: 14pt;*/
  /*grid-column-start: 3;         /* 12/9/25 */
  /*grid-column-end: 3;           /* 12/9/25 */
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
  }
  .clsRNC2 {                  /* RNC2 is for RESOURCES YouTube logo and CONTACT TMA Blog logo */
    /*border: thin solid black;*/
    grid-column-start: 2;        /* 12/9/25 */
    grid-column-end: 2;          /* 12/9/25 */
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
    vertical-align: middle;     /* Vertical alignment of image */
  }
  .clsR2C3 {                  /* R2C3 is explanatory text for YouTube logo */ /*RESOURCES list of TMAYT channel videos */
    border: thin solid black;
    grid-column-start: 3;        /* 12/9/25 */
    grid-column-end: 3;          /* 12/9/25 */
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
  }
  .clsVideoLists {
    border: thin solid black;
    display: inline-grid;       /* 31 Jan. 2026  Inline-block didn't look good */
    height: 360px;   /* 15em; CAN"T USE AUTO              /* Reduced 2/9/2026 from 20em; */
    /*margin-inline: 10px;*/
    margin-block: 10px;
    margin-top: 1em;
    padding: 1em;               /* Reduced 2/9/2026 from 2em; */
    width: 21em;
  }
  .clsR3C3 {                    /* R3C3 is CONNECT information text column */
    border: thin solid black;
    padding-bottom: 1.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
  }
  .clsR4C3 {                    /* R4C3 is CONTACT information text column */
    border: thin solid black;
    padding-bottom: 1.25em;
    padding-left: 0.25em;
    padding-right: 0.25em;
    padding-top: 2em;
    padding-bottom: 2em;
    padding-left: 1em;
    padding-right: 1em;
    padding-top: 2em;
  }
  H3 {      /* Video Category headers */
    font-size: 15pt;
    text-align: center;
  }
  H4 {      /* For titles for other resource categories */
    font-size: 12pt;
    font-weight: bolder;
    padding-top: 2em;
    text-align: center;
  }
  FOOTER {
    font-size: 10pt;
    margin-top: 5em;
    text-align: center;
  }
/*
  -- Based on code at https://www.w3schools.com/howto/howto_css_image_responsive.asp
*/
.classResponsiveImg {         /* Added 12/9/2025 for responsive scaling of the YT logo and Blog image */
  height: auto;
  max-width: 100%;            /* Prevent scaling up to be larger than original size */
  width: 100%;
}
/*
  --> The seasonal classes set in the javascript code
*/
  .Spring {
    background-color: #00CC00;
  }
  .Spring MAIN A {              /* Set the spring style for anchor tags in the MAIN section */
    background-color: #21e6af;
    color: black;               /* Text color */
    text-decoration: none;      /* Added 1/17/26 per Chuck's class */
  }
  .Summer {
    background-color: #FFFF99;
  }
  .Summer MAIN A {              /* Set the summer style for anchor tags in the MAIN section */
    background-color: #fcf478;
    color: black;               /* Text color */
    text-decoration: none;      /* Added 1/17/26 per Chuck's class */
  }
  .Autumn {
    background-color: #FF9900;
  }
  .Autumn MAIN A {              /* Set the autumn style for anchor tags in the MAIN section */
    background-color: #FFC770;
    color: black;               /* Text color */
    text-decoration: none;      /* Added 1/17/26 per Chuck's class */
  }
  .Winter {
    background-color: #3399FF;
  }
  .Winter MAIN A {              /* Set the winter style for anchor tags in the MAIN section */
    background-color: #00cfff;
    color: black;               /* Text color */
    text-decoration: none;      /* Added 1/17/26 per Chuck's class */
  }