@import: url('../css-reset.css');
html, body, #container {
	font: 100% Arial, Helvetica, sans-serif;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	margin:0;
	padding:0;
}
html, body { height: 100%; }
body { padding:0 8px 8px 8px;}
p, li {font-size:80%}
a:link, a:visited, a:active { text-decoration:underline;}
a:hover {  text-decoration: none;  }

/** toutes les listes */
ul, ol { margin:1em 15px 2em 35px;/*margin:5px 15px 0 35px;*/ } 
/** liste non ordonnées */
ul    { list-style-type:disc; }   /* liste 1er niveau */
ul ul { list-style-type:circle; } /* liste imbriquée, 2e niveau */
ol   { list-style-type:decimal; } 
li   { margin-bottom:5px;} /*espacement entre chaque items */
ol li    { font-weight:bold; }
ol li li { font-weight:normal; }
	
#container { 
	width: 100%;  /* ce paramétrage crée un conteneur dont la largeur est 80 % de celle du navigateur */
	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	text-align: left; /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
} 
#header { 
	padding: 0;  /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent en dessous. Si, au lieu de texte, c'est une image qui est insérée dans l'élément #header, il est conseillé de supprimer le remplissage. */
} 
#header h1 {
	display:block;
	clear:both;
	border:0;
	margin:0;
	padding:0 5px;
	line-height:140%;
	font-family:Arial, Helvetica, sans-serif;
	font-size:140%;
	font-weight:bold;
	font-style:italic;
	font-variant:small-caps;
	text-align:right;
	background-image: url(images/bgh1.gif);
	background-repeat:repeat-x;
	background-position:top left;
}
	#header h1 span {
		display:block;
		float:left;
		font:inherit;
		text-align:left;
	}

/* Conseils pour sidebar1 :
1. comme nous travaillons en unités relatives, il est préférable de ne pas utiliser de remplissage latéral pour l'encadré. Pour les navigateurs conformes aux standards, il sera ajouté à la largeur globale, créant ainsi une largeur réelle inconnue. 
2. Comme nous utilisons des unités ems pour l'encadré, ne pas oublier que sa largeur variera en fonction de la taille de texte par défaut.
3. Pour créer un espace entre le côté de l'élément div et les éléments qu'il contient, attribuez une marge gauche et une marge droite à ces éléments, comme dans la règle "#sidebar1 p".
*/
#sidebar1 {
	float: left; 
	width: 12em; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	padding: 10px 0 0 0; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
	margin:2px auto;
}
/* 
 * MENU GAUCHE 
 */	
#sidebar1 ul.menu {
	text-indent:0;
	margin:0;
	padding:12px 5px;
	list-style-position: outside;
	list-style:none;
	text-align:right;
	font-size:100%;
	}
		#sidebar1 ul.menu li {
			line-height:130%;
			border:0;
			padding:0 15px;
			display:block;
			font-weight:normal;
			text-align:right;
			background-image:none;
			margin-bottom:12px;
		}
			#sidebar1 ul.menu li a:link, 
			#sidebar1 ul.menu li a:visited {
				font-style:normal;
				font-weight:normal;
				text-decoration:none;
			}
			#sidebar1 ul.menu li a:hover,
			#sidebar1 ul.menu li a:active {
				font-style:normal;
				font-weight:bold;
				text-decoration:none;
			}
		#sidebar1 ul.menu li.nolink {
			padding-right:15px;
			font-style:normal;
			font-weight:bold;
			text-align:right;
			background-image:url(images/menu_puce.gif);
			background-repeat:no-repeat;
			background-position:100% 60%;
		}
		

#sidebar1 .part2 {
	width:89%;
	margin:7px auto;
	border: 1px solid;	
	-moz-border-radius: 10px; /*moz*/
	-webkit-border-radius: 10px;/*safari*/
	-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
	-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
	background: transparent url(images/floppy-disk.png) no-repeat 5px 5px;
}
	#sidebar1 .part2 ul, #sidebar1 .part2 li { background-color:transparent; }
	
	#eStat { margin-left:-100px; }

		
#mainContent { 
	margin: 0 10px 0 12.5em;; /* la marge droite peut être indiquée en pourcentage ou en pixels. Elle crée l'espace dans la partie inférieure du côté droit de la page. */
	padding-top: 15px;
} 

#mainContent h2 {
border-bottom:2px solid;
display:block;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 140%;
font-weight: bold;
margin:0 auto 1em auto;
padding:0 5px 5px 5px;
}

#mainContent h3 {
display:block;
font-size: 100%;
font-weight: bold;
background-image:url(images/bgh3.gif);
background-repeat:repeat-x;
background-position:top left;
padding:2px 2px 2px 5px;
margin:1.5em auto;
border:1px solid #a86b00;
}
#mainContent h4 {
display:block;
font-size: 85%;
line-height:150%;
font-weight: bold;
padding:2px 2px 2px 5px;
margin:1em auto;
border-bottom:1px dashed;
border-top:1px dashed;
}

#mainContent h5 {
display:block;
font-size: 90%;
line-height:150%;
font-weight: bold;
padding:2px 2px 2px 5px;
margin:1em 10px;
}
#mainContent p {	margin:1em 15px; }

#mainContent p.source {
	font-size:85%;
	font-style:italic;
	text-align:right;
}
	#mainContent p.source a:link,
	#mainContent p.source a:visited,
	#mainContent p.source a:active,
	#mainContent p.source a:hover {
		font-size:85%;
	}

