/****************************************************
*	Définition des couleurs et tailles de caractères
******************************************************/

/* violet foncé / clair /  Tres clair = #52095A / #C2A9D0
* new - #2B042F / #B19CC9 / #EFDFFF   
* new2 : #600969 / #B19CC9  / #F5E0FF
* new 3: #56085E
* new 4 : #3e0b4e
*/
/* A657AF un peu différent... à voir  */
/**************************************************** 
*				Entête avec menu déroulant
******************************************************/

/* Carré au dessus du menu sélectionné */
#menu div				{	/*background:linear-gradient( #B19CC9 10%, #3e0b4e );  */ 
							border-bottom : 0px solid #3e0b4e;
							
							background: #b19cc9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxMCUiIHN0b3AtY29sb3I9IiNiMTljYzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjM2UwYjRlIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
background: -moz-linear-gradient(top,  #b19cc9 10%, #3e0b4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(10%,#b19cc9), color-stop(100%,#3e0b4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b19cc9 10%,#3e0b4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b19cc9 10%,#3e0b4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b19cc9 10%,#3e0b4e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b19cc9 10%,#3e0b4e 100%); /* W3C */
}
					
					/********* TRANSITION CARRE MENU HOVER ********************/
					#menu div{
						  /* mouse out = hide */
							opacity:0;
							transition: opacity .2s ease-out .3s;
						}
					#menu > li:hover div{
							/* Transition on Mouse hover => mise en evidence du carré*/
							 transition: opacity .5s ease-out .1s;
							 opacity:1;
						}
					

/* Anulation de l'effet pour le séparateur */
#menu .separator div	{	background:none;   }
/* carré visible pour élément sélectionné */
#menu .menu_selected  div	{	opacity:1;	}	

					
/* Liens principal dans le menu */
#menu a 	{	font-variant:small-caps;	
			text-decoration : none;}
										
#menu a.lienMenu	 				{	font-size : 15px;
									color : #3e0b4e;		/* menu ecrit violet foncé sur blanc par défaut */							
									border-radius: 0px 0px 4px 4px;	
									//border :  0px solid #3e0b4e;
									}	
/* Lien qd menu sélectionné - idem darkBack*/
#menu .menu_selected > a.lienMenu{	color : white;	
									background-color : #3e0b4e;		/* menu:selected violet foncé */
									cursor : default;
									margin-top : -1px;	/* Pour éviter un trait blanc sous IOS */
									}  
/* Lien au survol de la souris - idem */								
#menu > li:hover a.lienMenu		{	color : white;	
									background-color : #3e0b4e;	 /* menu:hover violet foncé */
									margin-top : -1px;	/* Pour éviter un trait blanc sous IOS */
									}  
					
					/********* TRANSITION LIEN MENU HOVER ********************/
					#menu a.lienMenu	 {	
									transition: all .3s ease-out .3s;
								}
					#menu > li:hover a.lienMenu	{	
									transition: all .1s ease-out .0s;
								}
/* séparateur de meme police et couleur claire*/
#menu .separator span			{	color : #B19CC9;	/* gris clair */
									font-size : 15px;	 }
									
					
/* Liens dans sous-menu - color géré par darkBack */
	#menu .sousMenu  a			{	font-size : 14px;	
									font-weight : normal;}
/* Affichage des puces au survol sous menu */
#menu ul.sousMenu  img 			{	opacity : 0; }
#menu ul.sousMenu  > li:hover img  	{	opacity : 1; }


/* Mise en forme sous menu */
#menu ul.sousMenu 				{	box-shadow: 4px 4px 0px #B19CC9; 
									border-radius: 5px;}										
/* trait de séparation horizontal dans sous menu */
#menu ul.sousMenu  > li				{	border-bottom : 1px solid; 	/* séparateur */
									border-color : #B19CC9; }	/* gris clair */
#menu ul.sousMenu  > li:first-child	{	margin-top : 12px;	 }
#menu ul.sousMenu  > li:last-child	{	margin-bottom : 12px;
									border-bottom : none; }



/****************************************************
*						Slogans
******************************************************/
/* Texte slogan*/
#sloganShow  p		{	color : #B19CC9;   /* violet clair logo */
						font-size : 40px;  	}
#sloganShow  p.small		{	padding-top : 5px;		/* si slogan trop long */
							font-size : 38px;  	}
