stdbWeb/jwt/sample/css/bbplayer.css

/* 
Optional styling for bbplayer elements.
*/

.bbplayer {
  	
	color:#01C675;
	/*--margin-left: 31%;
	padding-top: 29%;--*/
	position:relative;
	padding: 10px 0 0px 0;
}
.bb-play {
   width: 32px;
   height: 32px;
   display: inline-block;
   background: url(../images/img_sprite.png)-800px -13px;
   vertical-align: middle;
   transition: none;
   margin-right: 10px;
   cursor: pointer;
   position: absolute;
   left: -4px;
   top: 5px;
}

/*--.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: 19px;
  height: 20px;
  display: inline-block;
  background: url(../images/img_sprite.png)-948px -11px;
  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: 20px;
    height: 20px;
    background: url(../images/img_sprite.png)-899px -18px;
    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:20px;
	height: 20px;
	display: inline-block;
	background: url(../images/img_sprite.png)-853px -19px;
	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:#4fc1e9;
	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){
	.bb-forward {
		margin: -14px 6px 0 8px;
	}
}

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