/* YTPROG.FR CASCADING STYLE SHEET
 WRITTEN BY LOUIS COTELLE FROM JULY 10TH 2014 */ 
 
/* ---------------- GENERAL STYLES -------------- */

@font-face {
    font-family: 'futura';
    src: url('fonts/futura-webfont.eot');
    src: url('fonts/futura-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/futura-webfont.woff') format('woff'),
         url('fonts/futura-webfont.ttf') format('truetype'),
         url('fonts/futura-webfont.svg#futura_md_btbold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'MyriadPro';
    src: url('fonts/MYRIADPRO-REGULAR.OTF');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('fonts/MYRIADPRO-BOLD.OTF');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('fonts/MYRIADPRO-BOLDIT.OTF');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'MyriadPro';
    src: url('fonts/MYRIADPRO-CONDIT.OTF');
    font-weight: normal;
    font-style: italic;
}
	
	body{ 
				margin-top:5px;
				background-color: #191712;
				text-align:center;
				font-family: MyriadPro, Helvetica, Arial, sans-serif;
	}
	
		hr {
		  height: 1px;
		  margin: -0.5em 0;
		  padding: 0;
		  background-color: #000;
		  border: 0;
		  margin-left:15px;
		  margin-right:15px;
	} 	
	
			a{
			color:#FF1000;
			text-decoration:none;
			}
			a:hover{
			color:#FF1000;
			text-decoration:underline;
			}
			a:focus{
			color:#B30A1F;
			text-decoration:underline;
			}
			
			a, img {
				border:none;
				outline:none
			}		
	
			h1{
				font-size:25px;
				font-weight:bold;
				text-decoration:none;
				font-style:italic;
			}
			
			h2{
				font-size:20px;
				font-weight:bold;
				text-decoration:underline;
				font-style:normal;
				font-family:'Futura', futura, 'Myriad Pro';
		}
		
		  ul 
		{
				padding : 0; 
				margin : 0; 
				list-style : none; 
				line-height : 35px; 
				text-align : center; 
		}
		
		input, textarea, select{
			font-family: 'MyriadPro';
		}
/* --------------------------------------------------------------------------------------------- */ 
 
	#wrapper{
			width: 640px;			
			height: 1000px;
			background-color:#fff;
			margin:auto;
	}

		#logo_zone{
			width: 640px;
			height: 50px;
			background-color:#191712;
			text-align:left;
			border:0;
	}
	
		#left_logo_zone{
			width: 200px;			
			height: 50px;
			float:left;

	}

		#right_logo_zone{
			width: 330px;			
			height: 50px;
			float:right;
			text-align:right;
			padding-right:10px;
			position:relative;
	}	
	
		.lb{
			height:15px;
			width:15px;
			padding:1px;
			margin-top:-15px;
			position:absolute;
		}
		
		#lb1{
			background-color:#D22121;
			left:246px;
		}
		#lb2{
			background-color:#3B579D;
			left: 269px;
		}		
		#lb3{
			background-color:#2EAEF7;
			left: 292px;
		}		
		#lb4{
			background-color:#808080;
			left: 315px;
		}	
		
		#lb1:hover{
			background-image:url('img/reseaux/youtube.png');
			background-size:17px;
			left:246px;
		}
		#lb2:hover{
			background-image:url('img/reseaux/facebook.png');
			background-size:17px;
			left: 269px;
		}		
		#lb3:hover{
			background-image:url('img/reseaux/twitter.png');
			background-size:17px;
			left: 292px;
		}		
		#lb4:hover{
			background-image:url('img/reseaux/admin.png');
			background-size:17px;
			left: 315px;
		}				

