@viewport {
   width: device-width;
   zoom: 1; 
}
html { font-size:100%; }


body{
	margin-left:0px;
	margin-right:0px;
	margin-top:0px;
	margin-bottom:0px;
	
    color: #555858;
	}



.header{
		display:inline-block;
		background-color : rgb( 9,57,103);
		color : White;
		font-family:"arial";
		font-weight: 400;
		
		font-size: 20px;
		
	  width: 100%;
	  height: 60px;
	  vertical-align: middle;
	  position : fixed;
	  top : 0px;
	  left : 0px;
	  box-shadow: 0 0 6px 0 rgb(0 0 0 / 40%);
	  z-index:99;
}

.HeaderIcone
{
	height : 90%;
	margin-top : 5%;
	margin-left : 20px;
}


.headerMenuIcone
{
	display : none;
}



.Titre
{
	margin-top : 0px;
	margin-bottom : 0px;
	font-size: 35px; 
	font-weight: 700;
}

.soustitre
{	
	margin-top : -20px;
	margin-bottom : 0px;
	vertical-align: top;
	font-size: 16px; 
	font-weight: 300;
}

.contentHeaderLeft {
	 height: 60px;
	padding-right: 20px;
	float: left;
}

.contentHeaderRight {
	margin-top : 20px;
	  height: 40px;
	font-size: 20px;
	padding-right: 35px;
	float: right;
	vertical-align: middle;
	text-align: center; 
  }
  
.contentHeaderRight :hover {
	  text-decoration: underline;
  }
  

.legend
{
	width:100%;
	text-align:center;  
	color:#AAAAAA;
}

  

a.headerLink{
	color : White;
	text-decoration: none; 
	font-weight: bold;
}

pre
{
 font-size: 16px;
  border: 1px solid #e9e9e9;
  border-radius: 3px;
  background-color: #eef;
  margin: 2em 0;
  font-family: 'VeraMono';
  font-weight: 400;
  background-color: #f3f3f3;
  overflow: auto;
  word-wrap: break-word; 
    padding: 1px 15px;
	margin:0px;
}


.leftMenu{
	width: 300px;
	padding: 8px 0;
	margin-bottom: 20px;
	margin-top : 60px;
    background-color: #f5f5f5;
    border: 1px solid #e3e3e3;
	border-radius: 4px;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 14px;
    line-height: 20px;
	float : left;
	
	position: fixed;
    height: 100%;
}


.leftMenuTitle
{
	display: block;
	margin-left : 25px;
	margin-right : 25px;
    font-size: 14px;
    font-weight: bold;
    color: #777777;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
	height: 18px;
    cursor: pointer;	
	border-bottom: 1px solid rgba(0,0,0,.2);
}

a.leftMenuLinks
{
    line-width: 20px;
	margin-left : 30px;
	color: #185391;
	text-decoration: none;
}

a.leftMenuLinks:hover
{
	font-weight: bold;
}



.allPageTitle
{
	display: block;
	margin-left : 25px;
	margin-right : 25px;
    font-size: 32px;
    font-weight: bold;
    color: #777777;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	
	border-bottom: 2px solid rgba(0,0,0,.2);
}

.leftMenuPortable
{
	display : none;
}



.LeftMenuSubDiv
{
	overflow:hidden;
}


.list_fich_version_portable
{
	display : none;
}

.contenuAvecMenu
{
	float : left;
	margin-top : 60px; 
	margin-left : 350px;
	max-width: 75%;
	font-family: open sans,sans-serif;
    color: #555858;
}

.contenuSeul
{
	margin-top : 60px; 
	text-align : center; 
	float : left; 
	width : 100%;
	font-family: open sans,sans-serif;
    color: #555858;
	background-color: white;
	/* position: absolute; */
}

a{
	color : rgb( 9,57,103);
	rel : nofollow;
}
	
.tablePresentation {
  border-spacing: 30px;
  width : 50%;
}

a.simpleLink
{
    line-width: 20px;
	margin-left : 30px;
	color : rgb( 9,57,103);
	text-decoration: none;
}

a.simpleLink:hover
{
	 text-decoration: underline;
}

.hideOnSmallScreen
{
	display : block;
}

.showOnSmallScreen
{
	display : none;
}



.AcceuilImage
{
	height : 200px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:100%;
}

 .videoArticle
 {
	 width : 640px;
	 height : 360px;
 }




/* TABLEAUX */

table.colorise {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

table.colorise td, table.colorise th {
  border: 1px solid #ddd;
  padding: 8px;
}

 table.colorise tr:nth-child(even){
	 background-color: #f2f2f2;
	 }

table.colorise td.sousTitre
{
	text-align : center;
	background-color: #1963b3;
	color: white;
}

table.colorise th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #185391;
  color: white;
}






table.tableSimpleBordure {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 50%;
}

table.tableSimpleBordure td, table.tableSimpleBordure th {
  border: 1px solid #ddd;
  padding: 8px;
}


table.tableSimpleBordure th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #f2f2f2;
  color: black;
}




/* Image toute seulle sur une ligne */
.imgAlloneFullPage {
	width : 33%; 
	border-radius: 12%; 
	-moz-box-shadow: 14px 11px 23px 0px rgba(135,135,135,1);
	box-shadow: 14px 11px 23px 0px rgba(135,135,135,1);
}

