/* PATCH */
.clearfix:after { content: "."; display: block; height: 0pt; clear: both; visibility: hidden; }
.clearfix { display: block; }
* html .clearfix { height: 1%; }
.clearthis { clear:both; height:0; line-height:0; }

/* ************************************** */

* {	padding:0; 
	margin:0; 
	list-style-type:none;}
* img{ border:0;}
* a { text-decoration:none; }

body {
	text-align:left;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #333;
	background-color:#F0F0F0;
	background-image: url(../imgs/background.jpg);
	background-repeat:repeat-x;
}

/* 	************************************** */
/* 	CALQUE : main
	PERMET DE CENTRER LA PAGE ET DÉTERMINE SA LARGEUR */
#main {
	width:986px;
	margin:auto;
	z-index:1;
	background-color: #ffffff;
}
/* 	CALQUES	:	header (logo CIQSS, menuTexte, dropDown, formulaire de recherche, onglets)
				printHeader (remplace le "header" pour l'impression seulement) 
*/
#header, #printHeader {
	position:relative;
	margin:0 0 8px 0;
	width:986px;
	height:104px;
	z-index:3;
	border-bottom: 5px solid #26387F;
	background-image: url(../imgs/headerBckGroung.png);
	background-repeat: no-repeat;
	background-position: left top;
}

/* en-tête pour impression seulement  */
#printHeader {
	width:690px;
	display:none;
}
#printHeader p.sigle {
	margin:0px 0 0px 20px;
	font-size:34px;
	color:#28377D;
	font-weight: bolder;
	letter-spacing: -.1em;
}
#printHeader p.descript { 
	margin:0 0 0 20px;
	font-size:18px;
	color:#F48022; }

/* FIN en-tête pour impression seulement  */

/* 	**************************************
	calque : #rechercheForm  ------
	module de recherche (formulaire GOOGLE)
*/
#rechercheForm {
	position:absolute;
	width:210px;
	height:98px;
	top:4px;
	left:772px;
	color:#ffffff;
	font-size:11px;
	}
* html #rechercheForm { top:2px; }
div#rechercheForm form img { vertical-align: top;border:0; }
div#rechercheForm form input#saisie  { font-size:10px; }
div#rechercheForm a {	color:#ffffff; display:block; float:right; margin: 0 4px;}
div#rechercheForm a:hover {color:#26387F; }
div#rechercheForm div {margin:2px 0 0 0; text-align:right;left:8%;position:relative;	width:90%; display:block; }
div#rechercheForm div.premier { margin: 40px 0 0 -50px; width: 85%}
/*{ margin:44px  0 0 0; width:84%}*/

 
/* 	************************************** */
/* 	CALQUE CENTRALE : contentArea
	CONTIENT	1) la zone du texte principale : column1
				2) le sideBar : column2   */
#contentArea { 
	width:986px;  
	z-index:2;}

#column1 {
	float:left; 
	width:774px; 
/*	background-image: url(../imgs/batisseFond.jpg);*/
	background-repeat: no-repeat;
	background-position: right 10px;
	min-height:500px; 
	height:auto !important;	
	height: 500px;
	margin-top:-18px;}

#column1 h1.titre {
	position:relative;
	padding:0 0 0 12px;
	margin:6px 0;width:750px; left:10px;
	border-top:1px solid #CCCCCC;
	letter-spacing: 0.2em;
	background-color: #E9E9E9;
	font: italic normal 160% 'Times New Roman', Times, serif;
	color: #666666;
	font-size:1.4em;
	border-bottom:1px solid #CCCCCC;
}
#column1 h3, #column1 h4 {
	font-weight:bold;
	font-size: 1.5em;
	color: #FF9900;
	margin:30px 0 0 10px;
}
#column1 h3 {font-size: 1.6em;}

/* bouton anglais - francais */
#column1 p.english, p.englishQuoiNeuf { 
	position:relative;
	display:block;
	width:68px;
	height:18px;
	margin:18px 0 12px 0;
	font-size:9px;
	text-align:center;
	left:12px;
	background-color: #94A3BF;
	background-image: url(../imgs/btnEnglish.png);
	background-repeat: no-repeat;
	background-position: center center;

	}

#column1 p.english a, p.englishQuoiNeuf a { 
	color:#ffffff;   
	display:block;
	padding:2px 0 0 0;}
#column1 p.english a:visited, p.englishQuoiNeuf a:visited {color:#ffffff; }
#column1 p.english a:hover, p.englishQuoiNeuf a:hover { color:#26387F;}

* html #column1 h1.titre{ margin-right:2px; left:10px;}


/* 	************************************** */
/* 	CALQUE : footer
	CONTIENT	1) bande noir dans le bas de la page   */
#footer {
	position:relative; 
	width:966px; height:15px; 
	background:#333; color:#fff;
	z-index:3;
	text-align:right;
	border-top:1px solid #ccc;
	padding:10px;}

#suivezNous{
	float:left;
	font-weight:bold;
	font-size:13px;
	}
#suivezNous a{
	color:white;
	}
