/* Properties that elements with class=side-box have in common */

body {
  background-color: white;
  color: black;
  margin-left: 5em;
  margin-right: 3em;
  margin-top: 0%;
}


h2{
  border-bottom: solid 2px #708090; /* slate gray */
  clear: left;
  margin-top: 2.5em;
  margin-left: -2.5em;   /*   shift to the left */
  margin-bottom: .5em;
  overflow: hidden;    /* don't crowd the menu */
  padding-right: 6px;
}


/* Shift the other headings a little bit less to the left */

h3,h4,h5,h6 {
  margin-left: -2em;
}



/* The content, which is the left part of the body */

.contents{
  width:0em;  
}

div.side-box {
  width:10.2em;
  position:absolute;
  top:0;
  font-size:80%;
  padding-left:1%;
  padding-right:1%;
  margin-left:0;
  margin-right:0;
}

/* we leave some place on the side using the margin-* properties */
#mainBox {
  margin-left:0em;
  margin-right:10.2em;
  padding-left:1em;
  padding-right:1em;
  background-color: lightgray;
}


#bottomBox {
  margin-bottom: -2em;
  margin-left:-5em;
  margin-right:-20em;
  padding-top:.5em;
  padding-left:1em;
  padding-right:1em;
  background-color: orange;
}

#topBox {
  margin-top: 0;
  margin-left:-5em;
  margin-right:-20em;
  padding-top:.5em;
  padding-bottom:0.1em;
  padding-left:1em;
  padding-right:1em;
  color: white;
  background-color: #047c56;
}

/* and then we put each side on its place */
#leftBox {
  left:0;
}
#rightBox {
  right:0;
  background-color orange;
}