/*squirrel.css*/



/*start paste from htdocs 11-14-25*/
#landing-heading{
text-align:center;
color: rgba(108, 103, 97, 0.92)!important;
margin-top:2rem;
margin-bottom:1rem;
padding-top:2rem;
opacity:0.5;
border: 1px solid rgb(0, 0, 0);
border-radius: 15px; 
}

#landing-heading table{
max-width:50%;
height:auto;
overflow-x:auto;
overflow-y:hidden;
margin-left:5rem;
border-collapse: separate;
border: 1px solid rgb(93, 88, 39);
border-radius: 10px; 
padding-top:4rem;
padding-bottom:4rem;
padding-left:1rem;
padding-right:4rem;
margin-left: auto;
margin-right: auto;
 
}

#table-body-div{

overflow:hidden!important;
}


input[type=text] {
  background-color: #000000;
  color: white;
}

input[type=password] {
  background-color: #000000;
  color: white;
}



/*end paste from htdocs 11-14-25*/

/*start paste from htdocs 11-13-25*/



#fade-pic-div img{
opacity:0.2;
padding-top:6rem;
}

.referencesBufferTop{
position:fixed;
margin-top:25rem;
}

#table-width-compress-div{
overflow-x:auto;

}


#done-link-div{
padding-left:15rem;

color: rgb(211, 211, 211)!important;
}

#done-link-div a{
color: rgb(211, 211, 211)!important;
}

#done-link-div a:hover{
color: rgb(25, 134, 0)!important;
}


#section-decorate{
padding-left:2rem;
padding-right:2rem;
padding-top:2rem;
padding-bottom:1rem;
border: 1px solid rgb(90, 84, 84);
color: rgb(211, 211, 211);
background-color:rgb(1, 1, 1);
margin-top:5rem;
}

#checkmark-span{
color: rgb(35, 231, 17);
}

#mouseFeatureDiv{
padding-left:2rem;
padding-right:2rem;
padding-top:2rem;
padding-bottom:6rem;
border: 1px solid rgb(255, 255, 255);
color: rgb(211, 211, 211);
background-color:rgb(62, 23, 9);
}
#mouseFeatureDiv img{
width: 20rem;
height:20rem;
}

blockquote{
      margin-left: 40px!important; /* Adjust the value as needed */
      margin-right: 40px; /* Optional, for symmetrical indentation */
        font-size:80%;
    }

#tableStyles{
border: 1px solid rgb(142, 115, 115);
padding: 50px;
padding-left:10px;
border-spacing: 3px;
padding-top:1px;




}

#tableStyles th{
      position: sticky;
      top: 0; /* Sticks to the top of the scroll container/viewport */
      background-color: #401c1c; /* Important for covering content below */
      z-index: 1; /* Ensures the header stays above table body content */

}

#tableStyles th{
border: 1px solid rgb(73, 88, 108);
padding:10px;
text-align:center;
}



#tableStyles tr {
border-top: 1px solid rgb(72, 72, 61);
border-bottom: 1px solid rgb(72, 72, 61);
}

#tableStyles td {
border-left: 1px solid rgb(72, 72, 61);
border-right: 1px solid rgb(72, 72, 61);
text-align:left;
padding:5px;

}


/*end paste from htdocs 11-13-25*/

/*start disable 11-15-Sat
#login-table {
  padding: 100px;
  padding-bottom:20px;
  text-align: left;
  border: 5px solid #000000b3!important; 

}


#login-table td {

  text-align: left;
  border: 5px solid #000000b3!important; 
}
end disable 11-15-Sat*/



#running-squirrel{
float:right!important; 
padding-right:15rem; 
padding-bottom:1rem;
height:80px;
width:auto;
/*filter: drop-shadow(0 0 5px rgb(118, 114, 114));*/
/*filter: blur(2px);*/
/*filter: brightness(170%);*/
/*filter: contrast(100%);*/
/*filter: drop-shadow(-120px 0 5px rgb(60, 36, 3));*/
;}

#squirrelHeading{
font-size:200%;
padding-top:1rem;
padding-bottom:3rem;
color:#353535!important;
text-shadow: 0px 0px 0 rgba(0, 0, 0, 0.743), 0px 0px 0 rgba(91, 57, 46, 0.977), 0px 0px 0 rgba(0, 0, 0, 0.977), 0px 0.5px 0 rgb(111, 109, 109);
text-align:center;
}

