/* FUDJI Radio CSS  */

body {
	font-family: "Helvetica";
	color: #000;
	font-size: 14px;
    line-height: 14px;	
	
	
	background: url("../images/microphone-internet-radio-fm.jpg") no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	
	
	
	
	
}

body { position: relative; margin: 0; padding: 0; border: 0; }

h2 {
	font-size: 26px;
	margin-top: -30px;
}

#bloc-content {
    padding: 0 0px 0 0px;
    background-color:#FFFFFF;
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.35);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
	border-radius: 6px; 
	
}

.bloc-content {
    padding: 0 0px 0 0px;
    background-color:#FFFFFF;
    box-shadow: 0 1px 10px 0 rgba(0,0,0,0.35);
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
	border-radius: 6px;
}

/*** contenair ***/
#contenair {
	width: 1140px;
	height: 2600px;
	margin: 0 auto;
	marging-top: 0;
	padding-right: 15px;
    padding-left: 15px;
	bbackground-color:rgba(255,255,255,1.00);
}

/*** header ***/
.box-header { 
	position: relative; 
	top: 15px;
	width: 1140px; 
	height: 260px;		
}

.logo {
	position: absolute;
	width: 320px;
	height: 200px;
	margin: 10px 20px;
}


#player {
	position: relative;
	width: 720px;
	height: 210px;
	float: right;
	margin-right: 0px;
	
	background-color: #0f171e;
}

#pochette, .pochette {
	position: relative;
	width: 210px;
	height: 210px;
	float: left;
	background-color: rgba(33,33,33,0.10);	
}


#infos_direct { position: relative; top: 0px; width: 500px; height: 210px; float: left; margin-left: 0px; overflow: hidden; background: rgba(233,231,231,0.00)}



.title{ position: absolute; width: 260px; height: 21px; font-size: 17px; font-weight: 500; top: 50px; font-style:italic;  text-align: center; margin-left: 0px; color: #050404; background-color: rgba(33,33,33,0.00); } 

.artist{ position: absolute; width: 260px; height: 20px; line-height: 20px; font-size: 18px; font-weight: bold; top: 76px; color:rgba(181,73,9,1.00); text-align: center; overflow: hidden; background-color: rgba(33,33,33,0.00); }


#btn-ecoute { position: absolute; width: 240px; height: 40px; line-height: 40px;  bottom: 10px; margin-left: 20px;color: #FDFDFD; background-color:#DFD300; border-radius: 25px;}

.btn-ecoute { position: absolute; width: 60px; height: 40px; line-height: 40px; text-align: center; bottom: 0px; margin-left: 180px;color: #FDFDFD; background-color:#7DAE0D; border-radius: 25px; }



.btn-text { margin-left:  24px; font-size: 14px; font-weight: bold; }


/***

.control-play {
	width: 60px; 
	height: 100px; 
	float: left;
	color: #fff;
	margin: 0px 20px 0 0;
	text-align: center;	
	background: rgba(0,0,0,1.00);
}

top: 30px;
	font-size: 40px; 
	margin-left: 0px;

***/















.radioliveicon{
    fill: rgb(255, 103, 103); 
	width: 60px;
	float: right;
	margin: 0px 30px;

}


#btn {
	position: relative;
	margin-top: 155px;
	width: 135px;
	height: 44px;
	font-size: 17px;
	margin-left: 265px;
	text-transform: uppercase;
   
	background:rgba(157,30,8,1.00) !important;
	-webkit-border-radius: 22px;
    -moz-border-radius: 22px;
    -ms-border-radius: 22px;
    -o-border-radius: 22px;
	border-radius: 22px;
}


.title_btn {
	line-height: 44px;
	color: #ffffff;
	text-align: center;
    font-family: Poppins;
    font-weight: 600;
    text-transform: uppercase;
	
	
}























/*** barre défilement ***/
#barre_defilement { 
	position: relative; 
	top: 230px; 
	width: 1140px; 
	height: 34px;
	font-size: 16px; 
	line-height: 30px;  
	background: rgba(24,27,27,0.65);
	margin-left: 0px;
}

