/*https://www.w3schools.com/howto/howto_css_sidebar_responsive.asp*/


.sidebar {
  margin: 0;
  padding: 10px;
  width: 200px;
  font-size: 16px;

  background:rgb(153,205,255);
  position: absolute;
  text-align:center;
  font-weight:bold;
  overflow: visible;  /* this needed for full menu on phone in landscape orientation */

}

.sidebar a {
  display: block;
  color: Blue;
  padding: 16px;
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%; 

}

.sidebar a:visited {
  display: block;
  color: Black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  color: rgb(160,82,45);   background-image:url(mcloud_here.gif); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%; 
}

.sidebar a:hover:not(.active) {

  background-image:url(mcloudh.gif); 
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80%; 
  font-size: 16px;
  color: rgb(255,0,0);
  
}

div.mcontent {
  margin-left: 200px;
  padding: 1px 16px;

}

/*  Begin Responsive Menu Section */

.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:rgb(203,224,255); border: 2px solid black;}

  .showtop {display:none;}        /* Menu at top or side - defaults to side */
  .showside {display:block;}

@media screen and (max-width: 700px) {
	.showside {display:none;}
	.showtop {display:block;}
  .sidebar {
    width: 100%;
    height: auto;
    padding: 0px 20px 0px;
    position: relative;
  }
  .sidebar a {float: left;  padding: 10px;}
  div.mcontent {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    padding: 0px;
    float: none;
  }

.sidebar a.active {
  background-size: 30%; 
}
.sidebar a:hover:not(.active) {
  background-size: 30%; 
}
.ktable {font-size:10px;}
}