#suivezNous a:hover{
	text-decoration:underline;
}
#derniereModif{
	float:right;
	height:15px;
	}


/* ======================================== 
	BOUTON DU RESEAU DANS L'ENTETE : btnReseau
   ======================================== */
#btnReseau {
	position:absolute;
	width:75px;
	height:64px;
	top:36px;
	left:188px;
	z-index:4000;
}
#btnReseau a {
	display:block;

	width:75px;
	height:64px;
	background-image: url(../imgs/btnReseauCIQSS.png);
	background-repeat: no-repeat;
	background-position: left -128px;
	}
#btnReseau a:hover {
	background-position: left -192px;
}

/* ======================================== 
	MENU TEXTE DE L'ENTETE : menuTexte
   ======================================== */

#menuTexte {
	position:absolute;
	float:left;
	width:600px !important;width:610px;
	top:18px;
	left:400px !important;left:410px;
	z-index:2000;
}

#menuTexte img { float:left; padding-top:6px;}
#menuTexte a {
	display:block;
	float:left;
	padding:0 8px;
	color:#ffffff;
}
#menuTexte a.dernier {border-right:none; }
#menuTexte a:hover { color:#F47F20; }
#menuTexte a.vousEtesIci { color:#F47F20; }
#menuTexte span {
	display:block;
	float:left;
	background-image: url(../imgs/pointMenu.png);
	background-repeat: no-repeat;
	background-position: center center;
	height: 4px;
	width: 4px;
	padding:12px 0 0 0;
}

/*	============================================
	MENU DÉROULANT ET ONGLETS : listmenu
	dropDownCIQSS
	============================================
*/

#listmenu {
	position:absolute;
	float:left;
	width:582px;
	top:55px;
	left:280px !important;left:290px;
	z-index:2000;
	font-size: 12px;
	font-weight:bolder;
	margin:20px 0 0 0;
	}	

#listmenu ul { margin:0;	}

#listmenu li {
	position: relative;
	display: block;
	float: left;
	border-right: 5px solid #ffffff;
	padding: 8px 24px 6px 4px;
	margin-right: 0;
	background-image: url(../imgs/dropDown/btnDropDownRond.png);
	background-repeat: no-repeat;
	background-position: right top;
}

#listmenu li span { position:relative;
	background-image: url(../imgs/dropDown/btnDropDownRond.png);
	background-repeat: no-repeat;
	background-position: left top;
	display:block;
	width:10px;
	border:none;
	float:left;
	top:-8px;
	left:-5px;
	margin-bottom:-10px;
	}
	
#listmenu a {
/* 	display:inline !important ;display:block;*/
	display:block;
 text-decoration:none;	
	color:#ffffff;	
	}
#listmenu a:hover {
	color:#CBD1EF;
	}
	
.topMenu{
	 letter-spacing:4px}
/* the menu ends here */	
/* the drop-down starts here */
#listmenu ul li ul {
/*	padding:12px 0 !important; padding:6px 0; */
	padding:6px 0;
	margin:0 ;  
	z-index:2000; 
	position:absolute; 
	width:160px; 
	border-right:0; 
	left:1px; 
	}
#listmenu ul li ul li {
	padding:0;
	width:100%;
	height:24px;
	background-image: url(../imgs/dropDown/bouton3.png);
	background-repeat: no-repeat;
	background-position: left bottom;
}

#listmenu ul li ul li.sMenu {
	background-image: url(../imgs/dropDown/bouton3.png);
	background-position: right bottom;
}

#listmenu ul li ul li a {
	padding:4px 4px 0 4px;
	display:block;
	height:100%;
	width:100%;
	color: #464E8C;
	}
#listmenu ul li ul li a:hover { color:#0033FF; }

/* make the drop-down display as the menu is rolled over */
#listmenu ul li ul {display:none;} 
#listmenu ul li:hover ul {display:block; } 

/* pop-out starts here */
body div#listmenu ul li ul li ul  { 
	padding:6px 0 0 0 !important; padding:0;
	position:absolute; 
	visibility:hidden; 
	top:0;
	left:210px;
	}
#listmenu ul li ul li:hover ul {
	visibility:visible; 
} 

/* second level popouts start here*/
#listmenu ul li ul li:hover ul li ul {visibility:hidden;}
#listmenu ul li ul li ul li:hover ul {visibility:visible;} 



#menu1 { z-index:2002; }
#menu2 { z-index:2003; }
#menu3 { z-index:2004; }
#menu4 { z-index:2005; }

/* 	======================================== 
	si on modifie la largeur (width)
	si cette option du menu contient un sous menu il faut egalement
	modifier la largeur dans le sous-menu. 
	Ex : #listmenu ul li ul.accData li ul
   	======================================== */
#listmenu ul li ul.accData { width: 90px !important; width:85px; }
#listmenu ul li ul.activites { width:139px !important; width:135px; }
#listmenu ul li ul.publication { width:168px !important; width:164px; }
/*#listmenu ul li ul.formation { width:168px !important; width:162px; }*/
#listmenu ul li ul.activites li ul.archives { width:97px !important; width:97px; }


