body {
    font-family: "lucida grande", Verdana, Helvetica, Arial, sans-serif;
    background-color: #006900;
    margin: 0;
    font-size: 80%;
}

a {
    color:#007A00;
    text-decoration:underline;
}

#container {
    max-width: 950px;
    margin: auto;
    border: 1px solid black;
    background-color: #828282;
}

#header {
    position: relative;
    height: 100px;
    background-image: linear-gradient(to bottom, rgb(40, 40, 40) 50%, rgb(69, 69, 69) 50%);
    background-size: 100% 4px;
    overflow:hidden;
}


    #header_menu {
         background-color: black;
         color: white;
         font-family: Arial, sans-serif;
         font-weight: bold;
         height: 15px;
         padding: 5px;
         z-index: 9;
    }

    #header_background {
         position:absolute;
         height:100px;
         opacity: 10%;
         z-index: 9;
         top: 5px;
         left:60px;
    }

    #header_logo {
         position:absolute;
         width: 250px;
         top: 22px;
         left: 5px;
         z-index: 99;
    }

#subcontainer {
    margin:5px;
    max-width:940px;
    display:grid;
    gap: 5px;
    grid-template-areas:
      "sidebar content";
}

    #content {
         background-color: white;
         border: 1px solid black;
         text-align:center;
         z-index: 9;
         grid-area: content;
    }

    #menu {
        background-color: #646464;
        border-bottom: 1px solid black;
        height:38px;
        margin-bottom: -55px;
        z-index: 99;
    }

    #content > div.page {
         display: none;
         padding: 5px 25px 5px;
         max-width:940px;
         padding-bottom:2em;
         text-align:left;
         z-index: 999;  
    }

    #content > div.page.error {
          display: inherit;
    }


         input {
              display: none;
         }

         label {  
              display: inline-block; 
              padding: 6px 13px 6px 32px;
              font-weight: 600; 
              text-align: center;
              margin:20px 0 0 -35px;
              background-color: #9C9C9C;
              color: white;
              text-shadow: 0px 0px 2px black;
              border-top: 2px solid #B1B2B1;
              border-left: 2px solid #B1B2B1;
              border-bottom: 2px solid #505050;
              border-right: 2px solid #505050;
              border-radius: 4px;
         }

         label:hover {
              cursor: pointer;
         }

         input:checked + label {
            background-color: #868686;
            border-bottom: 2px solid #9f9f9f;
            border-right: 2px solid #9f9f9f;
            border-top: 2px solid #505050;
            border-left: 2px solid #505050;
            cursor: default;
         }

         #tab1:checked ~ .page#content1,
         #tab2:checked ~ .page#content2,
         #tab3:checked ~ .page#content3 {
              display: block;
         }

         img.button-88x31 {
               width:88px;
               height:31px;
         }

         img.button_img {
              width:50px;
              height:50px;
              position:relative;
              top:20px;
              margin-top:-20px;
         }

         #id {
              margin:0px 20px 20px 5px;
              float: right;
         }

         #id-error {
               margin:10px 20px 10px 10px;
               float:left;
         }

         .iconlist {
              text-align:center!important;
         }

            .iconlist img {
                margin:1em;
            }

            .iconlist img {
                transition: transform 250ms;
            }

            .iconlist img:hover {
                transform: scale(2.0);
            }

         img.icon {
              height:50px;
              width:50px;
         }

         img.icon-med {
              height:75px;
              width:75px;
         }

         img.icon-large {
              height:100px;
              width:100px;
         }

         .contentbox {
              background-color: #F3F3F3;
              border: 1px solid #C9C9C9;
              padding: 5px;
              clear: both;
              margin: 30px 0;
              overflow: hidden;
         }

         .contentbox h3 {
            margin-top: 5px;
         }

         .iconbox {
            display:flex;
            justify-content: space-evenly;
         }

         .iconbox>div {
            margin:5px;
            text-align:center;
         }


         img#forum-styles {
            float: right;
            width: 300px;
            max-width: 100%;
            margin: 10px;
            border: 1px solid black;
            
         }

     #sidebar {
          grid-area: sidebar;
     }

          .side-content {
               background-color: #404040;
               border: 1px solid black;
               color: white;
               width:140px;
               padding: 5px;
               margin-bottom: 5px;
               text-align:center;
          }

               .side-content:last-child {
                    margin-bottom: 0px;
               }

               .side-content a {
                    display:inline-block;
                    height:0px;
               }

               .side-content img {
                    margin-bottom: 10px;
               }

               .side-content .icon, .side-content .icon-med {
                    border: 1px solid black;
               }

               .side-content h4 {
                         margin:0px 0px 5px 0px;
                         padding:5px 10px 10px;
                         text-shadow: 1px 1px 1px black;
                         background-color: #404040;
                         color: white;
               }

               .side-content p {
                    margin:5px;
               }

               .side-alt {
                    width:150px;
                    padding:0px;
                    background-color: white;
                    color:black;
              }

               .side-alt h4 {
                         padding:10px 10px 10px;
                         border-bottom: 1px solid black;
                    }

               .side-image {
                         max-width:150px;
                         margin-bottom: -3px!important;
                         padding:0;
               }


#footer {
    min-height: 30px;
    background-color: black;
    color: white;
    padding: 15px 25px;
    text-align: center;
}

@media (prefers-color-scheme: dark) {

    body {
        background-color: #004c00;
        filter: brightness(0.8);
    }

    a {
        color:#00CC00;
    }

    #content {
        color: #F3F3F3;
        background-color:#404040;
    }

    .contentbox {
        background-color: #303030;
        border: 1px solid black;
    }

}

    
@media screen and (max-width: 600px) {

    #subcontainer {
          margin-bottom:0px;
          grid-template-areas:
               "content"
               "sidebar";
    }

    #sidebar {
         display: flex;
         flex-wrap: wrap;
    }

    .side-content {
          width:40%;
          flex-grow: 2;
     }

     .side-content:last-child {
          margin-bottom: 5px;
     }

     .side-alt {
          margin-left:5px;
     }

    img#forum-styles {
        float: none;
        margin: auto;
        min-width: 100%;
     }


}