*
{
    padding:0;
    margin:0;
}
a
{
    color:#333;
    text-decoration:none;
}

#playBox
{
    position:relative;
    width:100%;
    overflow:hidden;
    /*transition: all 0.4s ease-out;*/
}
#playBox #bg_mp3player
{
    width:100%;
    display:block;
}
#playBox #playInfoBox
{
    text-align:left;
    position:absolute;
    width:100%;
    top:0;
    margin:5px 10px;
}
#playBox #playInfoBox span
{
    font-size:13px;
    color:#696969;
}
#playBox #controlBox
{
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
}
#playBox .controlBtn
{
    position:absolute;
    display:block;
    width:13%;
    top:50%;
    margin-top:-9%;
    left:50%;
    z-index:999;
    transition: all 0.1s ease-out;
    visibility:hidden;
}
#playBox .controlBtn:hover
{
    margin-top:-8%;
}
#playBox .controlBtn img
{
    width:100%;
    display:block;
    border:none;
}
#playBox #btn_Stop
{
    margin-left:-45%;
}
#playBox #btn_Rewind
{
    margin-left:-28%;
}
#playBox #btn_PlayOrPause
{
    width:22%;
    margin-top:-14%;
    margin-left:-11%;
    visibility:visible;
}
#playBox #btn_PlayOrPause:hover
{
    margin-top:-13%;
}
#playBox #btn_PlayOrPause.pause img#img_btn_pause
{
    display:none;
}
#playBox #btn_PlayOrPause.playing img#img_btn_play
{
    display:none;
}
#playBox #btn_FastForward
{
    margin-left:15%;
}
#playBox #btn_ratechange
{
    margin-left:32%;
    position:relative;
}
#playBox #btn_ratechange span#lbl_ratech
{
    width:100%;
    height:24px;
    line-height:24px;
    text-align:center;
    font-size:20px;
    color:#fff;
    font-weight:bold;
    font-family:"微软雅黑";
    position:absolute;
    display:block;
    top:50%;
    margin-top:-12px;
}
@media (max-width: 500px)
{
    #playBox #btn_ratechange span#lbl_ratech
    {
        font-size: 14px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #playBox #btn_ratechange span#lbl_ratech
    {
        font-size: 18px;
    }
}
@media (min-width: 800px)
{
    #playBox #btn_ratechange span#lbl_ratech
    {
        font-size: 22px;
    }
}

#playBox #progressBarOutBox
{
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    visibility:hidden;
}
#playBox #progressBarBG
{
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    opacity:.3;
}
#playBox #progressBarBox
{
    border:none;
    background:transparent;
    box-shadow:none;
    min-height:0;
    margin:1.5% 0;
}
#playBox .well
{
    padding:0;
    text-align:center;
}
#playBox .slider 
{
    width:calc(90% - 110px) !important;
}
#playBox .slider-track
{
    height:2px !important;
    margin-top:-3px !important;
    /*border-radius:0px !important;*/
}
#playBox .slider-handle
{
    background:#fff;
    background-image:none;
    width:26px;
    height:26px;
    border-radius:13px;
    margin-top:-5px;
    cursor:pointer;
}
#playBox .slider-selection 
{
	background: #09f;
}
#playBox #lbl_currentTime, #lbl_duration
{
    color:#fff;
    font-size:20px;
    font-weight:bold;
    position:relative;
    z-index:99;
}
@media (max-width: 500px)
{
    #playBox #lbl_currentTime, #lbl_duration
    {
        font-size: 14px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #playBox #lbl_currentTime, #lbl_duration
    {
        font-size: 16px;
    }
}
@media (min-width: 700px)
{
    #playBox #lbl_currentTime, #lbl_duration
    {
        font-size: 18px;
    }
}

#playBox #lbl_currentTime
{
    margin-right:12px;
}
#playBox #lbl_duration
{
    margin-left:12px;
}

#lrcBox
{
    display:block;
    position:absolute;
    top:0;
    width:100%;
}
#lrcBox p
{
    padding:10px;
    text-align:center;
    font-size:16px;
    color:#333;
    font-family:"微软雅黑";
    text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0;
    *filter: Glow(color=#fff, strength=1);
    cursor:pointer;
}
@media (max-width: 400px)
{
    #lrcBox p
    {
        font-size:16px;
    }
}

@media (min-width: 400px) and (max-width: 500px)
{
    #lrcBox p
    {
        font-size:18px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #lrcBox p
    {
        font-size:20px;
    }
}
@media (min-width: 800px)
{
    #lrcBox p
    {
        font-size:24px;
    }
}
#lrc_out_box
{
    width:100%;
    height:100%;
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
    display:none; 
    background:url(../img/bg_opacity_30.png) repeat;
}
#playBox.showLRC #lrc_out_box
{
    display:block;
}
#playBox.showLRC #controlBox, #playBox.showLRC #progressBarOutBox, #playBox.showLRC #lrcBox
{
    display:none;
}
#lrc_in_box
{
    position:relative;
    padding:10px;
}
#lrc_in_box p.lrc_line
{
    line-height:2em;
    font-size:14px;
    text-align:center;
    color:#ddd;
    font-family:"微软雅黑";
    cursor:pointer;
    position:relative;
    z-index:99;
}
#lrc_in_box p.lrc_line.current
{
    color:#fff;
    font-weight:bold;
    font-size:16px;
    /*text-shadow:#fff 1px 0 0,#fff 0 1px 0,#fff -1px 0 0,#fff 0 -1px 0;
    *filter: Glow(color=#fff, strength=1);*/
}

@media (max-width: 400px)
{
    #lrc_in_box p.lrc_line
    {
        font-size:14px;
    }
    #lrc_in_box p.lrc_line.current
    {
        font-size:16px;
    }
}

@media (min-width: 400px) and (max-width: 500px)
{
    #lrc_in_box p.lrc_line
    {
        font-size:16px;
    }
    #lrc_in_box p.lrc_line.current
    {
        font-size:18px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #lrc_in_box p.lrc_line
    {
        font-size:20px;
    }
    #lrc_in_box p.lrc_line.current
    {
        font-size:22px;
    }
}
@media (min-width: 800px)
{
    #lrc_in_box p.lrc_line
    {
        font-size:24px;
    }
    #lrc_in_box p.lrc_line.current
    {
        font-size:26px;
    }
}



#playBox2
{
    position:relative;
    width:100%;
    overflow:hidden;
    /*transition: all 0.4s ease-out;*/
}
#playBox2 #bg_mp3player
{
    width:100%;
    display:block;
}
#playBox2 #playInfoBox
{
    text-align:left;
    position:absolute;
    width:100%;
    top:0;
    margin:5px 10px;
}
#playBox2 #playInfoBox span
{
    font-size:13px;
    color:#696969;
}
#playBox2 #controlBox
{
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
}
#playBox2 .controlBtn
{
    position:absolute;
    display:block;
    width:13%;
    top:50%;
    margin-top:-9%;
    left:50%;
    z-index:999;
    transition: all 0.1s ease-out;
    visibility:hidden;
}
#playBox2 .controlBtn:hover
{
    margin-top:-8%;
}
#playBox2 .controlBtn img
{
    width:100%;
    display:block;
    border:none;
}
#playBox2 #btn_Stop
{
    margin-left:-45%;
}
#playBox2 #btn_Rewind
{
    margin-left:-28%;
}
#playBox2 #btn_PlayOrPause
{
    width:22%;
    margin-top:-14%;
    margin-left:-11%;
    visibility:visible;
}
#playBox2 #btn_PlayOrPause:hover
{
    margin-top:-13%;
}
#playBox2 #btn_PlayOrPause.pause img#img_btn_pause
{
    display:none;
}
#playBox2 #btn_PlayOrPause.playing img#img_btn_play
{
    display:none;
}
#playBox2 #btn_FastForward
{
    margin-left:15%;
}
#playBox2 #btn_ratechange
{
    margin-left:32%;
    position:relative;
}
#playBox2 #btn_ratechange span#lbl_ratech
{
    width:100%;
    height:24px;
    line-height:24px;
    text-align:center;
    font-size:20px;
    color:#fff;
    font-weight:bold;
    font-family:"微软雅黑";
    position:absolute;
    display:block;
    top:50%;
    margin-top:-12px;
}
@media (max-width: 500px)
{
    #playBox2 #btn_ratechange span#lbl_ratech
    {
        font-size: 14px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #playBox2 #btn_ratechange span#lbl_ratech
    {
        font-size: 18px;
    }
}
@media (min-width: 800px)
{
    #playBox2 #btn_ratechange span#lbl_ratech
    {
        font-size: 22px;
    }
}

#playBox2 #progressBarOutBox
{
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    visibility:hidden;
}
#playBox2 #progressBarBG
{
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    opacity:.3;
}
#playBox2 #progressBarBox
{
    border:none;
    background:transparent;
    box-shadow:none;
    min-height:0;
    margin:1.5% 0;
}
#playBox2 .well
{
    padding:0;
    text-align:center;
}
#playBox2 .slider 
{
    width:calc(90% - 110px) !important;
}
#playBox2 .slider-track
{
    height:2px !important;
    margin-top:-3px !important;
    /*border-radius:0px !important;*/
}
#playBox2 .slider-handle
{
    background:#fff;
    background-image:none;
    width:26px;
    height:26px;
    border-radius:13px;
    margin-top:-5px;
    cursor:pointer;
}
#playBox2 .slider-selection 
{
	background: #09f;
}
#playBox2 #lbl_currentTime, #lbl_duration
{
    color:#fff;
    font-size:20px;
    font-weight:bold;
    position:relative;
    z-index:99;
}
@media (max-width: 500px)
{
    #playBox2 #lbl_currentTime, #lbl_duration
    {
        font-size: 14px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #playBox2 #lbl_currentTime, #lbl_duration
    {
        font-size: 16px;
    }
}
@media (min-width: 700px)
{
    #playBox2 #lbl_currentTime, #lbl_duration
    {
        font-size: 18px;
    }
}

#playBox2 #lbl_currentTime
{
    margin-right:12px;
}
#playBox2 #lbl_duration
{
    margin-left:12px;
}


#playBox2.showLRC #lrc_out_box
{
    display:block;
}
#playBox2.showLRC #controlBox, #playBox2.showLRC #progressBarOutBox, #playBox2.showLRC #lrcBox
{
    display:none;
}


#playBox3
{
    position:relative;
    width:100%;
    overflow:hidden;
    /*transition: all 0.4s ease-out;*/
}
#playBox3 #bg_mp3player
{
    width:100%;
    display:block;
}
#playBox3 #playInfoBox
{
    text-align:left;
    position:absolute;
    width:100%;
    top:0;
    margin:5px 10px;
}
#playBox3 #playInfoBox span
{
    font-size:13px;
    color:#696969;
}
#playBox3 #controlBox
{
   position:absolute;
   width:100%;
   height:100%;
   top:0;
   left:0;
}
#playBox3 .controlBtn
{
    position:absolute;
    display:block;
    width:13%;
    top:50%;
    margin-top:-9%;
    left:50%;
    z-index:999;
    transition: all 0.1s ease-out;
    visibility:hidden;
}
#playBox3 .controlBtn:hover
{
    margin-top:-8%;
}
#playBox3 .controlBtn img
{
    width:100%;
    display:block;
    border:none;
}
#playBox3 #btn_Stop
{
    margin-left:-45%;
}
#playBox3 #btn_Rewind
{
    margin-left:-28%;
}
#playBox3 #btn_PlayOrPause
{
    width:22%;
    margin-top:-14%;
    margin-left:-11%;
    visibility:visible;
}
#playBox3 #btn_PlayOrPause:hover
{
    margin-top:-13%;
}
#playBox3 #btn_PlayOrPause.pause img#img_btn_pause
{
    display:none;
}
#playBox3 #btn_PlayOrPause.playing img#img_btn_play
{
    display:none;
}
#playBox3 #btn_FastForward
{
    margin-left:15%;
}
#playBox3 #btn_ratechange
{
    margin-left:32%;
    position:relative;
}
#playBox3 #btn_ratechange span#lbl_ratech
{
    width:100%;
    height:24px;
    line-height:24px;
    text-align:center;
    font-size:20px;
    color:#fff;
    font-weight:bold;
    font-family:"微软雅黑";
    position:absolute;
    display:block;
    top:50%;
    margin-top:-12px;
}
@media (max-width: 500px)
{
    #playBox3 #btn_ratechange span#lbl_ratech
    {
        font-size: 14px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #playBox3 #btn_ratechange span#lbl_ratech
    {
        font-size: 18px;
    }
}
@media (min-width: 800px)
{
    #playBox3 #btn_ratechange span#lbl_ratech
    {
        font-size: 22px;
    }
}

#playBox3 #progressBarOutBox
{
    position:absolute;
    width:100%;
    left:0;
    bottom:0;
    visibility:hidden;
}
#playBox3 #progressBarBG
{
    position:absolute;
    width:100%;
    height:100%;
    background:#000;
    opacity:.3;
}
#playBox3 #progressBarBox
{
    border:none;
    background:transparent;
    box-shadow:none;
    min-height:0;
    margin:1.5% 0;
}
#playBox3 .well
{
    padding:0;
    text-align:center;
}
#playBox3 .slider 
{
    width:calc(90% - 110px) !important;
}
#playBox3 .slider-track
{
    height:2px !important;
    margin-top:-3px !important;
    /*border-radius:0px !important;*/
}
#playBox3 .slider-handle
{
    background:#fff;
    background-image:none;
    width:26px;
    height:26px;
    border-radius:13px;
    margin-top:-5px;
    cursor:pointer;
}
#playBox3 .slider-selection 
{
	background: #09f;
}
#playBox3 #lbl_currentTime, #lbl_duration
{
    color:#fff;
    font-size:20px;
    font-weight:bold;
    position:relative;
    z-index:99;
}
@media (max-width: 500px)
{
    #playBox3 #lbl_currentTime, #lbl_duration
    {
        font-size: 14px;
    }
}

@media (min-width: 500px) and  (max-width: 800px)
{
    #playBox3 #lbl_currentTime, #lbl_duration
    {
        font-size: 16px;
    }
}
@media (min-width: 700px)
{
    #playBox3 #lbl_currentTime, #lbl_duration
    {
        font-size: 18px;
    }
}

#playBox3 #lbl_currentTime
{
    margin-right:12px;
}
#playBox3 #lbl_duration
{
    margin-left:12px;
}


#playBox3.showLRC #lrc_out_box
{
    display:block;
}
#playBox3.showLRC #controlBox, #playBox3.showLRC #progressBarOutBox, #playBox3.showLRC #lrcBox
{
    display:none;
}