﻿.sm2-bar-ui {
	position: relative;
	display: block;
	width: 96%;
	max-width: 940px;
	margin:14px auto 0 auto;
	font-weight: normal;
	border-radius: 0px;
	overflow: hidden;
	direction:ltr;
	font-size: 15px;
	text-shadow: none;
}

.sm2-bar-ui .sm2-playlist li {
 text-align: center;
 margin-top: 2px;
 font-size: 12px;
 line-height: 1em;
}

.sm2-bar-ui .bd {
 display: table;
 border-bottom: none;
}

.sm2-bar-ui,
.sm2-bar-ui .bd a {
 color: #fff;
 text-decoration: none;
}

.sm2-icon-previous {
	background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/first.png);
	background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/first.svg);
}

.sm2-icon-next {
	background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/last.png);
	background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/last.svg);
}

.sm2-button {
	position:relative;
	display:block;
	margin-top:20px;
	margin-left:calc(50% - 16px);
	float:left;
	overflow:visible;
	width:32px;
	height:32px;
	border-radius:56px;
	z-index:11;
}

.sm2-button a{
	-webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
	-webkit-tap-highlight-color: transparent;
}

.sm2-button a img{
	width:20px;
	height:auto;
}

.sm2-button	.btnpaused {
	position:absolute;
	top:16px;
	left:8px;
}
		
.sm2-button	.btnplaying {
	position:absolute;
	top:16px;
	left:6px;
	display:none;
}

.playing .btnplaying {
	display:block;
}

.playing .btnpaused {
	display:none;
}

.paused .btnplaying {
	display:none;
}

.paused .btnpaused {
	display:block;
}

.sm2-bar-ui .sm2-inline-button {
	position: absolute;
	width: 40px;
	height: 40px;
}

.sm2-bar-ui .sm2-inline-status {
 line-height: 100%;
 /* how much to allow before truncating song artist / title with ellipsis */
 display: inline-block;
 min-width: 200px;
 max-width: 20em;
 /* a little more spacing */
 padding-left: 0.75em;
 padding-right: 0.75em;
}

.sm2-inline-time,
.sm2-inline-duration {
 display: table-cell;
 width: 1%;
 line-height: 0.9em;
 min-width: 2em; /* if you have sounds > 10:00 in length, make this bigger. */
 vertical-align: middle;
 position:relative;
 top:22px;
 left:0px;
 font-family:sansz;
 font-size:12.8px;
 color:rgba(0,0,0,0.8);
}

.sm2-bar-ui .sm2-playlist {
 position: absolute;
 top: 20px;
 left: 12%;
 width: 76%;
 height: 1.45em;
 display:block;
 font-family: sansz;
 font-weight: 400;
 font-size: 11px;
}

.sm2-bar-ui .sm2-playlist ul li,
.sm2-bar-ui .sm2-playlist ul li a {
 position: relative;
 display: block;
 /* prevent clipping of characters like "g" */
 height: 1.5em;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 text-align: center;
}

.sm2-row {
 position: relative;
 display: table-row;
}

.sm2-progress-bd {
 /* spacing between progress track/ball and time (position) */
 padding: 0px 0px;
 width:108%;
 right: 4%;
 top:6px;
 position:relative;
 margin: 0 auto;
}

.sm2-progress .sm2-progress-track,
.sm2-progress .sm2-progress-ball,
.sm2-progress .sm2-progress-bar {
 position: relative;
 width: 100%;
 height: 6px;
 border-radius: 0.65em;
}

.sm2-progress .sm2-progress-bar {
 /* element which follows the progres "ball" as it moves */
 position: absolute;
 left: 0px;
 top: 0px;
 width: 0px;
 background-color: #5846bb;
 background-image: url(../image/black-33.png);
 background-image: none, none;
}

.sm2-progress .sm2-progress-track {
 background-color: rgba(255, 255, 255,0.7);
}

.sm2-inline-button {
 background-position: 50% 50%;
 background-repeat: no-repeat;
 line-height: 10em;
}

.play-pause,
.play-pause:hover,
.paused .play-pause:hover {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/play.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/play.svg);
 background-size: 67.5%;
 background-position: 40% 53%;
}

.playing .play-pause {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/pause.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/pause.svg);
 background-size: 57.6%;
 background-position: 50% 53%;
}


.previous {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/first.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/first.svg);
}

.next {
 background-image: url(../image/icomoon/entypo-25px-ffffff/PNG/last.png);
 background-image: none, url(../image/icomoon/entypo-25px-ffffff/SVG/last.svg);
}

.previous,
.next {
 background-size: 49.5%;
 background-position: 50% 50%;
}

.sm2-extra-controls .previous,
.sm2-extra-controls .next {
 background-size: 53%;
}



.bd.sm2-playlist-drawer {
 width: 100%;
 height: 0px;
 display: block;
 overflow: hidden;
}

.sm2-bar-ui .bd.sm2-playlist-drawer {
 opacity: 0;
 /* redraw fix for Chrome, background color doesn't always draw when playlist drawer open. */
 transform: translateZ(0);
 transition: all 0.2s ease-in-out;
 transition-property: transform, height, opacity, background-color, -webkit-filter;
}

.sm2-playlist-wrapper {
 display: none;
}

.sm2-bar-ui .sm2-inline-element {
 display: table-cell;
}

.sm2-bar-ui .sm2-inline-element {
 /* collapse */
 width: 1%;
}

.sm2-bar-ui .sm2-inline-status {
 /* full width */
 width: 100%;
 min-width: 100%;
 max-width: 100%;
}

.sm2-bar-ui > .bd {
 width: 100%;
}

.sm2-bar-ui .sm2-playlist-drawer {
 /* re-hide playlist */
 display: block;
 overflow: hidden;
}
/* ---------------------------------- */

.newpmbox {
	overflow:visible ;
	margin-top:0px;
	height:42px;
	border-radius:6px;
	background-color:rgba(0,0,0,0);
}

.newpmbox .sm2-bar-ui {
	overflow:visible ;
}

.newpmbox .sm2-main-controls {
	background-color:rgba(0,0,0,0);
}

.newpmbox .sm2-button-element {
	position:absolute;
	display:block;
	margin-top:36px;
	overflow:visible;
	width:36px;
	height:36px;
	z-index:100;
}

.newpmbox .sm2-button-element-next {
	right:calc(50% - 58px);
}

.newpmbox .sm2-button-element-prev {
	left:calc(50% - 62px);
}

.newpmbox .sm2-inline-element {
	overflow:visible;
}
