/* ====================================================================*/
	/*RESET CSS*/
/* ====================================================================*/

/*html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }*/
/* HTML5 display-role reset for older browsers */
/*article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block; }
body{ line-height: 1; }
ol, ul{ list-style: none; }
blockquote, q{ quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after{ content: ''; content: none; }
table{	border-collapse: collapse; border-spacing: 0; }*/

/* ==================================================================== */
	/*RESET CSS*/
/* ==================================================================== */

.player{ width: 100%; position: fixed; bottom: 0; left: 0; z-index: 99999999999999; display: none; }

.player[data-mediaType=chapter] .rl-seekbar{ width: 100%.; height: 8px; position: relative; cursor: pointer; background: #423c9d; display: block;}
.player[data-mediaType=chapter][data-state=error] .rl-seekbar{ display: none; }
.player .rl-progress{ width: 0; height: 100%; background: #fff; position: relative; }

.player .corps{ width: 100%; height: 52px; background: #3e5ab0; color: #fff; font-size: 15px; }
.player[data-state=error] .corps{ background: #ee2335; }
.player .corps .controls{ float: left; width: 104px; padding: 10px 0 0 0; }
.player .corps .controls li{ float : left; width: 52px; text-align: center; }
.player .corps .controls li .player-icon{ border: none; width: 30px; height: 30px; text-indent: -99999px; background-repeat: no-repeat; opacity: 0.8; cursor: pointer; }
.player .corps .controls li .rl-play{ background: url('/img/player/ic_play.png') no-repeat; }
.player .corps .controls li .rl-stop{ background: url('/img/player/ic_stop.png') no-repeat; display: none; }
.player .corps .controls li .rl-pause{ background: url('/img/player/ic_pause.png') no-repeat; display: none; }
.player .corps .controls li .rl-loading{ background: url('/img/player/loading.gif') no-repeat; display: none; }
.player .corps .controls li .rl-mute{ background: url('/img/player/ic_unmute.png') no-repeat; }
.player .corps .controls li .rl-unmute{ background: url('/img/player/ic_mute.png') no-repeat; display: none; }
.player .corps .controls li .rl-popup{ background: url('/img/player/ic_popup.png') no-repeat; display: none; }
.player .corps .controls li .volume-bar{ display: none; width: 52px; height: 82px; position: absolute; bottom: 37px; cursor: pointer; }
.player .corps .controls li.expand .volume-bar{ display: block; }
/*.player[data-mediaType=chapter] .controls li .volume-bar{ top: -59px; }*/
.player .corps .controls li .rl-volume-bar{  width: 12px; height: 75px; background: #423C9D; position: relative; cursor: pointer; margin: 0 auto; border-radius: 2px; }
.player .corps .controls li .rl-volume-bar .rl-volume-bar-value{ background: #fff; width: 8px; position: absolute; bottom: 0; left: 2px; border-radius: 2px;}
.player .corps .controls li .rl-play:hover,
.player .corps .controls li .rl-pause:hover,
.player .corps .controls li .rl-mute:hover,
.player .corps .controls li .rl-unmute:hover,
.player .corps .controls li .rl-popup:hover{ opacity: 1; }

.player .corps .item{ float: left; height: 52px; }
.player .corps .itemImg{ float: left; display: block; width: 52px; height: 52px; overflow: hidden; }
.player .corps .item .itemImg .imgContainer { padding-left: 0; margin: 0;}
.player .corps .item .itemImg .imgContainer li{ width: 52px; height: 52px; }
/*.player .corps .item .itemImg .imgContainer li[data-status=visible]{ display: inline-block; }*/
/*.player .corps .item .itemImg .imgContainer li[data-status=hidden]{ display: none; }*/

.player .corps .item .itemInfos { float: left; display: block; margin: 5px 0 0 10px; }
.player .corps .item .itemInfos .itemName { font-weight: bold; height: 21px; overflow: hidden;}
.player .corps .item .itemInfos .itemDescription { height: 21px; overflow: hidden; }

.player .corps .time { float: right; margin: 15px 10px 0 10px; padding: 0;}
.player .corps .time li { display: inline-block; text-align: center}
.player .corps .time .jp-duration { color: rgba(255, 255, 255, 0.8) }

.player .corps .actionButton { float: right; padding: 0; margin: 10px 0 0 0;}
.player .corps .actionButton>li { width: 52px; float: left; text-align: center; }
.player .corps .actionButton li .ic-action { width: 30px; height: 30px; text-indent: -9999px; display: block; margin: auto; background-repeat: no-repeat; opacity: 0.8;}
.player .corps .actionButton li .ic-action:hover{ opacity: 1; }
.player .corps .actionButton li .icInfos { background: url('/img/player/ic_info.png'); }
.player .corps .actionButton li .icInfos[data-status=unavailable] { opacity: 0.4; }
.player .corps .actionButton li .icAddFav { background: url('/img/player/ic_addfav.png'); /*cursor: pointer;*/ }
.player .corps .actionButton li .icAddFav[data-status=disable] { opacity: 0.4; }
.player .corps .actionButton li .icAddFav[data-status=available] { background: url('/img/player/ic_addfav_full.png'); }
.player .corps .actionButton li .drop-up-favorite { top: -130%; }
.player .corps .actionButton li .drop-up-favorite li { height: 30px; line-height: 30px; text-align: left;}
.player .corps .actionButton li .drop-up-favorite li a { cursor: pointer; }

.player .corps .actionButton .actionWithText { width: 112px; margin: 0 8px; }
.player .corps .actionButton .actionWithText a { color: #fff; opacity: 0.4; display: block;}
.player .corps .actionButton .actionWithText .text-action  { display: block; float: left; line-height: 30px; }
.player .corps .actionButton .actionWithText[data-status=available] a { opacity: 0.8; cursor: pointer; }
.player .corps .actionButton .actionWithText[data-status=available] a:hover { opacity: 1; }
.player .corps .actionButton .actionWithText .ic-action2{  width: 30px; height: 30px; text-indent: -9999px; display: block; float: left; margin: 0 0 0 5px; }
.player .corps .actionButton .itunes .icItunes { background: url('/img/player/ic_itunes.png'); }
.player .corps .actionButton .spotify .icSpotify { background: url('/img/player/ic_spotify.png'); }
.player .corps .actionButton .deezer .icDeezer { background: url('/img/player/ic_deezer.png'); }
.player .corps .actionButton .textShare { width: 90px; margin-left: 10px; }
.player .corps .actionButton .textShare span { opacity: 0.8; line-height: 30px; }

.player .corps .actionButton li .social[data-status=unavailable] { opacity: 0.4; }
.player .corps .actionButton li .icFacebook { background: url('/img/player/ic_fb.png'); }
.player .corps .actionButton li .icTwitter { background: url('/img/player/ic_twitter.png'); }

@media  (min-width: 320px) and (max-width: 359px){
	.player .corps .item .itemInfos{ width: 150px !important; }
	.player .corps .actionButton { width: 260px !important; }
}
@media  (min-width: 360px) and (max-width: 419px){
	.player .corps .item .itemInfos{ width: 190px !important; }
}
@media  (min-width: 320px) and (max-width: 800px){
	.player .corps { height: 104px; }
	.player .corps .actionButton { float: right; clear: both; width: 300px; height: 40px; }
	.player .corps .time { float: right; }

	.player .corps .item .itemInfos{ width: 230px; }

	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .itunes { width: 36px; margin: 0;}
	.player .corps .actionButton .itunes .text-action { display: none !important; }
	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}
@media  (min-width: 800px) and (max-width: 1000px){
	.player .corps { height: 104px; }
	.player .corps .actionButton { float: right; clear: both; width: 300px; height: 40px; }
	.player .corps .time { float: right; }

	.player .corps .item .itemInfos{ width: 365px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .itunes { width: 36px; margin: 0;}
	.player .corps .actionButton .itunes .text-action { display: none !important; }
	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}
@media  (min-width: 1000px) and (max-width: 1100px){
	.player .corps .item .itemInfos{ width: 465px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .itunes { width: 36px; margin: 0;}
	.player .corps .actionButton .itunes .text-action { display: none !important; }
	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}
@media  (min-width: 1100px) and (max-width: 1200px){
	.player .corps .item .itemInfos{ width: 565px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .itunes { width: 36px; margin: 0;}
	.player .corps .actionButton .itunes .text-action { display: none !important; }
	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}
@media  (min-width: 1200px) and (max-width: 1255px){
	.player .corps .item .itemInfos{ width: 665px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .itunes { width: 36px; margin: 0;}
	.player .corps .actionButton .itunes .text-action { display: none !important; }
	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}
@media  (min-width: 1255px) and (max-width: 1330px){
	.player .corps .item .itemInfos{ width: 720px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .itunes { width: 36px; margin: 0;}
	.player .corps .actionButton .itunes .text-action { display: none !important; }
	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}

@media  (min-width: 1330px) and (max-width: 1440px){
	.player .corps .item .itemInfos{ width: 720px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .spotify { width: 36px; margin: 0;}
	.player .corps .actionButton .spotify .text-action { display: none !important; }
	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }

}
@media  (min-width: 1440px) and (max-width: 1600px){
	.player .corps .item .itemInfos{ width: 720px; }
	
	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0; }

	.player .corps .actionButton .deezer { width: 36px; margin: 0;}
	.player .corps .actionButton .deezer .text-action { display: none !important; }

	.player .corps .actionButton .textShare { display: none; }
}
@media  (min-width: 1600px) and (max-width: 1760px){
	.player .corps .item .itemInfos{ width: 720px; }

	.player .corps .actionButton>li{ width: 36px;}
	.player .corps .actionButton .actionWithText{ margin: 0 3px; }

	.player .corps .time { margin: 5px 10px 0 10px; }
	.player .corps .time li { display: block; }
	.player .corps .time .separator { display: none !important; }
}
@media  (min-width: 1760px) and (max-width: 1900px){
	.player .corps .item .itemInfos{ width: 720px; }
}
@media  (min-width: 1900px)and (max-width: 1920px){
	.player .corps .item .itemInfos{ width: 850px; }
}