/* ###################################################### */
/* ########  Chambre de la Construction de Liege  ####### */
/* ########  URL : http://www.ccl.be              ####### */
/* ###################################################### */

/* 1527 px de large --> Resolution 1600 min */

/* ################################################################################### */
/* ##############################      GENERALITE       ############################## */
/* ################################################################################### */

html {
	width: 100%;
	height: 100%;
}

body {
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	
	width: 100%;
	height: 100%;
	
	font-size: 18px;
	line-height: 24px; /* Hauteur de ligne */
	color: rgb(0,86,151); /* Bleu */
	font-family: Arial;
	
	/* L'image verticale qui separe le menu navigation du corps (si pas menu fixe) */
	/* background-image: url("design/menu/menu-ombre-separation.png");
	background-repeat: repeat-y;
	background-position: right; */
	
	background-color: #FFFFFF;
}

#global {
	background-image: url("design/sous-menu/menu-ombre-vertical.png");
	background-repeat: repeat-x;
	background-position: 0px 131px; /* Background sous-menu, qui prend tout l'espace entre le menu et le contenu principal */
	display: block;
	width: 100%;
	height: 100%;
}

#global-flash {
	background-image: none;
	width: 100%;
	height: 100%;
	display: block;
}


/* ################################################################################### */
/* ############################         LES TITRES        ############################ */
/* ################################################################################### */

/* Titre */
h2 {
	width: 30em;
	font-size: 1.65em;
	font-weight: bold;
	margin-top: 2.05em;
	padding-top: 0em;
	margin-bottom: 0px;
	padding-bottom: 0.9em;
	margin-left: 0.7em;
	font-style: italic;
	color: rgb(0,86,151); /* Bleu */
}

#divers h2 { /* Deuxieme titre dans le corps */
	color: rgb(112,73,140); /* Mauve */
	margin-left: -0.7em;
	font-size: 1.65em;
	margin-top: 0px;
	background-color: transparent;
	width: auto;
	padding-top: 0px;
	padding-bottom: 0px;
}

#video h1 { /* Le titre de la video en cours */
	color: rgb(112,73,140); /* Mauve */
	background-color: transparent; /* Par defaut background blanc */
	margin-left: 0px;
	font-size: 1.6em;
	float: left;
	display: block;
	padding-top: 0px;
	padding-bottom: 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 30em;
	text-align: center;
	font-weight: normal;
}

/* Sous-titre */
h3 {
	background-image: url("design/puce-titre_bleu.gif");
	background-repeat: no-repeat;
	background-position: bottom;
	background-position: left;
	
	padding-left: 1em; /* Car puce */
	
	font-size: 1.15em;
	font-weight: bold;
	font-style: italic;
	/* color: rgb(166,0,118); Rose */
	color: rgb(193,0,135); /* Rose */
	word-spacing: 0px;
	
	margin-bottom: 0.9em;
	margin-top: 2em;
	margin-left: -1em; /* Pour que la puce apparaisse en retrait negatif */
}

#divers h3:first-child  { /* Premier titre, pas de marge pour qu'il soit colle au bord superieur */
	margin-top: 0px;
}

#contacts h3 {
	margin-top: 3.1em;
}

#divers h3 {
	background-image: url(design/bg_puce-titre.png);
	margin-left: -45px;
	margin-right: -55px;
	padding-left: 57px;
	padding-top: 5px;
	padding-bottom: 5px;
}

#trouver_metier h3:first-child {
	margin-top: 3.5em;
}

#trouver_metier h3.titre_acces {
	margin-top: 3.1em;
}

/* Petit sous-titre */
h4 {
	font-size: 1.1em;
	font-weight: bold;
	margin-bottom: 0px;
	margin-top: 1.5em;
	text-align: left;
}

h5 {
	margin-bottom: 0;
	margin-top: 1em;
	font-weight: bold;
	font-size: 1em;
}

/* Titre colonne tableau */
h6 {
	text-align: center;
	font-style: italic;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: none;
	margin-bottom: 0.35em;
	margin-top: 0.35em;
	color: rgb(0,86,151); /* Bleu */
}

/* ################################################################################### */
/* ############################          IMAGES           ############################ */
/* ################################################################################### */

img {
	border: none;
}

/* Image Chercher */
#corps img.img-accueil {
	float: left;
	margin-left: -0.8em;
	margin-right: 1.5em;
	margin-top: 0em;
	width: auto;
	height: auto;
}

#corps img.img-accueil-contacts { /* L'image qui renvoit vers la page contact */
	float: left;
	margin-left: -1.2em;
	margin-right: 1.5em;
	margin-top: 0em;
	width: 279px;
	height: 107px;
}

#corps table.img-accueil-recherche {
	float: left;
	margin-left: -0.8em;
	margin-right: 1.5em;
	margin-top: 0em;
	width: auto;
	height: auto;
}

#corps img.img-accueil-archives { /* L'image qui renvoit vers la page archives */
	margin-left: -1em;
	width: 714px;
	height: 88px;
}

#corps img.img-accueil-annuaire {
	float: left;
	margin-left: -0.8em;
	margin-right: 1.5em;
	margin-top: 0em;
	width: 260px;
	height: 299px;
}

#corps img.img-accueil-annuaire-pro {
	float: left;
	margin-left: -0.8em;
	margin-right: 1.5em;
	margin-top: 0em;
	width: 269px;
	height: 210px;
}

#corps img.img-sincerite { /* Page service */
	position: absolute;
	margin-top: 385px;
	margin-left: 510px;
}

/* Image Publication */
#corps div.img-publication { /* L'image a gauche */
	float: left;
	margin-right: 0;
	margin-left: 0;
	margin-top: 2.6em;
	width: 269px;
	height: auto;
}

#corps div.clear-publication { /* Espace entre les element */
	clear: both;
	height: 3em;
}

