/* CSS Document */
html{overflow:hidden;}
body{ margin:0;font-size:12px;-webkit-touch-callout: none;-webkit-user-select: none;background-color:transparent;}
#border-title{height: 30px;width: 100%;border: 1px solid;border-color: rgb(190, 187, 187);border-top: 0px;border-left: 0px;border-right: 0px;}
img{-webkit-user-drag:none}
a{-webkit-user-drag:none}
.boxshadow {box-shadow: 0 0 25px 1px #6883D6;}
#close{float: right;margin-right: 11px;margin-top: 8px;}
#close a img{-webkit-transition:-webkit-transform 0.5s;}
#close a img:hover
{
-webkit-transform:rotate(360deg);
}

#setbutton{float: right;margin-right: 11px;margin-top: 7px;}
#setbutton a img{-webkit-transition:-webkit-transform 0.5s;}
#setbutton a img:hover
{
-webkit-transform:rotate(360deg);
}


#logo{width: 100px;float: left;margin-top: 5px;margin-left: 9px;}
.body_middle{height: 112px;}
#body_middle_li_left{float:left;margin-left: 8px;margin-top: 5px;}
#body_middle_li_left div{width: 100px;height: 100px;}
#body_middle_li_right{position: absolute;top: 41px;left: 117px;right:15px;z-index: 100}


.list_div{
background-color:rgba(249, 249, 249, 1);
width: 100%;
border-left: 0px;
border-right: 0px;
border-bottom:0px;
overflow-y: hidden;overflow-x: hidden;height:221px;
}
.list_div  ul li div{float:left;}

.list_bottom{margin-bottom: 0px; height: 30px;width: 100%;z-index:-1;/*box-shadow: inset 0 9px 14px rgba(0,0,0,0.1);*/background-color:transparent;}
.list_bottom img{-webkit-transition: All 0.2s ease-in-out;}
.list_bottom img:hover{ -webkit-transform:scale(1.3,1.3);}

.list_bottom_right{float: right;margin-top: 1px;margin-right: 15px;}
.list_bottom_right img{-webkit-transition: All 0.2s ease-in-out;}
.list_bottom_right img:hover{ -webkit-transform:scale(1.3,1.3);}

.list_single{float:left;width: 100%;line-height: 34px;border: 1px solid;
border-color: rgb(233, 231, 231);border-top: 0px;border-left: 0px;border-right: 0px;
cursor: pointer;}

.list_single_one{float:left;width: 100%;line-height: 34px;border: 1px solid;
border-color: rgb(233, 231, 231);border-top: 0px;border-left: 0px;border-right: 0px;
cursor: pointer;}
.list_single_one div{float:left;}
.list_single_one:hover{background-color: rgb(0, 0, 255);}
.list_single_one_d1{padding-top: 8px;padding-left: 13px;}
.list_single_one_d2{width:7%;padding-left:11px}
.list_single_one_d3{width:47%;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_single_one_d4{width:17%}
.list_single_one_d5{float:left;}



.list_single div{float:left;}
.list_single:hover{background-color: rgb(252, 226, 206);}
.list_single_d1{position:relative;position:relative;padding-top: 8px;padding-left: 13px;}
.list_single_d2{position:relative;width:7%;padding-left:11px}
.list_single_d3{position:relative;width:47%;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.list_single_d4{position:relative;width:17%}
.list_single_d5{position:relative;overflow:hidden; text-overflow:ellipsis; white-space:nowrap;width: 15%}
#playercontrol{}
#playercontrol div{float:left;position: relative;cursor: pointer;}

#containerwarrp{position: relative;margin-right: 0px;background-color:transparent;}
#setting{width:100%;z-index:999;position: absolute;float:left;-webkit-transform: translateX(100%);background-color:rgba(0, 0, 0, 0.3);-webkit-transition: -webkit-transform 0.3s ease-in-out, visibility 0s 0.3s;}
#dragfilemask{display:none;height:100%;z-index:999;background-color:rgba(0, 0, 0, 0.8);width:100%;position: absolute;float:left;}
.option{height: 30px;z-index:10;position: relative;right: 0;top:-23px;float: right;width: 29px;}
.option img{top: 30px;position: relative;right:-5px;}
.waveimg{}



.currentshowtotletime{top:7px;color: #A7A7A7;left:47px;cursor:default;}
.currentshowfiletime{width: 44px;top:7px;color: #A7A7A7;cursor:default;}
.currentshowfilename{list-style: none;font-size: 14px;font-family: -webkit-pictograph;height: 18px;width:168px; 
overflow:hidden; text-overflow:clip; white-space:nowrap;cursor: pointer;}

.currentshowauth{ist-style: none;font-size: 14px;font-family: -webkit-pictograph;height: 18px;width:168px; 
overflow:hidden; text-overflow:clip; white-space:nowrap;cursor: pointer;}
.playercontrol{list-style: none;height: 19px;padding-top: 23px;}

.volumelayerwarrp{cursor:pointer; margin-top: 8px;padding-top: 7px;height: 7px;list-style: none;background-color: rgba(255, 11, 11, 0);}
.volumelayerbuttom{height:2px;background-color:#E6E6E6;}
.volumelayertop {height:2px;background-color:#ED8335;width:0%}

.prebuttonpanel{top:8px;background-image: url(../images/playcontrol.png); width: 17px;height: 10px;background-position: 0px -23px;}
.prebuttonpanel:hover{background-position: -17px -23px;}
.prebuttonpanel:active{background-position: -34px -23px;}

.playbuttonpanel{left:16px;top:6px;background-image: url(../images/playcontrol.png);width: 10px;height: 13px;background-position: 0px 0px;}
.playbuttonpanel:hover{background-position: -10px 0px;}
.playbuttonpanel:active{background-position: -20px 0px;}

.nextbuttonpanel{left:32px;top:8px;background-image: url(../images/playcontrol.png);width: 17px;height: 10px;background-position: 0px -13px;}
.nextbuttonpanel:hover{background-position: -17px -13px;}
.nextbuttonpanel:active{background-position: -34px -13px;}

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


.tooltip {display:none;float: left;-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);background-color: white;width:166px; padding:5px 0px; border:1px solid #ccc; position:absolute;font-size:12px;}
.tooltip span{left: 14px;width:0; height:0; font-size:0; overflow:hidden; position:absolute; border-width:8px;zoom;1 }
.tooltip_triangle span.bot {
    border-color: transparent transparent #ccc transparent;
    border-style: dashed dashed solid dashed;
    top: -16px;
}
.tooltip_triangle span.top {border-color: transparent transparent #fff transparent;
    border-style: dashed dashed solid dashed;top: -15px;
}
#tooltip_context li:hover{background-color:red;}




#setttingmenu{color: white;font-size: 14px;line-height: 50px;top: 100px;left: 15px;list-style: none;padding: 0;margin: 0 auto;display: inline-block;height: 100%;position: relative;}
#setttingmenu li:hover {color:red;font-weight:bold;-webkit-transform: scale(1);cursor:pointer;}
.settingclose{-webkit-transition: all 0.2s;width: 19px;height: 19px;background: url(images/cross.png) no-repeat center center;position: absolute;right: 12px;top: 20px;}
.settingclose:hover {-webkit-transform: scale(1.1);cursor:pointer;}
.settingbox{overflow-y: hidden;width: 100%;height:100%;left: 110px;position: absolute;top: 0px;}
.scrollsetttingbox{position: relative;width: 100%;height: 100%;}
.scrollsetttingbox ul{margin-top: 0px;color:white;position: absolute;top:0px;list-style: none;padding-left: 0px;}
.setttingpanel{position: relative;height: 100%;width:100%;}
.settingpanelcontent{background-color: #EAEAEA;height: 100%;width: 100%;position: relative;overflow: hidden;}
.setttingtitlebar{position: relative;background-color:#D9D9D9;height: 30px;width: 100%;text-align: center;}
.setttingtitlebar div{left: 14px;top: 9px;float: left;position: relative;cursor:pointer;}
.settingbaricon{left: 0px;top: 7px;position: relative;font-size:14px}
.settingbartext{top: 4px;position: relative;font-size:14px}
.nextsetttingpanelicon{right: 27px;top: 5px;float: right;}
.spinner {
      margin: 130px auto 0;
      width: 70px;
      text-align: center;
    }

    .spinner > div {
      width: 18px;
      height: 18px;
      background-color: #FFF;

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }

    .spinner .bounce1 {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }

    .spinner .bounce2 {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
      0%, 80%, 100% { -webkit-transform: scale(0.0) }
      40% { -webkit-transform: scale(1.0) }
    }

    @keyframes bouncedelay {
      0%, 80%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      } 40% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
.dropfileslistmessage{margin: 40px auto 0;width:200px;text-align:center;color:#FFF;}
.dropfileslistmessage p{size:14px;color:#FFF;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.volumebar{top: -72px; -webkit-border-radius: 15px;border-radius:15px;position: absolute;background-color:rgba(0, 0, 0, 0.8);width:22px;height:100px;float:left;z-index:9999;display:none}
.musiclooptype{top: -72px;left: -23px;-webkit-border-radius: 5px;border-radius:5px;position: absolute;background-color:rgba(0, 0, 0, 0.9);width:72px;height:100px;float:left;z-index:9999;display:none}
.musiclooptype ul{list-style: none;margin-top: 4px;line-height: 23px;padding-left: 7px;width: 65px;color:#fff}
.musiclooptype ul li{cursor:pointer;}
.musiclooptype ul li:hover{text-decoration: underline;color:red;}
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: 12px;
  height: 12px;
  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: white;
  border: 2px solid white;
}
input[type="range"]::-webkit-slider-thumb:active {
  -webkit-transform: scale(1.3);
}
#volumerange{background-color: #bdc3c7;width: 70px;height: 2px;top: 50px;left: -24px;position: relative;-webkit-transform:rotate(270deg);}
#transparentrange{background: linear-gradient(to right,black, rgba(255,255,255,0));width: 70%;height: 2px;position: relative;}

.contentwarrp{float: left;position: relative;height: 100px;width: 100%;height: 300px;}
.content{background-color:#FFFFFF;-webkit-border-radius: 5px;position: relative;width: 90%;margin: 0 auto;margin-top: 15px;;}
.content div[type="u"]{position: relative;margin: 0 auto;}

.content1{height: 93px;}
.content1 .contenttextspan{left: 27px;top: 8px;position: relative;}
.content2{height: 90px;}
.content2 .contenttextspan{left: 21px;top: 8px;position: relative;}
.content3{height: 65px;}
.content3 .contenttextspan{left: 25px;top: 3px;position: relative;line-height: 20px}
.content4{height: 62px;}
.content4 .contenttextspan{left: 27px;top: 8px;position: relative;}
.contentradius_top{-webkit-border-radius: 5px 5px 0 0;}
.contentradius_buttom{-webkit-border-radius: 0 0 5px 5px ;}
.contentborder_buttom{border-bottom: 1px solid #BFBFBF;}
.contentcontainer{float: left;position:absolute;height: 100px;width: 500px;height: 300px;left:100px;top:23px;overflow-y: hidden}
.contentcontainer div{background-color:white}
.contentlisticon{float: left;position: relative;left:17px;top:6px;}
.contentlistcheckbox{float: right;right:20px;top:7px;}
.contentlistslider{float: right;right:20px;width: 50%;top:14px;}
.contentlist{height: 30px;-webkit-transition: .6s; }

.contentlist:hover{background-color: rgb(179, 209, 255);}
/*
#transparentrange_div{display:none;opacity: 0;}
#musiclisttransparentrange_div{display:none;opacity: 0;}
*/
#backgroundimage_div{display:none;opacity: 0;}
#backgroundimageblur_div{display:none;opacity: 0;}

/*自定义checkbox*/
.tgl {display: none;}
.tgl, .tgl:after, .tgl:before, .tgl *, .tgl *:after, .tgl *:before, .tgl + .tgl-btn {-webkit-box-sizing: border-box}
.tgl + .tgl-btn {outline: 0;display: block;width: 31px;height: 16px;position: relative;cursor: pointer;}
.tgl + .tgl-btn:after, .tgl + .tgl-btn:before {position: relative;display: block;content: "";width: 50%;height: 100%;}
.tgl + .tgl-btn:after {left: 0;}
.tgl + .tgl-btn:before {display: none;}
.tgl:checked + .tgl-btn:after {left: 50%;}
.tgl-light + .tgl-btn {background:rgb(234,234,234);border-radius: 2em;padding: 2px;-webkit-transition: all .4s ease;}
.tgl-light + .tgl-btn:after {border-radius: 50%;background: #fff;-webkit-transition: all .5s ease;}
.tgl-light:checked + .tgl-btn {background: #62AEF9;}

#setting_musiceffect{width:100%;height:100%;z-index:1000;position: absolute;float:left;-webkit-transform: translateX(100%);background-color:red;-webkit-transition: -webkit-transform 0.3s ease-in-out, visibility 0s 0.3s;} 
#setting_fileregister{width:100%;height:100%;z-index:1000;position: absolute;float:left;-webkit-transform: translateX(100%);background-color:red;-webkit-transition: -webkit-transform 0.3s ease-in-out, visibility 0s 0.3s;}


#setting_fileregister {width:100%;height:100%;z-index:1000;position: absolute;float:left;-webkit-transform: translateX(100%);background-color:rgba(0, 0, 0, 0.3);-webkit-transition: -webkit-transform 0.3s ease-in-out, visibility 0s 0.3s;}
#setting_fileregister ul{margin-top: 50px;width:100%;list-style:none;padding: 0;height: 100%;}
#setting_fileregister ul li{height: 100px;float:left;width:33%;text-align: center;line-height: 50px}
#setting_fileregister ul li div{border: 2px solid rgb(194, 194, 194);margin: 0 auto;width:50px;text-align: center;height: 60px;}
.setting_fileregister_mp3{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_fileregister_wma{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_fileregister_ape{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_fileregister_flac{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_fileregister_ogg{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}

#setting_fileregister ul li div span{position: relative;left: 15px;top: 41px;}
#setting_fileregister ul li div:hover{border: 2px solid rgb(119, 190, 255);}


#setting_backgroundimage {width:100%;height:100%;z-index:1000;position: absolute;float:left;-webkit-transform: translateX(100%);background-color:rgba(0, 0, 0, 0.3);-webkit-transition: -webkit-transform 0.3s ease-in-out, visibility 0s 0.3s;}
#setting_backgroundimage ul{margin-top: 50px;width:100%;list-style:none;padding: 0;height: 100%;}
#setting_backgroundimage ul li{height: 100px;float:left;width:50%;text-align: center;line-height: 50px}
#setting_backgroundimage ul li div{border: 2px solid rgb(194, 194, 194);margin: 0 auto;width:100px;text-align: center;height: 50px;}
#setting_backgroundimage ul li div span{position: relative;top:10px;}
#setting_backgroundimage ul li div:hover{border: 2px solid rgb(119, 190, 255);}
.setting_backgroundimage_1{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_backgroundimage_2{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_backgroundimage_3{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_backgroundimage_4{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_backgroundimage_5{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}
.setting_backgroundimage_6{background-image: url(http://www.codefans.net/ad_include/22590kong.gif)}

#effect_div{float: right;}
.effect_div_ul2 a{cursor:pointer;display:block; text-decoration:none; width:94px; height:25px; text-align:left; color:#000; padding-left:10px; border:1px solid #fff; border-width:0 1px 1px 0; background:#DDDDDD; line-height:25px; font-size:11px;}
.effect_div_ul1{top: -3px;right:16px;float: right;position: absolute;list-style:none}
.effect_div_ul1 li{cursor: pointer;}
.effect_div_ul2{padding-left: 0;margin: 0 auto;list-style:none;position: absolute;float: right;right: 16px;top: -146px;display:none}
.canvas{width: 100%; height: 100%;margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;position: absolute;opacity:1;}

.loadingdiv{position: absolute; background-color: #000000; width: 100%; height: 100%;margin: 0;padding: 0;z-index: 9999;opacity: 0;}


.button {display: inline-block;zoom: 1;vertical-align: baseline;margin: 5px 3px;;outline: none;cursor: pointer;text-align: center;text-decoration: none;font: 12px/100% Arial, Helvetica, sans-serif;padding: .3em 1em .55em;text-shadow: 0 1px 1px rgba(0,0,0,.3);-webkit-border-radius: .5em;-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);}
.orange {color: #fef4e9;border: solid 1px #da7c0c;background: #f78d1d;background: -webkit-gradient(linear, left top, left bottom, from(#faa51a), to(#f47a20));}
.orange:hover {background: #f47c20;background: -webkit-gradient(linear, left top, left bottom, from(#f88e11), to(#f06015));}
.orange:active {color: #fcd3a5;background: -webkit-gradient(linear, left top, left bottom, from(#f47a20), to(#faa51a));}
.bigrounded {-webkit-border-radius: 2em;}

.artdialog{display:none;position: absolute;float: left;width: 210px;height: 111px;background-color: #FFFFFF;border-radius: initial;border: solid 2px rgba(192, 192, 192, 1);z-index: 9999999;box-shadow: 0 4px 23px 5px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0,0,0,0.15);vertical-align: middle;}
.artdialog div{text-align: center;position: relative;width:100%;height: 25px;margin-top: -6px;}
.artdialog_p1{line-height: 25px;overflow: hidden;padding-left: 12px;height: 25px;background-color: rgb(255, 118, 15);margin: 0;color:#fff}
.artdialog_p2{margin-top: 6px;text-align: center;height: 35px;line-height: 49px}