/**************************************
LAYOUT CSS
**************************************/
.wrapper {
  width: 80%;
  margin: 0 auto; 
}

.h, .f {
  width: 100%;
}

.n, .s {
  float: left;
  margin-right: .4999%;
}

.a{
  float: right; /*float:left*/
}

.navlen, .asidelen {
  width: 16.999%;
}

.seclen {
  width: 64.999%;
}

.clearfix::before,
.clearfix::after{
    content: " ";
    clear: both;
    display: table;
}

.links {
  margin: 0;
  padding: 0;
}
.links li{
  margin: .3em 15%;
  padding: 0;
  list-style-type: none;
}

.links li a {
  margin: 0;
  padding: 0;
  border-radius: 3em;
  display: block;
  background-color: #cddc39;
  text-decoration: none;
}

.links li a:hover{
  background-color: #ffeb3b;
}

/**************************************
CSS TO MAKE THE EXAMPLE LOOK PRETTY
**************************************/

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background: #2980b9;
  color: #fff;
  font-family: Helvetica;
  text-align: center;
  margin: 0;
}

.h,
.n,
.s,
.a{
  border: 1px solid rgba(255,255,255,0.8);
  margin-bottom: 10px;
  border-radius: 3px;
}

.f {
  border: 1px solid rgba(255,255,255,0.8);
  border-radius: 3px;
}

.h, .f, .s, .a, .n {
  padding: 20px 0;
}

.s, .a, .n {
  height: 400px;
}

body{
  background-color: orange;
}

ul#menu {
    padding: 0;
}

ul#menu li {
    display: inline-block;
}

ul#menu li a {
    background-color: black;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 4px 4px 0 0;
}

ul#menu li a:hover {
    background-color: #00ff00;
}





