/* ============================================================================================== 
This copyright notice must be kept untouched in the stylesheet at all times.
The original version of this stylesheet and the associated (x)html 
is available at http://www.script-tutorials.com/html5-audio-player-with-playlist/
Copyright (c) Script Tutorials. All rights reserved.
This stylesheet and the associated (x)html may be modified in any way to fit your requirements.
================================================================================================= */
* {
    margin: 0;
    padding: 0;
}
body {
    
}
header {
    background-color:rgba(33, 33, 33, 0.9);
    color:#fff;
    display:block;
    font: 14px/1.3 Arial,sans-serif;
    margin-bottom: 10px;
    position:relative;
}
header h2{
    font-size: 22px;
    margin: 0px auto;
    padding: 10px 0;
    width: 80%;
    text-align: center;
}
header a, a:visited {
    text-decoration:none;
    color:#fcfcfc;
}

/* HTML5 Audio player with playlist styles */
.example {
    margin: 50px auto 0;
    width: 400px;
}
.player {
	background: transparent url('../images/spr.png') no-repeat scroll center
top;
	height: 162px;
	position: relative;
	width: 326px;
	z-index: 2;
}
.title, .artist, .info {
    font-family: verdana;
    left: 167px;
    position: absolute;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.title {
	color: #008080;
	font-size: 14px;
	font-weight: bold;
	top: 8px;
}
.artist {
    color: #EEEEEE;
    font-size: 12px;
    top: 28px;
}
.info {
	font-size: 9px;
	font: normal normal bold 80% serif;
	color: #FFFFFF;
	top: 44px;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.pl {
	background: url("../images/spr.png") no-repeat 0px -268px;
	cursor: pointer;
	height: 34px;
	left: 270px;
	position: absolute;
	top: 20px;
	width: 32px;
}
.pl:hover {
    top: 21px;
}
.cover {
    background: transparent url(../data/cover1.jpg) no-repeat scroll center top;
    border-radius: 5px 5px 5px 5px;
    height: 91px;
    left: 20px;
    position: absolute;
    top: 20px;
    width: 91px;
}
.controls {
    cursor: pointer;
    height: 23px;
    left: 167px;
    position: absolute;
    top: 65px;
    width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
	background: url('../images/spr.png') no-repeat 0
0;
	float: left;
	height: 100%;
	width: 33%;
}
.controls .play {
    background-position: 0px -168px;
}
.controls .pause {
    background-position: 0px -306px;
    display: none;
}
.controls .rew {
    background-position: 0px -232px;
}
.controls .fwd {
    background-position: 0px -200px;
}
.controls .play:hover {
    background-position: 0px -167px;
}
.controls .pause:hover {
    background-position: 0px -305px;
}
.controls .rew:hover {
    background-position: 0px -231px;
}
.controls .fwd:hover {
    background-position: 0px -199px;
}
.hidden {
    display: none;
}
.controls .visible {
    display: block;
}
.volume {
    height: 11px;
    left: 140px;
    position: absolute;
    top: 97px;
    width: 300px;
}
.tracker {
    height: 15px;
    left: 1px;
    position: absolute;
    top: 128px;
    width: 300px;
}
.ui-slider-range {
	background: url('../images/spr.png') no-repeat 0px
-362px;
	height: 100%;
	position: absolute;
	top: 0;
}
.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -5px;
    position: absolute;
    top: -1px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
	background: rgba(0, 0, 0, 0) url('../images/spr.png') no-repeat -0px
-338px;
	height: 13px;
	width: 13px;
}
.playlist {
	background-color: #333333;
	border-radius: 5px 5px 5px 5px;
	list-style-type: none;
	overflow-x: scroll;
	margin: -10px 1 0 2px;
	padding-bottom: 6px;
	padding-top: 5px;
	position: relative;
	width: 420px;
	z-index: 1;
	font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
	font-size: 12px;
	color: #E2C4A2;
}
.playlist li {
    color: #EEEEEE;
    cursor: pointer;
    margin: 0 0 3px 15px;
}
.playlist li.active {
    font-weight: bold;
}