/* ------------------------------------ */
/*                                      */
/*            Généralités               */
/*                                      */
/* ------------------------------------ */

body { 
padding:0px 0px 0px 0px;
margin: 0px auto;
background: #ca1111;

color: #fff;
font-family: "Calibri", Arial;
font-size: 12px;

 }
 


  
 
/* ------------------------------------ */
/*                                      */
/*            Header                    */
/*                                      */
/* ------------------------------------ */
#header {
	width:980px;	
	margin: 0 auto;	
	position:fixed;
	float:left;
	padding:0px 0px 0px 0px;
	text-align: center;
	margin-top:0px;	
	 margin-left:auto;
    margin-right:auto;
	height:80px;	
	background: #DBF8D3;
	}
	
	
	#bande3 {
	height:50px;
	width: 100%;
	margin-top:0px;
	float:left;
	position:fixed;
	left:0px;
	top:0px;
	text-align: left;			
	z-index:10;	
	background:#333;
	border-bottom:1px solid #555;
	}
	
.bande_art {
width: 100%;
float:left;
position:relative;
text-align: left;		
background:#d90000;
border-bottom:1px solid #ccc;
}

.bande_art:hover{
cursor:pointer;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
box-shadow: 1px 1px 12px #555;
}


.bande_artno {
width: 100%;
float:left;
position:relative;
text-align: left;		
background:#F1F3F5;
border-bottom:none;
}


.art {
position:relative;	
width:1000px;	
margin: 0 auto;	
padding: 0 0 0 0;
text-align: left;	
background:none;
line-height:1.7em;
}

.arts :hover{
cursor:pointer;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
box-shadow: 1px 1px 12px #555;
}	


#bloc {
	width:100%;	
	margin: 0 auto;	
	margin-bottom: 10px;	
	position:relative;
	float:left;
	padding:5px 10px 5px 10px;
	background: #DBF8D3;
	
	}





.cadremenu {
font-family: "Roboto", Arial, sans-serif;
    font-size: 1.4em;
    margin-top: 8px;
    margin-bottom: 8px;
    margin-left: 3px;
    margin-right: 3px;
    font-weight: 500;
cursor:pointer;
background:#000000;
	color: #fff;	
	border-radius:5px;
	padding:1px 7px 1px 7px;
}



.cadremenu:hover{
-moz-opacity:0.8;
opacity: 0.8;
filter:alpha(opacity=80);
color: #000;	
background:#FEE1C2;

}




h1 {
 	font-family: "Oswald", Arial, sans-serif;
    font-size: 2.4em;
    margin-top: 0.1em;
    margin-bottom: 0.1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
font-weight: 300;}



h2 {
font-family: "Roboto", Arial, sans-serif;
font-size: 1.6em;
font-weight: 300;
color: #D96C00;
}

h3 {
font-family: "Roboto", Arial, sans-serif;
font-size: 1.2em;
font-weight: 300;
color: #000000;
}


h1.ombre
 {
text-shadow: 1px 1px 4px #FFCFBF;
}

h2.ombre
 {
text-shadow: 1px 1px 4px #888888;
}


	


#imgcadre{
	width: 95%;
	margin-bottom:10px;
	margin-right:2%;
	
}


footer {
	clear: both;
	padding: 0 15px;
}

#textart {width:675px;}
#imgart {width:300px;}
#item_video {width:800px;height:450px;}


/************************************************************************************
MEDIA QUERIES
*************************************************************************************/

@media only screen and (max-width: 1280px) {
				#position {width:1000px;}
				.art {	width: 1000px;}						
				#imgart {width:300px;}
				#textart {width:675px;}
				#item_video {width:800px;height:450px;}
	
		}


@media only screen and (max-width: 1024px) {
		#position {width:1000px;}
		.art {width: 768px;}						
		#imgart {width:230px;}	
		#textart {width:520px;}
		#item_video {width:768px;height:432px;}
		}

