body {background: url(../img/play_radio/bg.jpg) no-repeat;background-size:cover;}
#wrap {width: 100%;height: 100%; position: relative;padding-top:10%;}


/*slideBox*/
#slideBox {width:100%;height:248px;background:#000;position: fixed;top:-222px;z-index:5;}
#slideBg {width:100%;height:222px;background:url(../img/play_radio/slideBg_v2.png) repeat-x;overflow: hidden;position: absolute;z-index:6;top:0;left:0;}
#slideCon {height: 222px; position: relative;z-index:7;padding:0 20px;}
#slideCon ul {float:left;width:9999em;}
#radioNav {height:55px;overflow: hidden;}
#radioChose {overflow: hidden;}
#radioChose .left,#radioChose .right {width:40px;height:40px;position: absolute;top:114px;z-index:111;cursor: pointer;}
#radioChose .left {background:url(../img/play_radio/radioLeft.png);left: 30px;}
#radioChose .left:hover{background:url(../img/play_radio/radioLeft_h.png);}
#radioChose .right {background:url(../img/play_radio/radioRight.png);right: 30px}
#radioChose .right:hover {background:url(../img/play_radio/radioRight_h.png);}
#slideCon ul.radioNav {height: 46px;border-bottom:1px solid rgba(255,255,255,0.1);}
#slideCon ul.radioList {display:none; width:9999em;margin-top:10px;position: relative;}
#slideCon ul li {float:left;}
#slideCon ul.radioNav li {width:60px;height:55px;color:#fff;line-height: 45px;text-align:center;cursor:pointer;}
#slideCon ul.radioNav li.clicked  {color:#209ce8;background:url(../img/play_radio/radioNavHover.png) no-repeat 0 45px;}
#slideCon ul.radioNav li:hover{color:#209ce8;}
#slideControll {width:100%;height: 26px;background:#211a15;position: absolute;bottom: 0;cursor: pointer;}
#slideControll:hover .slideBtn{opacity:1;}
#slideControll .slideBtn{height:26px;background: url(../img/play_radio/slideBtn.jpg) center 9px no-repeat; opacity:0.8;}
#slideControll .slideBtn p {float:right;color:#fff;line-height: 26px;margin-right: 15px;background:url(../img/play_radio/down.jpg) no-repeat right center;padding-right:13px;}
#slideControll .slideBtn p.up {background:url(../img/play_radio/up.jpg) no-repeat right center;}
/*轮播选台*/
#rotateBox {width: 640px; height: 369px; margin:0 auto ;position: relative;}
#rotateBox input {position: absolute;width:17px;height: 29px;background: none;border:0;cursor: pointer;top:127px;z-index:4;}
#rotateBox #left {display:none; left:13px;background:url(../img/play_radio/leftBtn.png); opacity:0.8;}
#rotateBox #left:hover{opacity:1;}
#rotateBox #right {display:none; right:13px;background:url(../img/play_radio/right.png); opacity:0.8;}
#rotateBox #right:hover{opacity:1;}
#rotatePic {position: relative;height: 280px;}
#rotatePic li { position: absolute; text-align: center; }
#rotatePic li.active{cursor:pointer;}
#rotatePic .box {position:relative; background: #000}
#rotatePic .box .bg_shadow {position:absolute; left:0; top:0; z-index:96; display:none; background:#000; opacity:0.35;}
#rotatePic .boxActive:hover .bg_shadow{display:block;}
#rotatePic img { position: relative;width: 100%;}
#rotatePic li .shadow { z-index:0;width: 100%; height:40px;display: block; position: absolute; bottom:0px;left:0;}
#rotatePic .pic1 { left: 0px;top:52px;z-index:1;}
#rotatePic .pic1 img {width: 175px;}
#rotatePic .pic2 { left: 88px;top:29px;z-index:2;}
#rotatePic .pic2 img {width:220px;}
#rotatePic .pic3 {left: 181px;top:0px;z-index:3;}
#rotatePic .pic3 .br_pic .br_shade{width:280px; height:280px;}
#rotatePic .pic3 img {width:280px;}
#rotatePic .pic4 {top:29px;left:334px;z-index:2;}
#rotatePic .pic4 img {width:220px;}
#rotatePic .pic5 {left:465px;top:52px;z-index:1;}
#rotatePic .pic5 img {width: 175px;}
#rotatePic .unactive {filter: alpha(opacity=70); opacity: 0.7;}
/*结束*/