.title_barre_defilement{ position: relative;  height: 30px; color: #D7D7D7; font-weight: bold; float: left; vertical-align: middle; padding: 2px 20px ;background:#630F68/*ackground: #D9AB12 background: #ff0000; */}

.dedicace{ position: relative; width: 960px; height: 34px; float: right; line-height: 34px; margin-right: 20px;}





/*** main content ***/


.main-content { 
	position: relative; 
	width: 1140px; 
	height: 1600px;
	top: 20px;
	/**background-color: rgba(0,0,0,1.00); */
	background-color:rgba(243,243,243,1.00);
}





/*** message ***/

.box-message {
	width: 750px;
	height: 70px; 
	float: left;
	color: white;
	margin: 15px 0 0 0;
    background: rgba(27,27,27,1.00);
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;	
}

.fa-commenting-o{  float: left; font-size: 34px; color: #CECECE}




/*** hits ***/

#widget_hits {
	position: absolute;
	width: 320px;
	height: 610px;  
	float: left;
	margin-top: 535px;
	padding: 20px;
	background: rgba(243,243,243,1.00); 
}

.hit-position  {
    position: absolute;
    display: inline-block;
    color: #fff;
    background: #ffd02c;
    width: 42px;
    line-height: 70px;
    height: 70px;
    font-size: 24px;
    text-align: center;
    font-weight: 700;
	bottom: 0;
}
/*****
.hit-position span:before {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    margin: -7px -7px;
    width: 0;
    height: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 7px solid #000; 
	z-index: 88;
}
***/
 .fleche-verte {
    width: 200px;
    height: 0;
    border-style: solid;
    border-width: 0 3.5px 6px;
    border-color: transparent transparent #45b538;
}


/**************************/

/*** colonne de droite ***/

/*************************/

.colonne_right {
	position: relative;
	width: 375px;
    height: 1180px;
	float: right;
	top: 45px;
	
	background-color:rgba(259,259,259,0.00);
}



/*** colonne de gauche ***/
.colonne_left {
	position: relative;
	width: 765px;
    height: 580px;
	float: left;
	top: 30px;

	background-color:rgba(259,259,259,0.00); 
}


/*** Slider agenda ***/
#slider_agenda {
	position: relative;
	width: 320px;
	height: 440px;  
	line-height: 320px;
	float: right;	
	padding: 20px; 
	top: 0px;
	background-color: rgba(255,255,255,1.00); 
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}


.header_agenda {
	position: relative;
	width: 320px;
	height: 36px; 
	line-height: 36px; 
	float: left; 
	color:#fff; 
	font-size: 22px; 
	font-weight: bold; 
	background: linear-gradient(90deg, #000000, #ffffff);
	-webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
	border-radius: 0px;
}

.affiche_agenda {
	position: absolute;
	width: 300px;
	height: 390px;
	float: left;
	bottom: 20px;
	display: block;
	margin-left: 10px;
	background-color: rgba(234,234,234,1.00);
	overflow: hidden;
}

.agenda { width: 300px; height: 390px;  }

.pager {
	position: absolute;
	width: 320px;
	height: 20px;
	line-height: 20px;
	background-color: transparent;
	bottom: 20px;text-align: center;
	z-index: 10;
}
#nav-1 a{position: relative; background:#C2C2C2; text-decoration: none; margin: 0 3px; padding: 5px; border-radius: 50%; vertical-align: middle; opacity: 0.8;}

#nav-1 a.activeSlide {padding: 5px; background-color: #7E049A ; }
#nav-1:focus { outline: none; }

#nav-1 a{ font-size: 0px; color: #fff;}



/*** Slider cinema ***/

#slider_cinema {
	position: relative;
	width: 320px;
	height: 610px;  
	float: right;
	margin-top: 30px;
	padding: 20px;
	background: rgba(243,243,243,1.00); 
}