/* ============= COLOR ZONE ================== */

			#color_zone{
				width:640px;
				height:7px;
				background-color:pink;
				float:left;
				position:absolute;
				z-index:0;
				top:90px;
			}
			
			#cz_1{
				width:130px;
				height: 7px;
				display: inline-block;
				position:absolute;
				left:-0px;
		}
			.cz_bleu{
				background-color: #002F88;
		}
				#cz_2{
			width:131px;
			height: 7px;
			display: inline-block;
			position:absolute;		
			left:130px;
	}
			.cz_jaune{
			background-color: #E49A00;
		}
				#cz_3{
			width:132px;
			height: 7px;
			display: inline-block;
			position:absolute;
			left:261px;
	}
			.cz_vert{
			background-color: #089C02;
		}
				#cz_4{
			width:131px;
			height: 7px;
			display: inline-block;
			position:absolute;
			left:393px;
	}
			.cz_rouge{
			background-color: #B30A1F;
		}
				#cz_5{
			width:118px;
			height: 7px;
			display: inline-block;			
			position:absolute;
			left:522px;
	}
			.cz_orange{
			background-color:#FF1000 ;
		}
/*========= MAIN ===========*/
				#main{
			padding:0px;

	}
	
	#top_main{
		width:640px;
		height:480px;
		position:absolute;
		top:100px;
		font-size:13px;
	}
	
	.top_main{
		width:640px;
		height:360px;	
	
	}
	
	#frame-live {
		background-image:url('img/static.gif');
		color:white;
		font-family: Courier New; 
	}
	
	#frame-live p{
		
		margin:0;
		padding:0;
	}
	
	#slider{
		
		font-size: 13px;
		position:relative;
		background-color:white;
	}
	
	#slider_boutons{
	
	position:absolute;
	z-index:3;
	left:570px;
	top:302.5px;
	width:70px;
	height:30px;
	}
	
	#slider_boutons_gauche{
		position:absolute;
		width:30px;
		height:30px;
		background-image:url('img/fleche_gauche.png');
		
	}
	#slider_boutons_gauche:hover{
		background-image:url('img/fleche_gauche_hover.png');
		cursor: pointer;
	} 
	
	#slider_boutons_droite{
		left:35px;
		position:absolute;
		width:30px;
		height:30px;
		background-image:url('img/fleche_droite.png');
		
	}
	#slider_boutons_droite:hover{
		background-image:url('img/fleche_droite_hover.png');
		cursor: pointer;
	} 
	
	.slider_top{
		
		width:640px;
		height:360px;
		position:absolute;		
		background-color:#000;
		z-index:1;
		
	}
	.slider_bottom{
		
		font-size: 13px;
		width:620px;
		height:40px;
		position:absolute;		
		top:300px;
		background-image:url('img/frame_trans.png');
		color:white;
		text-align:left;
		padding:5px;
		padding-top:15px;
		padding-left:15px;
		font-size:25px;
		font-family:"futura", futura, helvetica, arial, sans-serif;
		font-weight:bold;
		z-index:2;
	}
	.slider_bottom p{
		
		margin:0;
		padding:0;
		z-index:3;
	}

/* ----------------------------------------------*/	
	#left_main{
		float:left;
		width:435px;
		margin-top:490px;
		height:225px;
		font-size: 13px;
	}
	
	#content_main{
		padding:5px;
		text-align:left;
	}	

	#content_main p{
		font-size:14px;
	}	
	
	#right_main{
		float:right;
		margin-top:490px;
		width:190px;
		height:215px;
		margin-bottom:10px;
		margin-right:10px;
	}

/*========= FOOTER ============*/
				#footer{
			width:640px;
			height:90px;
			background-color:#746760;
			text-align:left;
			margin:auto;
			position:relative;
			margin-top:-90px;
			margin-bottom:100px;
			color:lightgrey;
			padding:0px;
			font-size:13px;
			
	}
	#f2{
		margin-left:10px;
		width:250px;
		height:100px;
		position:absolute;
	}
	
	#f3{
		margin-left:150px;
		width:250px;
		height:100px;
		position:absolute;
	}
	
	#top_footer{
		height:65px;
		padding-top:5px;
		
		
	}
	#bottom_footer{
		padding-left:5px;
		padding-right:5px;
		width:630px;
		height:20px;
		text-align:right;
		
	}
	
	#bottom_footer p {
		padding:0;
		margin:0;
		color: #9F9B97;
	}
	
	.fb a{
		text-decoration:none;
		color:lightgrey;
		
	}
	
	.fb :hover {
		color:white;
	
	
	}