/* ============================================================================================== 
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.
Quelques menus aménagements pour intégration iframe dans GuppY par JeanDenis  http://www.71site.fr/
================================================================================================= */
* {
    margin: 0;
    padding: 0;
}
body {
    background-color: transparent;
	font-family: verdana;
	font-size: 14px;
}
a { /* couleur du texte pour les liens */
	color: rgb(0, 0, 255); /* #0000FF blue */
}
a:hover { /* couleur et attribut du texte pour les liens survolés */
	color: rgb(128, 0, 128); /* #800080 purple */
	font-weight: bold;
}
/* HTML5 Audio player with playlist styles */
.player {
    background: transparent url("images/spr.png") no-repeat scroll center top;
    height: 162px;
    position: relative;
    width: 300px;
    z-index: 2;
}
.title, .artist {
    font-family: verdana;
    left: 145px;
	max-width: 150px;
    position: absolute;    
    -moz-user-select: none;
    -webkit-user-select: none;
}
.title {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: bold;	
    top: 8px;
}
.artist {
    color: #DED35F;
    font-size: 11px;	
    top: 40px;
}
.cover {
    background: transparent url("images/cover1.png") no-repeat scroll center top;
    border-radius: 3px 3px 3px 3px;
    height: 94px;
    left: 10px;
    position: absolute;
    top: 20px;
    width: 94px;
}
.controls {
    cursor: pointer;
    height: 23px;
    left: 150px;
    position: absolute;
    top: 65px;
    width: 138px;
}
.controls .play, .controls .pause, .controls .rew, .controls .fwd {
    background: transparent url("images/spr.png") no-repeat scroll 0 0;
    float: left;
    height: 100%;
    width: 33%;
}
.controls .play {
    background-position: -8px -171px;
}
.controls .pause {
    background-position: -8px -198px;
    display: none;
}
.controls .rew {
    background-position: -54px -171px;
}
.controls .fwd {
    background-position: -100px -171px;
}
.controls .play:hover {
    background-position: -8px -170px;
}
.controls .pause:hover {
    background-position: -8px -197px;
}
.controls .rew:hover {
    background-position: -54px -170px;
}
.controls .fwd:hover {
    background-position: -100px -170px;
}
.hidden {
    display: none;
}
.controls .visible {
    display: block;
}
.volume {
    height: 11px;
    left: 186px;
    position: absolute;
    top: 96px;
    width: 86px;
}
.tracker {
    height: 15px;
    left: 20px;
    position: absolute;
    top: 126px;
    width: 254px;
}
.ui-slider-range {
    background: transparent url("images/spr.png") no-repeat scroll 5px -222px;
    height: 100%;
    position: absolute;
    top: 0;
}
.ui-slider-handle {
    cursor: pointer;
    height: 10px;
    margin-left: -5px;
    position: absolute;
    top: 2px;
    width: 10px;
    z-index: 2;
}
.volume .ui-slider-handle {
    background: url("images/spr.png") no-repeat scroll -201px -188px rgba(0, 0, 0, 0);
    height: 13px;
    width: 13px;
}
.playlist {
    background-color: #683619;
    border-radius: 5px 5px 5px 5px;
    list-style-type: none;
    margin: 0px 2px;
    padding-bottom: 10px;
    padding-top: 15px;	
    position: relative;
    width: 296px;
    z-index: 1;
}
.playlist li {
    font-family: verdana;
	font-size: 12px;
	color: #DDDDDD;
    cursor: pointer;
	padding-left: 10px;
    margin: 0 0 5px 15px;
}
.playlist li.active {
    color: #FFFFFF;
    font-weight: bold;
	padding-left: 0px;
}