#corps div.txt-publication { /* Le texte a droite */
	float: right;
	width: 28.5em;
}

#corps img.img-savoirplus {
	float: left;
	padding-top: 1em;
	margin-right: 1.6em;
	width: 183px;
	height: 250px;
}
 
/* L'image pour visionner la video */
#corps img.img-accueil-videos {
	margin-left: 1.5em;
	margin-right: -125px;
	width: 204px;
	height: 193px;
	z-index: 1;
	float: right;
	position: relative;
}

/* L'image avec les choix  */
#corps img.trouver-choix-metier {
	padding-bottom: 1em;
}

.img-plan {
	display: block;
	margin-top: 5em;
}

/* Fleche "Top" */
.top {
	float: right;
	margin-top: -1.6em;
	margin-right: 0px;
}

/* Imprimante */
#printer {
	position: absolute;
	z-index:1;
	top: 25px;
	left: 680px;
}

.logo_doc { /* LOGO PDF, WORD, etc. */
	vertical-align: middle;
	position: relative;
	width: auto; /* Par eviter que l'image ne passe par dessus le texte */
}

/* ################################################################################### */
/* ############################          VIDEOS           ############################ */
/* ################################################################################### */

/* .video { Ancienne version page video
	background-image: url("design/videos/cadre_ombre.png");
	background-repeat: no-repeat;
	width: 836px;
	height: 624px;
	text-align: center;
	padding-top: 90px;
	margin-bottom: 0px;
} */

#video {
	background-image: url("design/videos/video-background.png");
	background-repeat: no-repeat;
	width: 924px; /* Largeur image 924 */
	height: 635px; /* Hauteur image 636 */
	text-align: center;
	padding-top: 1px;
	margin-bottom: 0px;
	margin-top: 0px;
}

/* .video-display { Ancienne version - La video meme
	width: 720px;
	height: 432px;
	border-style: solid;
	border-width: 1px;
	border-color: black;
	margin-left: auto;
	margin-right: auto;
} */

.video-display { /* La video meme */
	width: 720px; /* = Largeur de l'image de la video */
	height: 432px; /* = Hauteur de l'image de la video */
	border-style: solid;
	border-width: 1px;
	border-color: black;
	margin-top: 4.35em; /* Pour coller exactement au BG */
	margin-left: 5.0em; /* Pour coller exactement au BG */
	margin-right: auto;
}

/* .video-button { Bouton pour passer d'un video a l'autre
	width: 720px;
	height: 64px;
	border: 0px;
	text-align: right;
	margin-top: 15px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0px;
} */

.video-alt { /* Texte alternatif si plugin non charge */
	width: 720px;
	height: 64px;
	border: 0px;
	text-align: center;
	margin-top: 150px;
	margin-left: auto;
	margin-right: auto;
}

/* .video-format { Zone pour changer de format
	width: 720px;
	border: 0px;
	text-align: center;
	margin-top: -85px;
	margin-left: auto;
	margin-right: auto;
} */
 
.video-download { /* Page de telechargement des videos */
	width: 720px;
	border: 0px;
	text-align: center;
	margin-top: -85px;
	margin-left: auto;
	margin-right: auto;
}

#tab-videos-liste { /* Tableau avec la liste des videos */
	margin-left: 5.2em;
	padding-left: 0px;
	margin-top: 1.1em;
	float: left;
	border-style: none;
	border-width: 0px;
	border-collapse: collapse;
	border-spacing: 0px;
	border-color: transparent;
	background-color: transparent;
}

.case-video-miniature { /* Les fond des cases du tableau avec les miniature (pour ne pas voir par transparence le fond de la page) */
	background-color: #FFFFFF;
}

img.video-miniature { /* La miniature des videos */
	padding-left: 0px; /* Separation entre les images */
	padding-right: 0px;
	margin-right: 0px;
	margin-left: 0px;
	
	width: 159px;
	height: 88px;
	
    filter: alpha(opacity=30); /* 0 = transparent, 100 = normal, Pour IE */
    opacity: 0.3; /* 0 = transparent, 1 = normal */
}

.video-separation { /* La barre de separation entre les videos */
	width: 25px;
	height: 89px;
}

.videos-description { /* Le texte qui apparait sous la video au survole */
 	color: #000082;
	vertical-align: top;
	text-align: left;
	background-image: url(design/puce-navigation.gif);
	background-repeat: no-repeat;
	background-position: 0px 13px;
	padding-left: 18px; /* Decalage pour la puce */
	padding-top: 10px;
	margin-left: 0px;
	display: none;
}


/* ################################################################################### */
/* ############################         LES LIENS         ############################ */
/* ################################################################################### */

a:link {
	text-decoration: none;
	color: rgb(0,86,151); /* Bleu */
}

a:visited { /* NB : Toujours avant le HOVER */
	text-decoration: none;
	color: rgb(0,86,151); /* Bleu */
}

a:hover { /* Lien au survole de la souris */
	text-decoration: none;
	color: #0089BF; /* Bleu plus claire */
}

a:active {
	text-decoration: none;
}

/* Les liens qui doivent ressortit par rapport au texte */
a.evidence {
	text-decoration: none;
	font-weight: normal; /* Car autre classe evidence */
	color: #0089BF;
}

a.evidence:hover {
	text-decoration: underline;
	font-style: normal;
	font-weight: normal; /* Car autre classe evidence */
}

/* Idem mais sans le souligne (exemple : les * qui renvoi en note de bas de pages, etc.) */
a.evidence2 {
	text-decoration: none;
	font-weight: normal; /* Car autre classe evidence */
	/* color: rgb(166,0,118); Rose */
   color: rgb(193,0,135); /* Rose */
}

a.evidence2:hover {
	text-decoration: underline;
	font-style: normal;
	font-weight: normal; /* Car autre classe evidence */
	/* color: rgb(166,0,118); Rose */
   color: rgb(193,0,135); /* Rose */
}