#sloganShow  p.smaller		{	padding-top : 5px;		/* si slogan trop long */
							font-size : 34px;  	}
#sloganShow > div	{	background : white; } /* couleur fond général pour eviter superposition*/	

/****************************************************
*		        Resumés = accès pages internes
*                     Bandeau Violet
******************************************************/
#section_resume .mainContainer	{	padding-bottom :40px;
}

#section_resume p				{	font-size : 13px;  /* Texte plus grand dans bandeau */
									text-align : left;}

#section_resume b			{	font-size : 14px;  /* Texte plus grand en gras */ 
								}
									
/****************************************************
*		   BICOME
******************************************************/
#bicome		{ 	background: #b19cc9; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IxOWNjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjM1JSIgc3RvcC1jb2xvcj0iI2IxOWNjOSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk0JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjExMCUiIHN0b3AtY29sb3I9IiNiMTljYzkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(left,  #b19cc9 0%, #b19cc9 35%, #ffffff 60%, #ffffff 94%, #b19cc9 110%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#b19cc9), color-stop(35%,#b19cc9), color-stop(60%,#ffffff), color-stop(94%,#ffffff), color-stop(110%,#b19cc9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left,  #b19cc9 0%,#b19cc9 35%,#ffffff 60%,#ffffff 94%,#b19cc9 110%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left,  #b19cc9 0%,#b19cc9 35%,#ffffff 60%,#ffffff 94%,#b19cc9 110%); /* Opera 11.10+ */
background: -ms-linear-gradient(left,  #b19cc9 0%,#b19cc9 35%,#ffffff 60%,#ffffff 94%,#b19cc9 110%); /* IE10+ */
background: linear-gradient(to right,  #b19cc9 0%,#b19cc9 35%,#ffffff 60%,#ffffff 94%,#b19cc9 110%); /* W3C */

}




#logoBicome	{	background : white;
}

/****************************************************
*		  Section Actualités
******************************************************/
#actualites .titre				{	font-size : 15px;
								color: #B19CC9;
								font-weight: bold;}	/* titre actu = +1*/



						
#allActusLink a	{	font-size : 18px;   /* titre all actus = +3 */
					font-variant:small-caps;
					margin-left : 20px;}	
					
#actuPartieCachee	{	display : none;}	

#actuPartieCachee.display	{	display : block;}	

/* images sur fond blanc a afficher sur liens */
#imagesActus > div	{
			display : none;
			width : 1024px;
}

#imagesActusimg	{
			width : 1024px;
}
/* Partie blanche = conteneur d'une fiche */
#imagesActus { 
			position:fixed;	
			z-index:100;
			display : none;
}
					
					
/****************************************************
*		     Retour en debut de page
******************************************************/
#goUp		{	font-family : Arial;
				background : #B19CC9;
				border-radius : 4px;
				padding : 15px;
				opacity : 0.8;	}
				
#goUp		{
				/* transition on mouse out */
				transition: background .2s ease-out .1s;}
#goUp:hover	{	background : #3e0b4e;
				/* transition on mouse hover */
				transition: background .6s ease-out .3s;}


/****************************************************
*		     Historique
******************************************************/
#historique .date{		font-size : 26px;	/* taille dates histo */
						color : #3e0b4e;	/* violet foncé pour date histo */
						background: white
				}
#ligneVerticale{		width : 10px;
						background:#3e0b4e; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZTBiNGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top,  #ffffff 0%, #3e0b4e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#3e0b4e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #ffffff 0%,#3e0b4e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #ffffff 0%,#3e0b4e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #ffffff 0%,#3e0b4e 100%); /* IE10+ */
background: linear-gradient(to bottom,  #ffffff 0%,#3e0b4e 100%); /* W3C */

}

#historique li	{	width : 78%; /* idem .container40 div.span100 p */
					float : right;
					
}

#historique 	{	text-align : left;
}

#historique b.titre	{	display : block;
						padding-top : 5px;
						padding-bottom : 5px;
						border-top : 1px solid #B19CC9;
						border-bottom : 1px solid #B19CC9;
						color : #3e0b4e;
						margin-bottom : 10px;
						text-align : left;
}
		
/****************************************************
*		     Contact
******************************************************/		


#contact p	{			font-size : 12px;}

