/* CSS Gestion Privée Desjardins */

/*
1 - Généralités
2 - Remise à 0 des margins et paddings
3 - Imports de fonts
4 - Mise en page des différentes divisions du site (en-tête, contenair, pied-de-page)
5 - Conception des divisions (en-tête, menus gauche et droite, accueil, contenu, pied de page)
6 - Attribution des fontes
7 - Images et couleur de fond
8 - Arrondie des boîtes
*/

/* --- 1 | Généralités --- */
html {overflow-y:scroll;}
* {border:none;}
a:focus {outline:none;}
hr.clear {clear:both;visibility:hidden;}


/* --- 2 | margin 0; padding 0 --- */
html,
body,
#accueil,
#accueil div div,
#enTete ul.onglet,
#contenair #filAriane,
#menuGauche ul,
#menuGauche ul li ,
#menuGauche ul dd,
#menuDroit p,
#menuDroit ul,
#piedDePage p,
#contenu h1,
#contenu .intro p,
#piedDePage ul.utilitaire {
	margin:0;
	padding:0;
}


/* --- 3 | Définition des fonts 
@font-face {
	font-family: 'frutiger_lt_std45_light';
	src: url('font/frutigerltstd-light-webfont.eot');
	src: url('font/frutigerltstd-light-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/frutigerltstd-light-webfont.woff') format('woff'),
		url('font/frutigerltstd-light-webfont.ttf') format('truetype'),
		url('font/frutigerltstd-light-webfont.svg#frutiger_lt_std45_light') format('svg');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'frutiger_lt_std55_roman';
	src: url('font/frutigerltstd-roman-webfont.eot');
	src: url('font/frutigerltstd-roman-webfont.eot?#iefix') format('embedded-opentype'),
		url('font/frutigerltstd-roman-webfont.woff') format('woff'),
		url('font/frutigerltstd-roman-webfont.ttf') format('truetype'),
		url('font/frutigerltstd-roman-webfont.svg#frutiger_lt_std55_roman') format('svg');
	font-weight: normal;
	font-style: normal;
	}--- */

	
	
/* --- 4 | Placement des différentes divisions du site --- */
/*
Le site fait 900px de largeur.
1 div GLOBAL qui contient : 1 en-tête, 1 contenair (=>menu de gauche, contenu, menu de droite) et 1 footer.
Si le contenu est moins haut que la fenêtre > le footer est en bas;
Si le contenu est plus haut que la fenêtre > le footer est sous le container.
! : le padding-bottom sur le #contenair doit toujours correspondre à la hauter du #piedDePage.
*/

html,
body {
	height:100%;
}
#global {
	min-height:100%;
	position:relative;
}
#enTete,
#contenair {
	width:900px;
	margin:auto;
}
#enTete {
	position:relative;
	padding-top:15px;
	height:95px;
}
#contenair {
	padding-bottom:45px;
	margin-top:10px;
	overflow:auto;
	overflow-x:hidden;
}
#contenair #filAriane {
	position:relative;
	margin-bottom:10px;
}
#contenair #filAriane .filArianeAccueil {
	padding-left:20px; /* Espace réservé pour l'icone Accueil */
}
#contenair #filAriane a {
	display:inline-block;
	text-decoration:none;
}
#contenair #filAriane .pageCourante {
	font-weight:normal;
}
#contenair #filAriane a:hover {
	text-decoration:underline;
}

#contenair #filAriane li{
	display:inline-block;
	list-style-position:outside;
}
#contenair #menuGauche {
	width:200px;
	float:left;
}
#contenair #contenu {
	width:510px;
	float:left;
	margin:0 20px 0 20px;
}

#contenair #contenu.contenuNoMenuGauche {
	margin-left:0;
	width:730px;
}

#contenair #contenu.justifie {
	text-align:justify;
}

#contenair #menuDroit {
	width:150px;
	float:left;
}
#piedDePage {
	position:absolute;
	bottom:0;
	width:100%;
	height:45px;
	text-align:center;
}



/* --- 5 | Conception --- */