#inline-code-span{
background-color:rgba(31, 136, 149, 0.552);
border-radius:5px;
padding:3px;
}

#markupGridContainer{
display: grid;
grid-template-columns: 1fr 1fr;	
margin-top:10rem;

border-top: 1px solid rgb(104, 70, 102);
}

#markupGridLeft{
margin-top:5rem;/*should match other*/
grid-column:1 / 2;
width:100%;
border: 1px solid rgb(104, 70, 102);
border: 1px solid rgb(0, 0, 0);
padding: 20px;
}


#markupGridRight{
margin-top:5rem;/*should match other*/
grid-column:2/3;
width:100%;
border: 1px solid rgb(97, 78, 62);
border: 1px solid rgb(0, 0, 0);
padding: 20px;
}

.language-markdown{
text-align:left!important;
font-size:200%
}



#squirrelHeading{
font-size:120%;
color:rgba(62, 23, 9, 0.47)!important;
}

#checkmark-span{
color: rgb(35, 231, 17);
}

#mouseFeatureDiv{
padding-left:2rem;
padding-right:2rem;
padding-top:2rem;
padding-bottom:6rem;
border: 1px solid rgb(255, 255, 255);
color: rgb(211, 211, 211);
background-color:rgb(62, 23, 9);
}
#mouseFeatureDiv img{
width: 20rem;
height:20rem;
}

blockquote{
      margin-left: 40px!important; /* Adjust the value as needed */
      margin-right: 40px; /* Optional, for symmetrical indentation */
        font-size:80%;
    }

#tableStyles{
border: 1px solid rgb(142, 115, 115);
padding: 100px;
padding-left:10px;
border-spacing: 3px;

}



#article.image{
opacity: 50%;
size:50%;
}


#tableStyles th{
border: 1px solid rgb(73, 88, 108);
padding:10px;
text-align:center;
}



#tableStyles tr {
border-top: 1px solid rgb(72, 72, 61);
border-bottom: 1px solid rgb(72, 72, 61);
}

#tableStyles td {
border-left: 1px solid rgb(72, 72, 61);
border-right: 1px solid rgb(72, 72, 61);
text-align:center;
padding:10px;

}

#skyline{
width:100%;
background-color:rgb(0, 0, 0);
}


body{
    background-color:rgb(0, 0, 0)!important;
    color:rgb(185, 176, 167)!important;
min-height: 100%;
max-width: 100%;
}


a.current{
color:rgba(51, 255, 0, 0.729) !important;
font-size:110%;
}


a{
color:rgba(5, 152, 30, 0.849)!important;
text-decoration:none!important;
font-size:90%;
}

a:hover{
color:rgb(139, 213, 11) !important;
text-decoration:none;
}


#outsideLink{
color:rgba(56, 142, 218, 0.374)!important;
}
#outsideLink:hover{
color:rgb(179, 148, 62) !important;
text-decoration:underline!important;
}


#small-text{
font-size:70%;
}

#error{
color:rgba(255, 119, 0, 0.899);
}


#large{
font-size:30px;
}
#concept-price{
color:rgb(255, 255, 255);
font-size:3rem;
}
#concept-mega{
color:rgb(255, 255, 255);
font-size:5rem;
font-family: Georgia, serif;
}

#concept-large{
color:rgb(112, 210, 223);
font-size:30px;
}

#concept{
color:rgb(178, 160, 78);
font-size:18px;
}

#concept-large-brown{
color:rgb(146, 20, 20);
font-size: 200%;
font-weight: 700;
}

#blog-article-div{
margin-top:80px;
padding-top:20px;
border-top: 5px solid rgb(106, 106, 106);
}

#blog-article-div h3{
text-align: center;
color:rgb(109, 109, 109)!important;
}


#blog-article-div sup a{
font-size:120%;
font-weight: bold;
color:rgb(146, 117, 20)!important;
}

#blog-article-div sup a:hover{
color:rgb(255, 196, 0)!important;
}



#font1{
/*font-family: Verdana, sans-serif;*/
font-family: Helvetica, sans-serif;
color:rgb(159, 159, 159)!important;
font-size:95%;
}


#arg2{
color:rgb(121, 141, 166)!important;
}

#otherStoriesDiv a{
color:rgba(56, 142, 218, 0.638)!important;
font-size:90%;
font-weight: 600;
}

#otherStoriesDiv{
color:rgb(139, 139, 139)!important;
font-size:90%;
font-weight: 600;
}

