
div.jp-audio {
	width: 100%;
	height: 42px;
	display: block;
	margin: 0;
}

div.jp-type-playlist {
	/* Edit the font-size to counteract inherited font sizing.
	 * Eg. 1.25em = 1 / 0.8em
	 */
	font-size:1em; /* No parent CSS that can effect the size in these demos */
	font-family: Verdana, Geneva, sans-serif;
	line-height:1.6;
	font-weight: normal;
	color: #666;
	width: 333px;
	height: 36px;
	display: inline-block;
	

}

div.jp-interface {
	margin: 0;
	position: relative;
	background-color:#000;
	width:100%;
	height:38px;
	border:2px solid #ddd;
	border-radius:7px;
	-moz-border-radius:7px; 
	-webkit-border-radius:7px;
}

div.jp-interface ul.jp-controls {
	list-style-type:none;
	padding:0;
	margin: 0;
}
div.jp-interface ul.jp-controls li {
	position: absolute;
}
div.jp-interface ul.jp-controls a {
	display: block;
	position: absolute;
	overflow:hidden;
	text-indent:-9999px;
}
a.jp-play,
a.jp-pause {
	top:0px;
	width:38px;
	height:38px;
	left:40px;
}

a.jp-play {
	background: url("jplayer.blackandwhitebuttons.png") 0 -1px no-repeat;
}

a.jp-pause {
	background: url("jplayer.blackandwhitebuttons.png") 0 -51px no-repeat;
}

a.jp-stop {
	top:4px;
	background: url("jplayer.blackandwhitebuttons.png") 0 -180px no-repeat;
	width:28px;
	height:28px;
	left:116px;
}


a.jp-previous {
	left:10px;
	top:4px;
	background: url("jplayer.blackandwhitebuttons.png") 0 -260px no-repeat;
	width:28px;
	height:28px;
}

a.jp-next {
	left:78px;
	top:4px;
	background: url("jplayer.blackandwhitebuttons.png") 0 -220px no-repeat;
	width:28px;
	height:28px;
}

div.jp-progress {
	position: absolute;
	overflow:hidden;
	top:11px;
	background-color: #000;
	width:122px;
	height:15px;
	border: 1px solid #666;
	left:154px;
}

div.jp-seek-bar {
	background: url("jplayer.blackandwhitebuttons.png") 0 -125px repeat-x;
	width:0px;
	height:15px;
	cursor: pointer;
}
div.jp-play-bar {
	background: url("jplayer.blackandwhitebuttons.png") 0 -100px repeat-x ;
	width:0px;
	height:15px;
}
a.jp-mute {
	background: url("jplayer.blackandwhitebuttons.png") 0 -325px no-repeat;
	width:15px;
	height:15px;
	position: absolute;
	left: 190px;
	top: 9px;
}

a.jp-volume-max {
	background: url("jplayer.blackandwhitebuttons.png") 0 -300px no-repeat;
	width:15px;
	height:15px;
	position: absolute;
	left: 275px;
	top:9px;
}


div.jp-volume-bar {
	position: absolute;
	overflow:hidden;
	top:14px;
	background: url("jplayer.blackandwhitebuttons.png") 0 -165px repeat-x;
	width:50px;
	height:5px;
	cursor: pointer;
	left:216px;
}

div.jp-volume-bar-value {
	background: url("jplayer.blackandwhitebuttons.png") 0 -150px repeat-x;
	width:0px;
	height:5px;
}
div.jp-duration {
	position: absolute;
	top:8px;
	width:22px;
	font-size:.64em;
	font-style:oblique;
	color:#bbb;
	left: 60px;
	text-align: right;
}

div.jp-current-time  {
	position: absolute;
	top: 8px;
	width:22px;
	font-size:.64em;
	font-style:oblique;
	color:#bbb;
	left: 10px;
	text-align: right;
}


div.jp-playlist-control {
	position: absolute;
	top: -1px;
	left: 285px;
	text-indent: -9999px;
	background: center center no-repeat transparent;
	background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAYAAADE6YVjAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADhJREFUeNpi/P//PwOtARMDHQBdLGFBYtMq3BiHT3DRPU4YR4NrNAmPJuHRJDyahEeT8Ii3BCDAAF0WBj5Er5idAAAAAElFTkSuQmCC );
	display: block;
	width: 40px;
	height: 40px;
	cursor: pointer;

}

