@charset "UTF-8";
/* CSS Document */

.total-control-player {
	width:300px;
	padding:0px;
	font-family: Helvetica, Arial, sans-serif;
	color:black;
	font-size:13px;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	/*
	-webkit-box-shadow: 0px 1px 7px rgba(50, 50, 50, 0.75);
	-moz-box-shadow:    0px 1px 7px rgba(50, 50, 50, 0.75);
	-ms-box-shadow:    0px 1px 7px rgba(50, 50, 50, 0.75);
	-o-box-shadow:    0px 1px 7px rgba(50, 50, 50, 0.75);
	box-shadow:         0px 1px 7px rgba(50, 50, 50, 0.75);
	*/
	position:relative;
}
.total-control-panel {
	/*background: url(../images/default-control-panel.png) no-repeat;*/
	background-color:#F3F2F5;
	background-size:310px 72px;
	background-repeat:no-repeat;
	width:300px;
	height:72px;
	border-bottom:solid;
	border-bottom-width:1px;
	border-bottom-color:#DAD6D5;
	position:relative;
}
.total-song-amount {
	padding:5px;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	text-shadow: 0 1px #FFF;
	background-image: linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -o-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(230,230,230)), color-stop(1, rgb(242,242,242)) );
	font-size:11px;
	border-top:solid;
	border-top-width:1px;
	border-top-color:#DCDCDC;
	position:relative;
}
.total-row-labels {
	text-shadow: 0 1px #FFF;
	background-image: linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -o-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(230,230,230)), color-stop(1, rgb(242,242,242)) );
	padding:5px;
	font-size:11px;
	border-bottom:solid;
	border-bottom-width:1px;
	border-bottom-color:#CACACA;
}
.total-bottom-bar {
	padding:5px;
	text-align:center;
	white-space:nowrap;
	overflow:hidden;
	;
	text-overflow:ellipsis;
	text-shadow: 0 1px #FFF;
	background-image: linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -o-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(230,230,230) 0%, rgb(242,242,242) 100%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0, rgb(230,230,230)), color-stop(1, rgb(242,242,242)) );
}
.total-row {
	padding:5px;
	padding-bottom:10px;
	padding-top:10px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	cursor:pointer;
	font-size:11px;
	color:black;
	font-weight:100;
}
.total-title {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	float:left;
	width:150px;
	margin-right:10px;
}
.total-title-label {
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	float:left;
	width:150px;
	margin-right:10px;
}
.total-artist {
	float:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width:95px;
}
.total-artist-label {
	float:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	width:95px;
}
.total-checked {
	float:left;
	width:12px;
	height:12px;
	margin-right:5px;
	background: url(../images/default-checked.png) no-repeat;
	background-size:12px 12px;
	background-repeat:no-repeat;
	cursor:pointer;
}
.total-unchecked {
	float:left;
	width:12px;
	height:12px;
	margin-right:5px;
	background: url(../images/default-unchecked.png) no-repeat;
	background-size:12px 12px;
	background-repeat:no-repeat;
	cursor:pointer;
}
.total-checked-label {
	float:left;
	width:32px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	background: url(../images/default-checkbox-label.png) no-repeat;
	background-size:12px 12px;
	background-repeat:no-repeat;
	height:12px;
}
.total-playing {
	float:left;
	margin-right:3px;
	width:12px;
	height:12px;
	background: url(../images/default-volume-icon.png) no-repeat;
	background-size:12px 12px;
	background-repeat:no-repeat;

}
.total-not-playing {
	float:left;
	margin-right:3px;
	width:12px;
	height:12px;
}
.total-playlist-songs {
	overflow:auto;
	width:inherit;
	background-color:white;
	
}
.jspDrag {
	background: #dbe9ff;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
}
.jspTrack {
	background: #CCC;
}
.total-position-scrubber {
	height:2px;
	width:270px;
	margin-left:auto;
	margin-right:auto;
	
	/*
	background-image: linear-gradient(bottom, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -o-linear-gradient(bottom, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -moz-linear-gradient(bottom, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -webkit-linear-gradient(bottom, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -ms-linear-gradient(bottom, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -webkit-gradient(  linear,  left bottom,  left top,  color-stop(0, rgb(120,120,120)),  color-stop(1, rgb(189,189,189)) );
	*/
	
	background-image: linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -o-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -moz-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -webkit-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -ms-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -webkit-gradient(  linear,  left top,  left bottom,  color-stop(0, rgb(11,109,189)),  color-stop(1, rgb(9,81,139)) );

	
	
	cursor:pointer;
	position:absolute;
	left:15px;
	bottom:10px;
}

