#navbar {
  background-color: #222222;
}

#navbar ul li {
  display: inline-block;
  padding: 5px 2%;
  padding-top:      20px;
  padding-bottom:   20px;
}

#navbar ul li a {
  text-decoration: none;
  color: #FFFFFF;
  font-size: 1em;
  padding: 5px 0;
  padding-top:      3px;
  padding-bottom:   3px;
}

#navbar ul li a:hover {
  background: blue;
  color: #CCCCCC;
  padding-top:      3px;
  padding-bottom:   3px;
}

#menu {
  float: left;
  width: 21%;
  padding: 0 2%;
  background: #DEDEDE;
  margin: 0;
}

#maincontent {
  padding: 0 2%;
}

#footer {
  background: #000000;
  color:      #FFFFFF;
  clear: both;
  width: 96%;
  padding: 20px 2%;
}

#footer a {
  color:     #FFEECC;
}

#footer a:hover {
  background: blue;
  color: #CCCCCC;
}

#container {
  max-width: 1200px;
  margin: 0 auto;
}

#header {
  background: #333333;
  color: #FFF;
}

td {
  padding-top:      3px;
  padding-bottom:   3px;
}

li {
  padding-top:      3px;
  padding-bottom:   3px;
}

@media screen and (max-width:768px) {
  #container {
    margin: 0 auto;
  }
  ul {
    margin: 0;
    padding: 0;
  }
  #navbar ul li {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    padding-top:      20px;
    padding-bottom:   20px;
    text-align: center;
  }
  #navbar ul li a {
    margin: 0;
    padding: 0;
    padding-top:      20px;
    padding-bottom:   20px;
  }
  #menu {
    display: none;
  }
  #maincontent {
    width: 100%;
    padding: 0;
  }
  h1 {
    font-size: 1em;
  }
}

<!--
a {color:#FF0000;}
a:visited {color:#00FF00;}
a:hover {color:#FF00FF;} 
a:active {color:#0000FF;}
-->