/*PLAYER AND PLAYLIST*/
@charset "utf-8";


	/* CSS Document 
		-webkit-
		-moz-
		-ms-
		-o-
	*/


/*PLAYLIST*/
	#playlistContainer{
		position: absolute;	
		left: 0;
		top: 0;
		width: 235px;
		height: 100%;
		z-index: 900;
		overflow-y: scroll;
		overflow-x: hidden;
		border: none;
		border-right: 1px solid #000;
			box-shadow: 2px 2px 32px #000;
		-webkit-box-shadow: 2px 2px 32px #000;
		-moz-box-shadow: 2px 2px 32px #000;
		-ms-box-shadow: 2px 2px 32px #000;
		-o-box-shadow: 2px 2px 32px #000;
		scrollbar-width: none; /*mozilla scrollbar*/
	}
	#playlistContainer::-webkit-scrollbar-track {
		-webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, .1);
		-moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, .1);
		-ms-box-shadow: inset 0 0 3px rgba(0, 0, 0, .1);
		-o-box-shadow: inset 0 0 3px rgba(0, 0, 0, .1);
		background-color: #E4A909;
		border: 1px solid #000;
		border-right: none;
		border-bottom: none;
		border-top: none;
	}
	
	#playlistContainer::-webkit-scrollbar {
		width: 12px;
		background-color: transparent;
	}

	#playlistContainer::-webkit-scrollbar-thumb {
		background-color: #000000;
	}

	#playlistContent{
		position: relative;
		background-color: #fc0;
		top: 0;
		margin-top: 32px;
		left: 0;
		padding-left: 2px;
		padding-right: 27px;
		padding-bottom: 1250px;
		width: 90%;
		height: 100%!important;
		border-left: 1px solid #000;
		z-index: 900;
		
	}
	#playlist{
		position: absolute;	
		right: 1px;
		top: 0;
		width: 95%;
		height: 100%;
		z-index: 900;
	}
	#playlistHead{
		position: absolute;	
		background:url("iMGS/playlisthead.png");
		background-size: 333px 33px;
		background-position: 282px 0px;
		background-color: #fc0;
		left: 0;
		top: 0;
		margin-bottom: 10px;
		width: 235px;
		height: 33px;
		overflow: hidden;
		border-bottom: 1px solid #033;
		z-index: 900;
	}
	/*bottom of player metal*/
	#playlistFoot{
		position: absolute;	
		background:url("iMGS/playlistfoot.png");
		background-size: 230px 33px;
		background-position: center 0;
		background-color: #fc0;
		left: 0;
		bottom: 0;
		margin-bottom: 8px;
		width: 235px;
		height: 30px;
		overflow: hidden;
		border-top: 1px solid #000;
		z-index: 900;
	}
	.song{
		position: relative;
		opacity: .9!important;
		background-color: #ccc;
		top: 0;
		left: 1px;
		margin-left: 1px;
		padding-top: 5px;
		padding-bottom: 2px;
		padding-left: 4px;
		width: 220px;
		height: 8px;
		margin-bottom: 3px;
		float: clear;
		overflow: hidden;
		
		color: rgba(0,0,0,1)!important;
		font-family: roboto, verdana;
		font-size: 1.5em;
		font-weight: normal;
		text-transform: uppercase;
		line-height: .25em;
		text-align: justify;
		cursor: grabbing;
		z-index: 902;
		border: 1px solid #000;

			box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		-moz-box-shadow: 1px 1px 3px #000;
		-ms-box-shadow: 1px 1px 3px #000;
		-o-box-shadow: 1px 1px 3px #000;
			border-radius: 2px 2px;
		-webkit-border-radius: 2px 2px;
		-moz-border-radius: 2px 2px;
		-ms-border-radius: 2px 2px;
		-o-border-radius: 2px 2px;
	}	
	.song:first-of-type{
		border-top: 1px solid #ccc;
		border-top-left-radius: 4px;
	}
	.song:hover{
		background-color: #333;
		color: #ccc!important;
	}
	#hiddenSong{
		 display: none;
	}
	.playing{
		display: flex;
		justify-content: left;
		align-items: center;
		background-color: #fc0!important;
		opacity: .6!important;
		height: 20px!important;
		padding-bottom: 5px!important;
		font-size: 2em!important;
	}
	.playing:hover{
		color: #000!important;
	}
	.playlistToggleButton{
		position: absolute;
		height: 60px;
		top:50%;
		margin-top:-44px;
		left: 0;
		opacity: .75;
		z-index: 900;
		background-image: url('iMGS/arrowPop.png');
		background-position: center;
		background-repeat: no-repeat;
		background-color: #fc0;
		border: 2px solid #000;
	}
	#leftArrow{
		transform: scaleX(-1);
		-webkit-transform: scaleX(-1);
		-mos-transform: scaleX(-1);
		-ms-transform: scaleX(-1);
		-o-transform: scaleX(-1);
		display: none;
		width: 30px;
		margin-left: 235px;
		border-right: none!important;
		
			border-radius: 20px 0 0 20px;
		-webkit-border-radius: 20px 0 0 20px;
		-moz-border-radius: 20px 0 0 20px;
		-ms-border-radius: 20px 0 0 20px;
		-o-border-radius: 20px 0 0 20px;
	}
	#rightArrow{
		display: none;
		width: 40px;
		margin-left: -1px;
		border-left: 1px solid #000!important;
			border-radius: 0 20px 20px 0;
		-webkit-border-radius: 0 20px 20px 0;
		-moz-border-radius: 0 20px 20px 0;
		-ms-border-radius: 0 20px 20px 0;
		-o-border-radius: 0 20px 20px 0;	
	}
	#leftArrow:hover{
		cursor: grabbing;
	}
	#rightArrow:hover{
		cursor: grabbing;
	}
	


	
	
	
