/* root element should be positioned relatively so that 
	child elements can be positioned absolutely */

div.playerpluscontrols {
        width:400px;
        //margin:0 auto;
        position:relative;
	float : left;
	margin-top : 0px;
}

div.player {
        display: block;
        width: 480px;
        height: 360px;

}

div.mesboutons {
	position:relative;
	height:80px;
	
	/* black background with a gradient */
	background:#000;
	// url(mesboutons.png) repeat-x 0 -4px;
	
	width:480px;
}

/* play/pause button */
div.mesboutons a.play, div.mesboutons a.pause { 
	position:absolute;
	width: 46px;
	height: 40px;
	display:block;
	text-indent:-9999em;
	background:url(mesboutons.png) no-repeat 10px -61px;
	cursor:pointer;
	border-right:1px solid #000; 
}

div.mesboutons a.play:hover {
	background-position:10px -105px;	
}

/* pause state */
div.mesboutons a.pause { 
	background-position:11px -148px;
}

div.mesboutons a.pause:hover {
	background-position:11px -192px;	
}

/* the timeline (or "scrubber")  */
div.mesboutons div.track{  
	left:47px;
	position:absolute;
	cursor:pointer;
	width:288px;
	border-left:0px solid #999;
	height:80px;		
}
 
#placeholder{
margin : 0px;
border : 0px;
left : 0px;
width:288px;
height:80px;	
}

/* the draggable playhead */
div.mesboutons div.playhead {
	position:absolute;
	cursor:pointer; 
	background-color:#4ff;
	opacity:0.5;
	filter: alpha(opacity=30);
	width:2px;
	height:80px;
	top :0;
	border-right:1px solid #444;
}

/* buffer- and progress bars. upon runtime the width of these elements grows */
div.mesboutons div.progress, div.mesboutons div.buffer {	
	position:absolute;
	background-color:#4ff;
	filter: alpha(opacity=10);
	opacity:0.1;
	top : 0;
	width:0px;
	height:80px;
}

div.mesboutons div.buffer {
        width:288px;
	background-color:#fff;
	opacity:0.1;
	filter: alpha(opacity=10);
}

/* time display */
div.mesboutons div.time {
	position:absolute;		
	width:145px;
	left:334px;
	padding:5px 0;
	text-align:center;
	//border:1px solid #999;
	border-width:0 1px;
	
	font-family:futura,"Lucida Grande","bitstream vera sans","trebuchet ms",verdana,arial;	
	font-size:12px;
	color:#fff; 
        height: 40px;
}

/* total duration in time display */
div.mesboutons div.time strong {
	font-weight:normal;
	color:#666;
}

/* mute / unmute buttons */
div.mesboutons a.mute, div.mesboutons a.unmute {
	position:absolute;
	left:334px; 
	width:145px;
	height:40px;
	text-align:center;
	padding:8px 0;
	cursor:pointer;
	text-indent:-9999em;
	background:url(mesboutons.png) no-repeat 5px -323px;
}

div.mesboutons a.mute:hover {
	background-position:5px -367px;	
}

/* unmute state */
div.mesboutons a.unmute {
	background-position:5px -235px;	
}

div.mesboutons a.unmute:hover {
	background-position:5px -279px;	
}

/* playlist style */

#playlistplustitre {
	width:240px;
	height:425px;
	left : 85;
	margin : 0px;
	position: relative; 
	float:left;
}
#playlistplustitre h2{
	text-align : justify;
	margin-left : 15px;
}


#playlist {
	width:240px;
	height:425px;
	overflow-y:scroll;
	overflow-x:hidden;
	border:1px solid #ccc;
	padding:5px 5px 5px 5px;
	background-color:#efefef;
	//margin-top:20px;
	margin-left : 15px;
	position: relative; 
	float:left;
}


/* boutons afficher plus et moins*/
#playlist input{
	margin-left : 20px;
	
}
/* playlist entry */


