* { padding: 0px; margin :0px; }
body {font-size: 14px; line-height: 1.428571429; }
ul, li { list-style: none; }
.mainContainer { margin:0 auto; width:800px }
.containerPlayer, .containerSource { display:inline-block; padding:10px; margin:0px 10px; }

.snippet { width:70%; border:1px solid #ccc; border-radius:5px; min-height:280px; max-height:280px; color:#fff; background-color:#343434; margin-top:1rem;  }
.snippet:nth-child(2) { margin-top:2rem; }
.snippet pre { max-height:230px; padding:5px; }
.snippet h4 { padding:10px; color:#343434; background-color:#00bd9b; }

/* Playlist */
#listContainer { 
	width:570px; 
	height: 500px;
	overflow: auto;
}
#listContainer ul { 
	background-color: #000; 
	clear: both; 
	cursor: pointer;  
}
#listContainer li { 
	padding:15px 10px ; 
	border-bottom: 1px solid #343434;
}
#listContainer li:nth-child(even) { 
	background-color:#000; 
}
#listContainer li:hover, #listContainer li:nth-child(even):hover { 
	background-color:#891428; 
	color:#fff; }
#listContainer li a { 
	text-decoration: none; 
	font-weight: 300;
	color:#BBB; }
#listContainer li.activeAudio { 
	background-color:#891428; 
}

#listContainer li.activeAudio a{ 
	color:white;
}

.bar{
	width: 50% !important;
}


/* Player Controls */
#playerContainer { width:570px; height:130px; background-color:#333333;  }
.controls li:first{margin-right:10px}
.controls li { float:left; display:inline-block; width:50px; text-align:center; margin-top:8px;margin-left:10px }

.controls li a { display:inline-block; }
.playAudio,.play { background: url('images/audio_icons-2.png') no-repeat -2px -35px; width: 32px; height: 32px; margin:auto; }
.playAudio:hover { background: url('images/audio_icons-2.png') no-repeat -2px -3px; }
.pauseAudio { background: url('images/audio_icons-2.png') no-repeat -36px -35px; width: 32px; height: 32px; margin:auto; }
.pauseAudio:hover { background: url('images/audio_icons-2.png') no-repeat -36px -3px; }
.shuffle { background: url('images/audio_icons-2.png') no-repeat -28px -96px; width: 32px; height: 32px; margin:auto; }
.shuffleActive, .shuffle:hover { background: url('images/audio_icons-2.png') no-repeat -28px -71px; width: 32px; height: 32px; margin:auto; }
.left { background: url('images/audio_icons-2.png') no-repeat -60px -99px; width: 24px; height: 24px; margin:auto; margin-top:4px; opacity:0.4; }
.left:not(.disabled):hover { opacity:1; }
.left.disabled, .right.disabled { opacity:0.4; cursor:default; }
.right { background: url('images/audio_icons-2.png') no-repeat -88px -75px; width: 24px; height: 24px; margin:auto; margin-top:4px; opacity:0.4; }
.right:not(.disabled):hover { opacity:1; }
.repeat { background: url('images/audio_icons-2.png') no-repeat -4px -103px; width: 21px; height: 21px; margin:auto; margin-top:7px; }
.repeat:hover, .repeat.loopActive { background: url('images/audio_icons-2.png') no-repeat -4px -79px; }
.volume { width: 20px; height: 20px; margin-top:-10px; margin-left:5px; margin-right:5px; float:left; background: url('images/audio_icons-2.png') no-repeat; }
.volume1 { background-position: -5px -150px; }
.volume2 { background-position: -5px -198px; }
.volume3 { background-position: -5px -246px; }
.mute { background-position: -34px -127px; }
.progress { clear:both; height:4px; background-color:#666666; width:100%; cursor:pointer; position:relative; }
.progress .updateProgress { width:0px; background-color:#00BD9B; height:100%; float:left; position:relative; }
.volumeControl { position: relative; margin: 8px auto; height: 20px;}
.volumeControl .updateProgress { display:inline-block; vertical-align:middle; margin-top:2px; }
input[type="range"] { -webkit-appearance: none; -moz-appearance: none; background-color: #00BD9B; height: 2px; }

.audioDetails { 
	clear:both; 
	color:#fff; 
	font-size:12px; 
	padding:5px; 
}

.audioTime { display: inline-block; text-align: right; float: right; }
.songPlay { display:inline-block; }
.seekableTrack { width: 0%; background-color:#666666; height: 4px; position: absolute; z-index: 0; display: block; }
.seekableTrack, .progress .updateProgress { -webkit-transition: width 0.6s ease; -moz-transition: width 0.6s ease; -o-transition: width 0.6s ease; transition: width 0.6s ease; }