.total-position-scrubber>.ui-slider-handle {
	width:12px;
	height:12px;	
	background: url(../images/default-scrubber-dragger.png) no-repeat;
	background-color:transparent;
	background-size:10px 10px;
	border:none;
}

.total-volume-slider{
	height:2px;
	width:100px;
	margin-left:auto;
	margin-right:auto;
	/*
	background-image: linear-gradient(top, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -o-linear-gradient(top, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -moz-linear-gradient(top, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -webkit-linear-gradient(top, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -ms-linear-gradient(top, rgb(120,120,120) 0%, rgb(189,189,189) 100%);
	background-image: -webkit-gradient(  linear,  left top,  left bottom,  color-stop(0, rgb(120,120,120)),  color-stop(1, rgb(189,189,189)) );
	*/
	
	background-image: linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -o-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -moz-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -webkit-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -ms-linear-gradient(top, rgb(11,109,189) 0%, rgb(9,81,139) 100%);
	background-image: -webkit-gradient(  linear,  left top,  left bottom,  color-stop(0, rgb(11,109,189)),  color-stop(1, rgb(9,81,139)) );
	
		
	cursor:pointer;
	position:absolute;
	right:15px;
	top:13px;
}

.total-volume-slider>.ui-slider-handle {
	width:12px;
	height:12px;	
	background: url(../images/default-volume-dragger.png) no-repeat;
	background-color:transparent;
	background-size:11px 11px;
	border:none;
}



.total-lcd-screen {
	/*background: url(../images/default-lcd-screen.png) no-repeat;*/
	/*background-size:120px 50px;*/
	position:absolute;
	left:10px;
	top:20px;
	width:280px;
	height:45px; 
	/*background-color:#093;*/ }

.total-playing-title {
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	color:#333333;
	padding-top:4px;
	padding-bottom:1px;	
	text-align:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	font-size:12px;
}

