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

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

body {
	font-size: 13px;
	line-height: 18px; /* Hauteur de ligne */
}

#global {
	background-image: url("design/sous-menu/menu-ombre-vertical_72.png");
	background-position: 0px 94px; /* Background sous-menu, qui prend tout l'espace entre le menu et le contenu principal */
}

#global_acces {
	background-image: url(design/acces/bg-acces-body_72.png);
	background-position: 0px 96px;
	height: 750px;
}


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

/* Sous-titre */
h3 {
	background-image: url("design/puce-titre_bleu_72.gif");
}

#divers h3 {
	background-image: url(design/bg_puce-titre_72.png);
	margin-left: -29px;
	margin-right: -50px;
	padding-left: 42px;
	padding-top: 3px;
	padding-bottom: 3px;
}


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

#corps img.img-sincerite { /* Page service */
	margin-top: 285px;
	margin-left: 370px;
}

/* Image Publication */
#corps div.img-publication { /* L'image a gauche */
	width: 194px;
}

#corps div.txt-publication { /* Le texte a droite */
	float: right;
	width: 29.5em; /* Ne se redimensionne pas automatiquement */
}

#corps img.img-savoirplus {
	width: 132px;
	height: 180px;
}

#corps img.img-accueil-contacts { /* L'image qui renvoit vers la page contact */
	width: 200px;
	height: 77px;
}

/* L'image pour visionner la video (cote pro)  */
#corps img.img-accueil-videos {
	margin-right: -85px;
	width: 147px;
	height: 139px;
}

#corps img.img-accueil-annuaire {
	width: 187px;
	height: 215px;
}

#corps img.img-accueil-annuaire-pro {
	width: 193px;
	height: 150px;
}

#corps img.img-accueil-archives { /* L'image qui renvoit vers la page archives */
	width: 514px;
	height: 63px;
}

/* Imprimante */
#printer {
	top: 25px;
	left: 680px;
}

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

#video {
	background-image: url("design/videos/video-background_72.png");
	width: 665px; /* Largeur image 665 */
	height: 457px; /* Hauteur image 458 */
}

.video-display { /* La video meme */
	width: 518px; /* = Largeur de l'image de la video */
	height: 311px; /* = Hauteur de l'image de la video */
}

.video-alt { /* Texte alternatif si plugin non charge */
	width: 720px;
	height: 64px;
	margin-top: 150px;
}

.video-download { /* Page de telechargement des videos */
	width: 720px;
	margin-top: -85px;
}

img.video-miniature { /* La miniature des videos */
	width: 114px;
	height: 64px;
}

.videos-description { /* Le texte qui apparait sous la video au survole */
	background-image: url(design/puce-navigation_72.gif);
	background-position: 0px 13px;
	padding-left: 18px; /* Decalage pour la puce */
	padding-top: 10px;
}

.video-separation {
	width: 18px;
	height: 64px;
}

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

.index-flash {
	width: 775px;
	height: 548px;
	margin-top: -8px;
}

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


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

#corps { /* Generalite corps */
	width: 775px;
}

/* 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_72.png"); 
	
	/* Zones de design "vide" sans texte */
	padding-top: 28px;
	padding-right: 120px;
	padding-left: 30px;
	
	width: 510px; /* Largeur Image (660) - padding Right  */
	height: 531px; /* Hauteur image background (571) - 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_72.png"); /* 660 * 796 */
	
	/* Zones de design "vide" sans texte mais avec design */
	padding-top: 28px;
	padding-right: 156px; /* A mettre en // avec width */
	padding-left: 30px;

	width: 504px; /* Largeur */
	height: 768px; /* Hauteur image background */
}

#corps #contacts { /* Mise en forme de texte et background specifique pour la page "contacts" */
	background-image: url("design/contacts/contacts-background_72.png");
	
	/* Zones de design "vide" sans texte */
	padding-right: 19px;
	padding-left: 40px;
	
	width: 600px; /* L"argeur du texte (659)  */
	height: 766px; /* Hauteur (768px) image background */
}

#corps .publications { /* Mise en forme de texte et background specifique pour la page "publication" */
	background-image: url("design/publications/publications-background_72.png");
	
	/* Zones de design "vide" sans texte */
	padding-right: 37px;
	padding-left: 20px;
	
	width: 605px; /* Largeur (655px) - Padding right  - Padding Left */
	height: 758px; /* Hauteur image background (760) - 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_72.png");
	
	/* Zones de design "vide" sans texte */
	padding-right: 42px;
	padding-left: 20px;
	
	width: 605px; /* Largeur (667) - Padding right  */
	height: 1151px; /* Hauteur image background (1153) - 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_72.png"); /* 1102 * 760 */
	
	/* Zones de design "vide" sans texte */
	padding-right: 119px;
	padding-bottom: 1px;
	padding-left: 40px;
	
	width: 500px; /* Largeur (659)  */
	height: 546px; /* Hauteur (547) image background */
}