.header_cinema {
	position: relative;  
	width: 320px; 
	height: 36px; 
	line-height: 36px; 
	float: left; 
	color:#000; 
	font-weight: bold; /***
	background: linear-gradient(225deg, #86d9fc, #4C7789);***/
	background: linear-gradient(225deg, #2E2824, #04090C);
	
	
	-webkit-border-radius: 6px 6px 0 0;
    -moz-border-radius: 6px 6px 0 0;
    -ms-border-radius: 6px 6px 0 0;
    -o-border-radius: 6px 6px 0 0;
	border-radius: 0px;
}

.icone-cinema { float: left; margin: 0px 0 0 20px; }
.liner {
	float: left;
	border-bottom: 1px solid #B9B9B9;	
}

.movie  {
	position: relative;
	width: 320px;
	height: 530px;
	float: left;
	margin-top: 0px;
	overflow: hidden;
	background-color: rgba(247,247,247,1.00);
}

.affiche_cinema  {
	position: absolute;
	width: 320px;
	height: 530px;
	float: left;
	margin-top: 50px;
	display: block;
	background-color: rgba(247,247,247,1.00);
	overflow: hidden;
}

.affiche { width: 300px; height: 340px; margin: 5px 20px 0 10px; }

.cycle-overlay {
	position: relative;
	width: 320px;
	height: 160px;
	float: left;
	margin-top: 19px;
	background-color: rgba(58,42,42,0.00);
	overflow: hidden;
	
}

.movie-of { position: relative; width: 320px; height: 20px; margin: 10px 0 0 10px; line-height: 20px; vertical-align: middle; }

.actor-name{ position: relative; width: 320px; height: 20px; margin: 0 0 0 10px; line-height: 20px; vertical-align: middle; }


.synopsis { position: absolute; width: 320px; height: 100px; margin-top: 0px; float: left; bottom: 0; background-color: rgba(58,42,42,0.00);}

small {
    font-size: 14px;
	float: left;
	font-style: oblique;
}

.pager {
	position: absolute;
	width: 320px;
	height: 20px;
	line-height: 20px;
	bottom: 20px;text-align: center;
	z-index: 10;
}

#nav a {position: relative; background:#ccc; text-decoration: none; margin: 0 3px; padding: 5px; -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px; vertical-align: middle;}

#nav a.activeSlide {padding: 5px; background: orangered; }
#nav a:focus { outline: none; }

#nav a { font-size: 0px; color: #fff; }










/*** Début de l'History ***/

#play_list {
	position: relative;
	width: 1140px;
	height: 300px;
	top: 60px;
	float: left;
	background: rgba(247,247,247,1.00);
}

#content-title {
	position: relative;
    height: 40px;
	width: 1140px;
	font-family: Times New Roman, 'serif';
    line-height: 40px;
    color: #ffffff;
	float: left;
    text-transform: uppercase;
	-webkit-border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -ms-border-radius: 5px 5px 0 0;
    -o-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;/****
	background: linear-gradient(90deg, #000, #fff );***/
	background: #000000;
}

#history {
	position: relative;
	width: 165px;
	height: 250px;
	float: left;
	margin-left: 21px;
	background: rgba(255,255,255,0.00);	
	top: -10px;
}
	
.cover-preview img {
	position: relative;
	width: 165px;
	height: 165px;
	float: left;
}
	
.bloc-track-title {
	position: relative;
	width: 165px;
	height: auto;
	font-size: 14px;	
	float: left;
	font-style: oblique;
	font-weight: 500;
	margin-top: 20px;
	color: #666;
	text-transform: none;
}
	
.bloc-track-artist {
	position: relative;	
	width: 165px;
	height: auto;
	float: left;
	font-size: 14px;
	margin-top: 3px;
	font-weight: 600;
    color: #888;
	                
}

	
.time-infos { 
	position: relative;
    top: 26px;
	width: 48px;
	height: 26px;
    font-size: 16px;
	color: #fff;
	line-height: 26px;
	text-align:center;
	vertical-align: middle;
	float: left;/***
	background-color:#EF5A41;***/
	background-color: #fa7204;
    -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
	overflow: hidden;
    z-index: 99;	
}



/*** Début du footer ***/
#main-footer {
	position: relative;
	width: 1110px;
	height: 40px;
	float: left;
	padding: 15px;
	top: 60px;
	background-color: #1c1e2a;
	 -moz-border-radius-bottomright: 8px;
    -webkit-border-bottom-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.copyright {
    position: relative;
	width: 500px;
    color: #a0a4ae;
   
    font-size: 14px;
	text-align: center;

}

.profile-name {
    position: relative;
	width: 500px;
    color: #a0a4ae;
    font-size: 14px;
}


















.x {
    position: relative;
    
}



/** Début du player **/