/****************************************************
*		     Compétences
******************************************************/	
/* tooltip si on ne clique pas au bon endroit de la spirale */
.tooltip{
		color : white;
		font-weight : bold;
		margin-left:-90px;
		margin-top:10px;
		padding:8px;
		border:1px solid white;
		background-color:#3e0b4e;
		opacity : 0.8;
		position: absolute;
		text-align : center;
		z-index: 99;
	}
	
	
#competences	{
	border-top : 4px solid white;
	height : 430px;
}


#titreCompetences	{
	padding-top:15px;
	padding-bottom:15px;
}

#menuCompetences	{
	position : absolute;
	z-index:91;
	margin-top:65px;
	
}

#menuCompetences a	{
	outline : none;	   /* pas d'encadrement à la selection */
	display : block;
	height : 20px;
	margin-top:18px;
	text-decoration : none;	
	font-variant:small-caps;
}

#menuCompetences ul	{
	list-style-position: outside;
}
	
	
#menuCompetences li	{
	font-size : 16px;
	font-weight : bold;
}
#menuCompetences li:hover	{
	list-style-type: square;
	font-size : 18px;
}

#menuCompetences li.select,
#menuCompetences li.selectedNoFlash,
#menuCompetences li.selectedNoJavascript{
	list-style-type: square;
	font-weight : bold;
	font-size : 18px;
}



/** Fenetres modales competences */


/* Partie blanche = conteneur d'une fiche */
#modalPopupCompetences .window { 

						display:none;
						position:absolute;
						margin-top : 10px;
						margin-left : 300px;	/* pour aligner à droite en max-width */
					  width:640px;
					  height:390px;
					  z-index:100;
						  
					background-position: -5px -5px;
					  border : 5px solid #B19CC9;
					}

#modalPopupCompetences .displayNoJavascript {  display:block; }
#modalPopupCompetences .display {  display:block; }	
				
#competenceModal0.window	{background-color: #B19CC9;
}
					
/* Bouton suivant fenetres modales */
#modalPopupCompetences .window .suiv	{	position : absolute;
										right : 0px;
										top : 183px;
										background-image: url('../images/next_modal.png');
										height: 35px;
										width: 35px;
}
/* Bouton precedent fenetres modales */
#modalPopupCompetences .window .prev	{	position : absolute;
										left : 0px;
										top : 183px;
										background-image: url('../images/prev_modal.png');
										height: 35px;
										width: 35px;
}

#modalPopupCompetences .window .suiv:hover	{	background-image: url('../images/nextOver_modal.png');}
#modalPopupCompetences .window .prev:hover	{	background-image: url('../images/prevOver_modal.png');}



/* Infos en dessous l'image */
#modalPopupCompetences .window  .info{
					position : absolute;
					bottom : 0px;
					width : 600px;
					background-color : rgba(177,156,201,0.9);   /* medium violet */
					padding : 20px 10px 20px 30px;
					color : black;
					
					
}

#modalPopupCompetences .opaque{
					background-color : rgba(177,156,201,0.9);   /* medium violet un peu plus opaque */
					
					
}

#modalPopupCompetences ul{
	List-Style-Type: Square;
	list-style-position: outside;
	margin-left: 20px;
    padding-left: 0;
}



#modalPopupCompetences .textFirst > li{
	margin-left : 20px;
}


/* spirale 3d */
#Div3DSpiralGalleryFX	{	
	
	
	/** Div3DSpiralGalleryFX = maskForSpiral */
	position:absolute;
	width : 650px;
	height : 400px;
	margin-top : 10px;
	margin-left : 290px;	/* pour aligner à droite en max-width */
	/************/
	
	z-index:90;
	outline : none;	   /* pas d'encadrement à la selection */

}

.maskForSpiral	{
	/** Div3DSpiralGalleryFX = maskForSpiral */
	position:absolute;
	margin-top : 10px;
	margin-left : 290px;	/* pour aligner à droite en max-width */
	/************/
	
	background : none;
	opacity : 0.5;	
	z-index:97;
	cursor: default;
}


/**
 Masque permettant d'empecher la spirale de tourner trop vite
 LE = Largeur empty = zone au centre = 250
 H = hauteur anim 
 W = Largeur anim
 LF = Largeur fleche = 40 (35+5)
 LC = Largeur bouton close
 MT = Margin-top anim
 ML = Margin left anim
 Les elements à préserver sont les fleches de navigation gauche / droite et le bouton close
*/

