/* 
Optional styling for bbplayer elements.
*/

.bbplayer {
  color: #01C675;
  position: relative;
  padding: 30px 0 0px 0;
}
.bb-play {
  width: 24px;
  height: 26px;
  display: inline-block;
  background: url(../images/img-sprite-1.png)-231px -263px;
  vertical-align: middle;
  transition: none;
  margin-right: 10px;
  cursor: pointer;
  position: absolute;
  left: 0px;
  top: 25px;
}

/*--.bb-play:hover{
	width: 24px;
	height: 26px;
	display: inline-block;
	background: url(../images/img-sprite.png)-7px -914px;
	vertical-align: middle;
	transition: none;
	margin-right: 10px;
	cursor: pointer;
}--*/
.bb-playing{
	width: 24px;
	height: 26px;
	display: inline-block;
	background: url(../images/img-sprite-1.png)-7px -902px;
	vertical-align: middle;
	transition: none;
	margin-right: 10px;
	cursor: pointer;
}
/*--.bb-playing {
	vertical-align: middle;
	background-image: url('../images/img-sprite.png');
	background-position:-9px -917px;
	width: 20px;
	height: 20px;
}--*/
.bb-trackLength {
	vertical-align: middle;
	line-height: 32px;
	display: inline-block;
	height: 32px;
	color: #38E3F5;
	font-size: 1.2em;
}
.bb-forward {
 	/*--vertical-align: middle;
	display: inline-block;
	height: 50px;
	width: 50px;
	background: #38E3F5;
  	background-image: url('../images/next.png');
 	 background-position: center;
  	background-repeat: no-repeat;
  	cursor: pointer;
  	border-radius: 30em;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	-o-border-radius: 30em;--*/
	width: 12px;
	height: 20px;
	display: inline-block;
	background: url(../images/img-sprite-1.png)-183px -267px #01C675;
	vertical-align: middle;
	transition: none;
	cursor: pointer;
	display: inline-block;
	margin: -14px 20px 0 8px;
}
.bb-rewind {
	/*--vertical-align: middle;
	display: inline-block;
	height: 50px;
	width: 50px;
	background: #38E3F5;
	background-image: url('../images/pre.png');
	background-position: center;
	background-repeat: no-repeat;
	cursor: pointer;
	border-radius: 30em;
	-webkit-border-radius: 30em;
	-moz-border-radius: 30em;
	-o-border-radius: 30em;
	margin: 0 1.5em 0 1em;--*/
	
	width: 12px;
	height: 20px;
	display: inline-block;
	background: url(../images/img-sprite-1.png)-172px -267px #01C675;
	vertical-align: middle;
	transition: none;
	cursor: pointer;
	margin: -14px 0 0 39px;
}
.bb-trackTime {
  	vertical-align: middle;
	line-height: 32px;
	display: inline-block;
	height: 32px;
	color: #000;
	/* margin-left: 5%; */
	font-size: 1em;
	font-weight: bold;
	
}
.bb-trackLength {
	vertical-align: middle;
	line-height: 32px;
	display: inline-block;
	height: 32px;
	color: #01C675;
	font-size: 1em;
	font-weight: bold;
}
.bb-trackTitle {
 	color: #000;
	font-weight: 400;
	text-transform: uppercase;
	position: absolute;
	left: 53%;
	top: 8%;
	font-size: 0.875em;
	border-bottom: 1px dashed #EEE;
	padding-bottom: 0.2em;
	width: 44%;
}
.bb-debug {
  height:10em;
  width: 32em;
  border: 1px solid #DDD;
  border-radius: 5px;
  margin: 10px;
  padding: 10px;
  overflow: auto;
  font-weight: normal;
  font-size: 14px/1.5;
}
.bb-label {
  font-size: 14px/1.5;
  font-weight: 300;
  margin: 10px;
}
p.bar{
	font-size:3em;
}
@media (max-width:1366px){
	.wrap{
		width:90%;
	}
	.bb-forward {
		margin: -14px 6px 0 8px;
	}
}

@media (max-width:1280px){
	.wrap{
		width:90%;
	}
	.bb-rewind {
		margin: -14px 0 0 35px;
	}
}
@media (max-width:1024px){
	.wrap{
		width:90%;
	}
	.bb-rewind {
		margin: -3px 0 0 31px;
	}
	.bb-forward {
		margin: -3px 0px 0 1px;
	}
	.bb-play {
		top: 26px;
	}
}