#split-command-grid{
display: grid;
grid-template-columns: 70% 30%;	
margin-top:1rem;
width:100%;
}

#split-command-grid-column-a{
grid-column:1/1;
max-width:100%;
margin-left:5px;
padding-left:2%!important;
padding-right:5%;
padding-bottom:2rem;
text-align:left;
border-left: 1px solid rgba(44, 28, 15);
}

#split-command-grid-column-b{
grid-column:2/2;
margin-right:1rem;
padding-left:1%;
padding-right:5%;
text-align:left;
margin-left:20px;
border-left: 1px solid rgb(0, 0, 0);
color:rgba(86, 86, 74, 0.993);
}



#navbarBottom{
display:none;
color:rgba(86, 86, 74, 0.993);
text-align:center;
width:100%;
}

#navbarInner{
    margin-top: 1rem;
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid  rgba(19, 101, 5, 0.6);
    border-top: 1px solid rgba(19, 101, 5, 0.6);
    margin-left: 1rem;
    margin-right: 1rem;

}


footer{
/*border-top: 1px solid rgba(255, 0, 0, 0.276);*/
/*border-left: 1px solid rgba(255, 255, 255, 0.276);*/
padding-top:1rem;
padding-bottom:1rem;
padding-left:10px;
color: rgba(7, 35, 1, 0.993);

}


/* At max-width or less, do this, and dont do it above max-widh
600px = 250% zoom at chrom on zpc
800px = 200%
1000 = 150% portrait, 90% landscape.. use this, 10-30Thurs1730
 */
@media screen and (max-width: 1000px) {

    #navbarBottom{
    display:inline!important;
    }

    #split-command-grid{
    display: grid;
    /*grid-template-columns: 99% 1%;	*/
    margin-top:1rem;
    width:100%;

    }

    #split-command-grid-column-a{
    grid-column:1 / span 2!important;/*fixed the issue*/
    width:100%!important;
    margin-left:5px;
    padding-left:2%!important;
    padding-right:5%;
    text-align:left;
    margin-left:1px!important;
   border-left: 1px solid rgba(44, 28, 15);
    }

    #split-command-grid-column-b{
    display:none!important;/*hide col b*/
    grid-column:0/2;
    margin-right:1rem;
    padding-right:5%;



    text-align:left;
    }

}



/* At max-width or less, do this, and dont do it above max-widh */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) {

        
    #navbarBottom{
    display:inline!important;
    }

    #split-command-grid{
    display: grid;
    /*grid-template-columns: 99% 1%;	*/
    margin-top:1rem;
    /*width:100%; turning off for left margin testing*/
    }

    #split-command-grid-column-a{
    grid-column:1 / span 2!important;
    width:100%!important;
    margin-left:5px;
    padding-left:2%!important;
    padding-right:5%;
    text-align:left;

    border-left: 1px solid rgba(44, 28, 15);
    }

    #split-command-grid-column-b{
    display:none!important;
    grid-column:0/2;
    margin-right:1rem;
    padding-left:1%;
    padding-right:5%;
    text-align:left;
    margin-left:20px;

    }

}




#topic{
color: rgb(153, 26, 26) !important;
}

#presentation-box{
background-color:rgba(37, 37, 37, 0.491)!important;
margin-left:20px;
padding:10px;
padding-right:40px;
border: 1px solid rgba(8, 179, 247, 0.883);
border-radius: 9px;
max-width:50rem;
}


/*8.5 x 11, width is 77% of height*/
#paper{
width: 385px;
height: 500px;
}

#snippet{
width:500px;
height:200px;
}

#snippet2{
width:600px;
height:400px;
}

#snippet3{
width:600px;
height:200px;
}

#snippet4{
width:500px;
height:300px;
}

#snippet5{
width:270px;
height:180px;
padding-left:3rem;
}

#snippet-square{
width:300px;
height:300px;
padding-left:3rem;
}

#snippet-square-med{
width:500px;
height:500px;
}

#snippet-square-large{
width:700px;
height:700px;
}

#snippet-rec-small{
width:500px;
height:150px;
}

#snippet-rec-med{
width:500px;
height:350px;
}


#termsForm{
border: 1px solid rgb(75, 73, 107);
padding: 100px;
padding-left:10px;
border-spacing: 5px;
}

#termsForm input{
border: 1px solid rgb(60, 50, 206);
}

#termsForm label{
border: 1px solid rgb(60, 50, 206);
}