/* mise en forme du modele livret accueil */

#bloc_page {
	width:1110px;	
	margin:auto;
	margin-top:15px;		
	display:flex;
	position:relative;
	font-family:"Comic Sans Ms" ,sans-serif;
}


/* Couleur des elements orange */

#boxorange ,#orangevertleft,#orangevertmiddle,#orangevertright {
	background-color: rgb(249,134,7);
}


/* Couleur des elements verts */

#greenhortop,#greenhortop1,#greenhormiddle ,#greenhormiddle2, #greenhorbottom {
	background-color: rgb(163,201,25);
}



#boxorange {
	width: 170px;
	height: 710px;
	left:0;
	position:relative;
	
}



#boxorange h2 {
	transform-origin: right bottom 0;
	transform: rotate(270deg);
	letter-spacing: 20px;
	margin-top:450px;
	position:relative;
	right:50px;
	font-size:45px;
	
	color:white;
	text-transform:UPPERCASE;
	font-family:"Comic Sans Ms", serif;
}



#boxorange p {
	transform-origin: right bottom 0;
	transform: rotate(270deg);
	letter-spacing: 20px;
	margin-top:450px;
	position:relative;
	right:50px;
	font-size:45px;
	font-weight:bold;
	
	color:white;
	text-transform:UPPERCASE;
	font-family:"Comic Sans Ms", serif;
}


#boxorange .floc  {
	position:absolute;
	top:-300px;
	right:10px;
	margin-right:45px;
	font-size:2.5em;
}

#boxorange .pout {
        position:absolute;
	top:-340px;
	right:10px;
	margin-right:45px;
	font-size:2.5em;
}


#boxorange .bous {
        position:absolute;
	top:-360px;
	right:10px;
	margin-right:45px;
	font-size:2.5em;
}


#boxorange .carnot1 {
        position:absolute;
        top:-170px;
        left:-80px;
        margin-right:10px;
        font-size:2.5em;

}

#boxorange .brun {
        position:absolute;
	top:-80px;
	left:-10px;
	margin-right:5px;
	font-size:2.5em;
}

#boxorange .pain {
        position:absolute;
	top:-330px;
	left:-10px;
	margin-right:5px;
	font-size:2.5em;


}


#boxorange .chrs {
        margin-top:220px;

}


#boxorange .reliance {

        margin-top:260px;

}



#boxorange .diablotins {
         margin-top:330px;
}

#boxorange .calin {
        margin-top:350px;
        margin-left: -10px;


}

#boxorange .malin {
        margin-top:-390px;
        margin-left: -10px;


}


/* Barre blanche 
#whitevertleft {
	width:14px;
	 background-color:white;
	height:600px;
	position:absolute;
	left:168px;	
}

*/


/* Rectangles verticaux oranges */

#orangevertleft{
	width:14px;
	
	height:710px;
	position:absolute;
	left:187px; 

}

#orangevertmiddle {
	width:14px;
	
	height:710px;
	position:absolute;
	left:590px; 
}

#orangevertright {
	width:14px;	
	height:710px;
	position:absolute;
	left:1089px;
}



/* Rectangles horizontaux verts */

#greenhortop {
	height:14px;
	
	width:890px;
	position:absolute;
	top:40px;
	left:200px;

}


#greenhortop1 {
	height:14px;
	
	width:389px;
	position:absolute;
	top:172px;
	left:201px;
}

#greenhormiddle {
	height:14px;
	
	width:487px;
	position:absolute;
	top:371px;
	left:603px;
}



#greenhormiddle2 {
	height:14px;
	
	width:222px;
	position:absolute;
	top:590px;
	right:50px;

}


#greenhorbottom {
	height:14px;
	
	width:890px;
	position:absolute;
	top:645px;
	left:200px;
}






#presentation {
	height:120px;
	background-color:rgb(200,201,25);
	width:389px;
	position:absolute;
	top:53px;
	left:201px;
}



#presentation h3 {
	text-align:center;	
	padding-top:5px;
	font-family:Arial,"Comic Sans Ms", sans-serif;
	color: white;
	font-size:25px;
}

#presentation a {
	text-decoration:none;
	color:white;
}

#presentation a:hover {
	text-decoration:none;
	color:rgb(63,165,235);
}


#presentation img {
	padding: 0 90px;
}

#image {
	height:458px;	
	width:390px;
	background-color:  rgb(63,165,235);
	position:absolute;
	top:186px;
	left:201px;

}
#image img {
	height:462px;
	width: 390px;
}

#image #map {
	height:462px;	
	width:390px;
	
	background-color: rgb(63,165,235);
	position:absolute;
	
}







/* Paragraphes hide show */




#cadredroit {
	width:486px;
	height:317px;
	background-color:rgb(63,165,235);
	position:absolute;
	left:604px;
	top:54px;
}






#cadredroit a{
	text-align:center;
	font-size:20px;
	color:white;
	display:block;
	padding:10px;
	text-decoration:none;
}


#cadredroit p {
	text-align:center;
	color:white;
	margin-top:40px;
	font-family: "Arial";
	font-size:20px;

}





/* Descriptif lien acces */




#planacces {
	position:absolute;	
	background-color:rgb(200,201,25);
	width:486px;
	height:261px;
	top:385px;
	left:604px;
	font-family:arial, verdana , sans-serif;
}

