@font-face {
  font-family: "Icon";
  src: url(http://www.godbolt.me/fonts/modernpics-webfont.ttf) format('truetype'), url(http://www.godbolt.me/fonts/modernpics-webfont.woff) format('woff'), url(http://www.godbolt.me/fonts/modernpics-webfont.eot) format('embedded-opentype'), url(http://www.godbolt.me/fonts/modernpics-webfont.svg) format('svg');
}

* {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

nav {
  margin: 0;
  z-index:1000;
}
nav ul {
  margin: 0;
  padding: 0;
  z-index:1000;  
}
nav li {
  position: relative;
  list-style: none;
  z-index:1000;
  text-align:left;
  background-color:#f8c512;
}
@media all and (max-width: 900px) {
  nav li {

  }
}
@media all and (min-width: 901px) {
  nav li {
/*    float: left;
    width: 20%;*/
    text-align: left;
	padding-left:10px;
  }
  nav li:last-child a {
/*    border: none;*/
  }
  nav li:hover li {
    height: 30px;
	background-color:#f8c512;
  }
}
nav li a {
  padding: 10px;
  display: block;
  color: #800080;
  font-weight:bold;
  text-decoration: none;
}
nav li a:hover {
  color: #0066cc;
}
@media all and (min-width: 901px) {
  nav li a {
	padding: 8px 0px 0px 0px;
	display: inline-block;
	width: 90%;
  }
}
nav li a.more, nav li a.less {
  display: none;
  font-family: icon;
  position: absolute;
  top: 0;
  right: 0;
  background: #f8c512;
  padding: 0;
  width: 25%;
  text-align: center;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
  z-index: 500;
  font-size: 30px;
}
.touch nav li a.more, .touch nav li a.less {
  display: block;
}
@media all and (max-width: 900px) {
  nav li a.more, nav li a.less {
    display: block;
  }
}
nav li a.more:hover, nav li a.less:hover {
  background: #f8c512;
  text-decoration:none;
}
nav li ul {
  padding: 0;
}
@media all and (min-width: 901px) {
  nav li ul {
/*    width: 100%;
    position: absolute;*/
  }
}
nav li ul li {
  height: 0px;
  -moz-transition-property: height;
  -o-transition-property: height;
  -webkit-transition-property: height;
  transition-property: height;
  -moz-transition-duration: 0.5s;
  -o-transition-duration: 0.5s;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  overflow: hidden;
  margin-bottom: 0;
}
@media all and (min-width: 901px) {
  nav li ul li {
    width: auto;
    float: none;
    border: none;
    margin-left: -1px;
  }
}
nav li ul a {
  background: #f8c512;
  line-height: 21px;
  border: none;
  font-size:0.9em;
}
@media all and (max-width: 900px) {
  nav li ul a {
    padding-left: 20px;
  }
}
nav li ul a:hover {
  color: #0066cc;
}

nav li:target ul li {
  height: 40px;
}
@media all and (max-width: 900px) {
  nav li:target ul li {
    border-top: 1px solid #c8c8c8;
  }
}
nav li:target ul li:first-child {
  border-top: none;
}

nav li:target .less {
  z-index: 1000;
}