#listmenu ul li ul.accData li ul {
/* 	=========== AVANT EXPLORER 7 ========== 
	top:-12px !important; top:0;
	left:214px !important; left:214px; 
   	======================================== */
	top:-5px !important; top:0px;
	left:92px !important; left:98px; 
	width:205px;  }

#listmenu ul li ul.activites li ul {
/* 	=========== AVANT EXPLORER 7 ========== 
	top:-12px !important; top:0;
	left:214px !important; left:214px; 
   	======================================== */
	top:-5px !important; top:0px;
	left:142px !important; left:148px; 
	width:165px;  }
	
#listmenu ul li ul.activites li ul.archives li ul {
/* 	=========== AVANT EXPLORER 7 ========== 
		top:-12px !important; top:0;
		left:224px !important; left:220px; 
   	======================================== */
	top:-5px !important; top:0px;
	left:99px !important; left:109px; 
	width: 151px;
}
	
	
/* ======================================== 
	MENU DE DROITE (SIDEBAR) : column2
   ======================================== */

#column2 {
	position:relative;
	width:210px; /* 200px */
	float:left;
	padding:0 ;
	top:-10px;}

	
/* ========================================= 
	Tout le contenu de l'encadre doit etre inscrit
	dans le calque (DIV) topRight
	
	Il faut declarer une marge suffisante pour
	l'affichage de l'arrondi des coins
   ========================================= */

.topLeft, .topRight, .bottomLeft, .bottomRight {
	background-image: url(../imgs/demobox2.png);
	background-repeat: no-repeat;
}
.topLeft, .topRight {
	padding-top:20px;
}
.topLeft {
	position:relative;
	width: 200px; margin-left:6px;
	background-position: left top;
}
.topRight {
	width:182px;
	margin:-20px 0 0 18px;
	background-position: right top;
}
.bottomLeft, .bottomRight {
	height:30px;
}
.bottomLeft {
	background-position: left bottom;
	width:100%;
}
.bottomRight {
	background-position: right bottom;
	width:170px;
	margin:0 0 0 30px;
}

.topRight p{
	margin:20px 0 0 18px;
}

.topRight ul  { width:170px; }

.topRight ul li {
	position:relative;
	left:0;
	display:block;
	width:96% !important;
	width:94%; 
	padding-bottom:4px !important;
	padding-bottom:0;
}
.topRight  ul li a {
 	position:relative;
	color:#333333;
	display:block;
	left:8px;
}
.topRight  ul li a:hover {
	color:#eeeeee;
	background-color: #F58126;
}
.topRight  ul li.titre { 
 	left:0;
	font-size:1.1em; 
	margin:.3em 0 0 0; 
	font-weight:bold;
	color:#F58126; }
.topRight  ul li.titre a { 
	color:#F58126; 	
	left:0;
}
.topRight  ul li.titre a:hover{ 
	color:#FABD8B;
	left:0;}
	
/* Exception lorsque cette balise contient une image comme lien */
 .topRight  ul li.titre a.btnImage:hover {
	background-color: #ececec;
}

.topRight  ul li.premier { 
	border-top: 3px solid #94A3BF; /*#f58126*/
	margin-top: 6px;
	padding-top:10px;}

.topRight ul li.categorie { 
	left:8px; 
	color:#970;
 }	

.topRight ul li ul {
	width:94%;
	position:relative;
	top:6px;
	left:6%;
	margin:0 0 10px 0;}

/* 	======================================== 
	CALQUE : laboratoires 
*/
#reseaux {
	width: 200px;
	height: 60px;
	margin: 10px 0 0 9px !important;
}

#laboratoires {
	width:200px;
	height:102px;
	margin:2px 0 0 8px !important;
	margin:6px 0 0 6px;
	background-image: url(../imgs/laboratoires2.png);
	background-repeat: no-repeat;
	background-position: left top;
	color:#ffffff;
}
#laboratoires  p {
	position:relative;
	top:56px;
	width:194px;
	text-align:center; 
	height:38px;
	margin-left:1px;
	font-weight: bolder;
	background:#000000;
}

#laboratoires  p span{
	display:block;
	margin-left:10px;
	margin-bottom:4px;
	letter-spacing: 0.3em; 
}
#laboratoires  a {
	font-weight:bolder;
	font-size: 11px;
	display:block;
	float:left;
	color:#ffffff;
	margin-left:11px;
}
* html #laboratoires  a {margin-left:8px; }
#laboratoires  a:hover {color:#F47F20; }
* html #laboratoires  a:hover {color:#F47F20; } /* raison inconnue ??? */
#laboratoires  a:visited {color:#ffffff; }

/*  ===============================================
	BOUTON POUR L'ACCES AU CARTABLE
    =============================================== */
.cartable a {
	display:block;
	width:125px;
	height:92px;
	background-image: url(../imgs/cartableBtnBleu.png);
	background-repeat: no-repeat;
	background-position: left top;
}

.topRight  ul li.cartable a:hover {
	background-color:transparent;
	}
	
.lienQuoiDeNeuf{
width:230px;
height:106px;
cursor:pointer;
}