body {
    background:#E7EDF2 url(/new/images/background.png) fixed;
    font-family:calibri, Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color:#8b3f00;
    letter-spacing: 1px;}

    html{
        cursor: url("/new/images/cursor.png"), auto;
    }
     
    #wrapper {
    margin: 0 auto;
    width: 570px;}


      
    #navigationwrap {
    width: 570px;
    float: left;
    margin: 0 auto;}

#navigation {
    height: 20px;
    line-height:20px;
    background: #fffefe;
    border-width:7px;
    border-style: solid;
    border-image: url("/new/images/windowborder.png") 8 fill round;
    margin: 5px;
    padding:5px;
}
      
#navigation a:link, a:visited, a:active {font:11px monospace;
  text-transform:uppercase;line-height:20px;
  padding:4px; letter-spacing:1px;margin-right:10px;}
      
  #navigation a:hover {background:#fffefe;
  text-transform:uppercase;line-height:20px;
  padding:4px; letter-spacing:1px;margin-right:10px;}
  

.twocolumn {
    display: grid;
    grid-template-columns: 45% 55%;
}
#contentwrap {
    width: 400px;
    float: left;
    margin: 0 auto;}

#content {
    background: #fffefe;
    border-width:7px;
    border-style:solid;
    border-image: url("/new/images/windowborder.png") 8 fill round;
    margin: 5px;padding:5px;}

#rightcolumnwrap {
    width: 170px;
    float: left;
    margin: 0 auto;}

#rightcolumn {
background: #fffefe;
border-width:7px;
border-style:solid;
border-image: url("/new/images/windowborder.png") 8 fill round;
margin: 5px;padding:5px;}

#footerwrap {
    width: 570px;
    float: left;
    margin: 0 auto;
    clear: both;}

#footer {
    height: 20px;
    background: #fffefe;
    border-width:7px;
    border-style:solid;
    border-image: url("/new/images/windowborder.png") 8 fill round;
    line-height:20px;
    margin: 5px;
    text-align:center;}    
.gridcontainer {
  display:grid;
  gap:0;
  grid-template-columns: 50% 50%;
  justify-content: center;
}
.gridcontainer div {
}
.pccontainer {
  display: grid;
  grid-template-columns: 30% 30% 30%;
  background-color: #ffb678;
  border: 2px solid #8b3f00;
  padding: 3%;
  justify-content: center;
  gap: 4%;
  aspect-ratio: 3/2;
  border-radius: 0 0 6px 6px;
}
        
.pccontainer div {
  display: flex;
  background-color: #ffebdb;
  border: 2px solid #8b3f00;
  aspect-ratio: 1/1;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  grid-template-rows: auto auto;
}

.pcboxcontainer {
  display: grid;
  grid-template-columns: 15% 15% 15% 15% 15% 15%;
  background-color: #ffd8b8;
  border: 2px solid #8b3f00;
  padding: 2.5%;
  justify-content: center;
  gap: 2.5%;
  aspect-ratio: 6/4;
  border-radius: 0 0 6px 6px;
}
        
.pcboxcontainer div {
  display: flex;
  background-color: #ffebdb;
  border: 2px solid #8b3f00;
  aspect-ratio: 1/1;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  grid-template-rows: auto auto;
}

      
::-webkit-scrollbar-thumb {
background-color: #ef7b19;
border-radius: 4px;}
::-webkit-scrollbar {
width: 12px; height: 4px;
background-color: #ffb678;}

   
.title {background:#ffb678;text-transform:uppercase;font:10px monospace; letter-spacing:3px;color:#8b3f00;padding:4px;padding-left:4px;margin-bottom:4px;line-height:8px;}
.title2 {background:#ffb678;text-transform:uppercase;letter-spacing:3px;color:#8b3f00;padding:4px;padding-left:4px;margin-bottom:4px;font:10px monospace;line-height:8px;}
.pctitle {background:#ff8f31;text-transform:uppercase;color:#8b3f00;padding:4px;padding-left:4px;border-radius:6px 6px 0 0;border-top:2px solid #8b3f00; border-left:2px solid #8b3f00; border-right:2px solid #8b3f00; line-height:8px;}

.pcboxtitle {background:#ffb678;text-transform:uppercase;color:#8b3f00;padding:4px;padding-left:4px;border-radius:6px 6px 0 0;border-top:2px solid #8b3f00; border-left:2px solid #8b3f00; border-right:2px solid #8b3f00; line-height:6px;}
    

    
b {color:#ef7b19;}
smaller {font-size:smaller;}
    	
a:link, a:visited{ 
color:#8b3f00;text-decoration:none;}
a:hover {
cursor: url("/new/images/shinycursor.png"), auto;
color:#ffb678;}



.slidecontainer {
  width: 100%; /* Width of the outside container */
}

/* The slider itself */
.slider {
  -webkit-appearance: none;  /* Override default CSS styles */
  appearance: none;
  height: 8px; /* Specified height */
  background: #fffefe;
  outline: none; /* Remove outline */
  opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
  -webkit-transition: .2s; /* 0.2 seconds transition on hover */
  transition: opacity .2s;
}
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 8px; /* Set a specific slider handle width */
  height: 8px; /* Slider handle height */
  background: #be5700; /* Green background */
}