/* En-tête */
	/* Logo */
		#enTete .logo {
			float:left;
		}

	/* Menu utilitaire */
		#enTete ul.utilitaire {
			float:right;
			margin-top:0;
		}
		#enTete a.accesPrive {
			padding-left:14px;
			background-position:0% 100%;
			background-repeat:no-repeat;
			background-image:url(/images/icone_acces_prive.png);
		}
		#enTete a.logout {
			background-position:0% 1px;
		}
		
	/* Nouveau site */
		#newSite {
			position: absolute;
			top: 15px;
			margin: 0;
			left: 50%;
			margin-left: -140px;
			margin-top: 20px;
			font-size: 18px;
			color: #4b3900;
		}

	/* Onglets */
		#enTete ul.onglet {
			position:absolute;
			bottom:0;
			right:0;
		}
		#enTete ul.onglet li {
			margin-left:3px;
			float: left;
			list-style-type: none;
			text-align:center;
		}
		#enTete ul.onglet li a {
			display:block;
			width:121px;
			height:33px;
			padding-top:3px;
			border-style:solid;
			border-width: 1px;
			border-bottom:none;
			text-decoration:none;
		}
	
	/* Bandeau Accès Privé */
		#enTete div.accesPrivee {
			position:absolute;
			bottom:0;
			right:0;
			width:627px;
			height:37px;
			display:table;
			border-style:solid;
			border-width: 1px;
			border-bottom:none;
		}
		#enTete div.accesPrivee p {
			display:inline;
			width:50%;
			float:left;
			line-height:37px;
			padding-left:.5em;
			margin:0;
		}
		#enTete div.accesPrivee a {
			width:40%;
			float:right;
			line-height:37px;
			text-align:right;
			padding-right:.5em;
			text-decoration:none;
		}
		
		#enTete div.accesPrivee  a:hover{
			text-decoration:underline;
		}
		#contenair p.bienvenuePrivee {
			width:510px;
			margin-left:220px;
			margin-top:-.5em;
		}
	
	/* CSS commun aux deux menus utilitaires (en-tête et footer) */
	ul.utilitaire li {
		display:inline-block;
		list-style-type: none;
		padding: 0 5px 0 5px;
		border-right: solid 1px;
	}
	ul.utilitaire li.last {
		padding-left: 5px;
		border-right: none;
	}
	ul.utilitaire li a {
		text-decoration:none;
	}
	ul.utilitaire li a:hover {
		text-decoration:underline;
	}

/* Menu de gauche */
	/* Le menu de gauche peut avoir plusieurs niveaux.
	2 sont prévus pour le moment :
	- le 1er est une liste <ul><li><a>
	- le 2nd est une liste de définitions <dl><dt><dd> enfant d'un <li> */

	/* 1er Niveau */
		#menuGauche ul{
			margin-top:3px;
			list-style-type:none;
			list-style-position:outside;
		}
		#menuGauche ul li {
			border-bottom-style:solid; 
			border-bottom-width:1px;
		}
		#menuGauche ul li a {
			display:block;
			width:190px;
			height:100%;
			padding:5px;
			text-decoration:none;
		}
		
	/* 2nd niveau normal*/
		#menuGauche ul ul{
			margin-top:0px;
			list-style-image:url(/images/puce-tiret.gif);
			list-style-position:inside;
		}
		
		#menuGauche ul ul li {
			border-bottom-style:none; 
		}
		
		#menuGauche ul ul li a {
			padding-left:10px;
			width:185px;
		}

	/* 2nd niveau accordéon*/
		#menuGauche dl {	
			margin:0;
		}
		
		#menuGauche dt, #menuGauche dd {
			padding-top:.5em;
			padding-bottom:.5em;
		}
		
		#menuGauche dt {
			background-image:url(/images/puce-slide.gif);
			background-repeat:no-repeat;
			background-position:100% 15px;
			cursor:pointer;
			padding-left:5px;
			font-weight:bold;
			font-size:14px;
		}
		
		#menuGauche ul li dt a {
			margin-left:-5px;
			margin-top:-.5em;
		}
		
		#menuGauche dt.up {
			background-position:100% 15px;
		}
		#menuGauche dt.down {
			background-position:100% -18px;
		}
		
		#menuGauche dl dd a{
			padding-left:20px;
			width:175px;
		}

		
/* Menu de droite (1 niv)*/
	#menuDroit p {
		padding:.33em;
		border-bottom:solid 1px white;
	}
	#menuDroit ul {
		margin-bottom:3px;
		list-style-type:none;
		border-top-style:solid;
		border-top-width:1px;
		border-bottom-style:solid;
		border-bottom-width:1px;
		list-style-position:outside;
	}
	#menuDroit ul li {
		border-bottom-style:solid;
		border-bottom-width:1px;
	}
	#menuDroit ul li.last {
		border-bottom:none;
	}
	#menuDroit ul li a {
		display:inline-block;
		width:auto;
		padding:.3em;
		padding-left:15px;
		text-decoration:none;
		background:url(/images/puce-double-fleche.gif) 4px 50% no-repeat;		
	}
	#menuDroit p a {
		padding:.3em;
		padding-left:15px;
		text-decoration:none;
		background:url(/images/puce-double-fleche-blanc.gif) 4px 50% no-repeat;	
	}
	#menuDroit p a:hover,
	#menuDroit p a.selected,
	#menuDroit ul li a:hover,
	#menuDroit ul li a.selected {
		text-decoration:underline;
	}