/* Page a retravailler */
a.bug {
	color: #FF3300;
	font-weight: bold; /* Car autre classe evidence */
	text-decoration: underline;
	font-style: italic;
}

/* Liens sur un titre du tableau */
a.h6link {
	color: color: rgb(0,86,151); /* Bleu */
}

a.h6link:hover {
	color: color: rgb(0,86,151); /* Bleu */
	text-decoration: underline;
}

/* Liens e-mail page "contact en direct */
a.mail {
	font-weight: bold;
	color: rgb(193,0,135); /* Rose */
}

a.mail:hover { /* Lien au survole de la souris */
	text-decoration: none;
	color: #0089BF; /* Bleu plus claire */
}

/* Liens du menu du dessous */
#menu_rubriques_bottom a {
	color: #FFFFFF;
	font-weight: normal;
}

#menu_rubriques_bottom a:visited { /* NB : Toujours avant le HOVER */
	color: #FFFFFF;
	font-weight: normal;
}

#menu_rubriques_bottom a:hover {
	font-weight: bold;
	font-size: 1em;
}

/* ################################################################################### */
/* ####################         INDEX (AVEC ANIMATION FLASH)       ################### */
/* ################################################################################### */

.index-flash {
	width: 1077px;
	height: 761px;
	margin-top: -11px;
	float: left;
}

img.index-flash { /* Pour que ça tombe pil juste avec le background */
	margin-top: -2px;
}


/* ################################################################################### */
/* ############################    CORPS DES DOCUMENTS    ############################ */
/* ################################################################################### */

#corps { /* Generalite corps */
	position: relative;
	height: 100%;
	width: 1090px;
	display: block;
	z-index: 20;
	float: left;
	padding-bottom: 1em; /* Petit espace en dessous du corps */
}

/* Padding Left + Width + Padding Right = Largeur du background */
/* Padding Top + Hight + Padding Bottom = Hauteur du background */
 
#corps .accueil { /* Mise en forme de texte et background specifique pour la page d'accueil */
	background-image: url("design/accueil/accueil-background.png");
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 40px;
	padding-right: 210px;
	padding-bottom: 0px;
	padding-left: 40px;
	font-size: 1em;
	
	text-align: justify;
	font-style: italic;
	width: 703px; /* Largeur Image (913) - padding Right  */
	height: 753px; /* Hauteur image background (793) - Pading Top */
}

#corps .accueil-pro { /* Mise en forme de texte et background specifique pour la page d'accueil PRO */
	background-image: url("design/accueil/accueil-background-pro.png"); /* 916 x 1105*/
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte mais avec design */
	padding-top: 28px;
	padding-right: 226px; /* A mettre en // avec width */
	padding-bottom: 0px;
	padding-left: 40px;
	font-size: 1em;
	
	text-align: justify;
	font-style: italic;
	width: 690px; /* Largeur Image - padding Right  */
	height: 1077px; /* Hauteur image background - Pading Top */
}

#corps #contacts { /* Mise en forme de texte et background specifique pour la page "contacts" */
	background-image: url("design/contacts/contacts-background.png"); /* 1099 * 1079 */
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 334px;
	padding-bottom: 1px;
	padding-left: 60px;
	
	text-align: left;
	font-style: italic;
	width: 700px; /* largeur du texte  */
	height: 1078px; /* Dimension image background */
}

#corps .publications { /* Mise en forme de texte et background specifique pour la page "publication" */
	background-image: url("design/publications/publications-background.png");
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 67px;
	padding-bottom: 1px;
	padding-left: 30px;
	
	text-align: justify;
	font-style: normal;
	width: 825px; /* Largeur (922px) - Padding right  - Padding Left */
	height: 1050px; /* Hauteur image background (1052) - Padding top*/
}

#corps .publications_pro { /* Mise en forme de texte et background specifique pour la page "publication" PRO */
	background-image: url("design/publications/publications-pro-bg.png");
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 110px;
	padding-bottom: 1px;
	padding-left: 30px;
	font-size: 1.0em;
	
	text-align: justify;
	font-style: normal;
	width: 832px; /* Largeur (923px) - Padding right  */
	height: 1600px; /* Hauteur image background (1602) - Padding-top */
}

#corps .trouver-choix { /* Mise en forme de texte et background specifique pour la page "trouver-choix" */
	background-image: url("design/trouver/trouver-choix-background.png"); /* 1102 * 760 */
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 358px;
	padding-bottom: 16px;
	padding-left: 50px;
	
	text-align: left;
	font-style: italic;
	width: 700px; /* largeur du texte  */
	height: 743px; /* Dimension image background */
}

#corps #trouver { /* Mise en forme de texte et background specifique pour la page "trouver" */
	background-image: url("design/trouver/trouver-background.png");
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 370px;
	padding-left: 55px;
	
	text-align: left;
	font-style: italic;
	width: 790px; /* Largeur (917)  */
	height: 641px; /* Hauteur image background (642) */
}

#corps #trouver-pro { /* Mise en forme de texte et background specifique pour la page de recherche PRO */
	background-image: url("design/trouver/trouver-background-pro.png");
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte mais avec design */
	padding-top: 1px;
	padding-right: 210px; /* A mettre en // avec width */
	padding-bottom: 0px;
	padding-left: 60px;
	
	text-align: justify;
	font-style: italic;
	width: 700px; /* Largeur du texte (914) */
	height: 834px; /* Hauteur image background - padding vertical (833) */
}

#corps #trouver_metier { /* Mise en forme de texte et background specifique pour la page "trouver" */
	background-image: url(design/trouver/trouver-metier-background.png); /* 1097 * 644 */
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 358px;
	padding-bottom: 16px;
	padding-left: 60px;
	
	text-align: left;
	font-style: italic;
	width: 790px; /* largeur du texte  */
	height: 642px; /* Dimension image background */
}