#planacces p {
	/* color:rgb(10,60,235); */

	/* text-align:center; */
	padding-top:20px;
	padding-left:5px;
	font-family:arial, verdana , sans-serif;
	font-size:18px;

}

#planacces img {
	width:10%;
	height:10%; 
}

#cadredroit a {
		font-family: Arial, Verdana, sans-serif;
		font-size:18px;
		padding-top:20px;
}

#cadredroit a:hover {
		text-decoration:underline;
}



/* mises en forme du fichier postuler.html */


#image h3 {
	text-align:center;
	padding-top:200px;
}

#image h3 a {
	text-decoration:none;
	color:white;
}

#image a:hover {
	text-decoration:none;
	color: rgb(163,201,25);
}


/* Boutons classes choix */

#boxorange .choix {
  display: inline-block;
  border-radius: 25px;
  background-color: rgb(63,165,235);
  border: none;
  color: #FFFFFF;
  font-size: 15px;
  padding: 40px 6px;

  width: 120px;
  transition: all 0.5s;
  margin:150px 50px 25px 25px; 

 
}


#boxorange .choix span {
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.8s;
}

#boxorange .choix span:after {
  content: '\00bb';
  position: absolute;
  opacity: 0;
  top: 0;
  right: -20px;
  transition: 0.5s;
 
}

#boxorange .choix:hover span {
  padding-right: 25px;

}

#boxorange .choix:hover span:after {
  opacity: 10;
  right: 0;
 
}

#boxorange .choix:hover {
	background-color:rgb(163,201,25)
}


/* Mise en forme page mecsFBP */







/* Menu anterieur 


/* Menu horizontal 




nav {
	margin:auto;
	margin-top:10px;	
	width:990px;
	
}
nav ul {
	list-style:none;
	margin: 0;
    padding: 0;
    overflow:hidden;
}

nav li {
	float:left;
	height:110px;
	width: 112.5px;	
	margin:12px;
	border-radius:25px;
	border:1px solid black;
}

/*nav li a {
	display:block;
   	text-align:center;
    padding: 22px 10px; 
    padding-top:26px;      
    text-decoration:none;
    font-size:13px;
     font-weight:bold; 
    font-family: "Comic Sans Ms", serif;
    color:black;
    transition-duration:0.2s;
    height:65px;

} 


 nav li a {

 	display:block;
   	text-align:center;
    padding: 8px 5px; 
    padding-top:45px;
      
    text-decoration:none;
    font-size:13px;
     font-weight:bold; 
    font-family: "Comic Sans Ms", serif;
    color:black;
    transition-duration:0.1s;
    height:65px;

  }

/* nav li a {
	display:block;
   	text-align:center;
   	margin:auto;
    /*padding: 22px 10px; 
    padding-top:45px;      
    text-decoration:none;
    font-size:13px;
    /* font-weight:bold; 
    font-family: "Comic Sans Ms", serif;
    color:black;
    transition-duration:0.1s;
    height:65px;

} 


nav #syntax  a {
	display:block;
   	text-align:center;
   	margin:auto
    /*padding: 25px 10px;
    padding-top:15px;
    padding:24px 10px;

         
    text-decoration:none;
    font-size:13px;
    /* font-weight:bold; 
    font-family: "Comic Sans Ms", serif;
    color:black;
    transition-duration:0.2s;
    height:65px;
	
}

nav #syntax li {
	float:left;
	height:110px;
	width: 115px;	
	margin:12px;
	border-radius:25px;
	border:1px solid black;
}


/*  Survol bouton vert 

.green {
	background-color: rgb(163,201,25);
	
}


.green a:hover {
	background-color:rgb(63,165,235);
	color:white;
	border-radius:25px;
	

	 /*box-shadow: 0 12px 16px 0 rgba(63,165,235,0.24),0 17px 50px 0 rgb(63,165,235); 
	-webkit-transform: rotate(-4deg) scale(1.1);
	-moz-transform: rotate(-4deg) scale(1.1);
	-o-transform: rotate(-4deg) scale(1.1);

}


/*  Survol bouton bleu 

.blue {
  background-color: rgb(63,165,235);
  
}


.blue a:hover {
	background-color:rgb(163,201,25);
	color:white;
	border-radius:25px;
	
	 /* box-shadow: 0 12px 16px 0 rgba(163,201,25,0.24),0 17px 50px 0 rgb(163,201,25); 
	-webkit-transform: rotate(5deg) scale(1.1);
	-moz-transform: rotate(5deg) scale(1.1);
	-o-transform: rotate(5deg) scale(1.1);
}


#syntax a:hover {
	color:white;
	border-radius:25px;
}
/*  Survol bouton orange 
.orange {
	background-color: rgb(249,134,7);

	
}

.orange a:hover {
   background-color:rgb(249,134,7);
   color:white;
   border-radius:25px;
  
  /* box-shadow: 0 12px 16px 0 rgba(249,134,7,0.24),0 17px 50px 0 rgb(249,134,7); 
  -webkit-transform: rotate(-5deg) scale(1.1);
  -moz-transform: rotate(-5deg) scale(1.1);
  -o-transform: rotate(-5deg) scale(1.1);
}



*/