@charset "utf-8";
* {
/*margin:10px;  /*marginal de la page generale*/
/*padding:10px; /* de la page generale*/
/*background:#ffffff; /* la coleur de la page generale*/
/*text-align:center;*/
font-size:16px;

}
 
body{
font-family:Arial, Helvetica, sans-serif;
/*background:url(../Images/bgbody.jpg) #FFF no-repeat top center;*/
}
 
#img {
border:none;
position:relative;
float:left;
}
 
#img2 {
border:none;
position:Absolute;
float:left;
/*top: 26px;*/
/*left:20px;*/
width: 200px;
height: 120px;
margin: 0px;
padding: 0px;
}
#img3 {
border:none;
position:Absolute;
float:left;
/*top: 26px;*/
/*left:20px;*/
width: 600px;
height: 100px;
margin: 0px;
padding: 0px;
}
 
.a {  
color:#000000;
text-decoration:none;
text-transform:none;
}
/** pour utilise bouton , il faut utilise classe
cad   <a class="bouton"> bla bla bla </a>*/
a.bouton {  
color:#000000;
margin: 0px;
padding: 0px;
position:relative;
width:110px;
height:15px;
/*background-image:url(../Images/bg-footer-center.png);*/
text-decoration:none;
text-transform:none;
background-color:transparent;
}
/*centre la page et donne la largeur pour une basse résolution
pour utilise il faut utilise  id="center"
*/
#centrer {
margin-left:auto;
margin-right:auto;
width:800px;
}
#headerContener {
	background-image:url(../Images/bande-top.png);
	background-repeat: repeat-x;
	height: 188px;
}
#contener {
	min-width:600px;
}
/**   de Yousfi permet de partage ma page  **/
/*
Ci-dessous permet de couper l'écran de dimension 800x1000px
Les bloque ci-dessous sont des vrais bloque, leur position est absolute
L'avantage de absolute est de pose le bloque div ou tu veux, 
inconvénients, ce type de partage n'est pas compatible avec les smartphones.
Pr plus d'info, voir :
https://developer.mozilla.org/fr/docs/Web/CSS/position

*/

/** classe de div ce qui sur la gauche de page*/
#gauchepage {
  position:absolute;
	top: 180px;
	/*left:10px;*/
	/*float:left;*/
	width:150px;
	height:700px;
	background-color:#FFFFFF;
	z-index:1;
	}
#droitepage {
  position:absolute;
	font-size:12px;
	font-weight:normal;
	top: 180px;
	left:1000px; /*=Left de Contenu + Width de contenu*/
	/*float:left;*/
	width:250px;
	height:700px;
	background-color:#FFFFFF;
	z-index:1;
	}

#contenu {
	position:absolute;
	top: 200px;
	left:200px;
	/*float:left;*/
	width:800px;
	height:700px;
	/*background-image:url(../Images/bgbody.jpg);*/
	background-color:transparent;
	}

#contenuarabe{
	position:absolute;
	direction: rtl;
	font-size:18px;
	font-family:Arial;
	margin: 20px;
  padding: 10px;
	top: 200px;
	left:200px;
	/*float:left;*/
	width:700px;
	height:700px;
	/*background-image:url(../Images/bgbody.jpg);*/
	background-color:transparent;
	}

#piedpage {
	position:absolute;
	top:950px;
	left:100px;
	/*float:left;*/
	width:800px;
	height:100px;
	/**background-image:url(../Images/bgbody.jpg);*/
	/*background-color:#FFCC00;
	/*z-index:1;*/
	}
#pied0 { 
  /*position:absolute;
	top: 550px;
	left:200px; */
	float:left;
	width:200px;
	height:70px;
	/**background-image:url(../Images/bgbody.jpg);*/
	/*background-color:#FFFFFF;
	/*z-index:1;*/
}
#pied1 { 
  /*position:absolute;
	top: 550px;
	left:400px; */
	float:left;
	width:500px;
	height:70px;
	/**background-image:url(../Images/bgbody.jpg);*/
	/*background-color:#FFFFFF;
	/*z-index:1;*/
}


/**ce que ci-dessous, permet de mettre ligne pointe entre les liens*/
#gauchepage li{	
	border-bottom:2px dotted #069; margin:0; padding:.0em 0; text-indent:.0em;display:block;
		}
#gauchepage li:first-child {	border-top:2px dotted #069;
}
/** Le button d acces membre : acces1 puis acces2 (au passage de la sourie */
a.acces {
  color: white;
  background-color: #000080;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  padding: 5px;
  border: 2px outset #c0c0c0;
  display: block;
  width: 100px;
}
a.acces:hover {
  background-color: #6495ED;
  background-image: url(aqua.jpg);
  border: 2px inset #c0c0c0;
}
/** le menu cote gauche*/
.lien_noir{font-family: arial;
	font-size: 12px;
	font-weight:normal;
	color : #000000;
	text-decoration:none;
	background-color:transparent;
	margin:0;
	border:0;
	padding:0;
	}