/* PLAYER */
#playerContainer{
	position: absolute;	
	background:url("iMGS/guns.png");
	background-position: top center;
	background-repeat: no-repeat;
	z-index: 900;
	top: 0;
	margin-top: -20px;
	left: 50%;
	margin-left: -400px;
	width: 800px;
	height: 270px;
	overflow: hidden;
	opacity: 1;
	transform: scale(.6);
	-webkit-transform: scale(.6);
	-moz-transform: scale(.6);
	-ms-transform: scale(.6);
	-o-transform: scale(.6);
}
#player{
	position: absolute;
	background:url("iMGS/playerButtons.png");
	background-position: 30px -53px;
	background-color: #fe0000;
	background-repeat: no-repeat;
	text-align: center;
	height: 50px;
	top: 124px;
	width: 280px;
	left: 50%;
	margin-left: -120px;
	padding-right: 2px;
	padding-left: 20px;
	z-index: 995;
	overflow: hidden;
}
.button{
	position: absolute;
	top: 0;
	margin-top: -7px;
	width: 44px;
	height: 50px;
	padding: 2px;
	overflow: hidden;
}

#playSong{
	opacity: 0;
	left: 125px;
	background-image: url('iMGS/playerButtons.png');
	background-position: -96px 0;
	/*OVER background-position: -121px 73px; */
}
#playSong:hover{
	opacity: 1;
}
#stopSong{
	opacity: 0;
	left: 81px;
	background-image: url('iMGS/playerButtons.png');
	background-position: -52px 0;
	/*OVER background-position: -121px 73px; */
}
#stopSong:hover{
	opacity: 1;
}
#pauseSong{
	opacity: 0;
	left: 37px;
	background-image: url('iMGS/playerButtons.png');
	background-position: -8px 0; /*actual pause button */
	/*OVER background-position: -180px 73px; */
}
#pauseSong:hover{
	opacity: 1;
}
#nextSong{
	opacity: 0;
	left: 170px;
	background-image: url('iMGS/playerButtons.png');
	background-position: -141px 0;
/*OVER background-position: -4px 73px; */
}
#nextSong:hover{
	opacity: 1;
}
#prevSong{
	opacity: 0;
	left: 214px;
	background-image: url('iMGS/playerButtons.png');
	background-position: -186px 0;
	/*OVER background-position: -239px 73px; */
}
#prevSong:hover{
	opacity: 1;
}