/***********************************************/
/* Réarrangement de 2col_leftNav.css           */
/* restylée en f (goûts persos de MY et YY)    */
/*                                             */
/* 27/09/2004 - YY Ajout de la transparence    */
/*              dans la navbar                 */
/* 20/10/2004 - MY Ajout de la classe Imagecom */
/*              pour les images commentées     */
/* 24/10/2004 - MY Ajout de la classe bouton   */
/*              pour simuler des boutons-texte */
/* 24/10/2004 - MY Mise en gras des hyperliens */ 
/* 01/11/2004 - MY Incorporation d'un minimum  */
/* de SubSilver afin de désolidariser les deux */
/* feuilles de style                           */
/* 01/11/2004 - MY Délestage des styles sans   */
/* intérêt connu et inutilisés à ce jour       */
/* 01/11/2004 - MY Ajout de la classe incrusto */
/* 01/11/2004 - MY Francisation                */
/***********************************************/

/***********************************************/
/* Polices et principales balises HTML         */
/* Attention, les clauses scrollbar... ne sont */
/* applicables qu'au seul IE 5+                */
/***********************************************/ 

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background-color: #E5E5E5;
	scrollbar-face-color: #DEE3E7;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #DEE3E7;
	scrollbar-3dlight-color: #D1D7DC;
	scrollbar-arrow-color:  #006699;
	scrollbar-track-color: #EFEFEF;
	scrollbar-darkshadow-color: #98AAB1;
}

a:link, a:visited {
	font-weight: bold;
	color: #006699;
	text-decoration: none;
}

a:hover {
	font-weight: bold;
	color: #DD6900;
	text-decoration: underline;
}

/* voir aussi ajouts spécifiques aux liens "hover" */

h1, h2, h3, h4, h5, h6 {
	margin: 0px;
	padding: 0px;
}

/* Utilisation de la plus grande dimension possible pour les textes importants */
h1, h2 {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 22px;
	text-decoration: none;
	line-height : 120%;
}

h1 { color: #000000; }

h2 { color: #254050; }

h3, h4, h5, h6 { font-family: Arial,sans-serif; }

h3 {
	font-size: 100%;
	color: #334d55;
}

h4{
	font-size: 100%;
	font-weight: normal;
	color: #333333;
}

h5{
	font-size: 100%;
	color: #334d55;
}

hr { height: 0px;
	border: solid #D1D7DC 0px;
	border-top-width: 1px;
}

ul { list-style-type: square; }

ul ul	{ list-style-type: disc; }

ul ul ul { list-style-type: none; }

label{
	font: bold 100% Arial,sans-serif;
	color: #334d55;
}

/***********************************************/
/* Description des composants principaux id    */
/* (3 parties de la feuille)                   */
/***********************************************/

#masthead{ /* bande en-tête */
	position:absolute; top:0px;	
	padding: 10px 0px;
	border-bottom: 1px solid #cccccc;
	width: 100%;
}

#navBar{ /* bande verticale gauche */
	position:absolute; top:120px;	
	margin-left:6px;
	padding: 0px;
	background:white;
	width:215px;
	filter:alpha(opacity=70);    
	border-top: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	border-left: 1px solid #ccc;
}

#content{ /* corps de la page */
	position:absolute; top:120px; left:240px; right:6px;
	padding: 0px 3px 0px 0px;
}

/***********************************************/
/* Composants uniques de "masthead"            */
/***********************************************/

#siteName{ /* en haut de page */
	margin: 0px;
	padding: 0px 0px 10px 10px;
}

/* Barre de navigation horizontale */

#globalNav{
	color: #cccccc;
	padding: 0px 0px 0px 10px;
	white-space: nowrap; /*éviter de fragmenter la 
}

#globalNav img{ /* ne sert pas pour l'instant */
	display: block;
}

#globalNav a {
	font-size: 90%;
	padding: 0px 4px 0px 0px; 
}

/***********************************************/
/* Cas particulier du composant "navbar"       */
/*                                             */
/* Le composant sectionLinks ...               */
/* de même que la classe relatedLinks ...      */
/* ... ne sont utilisés qu'ici.                */
/***********************************************/

/* Listes de liens */

