/*
** IMPORTANT!: ne surtout pas modifier l'ordre de déclaration des styles dans cette feuille :
** la cascades ne marchera plus sinon
*/

/* tags */
	html, body {margin:0;padding:0;}
	body {width:96%;}
	body { background-color:#FFF; color:#000; margin:0; padding:8px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	#content {width:590px;}
	td { font-family: Arial, Helvetica, sans-serif; font-size: 12px; }
	tfoot { font-family: Arial, Helvetica, sans-serif; font-size: 11px; font-weight:normal; font-style:italic; }
	th, h2 { font-size:13px; padding:5px; text-align:left }
	p { margin:15px 0; padding:0; }

/* communs */
	.b , .strong { font-weight:bold } /* le fiches utilisant class=strong, permet des copier/coller sans perte */
	.center { text-align:center }	
	.right { text-align:right }	
	.i { font-style:italic }
	a.haut { float:right }
	a img, a:hover img { text-decoration:none; border:0pt none; border-bottom:1px dashed #FFFFFF; padding-bottom:2px; margin-bottom:2px; } /* enleve la bordure sur les images avec des liens survoles - laisse 1px mais blanc sinon décalage*/ 
	a img { border-bottom:1px dashed #CCDFFF; } /* marque la bordure sur les images avec des liens */ 
	select{ width:100% }

/* tailles (11, 13, 13gras) et couleurs (ciel, noir, red)*/
	.ciel11,  .noir11 , .red11  , .white11, .vert11   { font-size: 11px; }
	.ciel13,  .noir13 , .red13  , .white13, .vert13   { font-size: 13px; font-weight:normal; }
	.ciel13b, .noir13b, .red13b , .white13b, .vert13b { font-size: 13px; font-weight:bold;   }
	
	.ciel11,  .ciel13,  .ciel13b   { color:#39F; }
	.noir11,  .noir13,  .noir13b   { color:#000; }
	.red11,   .red13,   .red13b    { color:#C00; }
	.vert11,  .vert13,  .vert13b   { color:#093; }
	.white11, .white13, .white13b  { color:#FFF; }
	
/* couleurs de polices */
	.noir  { color:#000 }
	.red   { color:#C00 }
	.ciel  { color:#39F }
	.vert  { color:#093 }


/* --- LISTES A PUCE --- */	
	ul {
		margin: 10px 30px;
		padding:0;
	}

		ul li {
			margin-bottom:4px; /* espace chaque li */
		}
		
	/* avec images colorées : fleches et rondes */
	  
	  /* Propriétés communes  */

		ul.ulcielfleche , 
		ul.ulcielrond   ,
		ul.ulvertfleche , 
		ul.ulvertrond   , 
		ul.ulmauvefleche, 
		ul.ulmauverond    {
			list-style: none;
			margin: 10px 30px;
		}
		
			ul.ulcielfleche  li, 
			ul.ulcielrond    li, 
			ul.ulvertfleche  li, 
			ul.ulvertrond    li, 
			ul.ulmauvefleche li, 
			ul.ulmauverond   li  {
				background-position: 0 2px;
				background-repeat: no-repeat;
				margin-bottom:4px; /* espace chaque li */
				padding-left: 16px;
			}
			
	  /* Propriétés spécifiques */
	  
		/* puces ciel */	
			ul.ulcielfleche li {
				background-image: url(1demploi/puces/tribleutrans.gif);
			}
				
			ul.ulcielrond li {
				background-image: url(1demploi/puces/pucerondpetitetransp.gif); padding-left: 12px;
			}
			
		/* puces verte */	
			ul.ulvertfleche li {
				background-image: url(2salarie/puces/triGverttrans.gif);
			}
			ul.ulvertrond li {
				background-image: url(2salarie/puces/rondverttrans.gif); padding-left: 12px;
			}
			
		/* puces mauve */	
			ul.ulmauvefleche li {
				background-image: url(3employeur/puces/trimauvetrans1.gif);
			}
			ul.ulmauverond li {
				background-image: url(3employeur/puces/rondmauvetrans1.gif); padding-left: 12px;
			}
			
	  /* retire l'image pour les listes incrustées */		
		ul.ulcielfleche  ul, 
		ul.ulcielrond    ul,
		ul.ulvertfleche  ul, 
		ul.ulvertrond    ul, 
		ul.ulmauvefleche ul, 
		ul.ulmauverond   ul {
			list-style-type:circle;
		}
		
			ul.ulcielfleche  li li, 
			ul.ulcielrond    li li, 
			ul.ulvertfleche  li li, 
			ul.ulvertrond    li li, 
			ul.ulmauvefleche li li, 
			ul.ulmauverond   li li {
				background-image:none;
				padding-left: 0;
			}
			
  /* retirer les marges sur certaines listes */
	ul.nomargin {
		margin: 10px 10px;	
	}
			

/* fond en couleur de cellules de titre 
   Pour les TH et les H2
*/
	.thbgciel {
		background-color:#71B8FF;/*#5EAEFF;*/
		color: #FFF;
	}
	.thbgmauve {
		background-color:#A2618C;/*#800080*/
		color: #FFF;
	}
	.thbgvert {
		background-color:#8BBE8B;/*#5B8A5B;*/
		color: #FFF;
	}

/* fond de couleur pour differents elements */
	.bgred {
		background-color:#C00;
		color: #FFF;
		font-size: 11px;
		padding:5px;
		text-align:left;
	}
	.bggris {
		background-color:#F7F7F7;
		font-size: 11px;
		padding:5px;
		text-align:left;
	}
	.bgciel {
		background-color:#B0D8FF;/*#A4D1FF;*/
		color: #FFF;
		font-size: 11px;
		padding:5px;
		text-align:left;
	}

	.bgvert {
		background-color:#BBD9BB;/*#B1D8B1;/*#9C9*/
		color: #FFF;
		font-size: 11px;
		padding:5px;
		text-align:left;
	}
	.bgmauve {
		background-color:#CC99CC;/*#C9C;*/
		color: #FFF;
		font-size: 11px;
		padding:5px;
		text-align:left;
	}

	/*redefini les marges sur les puces colorées utilisées dans un encart de couleur */
	.bgciel ul, .bgvert ul, .bgmauve ul, .bgred ul, .bggris ul  { margin:10px 0 5px 0; padding:0; }
	
/* séparateurs horizontaux - HR */

  /* 
  A utiliser comme ceci :
	<div class="hrred"><hr /></div> 
  Pourquoi conserver la hr, et ne pas préférer une div seule ? Même si ça complexifie un peu le code,
  c’est sémantiquement plus correct : n’oubliez pas que dans un navigateur textuel votre hr jouera son rôle de séparateur.
  */
	
  /* noir par defaut */
 	div.hr, 
	div.hrciel,
	div.hrred,
	div.hrvert {
		background-color: #000;
		border: 0;
		color: #000;
		display:block;
		height: 1px;
		margin: 7px 0;
		padding: 0;
	}
	
	div.hr hr, 	
	div.hrciel hr, 
	div.hrred hr,
	div.hrvert hr  {display: none}/* les hr internes sont masqués si css actif, mais apparaissent si css désactivé */
	
  /* separ rouge */
	div.hrciel {
		color: #71B8FF;
		background-color: #71B8FF;
	}
  /* separ rouge */
	div.hrred {
		color: #c00;
		background-color: #c00;
	}
  /* separ vert */
	div.hrvert {
		color: #9C9;
		background-color: #9C9;
	}

/* cadres de couleur */

	.cadregris {
		border:1px solid #CCC;
		text-align:center;
	}

/* suppléments */

	.fltlft { float:left; padding-right:5px;}
	.fltrt  { float:right; padding-left:5px;}
	.spacing   { padding-bottom:14px} /* espacer des elements avec un grand espace (li, div ...) */
	.zeromarge { margin:0; padding:0} /* enlever les marges int/ext | pour les puces, utiliser class="nomargin" */
	.w75 { width:75%; margin:auto; }
	.w50 { width:50%; margin:auto; }
	.w25 { width:25%; margin:auto; }

/* popup d'alerte concernant l'accre */
	.avertis {
		font-family: Arial, Helvetica, sans-serif;
		font-size:12px;
		width: 60%;
		min-width:350px;
		margin: 20px auto;
		border: 2px solid #660000;
		text-align:center;
	}
		.avertis div.titre:first-line {
			font-size: 13px;
			font-weight: bold;
			text-transform: uppercase;
		}
		.avertis div.titre {
			font-size: 13px;
			font-weight: normal;
			text-transform:none;
			color: #FFFFFF;
			background-color: #AA0000;
			text-align:center;
			border: 1px solid #AA0000;
		}
		
		.avertis p {
			padding:0 2px;
			margin:10px 0;
			line-height:150%;
			padding:0;
			text-align:center;
		}
		.avertis .fin {
			font-weight:bold;
			padding:0 2px;
			color: #990000;
			text-align:center;
			line-height:22px;
		}
		.avertis .fin a {
			font-weight:normal;
		}
/* divers */
.marchand { font-weight: bold; color: #98B854; }
.nonmarchand { font-weight: bold;	color: #0099CC; }