@import "category.css";
@import "video.css";
@import "jquery.bxslider.mod.cyril.css";

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, a, img, u, i, ol, ul, li {

	border: 		0;
	margin: 		0;
    padding: 		0;
    font-family: 	inherit;
    font-style: 	inherit;
    font-variant: 	inherit;
    font-weight: 	inherit;
    line-height: 	inherit;
    font-size-adjust: inherit;
    font-stretch: 	inherit;
    -moz-font-feature-settings: inherit;
    -moz-font-language-override: inherit;
    font-size: 		100%;
   
    vertical-align: baseline;
	
	/* Améliorer la lisibilité du texte */	
	-webkit-hyphens: auto;  
    -moz-hyphens: 	auto;  
    hyphens: 		auto; 
}

body {
	background:			#fafafa ;
	color:				#282828;
	font-family: 		Helvetica,Arial,sans-serif;
	font-size:			100%;
	line-height: 		130%;
	max-width:			100%; /*larguer maximal du body avec le menu et la page, pour que la page ce colle plus à droite et gauche quand l'écran est grand*/
	overflow-y:			auto;
	-webkit-font-smoothing:antialiased;
}

p{
	text-align: 		justify;
	 
}

img{
	border: 			none;
}

	
a {
   text-decoration: 	none;
}


#menu {
    bottom: 			0px;
    left: 				0px;
    position: 			fixed;
    top: 				0px;
    width: 				80mm;/*Largueur du menu doit être modifier avec le padding de CONTENT*/
	background: 		#555555;
}

#menu ol,ul{
	list-style:			none;
}

#menu .wrapper {
    display: 			block;
    padding: 			0px;
	padding-top: 		15mm ; /*Espace entre le nom et le haut*/
    position: 			relative;
    z-index: 			2;
}


#menu #name {
	color:			#3299bb;
	display:		block;
	text-align: 	center;
	/*font-family: 	Helvetica,Arial,sans-serif;*/
	font-size:		2.6em;
	margin-bottom:	10mm; /*séparation entre le menu est le nom*/
	
}

#menu #name span {
    color:			#FFFFFF;
}


/* Style du premier niveau*/
#menu .level1 a {
	font-size:			1.2em;	 
}

/* Style du premier niveau*/
#menu .level2 a {
	padding-left:		2em;
	font-size:			1.1em;	 
}

nav {	
	margin:				0;	
 }
 
nav li {
margin-bottom:			0.6em; /*espace entre les elements du menu*/
}
 
nav a {
	background:			#555555; /*Pour les navigateurs qui ne supporte pas des fonds translucide*/
	background:			rgba(66,66,66,.8);
	-webkit-box-shadow:	0 0 2px rgba(0,0,0,.25);
	-moz-box-shadow:	0 0 2px rgba(0,0,0,.25);
	box-shadow:			0 0 2px rgba(0,0,0,.25);
	color:				#FFFFFF;
	display:			block;
	margin-right:		12mm; /*Espace à gauche des liens, le block entier*/
	padding:			0.2em 0.5em;
	text-decoration:	none;
	text-shadow:		0 0 1px #000;

-webkit-transition: 	0.3s ease-in-out;
	-moz-transition: 	0.3s ease-in-out;
	-ms-transition: 	0.3s ease-in-out;
	-o-transition: 		0.3s ease-in-out;
	transition: 		0.3s ease-in-out;
}
 
nav a:hover {
	background-color:	#424242;
}

nav a.selected  {
	background:			#3299bb;

}
nav a,
nav a.selected :hover{
margin-left:			12mm; /*Espace à droite des liens, le block entier*/	
}

nav a:hover,
nav a.selected  {
margin-left:			10mm; /*Espace à droite des liens quand on passe la souris dessus*/	
}

/* HEADER */


#header{
	display:				inline-block;
	width:					100%;
	text-align:				center;
	vertical-align:			middle;	
	padding:				0px 0px;
	margin:					0px 0px;
	margin-top:				1em;  /* Léger décalage de l'image par rapport au haut de la page*/
}