#corps .presentation { /* Mise en forme de texte et background specifique pour la page "presentation" */
	background-image: url("design/presentation/presentation-background-intro.png"); 
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 40px; /* Car pas de sous-titre sur cette page */
	padding-right: 189px;
	padding-bottom: 1px;
	padding-left: 40px;
	
	text-align: justify;	
	font-style: normal;
	width: 685px; /* Largeur (914)  */
	height: 1035px; /* Hauteur (1076) */
}

#corps .presentation_pro { /* Mise en forme de texte et background specifique pour la page "presentation" */
	background-image: url("design/contacts/contacts-background.png"); /* 1099 * 1079 */
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 354px;
	padding-left: 40px;
	
	text-align: justify;
	
	width: 700px; /* Largeur */
	height: 1062px; /* Hauteur */
}

#corps .infos { /* Mise en forme de texte et background specifique pour la page "informations" */
	background-image: url("design/infos/infos-background.png"); /* 1096 * 825 */
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 175px;
	padding-bottom: 16px;
	padding-left: 75px;
	
	text-align: justify;	
	font-style: normal;
	width: 660px; /* Largeur BG (910) - Padding  */
	height: 779px; /* Hauteur image background (820) - Padding */
}

#corps #services { /* Mise en forme de texte et background specifique pour la page "Services" */
	background-image: url("design/services/services-background.png");
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 1px;
	padding-right: 188px;
	padding-bottom: 0em;
	padding-left: 75px;
	
	text-align: justify;	
	font-style: normal;
	width: 650px; /* Largeur background(913) - Padding right */
	height: 1282px; /* Hauteur image background (1294) - Padding top */
}

#corps #divers { /* Les pages qui n'ont pas un background specifique */
	background-image: url(design/divers/divers-background.jpg);
	background-repeat: repeat-y;

	min-height: 100%; /* Hauteur minimum du fond */
	
	padding-right: 75px;
	padding-top: 1px;
	padding-bottom: 0;
	padding-left: 40px;
	margin-bottom: -1em;
	
	text-align: justify;
	font-style: normal;
	
	width: 800px; /* Largeur = 915 px */
}

#corps #acces { /* Mise en forme de texte et background specifique pour la page d'accueil */
	background-image: url(design/acces/bg-acces.png);
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 210px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 300px;
	
	text-align: left;
	font-style: italic;
	width: 799px; /* Largeur image background - padding - left & right */
	height: 652px; /* Hauteur image background - Padding top & bottom */
}

#corps #jurisprudence { /* Mise en forme de texte et background specifique pour la page "Jurisprudence" */
	background-image: url("design/trouver/trouver-background.png"); /* 1097 * 644 */
	background-repeat: no-repeat;
	
	/* Zones de design "vide" sans texte */
	padding-top: 10px;
	padding-right: 362px;
	padding-bottom: 16px;
	padding-left: 60px;
	
	text-align: justify;
	font-style: italic;
	width: 675px; /* largeur du texte  */
	height: 580px; /* Dimension image background */
}



/* ######################################################################################## */
/* ############################      MISE EN FORME TEXTE       ############################ */
/* ######################################################################################## */

p {
	margin-bottom: 1em;
	margin-top: 1em;
}

p.colle { /* Paragraphe colle */
	margin-top: 0;
}

p.colle-bas { /* Paragraphe colle (pour éviter le cumule de marhe entre un paragraphe et tableau par exemple) */
	margin-bottom: 0;
}

em { /* Indique une mise en exergue (emphase) */
	font-style: italic;
}

strong { /* Indique une mise en exergue plus forte (renforcement) */
	font-weight: bold;
	font-size: 1em;
}

#corps .souligne { /* Texte souligne */
	text-decoration: underline;
}

#corps .signature { /* Texte avec une grande marge gauche */
	float: right;
	display: block;
	margin-bottom: 1em;
	margin-right: 2.8em;
	font-style: italic;
	font-weight: bold;
}

.remerciement { /* Block aligner a droite (span dans un div, etc.) */
	margin-top: -1.4em;
	margin-left: 27.5em;
	margin-bottom: 1.5em;
	display: block;
	font-weight: bold;
}

#trouver .signature {
	float: left;
	margin-right: 0;
	padding-top: 1.5em;
	margin-left: 28.5em;
}

.evidence { /* Mot colore dans le texte pour qu'il ressorte plus */
	font-weight: bold;
	/* color: rgb(166,0,118); Rose */
	color: rgb(193,0,135); /* Rose */
}

p.intro { /* Paragraphe sans titre prealable (laisser en em !) */
	margin-top: 0em;
	padding-top: 0em;
}

blockquote {
	/* background-color: #FFFFFF;
	border-left-width: 7px;
	border-left-color: rgb(0,86,151);
	border-left-style: solid;
	padding-left: 10px;
	*/
	margin-left: 0px;
	margin-right: 0px;
	font-weight: bold;
}

.maj { /* Derniere MAJ de la DB */
	font-size: 0.95em;
	font-style: italic;
}

/* ################################################################################### */
/* ############################          SEPARATION       ############################ */
/* ################################################################################### */

/* Barre de separation (texte) */
#corps hr {
	background-image: url("design/separation.png");
	background-position: left;
	border: 0px;
	height: 1px;
	margin-left: -40px; /* pour compenser le padding-left */
	margin-right: -6px; /* pour compenser le padding-right */
}

#corps .separation-accueil { /* Dans un div */
	background-image: url("design/separation.png");
	background-position: left;
	border: 0px;
	height: 1px;
	margin-left: -40px; /* pour compenser le padding-left */
	margin-right: -20px; /* pour compenser le padding-right */
}

	.separation-accueil hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}

#corps .separation-adresses { /* Dans un div (point tille) */
	background-image: url("design/separation.png");
	background-position: left;
	border: 0px;
	height: 1px;
	margin-left: -2em; /* pour compenser le padding-left */
	width: 49em;
}

	.separation-adresses hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}
	