#mask1	{
	width : 40px;	/* > largeur fleche gauche */
	height : 183px;   /* H/2 - LF/2 */
}

#mask2	{
	margin-top : 227px;   /* MT + H/2 + LF/2 */
	width : 40px;	/* > largeur fleche gauche */
	height : 183px;   /* idem mask1 */
}

#mask3	{
	margin-left : 330px; /* ML + LF */
	width : 160px;	/* W/2 - LE/2 - LF/2 */
	height : 400px;   /* H */
}

#mask4	{
	margin-left : 740px; /* ML + W/2 + LE/2 */
	width : 160px;	/* idem mask3 avec LE - LC */
	height : 400px;   /* idem mask3 */
}

#mask5	{
	margin-top : 50px;  /* MT - LC */
	margin-left :  900px;  /* ML + W - LF/2 */
	width : 35px;	/* > largeur fleche gauche */
	height : 143px;   /* idem mask1 - LC*/
}

#mask6	{
	margin-left :  900px;  /* idem mask5  */
	margin-top : 227px;   /* idem mask2 */
	width : 40px;	/* idem mask2 */
	height : 183px;   /*idem mask2 */
}

.maskForSpiral	{
	/** Div3DSpiralGalleryFX = maskForSpiral */
	position:absolute;
	margin-top : 10px;
	margin-left : 290px;	/* pour aligner à droite en max-width */
	/************/
	
	background : white;
	opacity : 0.0;	
	z-index:97;
	cursor: default;
}
/****************************************************
*		     Références
******************************************************/	

/* filtre grisé lors de la consultation d'une fiche */
#mask {	  position:absolute;
		  z-index:90;
		  background-color:black;
		  display:none;
}

#mask.white	{	background-color : white;}


/* Bouton en bas de popup */
#modalPopup  .listButton	{	position : absolute;
							bottom : 20px;
							margin-left:-100px;
							left : 50%;
}

/* les textes */
#modalPopup .window  span	{	display : block;}

/* Partie blanche = conteneur d'une fiche */
#modalPopup .window {  display:none;
					  position:fixed;
					  width:910px;
					  height:570px;		/* hauteur par défaut de la popup references */
					  z-index:100;
					  background-color:white;
					  padding-left :  20px;}


/* SI NOSCRIPT, on force l'affichage de l'id selectionné - surcharge .window */		

#modalPopup.displayEnabled	{
			position : absolute;
			margin-top : 190px;
			z-index : 100;
			background-color : white;
			width : 100%;
			height : 1200px;
}			  
#modalPopup.displayEnabled .display {  
									   display : block;
										position : relative;
										margin : auto;
										  }
					  
/* Definition des popups nécessitant d'être allongées => a adapter en fonction de la taille du texte 
Default = 570px*/					  
#fiche1.window	{	height:620px;  }
#fiche2.window	{	height:580px;  }
#fiche5.window	{	height:660px;  }
#fiche6.window	{	height:720px;  }
#fiche8.window	{	height:760px;  }
#fiche9.window	{	height:650px;  }

/* Bouton close fenetres modales partagé par compétences et references*/
 .window .close	{	position : absolute;
					right : 0px;
					top : 0px;
					background-image: url('../images/close.png');
					height: 35px;
					width: 35px;
}

 .window .close:hover	{	background-image: url('../images/closeOver.png');}

/* Conteneur du title avec hauteur fixe */
#modalPopup .titre	{	padding-top : 20px;
						height : 60px;}

						
/* Infos à droite de l'image */
#modalPopup .info{	text-align : center;
					position : absolute;
					right : 0px;
					top : 85px;  /* height + padding top de titre */
					width : 350px;
}

/* Pour centrer aproximativement les infos à droite de l'image*/
#modalPopup .space4{	margin-top : 60px;
}
#modalPopup .space5{	margin-top : 30px;
}


#modalPopup .info p	{	padding-bottom : 10px;}

#modalPopup  .info b	{	font-size : 11px;
						color : #3e0b4e; /* lien foncé */
}

/* Dexcription sous l'image */
#modalPopup .description	{	padding-right : 20px;}


#modalPopup .description ul	{	List-Style-Type: Square;
								list-style-position: outside;
								margin-left: 0px;
								padding-left: 20px;							
}
#modalPopup .description li	{	margin : 10px;	}
#modalPopup .description span	{	margin-left : 20px;	}