.imgAlignLeftArticle
{
		width:30%;
		max-width:800px; 
		vertical-align:middle; 
		float: left; 
		margin-right : 3%;
}


.imgArticleBig
{
	max-height: 550px; 
	max-width: 90%; 
	display: block;    
	margin-left: auto;    
	margin-right: auto;
}


.imgArticleMid
{
	max-height: 400px; 
	max-width: 90%; 
	display: block;    
	margin-left: auto;    
	margin-right: auto;
}





.imgArticleSmall
{
	max-height: 300px; 
	max-width: 90%; 
	display: block;    
	margin-left: auto;    
	margin-right: auto;
}



.defaultBtn
{
	background-color: rgb( 9,57,103);
    border: none;
    color: white;
    padding: 10px 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 20px;
	cursor:pointer;
	font-weight: bold;
	text-decoration: underline;
}



/* AFFICHAGE SUR PORTABLE */
/*
Sur écran de téléphone portable le menu de gauche se déroule grace à un bouton affiché uniquement sur petit écran et fait la largeur de l'écran

*/



@media screen and (max-width: 1281px) {
	
	/* HEADER */
	
	.header{
	  height: 40px;
	}
	
	
	.HeaderTitle
	{
/*		display : none; */
	}
	
	.Titre
	{
		font-size: 27px; 
		margin-top: 4px;
		font-weight: 700;
	}

	.soustitre
	{
		display : none;
	}	

/* HEADER GAUCHE */

	.HeaderIcone
	{
		display : none; 
		margin-left : 15px;
	}

	.contentHeaderLeft {
		height: 40px;
	}
	

/*HEADER DROITE */
.contentHeaderRight {
		display : none;
	}
	
	

/* MENU GAUCHE */

	.leftMenu{
		display : none;
	}

.headerMenuIcone
{
	display : block;
	height:70%; 
	margin-left:10px; 
	vertical-align:top; 
	margin-top:5px;
}

	.leftMenuPortable{
		display : none;
		width: 100%;
		padding: 8px 0;
		margin-bottom: 20px;
		margin-top : 40px;
		background-color: #f5f5f5;
		border-radius: 4px;
		font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
		font-size: 14px;
		line-height: 20px;
		float : left;
		
		/* position: fixed; */
		height: 100%;
	}

.list_fich_version_portable
{
	display : block;
}


/* affichage du mot MENU dans le menu version portable */
.bigTitleMenu
{
	display: block;
	margin-top : -10px;
	margin-left : 25px;
	margin-right : 25px;
    font-size: 20px;
    font-weight: bold;
    color: #777777;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
	
	border-bottom: 1px solid rgba(0,0,0,.2);
}


/* n'affiche pas de barre pour les soustires du menu */
.leftMenuTitle
{
	border-bottom : 0px solid rgba(0,0,0,.2);
}

.cateMenuGauchePortable
{
	/*
	margin-top : 10px;
	margin-bottom : 10px;
	*/
	text-transform: uppercase;
	margin-left: 25px;
	color: rgb( 9,57,103);
	padding: 8px 0;
	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 18px;
	font-weight: bold;
	display : block;
	width : 80%;
}	

.DivMenuGauchePortable
{
	display : none;
}

/* PAGE AVEC MENU */

.allPageTitle
{
	display: block;
	margin-left : 12px;
	margin-right : 12px;
    font-size: 20px;	
}
	
	.contenuAvecMenu
	{
		margin-top : 40px;
		margin-left : 1%;
		width : 98%;
		max-width : 98%;
	}
	
.contenuSeul
{
	margin-top : 20px;
	margin-left : 1%;
	width : 98%;
	max-width : 98%;
}


 .videoArticle
 {
	 margin-top : 0px;
	 margin-bottom : 0px;
	 width : 98%;
	 height : 210px;
	 max-width : 340px;
 }



h1{
	display: block;
    font-size: 18px;	
}

h2{
	display: block;
    font-size: 16px;	
}


h3{
	display: block;
    font-size: 14px;	
}


h4{
	display: block;
    font-size: 12px;	
}

table.colorise {
  width: 98%;
  overflow-x:auto;
}

table.tableSimpleBordure {
  width: 98%;
  overflow-x:auto;
}

.hideOnSmallScreen
{
	display : none;
}

.showOnSmallScreen
{
	display : block;
}

.AcceuilImage
{
	height : 150px;
	display: block;
    margin-left: auto;
    margin-right: auto;
	max-width:100%;
}


.tablePresentation
{
	border-spacing: 30px 0px;
  width : 100%;
}


/* Image toute seulle sur une ligne */
.imgAlloneFullPage {
	width : 80%; 
	border-radius: 12%; 
	-moz-box-shadow: 14px 11px 23px 0px rgba(135,135,135,1);
	box-shadow: 14px 11px 23px 0px rgba(135,135,135,1);
}



.imgAlignLeftArticle {
	width : 60%;
	display: block;
	margin-left: auto;
	margin-right: auto;
	float : none;
}



.centreOnSmallScreen{
	display : block;
	float : none;
	margin-left: auto;
    margin-right: auto;	
}

}