:root {
     --dk-color:#ddd;
     --mid-color:#ddd;
     --lt-color:#FFFFFF;
     --dkest-color:#6e6e6e;
     --accent:#226051;
}
 html, body {
     margin:0;
     padding-top:25px;
     padding:0;
     height:98%;
     font-family: "Verdana";
     font-size:14px;
     background-repeat:repeat;
     background-attachment: fixed;
     background-color:#EEEEEE;
     color:var(--dkest-color);
     padding:1px;
     
}

 ul.list li {
     padding-bottom:5px;
}
 #container {
     max-width:835px;
     margin:0 auto;
     height:auto;
     padding-bottom: 20px;
}
 h1, h3, h5 {
     color:var(--dk-color);
}
 h2, h4, h6 {
     color:var(--accent);
}

 b {
	 color: #D1C052; 
}

 i { 
	 color: #8CB53F; 
}

 u { 
	 color: #DC1A4E; 
}

 s {
	 color: #AD5C00;
}

 g {
     color: #b6b6b6;
 }

 a, a:link, a:visited { 
	color: #4BA2B8;
	text-decoration: none;
}

 a:hover, #sidebar a:hover {
	 color: #444;
	 cursor: help;
}



 hr {
	 border-top: 1px dotted grey;
     border-style: none none dotted; 
}

 .navbar li a {
     text-decoration:none;
}
 .navbar ul {
     list-style-type:none;
     padding:0;
     padding-left:20px;
     padding-right:20px;
}
 .navbar {
     background-color:var(--lt-color);
     max-width:1000px;
     border:1px solid var(--mid-color);
     border-bottom:none;
     border-top:none;
     padding-top:5px;
     padding-bottom:5px;
     text-align:center;
}

 .date {
	 text-align: left;
	 color: #ddd;
	 font-size: 20px;
}

 .subject {
	 text-align: left;
     color: #88AD00;
     font-weight: bold;
     padding-left:10px;
     font-size: 15px;
}

 #wrapper {
     display:flex;
     flex-wrap:wrap;
     height:auto;
     width:100%;
}

 .header {
     background-color: #242424;
     font-size: 13px;
     text-decoration: none;
     position: relative;
     width: 834px;
     height: 50px;     
     line-height: 50px;
     margin-bottom: 12px;
}

 .headerlink {
     padding:2px;
     margin-left: 60px;
     letter-spacing: 1px;
}

 .headerlink:hover {
     font-style: italic;
}

 .header a {
     color: #646464;
}
     
 .footer {
     color:#adadad;
     text-decoration: none;
}

 .footer a {
     color:#adadad;
     text-decoration: none;
}


 #sidebar {
     width:200px;
     border:1px solid var(--mid-color);
     height:fit-content;
     margin-right:10px;
     background-color:var(--lt-color);
     position:fixed;
}

 .links{
	 margin: 1px; 
	 border-bottom: 1px dotted #ddd; 
	 text-align: right;
     font-weight: normal;
     padding:4px;
}

 .links:hover{
	font-style: italic;
    background-color: #f5f4f4;
}

 .content {
     padding:10px;
}
 .main-content {
     border:1px solid var(--mid-color);
     width:600px;
     padding:10px;
     height:auto;
     background-color:var(--lt-color);
     margin-left: auto; 
     margin-right: 0;
     line-height: 1.4;
}

 .userpic {
    height:100px;
    width:100px;
	position: relative;
	float: right;
	margin: 0px 0px 10px 10px;
	background-color: none;
	z-index: 15;
    border:#EEEEEE 4px solid;
}

 .images {
	 margin: 1px; 
	 text-align: center;
     font-weight: normal;
     padding:2px;
     font-size: 11px;
     color:#b6b6b6;
}
 .images img{
	 max-height: 200px;
}

 p {
     padding:5px;
}
 p a {
     color:var(--dkest-color);
     font-weight:bold;
}
 
 .navbar li {
     position: relative;
     display:inline-block;
}
 
 ul.subitems {
     padding-left:0;
     padding-right:0;
     margin-right:0;
}
 ul.subitems li a {
     padding-right:0;
     margin-right:0;
     padding-left:10px;
     padding-right:10px;
     padding-top:10px;
     display:block;
}


 @media only screen and (max-width: 835px) {
     #sidebar {
         order:2;
         width:100%;
         border-right:1px solid var(--dkest-color);
    }
     .main-content {
         order:1;
         width:100%;
         border-right:1px solid var(--dkest-color);
    }
     .navbar a {
         padding-bottom:10px;
    }
}

  /* . . scrollbar  . . */
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--dk-color) var(--lt-color);
}

  *::-webkit-scrollbar {
    width: 5px;
}

  *::-webkit-scrollbar-track {
    background: var(--lt-color);
}

  *::-webkit-scrollbar-thumb {
    background-color: var(--dk-color);
    border-radius: 10px;
    border: 1px solid var(--dkest-color);
}

 /* . . calendar  . . */
    .calendar-widget {
      margin-top:4px;
      width: 180px;
      overflow: hidden;
}

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      text-align: center;
}

    .day {
      padding: 3px;
      font-size: 12px;
      border: 1px solid #DDDDDD;
      background-color: #eee;
      margin:1px;
}

    .day.empty {
      background-color: #fff;
      border: none;
}

    .highlight {
      background-color: #fff; /* yellow highlight */
      color:#8CB53F;
}