#navBar ul a:link, #navBar ul a:visited {display: block;}

#navBar ul {list-style: none; margin: 0; padding: 0;}

#navBar li {border-bottom: 1px solid #EEE;}

html>body #navBar li {border-bottom: none;}

/* Composant "sectionLinks" */

#sectionLinks{
	margin: 0px;
	padding: 0px;
	border-bottom: 1px solid #cccccc;
	font-size: 90%;
}

#sectionLinks h3{
	padding: 10px 0px 2px 0px;
}

#sectionLinks a:link{
	padding: 2px 0px 2px 6px;
	border-top: 1px solid #cccccc;
	width: 100%;
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: auto;
}

#sectionLinks a:visited{
	border-top: 1px solid #cccccc;
	padding: 2px 0px 2px 6px;
}

#sectionLinks a:hover{
	border-top: 1px solid #cccccc;
	background-color: #dddddd;
	padding: 2px 0px 2px 6px;
}

/* Classe "relatedLinks" */

.relatedLinks{
	margin: 0px;
	padding: 10px 6px 10px 6px;
	font-size: 90%;
}

.relatedLinks h3{
	padding: 0px 0px 2px 0px;
}

/***********************************************/
/* Composants uniques de "content"             */
/***********************************************/

#pageName{ /* en haut de "content" */
	padding: 0px 0px 10px 10px;
}

/***********************************************/
/* Classes banalisées                          */
/***********************************************/

/************** Classe "bouton" ****************/
/* L'élément concerné produira toujours un     */
/* pseudo-bouton "paddé" de 10px sur sa droite */
/* Il ne doit contenir qu'une ancre            */
/* (avec son libellé bien sûr)                 */
/* Et pour que le dispositif fonctionne, il    */
/* faut que la clause class="bouton" soit      */
/* suivie de style="width:..." !!              */
/***********************************************/

.bouton { padding: 0px 10px 0px 0px; }

.bouton a:link, .bouton a:visited, .bouton a:hover {
	font-size: 80%;
	display: block; width: 100%; 
	text-align: center; padding: 4px;
	background: white; filter: alpha(opacity=70);
	border-color: #acc6ec; border-width: 7px;	border-style: groove;
}

.bouton a:hover{
	background-color: #dddddd;
}

/*************** Classe "story" ****************/
/* Pour relater une histoire (ou décrire qqch) */
/* avec un titre en <h3> et des <p> à la suite */
/* (en-dessous). Classe issue de la feuille de */
/* style originelle. On recommendera plutôt    */
/* l'usage de la classe "incrusto".            */
/***********************************************/

.story {
	clear: both;
	font-size: 80%;
	padding: 0px 6px 10px 6px;
}

.story h3 {
	font-size: 125%;
	color: #254050;
}

.story p{
	padding: 0px 0px 10px 0px;
}


/**************** Classe "incrusto" *************/
/* Comme "story", sauf que le 1er élément fils  */
/* est incrusté en haut et à gauche             */
/* ce qui permet de mettre en valeur            */
/* - soit un titre <h3>                         */
/* - soit un bouton <... class="bouton" ...>    */
/************************************************/

.incrusto {
	font-size: 80%;
	padding: 0px 6px 20px 6px;
}

.incrusto table { /* dévolue à l'insertion du bouton */
	float: left;
	padding: 4px 12px 4px 0px;
}

.incrusto h3 {
	font-size: 125%;
	color: #254050;
	float: left;
	padding: 0px 15px 0px 0px;
}

.incrusto p{
	text-align: justify;
	margin: 0px 0px 0px 0px;
}

/************** Classe "imagecom" ***************/
/* Pour les images commentées (par ex dans une  */
/* galerie de photos), dans une page avec une   */
/* seule photo cadrée en haut et à gauche et un */
/* commentaire s'écoulant sur la droite avant   */
/* de passer dessous en tant que de besoin      */
/************************************************/

.imagecom {
	clear: both;
	padding: 10px 5px 0px 5px;
	font-size: 80%;
	vertical-align:top;
	text-align:justify;
}

.imagecom img {
	border-style:groove;
	border-width:3px;
	border-color:#6060C0;
	float:left;
	margin-right:10px;
	margin-bottom:10px;
}