/* The sidebar menu */
.sidenav {
  /*height: 100%;  Full-height: remove this if you want "auto" height */
  /*width: 25%;  Set the width of the sidebar */
 /* position: fixed;  Fixed Sidebar (stay in place on scroll) */
 /* z-index: 1;  Stay on top */
 /* top: 0;  Stay at the top */
  /*left: 0;*/
  background-color:#bcddff; /* Black */
 /* overflow-x: hidden; /* Disable horizontal scroll */
 padding-top:2%;
 padding-bottom:2%; 
  height: 100%;
  width:25%; 
  float:left;
}

/* The navigation menu links */
.sidenav a {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
  color: #f1f1f1;
}

/* Style page content */
.main {
  margin-left: 25%; /* Same as the width of the sidebar */
  padding: 0px 15px;
  height:auto;  
 
}


/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
} 

/* Side images ndichimaita hangu madiki */
 .img {
            width: 99%;
            max-width: 100%;
            height: 99%;
           
  }

#header{
  height: 80px;
  width:100%;
  background-color:darkblue;
  text-align:center;
}
#side-bar-left{
  height: 100%;
  width:20%;
  background-color:#BCDDFF;
  float:left;
}
#body{
  height: 100%;
  width:100%;
  background-color:green;
  float:left;
}
#right{
  height: 100%;
  width:10%;
  background-color:yellow;
  float:left;
}
#footer{
  clear: both;
  height: 80px;
  width:100%; 
  background-color:#0099CC; 
  text-align:center;
}
 .scroll-down{
  height:400px;
  overflow-y: scroll;
}