#corps #trouver { /* Mise en forme de texte et background specifique pour la page "trouver" */
	background-image: url("design/trouver/trouver-background_72.png"); /* 1097 * 644 */
	
	/* Zones de design "vide" sans texte */
	padding-right: 16px;
	padding-left: 44px;
	
	width: 600px; /* Largeur (660)  */
	height: 461px; /* Hauteur (462) image background */
}

#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_72.png");
	
	/* Zones de design "vide" sans texte mais avec design */
	padding-top: 1px;
	padding-right: 14px; /* A mettre en // avec width */
	padding-left: 44px;
	
	width: 600px; /* Largeur (658) */
	height: 599px; /* Hauteur image background - padding vertical (600) */
}

#corps #trouver_metier { /* Mise en forme de texte et background specifique pour la page "trouver" */
	background-image: url(design/trouver/trouver-metier-background_72.png); /* 1097 * 644 */
	
	/* Zones de design "vide" sans texte */
	padding-right: 358px;
	padding-bottom: 16px;
	padding-left: 43px;
	
	width: 807px; /* largeur du texte  */
	height: 916px; /* Dimension image background */
}

#corps .presentation { /* Mise en forme de texte et background specifique pour la page "presentation" */
	background-image: url("design/presentation/presentation-bg-intro_72.jpg"); /* 1099 * 807 */
	
	/* Zones de design "vide" sans texte */
	padding-top: 30px; /* Car pas de sous-titre sur cette page */
	padding-right: 129px;
	padding-bottom: 1px;
	padding-left: 30px;
	
	width: 500px; /* Margeur (659)  */
	height: 549px; /* Hauteur (580) image background */
}

#corps .presentation_pro { /* Mise en forme de texte et background specifique pour la page "presentation" */
	background-image: url("design/contacts/contacts-background_72.png");
	
	/* Zones de design "vide" sans texte */
	padding-right: 129px;
	padding-left: 30px;
		
	width: 500px; /* Largeur (659px)  */
	height: 766px; /* Hauteur (768px) */
}

#corps .infos { /* Mise en forme de texte et background specifique pour la page "informations" */
	background-image: url("design/infos/infos-background_72.png"); /* 1096 * 825 */
	
	/* Zones de design "vide" sans texte */
	padding-right: 124px;
	padding-bottom: 1px;
	padding-left: 55px;
	
	width: 480px; /* Largeur BG (659) - Padding  */
	height: 591px; /* Hauteur image background (592) - Padding */
}

#corps #services { /* Mise en forme de texte et background specifique pour la page "Services" */
	background-image: url("design/services/services-background_72.png");
	
	/* Zones de design "vide" sans texte */
	padding-right: 134px;
	padding-left: 53px;
	
	width: 470px; /* Largeur background(657) - Padding right */
	height: 931px; /* Hauteur image background (932) - Padding top */
}

#corps #divers { /* Les pages qui n'ont pas un background specifique */
	background-image: url(design/divers/divers-background_72.jpg);
	
	padding-right: 41px;
	padding-left: 30px;
	
	width: 588px; /* Largeur (659) */
	min-height: 600px; /* Hauteur minimum du block */
}

#corps #acces { /* Mise en forme de texte et background specifique pour la page d'accueil */
	background-image: url(design/acces/bg-acces_72.png);
	
	/* Zones de design "vide" sans texte */
	padding-top: 150px;
	padding-left: 215px;
	
	width: 576px; /* Largeur (791) image background - padding - left & right */
	height: 471px; /* Hauteur (621) 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_72.png"); 
	
	/* Zones de design "vide" sans texte */
	padding-top: 10px;
	padding-right: 121px;
	padding-bottom: 16px;
	padding-left: 43px;
	
	width: 495px; /* Largeur (659)  */
	height: 580px; /* Hauteur (537) image background */
}


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

blockquote {
	border-left-width: 7px;
	padding-left: 10px;
}

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


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

/* Barre de separation (texte) */
#corps hr {
	background-image: url("design/separation_72.png");
	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_72.png");
	height: 1px;
	margin-left: -28px; /* pour compenser le padding-left */
	margin-right: -12px; /* pour compenser le padding-right */
}

/* Separation moteur de recherche */
#corps .separation-trouver { /* Dans un div */
	background-image: url(design/trouver/separation-trouver_72.png);
	height: 13px;
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: -38px;
	width: 647px;
}

/* Separation pages contacts */
#corps .separation-contacts { /* Dans un div */
	background-image: url(design/contacts/contacts-separation_72.png);
	margin-left: -30px;
	width: 643px;
}

/* Separation pages contacts */
#corps .separation-publications { /* Dans un div */
	background-image: url(design/contacts/contacts-separation_72.png);
}

/* Separation pages contacts */
#corps .separation-divers { /* Dans un div */
	background-image: url(design/separation_72.png);
	height: 17px;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: -45px;
	width: 910px;
}


/* ################################################################################### */
/* ############################          LES PUCES        ############################ */
/* ################################################################################### */

#corps ol, ul { /* Liste ordonnee, non ordonnee */
	padding-left: 16px;
}

#corps li { /* Puce */
	list-style-image: url("design/puce_carre_rose_72.gif");
}

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

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