/* Separation moteur de recherche */
#corps .separation-trouver { /* Dans un div */
	background-image: url(design/trouver/separation-trouver.png);
	background-repeat: repeat-x;
	background-position: left;
	border: none;
	height: 17px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: -45px;
	margin-right: 0px;
	width: 897px;
}

	.separation-trouver hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}

#corps .separation-trouver-2 { /* Dans un div (point tille) */
	background-image: url("design/separation.png");
	background-position: left;
	border: 0px;
	height: 1px;
	margin-left: -2.9em; /* pour compenser le padding-left */
	width: 50em;
}

	.separation-trouver-2 hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}
	
/* Separation pages contacts */
#corps .separation-contacts { /* Dans un div */
	background-image: url(design/contacts/contacts-separation.png);
	background-repeat: repeat-x;
	background-position: left;
	border: none;
	height: 1em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: -45px;
	width: 910px;
}

	.separation-contacts hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}
	
/* Separation pages publications */
#corps .separation-publications { /* Dans un div */
	background-image: url(design/contacts/contacts-separation.png);
	background-repeat: repeat-x;
	background-position: left;
	border: none;
	height: 1em;
	margin-top: 0.3em;
	margin-bottom: 0.3em;
	margin-left: -2.2em;
	width: 50.5em;
}

	.separation-publications hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}
	
/* Separation pages contacts */
#corps .separation-divers { /* Dans un div */
	background-image: url(design/separation.png);
	background-repeat: repeat-x;
	background-position: left;
	border: none;
	height: 17px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: -45px;
	width: 910px;
}

	.separation-divers hr { /* HR dans div pour avoir le meme resultat dans firefox et IE */
		display: none;
	}
	
/* ################################################################################### */
/* ############################          LES PUCES        ############################ */
/* ################################################################################### */

#corps ol, ul { /* Liste ordonnee, non ordonnee */
	margin-top: 0px;
	margin-left: 0px;
	padding-left: 0.9em;
}

#corps li { /* Puce */
	list-style-image: url("design/puce_carre_rose.gif");
	list-style-type: square;
	list-style-position: outside;
	margin-top: 0.4em;
	display: list-item;
}

#corps li.puce2 { /* Puce de 2e niveau */
	list-style-image: url("design/puce_carre_bleu.gif");
	list-style-type: square;
	list-style-position: outside;
}

#corps li.puce3 { /* Puce de 3e niveau */
	list-style-image: url("design/puce_carre_mauve.gif");
	list-style-type: square;
	list-style-position: outside;
}

#corps li.chiffre { /* Chiffre */
	list-style-type: decimal;
	list-style-image: none;
	list-style-position: inside;
	padding-left: -0.9em;
	margin-left: -0.9em;
}



/* ################################################################################### */
/* ###################               MENU PRINCIPAL              ##################### */
/* ###################               Les  rubriques              ##################### */
/* ################################################################################### */

#menu-rubriques {
	padding: 0px;
	margin: 0px;
	width: 1075px;
	background-color: #FFFFFF;
}

#menu_rubriques_bottom { /* Menu colle en bas de la fenetre */
	clear: both;
	display: block;	
	
	background-image: url(design/menu/menu_bas.png);
	background-repeat: no-repeat;
	
	text-align: center;
	color: #FFFFFF; /* Pour les tirets de separation */
	font-size: 0.80em;	
	
	height: 54px;
	width: 722px;
	position: fixed;
	float: left;
	visibility: hidden;
	z-index: 20;
	bottom: 0px;
	left: 0px;
	
	padding-top: 1.5em;
	margin-bottom: -1.5em; /* Compensation padding */
	margin-left: 4.5em;
}

#menu_rubriques_bottom_liens li {  /* Liste des liens du menu du dessous */
	width: auto;
	display: inline;
}

#menu-rubriques img { /* Espacement entre les images */
	padding-left: 0px;
	padding-right: 2.5px;
}


/* ################################################################################### */
/* ###################               MENU NAVIGATION             ##################### */
/* ###################  Professionels - affilies - particuliers  ##################### */
/* ################################################################################### */


/* La tableau avec les différentes colones (content + navigation) */
.menu_navigation_table {
	width: 100%;
	height: 100%;
	margin: -1px;
}

.menu_navigation_content {
	vertical-align: top;
}
 
/* La colonne navigation */
.menu_navigation_td {
	width: 226px;
	height: 100%;
	background-image: url(design/menu/menu-ombre-separation.gif);
	background-repeat: repeat-y;
	background-position: right;
	vertical-align: top;
	text-align: right;
}

/* Ancienne version avec des float non comptatible IE 6 */
#menu_navigation {
	/* background-image: url("design/menu/menu-ombre-separation.gif"); /* La separation entre le contenu et le menu */
	/* background-repeat: repeat-y;
	/* position: relative; A changer si menu coller au corps */
	/* float: right; */
	/* position: fixed;
	top: 0;
	right: 0;
	z-index: 100; /* 10 pour mettre en dessous / 100 pour mettre au dessus */
	/* display: block;
	width: 192px;
	height: 100%;
	min-height: 100%;
	padding-left: 35px;
	text-align: center;
	/* overflow: auto; */
}

/* Les boutons */
#menu_navigation ul.btn_navigation { /* La liste */
	list-style-type: none;
	padding-left: 2em;
}

#menu_navigation li	{ /* Espacement entre les boutons */
	margin-top: 0px;
	margin-bottom: 0.1em;
	padding-bottom: 0px;
	padding-top: 0px;
}

#menu_navigation li.btn_navigation	{ /* Le bouton avec une fleche devant (= rubrique en cours) */
	list-style-image: url("design/puce-navigation.gif");
}