#header #header-image img{	
	width:					100%; /*Pour que l'image prenne bien tout le cadre*/
}

#content {
	padding:				0px;
	margin:					0px;
	margin-left: 			80mm; /*Doit être égale à largueur du menu*/
	padding:				0px 5mm; /* TOP et BOTTOm puis LEFT et RIGHT* => Ici, pour l'espace à droite et à gauche du texte*/
	position:				relative;
	z-index:				10;
}
	
#content a,
#content a:visited {
	color:					#FF4300; /*La couleur des liens original etait #FF9900, puis FF4301*/
	text-decoration:		none;
}



#content a:hover {
	color:					#3299bb;
}



#content #page {
	width: 					100%;
	max-width:				220mm; /* largeur du corps de page => largeur totale avec le menu et la page de texte dedans*/
	margin-left: 			auto;
	margin-right: 			auto;
	padding:				0px;

}

#content #page h1{
color:#3299bb;
	text-align:				left;
	font-size:				2.5em;
	margin-top: 			1em;
	margin-bottom: 			0.6em;

}

#content #page h2{
	text-align:				left;
	font-size:				1.6em;
	padding-left: 			1em;
	font-weight:			bold;
	margin-top: 			1.2em;
	margin-bottom: 			0.5em;

}

#content #page h3{
	text-align:				left;
	font-size:				1.05em;
	padding-left: 			0em;
	font-weight:			bold;
	margin-top: 			0.8em;
	margin-bottom: 			0.5em;

}



/* Pour mettre le padding des listes à puces */
#content #page .listpadding{
	padding-left :			1em;
}

/* Pour mettre le padding des listes à puces */
#content #page .listpadding2{
	padding-left :			3em;
}

#content #page p , ul {
	padding-left :			0em;
	list-style-type:		disc;
	font-size:				1em;
}

/* Pour les images de taille 20em */
#content #page .img20{
	max-width:				20em;
	width: 					100%;
    
}

#content #page .img25{
	max-width:				25em;
	width: 					100%;    
}
#content #page .img30{
	max-width:				30em;
	width: 					100%;    
}

#content #page .img35{
	max-width:				35em;
	width: 					100%;    
}
#content #page .img40{
	max-width:				40em;
	width: 					100%;    
}
#content #page .img50{
	max-width:				50em;
	width: 					100%;    
}


#spacer {
  height: 10em;
}

#content  a.backtotop {

	display: 			none;
	position:			fixed;
	/* position (4 lignes) */
	right:				1em;		
	bottom:				1em;
	top:				auto;
	left:				auto;
	/*la largeur*/
	width:				2em;		/* taille (2 lignes)	*/
	background-color:	rgba(0, 0, 0, 0.7);	/*	couleur et opacité */
	border-radius:		0px;				/* arrondis	*/
	/*cursor:				pointer;			/* curseur main	*/
	text-decoration: 	none;
	font-size:			1.5em;  /* taille, police du texte qui est contenu dans le carré de la flèche */
	padding: 			0.5em;
	color:				white;   
}

#content  a.backtotop:hover {
	background-color:	rgba(0, 0, 0, 0.9);
}




@media (max-width: 280mm)		/* Ipad horizontal*/
{
	#menu {
		width: 				50mm;/*Largueur du menu doit être modifier avec le padding de CONTENT*/
	}
	#menu .wrapper {
		padding-top: 		10mm ; /*Espace entre le nom et le haut*/
	}

	#menu #name {
		font-size:			1.8em;
		margin-bottom:		6mm; /*séparation entre le menu est le nom*/		
	}
	
	#content {
	margin-left: 			50mm; /*Doit être égale à largueur du menu*/
	padding:				0px 2mm; /* TOP et BOTTOm puis LEFT et RIGHT* => Ici, pour l'espace à droite et à gauche du texte*/
	}
	
	/* Style du premier niveau*/
	#menu .level1 a {
		font-size:			1em;	 
	}

	/* Style du deuxième niveau*/
	#menu .level2 a {
		font-size:			0.8em;	
		padding-left:		1.5em;
	}
	
	nav li {
	margin-bottom:			0.4em; /*espace entre les elements du menu*/
	}
	
	
	nav a {
	margin-right:			4mm; /*Espace à gauche des liens, le block entier*/
	padding:				0.2em 0.4em;
	}
	
	nav a,
	nav a.selected :hover{
	margin-left:			4mm; /*Espace à droite des liens, le block entier*/	
	}

	nav a:hover,
	nav a.selected  {
	margin-left:			2mm; /*Espace à droite des liens quand on passe la souris dessus*/	
	}
}

