* {
  box-sizing: border-box;
}

:root {
  --menu-pos: absolute;
}





body {
    margin: 0;
    font-family: Arial, sans-serif;

    background-color:  transparent;
    color:   #008899;

}

 body {
        margin: 0;
        font-family: Arial, sans-serif;
        background-color:  transparent;
        color: #008899;
    }




.grid-container {
    display: grid;
    grid-template-rows: auto auto 1fr auto auto;


        grid-template-columns: 200px 1fr max-content;

    grid-template-areas:
        "header header header"
        "nav nav nav"
        "aside main right-aside"
        "footer footer footer"
        "footer2 footer2 footer2";

    background-color:  transparent;
                  background: transparent;

    min-height: calc(100vh - 40px);

    gap: 2px;
    padding: 2px;

    /* Outer border */
    border: 1px solid  silver;

    /* Space from the screen edges */
    margin: 2px;


    box-sizing: border-box;
}



/* Border around every block */


/* Border for every section */
.grid-container > * {
    border: 1px solid silver;
    box-sizing: border-box;
    background-color: transparent;
}

header {
    grid-area: header;
    background: transparent;
    color:   #005566;
    padding: .3rem;
    text-align: center;

}

nav {
    grid-area: nav;
    background: #aaeecc;
    padding: .2rem;
}




    /* ... rest of your CSS ... */
    aside {
        grid-area: aside;
        background: transparent; /* Changed from #f4f4f4 so it doesn't look white */
        padding: 1rem;
    }



main {
    grid-area: main;

     background:  #aaeecc;
      /* or
             transparent;
       background: #aaeecc;

        */
    padding: 1rem;
}

.right-aside {
    grid-area: right-aside;
    background:   transparent;
    padding: 1rem;
}

footer {
    grid-area: footer;
    background:  transparent;

    padding: 1rem;
    text-align: center;
}

.footer2 {
    grid-area: footer2;
    background:  transparent;

    padding: 1rem;
    text-align: center;
}



a {
    text-decoration: none;
    color: black;
}





/*--------------*/



/*
 * theme-dark-bright.css
 * Dark background (same wood texture as the original "dark" theme)
 * but with lighter, higher-contrast text and brighter link colours.
 *
 * Loaded by theme_switch.php when the cookie/query is "dark-bright".
 */

/* ============================================================
   CUSTOM PROPERTIES — dark-bright palette
   ============================================================ */

:root {
  --menu-pos: absolute;

  --clr-bg-image:          url("Wud004.jpg");
  --clr-bg-color:          #3a5040;          /* slightly deeper than original #557755 */

  /* text — stepped up from the originals toward white */
  --clr-text-p:            #b8f0f0;          /* was #88d0d0 */
  --clr-text-b:            #f8fff0;          /* was #e4ffb8 */
  --clr-text-h1:           #afefef;          /* full white */
/*  --clr-text-h2:           #a4eff0;*/

    --clr-text-h2:        #04ffb8;


  --clr-text-h3:           #a4fff0;

  --clr-text-h33:          #e0ffb0;          /* was #c4df98 */

  --clr-text-h34:          #55ddee;          /* was #c4df98 */

  --clr-text-h4:           #ffd8aa;          /* was #ddbb88 */
  --clr-text-td:           #f0ffdc;          /* was #e4ffb8 */
  --clr-text-th:           #ffffff;

  /* links — more saturated / brighter than originals */
  --clr-a-base:            #f4ffd0;          /* was #e4ffb8 */
  --clr-a-visited:         #e8d8ff;          /* was #d0c8ef */
  --clr-a-active:          #44ffff;          /* was #00f0f8 */
  --clr-a-hover:           #ffddaa;          /* was #ffc8a0 */
  --clr-a-links:           #ffe030;          /* was #DDCC11 — more vivid gold */

  /* table cells */
  --clr-td-head:           #44ddff;          /* was #00BBff */
  --clr-td-caution:        #44ee44;          /* was #00BB00 */
  --clr-td-aut:            #44ee44;
  --clr-td-news-bg:        #ffe0ff;          /* was #FFCCff */
  --clr-td-news-text:      #111111;

  /* accents */
  --clr-emph:              #ff4444;          /* was #FF0000 — softer red */
  --clr-text-class:        #4444ff;

  /* sidenav backgrounds */
  --clr-sidenav-bg:        rgba(160, 240, 220, .14);  /* was .1 — slightly more visible */
  --clr-sidenav-h3:        #ddfff0;                    /* was #cceedd */

  --clr-sidenavCLEI-bg:    rgba(60, 80, 110, .32);    /* was .27 */
  --clr-sidenavCLEI-h3:    #ddfff0;

  /* toggle buttons (sitting on a dark bg) */
  --clr-btn-bg:            rgba(60, 90, 60, 0.88);
  --clr-btn-text:          #f4ffd0;
  --clr-btn-border:        #b8f0f0;
  --clr-btn-hover-bg:      rgba(100, 150, 100, 0.92);
}