/* Le logo CCL */
#menu_navigation .logo {
	padding-top: 2em;
	padding-bottom: 6.5em;
	margin-right: 1em;
	
}



/* ################################################################################### */
/* ###################                 FORMULAIRE                ##################### */
/* ################################################################################### */

form {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
}

select { /* Champs de type select */
	margin-bottom: 0px;
	margin-top: 0px;
	
	color: rgb(0,86,151);
	font-style: italic;
	font-size: 0.9em;
	
	border-width: 2px;
	border-style: solid;
	border-color: #E0E6F1;
}

select.champs { /* Taille des champs select (il faut mettre un peu plus que pour les input) */
	width: 30.1em;
}

	select.champs-on { /* Si Focus */
		width: 30.1em;
	}

input { /* Champs de type input */
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left: 0.4em;
	
	color: rgb(0,86,151);
	font-style: italic;
	font-size: 0.9em;
	
	border-width: 2px;
	border-style: solid;
	border-color: #E0E6F1;
}

textarea { /* Zone texte pour le formulaire de feedback */
	color: rgb(0,86,151);
	font-style: italic;
	font-size: 0.9em;
	padding-left: 0.4em;
	padding-top: 0.4em;
	
	border-width: 2px;
	border-style: solid;
	border-color: #E0E6F1;
	
	margin-bottom: 2px; /* Pour eviter que quand l'element a le focus les elements en dessous bougent a cause de la bordure plus epaisse */
}

textarea.textarea {
	width: 29.9em;
	max-width: 100%;
	height: 5em;
}

textarea.textarea-on { /* Les textarea "onFocus"  */
	margin-right: 0px;
	width: 29.9em;
	height: 5em;
	border-width: 3px;
	border-color: #84ACE8;
	border-style: solid;
	outline: none; /* Important pour supprimer l'effet de safari */
	
	margin-bottom: 0px; /* Pour eviter que quand l'element a le focus les elements en dessous bougent a cause de la bordure plus epaisse */
}

input[type="image"] { /* Pas de bordure pour les boutons images */
	border-width: 0;
	border-style: none;
	padding-left: 0px;
}

label {
	width: 7em;
	margin-right: 0.3em;
	
	text-align: left;
	font-size: 1.1em;
	
	display: block; /* Par defaut inline (pour pouvoir fixer width) */
}

div.zone_champs { /* input + obligatoire */
}

.champs { /* Les input */
	width: 29.5em;
	margin-right: 2px; /* Pour eviter que le design bouge lors du onFocus (et de la bordure plus epaisse) */
}

.champs-on { /* Les input "onFocus"  */
	margin-right: 0px;
	width: 29.5em;
	border-width: 3px;
	border-color: #84ACE8;
	outline: none; /* Important pour supprimer l'effet de safari */
}

.champs-petit { /* Les input (page inscription par exemple) */
	width: 22em;
	margin-right: 2px; /* Pour eviter que le design bouge lors du onFocus (et de la bordure plus epaisse) */
}

.champs-petit-on { /* Les input "onFocus"  */
	margin-right: 0px;
	width: 22em;
	border-width: 3px;
	border-color: #84ACE8;
	outline: none; /* Important pour supprimer l'effet de safari */
}

.champs-acces { /* Les input de la page d'acces */
	width: 18em;
}

.champs-acces-on { /* onFocus */
	width: 18em;
	border-width: 3px;
	border-color: #84ACE8;
	outline: none; /* Important pour supprimer l'effet de safari */
}

#jurisprudence select { /* Les input de la page d'acces */
	width: 34em;
}

#trouver_metier .champs { /* Les input de la page trouver par metier */
	margin-bottom: 2px;
}

#trouver_metier select.champs { /* Taille des champs select (il faut mettre un peu plus que pour les input) */
	width: 38.5em;
	margin-bottom: 2px;
}

	#trouver_metier	select.champs-on { /* Si Focus */
		width: 38.5em;
		margin-bottom: 0px;
	}

.aide { /* Bouton aide */
	margin-left: 0.3em;
}

.commentaire { /* commentaire sous le formulaire */
	margin-top: 2em;
	margin-bottom: 2.5em;
	text-align: justify;
	width: 34em;
	font-size: 1em;
}

#trouver .commentaire { /* commentaire sous le formulaire */
	width: 35.2em;
	margin-bottom: 1em;
}

#trouver-pro .commentaire { /* commentaire sous le formulaire pro */
	width: 35.2em;
}

#jurisprudence .commentaire { /* commentaire sous le formulaire */
	margin-top: 1.5em;
	width: 40em;
}

#trouver_metier p.cp { /* Code postal sous le formulaire */
	margin-top: 2em;
	font-size: 1.1em;
}

#trouver_metier .champs-cp { /* Le champs code postal */
	width: 10em;
	margin-bottom: 2.6em;
}

#trouver_metier .champs-cp-on { /* onFocus */
	width: 10em;
	border-width: 3px;
	border-color: #84ACE8;
	outline: none; /* Important pour supprimer l'effet de safari */
	margin-bottom: 2.5em;
}

.bouton-centre { /* Conteneur pour bouton centrer */
	text-align: center;
}

.bouton-recherche { /* Conteneur pour bouton centrer PAGE RECHERCHE */
	margin-left: 170px;
	margin-top: 0em;
}

.bouton-acces { /* Conteneur pour bouton centrer PAGE ACCES */
	margin-left: 185px;
}

.bouton-acces-inscription { /* Conteneur pour bouton centrer */
	margin-top: 305px;
	margin-left: 185px;
}

.obligatoire { /* Champs obligatoire */
	color: rgb(193,0,135); /* Rose */
}

.bouton-admin { /* Bouton input non graphique cote admin */
	cursor: pointer;
}

/* ################################################################################### */
/* ############################          TABLEAU          ############################ */
/* ################################################################################### */

table {
	border-style: none;
	border-spacing: 0px;
	border-collapse: collapse; 
}

