/*
Bleu R : 3, V : 94, B 165
Vert : R : 0, V : 147, B 69

*/

/* vertical align : bottom est utilisé pour que les trois blocs qui sont entre eux en inline soient sur la m ême hauteur */

/* CSS DU FOOTER */

footer {
margin-left: 400px;/*
margin-right: 12.5%;*/
margin-top:80px;
height:30px;
position:absolute;
bottom:0;
left:0;
background:whitesmoke;
border-top:10px;
text-align:center;
font-size:22px;
font-style:italic ;
position:fixed;/*
border-top:1px solid black;
border-right:1px solid black;
border-left:1px solid black;*/

}
	footer p{
	display:inline;
	margin-right:0px;
	font-size:16px;
	}
	
	footer p a{
	text-decoration:none;
	color:black;
	}
/* CSS GENERAL DU SITE */
html {
margin-left:15%;
/*margin-right:10%; supprimé pour régler le probl ème de compatibilité résolution*/ 
background-color:none;
font-family:"Calibri";
}
p{
font-size:20px;
margin-left:250px;
margin-right:200px;
}
li{
font-size:20px;
list-style-image:url(../img/puce_bonhomme.gif);
margin-left:255px;
}
h3{
margin-left:200px;
}
h4{
color:rgb(3,94,165);
font-size:28px;
margin-left:250px;
}
#menu, #menu ul 
{
 padding : 0; 
 margin : 0; 
 list-style : none; 
 line-height : 35px; 
 text-align : center; 	
}
#menu 
{
		position:absolute;
		margin-left:5%;
 font-weight : bold; 
 font-family : Calibri; 
 font-size : 12px; 
		z-index:5;
}

#menu a 
{
 display : block; 
 padding-left : 15px; 
 padding-right : 15px; 
		background-color:white; /* A changer si l'on souhaite modifier la couleur du menu (sous-menu*/
 color : black; 
 text-decoration : none; 
 width : auto; /* taille des menus */
		font-size: 16px;
		background-repeat:repeat;
		border-bottom-color:lightblue; 
		border-bottom-width:2px;
		border-bottom-style:solid;
}
	#page_actuelle{ 
	border-bottom-color:rgb(3,94,165); 
	border-bottom-width:2px;
	border-bottom-style:solid;
	}
#menu li 
{ 
 float : left; 
 /* pour IE */
 border-right : 1px solid #fff; 
		list-style:none;
		margin:0; /* pour contrecarer la zone image fil rouge */
		font-weight: normal;
}

/* IE */
html>body #menu li
{
 border-right: 1px solid transparent ; 
}
#menu li ul 
{ 
 position: absolute; 
 width: 250px;
 left: -999em; 
}
#menu li ul li 
{
 /* pour IE */
 border-top : 1px solid #fff; 
}
/* IE */
html>body #menu li ul li 
{
 border-top : 1px solid transparent; 
		
}
#menu li ul ul 
{
 margin : -22px 0 0 144px ; 
 /* pour IE */
 border-left : 1px solid #fff ;
}
#menu ul li ul a{
text-align:left;
text-indent:20px;
width:250px;
padding:0;
}
/* IE */
html>body #menu li ul ul 
{
 border-left : 1px solid transparent ; 
}
#menu a:hover /* Lorsque la souris passe sur un des liens */ 
{


		color: black; 
		text-decoration:underline;

}
#menu li:hover ul ul, #menu li.sfhover ul ul /* Lorsque la souris passe sur un élément de liste */
{
 left: -999em; /* On dégage les sous-sous-listes du champs de vision */
}
#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste et sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
 left: auto; 
 min-height: 0; /* IE */
}



/* CSS pour la mise en forme trait rouge + image */
body {
 /*border-left: thick solid #ff0000; Ancienne méthode pour obtenir une ligne rouge vertical, ne prenait pas toute la page */
	background: url('../img/patern_ligne_rouge.jpg') 0 0 repeat-y;
}
.image_ligne_rouge1{
margin-left:-100px;
margin-bottom:50px;/*
margin-top:25px;*/
margin-top:125px;
float:left;
}
	.image_ligne_rouge2{
	margin-left:-100px;
	margin-bottom:50px;
	margin-top:125px;
	float:left;
	}
		.image_ligne_rouge3{
		margin-left:-100px;
		margin-bottom:50px;
		margin-top:225px;
		float:left;
		}
			.image_ligne_rouge4{
			margin-left:-100px;
			margin-bottom:50px;
			margin-top:375px;
			float:left;
			}
				.image_ligne_rouge5{
				margin-left:-100px;
				margin-bottom:380px; /* à modifier pour pouvoir faire en sorte que tous les élements de la page ne se décallent pas apr ès être passés en dessous du niveau de l'image*/
				margin-top:425px;
				float:left;
				}





