body{background-color:transparent; margin:0;font-size: 12px;overflow:hidden;-webkit-touch-callout: none;-webkit-user-select: none;}
img{-webkit-user-drag:none}
a{-webkit-user-drag:none}
div{float: left;position: relative;}
div[type="box"]{width: 114px;}
.menu{height: 186px;border: solid 1px #BABABA;background-color: rgba(255,255,255,0.8);}
#logoimg{margin-top: -7px;}
.title{height: 24px;background-color: rgb(255,118, 15);overflow: hidden;white-space: nowrap;
padding-top: 10px;color: #ffffff;font-size:14px;text-align: center;cursor: pointer;}
.playcontrol{height: 39px;border-bottom:solid 1px #BABABA;}
.playcontrol ul{list-style: none;padding-left: 17px;}
.playcontrol ul li{float:left;background-repeat:no-repeat;position:relative;cursor: pointer;}

.previous{top:4px;background-image: url(../images/playcontrol.png); width: 17px;height: 10px;background-position: 0px -23px;}
.next{right:-36px;top:4px;background-image: url(../images/playcontrol.png);width: 17px;height: 10px;background-position: 0px -13px;}
.previous:hover{background-position: -17px -23px;}
.previous:active{background-position: -34px -23px;}
.play{left: 19px;top: 2px;background-image: url(../images/playcontrol.png);width: 10px;height: 13px;background-position: 0px 0px;}
.play:hover{background-position: -10px 0px;}
.play:active{background-position: -20px 0px;}
.next:hover{background-position: -17px -13px;}
.next:active{background-position: -34px -13px;}

.stop{left: 19px;top: 2px;background-image: url(../images/playcontrol.png);width: 10px;height: 13px;background-position: 0px -33px;}
.stop:hover{background-position: -10px -33px;}
.stop:active{background-position: -20px -33px;}


.rangediv{border-bottom:solid 1px #BABABA;height: 27px;}
.textbox{height: 12px;top: 8px;height: 26px;}
.icon{left: 15px;top: 2px;}
.icontext{left: 24px;top: 2px;}
a:hover{text-decoration: underline;cursor: pointer;}
#volumerange{top:13px;background:#838383;width: 80%;height: 2px;position: relative;}
input[type="range"] {
  display: block;
  -webkit-appearance: none;
  /*
  */
  border-radius: 5px;
  margin: 0 auto;
  outline: 0;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: #e74c3c;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  /*border: 2px solid white;*/
  cursor: pointer;
  -webkit-transition: 0.3s ease-in-out;
}
 input[type="range"]::-webkit-slider-thumb:hover {
  background-color: #e74c3c;
 /* border: 2px solid #838383;*/
}
input[type="range"]::-webkit-slider-thumb:active {
  -webkit-transform: scale(1.3);
}


.functionlist{list-style: none;
margin-top: 0px;
padding-left: 0px;
text-align: center;
line-height: 28px;
}
.functionlist li{background-position-y: 5px;background-repeat: no-repeat;
background-position-x: 10px;cursor: pointer;text-align: left;padding-left: 40px;
}


.functionlist .l1{background-image: url(../images/tryicon1.png);}
.functionlist .l2{background-image: url(../images/tryicon2.png);}
.functionlist .l3{background-image: url(../images/tryicon3.png);}
.functionlist li:hover {
background-color: rgb(255,118, 15);
}