/* Tableau avec les resultat des resultats des recherche */
.recherche {
	border-width: 1px;
	width: 40em;
	font-style: normal;
}

/* Formulaire de recherche */
tr.formulaire_recherche {
	height:  2.45em; /* Pour IE voir CSS IE */
}


/* Tableau avec la liste des  contacs + bareme */
table.contacts-equipe {
	font-style: italic;
	width: 45em;
	margin-top: 1em;
}

.contacts-equipe-nom {
	margin-left: 1em;
	font-weight: bold;
	color: rgb(193,0,135); /* Rose */
	float: left;
	margin-bottom: 1em;
	margin-right: 0.3em;
}

.contacts-equipe-fonction {
	font-size: 0.95em;
	font-weight: bold;
	margin-bottom: 1em;
}

#corps .contacts-equipe-tel { /* Page contacts */
	background-image: url("design/puce_titre_mauve.gif");
	background-repeat: no-repeat;
	background-position: 1.1em 0.3em;
	width: 8em; /* Assez large pour numero + puce */
	padding-left: 1.2em;
	font-weight: bold;
	float: right;
	font-style: normal;
	margin-bottom: 1em;
	text-align: right;
}

p.tableau {
	font-size: 0.95em;
	margin-top: 0px;
	margin-bottom: 0.9em;
	margin-left: 1.1em;
}


/* Les tableaux de donnees */
table.tb-data {
	font-size: 0.9em;
	background-color: rgb(239,247,257); /* bleu pale */
	border-style: solid;
	border-width: 3px;
	border-collapse: collapse;
	border-spacing: 0px;
	border-color: #FFFFFF;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	width: 100%;
}

td.tb-data { 
	border-width: 4px;
	border-style: solid; 
	padding-left: 0.6em;
	padding-right: 0.6em;
	border-color: #FFFFFF;
	vertical-align: middle;
}

td.tb-data-bloque { /* Tableau inscrit, les comptes bloques */
	background-color: #FEFBE7; /* jaune pale */
}

td.tb-data-affilie { /* Tableau inscrit, les affilies (compte inscrit + affilie) */
	background-color: #CFE9DA; /* vert pale */
}

td.tb-data-top { 
	border-width: 4px;
	border-style: solid; 
	padding-left: 0.6em;
	padding-right: 1em;
	border-color: #FFFFFF;
	vertical-align: top;
}

td.tb-top { /* Label formulaire (par exemple lorsque suivit d'un textarea) */
	vertical-align: top;
	padding-top: 0.55em;
}

td.tb-data-titre { /* Titre colonne */
	border-width: 4px;
	border-style: solid; 
	padding-left: 0.6em;
	padding-right: 0.6em;
	background-color: rgb(240,242,245);
	border-color: #FFFFFF;
}

td.tb-data-right {
	border-width: 4px;
	border-style: solid; 
	padding-left: 0.6em;
	padding-right: 0.6em;
	border-color: #FFFFFF;
	vertical-align: middle;
	text-align: right;
	width: 2.5em;
}

td.tb-data-left {
	border-width: 4px;
	border-style: solid; 
	padding-left: 0.6em;
	padding-right: 0.6em;
	border-color: #FFFFFF;
	vertical-align: middle;
	text-align: left;
	width: 2.5em;
}

/* Les tableau avec les intert de retard TP */
.interet_mois {
	width: 7%;
	font-size: 0.95em;
}


/* ################################################################################### */
/* #############################     TABLE DES MATIERES     ########################## */
/* ################################################################################### */

#menuTop { /* Scroll top pour le sous-menu */
	position: fixed;
	left: 903px;
	top: 210px;
	z-index: 30;
}

#menuTop-nofixed { /* Version sans scroll top pour le sous-menu */
	position: absolute;
	left: 903px;
	top: 210px;
}

/* ################################# Version tableau ################################ */

#tab-mat { /* Tableau table des matiere de la page */
	background-color: transparent;
	width: 179px;
	border-spacing: 0px;
	border-collapse: collapse; 
}

#tab-mat-top { /* Top */
	background-color: transparent;
	width: 179px;
	height: 18px;
}

