
#waveform1, #waveform2,  #waveform3, #waveform4, #waveform5, #waveform6, #waveform7, #waveform8, #waveform9,#waveform10,#waveform11, #waveform12,  #waveform13, #waveform14, #waveform15, #waveform16, #waveform17, #waveform18, #waveform19, #waveform20{
	position: absolute;
	bottom: 0;
	left: 0;
     width: 100%;
     height:20px;
     padding: 0;
     z-index: 0;
     background-color: none;
     opacity: 0.7;
	 }
	 

 ul.playlist {
     display: inline-block;
     list-style-type:none;
     margin:20px;
     padding:10px;
     background-color: none;
    /* font trickery */
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;
}
 ul.playlist li {
     position:relative;
     display:block;
     width:49%;
     height: 100%;
     float: left;
     color:#000;
     padding:0px 0px 20px 0px;
     margin: 4px 4px 0 0;
     border:1px solid #852; 
     letter-spacing:0px;
     border-radius:5px;
      
}

 ul.playlist li h7 {
 	display: block;
     font-size:35px;
     line-height: 30px;
     margin: 20px auto 10px 20px;
}
 ul.playlist li p {
     font-size:16px;
     line-height:18px;
     margin: -5px 20px 0px 20px;
}

ul.playlist li.sm2_playing p, ul.playlist li.sm2_paused p
{
     color: ;
}


 ul.playlist li a {
     display:block;
     text-decoration:none;
     font-weight:normal;
     color:#000;
     font-size:25px;
     outline:none;
     position:relative;
     z-index:2;
     cursor: url('play.cur'), pointer;
}
 ul.playlist li.sm2_playing, ul.playlist li.sm2_paused, ul.playlist li.sm2_playing a {
     color:#000;
     border-radius:5px;
     cursor: url('pause.cur'), pointer;
     
}
 ul.playlist li:hover {
	border-radius:5px;
	 border:1px solid #852;
	 box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.3);
}
 ul.playlist li:hover a {
     color:#000;
}
 ul.playlist li.sm2_playing, ul.playlist li.sm2_playing:hover {
     border:1px solid #852;
	 box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.3);
}
 ul.playlist li.sm2_paused {
     border:1px solid #657775;
	 box-shadow: 5px 10px 5px 0px rgba(0, 0, 0, 0.3);
}
 ul.playlist li.sm2_playing:hover a {
     color:#000;
}
 ul.playlist li.sm2_paused a {
     color:#5E6060;
}
 ul.playlist li .controls {
     display:none;
}
 ul.playlist li.sm2_playing .controls, ul.playlist li.sm2_paused .controls {
     position:absolute;
     display:block;
     top: 0;
     left:0;
     border-radius:0;
     width: 100%;
     height: 100%;
}
 ul.playlist li.sm2_paused .controls {
     background-color:none;
}
 ul.playlist li:hover .controls .statusbar {
 	min-height: 100%;
     position:relative;
}

 ul.playlist li .controls {
     position:relative;
     margin-top:0;
     margin-bottom: 0px;
     background-color:none;
}

/* FOND BARRE LECTURE PAUSE*/
 ul.playlist li.sm2_paused .controls .statusbar {
     opacity: 0.9;
}
/* FOND BARRE LECTURE CROSSHAIR*/
 ul.playlist li .controls .statusbar {
     position:relative;
     width: 100%;
     min-height:100%;
     background: transparent url(graduation.png) repeat-x;
     background-position: bottom left;
     border-radius:0px;
     border:0;
     overflow:hidden;
     opacity: 0.8;
     z-index: 0;
     cursor:-moz-col-resize;
     cursor:-webkit-col-resize;
     cursor:col-resize;
}
 ul.playlist li .controls.dragging .statusbar {

}
 ul.playlist li .controls .statusbar .position, ul.playlist li .controls .statusbar .loading, ul.playlist li .controls .statusbar .annotation {
     position:absolute;
     left:0;
     top:0;
     height:4px;
}
/* DEFILEMENT */
 ul.playlist li .controls .statusbar .position {
background:#A5B72A;     
	border-right:3px solid #fff;
     border-radius: 0;
     min-height: 100%;
     opacity: 0.6;
      transition: width 0.3s linear;
}