/* ============================================================
   TOGGLE BUTTON BAR
   ============================================================ */
.theme-toggles {
  position: fixed;
  top: 14px;
  right: 18px;
  z-index: 9999;
  display: flex;
  gap: 1px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 1px;
  background: var(--clr-btn-bg);
  color: var(--clr-btn-text);
  border: 1.5px solid var(--clr-btn-border);
  border-radius: 24px;
  padding: 5px 14px 5px 9px;
  font-family: Arial, Sans-Serif;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.25s;
}

.theme-toggle:hover {
  background: var(--clr-btn-hover-bg);
  color: var(--clr-btn-text);
}

.theme-toggle.active-theme {
  border-width: 2.5px;
  font-weight: bold;
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.theme-toggle .icon {
  font-size: 16px;
  line-height: 1;
}

/* ============================================================
   BASE STYLES
   ============================================================ */

A.links {
  color: var(--clr-a-links);
  font-family: Times, Serif, Courier, "Courier New", Sans-Serif, Verdana;
  font-stretch: extra-condensed;
}

A {
  color: var(--clr-a-base);
  font-family: Times, Serif, Courier, "Courier New", Sans-Serif, "Arial Cyr", Arial, Sans-Serif;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
  font-stretch: extra-condensed;



}

a:visited  { color: var(--clr-a-visited); }
a:link     { color: var(--clr-a-base);    }
a:active   { color: var(--clr-a-active);  }
a:hover    { color: var(--clr-a-hover);   }

a.visited  { color: var(--clr-a-visited); }
a.link     { color: var(--clr-a-base);    }
a.active   { color: var(--clr-a-active);  }
a.hover    { color: var(--clr-a-hover);   }

.text {
  color: var(--clr-text-class);
}

body {
  background-color: var(--clr-bg-color);
  background-image: var(--clr-bg-image);
  background-repeat: repeat;
  background-attachment: fixed;
}

p {
  color: var(--clr-text-p);
/*  font-size: 12pt;*/
}

b {
  color: var(--clr-text-b);
  font-family: Sans-Serif, Arial;
  font-weight: bold;
}

h1 {
  color: var(--clr-text-h1);
  font-family: Sans-Serif, "Arial Cyr", Verdana;
  font-size: 14pt;
  font-style: normal;
  font-weight: bold;
  vertical-align: top;
  text-align: center;
}

h3 {
  color: var(--clr-text-h3);
  /*
  font-family: Sans-Serif, "Arial Cyr", Verdana;
  */
  font-size: 12pt;
  font-style: normal;
  font-weight: bold;
  vertical-align: top;
  text-align: center;


  font-family: Sans-Serif, Serif, Times,Courier, "Courier New",  Verdana;
  font-stretch: extra-condensed;

}

h33 {
  text-align: center;
  color: var(--clr-text-h33);
  font-family: "Arial Cyr", Verdana, Sans-Serif;
  font-size: 12pt;
  font-style: normal;
  font-weight: bold;
  vertical-align: top;
}

h4 {
  color: var(--clr-text-h4);
  font-family: Serif, Times, "Arial Cyr", Verdana, Sans-Serif;
  font-weight: bold;
  text-align: center;
}

emph {
  color: var(--clr-emph);
  font-family: Arial, Sans-Serif, Verdana;
  font-size: 10pt;
  font-weight: bold;
}

th {
  color: var(--clr-text-th);
  font-family: Sans-Serif, Arial;
  font-size: 13.5pt;
  font-weight: bold;
}

th.text {
  color: var(--clr-text-th);
  font-family: Sans-Serif, Arial;
  font-size: larger;
}

td {
  color: var(--clr-text-td);
  font-family: Times, Sans-Serif, Arial;
}

td.head {
  color: var(--clr-td-head);
  font-family: "Arial Cyr", Arial, Sans-Serif;
  font-size: 13pt;
  font-style: normal;
  font-weight: bold;
  vertical-align: top;
}

td.caution {
  color: var(--clr-td-caution);
  font-family: "Arial Cyr", Arial, Sans-Serif;
  font-size: 11pt;
  font-style: normal;
  font-weight: bold;
  vertical-align: middle;
}

td.aut {
  color: var(--clr-td-aut);
  font-family: "Arial Cyr", Arial, Sans-Serif;
  font-size: 11pt;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
}

td.news {
  background-color: var(--clr-td-news-bg);
  color: var(--clr-td-news-text);
  font-family: "Arial Cyr", Verdana, Sans-Serif;
  font-size: 10pt;
  font-weight: normal;
  padding: 3px;
  vertical-align: top;
  width: 30px;
}

td.text {
  color: var(--clr-text-td);
  font-family: "Arial Cyr", Verdana, Sans-Serif;
  font-size: 11pt;
}

td.p {
  color: var(--clr-text-td);
  font-family: "Arial Cyr", Verdana, Sans-Serif;
  font-size: 11pt;
}

/* ── sidenavNIA ── */
.sidenavNIA {
  position: var(--menu-pos);
  z-index: 1;
  top: 30%;
  left: 2%;
  background-color: var(--clr-sidenav-bg);
  opacity: 0.95;
  filter: alpha(opacity=95);
  font-stretch: condensed;
  overflow: auto;
  padding-top: 30px;



}

.sidenavNIA h3 {
  color: var(--clr-sidenav-h3);
  font-family: Serif ,"Arial Cyr", Verdana, Sans-Serif;
    font-stretch: extra-condensed;

  text-align: center;
}

.sidenavNIA A.links {
  color: var(--clr-a-links);
  font-family: Times, Serif, Courier, "Courier New", Sans-Serif, Verdana;
  font-stretch: extra-condensed;
}

.sidenavNIA A {
  color: var(--clr-a-base);
  font-family: Times, Serif, Courier, "Courier New", Sans-Serif, "Arial Cyr", Arial, Sans-Serif;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
  font-stretch: extra-condensed;
}

/* ── sidenavNIACLEI ── */
.sidenavNIACLEI {
  position: relative;
  z-index: 1;
  top: 30%;
  left: 2%;
  background-color: var(--clr-sidenavCLEI-bg);
  opacity: 0.95;
  filter: alpha(opacity=95);
  font-stretch: condensed;
  overflow: auto;
  padding-top: 30px;
}

.sidenavNIACLEI A.links {
  color: var(--clr-a-links);
  font-family:  Serif, Times, Courier, "Courier New", Sans-Serif, Verdana;
  font-stretch: extra-condensed;

  font-size: 11pt;

}

.sidenavNIACLEI A {
  color: var(--clr-a-base);
  font-family: Serif, Times, Courier, "Courier New", Sans-Serif, "Arial Cyr", Arial, Sans-Serif;
  font-style: normal;
  font-weight: normal;
  vertical-align: middle;
  font-stretch: extra-condensed;

  font-size: 11pt;
}

.sidenavNIACLEI h3 {
  color: var(--clr-sidenavCLEI-h3);
  font-family: Serif, Times, "Arial Cyr", Verdana, Sans-Serif;
  font-size: 11pt;
  text-align: center;
}

/* ── demo content padding ── */
.demo-content {
  max-width: 860px;
  margin: 60px auto 40px auto;
  padding: 2px 3px;
}




h2 {
  color: #04ffb8;
  font-family: Sans-Serif, Arial Cyr, Verdana;
  font-size: 14pt;
  vertical-align: top;

   font-stretch: extra-condensed;


}





        
         /*
div {
  color: #44f0b8;
  font-family: Sans-Serif, Arial Cyr, Verdana;
  font-size: 12pt;
  vertical-align: top;

   font-stretch: extra-condensed;

}
           */


div {
  color: #44f0b8;
  font-family: Geneva, Arial, Sans-Serif, Arial Cyr, Verdana;

  vertical-align: top;

  font-size: 12pt;

   font-stretch: condensed;

}



b {
  color: var(--clr-text-b);
  font-family: Sans-Serif, Arial;
  font-weight: bold;
   font-stretch: extra-condensed;
}


.sidenavNIA A {
  font-size: 11pt;  /* or 14px, or 1.1em, etc. */
                  font-family: Sans-Serif, Arial;
   font-stretch: extra-condensed;

}



h2 {
  color: #22f0d8;
  font-family: Geneva, Arial, Sans-Serif, Arial Cyr, Verdana;

  vertical-align: top;

  font-size: 15pt;

   font-stretch:  extra-condensed;

}




h3 {
  color: #44f0b8;
  font-family: Geneva, Arial, Sans-Serif, Arial Cyr, Verdana;

  vertical-align: top;

  font-size: 14pt;

   font-stretch:  extra-condensed;

}





h34 {
  color: var(--clr-text-h34);
  /*
  font-family: Sans-Serif, "Arial Cyr", Verdana;
  */
  font-size: 14pt;
  font-style: normal;
  font-weight: bold;
  vertical-align: top;
  text-align: center;


  font-family: Sans-Serif, Serif, Times,Courier, "Courier New",  Verdana;
  font-stretch: extra-condensed;

}

.sidenavNIACLEI h34 {
  color: var(--clr-sidenavCLEI-h34);
  font-family: Serif, Times, "Arial Cyr", Verdana, Sans-Serif;
  font-size: 14pt;
  text-align: center;
}




           /*
<!-- HTML -->
<h34 class="product-title">Products:</h34>
             */



<!-- CSS -->
.product-title {
/*  color: hsl(180, 100%, 50%);  HSL color */
         color:  #55ddee;

   font-size: 14pt;
  font-family: Sans-Serif, Serif, Times,Courier, "Courier New",  Verdana;
  font-stretch: extra-condensed;

}