@media only screen and (max-width: 768px) {
		#position {width:750px;}	
		.art {width: 640px;}			
		#imgart {width:192px;}	
		#textart {width:430px;}
		#item_video {width:640px;height:360px;}
		}
		
	@media only screen and (max-width: 640px) {
		.art {width:620px;}	
		#imgart {width:186px;}	
		#textart {width:410px;}
		#item_video {width:620px;height:348px;}
		}	
				
		
@media only screen and (max-width: 480px) {   
		#position {width:460px;}	
		.art {width: 320px;}		
		#imgart {width:96px;}	
		#textart {width:200px;}
		#item_video {width:320px;height:180px;}
		}		
		
@media only screen and (max-width: 320px) 
		{    
		.art {width: 250px;}		
#position {width:300px;}	
#imgart {width:75px;}	
#item_video {width:250px;height:140px;}

		}
		
		
		

		
		

	
	

#imgcadre{
	width: 80%;
}
	
	
	header, footer {
		padding: 1% 4%;
	}
}

/* for 700px or less */
@media screen and (max-width: 600px) {



}

/* for 480px or less */
@media screen and (max-width: 480px) {

	header {
		height: auto;
	}
	h1
	{
		font-size: 2em;
	}
	#sidebar {
		display: none;
	}

}





	
	
	
	#footer {
	height:50px;
	width: 100%;
	margin-top:0px;
	float:left;
	position:fixed;
	left:0px;
	bottom:0px;
	text-align: left;			
	z-index:100;		
	background: #111;
	}
	
	#bande {
	height:100px;
	width: 100%;
	margin-top:0px;
	float:left;
	position:fixed;
	left:0px;
	top:0px;
	text-align: left;			
	z-index:10;		
	}
	
		
	#position_menu {
	position:relative;	
	width:1000px;
	margin: 0 auto;	
	padding: 0 0 0 0;
	text-align: left;	
	background:none;
	
	}
			
	
	

	
	#menuh {
	height:0px;
	width: 1000px;
	margin:0px;
	position:relative;	
	margin: 0px auto;
	padding:0px 0px 0px 0px;
	text-align: left;
	margin-top:0px;	
		background: #a00;
	}
	
	
	
	

#menu_haut {
z-index:1000;
position: absolute;
right:10px;
top:20px;
height:150px;
width:150px;

margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
text-align:right;

}


#msgt_titre {
position: absolute;
left:10px;
top:40px;
height:35px;
width: 550px;
display: block;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#form1 a{
	
	width:150px;
	display:block;
	position:relative;
	font-family: "sans serif", Geneva, Arial, sans-serif;
	font-size:1.25em;
	font-weight: bold;
	color:#fff;
	text-align:center;
	margin: 0px 0px 0px 0px;
	padding:5px 10px 10px 10px;
	background: #bc6c10;
	text-decoration:none;
	
	
}	
#form1 a:hover{
display:block;
	color:#fff;
	background: #333;
	position:relative;
		}	
		
#form2 a{
	
	width:150px;
	display:block;
	position:relative;
	font-family: "sans serif", Geneva, Arial, sans-serif;
	font-size:1em;
	font-weight: bold;
	color:#fff;
	text-align:center;
	margin: 0px 0px 0px 0px;
	padding:5px 10px 10px 10px;
	background: #000;
	text-decoration:none;
	
	
}	
#form2 a:hover{
display:block;
	color:#ccc;
	background: #bc6c10;
	position:relative;
		
}	


/*Back to top*/
#top-arrow{display:none;position:fixed;right:50px;top:50%;margin-top:-40px;width:100px;height:100px;background:#000;z-index:20;filter: alpha(opacity=30);-ms-filter: "alpha(opacity=30)";opacity: .3;cursor:pointer;}
#top-arrow:hover,#top-arrow:focus{background:#000;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";opacity: 1;}



/* ------------------background : url(../img/fondtopbar.jpg) left top repeat-y;------------------ */
/*                                   
background : url(../img/fonddivmenu.png) left top no-repeat;

   */
/*            Menu                      */
/*                                      */
/* ------------------------------------ */


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}


/* ------------------------------------ */
/*                                      */
/*            Global                    */
/*                                      */

