body,canvas,div{
  background-color: #1f9ede;
  margin: 0; padding:0;
  width:100%; height:100%;
}

#shadeSelecter{
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  position:fixed;
  right:4px; bottom:4px;
  font-size:14px;
  text-align:right;
  margin:0;
  width:200px;
  padding:4px 6px 6px 6px;
  line-height:1.5em;
  color:#aaa;
  font-family: 'Dosis', sans-serif;
  background-color:rgba(0,0,0,0);
  @include border-radius(6px, 6px);
  outline: none;
  border: none;
}
@media screen and (max-device-width: 480px){
	#shadeSelecter {
      right:30%; bottom:20%;
      width:40%;
      font-size:30px;
	}
}
@mixin bef(){
   float:left;
    padding-left:4px;
    font-size:8px;
    content:"△";
    display:inline;
    text-align:left;
}
@mixin befSelect(){
  padding-left:8px;
  content:"▼";
}
ul,li{
  margin:0; padding:0;
}
li{
  cursor: pointer;
  display:box;
  letter-spacing:1px;
  padding-right:4px;
  border-bottom:solid 1.5px rgba(255,255,255,0.4);
  transition-property: background-color, color, padding, border-bottom;
  transition-duration : 0.2s;
  transition-timing-function:ease-out;
  &::before{
    transition-property: background-color, color, padding, border-bottom;
    transition-duration : 0.2s;
    transition-timing-function:ease-out;
    @include bef();
  }
  &:hover{
    padding-right:8px;
    color:rgba(255,255,255,1);
    background-color:rgba(255,100,100,0.4);
    border-bottom:solid 1.5px rgba(255,100,100,0.8);
    &::before{@include befSelect();}
  }
}


li.atv{
  cursor: pointer;
  padding-right:8px;
  color:rgba(255,100,100,1);
  border-bottom:solid 1.5px rgba(255,100,100,0.8);
  &::before{@include befSelect();}
}