/* DEFILEMENT PAUSE*/
 ul.playlist li.sm2_paused .controls .statusbar .position {
	opacity: 0.2;
     border-right:3px solid #000;
      
}
/* BARRE CHARGEMENT ACTIVE */
 ul.playlist li .controls .statusbar .loading {
     border-radius: 0 0 0 0;
     transition: width 0.15s ease-in-out;
     min-height: 100%;
     width: 100%;
     margin-right: 0;
     border-right:1px solid #A5B72A;
     background: #A5B72A;
     opacity:0.2;
     hoverflow: hidden;
}
/* BARRE CHARGEMENT PAUSE */
 ul.playlist li.sm2_paused .controls .statusbar .loading {
     background: #A5B72A;
     opacity:0.1;
}
 ul.playlist li .controls .statusbar .position, ul.playlist li .controls .statusbar .loading {
     width:0;
}
 ul.playlist li.sm2_playing a.sm2_link, ul.playlist li.sm2_paused a.sm2_link {
     margin-right:0;
    /* room for timing stuff */
}

/*  TIMING */
 ul.playlist li .timing {
     position:absolute;
     display:none;
     text-align:right;
     right:0px;
     top:0px;
     width:auto;
     height:20px;
     padding:3px 8px 0 8px;
     color: #000;
     background-color:none;
     border:0px solid #99ccff;
     border-radius:10px;
     font-size:14px;
     font-weight: 400;
     line-height:15px;
     letter-spacing: 1px;
     vertical-align:middle;
}
 ul.playlist li:hover .timing {
     z-index:2;
}
 ul.playlist li .timing div.sm2_timing {
     margin:0;
     padding:0;
     margin-top:-1em;
}
 ul.playlist li.sm2_playing .timing, ul.playlist li.sm2_paused .timing {
     display:block;
}

 ul.playlist li.sm2_paused .timing .sm2_position {
     text-decoration:blink;
}
/* TIMING PAUSE */
 ul.playlist li.sm2_paused .timing {
     color: #000;
}
 @media (max-width: 991px) {
 	 ul.playlist {
border-top:1px solid #852;
}
     ul.playlist li {
         width:100%;
         float: none;
         border-top:1px solid transparent;
         border-right:1px solid transparent;
         border-bottom:1px solid transparent;
         border-left:1px solid transparent;
         border-radius:0;
         margin: 0;

    }
         ul.playlist li:last-child {
         width:100%;
         float: none;
         border-bottom:1px solid #852;
    }
}
 @media (max-width: 767px) {
     ul.playlist {
         margin:0;
         padding:0;
    }
    
  ul.playlist li:hover,  ul.playlist li.sm2_playing, ul.playlist li.sm2_paused, ul.playlist li.sm2_playing a {
         border-radius:0;
    }

     ul.playlist li h7 {
     font-size:40px;
}

}
 @media (max-width: 480px) {
     ul.playlist {
         margin: 0;
         padding:0;
         border-radius:0;
    }
         ul.playlist li {
         padding:5px 10px 5px 10px;

    }
	     ul.playlist li h7 {
     font-size:30px;
          line-height: 30px;
     margin: 8px auto 5px 0;

}
 ul.playlist li p {
     font-size:16px;
     line-height:18px;
     margin: 0 0 10px 0;
}
     ul.playlist li:hover, ul.playlist li.sm2_playing, ul.playlist li.sm2_paused, ul.playlist li.sm2_playing a {
	border-radius:0;
	}
	
	/* BARRE CHARGEMENT ACTIVE */
 ul.playlist li .controls .statusbar .loading {
     border-radius: 0 0 0 0;
 
}
/* DEFILEMENT */
 ul.playlist li .controls .statusbar .position {
     border-radius: 0;
}
 ul.playlist li .timing {
     font-size:14px;
     padding:3px 8px 0 8px;
}
}

 