body{
  margin:0px;
}
 
 /* The side navigation menu */
.sidenav1,.sidenav2,.sidenav3 {
  border: 1px solid #383737;
  height: 100%; /* 100% Full-height */
  position: fixed; /* Stay in place */
  top: 0; /* Stay at the top */
  left: 0;
  overflow-x: hidden; /* Disable horizontal scroll */
  padding-top: 36px; /* Place content 60px from the top */
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav1 {
  width: 12px; /* 0 width - change this with JavaScript */
  background-color: #111; /* Black*/
  z-index: 105; /* Stay most top */
}
 .sidenav2 {
  width: 24px; /* 0 width - change this with JavaScript */
  background-color: #1F1F1F; /* Black*/
  z-index: 104;
}
.sidenav3 {
  width: 36px; /* 0 width - change this with JavaScript */
  background-color: #111; /* Black*/
  z-index: 103;
}

/* The navigation menu links */
.sidenav1 a,.sidenav2 a,.sidenav3 a {
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  display: block;
  transition: 0.5s;
  white-space: nowrap;
}
.sidenav1 a{
  padding: 8px 2px 8px 6px;
}
.sidenav2 a {
  padding: 8px 2px 8px 6px;
}
.sidenav3 a {
  padding: 8px 2px 8px 6px;
}

/* When you mouse over the navigation links, change their color */
.sidenav1 a:hover {color: #ddf6f5;}
.sidenav2 a:hover {color: #ddf6f5;}
.sidenav3 a:hover {color: #ddf6f5;}

/* Position and style the close button (top right corner) */
.sidenav1 .closebtn,.sidenav2 .closebtn,.sidenav3 .closebtn {
  position: absolute;
  top: -4px;
  right: 25px;
  font-size: 28px;
  margin-left: 50px;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}


/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#mainContentBox {
  border: 1px solid red;
  transition:0.5s;
  padding: 10px;
  margin-left: 38px;
  z-index: 88; /* Stay most bottom*/
}



/* customize by Michael Au */
.BAR01,.BAR02,.BAR03 {
  position: absolute;
  top: 12px;
  font-size: 26px;
  margin-left: 22px;
  font-family:Arial;
  font-size: 15px;
  font-weight:bold;
  color: #818181;
  white-space: nowrap;
  transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.BAR01 {left: 0px;}
.BAR02 {left: 292px;}
.BAR03 {left: 580px;}

hr.line1 {width: 270px;text-align: center;} 
hr.line2 {width: 268px;margin-right:10px;} 
hr.line3 {width: 318px;margin-right:10px;} 


#Open_HandleA,#Open_HandleB,#Open_HandleC  {
  position: absolute;
  font-family:Arial;
  font-size: 10px;
  font-weight:bold;
  color: #818181;
  z-index: 188; /* Stay most top */
  transition:0.5s;
  transform: rotate(-90deg);
  -ms- transform: rotate(-90deg); 
  -moz- transform: rotate(-90deg); 
  -webkit- transform: rotate(-90deg); 
  -o- transform: rotate(-90deg); 
  filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
} 

#Open_HandleA {top: 15px;left: -9px;} 
#Open_HandleB {top: 60px;left: 3px;} 
#Open_HandleC {top: 105px;left: 15px;}   

.main_content
{
  border: 1px solid blue;
  width: 200px;
  margin-left: 26;
}

.sidenavBox1,.sidenavBox2
{
  border: 0px dotted Blue;
  width: 280px;
  position: absolute;
  right: 0px; 
}

.sidenavBox3
{
  border: 0px dotted Blue;
  width: 330px;
  position: absolute;
  right: 0px; 
}

.sidenavTable1,.sidenavTable2,.sidenavTable3
{
  border: 0px dotted orange;
  width: 98%;
}


.Tittle_A
{
  padding: 8px 2px 8px 6px;
  text-decoration: none;
  font-family:Arial;
  font-size: 15px;
  font-weight:bold;
  color: #c5c3c3;
  white-space: nowrap;
}

.Cell_01, .Cell_02, .Cell_03 {
  padding: 8px 2px 8px 6px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
}


.Cell_01aa, .Cell_02aa, .Cell_03aa {
  padding: 8px 2px 8px 6px;
  text-decoration: none;
  font-size: 15px;
  color: #818181;
  text-align:center
}






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