/* CSS CONCERNANT LE JAVASCRIPT */

	#toggle1{
	vertical-align: top;
	height:auto;
	width:300px;
	background-image:linear-gradient(to top, white , lightgrey );
	border:2px solid rgb(3,94,165);
	border-top:8px solid chocolate;
	display:inline-block;
	}/* Padding bottom pour contrecarer le auto de la taille */
	
	#toggle1 p{text-align:left;padding:0px 8px 0px 8px;margin-left:0px;margin-right:0px;font-size:16px;}
	#toggle1 ul{padding-left:8px;}
	#toggle1 li{margin-left:20px;padding:0px 8px 0px 8px;font-size:16px;list-style:disc;}
	#toggle1 h2{text-align:center;}

	#toggle2{
	vertical-align:top;
	height:auto;
	width:300px;
	display:inline-block;
	background-image:linear-gradient(to top, white , lightgrey );
	border:2px solid rgb(3,94,165);
	border-top:8px solid rgb(3,94,165);
	}
	#toggle2 p{text-align:left;padding:0px 8px 0px 8px;margin-left:0px;margin-right:0px;font-size:16px;}
	#toggle2 ul{padding-left:8px;}
	#toggle2 li{margin-left:20px;padding:0px 8px 0px 8px;font-size:16px;list-style:disc;}
	#toggle2 h2{text-align:center;}

	#toggle3{
	vertical-align:top;
	height:auto;
	width:300px;
	display:inline-block;
	background-image:linear-gradient(to top, white , lightgrey );
	border:2px solid rgb(3,94,165);
	border-top:8px solid seagreen;
	}
	#toggle3 p{text-align:left;padding:0px 8px 0px 8px;margin-left:0px;margin-right:0px;font-size:16px;}
	#toggle3 ul{padding-left:8px;}
	#toggle3 li{margin-left:20px;padding:0px 8px 0px 8px;font-size:16px;list-style:disc;}
	#toggle3 h2{text-align:center;}
	
	#toggler1{padding:0; margin-left:100px;}
	#toggler2{padding:0; margin-left:-15px;}
	#toggler3{padding:0; margin-left:-20px;}
	
	
	
	
	
	#texte_php_portrait{
 display: block;
 position: relative;
 margin: 0 auto;
	background: -webkit-gradient(linear, left bottom, left top, from(#E5CF33), to(#FAE139));
	background: -moz-linear-gradient(bottom, #E5CF33, #FAE139);
	width : 500px;
	height:auto;
	margin-left:250px;
	padding:8px 8px 8px 8px;
	-moz-box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
	box-shadow: 0pt 2px 1px rgba(0, 0, 0, 0.2), -2px 1px 1px rgba(0, 0, 0, 0.1);
	z-index:0;
}
#texte_php_portrait:before{
content: "";
position: absolute;
right: 0px;
border-color: #FFF #FFF #E5CF33 #E5CF33;
border-style: solid;
border-width: 0px 35px 35px 0px;
height: 0px;
width: 0px;
display: block;
margin-top:-8px;
}
	#texte_php_portrait li{
		margin-left:0px;
		list-style:disc;
	}
		#texte_php_portrait p{
			margin-left:8px;
			margin-right:8px;
		}
	
.credits p{
font-size:16px;
}	



	
	
	#post_it{margin-left:140px;}	
	#post_it ul li{list-style:disc;text-align:left;}
	
	#post_it li{display:inline-block;margin:0px;font-size:14px;list-style:disc;}
		#post_it li h5{position:absolute;width:600px;margin-left:-200px;margin-right:20px;text-align:center;font-size:28px;padding:0px;} /* titre des post it*/
		#post_it li h6{position:absolute;width:200px;margin-left:20px;margin-right:20px;margin-top:20px;text-align:left;font-size:18px;padding:0px;} /* contenu des post it */
		#post_it li h6 ul li{margin-left:-25px;} /* listes dans les post it h6 */
	
	#post_it1 .avant1{font-family: Bradley Hand ITC; }
	#post_it2 .avant2{font-family: Bradley Hand ITC; }
	#post_it3 .avant3{font-family: Bradley Hand ITC; }
	#post_it4 .avant4{font-family: Bradley Hand ITC; }
	#post_it5 .avant5{font-family: Bradley Hand ITC; }
	#post_it6 .avant6{font-family: Bradley Hand ITC; }
	
	#post_it1 .apres1{font-style:normal;