#global
{
	position:relative;
	display:block;
	width:980px;	
	margin: 0 auto;
	margin-top:10px;
	padding:10px 10px 10px 10px;
	text-align: left;
	background: none;	
}



#global #articles {
	z-index:1000;
	float: left;
	width: 1000px;
	margin:5px 0px 0px 0px;
	padding: 0 0 0 0;
	color: #000;	
	font-weight:normal;
	text-align: left;
	line-height: 1.35em;		
}

#global #right 
{
	float: left;
	width: 170px;
	margin:5px 0px 0px 30px;
	padding:  0 0 0 0;
	color: #000;		
	font-weight:normal;
	text-align: left;d
	
	background:none;
}


/*#global #presentation a img {
	margin-right: 10px;
}*/




#clearombre {
	width: 900px;
	height: 14px;
	background: url(img/tagada.png) left top no-repeat;
	margin: 0 auto;
	font-size: 1px;
	clear: both;
}

div#contenu {
	margin: 0 0 0 0;
	padding-top: 0 0 0 0;
	line-height: 1.5em;
	
}
div#contenu p {
	margin-bottom: 1.3em;
	text-align: justify;
}


#articleg {
position: relative;
width: 350px;
float:left;
margin:0px 0px 10px 0px;
padding:0px 5px 15px 5px;

}

#articled {
position: relative;
width: 350px;
float:left;
margin:0px 0px 10px 10px;
padding:0px 5px 15px 5px;
}

#slide_img {
cursor:pointer;
}

#slide_img :hover{
cursor:pointer;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
box-shadow: 1px 1px 12px #555;
}



/* ------------------------------------ */
/*                                      */
/*            Footer                    */
/*                                      */
/* ------------------------------------ */







/*Back to top*/
#top-arrow{display:none;position:fixed;right:50px;top:50%;margin-top:-40px;width:100px;height:100px;background:#000;z-index:20;filter: alpha(opacity=30);-ms-filter: "alpha(opacity=30)";opacity: .3;cursor:pointer;}
#top-arrow:hover,#top-arrow:focus{background:#000;filter: alpha(opacity=100);-ms-filter: "alpha(opacity=100)";opacity: 1;}
								
/* ------------------------------------ */
/*               TEXTES                        */
/* ------------------------------------ */




#cadre_texte {
cursor:pointer;
padding:5px 5px 5px 5px;
margin-bottom:10px;
background: url(../img/fond.png) left top repeat-x;
border:1px solid #ccc;

}

#cadre_texte:hover {
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}