/*电台下的播控区域*/
#controlBox{position:relative; z-index:11; width:250px; height:30px; margin:0 auto; margin-top:-70px; margin-bottom:24px;}
#controlBox a{float:left; background:url(../img/play_radio/icon_control.png) no-repeat;}
#controlBox a.control_like{width:29px; height:25px; margin-top:2px; background-position:-1px -3px;}
#controlBox a.control_like:hover,#controlBox a.control_likeActive{background-position:-1px -34px;}
#controlBox a.control_delete{width:28px; height:28px; margin-top: 1px; margin-left:43px; background-position:-73px -1px;}
#controlBox a.control_delete:hover{background-position:-73px -32px;}
#controlBox a.control_next{width:30px; height:30px; margin-left:46px; background-position:-147px 0;}
#controlBox a.control_next:hover{background-position:-147px -32px;}
#controlBox a.control_add{width:28px; height:28px; margin-top:1px; margin-left:43px; background-position:-221px -1px;}
#controlBox a.control_add:hover{background-position:-221px -34px;}
/*结束*/

/*歌曲信息展示区域*/
#playingInfoBox{position:relative; height:14px; margin-bottom:26px;text-align: center;}
#playingInfoBox p{display:inline-block;height:14px; line-height:14px; font-size:14px;}
#playingInfoBox p.now{color:#333;display: none;}
#playingInfoBox p.info{color:#333;display: none;}

#playingInfoBox .allowSelect {-webkit-user-select: initial;cursor: text;overflow: visible;}
/*结束*/

/*歌手电台相关展示*/
#artistRadioBox{position:relative; width:260px; height:64px; margin:0 auto;}
#artistRadioBox .bg_shadow{position:absolute; left:0; top:0; width:260px; height:64px; background:#000; opacity:0.1;}
#artistRadioBox:hover .bg_shadow{opacity:0.2;}
#artistRadioBox .artistpicbox{position:relative; float:left; margin:8px 0 0 10px;}
#artistRadioBox .artistImg{float:left; border-radius:50%;}
#artistRadioBox .radio_btn{position:relative; float:right; width:85px; height:24px; line-height:24px; margin-top:20px; color:#fff; text-align:center; border-radius:12px;}
#artistRadioBox .radio_btn .left_icon{position:absolute; left:10px; top:4px; width:15px; height:13px; background:url(../img/play_radio/icon_artistradio.png) no-repeat;}
#artistRadioBox .btn_shadow{position:absolute; left:0; top:0; width:85px; height:24px; border-radius:12px; background:#595959; opacity:0.3;}
#artistRadioBox .radio_btn:hover .btn_shadow,#artistRadioBox .artistRadio_like:hover .btn_shadow{opacity:0.6;}
#artistRadioBox .content_name{position:absolute; right:9px; top:1px; line-height:22px; font-size:12px;}
#artistRadioBox .artistRadio_like{position:relative; float:right; width:60px; height:24px; line-height:24px; margin-top:20px; margin-left:10px; margin-right:10px; color:#fff; text-align:center; border-radius:12px;}
#artistRadioBox .artistRadio_likeActive{width:72px;}
#artistRadioBox .artistRadio_like .btn_shadow{width:60px;}
#artistRadioBox .artistRadio_likeActive .btn_shadow{width:72px;}
#artistRadioBox .artistRadio_like .left_icon{position:absolute; left:8px; top:6px; width:15px; height:13px; background:url(../img/play_radio/artist_raido_like.png) no-repeat;}
#artistRadioBox .artistRadio_like:hover .left_icon,#artistRadioBox .artistRadio_likeActive .left_icon{background-position:0 -14px;}
#artistRadioBox .artistRadio_like .content_name{right:8px;}
/*结束*/