#corps li.chiffre { /* Chiffre */
	padding-left: -16px;
	margin-left: -16px;
}


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

#menu-rubriques {
	width: 800px;
}

#menu_rubriques_bottom {
	background-image: url(design/menu/menu_bas_72.png);
	height: 39px;
	width: 520px;
}

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


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

/* La colonne concernée */
.menu_navigation_td {
	width: 163px;
	height: 100%;
	background-image: url(design/menu/menu-ombre-separation_72.png);
	background-repeat: repeat-y;
	background-position: right;
}

#menu_navigation {
	/* background-image: url("design/menu/menu-ombre-separation_72.png"); /* La separation entre le contenu et le menu */
	/* position: relative; A changer si menu coller au corps */
	/* width: 137px;
	padding-left: 26px; */
}

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


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

.bouton-recherche { /* Conteneur pour bouton centrer PAGE RECHERCHE */
	margin-left: 110px;
}

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

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


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

/* Tableau avec les resultat des resultats des recherche */
.recherche {
	border-width: 1px;
}

#corps .contacts-equipe-tel { /* Page contacts */
	background-image: url("design/puce_titre_mauve_72.gif");
}

/* Les tableaux de donnees */
table.tb-data {
	border-width: 2px;
}

td.tb-data { 
	border-width: 3px;
}

td.tb-data-top { 
	border-width: 3px;
}

td.tb-data-titre { 
	border-width: 3px;
}

td.tb-data-right {
	border-width: 3px;
}

td.tb-data-left {
	border-width: 3px;
}

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

#menuTop { /* Scroll top pour le sous-menu */
	left: 650px;
	top: 180px;
}

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

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

#tab-mat { /* Tableau table des matiere de la page */
	width: 129px;
}

#tab-mat-top { /* Top */
	width: 129px;
	height: 13px;
}

#tab-mat-content { /* Contenu */
	font-size: 0.85em;
	word-spacing: 1px;
}

	#tab-mat-content ul { /* Les puces du sous-menu */
		padding-left: 7px;
		padding-right: 7px;
	}
	
	#tab-mat-content li.milieu { 
		padding-bottom: 3px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 103px;
		padding-top: 3px;
		border-bottom-width: 2px;
		}
		
	#tab-mat-content li.milieu-simple-dotted { 
		padding-bottom: 3px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 103px;
		padding-top: 3px;
		border-bottom-width: 2px;
		}
		
		#tab-mat-content li.milieu-double { 
			padding-bottom: 3px;
			height: 2.7em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			padding-top: 3px;
			line-height: 1.2em;
			border-bottom-width: 2px;
			}
		
		#tab-mat-content li.milieu-double-dotted { /* Sous elements */
			padding-bottom: 3px;
			height: 2.7em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			padding-top: 3px;
			line-height: 1.2em;
			border-bottom-width: 2px;
			}
		
		#tab-mat-content li.milieu-triple {  /* Sous elements */
			padding-bottom: 3px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			padding-top: 3px;
			line-height: 1.2em;
			border-bottom-width: 2px;
			}
			
		#tab-mat-content li.milieu-triple-dotted { 
			padding-bottom: 3px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			padding-top: 3px;
			line-height: 1.2em;
			border-bottom-width: 2px;
			}
		
	#tab-mat-content li.first { /* Pas de bordure en dessous pour le dernier element */
		padding-bottom: 3px;
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 103px;
		border-bottom-width: 2px;
		}
	
		#tab-mat-content li.first-double { /* Pas de bordure en dessous pour le dernier element */
			padding-bottom: 3px;
			height: 2.7em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			line-height: 1.2em;
			border-bottom-width: 2px;
			}
		
		#tab-mat-content li.first-triple { /* Pas de bordure en dessous pour le dernier element */
			padding-bottom: 3px;
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			line-height: 1.2em;
			border-bottom-width: 2px;
			}
		
	#tab-mat-content li.last { /* Pas de bordure en dessous pour le dernier element */
		height: 1.45em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
		width: 103px;
		padding-top: 3px;
		}

		#tab-mat-content li.last-double { /* Pas de bordure en dessous pour le dernier element */
			height: 2.75em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			line-height: 1.2em;
			padding-top: 3px;
			margin-top: 3px;
			}
		
		#tab-mat-content li.last-triple { /* Pas de bordure en dessous pour le dernier element */
			height: 4.05em; /* Preciser un taille pour ne pas que ça bouge avec le gras */
			width: 103px;
			line-height: 1.2em;
			padding-top: 3px;
			margin-top: 3px;
			}
			
	#tab-mat-content li.auto { /* Sans hauteur predefinie */
		width: 103px;
	}
	
#tab-mat-left-img { /* Image cote gauche */
	width: 6px;
}

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

#tab-mat-bottom { /* Bottom */
	width: 129px;
	height: 13px;
}

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


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

img.logo_forem {
	width: 72px;
	height: 68px;
}

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

#corps img.img-accueil-forem { /* L'image qui renvoit vers la page du forem */
	width: 188px;
	height: 68px;
}