font-weight: normal; }
	#post_it2 .apres2{font-style:normal;
font-weight: normal; }
	#post_it3 .apres3{font-style:normal;
font-weight: normal; }
	#post_it4 .apres4{font-style:normal;
font-weight: normal; }
	#post_it5 .apres5{font-style:normal;
font-weight: normal; }
	#post_it6 .apres6{font-style:normal;
font-weight: normal; }

/* 1 */	#post_it1 .apres1, li #post_it1:hover{
 display : none;
	}
		#post_it1:hover .apres1 {
			display : block;
		}

/* 2 */			
	#post_it2 .apres2, li #post_it2:hover{
 display : none;
	}
		#post_it2:hover .apres2 {
			display : block;
		}
			#post_it2:hover .avant2{
				display:none;
			}
/* 3 */			
	#post_it3 .apres3, .post_it3:hover{
 display : none;
	}
		#post_it3:hover .apres3 {
			display : block;
		}
			#post_it3:hover .avant3{
				display:none;
			}
/* 4 */			
	#post_it4 .apres4, .post_it4:hover{
 display : none;
	}
		#post_it4:hover .apres4 {
			display : block;
		}
			#post_it4:hover .avant4{
				display:none;
			}			
/* 5 */			
	#post_it5 .apres5, .post_it5:hover{
 display : none;
	}
		#post_it5:hover .apres5 {
			display : block;
		}
			#post_it5:hover .avant5{
				display:none;
			}
/* 6 */			
	#post_it6 .apres6, .post_it6:hover{
 display : none;
	}
		#post_it6:hover .apres6 {
			display : block;
		}
			#post_it6:hover .avant6{
				display:none;
			}
	

		
		#mindmap1 {margin-top:400px;border:solid;height:80px; width:180px;margin-left:220px;background-color:cornflowerblue;}
		#mindmap1 p{margin-left:20px;margin-right:0px;}
			
				#mindmap1_1 {margin-top:-300px;border:solid;height:80px; width:220px;margin-left:442px;background-image:linear-gradient(to top, deepskyblue , dodgerblue );}
				#mindmap1_1 p{margin-left:20px;margin-right:0px;}
				#mindmap1_2 {margin-top:50px;border:solid;height:80px; width:220px;margin-left:442px;background-image:linear-gradient(to top, deepskyblue , dodgerblue );}
				#mindmap1_2 p{margin-left:20px;margin-right:0px;}
				
				#mindmap1_3 {margin-top:80px;border:solid;height:80px; width:220px;margin-left:442px;background-image:linear-gradient(to top, steelblue , royalblue );}
				#mindmap1_3 p{margin-left:20px;margin-right:0px;}
				#mindmap1_4 {margin-top:50px;border:solid;height:80px; width:220px;margin-left:442px;background-image:linear-gradient(to top, steelblue , royalblue );}
				#mindmap1_4 p{margin-left:20px;margin-right:0px;}
				
						#mindmap2_1 {margin-top:-530px;border:solid;height:100px; width:200px;margin-left:700px;background-image:linear-gradient(to top, deepskyblue , deepskyblue );}
						#mindmap2_1 p{position:relative;margin-left:20px;height:auto;width:auto;margin-right:0px;}
						#mindmap2_2 {margin-top:32px;border:solid;height:100px; width:200px;margin-left:700px;background-image:linear-gradient(to top, deepskyblue , deepskyblue );}
						#mindmap2_2 p{position:relative;margin-left:20px;height:auto;width:auto;margin-right:0px;}
						
						#mindmap2_3 {margin-top:-225px;border:solid;height:100px; width:240px;margin-left:700px;background-image:linear-gradient(to top, SkyBlue , royalblue );}
						#mindmap2_3 p{margin-top:10px;position:relative;margin-left:20px;height:auto;width:auto;margin-right:0px;}
						#mindmap2_4 {margin-top:20px;border:solid;height:100px; width:240px;margin-left:700px;background-image:linear-gradient(to top, SkyBlue , royalblue );}
						#mindmap2_4 p{margin-top:10px;position:relative;margin-left:20px;height:auto;width:auto;margin-right:0px;}
						
					
								#mindmapA {margin-top:-400px;border:solid;height:400px; width:450px;margin-left:950px;background-color:dodgerblue;}
								#mindmapA p{position:relative;margin-left:20px;height:auto;width:auto;margin-right:0px;}
								#mindmapB {margin-top:-420px;border:solid;height:400px; width:450px;margin-left:1000px;background-color:RoyalBlue;}
								#mindmapB p{position:relative;margin-left:20px;height:auto;width:auto;margin-right:0px;}
								
								
								

								
								 
								