.radio-player-bar {
	position: fixed;
	font-family: "Helvetica";
	width: 100%;
	height: 100px;
    color: #fff;
	background-color: rgba(0,0,0,1.00);
	bottom: 0;
	z-index: 100;
}

.player-bar-container {
	font-family: "Helvetica";
	height: 100px;
	width: 1170px;
	color: #fff;
	font-size: 14px;
    line-height: 1.42857143;
	margin: 0 auto;
	padding-right: 15px;
    padding-left: 15px;
}

.control-infos-titrage {
	width: 650px;
	height: 100px;
	float: left;
	background: rgba(223,223,223,0.00);		
}

.control-play {
	width: 60px; 
	height: 100px; 
	float: left;
	color: #fff;
	margin: 0px 20px 0 0;
	text-align: center;	
	background: rgba(0,0,0,1.00);
}
	
.btn_Play {
	position: relative; 
	top: 30px;
	font-size: 40px; 
	margin-left: 0px;
	cursor: pointer;
	font-weight: bolder;
}

.btn_Stop {
	position: relative; 
	top: 30px;
	font-size: 40px; 
	margin-left: 0px;
	cursor: pointer;
}

.media-cover {
	position: relative;
	height: 90px;
	width: 90px;
	margin-top: 6px;
	float: left;
}

.infos-track {
	position: relative;
	width: 440px; 
	height: 100px; 
	float: left;
	color: #fff;
	line-height: 100px;
	margin: 0 0 0 30px;
	background: rgba(243,243,243,0.00); 		
}

.titre {
	position: absolute;	
	font-family: "Helvetica";
	width: 100%;
	height: 18px; 	
    font-size: 18px;
	font-style: oblique;
	color: #fefefe;
    line-height: 18px;
	font-weight: 200;
	margin-left: 24px;
	bottom: 46px;
}
	
.artiste {
	position: absolute;	
	font-family: "Times New Roman", "serif";
	width: 100%;
	height: 18px;
  	font-size: 18px;
	color: #ffffffff;
	font-weight: bolder;
  	line-height: 18px;
	margin-left: 20px;	
	text-transform: uppercase;
	bottom: 44px;background: rgba(243,243,243,0.00);
}	

/*************************************************************************/
.control-actions-right {
	position: relative;
	width: 480px;
	height: 100px;
	float: right;
	background: rgba(22,223,223,0.00);		
}

.control-actions { position: relative;
	width: 85px;
	height: 100px;
	float: left;
	line-height: 100px;
	font-size: 18px;
}
	
#player-vote { float: left; }	
	
#player-partage { float: right; }

/******************************************************/

.control-volume {
	position: relative; 
    width: 140px;
    height: 100px;
	line-height: 100px;
	margin-left: 180px;
	background: rgba(223,223,223,0.00);
}	
.unmute {
	width: 30px;
	height: 100px; 
	float: left;	
}

.unmute-volume, .unmute-volume {
	position: relative;
	top: 6px;
	width: 26px;
	height: 26px;
	float: left;
	font-size: 24px;
	cursor: pointer;
}
/******/
.toggle-volume {

 	
}

.control-slider-volume {
	position: relative;
	width: 110px;
	height: 100px;
	float: left; 
}

#slider {
	position: relative;float: left;
	width: 90px;
    height: 5px;
	border: 0;
	background: rgba(34,47,53,1.00);		
}

.container-slider-volume {float: left;
	width: 90px;
    height: 5px;
	margin-top: 50px;
	background: rgba(34,47,53,1.00);
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	border-radius: 5px;
}	
	
.ui-slider, .ui-slider-range {
	width: 90px;
	height: 5px;
	-webkit-border-radius: 5px;
    -moz-border-radius: 5px;
	border-radius: 5px;
	background: #D7D7D7;
}


.ui-widget-content {
	width: 90px;
	height: 5px;
}


.ui-state-default,
.ui-widget-content
.ui-state-default,
.ui-widget-header .ui-state-default {
	width: 14px;
	height: 10px;
	margin-top: 2px;
	margin-left: 0px;
	border: 0;
	-webkit-border-radius: 5px;
    -moz-border-radius: 45px;
	border-radius: 5px;/****
	background: #646464;****/
	background: #FFFFFF;
}

.ui-state-default:focus { outline: none; }	



/*** FIN du player **//**background: #B54909; background: #629CB5;**/