.lien_noir:hover{font-family: arial;font-size: 12px;font-weight:normal;color : #000000;text-decoration:underline;}
.lien_bleu{font-family: arial;
	font-size: 12px;
	font-weight:normal;
	color : #0000CD;
	text-decoration:none;
	background-color:transparent;
	margin:0;
	border:0;
	padding:0;
	}
.lien_bleu:hover{font-family: arial;font-size: 12px;font-weight:normal;color : #0000CD;text-decoration:underline;}
.right{text-align:right;}
.left{text-align:left;}
.bleu{color:#35B3D1;}
.vert{color:#7FC41C;}
/**  Fin de Partition de la page Yousfi*/

/* ce nav2 jeu sur la position de menu principale
		alors si tu veux change la position du mun il suffit de regle ici */
	
#bandeau {
  position:absolute;
	top:26px ;
	left:0px ;
	width:1300 px;
	height:220px;
	/*background-image:url(../Images/bgbody.jpg) #FFF no-repeat top center;*/
	/*background-color:transparent;*/
	/*background-color:red; /*Pr voir le frontier de ce div*/
	}
/** ce log doit etre dans bandeau !!*/	
#logo {
	/*position:absolute;*/
	position:relative;
	float:left;
	/*top: 26px;*/
	/*left:20px;*/
	width: 200px;
	height: 120px;
	/*z-index:500;*/
	/*background-color:#174A0E; /*Pour voir la frontiere */
}
#nav2 {
	 /*position:absolute;*/
   /* right:0px;*/
    /*background-image:url(./Images/menuInstitutionnel.png);*/
    /*max-width:500px;*/
    position:relative;
    float:left;
    width:580px;
    height : 120px;
    /*padding-left:25px;
    padding-right:15px;
    z-index:500;*/
    /*background-color:yellow; /*Pr voir le frontier de ce div*/
    background-image:url(../Images/photo1.jpg);
}
#menuhaut1
{
position:relative;
float:left;
width:600px;
height :120px;
margin:0px;
border:0px;
padding:0px;
}
#menuhaut2
{
position:relative;
float:left;
width:600px;
height :30px;
margin:0px;
border:0px;
padding:0px;
}
#menuhaut2 ul {
 margin:0;
 padding:0;
 border:0px;
 list-style:none;
    }
#menuhaut2 li {
 float:left;
 margin:0;
 border:0px;
 padding:0;
 width:100px;
 height :30px;
}
#menuhaut2 a {
 display:block; /* on change le type d'élément, les liens deviennent des balises de type block */
 padding : 0; /* aucune marge intérieure */
 background : #34750E;  /* couleur de fond */    
 color : #fff; /* couleur du texte */
 text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
 width : 100px; /* largeur */
}
/****************************/
/* 	début menu	déroulant	*/
/****************************/
ul, li {
list-style-type:none;
}
 
#menu {
width:490px;
height:5px;
margin: 0px;
padding: 0px;
background-color:transparent;
}
/*chaque sous-menu*/
#menu ul li {
margin: 0px;
padding: 0px;
position:relative;
width:110px;
height:15px;
/*background-color:#6495ED;*/
background-color:transparent;
float:right;
/*width:120px;*/
cursor:pointer;
display:block;
background:none;
/*height:22px;*/
/*top:22px;*/
}
 
/*carré déroulant sous un sous-menu niveau 1*/
#menu ul li ul {
display:none;
position:absolute;
float:left;
/*width:125px;*/
border:0px solid #009900;  /* pour trace un carre autour du menu*/
/*border-top:none;
top:22px;
left:0;*/
/*position:relative;*/
width:110px;
height:25px;
top:0px;
left:0;
margin: 0px;
padding: 0px;
background-color:transparent;
}
 
#menu ul li ul li {
/*height:100%;*/
width:110px;
height:25px;
top:0px; 
left:30px;  /*pour deplacer vers la droit de 30px*/
float:left;
margin: 0px;
padding: 0px;
}
 
#menu ul li ul li a {
color:#009900;
font-size:11px;
font-weight:normal;
display:block;
height:100%;
border-top:0px solid #009900;
margin: 13px;
padding: 0px;
}
 
/*au passage de la souris on inverse les couleurs de la case*/
#menu ul li ul li a:hover {
color:#009900;
background:#EEFFEE;
margin: 13px;
padding: 0px;
}
 
/*décalage des sous-menu niveau 2 vers la droite*/
#menu ul li ul li ul {
top:0px;
margin: 13px;
padding: 0px;
/*left:120px;*/
}
 
/*décalage du sous-menu niveau 2 le plus à droite vers la gauche*/
#menu ul li ul li ul.dernier {
left:-127px;
}
#formRH {
font-size:14px;
font-family: sans-serif;
background-color: #f1f1f1;
}

/*Pour utilise ce css dans html, utilise : <a href="something" class="button1">Button</a>*/
a.button1{
 display:inline-block;
 padding:0.35em 1.2em;
 border:0.1em solid #FFFFFF;
 margin:0 0.3em 0.3em 0;
 border-radius:0.12em;
 box-sizing: border-box;
 text-decoration:none;
 font-family:'Roboto',sans-serif;
 font-weight:300;
 color:#FFFFFF;
 text-align:center;
 transition: all 0.2s;
}
a.button1:hover{
 color:#000000;
 background-color:#FFFFFF;
}
@media all and (max-width:30em){
 a.button1{
  display:block;
  margin:0.4em auto;
 }
}