#fadein a img {
 opacity: 0.5;/* l'opacite que vous voulez au depart */
 border: none;/* enlever les border d'une image en lien */
 -ms-filter: "prodig:DXImageTransform.Microsoft.Alpha(Opacity=25)"; /* Hack IE8 */
 filter: alpha(opacity = 25); /* Hack IE 5-7 */
 -webkit-transition: opacity 0.5s ease-in-out;/* transition pour Chrome et Safari */
 -moz-transition: opacity 0.5s ease-in-out;/* transition pour Firefox */
 -o-transition: opacity 0.5s ease-in-out;/* transition pour Opéra */
 transition: opacity 0.5s ease-in-out; /* on écrit cette ligne à la fin de fa çon à ce que ce soit elle qui soit prise en compte lorsque l'attribut transition sera pris en compte par tous les navigateurs */
 
}

 
#fadein a:hover img, #fadein a:focus img {
 opacity: 0.9; /* opacite au survol */
 -ms-filter:"prodig:DXImageTransform.Microsoft.Alpha(Opacity=90)"; /* Hack IE 8 */
 filter: alpha(opacity = 90); /* Hack IE 5-7 */
}
#partenaires li{
margin-bottom:5px;
margin-top:5px;
line-height:20px;
font-size:19px;
font-weight:bold;
list-style:none;	
}
	#partenaires p	{
		margin-bottom:5px;
		margin-top:5px;
		margin-left:270px;
		line-height:20px;
		font-size:19px;
		max-width:480px;
}
		#partenaires img{
		height:125px; 
		width:215px;
		position:absolute;
		margin-left:400px;
		margin-top:-15px;
}

#tuile{
	margin-left:250px;
	position:absolute;
}

	body .tuile_toggle {
	width:350px;
	background-color:#fcde0f; /* Jaune foncé */
	margin-left:600px;
	margin-top:0px;}
	body .tuile_toggler{
	height:150px;
	width:150px;	
	}
	
	body .tuile_toggle p{margin-left:10px;margin-right:10px;}
	body .tuile_toggle li{margin-left:0px;margin-right:0px;}
	body .tuile_toggle .titre_tuile{background-color:#1594d0;height:30px;font-size:25px;text-align:center;} /* #1594d0 = bleu maquette patrick*/
	
	.tuiles_image{margin-left:6px;}

	#cesure_tuile{
	background-color:white;
	height:5px;
	}
	#cesure_tuile_apres{
	background-color:#fcde0f; /* Jaune foncé */
	height:5px;
	}
	


/* --- STICKYNOTES --- */

#stickynotes{
 font-family:arial,sans-serif;
 font-size:100%;
 margin:3em;
}
#stickynotes h2,#stickynotes p{
 font-weight:normal;
 padding:0 0 0 0;
 margin-left:0px;
 margin-right:0px;
 margin-top:0px;
 margin-bottom:5px;
 font-family:"Reenie Beanie",andalus,aharoni, arial,sans-serif;
 font-size:75%;
}
#stickynotes p{
font-family:"Baskerville Old Face","Bodoni MT",andalus,aharoni, arial,sans-serif;
}
#stickynotes ul{
 overflow:hidden;
 padding:3em;
 list-style:none;
 margin:1em;
}
#stickynotes li{
 list-style:none;
 margin:1em;
 float:left;
}
#stickynotes ul li a{
 text-decoration:none;
 color:#000;
 background:#ffc;
 display:block;
 height:10em;
 width:10em;
 padding:1em;
 -moz-box-shadow:5px 5px 7px rgba(33,33,33,1);
 -webkit-box-shadow: 5px 5px 7px rgba(33,33,33,.7);
 box-shadow: 5px 5px 7px rgba(33,33,33,.7);
 -moz-transition:-moz-transform .15s linear;
 -o-transition:-o-transform .15s linear;
 -webkit-transition:-webkit-transform .15s linear;
 -webkit-transform: rotate(-6deg);
 -o-transform: rotate(-6deg);
 -moz-transform:rotate(-6deg);
}

#stickynotes ul li h2{
 font-size:140%;
 font-weight:bold;
 padding-bottom:10px;
}
#stickynotes ul li p{
 font-family:"Reenie Beanie",andalus,aharoni, arial,sans-serif;
 font-size:75%;
 text-align:left;
}