@media (max-width: 230mm)		/* Ipad vertical*/
{
	#content #page .img20{
		max-width:				14em;
	}	
	#content #page .img25{
		max-width:				22em;
	}
	#content #page .img30{
		max-width:				24em;
	}	
	#content #page .img35{
	max-width:					28em;   
	}
	#content #page .img40{
		max-width:				30em;
	}	
	#content #page .img50{
		max-width:				35em;
	}
	
	#content a.backtotop {
		/* position (4 lignes) */
		right:				1em;		
		bottom:				1em;
		width:				2em;
		font-size:			1.3em;  /* taille, police du texte qui est contenu dans le carré de la flèche */
		padding: 			0.4em; 
	}
}

@media (max-width: 160mm)		/* Iphone */
{

	#menu {
		width: 				35mm;/*Largueur du menu doit être modifier avec le padding de CONTENT*/
		background:			#000000;
	}
	#menu .wrapper {
		padding-top: 		3mm ; /*Espace entre le nom et le haut*/
	}

	#menu #name {
		font-size:			1.2em;
		margin-bottom:		3mm; /*séparation entre le menu est le nom*/		
	}
	
	#content {
	margin-left: 			35mm; /*Doit être égale à largueur du menu*/
	padding:				0px 1mm; /* TOP et BOTTOm puis LEFT et RIGHT* => Ici, pour l'espace à droite et à gauche du texte*/
	}
	
	/* Style du premier niveau*/
	#menu .level1 a {
		font-size:			0.9em;	 
	}

	/* Style du deuxième niveau*/
	#menu .level2 a {
		font-size:			0.8em;	
		padding-left:		1.5em;
	}
	
	nav li {
	margin-bottom:			0.1em; /*espace entre les elements du menu*/
	}
	
	
	nav a {
	margin-right:			2mm; /*Espace à gauche des liens, le block entier*/
	}
	
	nav a,
	nav a.selected :hover{
	margin-left:2mm; /*Espace à droite des liens, le block entier*/	
	}

	nav a:hover,
	nav a.selected  {
	margin-left:1mm; /*Espace à droite des liens quand on passe la souris dessus*/	
	}
	
	 #header{
		margin-top:				0.3em;  /* Léger décalage de l'image par rapport au haut de la page*/
	}
	
	#content #page .img20{
		max-width:				10em;
	}	
	#content #page .img25{
		max-width:				12em;
	}
	#content #page .img30{
		max-width:				16em;
	}	
	#content #page .img35{
	max-width:					18em;   
	}
	#content #page .img40{
		max-width:				20em;
	}	
	#content #page .img50{
		max-width:				22em;
	}
	
	#content a.backtotop {
		/* position (4 lignes) */
		right:				1em;		
		bottom:				1em;
		width:				2em;
		font-size:			1.3em;  /* taille, police du texte qui est contenu dans le carré de la flèche */
		padding: 			0.4em; 
	}
		
	
}

@media (max-width: 130mm){
	#contenta.backtotop {
		/* position (4 lignes) */
		right:				0.9em;		
		bottom:				0.9em;
		width:				2em;
		font-size:			1.1em;  /* taille, police du texte qui est contenu dans le carré de la flèche */
		padding: 			0.4em; 
	}
}