/* Message d'avertissement navigateur non supporté */
.wrongBrowser {
	padding: 0 15px;
  background: #FBF2F2;
  border: 1px solid #d5d5d5;
  color: #000;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 20px;
  margin-top: 10px;
}
.wrongBrowser p {
	padding-left: 25px;
  background: url(/images/e35-icone-erreur.png) no-repeat left top;
}
	
/* Accueil */
	#accueil {
		width:100%;
	}
	#accueil h1 {
		padding:20px;
		margin-bottom:20px;
		margin-top:0;
		text-align:center;
	}
	#accueil h1 span {
		padding-left:8em;
	}
	#accueil div {
		width:50%;
		float:left;
		margin-bottom:20px;
	}
	#accueil div img {
		float:left;
	}
	#accueil div div {
		width:160px;
		float:left;
		margin-left:10px;
	}
	#accueil div div h2 {
		margin-top:0;
	}
	#accueil div div a {
		display:inline-block;
		float:right;
		text-decoration:none;
	}
	#accueil div div a:hover {
		text-decoration:underline;
	}

	
/* Contenu */
	#contenu h1 {
		padding:12px;
	}
	#contenu .intro h1 {
		width:55%;
		float:left;
	}
	#contenu .intro p {
		width:38%;
		float:right;
	}
	#contenu .introLarg100 p{
		margin:0;
	}
	#contenu .introLarg100 p.pickupline {
		margin-top:.25em;
	}
	#contenu .noMarginTop {
		margin-top:0;
	}
	#contenu p.date {
		margin-bottom:0;
	}
	#contenu div.docDownload {
		width:180px;
		float:right;
		margin:1em 0 1em 1em;
		text-align:center;
	}
	#contenu div.docDownload img {
		padding:5px;
		background-color:white;
	}
	#contenu div.docDownload a {
		font-size:.9em;
		font-style:italic;
	}
	#contenu p {
		line-height:1.35em;
	}
	#contenu .pListe {
		margin-bottom:0;
	}
	#contenu .pListe + ul {
		margin-top:0;
	}
	#contenu ul li{
		list-style-image:url(/images/puce-point.gif);
		padding-bottom:.3em;
	}
	#contenu ul li.listeLiens{
		list-style-image:url(/images/puce-simple-fleche.gif);
	}
	#contenu .nowrap {
		white-space:nowrap;
	}
	#contenu .novisible {
		display:none;
	}
	#contenu div.center {
		text-align:center;
	}
	#contenu div.gauche img {
		float:left;
		margin:0 1em 1em 0;
	}
	#contenu img {
		margin-bottom:1em;
	}
	#contenu p.bottomline {
		text-align:center;
	}
	#contenu div.equipeArt {
		overflow:auto;
		margin-top:.7em;
		margin-bottom:.3em;
	}
	#contenu div.equipeArt img {
		float:left;
	}
	#contenu div.equipeArt .colonne{
		width:75%;
		float:right;
	}
	#contenu div.equipeArt p {
		margin-top:0;
	}
	#contenu div.equipeArt a {
		display:inline-block;
		padding-top:0.5em;
	}
	#contenu div.auteurChroniques {
		width:33%;
		float:right;
		text-align:right;
		font-size:0.8em;
		padding-left: 1em;
		margin-top:1.3em;
	}
	#contenu div.auteurChroniques img {float:none;}
	#contenu div.auteurChroniques div.colonne {float:none; width:100%}

/* Footer */
	#piedDePage ul.utilitaire {
		margin:5px 0 5px 0;
	}


/* --- 6 | Utilisation et attributs des fonts ---*/
	body {font-family:arial, sans-serif;}
	/*#menuDroit p {font-family:"frutiger_lt_std55_roman", arial, sans-serif;}
	#menuGauche ul,
	#contenu h1 {	font-family:"frutiger_lt_std45_light", arial, sans-serif;}*/
	
	body {font-size:14px;}
	
	#accueil h1 {font-size:1.7em;}
	#enTete div.accesPrivee p {font-size:1.6em;}
	#contenu h2 {font-size:1.25em;}
	#contenu h3 {font-size:1.12em;}
	#contenu h4 {font-size:1em;}
	#accueil h1 span,
	#enTete ul.onglet {font-size:.75em;}
	#enTete div.accesPrivee a,
	#accueil div div a,
	#contenair #filAriane,
	#contenair p.bienvenuePrivee,
	#menuGauche dl,
	#menuDroit ul {font-size:.9em;}
	#contenu p.date {font-size:0.8em;}
	#contenu p.note-bas-page,
	#contenu a.note-bas-page,
	#piedDePage p,
	ul.utilitaire {font-size:.7em;}
	.appel-note {font-size:0.65em; padding: 0 0.33em}
	
	
	#enTete ul.onglet,
	#contenair #filAriane,
	#menuGauche li,
	#menuDroit p,
	#contenu p.pickupline,
	#contenu p.bottomline,
	#contenu div.equipeArt span,
	#contenu div.equipeArt a,
	#piedDePage ul{font-weight:bold;}
	
	#accueil div div h2,
	#menuGauche dl,
	#menuGauche ul ul li	{font-weight:normal;}
	
	#contenair p.bienvenuePrivee,
	#contenu .intro p,
	#contenu .introLarg100 p,
	#contenu div.equipeArt a.mail {font-style:italic;}
	
	#contenu p.pickupline{font-style:normal;}
	
	#accueil h1,
	#contenu h1,
	#contenu div.equipeArt a.mail {font-weight:normal;}
	
	
