/*
**************************************************************** 
** © 2026 SIDUGEC Software Technology Co and Keith A Ujvary   **
**                 Oliver BC - CANADA                         **
**                 ALL RIGHTS RESERVED.                       ** 
**                   www.sidugec.com                          ** 
**************************************************************** 
*/
/* 
    Created on : 24-May-2026, 12:49:22 PM
    Author     : Keith
*/

@media only screen { 
    @charset "UTF-8";

    @font-face {
        font-family: "SCRIPTBL";
        src: url("../fonts/SCRIPTBL.ttf");
        src: url("../fonts/SCRIPTBL.eot");
        src: url('../fonts/SCRIPTBL.woff2') format('woff2'), url('../fonts/SCRIPTBL.woff') format('woff');
    }


    :root {
        --dark-color: rgb(158,54,32);
        --darker-color: rgb(128,0,0);
        --light-color: rgb(219,200,172);
        --lighter-color: rgba(239,220,198,.82);
    }


    /* scroll bar width */
    ::-webkit-scrollbar {
        width: 15px;
    }

    /*  scroll bar Track */
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 5px rgb(219,200,172);
        border-radius: 10px;
    }

    /*  scroll barHandle */
    ::-webkit-scrollbar-thumb {
        background: rgb(158,54,32);
        border-radius: 10px;
    }


    html, body {
        margin: auto;
        height: 100%;
        overflow: hidden; /* Optional: prevents scrollbars if image is larger */
        margin:auto;
    }

    a{
        font-family: Times New Roman, serif;
        font-style: italic;
        color:var(--darker-color);

    }
    body {
        margin:auto; 
        background-image: url("../images/background.png") ;
        background-repeat:no-repeat;
        background-size:cover;
        background-position: center;
        text-align: center;  
        min-width: 1250px;
        max-width: 1250px;
        background-color: var(--light-color);  
    }

    .bold{
        font-weight:bold;
    }

    button,.button{
        background-color:var(--dark-color);
        color:var(--light-color); 
        font-family: Arial,sans-serif;;
        font-size: 1.1rem;
        text-shadow: rgb(35,26,15) .1rem .1rem;  
        text-align:center;
        border: var(--light-color)  outset .2rem;  
        border-radius: .5rem;
        text-decoration: none;
        padding-top:.5rem;
        padding-bottom:.5rem;  
        margin-left:.03rem;
        width:7rem;
        font-weight:580;

    }

    .buttondisabled{ 
        opacity:40%;

    }
    .slimbutton{
        font-size:.9rem;
        padding:.2rem;
        width:6rem;
    }

    .fullwidth{ 
        float:left;
        width:100%; 
        overflow-y: scroll;
    }

    #calendarcontrols{
        margin-top:9rem;
    }
    .calendartable{
        width:99%;
        border-collapse:collapse;
        background-color: var(--lighter-color);
        border:2px solid var(--dark-color); 
        margin-top:.1rem;

    }
    .calendartable th {
        border:2px solid var(--dark-color); 
        width:14%;
        vertical-align: top; 
        color:var(--light-color);
        text-shadow: .3px .3px black; 
        background-color: var(--dark-color);  
    } 

    .calendartable td{
        border:2px solid var(--dark-color); 
        width:14%;
        vertical-align: top; 
    } 

    .calendartable .today{
        border:4px solid var(--dark-color); 
        background-color: palegoldenrod;
    } 
    .calendartable td div{
        max-height: 8.5rem;
        width:75%;
        overflow-y: auto; 
        float:left;  
        margin-left:.5rem;
    } 
    .calendartable td .datenumber{
        float:left; 
        font-size:1.5rem;
        color:var(--light-color);
        background-color: var(--dark-color) ;
        width:2rem;
        text-align: center;
        border:var(--light-color);
    }
    .calendartable td div span{
        cursor: pointer;
        font-size:1.1rem;
        font-weight:bold;
    }
    .calendartable td div span::before{
        content:"• ";
    }

    .calendartable tbody tr{ 
        height: 8rem;
    }

    .scrollcalendar{
        display:block;
        height:45rem;
        overflow-y:scroll;
        margin-left:2rem;
    }

    .tablecaption{
        font-size:1.8rem;
        font-weight:bold;
        margin-left:6rem;
        margin-right:6rem;  
        color: var(--dark-color);

    }

    canvas{
        border:inset 4px var(--light-color);
        border-radius:2rem;
    }

    .tinybutton{
        background-color:var(--dark-color);
        color:var(--light-color); 
        font-family: Arial,sans-serif;;
        font-size: .8rem;
        text-shadow: rgb(35,26,15)  .02rem  .02rem;  
        border: rgb(35,26,15)  outset .2rem;  
        border-radius: .4rem; 
        padding:.1rem;
        padding-left:.7rem;
        padding-right:.7rem;       

    }

    summary{
        background-color: var(--dark-color);
        color: var(--light-color);
        text-align:left;
        content-align:left; 
        font-size:1.5rem;
    }

    details{
        font-size:1.2rem;
        text-align:left;
        border:var(--dark-color) 1px solid;
        margin-bottom:.5rem;
        background-color: var(--lighter-color); 
    }
    details p{
        font-family:Times New Roman, serif;
    }

    h1,h2,h3,h4{
        font-family: SCRIPTBL,script;
        color: var(--dark-color);  
        margin-top:-.6rem;
        margin-bottom:-.8rem;
    }
    h1{
        font-size: 4rem;
        text-shadow: white .15rem .15rem; 
    }
    h2{
        font-size: 3rem;
        text-shadow: white .1rem .1rem;  
    }
    h3{
        font-size: 2.5rem;
        text-shadow: white .05rem .05rem;  
    }

    h4{
        font-size: 2.0rem;
        text-shadow: white .05rem .05rem;  
    }
    hr{
        border-top: var(--dark-color) ridge .2rem;
    }

    .thinline{
        border-top: var(--dark-color) solid .02rem;
        margin-bottom:-1rem;
        margin-left:3rem;
        margin-right:3rem;
    }


    .banner{
        font-size:1.5rem;
        font-weight:bold;
        text-align:center;
        color:var(--darker-color);
    }

    .programtitle{
        font-size:1.3rem;
        font-weight:bold;
        border:1px solid var(--color-darker);
    }

    .gallerybodydiv,
    .resourcesbodydiv{
        width: 92%;
        margin:auto;
        margin-top:8rem;
        height:80%;
        overflow:scroll;
        background-color: var(--lighter-color); 
        padding:.5rem;
    }
    .resourcesbodydiv{ 
        font-size:1.2rem;

    }

    .gallerydiv,
    .resourcesdiv{  
        width:32%;
        float:left;
        padding:.1rem;  
        margin-left:.5rem;
        text-align: center;
        content-align:center;
    }

    .resource{
        margin-bottom: .1rem; 
    }

    .gallerydiv img {
        padding:.2rem;
        width:80%;
    }  

    .resourcesdiv img{
        width:40%;
        margin-bottom:-2rem;
    }  

    .resourcesdiv img{
        padding :2rem;
    }  
    .gallerytitle,
    .resourcestitle{
        font-size:1.2rem;
        font-weight:bold;
        color: white;
        text-shadow: black .04rem .04rem; 
        background-color: var(--dark-color); 
        padding:.3rem;
        display: inline-block;
        margin:auto;
        border: black 3px solid;
        border-radius:1rem;
        text-aling:center;
        margin-bottom:1rem
    }


    .headerdiv{
        padding:.1rem;  
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9e3620+0,dbc8ac+100&1+99,0+100 */
        background: linear-gradient(to bottom,  rgba(158,54,32,1) 0%,rgba(218,199,171,1) 99%,rgba(219,200,172,0) 100%); 
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color:white;
        font-family: SCRIPTBL,serif;
        font-size:3rem;
        text-shadow: var(--dark-color) .18rem .18rem;
        font-weight:bold;
        text-align:left;
        vertical-align: middle;
        position:fixed;
        top:3rem;
        margin:auto;
        width:1250px; 
        min-width:1250px; 
        opacity:1;
        z-index: 2;  
    }

    .headerdiv .logo{ 
        margin-right:1rem;
        margin-top:.2rem;
        float:left;
        border:3px ridge var(--dark-color);
        height:3rem;
    }
    .logoright{ 
        float:right; 
    }
    .logoright img{ 
        height:3.5rem;
        margin-right:1rem;
        margin-top:.2rem; 
    }

    .headerdiv  .headertext{
        margin-top:.1rem;
        float:left;
        text-align: left;
    } 


    .programheaderdiv{
        position:fixed;
        top:0rem;
        margin-bottom:0px; 
    }

    .hidden{
        display:none;
    }
    .italic{
        font-style:italic;
    }

    .justifyleft{
        text-align:left;
    }

    .left{
        float:left;
    }

    .leftonethirdwide{
        margin:1rem;
        margin-top:4rem;
        font-family:tahoma,sans-serif;
        font-size:1.2rem;
        color:rgb(0,55,55);
        width:25rem;
        padding:1px;
        vertical-align: top; 
        float:left;
    }

    .logo{
        height:8rem;
        margin:1.5rem;
        border:var(--dark-color) ridge .7rem;
        border-radius: 9rem;
    }

    .longtext{
        font-family:tahoma,sans-serif;
        font-size:1.2rem;
        color:rgb(0,55,55);
        margin:2rem;
        margin-top:4rem;
        float:left;
        width:55%;
    }
    .mainpanel{ 
        background-color: var(--lighter-color);  
        color: var(--darkerer-color);  
        margin-top:6rem;
        font-family:Times New Roman,sans-serif;
        font-size:1.2rem; 
        font-weight:500;
        padding-left:2rem;
        padding-right:2rem;
        padding-top:2rem; 
        height:100%;
    }

    .programmainpanel{ 
        margin-top:3rem; 
    }



    .narrowbutton{
        width:2.5rem !important;
        font-size: 1.8rem; 
        padding-bottom:.1rem; 
        padding-top:.01rem; 
    }
    .newsdiv{
        width:85%;
        margin:auto;
        margin-top:8rem;
        height:80%;
        overflow:scroll;
        background-color: var(--lighter-color); 
        padding:2rem;
        font-size:1.2rem;
        text-align:left;
    }
    .newsheading{
        font-size:2rem;
        text-align:center;
        background-color: var(--darker-color); 
        color:var(--light-color); 
        text-shadow: black .05rem .05rem; 
        border:black solid 3px;
        border-radius:1rem;
        margin-bottom:.5rem;
    }

    .newsitemleft{
        padding:1rem;
        margin-bottom:2rem;
        width:45%;
        float:left; 
    }

    .newsitemright{
        padding:1rem;
        margin-bottom:2rem;
        width:45%;
        float:right;
    }

    .newsimage{
        margin-bottom:1.5rem;
        text-align:center;
    }





    .registrationdiv{
        margin-top:2rem;
        max-height:60%;
        overflow: scroll; 
    }

    .registrationdiv p{
        font-family:Times New Roman,serif;
    }

    .selectionsdiv{
        width:25%;
        float:left;
        height:45rem; 
        overflow: scroll;
        border-right:1px solid var(--dark-color);
        border-left:1px solid var(--dark-color);
    }

    .selectionconfirmationdiv{
        max-height:15rem; 
        overflow: scroll;
    }

    .smalltext{
        font-size:1.3rem;
        font-style:italic;
    }

    .smallertext{
        color:black;
        font-size:.9rem;
    }

    .alternatenewsletter{
        background-color: white;
        border:5px var(--dark-color) outset;
        padding:.5rem;
        font-size:1.3rem; 
        margin-left:2rem;
        margin-right:.5rem;
    }
    .normalnewsletter{
        background-color: var(--lighter-color);
        border:5px var(--dark-color) outset;
        padding:.5rem;
        margin-right:2rem;
        margin-left:.5rem;
        font-size:1.3rem; 
    }

    .flash {
        animation: flash .5s linear 4 ;
    }

    @keyframes flash {
        50% {

            text-decoration:underline;
            background-color:var(--dark-color);
            color:var(--light-color);
        }
    }

    .flash2 {
        animation: flash2 .5s linear 4 ;
    }

    @keyframes flash2 {
        50% {
            background-color:white;
        }
    }

    .programdiv{
        height:45rem; 
        overflow: scroll;
    }

    .programscrolllist{
        margin:auto;
        margin-top:rem;
        width:90%;
        height:43rem; 
        overflow:scroll;
        background-color: transparent;
        border:2px grey solid; 
        padding:1rem; 
    }

    .programfixedleft{
        position:relative;
        top:2rem;
        left:0;
    }

    .programfixedright{
        position:relative;
        top:2rem;
        left:2%;
    }
    .narrowlist{
        width:70%;
        text-align:left;
        margin:auto;
    }

    .signupacknowlegepanel{
        background-color: var(--lighter-color);  
        color: var(--dark-color);  
        height:100%;
        width:60%; 
        margin:auto;
        margin-top:8rem;
        font-family:Times New Roman,sans-serif;
        font-size:3rem; 
        font-weight:500;
        padding-left:2rem;
        padding-right:2rem;
        padding-top:2rem; 
    }

    .signuppanel{
        background-color: var(--lighter-color);  
        color: var(--darkerer-color);  
        height:100%;
        width:60%; 
        margin:auto;
        margin-top:8rem;
        font-family:Times New Roman,sans-serif;
        font-size:1.2rem; 
        font-weight:500;
        padding-left:2rem;
        padding-right:2rem;
        padding-top:2rem; 
    }
    .signuppanel input,
    textarea{  
        font-size:1.1rem;
    }

    .signuppanel label{  
        font-weight:bold;
    }

    .ul{
        text-decoration:  underline;
    }


    .newsdiv .newsitem .lefttext{
        float:left; 
        width:65%;
        padding-bottom:3rem;
    }

    .newsdiv .newsitem .rightimage{
        max-width:28%;
        float:right;
        margin-left:1rem;
        padding-right:3rem;
    }

    .newsdiv .newsitem .rightimage img{
        height:auto;
        max-width:97%; 
    }


    .redmessage{
        margin:auto;
        margin-top:.5rem;
        background-color: white; 
        color:red;
        font-size:1.9rem;
        font-family: Time New Roman, serif;
        font-style: italic;
        font-weight:bold;
        text-align: center;
        width:50%;
        border: red solid 1px;
    }


    .scrolllist{
        margin:auto;
        margin-top:3rem;
        width:90%;
        height:78%;
        max-height:78%;
        overflow-y: auto;
        background-color: transparent;
        border:2px grey solid; 
        padding-left:.25rem;
        padding-right:.25rem; 
    }
    .selectedbutton{
        color:var(--dark-color);
        font-weight:580;
        background-color:var(--light-color); 
        border: var(--light-color) inset .2rem;  
        text-shadow: white .04rem .05rem;  
    }

    .selectioninfo{
        text-align:left;
    }

    .separator{
        font-size:.7rem;
        font-weight:bold;
        color:var(--light-color);
        background-color: var(--dark-color);
        border-radius: .7rem;
    }

    .sideheader{
        font-size:1.5rem;
        font-weight:bold; 
    }
    #contactusform div{
        margin-top:2rem;
    }

    #coursesdiv{
        margin-top:3rem;
        height:45rem !important;
        background-color:var(--lighter-color);
        width:80%;
        margin:auto;
    }


    #logodiv{
        margin-top:8rem;
    }

    #leftpanel{
        background-color:background-color: transparent;  ;  
        width:55%; 
        height:100%;
        float:left;
        overflow-wrap:  normal;
        padding-left:5rem;
        padding-right:5rem;
        padding-top:2rem; 
        margin-left:2rem;
        text-align:left;
        border-right: var(--dark-color) solid 1px ;
    }
    #rightpanel{
        background-color: transparent;  
        font-size:1.2rem;
        height:40rem;
        max-width:20%; 
        float:right; 
        overflow-wrap:  normal;
        overflow:scroll;
        margin-right:2rem;
        text-align:left;
        padding-left:2rem;
        padding-right:2rem;
        padding-top:2rem; 
    }
    #mainPageText{
        font-family: SCRIPTBL,script;
        color: var(--dark-color);
        font-size: 12rem;
        text-shadow: rgb(35,26,15) .28rem .4rem; 
        margin-top: 9rem; 

    }

    #menu{
        background-color: var(--dark-color);
        position: fixed;
        top:0;
        width:1250px;
        height:6rem;
    }
    #newsletterdiv{
        display:inline-block;
        width: 40%;
        content-align:center;
        margin:auto;
        margin-top:9rem;
        background-color: var(--lighter-color);
        height:75%;
        overflow-y: scroll;
    }


    /*.button{
        background-color:rgb(107,80,47) ;
        color:rgb(219,200,172);
        font-family: Arial,sans-serif;;
        font-size: 1.5rem;
        text-shadow: rgb(35,26,15) .1rem .1rem;  
        border: rgb(35,26,15)  ridge .6rem;  
        border-radius: .5rem;
        text-decoration: none;
        padding-left:1rem;
        padding-right:1rem;
        padding-top:.5rem;
        padding-bottom:.5rem;  
        
        width:12rem;
    }*/
}