#button_bar div{
	float:left;
}

#button_bar{
	float:left;
      border: 1px solid black;
    background-image: linear-gradient(#234, #012);
}

#player{
	float:left;
	padding:5px;
}

#JHPlayerWrapper{
	width:100%;
	margin-left:5px;
	border: 2px solid black;
	padding:5px;
}

#JHPlayerList{
	width:100%;
	float:left;
}

.JHPlaylistItemSelected{
	color:#9bd;
	margin-bottom:1px;
	cursor:pointer;
}
.JHPlaylistItem{
	color:#999;
	margin-bottom:1px;
	//background-color:#999;
	cursor:pointer;
}

#volume_control{
      cursor:pointer;
	width:30px;
	height:4px;
	float:left;
	background:no-repeat center;
	padding:7px;
}

#volume_background{
	width:100%;
	height:4px;
	background-color:#000;
}

#volume_bar{
	width:0px;
	height:4px;
	background-color:#eee;
	opacity:0.4;
}

#duration{
      cursor:pointer;
	width:100px;
	height:8px;
	padding:5px;
}

#duration_background{
	width:100%;
	height:7px;
	background-color:#000;
}

#duration_bar{
	width:0px;
	height:7px;
	background-color:#257;
	opacity:0.8;
}

.button{
	color: black;
	cursor:pointer;
	background:no-repeat center;
	height:18px;
}

/* add the images to the backgrounds of the buttons */
#play{
	background-image:url("images/play.png");
	width:22px;
}

#pause{
	background-image:url("images/pause.png");
	width:22px;
	display:none;
}

#previous{
	background-image:url("images/previous.png");
	width:18px;
}

#next{
	background-image:url("images/next.png");
	width:18px;
}

#speaker{
	background-image:url("images/speaker.png");
	width:18px;
}