/* --- 7 | Couleur de texte, couleur de fond et image de fond --- */
	#global {background:url(/images/bg_header-conteneur.gif) 0% 10px repeat-x;}
	#contenair #filAriane .filArianeAccueil {background:url(/images/a00-ariane-icone-accueil.png) 0% 50% no-repeat;}
	
	/* Marron foncé */
	#accueil div div h2,
	#contenu p.pickupline,
	#contenu h2,
	#contenu h2 a,
	#contenu h3,
	#contenu h4,
	#contenu strong,
	#contenu b {color:#4b3900;}	
	#enTete ul.onglet li a:hover,
	#enTete ul.onglet li a.selected,
	#menuGauche ul li a:hover,
	#menuGauche ul li a.selected,
	#piedDePage  {background:#4b3900;}
	#enTete div.accesPrivee,
	#enTete ul.onglet li a {border-color:#4b3900;}
	

	/* Marron clair */
	#enTete ul.onglet li a,
	#enTete div.accesPrivee,
	#menuGauche ul,
	#menuDroit p
	{background-color:#948671;}

	/* Gris (selon charte pour les bordures (#a7a9ac;) et les fonds, plus foncé pour les textes (#525354;) */
	#enTete ul.utilitaire li a {color:#525354;}
	#enTete ul.utilitaire li {border-color:#525354;}
	#menuDroit ul {border-color:#a7a9ac;}
	#accueil h1,
	#contenu h1,
	#menuDroit ul
	{background-color:#a7a9ac;}
	
	/* ... et un troisième gris pour le lulz */
	#contenair #filAriane,
	#contenair #filAriane a {color:#7d7e80;}

	/* Blanc */
	#enTete div.accesPrivee p,
	#enTete div.accesPrivee a,
	#enTete ul.onglet li a,
	#menuGauche a,
	#menuGauche dl,
	#menuDroit p,
	#menuDroit p.no-menu a,
	#accueil h1 span,
	#contenu h1,
	#piedDePage ul.utilitaire li a,
	#piedDePage p {color:white;}
	#menuGauche ul li,
	#menuDroit ul li,
	#piedDePage ul.utilitaire li {border-color:white;}
	
	/* Noir */
	#accueil h1,
	#accueil div div a,
	#menuDroit ul li a,
	#contenu ul li a,
	#contenu a {color:black;}
	
	/* Ombres portées */
	/* Peut-être prévoir un hack IE 9 et moins avec un background qui simulera l'ombre portée */
	#enTete ul.onglet a {
	-webkit-box-shadow: inset 0px -4px 6px -2px rgba(0, 0, 0, .2);
	-moz-box-shadow:  inset 0px -4px 6px -2px rgba(0, 0, 0, .2);
	box-shadow: inset 0px -4px 6px -2px rgba(0, 0, 0, .2);
	}
	


/* --- 8 | Définition bordure arrondie --- */
	#enTete div.accesPrivee,
	#menuGauche ul li a.first,
	#menuDroit p,
	#enTete ul.onglet li a {
		border-radius:5px 5px 0px 0px;
		-moz-border-radius:5px 5px 0px 0px;
		-webkit-border-radius:5px 5px 0px 0px;
		-o-border-radius:5px 5px 0px 0px;
	}
	
	#menuDroit p.no-menu {
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-o-border-radius:5px;
	}
	
	#menuGauche a.last,
	#menuDroit ul {
		border-radius:0px 0px 5px 5px;
		-moz-border-radius:0px 0px 5px 5px;
		-webkit-border-radius:0px 0px 5px 5px;
		-o-border-radius:0 0 5px 5px;
	}
	
	#accueil h1,
	#accueil div img,
	#menuGauche img,
	#menuGauche ul,
	#contenu h1 {
		border-radius:5px;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-o-border-radius:5px;		
	}