/*Typography*/
html {font: 16px Georgia, serif;}
/*Base*/
html,
body,
ul {
  margin: 0;
  padding: 0;
}
/*Scrollbar*/
::-webkit-scrollbar {
  width: 9px;
}
::-webkit-scrollbar-track {
  width: 9px;
}
::-webkit-scrollbar-thumb {
  background: #ad0000;
}
/*Layout*/
* {box-sizing: border-box;}
body {background: #eee;}
ul {list-style-type: none;}
/*Outer list*/
.outer-ul {
  position: relative;
  margin: 1em auto;
  width: 50em;/*800px*/
  height: 12.5em; /*200px*/
  border-radius: 4px;
  overflow: hidden;
}
.outer-ul > li {
  float: left;
  width: 33.3333333%;
}
.outer-ul label {
  display: block;
  padding: .25em .35em;
  width: 100%;
  background: #fff;
  color: #aaa;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  cursor: pointer;
  transition: all .5s;
}
.outer-ul li:not(:last-child) label {border-right: .1em solid #eee;}
/*Inner lists*/
.inner-ul {
  position: absolute;
  left: 0;
  z-index: 0;
  padding: .25em;
  width: 100%;
  height: 100%;
  background: #fff;
  border-top: .1em solid #eee;
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
  opacity: 0;
  overflow: auto;
  transition: opacity .75s;
}
.name {color: #ad0000;}
.inner-ul img {
  float: left;
  margin-right: .25em;
  width: 100px;
}
.inner-ul p {
  margin: .5em 0;
}
input {display: none;}
input:checked + label {
  background: #ad0000;
  color: #fff;
}
input:checked ~ ul {
  z-index: 3;
  opacity: 1;
}