/* ============================================================================================== 
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.
================================================================================================= */

/* Style for main information on top of player */
.ppl_songtitle {
	font-family: Quicksand, Helvetica, sans-serif;
    width: 100%;
    padding: 16px 0px 0px 4px;
	font-weight: bold;
	/*color: #095698;*/
	color: #000000;
}

.ppl_songlist {
    width: 100%;
    padding: 2px 0px 0px 4px;
	font-weight: bold;
}

.ppl_songinfo {
	font-family: Dosis, Helvetica, sans-serif;
    width: 100%;
    padding: 0px 0px 0px 4px;
	font-weight: normal;
}

.ppl_playercontainer {
	/* background:#ccc; */
	text-align: left; /* centrage horizontal */
}

.ppl_player {
    background: transparent url("../images/sprite_compact_bg.png") no-repeat scroll left top;
    height: 33px;
    position: relative;
    width: 131px;
    z-index: 2;
	display: inline-block;
	vertical-align: middle;
	text-align: left;
}

.ppl_description {
	font-family: Dosis, Helvetica, sans-serif;
	font-size: 95%;
	width: 50%;
	line-height: 0.9em;
    display: inline-block;
    vertical-align: middle;
	padding-left: 0px;
	/*color:#9A0B0B;*/
	color:#8F41F2;
}
.ppl_title, .ppl_artist {
    font-family: verdana;
    left: 44px;
    position: absolute;

    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}
.ppl_title {
    color: #FFFFFF;
    font-size: 11px;
    font-weight: normal;
    top: 9px;
	z-index: 1;
	display: none;
}
.ppl_artist {
    color: #EEEEEE;
    font-size: 12px;
    top: 340px;
}

.ppl_controls {
    cursor: pointer;
    height: 21px;
    left: 10px;
    position: absolute;
    top: 6px;
    width: 32px;
}
.ppl_controls .ppl_play, .ppl_controls .ppl_pause {
    background: transparent url("../images/sprite_compact_bg.png") no-repeat scroll 0 0;
    float: left;
    height: 100%;
    width: 100%;
}
.ppl_controls .ppl_play {
    background-position: -11px -38px;
	/* background-position: -51px -38px; COLOR button */
}
.ppl_controls .ppl_pause {
    background-position: -11px -68px;
	/* background-position: -51px -68px; B&W button */
    display: none;
}

.ppl_hidden {
    display: none;
}

.ppl_controls .ppl_visible {
    display: block;
}

.ppl_tracker {
    height: 15px;
    left: 49px;
    position: absolute;
    top: 9px;
    width: 67px;
}
.ui-slider-range {
    background: transparent url("../images/sprite_compact_bg.png") no-repeat scroll 5px -93px;
    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;
}