#stickynotes ul li:nth-child(even) a{
 -o-transform:rotate(4deg);
 -webkit-transform:rotate(4deg);
 -moz-transform:rotate(4deg);
 position:relative;
 top:5px;
 background:#cfc;
}
#stickynotes ul li:nth-child(3n) a{
 -o-transform:rotate(-3deg);
 -webkit-transform:rotate(-3deg);
 -moz-transform:rotate(-3deg);
 position:relative;
 top:-5px;
 background:#ccf;
}
#stickynotes ul li:nth-child(5n) a{
 -o-transform:rotate(5deg);
 -webkit-transform:rotate(5deg);
 -moz-transform:rotate(5deg);
 position:relative;
 top:-10px;
 
 
 
}
#stickynotes ul li a:hover,#stickynotes ul li a:focus{
 box-shadow:10px 10px 7px rgba(0,0,0,.7);
 -moz-box-shadow:10px 10px 7px rgba(0,0,0,.7);
 -webkit-box-shadow: 10px 10px 7px rgba(0,0,0,.7);
 -webkit-transform: scale(1.6);
 -moz-transform: scale(1.6);
 -o-transform: scale(1.6);
 position:relative;
 z-index:5;
}
#stickynotes ul{text-align:left;}
#stickynotes ul li{display:block;padding-right:1em;}
#stickynotes ul li a{color:black;}
#stickynotes ul li a ul{margin-bottom: -55px;
width:100%;margin-top: -60px;margin-left: -45px;
font-family: "Reenie Beanie",andalus,aharoni, arial,sans-serif;}


#stickynotes ul li a ul li{
	font-size:12px;width:100%;margin:1px;display: list-item;list-style-type:disc;
}

/*----------------------------------------------
Contact Pop-Up
------------------------------------------------*/
#image_contact{
	margin-left:45px;
}
#abc #coordonnees2{
	border: none;
	margin-left: 375px;
    margin-top: -215px;
}

#abc {
width:100%;
height:100%;
opacity:.95;
top:0;
left:0;
display:none;
position:fixed;
background-color:#313131;
overflow:auto;
z-index:50;
}
#abc img#close {
position:absolute;
right:-14px;
top:-14px;
cursor:pointer;
}
#abc div#popupContact {
position:absolute;
left:33%;
top:5%;
font-family:'Raleway',sans-serif;
}
#abc form {
max-width:800px;
min-width:250px;
padding:10px 50px;
border:2px solid gray;
border-radius:10px;
font-family:raleway;
background-color:#fff;
}
#abc #form p{font-size:11px;line-height:5px;padding:8px 0 0 0;margin:0;}
#abc p {
margin-top:30px;
}
#abc h2 {
background-color:#FEFFED;
padding:20px 35px;
margin:-10px -50px;
text-align:center;
border-radius:10px 10px 0 0;
}
#abc hr {
margin:10px -50px;
border:0;
border-top:1px solid #ccc;
}
#abc input[type=text], #abc input[type=email] , #abc input[type=tel]  {
width:300px;
padding:10px;
margin-top:10px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
}

input:invalid {
  border: 2px solid red;
    border-radius: 4px;
}

input:valid {
  border: 2px solid green;
    border-radius: springgreen;
}
#abc input[type=text]:focus ,#abc input[type=email]:focus ,#abc input[type=tel]:focus{
    background-color: lightblue;
	border: 1px solid #555;
	color:slategrey;
}
#abc #mail {
background-image:url(../img/contact/email.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
}
#abc #nom {
background-image:url(../img/contact/name.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
}
#abc #telephone {
background-image:url(../img/contact/mobile.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
}
#abc #organisation {
background-image:url(../img/contact/organisation.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
}
#abc #ville {
background-image:url(../img/contact/ville.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
}
#abc #pays {
background-image:url(../img/contact/pays.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
}

#abc textarea {
background-image:url(../img/contact/msg.png);
background-repeat:no-repeat;
background-position: 3px 3px;
background-size: 33px;
width:93%;
height:120px;
padding:10px;
resize:none;
margin-top:30px;
border:1px solid #ccc;
padding-left:40px;
font-size:16px;
font-family:raleway;
margin-bottom:30px;
}
#abc textarea:focus{    
	background-color: steelblue;
	border: 1px solid #555;
	color:white;
	}
#abc #submit {
text-decoration:none;
width:100%;
text-align:center;
display:block;
background-color:#FFBC00;
color:#fff;
border:1px solid #FFCB00;
padding:10px 0;
font-size:20px;
cursor:pointer;
border-radius:5px;
}
#abc span {
color:red;
font-weight:700;
}
#button_popup_contact {
width:10%;
height:45px;
border-radius:3px;
background-color:#cd853f;
color:#fff;
font-family:'Raleway',sans-serif;
font-size:18px;
cursor:pointer;
}
/* CONTACT */
#abc label{
display:none;
}