.select {  
font-size: 12px; 
font-weight: bold;
color: #000;
border-bottom : 2px solid #B8C0A6;
border-right : 2px solid #B8C0A6;
border-top : 1px solid #59663A;
border-left : 1px solid #59663A;
-moz-border-radius: 3px;
-webkit-border-radius: 10px;
background-color: #fde6af }


.select2{  
font:normal 16px "Roboto", Arial, sans-serif;
font-weight: 400;
color: #000;
border-bottom : 2px solid #ccc;
border-right : 2px solid #ccc;
border-top : 1px solid #333;
border-left : 1px solid #333;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
background-color: #f9f9f9 }




.select_alias {  
font-size: 12px; 
font-family:"Calibri", sans-serif;
font-weight: bold;
color: #fff;
border-bottom : 1px solid #B8C0A6;
border-right : 1px solid #B8C0A6;
border-top : 1px solid #59663A;
border-left : 1px solid #59663A;
border-radius: 3px;
-webkit-border-radius: 10px;
background:url(../img/fond_select.png) bottom left repeat-x; }


.zipbtn a{
cursor:pointer;
}
.zipbtn a:hover{
cursor:pointer;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
}


#btn_valid
{
color: #fff;
cursor:pointer;
border : none;
font:normal 16px "Roboto", Arial, sans-serif;
font-weight: 400;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #519b29
}


#btn_valid:hover 
{
color: #333;
-moz-opacity:0.5;
opacity: 0.5;
filter:alpha(opacity=50);
background-color: #ccc
}






.lien_cadre a{
	cursor:pointer;
	font-family: "Oswald", Arial, sans-serif;
	color: #fff;
	font-weight: normal;
	text-decoration: none;
    font-size: 1.2em;
	font-weight: 300;
cursor:pointer;
background:#000000;	
	padding:2px 3px 2px 3px;
	
}
.lien_cadre a:hover {
	color: #6ff;	
}




.link_textes a{
cursor:pointer;
padding:2px 2px 2px 2px; 	
text-decoration: none;	
font:normal 1.6em "Taviraj", Arial, sans-serif;
font-weight: 400;
color:#F89105;	
}

.link_textes.cul a{
color:#F8E005;	
}

.link_textes.sol a{
color:#FF4C4C;	
}



.link_textes a:hover{
color: #ccc;	
}







.lien_menu a{
	cursor:pointer;
	font: 12px Calibri, arial;
	color: #fff;
	font-weight: normal;
	text-decoration: none;		
}
.lien_menu a:hover {
	color: #6ff;	
}


.link_cadre a{
	cursor:pointer;
	padding:2px 2px 2px 2px; 
	font: 12px Calibri, arial;
	color: #fff;
	background-color: #633;
	font-weight: normal;
	text-decoration: none;		
}
.link_cadre a:hover {
		color: #ccc;
	background-color: #666;
}







.link_ref a{
	cursor:pointer;
	padding:2px 2px 2px 2px; 
	font: 11px Calibri, arial;
	color: #c9c2bd;
	font-weight: normal;
	text-decoration: none;		
}
.link_ref a:hover {
		color: #ccc;
	background-color: #666;
}

	.link a{
	cursor:pointer;
	font:normal 16px "Roboto", Arial, sans-serif;
	font-weight: 400;
	color: #b92d72;	
	text-decoration: none;			
	}
.link a:hover {
		color: #fc0;	
}




/* ------------------------------------ */
/*               TEXTES                        */
/* ------------------------------------ */
.textea.gris
 {
font:normal 1.4em "Oswald", Arial, sans-serif;
font-weight: 300;
color:#ccc;
}

.texteb.blanc
 {
font:normal 1.4em "Roboto", Arial, sans-serif;
font-weight: 300;
color:#fff;
}

.texteb.ombre
 {
font:normal 1.4em "Roboto", Arial, sans-serif;
font-weight: 300;
text-shadow: 1px 1px 4px #ccc;
}



.level
 {
font:normal 18px "Open Sans", Arial, sans-serif;
font-weight: 600;
font-size:14px;
font-weight: normal;
color:#000;
text-align: left;
}

.level.a {
 
font-family: 'Oswald', serif;
font-size:32px;
font-weight: 400;
letter-spacing:-0.01em;
line-height:20px;
}

.level.ai {
 
font-family: 'Oswald', serif;
font-size:24px;
font-weight: 400;
letter-spacing:-0.01em;
line-height:20px;
}



.level.b
 {
font-size:16px;
line-height:18px;
font-weight: 400
}

.level.r
{
font:normal 16px "Overlock", Arial, sans-serif;
font-weight: 400;
}

.level.c
{
font-size:15px;
color:#333;
}

.level.d
{

font-size:14px;
font-style:italic;
}


.level.orange
 {
color:#fc0;
}

.level.vert
 {
color:#85bc43;
}





.level.ins
 {
font-size:14px;
color:#9b97ef;
}

.level.insf
 {
font-size:14px;
color:#4d0b9f;
}

.level.noir
 {
font-size:12px;
color:#000;
}

.level.blanc
 {
font:normal 11px "Roboto", Arial, sans-serif;
font-weight: 300;
color:#fff;
}


#fade {
	display: none;
	background: #000; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: .80;
	z-index: 9999;
}
.popup_block{
	display: none;
	background: #000;
	padding: 3px; 	
	border: 1px solid #fff;
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	
}
img.btn_close {
	float: right; 
	margin: -10px -30px 0 0;	
}
.popup p {
	padding: 5px 10px;
	margin: 5px 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
	position: absolute;
}
*html .popup_block {
	position: absolute;
}



/**
 * 	Responsive design rules
 */


@media screen and (max-width: 1024px) {
	#global #right {	display: none;}	
	
}