/*导航电台相关css*/
/*电台*/
.br_wrap { float:left; width:140px; height:auto;}
.br_wrap .br_pic { display:block; position:relative; width:140px; height:140px; margin-bottom:7px; overflow:hidden; overflow: hidden;}
.br_wrap .br_pic .br_shade { display:block; position:absolute; width:140px; height:140px; left:0; top:0; z-index:97;}
.br_wrap .br_pic:hover .br_shade { background:#000; opacity:0.35;}
.br_wrap .current_pic .br_shade { background:#000;  opacity:0.35;}
.br_wrap .br_pic .i_play {  z-index:100;}
.br_wrap .br_pic:hover .i_play { left:50%; top:50%; margin-left:-20px; margin-top:-20px;}
.radio_con .br_pic:hover .i_play{left:50%; top:50%; margin-left: -20px;margin-top: -20px;}
.br_wrap p { float:left; width:100%; padding-bottom: 14px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.br_wrap .br_name a { font-size:14px; color:#000;font-weight:500;display:block;line-height:18px; overflow:hidden; white-space: nowrap;text-overflow: ellipsis;}
.br_wrap .br_name a.br_info { font-size:12px; color:#888999;}
.br_wrap .br_name a:hover,.br_wrap .br_info a:hover { color:#07b2e5;}
.radio .br_wrap .br_name{padding-bottom:6px;}
.br_wrap .br_info{color:#999;}
.br_wrap .br_info:hover{color:#07b2e5;}
.radio .br_wrap .br_info.active{color:#07b2e5;}
.br_wrap .br_info a{font-size:12px; color:#999;}
.br_wrap .br_name a:hover,.br_wrap .br_info a:hover { color:#07b2e5;}
.br_wrap .br_pic span.br_name{position:absolute; left:10px; bottom:10px; z-index:96; max-width:136px; font-size:14px; color:#fff; overflow:hidden; white-space: nowrap;text-overflow: ellipsis;text-shadow:1px 1px 2px #000000 ;}
/*关联电台清除无用css并添加新的css*/
#rotatePic .br_pic{display:block; width:100%; height:100%;}
#rotatePic .br_pic .radio_play {display: block; position: absolute; width: 50px; height: 50px; right: 0; top: 50%; left: 50%; margin: -25px 0 0 -25px; z-index: 9999;}
#rotatePic .radio_stop,#rotatePic .radio_pause,#rotatePic .radio_start{width:50px; height:50px; margin:-25px 0 0 -25px; background-size:50px;}
/*关联电台描述信息区域的css*/
#rotatePic .infoBox{position:absolute; left:0; bottom:10px; width:100%; height:18px;z-index: 2;}
#rotatePic .br_name{float:left; padding-left:10px; font-size:14px; color:#fff;text-shadow:2px 2px 1px #5d5d5d;  opacity:0.8;}
#rotatePic .br_name:hover{opacity:1;}
#rotatePic .br_name span {float:left;max-width: 50px;white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden; }
#rotatePic li.active .br_name span {max-width: 160px;}
#rotatePic .lis_cnt{float:right; padding:4px 8px 0 17px; font-size:12px; color:#fff; background:url(../img/play_radio/listen.png) 0 6px no-repeat;text-shadow: 1px 1px 1px rgba(33,33,33,0.87);}

/*#rotatePic .box .br_pic{width:100%; height:100%; margin:0;}*/

/*焦点图等小按钮直接播放*/
.i_play { display:block; position:absolute; width:34px; height:34px; right:-200px;margin-top: -20px;}
.i_play { background:url(../img/i_play.png) no-repeat 0 0;}
.i_play:hover { background:url(../img/i_play_h.png) no-repeat 0 0;}

/*mv大按钮直接播放*/
.i_play_big { display:block; position:absolute; width:40px; height:40px; right:-200px;margin-top: -20px;}
.i_play_big { background:url(../img/i_play_big.png) no-repeat 0 0;}
.i_play_big:hover { background:url(../img/i_play_h_big.png) no-repeat 0 0;}
.br_wrap .br_pic .radio_play {display:block; position:absolute; width:40px; height:40px; right:0; top:50%; left:50%; margin:-20px 0 0 -20px; z-index:9999;}
.radio_stop,.radio_pause,.radio_start{display:block; position:absolute; width:40px; height:40px; right:0; top:50%; left:50%; margin:-20px 0 0 -20px; z-index:9999;}
.radio_stop { background:url(../img/playing_stop.png) no-repeat 0 0;}
.radio_start { background:url(../img/i_play_h_big.png) no-repeat 0 0;}
.radio_pause { background:url(../img/radio_pause_big.png) no-repeat 0 0;}
.radio_pause:hover{background:url(../img/radio_pause_h_big.png) no-repeat;}
#rotatePic .radio_pause {background:url(../img/play_radio/playing_radio_pause_big.png) no-repeat 0 0; background-size:50px;}
#rotatePic .radio_pause:hover{background:url(../img/play_radio/playing_radio_pause_h_big.png) no-repeat;}
#rotatePic .radio_start { background:url(../img/play_radio/i_play_h_radio.png) no-repeat 0 0;}
/*结束*/

/*公用*/
.i_play_radio{position:absolute; z-index:97; left:50%; top:50%; display:none; width:50px; height:50px; background:url(../img/play_radio/i_play_radio.png) no-repeat; transform:translate(-25px,-5px);}
#rotatePic .br_pic:hover .i_play_radio:hover{background:url(../img/play_radio/i_play_h_radio.png) no-repeat;}
#rotatePic .boxActive .i_play_radio:hover{display:block; background:url(../img/play_radio/i_play_h_radio.png) no-repeat;}
.i_play_radio:hover{display:block; background:url(../img/play_radio/i_play_h_radio.png) no-repeat;}
/*结束*/

/*左右区域向左向右*/
.directionBtn_left1,.directionBtn_left2,.directionBtn_right1,.directionBtn_right2{position: absolute; z-index: 3;}
.directionBtn_left1,.directionBtn_right1{width:88px; height:175px; top:52px;}  
.directionBtn_left2,.directionBtn_right2{width:110px; height:220px; top:29px;}
.directionBtn_left2{left:88px;}
.directionBtn_right2{right:88px;}
.directionBtn_right1{right:0;}


#l_loadfail { width: 100%;z-index: 99999; display:none; position:absolute;padding-bottom: 5px;top:0px;}
.loaderror { height:250px;position:relative;margin-top:-160px;top:50%;width:100%;}
.loaderror img { display:block;margin:0 auto;}
.loaderror p { text-align:center;font-size:22px;}
.loaderror p a { color:#46b4e6; text-decoration:underline;}