.total-playing-artist {
	font-size:12px;
	position:relative;
	width:100%;
	margin-left:auto;
	margin-right:auto;
	color:#333333;
	padding-top:2px;
	padding-bottom:2px;	
	text-align:left;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.total-song-position {
	position:absolute;
	width:50px;
	left:8px;
	bottom:5px;
	font-size:9px;
	text-align:left;
	font-weight:100;
}

.total-song-duration {
	position:absolute;
	width:50px;
	bottom:5px;
	right:8px;
	font-size:9px;
	text-align:right;
	font-weight:100;
	
}

.total-repeat-all {
	position:absolute;
	width:20px;
	height:18px;
	bottom:25px;
	right: 64px;
	background: url(../images/default-repeat-all.png) no-repeat;
	background-color:transparent;
	background-size:20px 18px;
	cursor:pointer;
}

.total-repeat-all-active {
	position:absolute;
	width:20px;
	height:18px;
	bottom:25px;
	right: 64px;
	background: url(../images/default-repeat-all-active.png) no-repeat;
	background-color:transparent;
	background-size:20px 18px;
	cursor:pointer;
}

.total-repeat-one {
	position:absolute;
	width:20px;
	height:18px;
	bottom:25px;
	right: 40px;
	background: url(../images/default-repeat-one.png) no-repeat;
	background-color:transparent;
	background-size:20px 18px;
	cursor:pointer;
}

.total-repeat-one-active {
	position:absolute;
	width:20px;
	height:18px;
	bottom:25px;
	right: 40px;
	background: url(../images/default-repeat-one-active.png) no-repeat;
	background-color:transparent;
	background-size:20px 18px;
	cursor:pointer;
}

.total-shuffle {
	position:absolute;
	width:20px;
	height:18px;
	bottom:25px;
	right: 15px;
	background: url(../images/default-shuffle.png) no-repeat;
	background-color:transparent;
	background-size:20px 18px;
	cursor:pointer;
}

.total-shuffle-active {
	position:absolute;
	width:20px;
	height:18px;
	bottom:25px;
	right: 15px;
	background: url(../images/default-shuffle-active.png) no-repeat;
	background-color:transparent;
	background-size:20px 18px;
	cursor:pointer;
}

.total-artwork {
	float:left;
	top:5px;
	left:50px;
	width:50px;
	height:50px;
	background: url(../images/artwork.png) no-repeat;
	background-size:50px 50px;
	margin-right:10px;
	
		
}

.total-maximize {
	position:absolute;
	top:10px;
	right:15px;
	width:19px;
	height:15px;
	background: url(../images/default-maximize.png) no-repeat;
	background-size:18px 15px;
	cursor:pointer;
		
}


.play_title {
	position:absolute;
	width:124px;
	height:33px;
	bottom:20px;
	left:12px;
	background: url(../images/player_title.png) no-repeat;
	background-size:124px 33px;
	/*cursor:pointer;*/
}


.play_person {
	position:absolute;
	height:24px;
	width:150px;
	bottom:15px;
	right:12px;
	/*background: url(../images/player_title.png) no-repeat;8/
	background-size:82px 24px;
	/*cursor:pointer;*/
	text-align:right;
	font-size:12px;
}



.total-play {
	position:absolute;
	height:34px;
	width:35px;
	bottom:27px;
	left:43px;
	/*background: url(../images/default-play.png) no-repeat;*/
	background: url(../../../images/sub/music_icon_play_on.png) no-repeat;
	background-size:35px 34px;
	cursor:pointer;
}

.total-pause {
	position:absolute;
	height:34px;
	width:35px;
	bottom:27px;
	left:43px;
	/*background: url(../images/default-pause.png) no-repeat;*/
	background: url(../../../images/sub/music_icon_stop_on.png) no-repeat;
	background-size:35px 34px;
	cursor:pointer;
}

.total-next {
	position:absolute;
	width:27px;
	height:28px;
	bottom:30px;
	left:80px;
	/*background: url(../images/default-next.png) no-repeat; */
	background: url(../../../images/sub/music_icon_next_on.png) no-repeat;
	background-size:27px 28px;
	cursor:pointer;
}

.total-previous {
	position:absolute;
	height:28px;
	width:27px;
	bottom:30px;
	left:14px;
	/*background: url(../images/default-previous.png) no-repeat;*/
	background: url(../../../images/sub/music_icon_prev_on.png) no-repeat;
	background-size:27px 28px;
	cursor:pointer;
}

.total-song-tooltip {
	width:278px;
	-webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.50);
	-moz-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.50);
	-ms-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.50);
	-o-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.50);
	box-shadow:         0px 1px 3px rgba(50, 50, 50, 0.50);
	background-color:white;
	position:absolute;
	bottom:-75px;
	padding:10px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:solid;
	border-color:#D7D7D7;
	border-width:1px;
} 

.total-song-tooltip-top {
	width:278px;
	-webkit-box-shadow: 0px 1px 3px rgba(50, 50, 50, 0.50);
	-moz-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.50);
	-ms-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.50);
	-o-box-shadow:    0px 1px 3px rgba(50, 50, 50, 0.50);
	box-shadow:         0px 1px 3px rgba(50, 50, 50, 0.50);
	background-color:white;
	position:absolute;
	top:-75px;
	padding:10px;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border:solid;
	border-color:#D7D7D7;
	border-width:1px;
	
}
.total-tooltip-title {
	padding:3px;
	font-size:11px;
	font-weight:100px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
	
}

.total-tooltip-artist {
	padding:3px;
	font-size:11px;	
	font-weight:100px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.total-add-song {
	position:absolute;
	top:3px;
	left:30px;
	width:22px;
	height:16px;
	background: url(../images/default-add-button.png) no-repeat;
	background-size:21px 16px;
	cursor:pointer;
}