#tab-mat-content { /* Contenu */
	background-color: #FFFFFF;
	font-size: 0.85em;
	letter-spacing: 0px;
	word-spacing: 2px;
	vertical-align: top;
}

	#tab-mat-content a { /* Les liens du sous-menu */
		font-weight: normal;
		text-decoration: none;
		color: rgb(0,86,151); /* Bleu */
	}
	
	#tab-mat-content a:hover { /* Les liens du sous-menu */
		font-weight: bold;
		text-decoration: none;
		color: rgb(0,86,151); /* Bleu */
	}
	
	#tab-mat-content ul { /* Les puces du sous-menu */
		margin-top: 0px;
		margin-left: 0px;
		margin-bottom: 0px;
		padding-left: 10px;
		padding-right: 10px;
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	#tab-mat-content li.milieu { 
		list-style-image: none;
		list-style-type: none;
		padding-bottom: 3px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 141px;
		padding-top: 3px;
		margin-top: 0px;
		margin-bottom: 0px;
		border-bottom-color: #6AD7FF;
		border-bottom-style: solid;
		border-bottom-width: 2px;
		text-decoration: none;
	}
	
	#tab-mat-content li.milieu-simple-dotted { 
		list-style-image: none;
		list-style-type: none;
		padding-bottom: 3px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 141px;
		padding-top: 3px;
		margin-top: 0px;
		margin-bottom: 0px;
		border-bottom-color: #6AD7FF;
		border-bottom-style: dashed;
		border-bottom-width: 2px;
		text-decoration: none;
	}
	
		#tab-mat-content li.milieu-double { 
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 3px;
			height: 2.7em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			padding-top: 3px;
			line-height: 1.2em;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			text-decoration: none;
		}
		
		#tab-mat-content li.milieu-double-dotted { /* Sous elements */
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 3px;
			height: 2.7em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			padding-top: 3px;
			line-height: 1.2em;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: dashed;
			border-bottom-width: 2px;
			text-decoration: none;
		}
		
		#tab-mat-content li.milieu-triple {  /* Sous elements */
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 3px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			padding-top: 3px;
			line-height: 1.2em;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			text-decoration: none;
		}
			
		#tab-mat-content li.milieu-triple-dotted { 
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 3px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			padding-top: 3px;
			line-height: 1.2em;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: dashed;
			border-bottom-width: 2px;
			text-decoration: none;
		}
		
	#tab-mat-content li.first { /* Pas de bordure en dessous pour le dernier element */
		list-style-image: none;
		list-style-type: none;
		padding-bottom: 3px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 141px;
		padding-top: 1px;
		margin-top: 0px;
		margin-bottom: 0px;
		border-bottom-color: #6AD7FF;
		border-bottom-style: solid;
		border-bottom-width: 2px;
		text-decoration: none;
	}
	
		#tab-mat-content li.first-double { /* Pas de bordure en dessous pour le dernier element */
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 3px;
			height: 2.7em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			line-height: 1.2em;
			padding-top: 1px;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			text-decoration: none;
		}
		
		#tab-mat-content li.first-triple { /* Pas de bordure en dessous pour le dernier element */
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 3px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			line-height: 1.2em;
			padding-top: 1px;
			margin-top: 0px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: solid;
			border-bottom-width: 2px;
			text-decoration: none;
		}
		
	#tab-mat-content li.last { /* Pas de bordure en dessous pour le dernier element */
		list-style-image: none;
		list-style-type: none;
		padding-bottom: 0px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 141px;
		padding-top: 3px;
		margin-top: 0px;
		margin-bottom: 0px;
		border-bottom-color: #6AD7FF;
		border-bottom-style: solid;
		border-bottom-width: 0px;
		text-decoration: none;
	}

		#tab-mat-content li.last-double { /* Pas de bordure en dessous pour le dernier element */
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 0px;
			height: 2.75em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			line-height: 1.2em;
			padding-top: 3px;
			margin-top: 3px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: solid;
			border-bottom-width: 0px;
			text-decoration: none;
		}
		
		#tab-mat-content li.last-triple { /* Pas de bordure en dessous pour le dernier element */
			list-style-image: none;
			list-style-type: none;
			padding-bottom: 0px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 141px;
			line-height: 1.2em;
			padding-top: 3px;
			margin-top: 3px;
			margin-bottom: 0px;
			border-bottom-color: #6AD7FF;
			border-bottom-style: solid;
			border-bottom-width: 0px;
			text-decoration: none;
		}
		
	#tab-mat-content li.auto { /* Sans hauteur predefinie */
		list-style-image: none;
		list-style-type: none;
		padding-bottom: 3px;
		height: auto;
		width: 141px;
		padding-top: 3px;
		margin-top: 0px;
		margin-bottom: 0px;
		border-bottom-color: #6AD7FF;
		border-bottom-style: solid;
		border-bottom-width: 2px;
		text-decoration: none;
	}
	
#tab-mat-left { /* Cote gauche */
	background-color: #FFFFFF;
	text-align: left;
}

#tab-mat-right { /* Cote droit */
	background-color: #FFFFFF;
	text-align: right;
}

#tab-mat-left-img { /* Image cote gauche */
	width: 8px;
}

#tab-mat-right-img { /* Image cote droit */
	width: 9px;
}

#tab-mat-bottom { /* Bottom */
	background-color: transparent;
	width: 179px;
	height: 18px;
}

/* Si il y a des liens boutons au lieu de textes */
#tab-mat-content .tab-mat-boutons {
	text-align: center;
	width: 161px;
}

/* ################################################################################### */
/* ############################           VOEUX           ############################ */
/* ################################################################################### */

.voeux-apercu { /* Apercu de l'e-mail qui sera envoye */
	background-color: #FFFFFF;
	
	width: 47.5em;
	
	border-width: 2px;
	border-style: solid;
	border-color: #CAD5E8;
	
	margin-bottom: 1em;
	padding: 0.5em;
}

.voeux-apercu-info {
	background-color: rgb(240,242,245);
	
	width: 46em;
	
	border-width: 2px;
	border-style: solid;
	border-color: #E0E6F1;
	
	margin-bottom: 1em;
	padding: 0.5em;
}

/* ################################################################################### */
/* ############################           FOREM           ############################ */
/* ################################################################################### */

#forem { /* Style spécifique pour la page forem */
	font-family: "Trebuchet MS", arial;
	width: 39em;
	margin-left: -1em;
	text-align: justify;
	color: #136d86; /* Verdatre */
}

a.lien-accueil-forem { /* Lien forem sur la page d'accueil */
	color: #136d86;
}

a.lien-accueil-forem:hover {
	color: #0089BF;
}

img.logo_forem {
	float: left;
	margin-right: 1em;
	margin-bottom: 0em;
	width: 100px;
	height: 94px;
}

#forem table {
	margin-top: 3em;
}

#forem tr {
	vertical-align: top;
}

#forem h3 {
	list-style-type: none;
	margin-top: 0;
	padding-top: 0;
	background-image: none;
	color: #136d86; /* Verdatre */
}

#forem h4 {
	font-size: 1.4em;
}

#forem div.collaborateur {
	margin-right: 2.6em;
	margin-left: 0.8em;
}

img.photo-collaborateur { /* Photos des collaborateurs */
	width: 88px;
	height: 120px;
}

#corps img.img-accueil-forem { /* L'image qui renvoit vers la page du forem */
	float: left;
	margin-left: -0.7em;
	margin-right: 1.5em;
	margin-top: 0.1em;
	width: 261px;
	height: 95px;
}