div.jp-interface-2 {
	padding: 0;
	margin: 0;
	height: 100%;
	width: 100%;
}

div.jp-interface-2 a{
	position: absolute;
	text-indent: -9999px;
	display: block;
}


div.jp-controls-2 {
	position: absolute;
	bottom: 40px;
	height: 30px;
	background-color:#000;
	border:2px solid #ddd;
	width: 333px;
	border-bottom-left-radius:7px;
	border-bottom-right-radius:7px;
	-moz-border-radius-bottomleft:7px; 
	-webkit-border-bottom-left-radius:7px;
	-moz-border-radius-bottomright:7px; 
	-webkit-border-bottom-right-radius:7px;
}


div.jp-playlist {
	position: absolute;
	bottom: 70px;
	overflow: auto;
	background-color: #000;
	border:2px solid #ddd;
	width: 333px;
	font-size:.72em;
	border-top-left-radius:7px;
	border-top-right-radius:7px;
	-moz-border-radius-topright:7px; 
	-moz-border-radius-topleft:7px; 
	-webkit-border-top-left-radius:7px;
	-webkit-border-top-right-radius:7px;
}

div.jp-playlist ul{
	list-style-type:none;
	padding:0 0px;
	/* background-color:#000; */
	width:100%;
	height:100%;
	text-align:left;
}

span.jp-artist {
	font-size:0.9em;
	font-style:italic;
}

div.jp-playlist li {
	padding:6px 5px 5px 10px;
	border-bottom:1px solid #666;
}
div.jp-playlist li.jp-playlist-item-last {
	padding:6px 0 9px 20px;
	border-bottom:none;
}
div.jp-playlist li.jp-playlist-current {
	list-style-position:inside;
	color: #fff;
	background-color: #555;
}
div.jp-playlist a {
	color: #bbb;
	text-decoration: none;
}
div.jp-playlist a:hover {
	color:#fff;
}
div.jp-playlist a.jp-playlist-current {
	color:#fff;
}


div.jp-close-playlist {
	display:block;
	background: url("close_20px.png") 2px 5px no-repeat;
	position: absolute;
	top: 5px;
	left: 305px;
	width:22px;
	height:18px;
	text-indent:-9999px;
	cursor:pointer;
	border:2px solid #666;
	border-radius: 9px;
}
div.jp-close-playlist:hover {
	border:2px solid #fff;
	border-radius: 9px;
}


/* @group TOGGLES */
div.jp-toggles {
	padding:0;
	margin:0 auto;
	overflow:hidden;
	display:block;
}

div.jp-toggles a{
	display:block;
	position: absolute;
	top: 7px;
	width:25px;
	height:18px;
	text-indent:-9999px;
	line-height:100%; /* need this for IE6 */
}

.jp-repeat {
	background: url("jplayer.pink.flag.jpg") 0 -290px no-repeat;
	left: 110px;
}

.jp-repeat:hover {
	background: url("jplayer.pink.flag.jpg") -30px -290px no-repeat;
	left: 110px;
}

.jp-repeat-off {
	background: url("jplayer.pink.flag.jpg") -60px -290px no-repeat;
	display: none;
	left: 110px;
}

.jp-repeat-off:hover {
	background: url("jplayer.pink.flag.jpg") -90px -290px no-repeat;
	display: none;
	left: 110px;
}

.jp-shuffle {
	background: url("jplayer.pink.flag.jpg") 0 -270px no-repeat;
	left: 145px;
}

.jp-shuffle:hover {
	background: url("jplayer.pink.flag.jpg") -30px -270px no-repeat;
	left: 145px;
}

.jp-shuffle-off {
	background: url("jplayer.pink.flag.jpg") -60px -270px no-repeat;
	display: none;
	left: 145px;
}

.jp-shuffle-off:hover {
	background: url("jplayer.pink.flag.jpg") -90px -270px no-repeat;
	display: none;
	left: 145px;
}