#playlist a {
	clear : left;
	display:block;
	width:210px;
	height:92px;
	padding:5px;
	background-color:#fff;
	border:1px solid #ccc;
	font:11px "bitstream vera sans", "lucida grande",verdana;
	text-decoration:none;
	margin-top:1px;
	margin-bottom:1px;
	color:#666;
}

/* different states of a playlist entry */

#playlist a:visited {
	border : 2px solid #94d;		
}
#playlist a:hover {
	background-color:#ffc;		
}



#playlist a.progress {
	background-color:#efefef;	
}

#playlist a.playing {
	border:1px solid #666;
	background-color:#ffc;	
}

#playlist a.paused {
	border:1px solid #666;
	background-color:#ffc;	
}

/* elements inside playlist entry */
#playlist a img {
	width : 96px;
	height : 78px;
	margin-right : 
	border:0;	
	float:left;
	margin-right:10px;
}

#playlist a strong {
	color:blue;		
	padding-bottom:5px;
}

#playlist button{
    position:relative;
    display:block;
    float:left;
    margin:0 7px 0 0;
    background-color:#f5f5f5;
   border:2px solid #888;
    border-top:1px solid #888;
    border-left:1px solid #888;  
   font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#565656;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
    width:auto;
    overflow:visible;
    padding:4px 10px 3px 7px; /* IE6 */
    width : 35px;

}

#playlist button img{
    margin:0 3px -3px 0 !important;
    padding:0;
    border:none;
    width: 25px;
    height:25px;
}


#playlist button:hover{
    background-color:#eee;
    border:1px solid #888;
    color:#000000;
}


/*Style des boutons du graphique*/


#boutonsgraphique{
	clear : left;
	position : relative;
	margin-bottom : 20px;
	margin-top :20px;
	margin-left : 0px;
	padding : 5px;
	width : 470;
	
	
}


#boutonsgraphique a{
    display:block;
    float:left;
    margin:0 7px 0 0;
    margin-top : 2px; 
    margin-bottom : 2px;
    background-color:#f5f5f5;
    border:2px solid #888;
    border-top:1px solid #888;
    border-left:1px solid #888;  
    font-family:"Lucida Grande", Tahoma, Arial, Verdana, sans-serif;
    font-size:100%;
    line-height:130%;
    text-decoration:none;
    font-weight:bold;
    color:#000;
    cursor:pointer;
    padding:5px 10px 6px 7px; /* Links */
    width : 90px;
    filter: alpha(opacity=80);
    opacity:0.8;
}

#boutonsgraphique a:hover{
    border:2px solid #777;
    border-top:1px solid #777;
    border-left:1px solid #777;  
    background-color:#ddd;
 
    color:#000000;
}

#tous a{
	margin-top : 10px;
	width : 120px;
}


/*Style des liens de bas de page*/
#liens {
	clear: left;
	position :relative;
	//font-size : 2em;
	margin-top : 90px;
	height : 135px;
	top:20px;
	
}
#liens a{
	font-size : 1.2em;
	border : 1px solid #888;
	background-color : #ddd;
	margin-right : 3px;
	padding : 5px;	
}
#liens a:hover{
	font-size : 1.2em;
	border : 1px solid #999;
	background-color : #eee;
	margin-right : 3px;
	padding : 5px;	
}
#zone_infos{
display : block;
float :left;
position : absolute;
top : 630px;
left :700px;
margin-right : 0px;
padding : 5px;
width : 240px;
border: 2px groove; 
background-color:  #B3E7FF; 
border-style: none; 
border : 1px solid #ccc;*/
}

#boutonUp{
	margin : auto;
	height : 40px;
	width : 40px;
	float : left;
	left : 40px;
	margin-left : 30px;
	position : relative;
}
#boutonDown{
	left : 60px;
	position : relative;
	float : left;
	margin : auto;
	height :40px;
	width : 40px;
	
}
#boutonUp2{
	
	margin : auto;
	height : 40px;
	width : 40px;
	float : left;
	left : 40px;
	margin-left : 30px;
	position : relative;
	
}
#boutonDown2{
	left : 60px;
	position : relative;
	float : left;
	margin : auto;
	height :40px;
	width : 40px;
	
}