body {
  margin: 0;
  padding: 0;
  line-height: 1.5em;
}

header {
  background-color: black;
  font-family: Arial;
}

#contentwrapper {
  float: left;
  width: 100%;
}

#contentcolumn {
  margin: 0 230px 0 230px;
}

#leftcolumn {
  float: left;
  width: 230px;
  margin-left: -100%;
  background-color: #24C8FF;
}

#rightcolumn {
  float: left;
  width: 230px;
  margin-left: -230px;
  background-color: #FFFB00;
}

.innertext {
  margin: 20px;
  font-family: Arial;
  color: #5E5E5E;
}

footer {
  clear: left;  /* can't float on left */
  width: 100%;
  background-color: black;
  color: #FFF;
  font-family: Arial;
  text-align: center;
  padding: 4px;
}

/* https://developer.mozilla.org/fr/docs/Web/HTML/Element/nav */
header ol {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

header li {
  display: inline-block;
  border-right: 1px solid #bbb;
}

header li:last-child {
  border-right: none;
}

header li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* set hover bg color except home */
header li a:hover:not(.active) {
  background-color: #808080;
}

/* set home bg color at top-left corner */
.active {
  background-color: #0099ff;
}

/* responsive layout CSS */
@media (max-width: 840px) { /* drop right col down */
  #leftcolumn {
    margin-left: -100%;
  }

  #rightcolumn {
    float: none;
    width: 100%;
    margin-left: 0;
    clear: both;
  }
  #contentcolumn {
    margin-right: 0; /* inherit left margin, remove right margin */
  }

  @media (max-width: 600px) { /* drop left col down */
    #leftcolumn {
      float: none;
      width: 100%;
      clear: both;
      margin-left: 0;
    }

    #contentcolumn {
      margin-left: 0;
    }
  }
}