#mainContent .formonline {
	display:block;
	float:right;
	padding:5px;
	font-size:70%;
	font-weight:bold;
	font-style:italic;
}		

#mainContent .important {
	border:2px dotted;
	clear:right;
	display:block;
	float:right;
	font-size:80%;
	font-style:italic;
	line-height:120%;
	padding:5px;
	width:40%;
}

#mainContent .blocinfo {
	zoom:1;
	display:block;
	width:auto;
	margin:1em 10px;
	border:1px solid;
	padding:8px;
	clear:both;
	height:auto;
	overflow:visible;
}
	#mainContent .blocinfo p {
		text-align:center;
		margin:0;
	}
	#mainContent .blocinfo img  {
		margin:auto 5px;
	}

		#mainContent .w33 {
			width:33%;
		}
		#mainContent .w50 {
			width:48%;
		}
/* infobulle */
/*
EX: 
<a href="../fiches-info/Medecineduw/medecinew.htm" target="_blank" class="info"><span>L’adresse et le numéro de téléphone du médecin du travail ou du service médical du travail doivent être affichés dans les locaux de votre entreprise.</span>M&eacute;decin du Travail</a>
*/
#mainContent a.info, 
#mainContent a.info:visited, 
#mainContent a.info:active {
	padding:0 2px;
	position:relative; 
	z-index:24; 
	text-decoration:none;
}

#mainContent a.info:hover {
	z-index:25; 
	text-decoration:underline;
}
	#mainContent a.info span {
		display: none;
	}

	#mainContent a.info:hover span { 
		/*le contenu de la balise span ne sera visible que pour l'état a:hover */
		font-size:90%;
		display:block;
		cursor:pointer;
		position:absolute;
   	text-decoration:none;
		top:2em; 
		left:1em; 
		width:23em;
		border:1px solid;
		text-align: center;
		font-weight:normal;
		padding:1px;
	}

	#mainContent a.info:hover span em { 
		display:block;
		margin-top:5px;
		clear:both;	
		width:100%;
		font-size:90%;
	}

/*
* pied de page
*/
#footer { 
	padding: 2px 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
	text-align:center;
background-image:url(images/bgh3.gif);
background-repeat:repeat-x;
background-position:top left;
padding:2px 2px 2px 5px;
} 
#footer p {
	margin:0;/* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding:10px 0;/* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */
}
#footer a {
	text-decoration:none;
	margin: 0; 
	margin:5px 15px; 
	font-style:italic;
	font-size:80%;
	font-weight:bold;
	font-variant:small-caps;
	text-align:right;
}
#footer .com { font-variant:normal; font-size:70%; }

/* Diverses classes à réutiliser */
.fltrt { /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
	float: right;
	margin-left: 8px;
}
.fltlt { /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
	float: left;
	margin-right: 8px;
}


 /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
.clearfix {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } 
/** clearfix hack for ie6+ */
.clearfix {display:inline-block;} 
/* Hide from IE Mac \*/ 
.clearfix {display:block;} 
/* End hide from IE Mac */ 

/** equal height divs start
*/
#innerwrapper {
	position: relative;
}
#sidebar1 {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	overflow: auto;
}
/** equal height divs end
*/

/** 
 COLORS ONLY  
*/
a:link, 
a:visited,
a:active { color:#39a9df }


#header { background-color:#000 }
#header h1 { color:#C7C7C7; background-color:#404040; }
#mainContent h2 { border-bottom-color:#B36B00; color: #B36B00 }
#mainContent h3 { background-color:#ffa828;}
#mainContent h4 { color:#ff9900; border-bottom-color:#ff9900; border-top-color:#ff9900;}
#mainContent h5 { color:#404040 }

#sidebar1,
#mainContent a.info, 
#mainContent a.info:visited, 
#mainContent a.info:active, 
#footer { background-color:#ffa828 }

#sidebar1 ul.menu li a:link, 
#sidebar1 ul.menu li a:visited { color: #734700 }

#sidebar1 ul.menu li a:hover, 
#sidebar1 ul.menu li a:active { background-color: #B36B00;}

#footer .gers { color:#2e7823; }
#footer .emploi { color:#e22319; }
#footer .com { color:#404040 }
#sidebar1 .part2 { border-color: #B36B00; }
#sidebar1 .part2 { background-color:#ffbb56; }
#mainContent .formonline { background-color: #8ac000;}		
#mainContent .important { border-color:#CC0000;}
#mainContent .blocinfo {	border-color:#C7C7C7;}
#mainContent a.info:hover { color:#ffa828; }
#mainContent a.info:hover span { border-color:#12BC27; background-color:#CBF9B5; color:#003300; }

#sidebar1,
#header h1 span,
#sidebar1 ul.menu, 
#sidebar1 ul.menu li, 
#sidebar1 ul.menu li a:hover, 
#sidebar1 ul.menu li a:active, 
#sidebar1 ul.menu li.nolink, 
#mainContent h3,
#mainContent .formonline, 
#mainContent a.info, 
#mainContent a.info:visited, 
#mainContent a.info:active {color:#FFF;}

#container, 
#mainContent h4, 
#mainContent .important, 
#mainContent a.info:hover {background-color:#FFF;}

body {background-color:#fff;}

body,
#mainContent .important,
#mainContent .blocinfo  { color:#000000;}

#mainContent .blocinfo, 
#mainContent .blocinfo h5, 
#mainContent .blocinfo p { background-color:#EFEFEF; }