/* ################################### */
/*  Site personnel de CEDRIC DENOEL    */
/*  URL : http://www.cedricdenoel.be   */
/*  E-MAIL : contact@cedricdenoel.be   */
/* ################################### */





/* ################################################################## */
/* ######################    G E N E R A L    ####################### */
/* ################################################################## */

body {
	background-color: #EBEBEB;
	/* background-image:url(design/motif_bis.jpg); */
	margin-top: 20px;
	margin-bottom: 15px;
	margin-right: 0px;
	margin-left: 0px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

/* Le tableau du site */
#tab-site {
	border: 0px;
	border-collapse: collapse; /* Pour coller les cellules */
}


/* ################################################################## */
/* #########################     T O P     ########################## */
/* ################################################################## */

/* La zone de titre */
#tab-titre {
	background-color: #FFA54A;
}

/* Le titre du site */
h1 {
	color: White;
	font-size: 35px;
	margin-left: 10px;
	margin-bottom: 5px;
}

/* La ligne du "design" */
.barre-haut {
	background-color: #FFA54A;
	height: 5px;
}

/* Petit espace entre la ligne et le reste */
.espace-haut {
	height: 2px;
}

/* Le tableau de la ligne */
#tab-barre-haut {
	border: 0px;
	background-color: transparent;
	width: 100%;
	padding-bottom: 0px;
	padding-left: 0px;
	padding-right: 0px;
	padding-top: 0px;
}

/* Les petits espaces entre la ligne et le reste */
#zone-blanc-haut {
	height: 15px;
	background-color: White;
}


/* ################################################################## */
/* #######################   C O N T E N U   ######################## */
/* ################################################################## */

/* Le titre de la page */
h2 {
	font-size: 18px;
	color: #B50000;
	font-weight: 700;
	margin-top: 0px;
	margin-bottom: 15px;
	margin-left: 25px;
}

/* Sous-titre */
h3 {
	color: #FFA54A;
	font-size: 15px;
	font-weight: 900;
	margin-top: 30px;
	margin-bottom: 25px;
	margin-left: 15px;
	padding-bottom: 4px;
	padding-top: 0px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: #FFA54A;
	background-image: url(design/puce_h2.gif);
	background-repeat: no-repeat;
	background-position: 0px 4px;
	text-align: left;
	padding-left: 30px;
	clear: both;
}

/* Titre année (CV...) */
h4 {
	font-size: 13px;
	margin-bottom: 10px;
	margin-left: 22px;
	font-weight: 750;
	color: Black;
}

/* ################################################################## */
/* ############################   C V   ############################# */
/* ################################################################## */

/* Le tableau avec le détail des expériences */
.tab-cv {
	width: 100%;
	border-width: 1px;
	border-style: none;
}

.td-cv {
	vertical-align: top;
}

/* Titre fonctions CV */
h5 {
	font-size: 13px;
	margin-bottom: 5px;
	margin-left: 0px;
	margin-top: 0px;
	font-weight: normal;
	color: black;
	text-align: justify;
}

/* La fonction */
.fonction {
	/* color: #B50000; */
	font-weight: bold;
}

/* Le lieu */
.lieu {
	font-style: italic;
}

/* Détails fonctions */
.fonction-details {
	margin-left: 0px;
	margin-right: 0px;
	margin-bottom: 15px;
}

/* La date */
.date {
	margin-left: 25px;
	margin-right: 0px;
	margin-top: 0px;
	font-size: 13px;
	width: 145px;
	font-weight: bold;
}

/* ################################################################## */
/* ###########################   T F E   ############################ */
/* ################################################################## */

h5.tfe {
	font-size: 13px;
	margin-bottom: 10px;
	margin-left: 22px;
	font-weight: normal;
	color: Black;
}

h6 {
	font-size: 13px;
	margin-top: 0px;
	margin-bottom: 10px;
	margin-left: 22px;
	font-weight: normal;
	color: Black;
}

div.titre7 {
	font-size: 13px;
	margin-bottom: 10px;
	margin-left: 22px;
	font-weight: normal;
	color: Black;
}

/* ############################################################################################## /*

/* Rubrique pour le plan du site + Class pour Titre H3 */
.plan-lvl1 {
	margin-left: 130px;
	clear: none;
}

/* Sous-Rubrique pour le plan du site + Class pour Titre H4 */
.plan-lvl2 {
	margin-left: 160px;
	background-image: url(design/puce.gif);
	background-repeat: no-repeat;
	background-position: bottom;
	background-position: left;
	padding-left: 14px;
}

/* La zone de contenu */
#tab-content {
	background-color: White;
	width: 75%;
	vertical-align: top;
} 

/* Paragraphe par défaut */
p {
	text-align: justify;
	margin-left: 25px;
	margin-right: 25px;
	margin-top: 0px;
	margin-bottom: 15px;
	font-size: 13px;
	word-spacing: normal;
}

/* Avec une marge pour rester dans l'allignement (page lien) */
p.marge {
	margin-left: 100px;
}

/* Avec une marge pour rester dans l'allignement (page lien) */
p.marge_gde {
	margin-left: 130px;
}


/* Les images de gauche */
img {
	border: 0px;
}

#img_accueil {
	border: 0px;
	margin-right: 15px;
	margin-left: 25px;
	margin-bottom: 5px;
	width: 221px;
	height: 194px;
	float: left;
}

#img_accueil_2 {
	border: 0px;
	margin-right: 15px;
	margin-left: 25px;
	margin-bottom: 5px;
	width: 132px;
	height: 176px;
	float: left;
}

#img_gauche {
	border: 0px;
	margin-right: 15px;
	margin-left: 25px;
	margin-bottom: 5px;
	float: left;
}

/* Vignette print screen */
.vignette_gauche {
	border: 0px;
	border-style: none;
	margin-right: 15px;
	margin-left: 20px;
	margin-bottom: 15px;
	margin-top: 0px;
	float: left;
	width: 200px;
	height: auto;
}

.vignette_droite{
	border: 0px;
	border-style: none;
	margin-right: 15px;
	margin-left: 20px;
	margin-bottom: 15px;
	margin-top: 0px;
	float: right;
	width: 200px;
	height: auto;
}

/* Les liens */
a {
	color: #00018A;
	text-decoration: underline;
}

a:visited {
	color: #00018A;
}

a:hover {
	color: #FF8000;
}

a:active {
	color: #FF8000;
}

/* Commentaire / remarque */
.cite {
	background-color: #FFF4EA;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-left: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 15px;
	width: 87%;
	border-left-style: solid;
	border-left-width: 5px;
	border-left-color: #FFA54A;
	font-size: 12px;
	margin-left: 25px;
	text-align: justify;
}

/* Script */
.code {
	background-color: #FFF4EA;
	margin-top: 20px;
	margin-bottom: 15px;
	padding-left: 15px;
	padding-bottom: 10px;
	padding-top: 10px;
	padding-right: 15px;
	width: 66%;
	border-left-style: solid;
	border-left-width: 5px;
	border-left-color: #FFA54A;
	font-size: 12px;
	margin-left: 130px;
	text-align: justify;
}

/* Le titre du commentaire / remarque */
.titre-cite {
	font-size: 13px;
	color: #B50000;
	background-image: url(design/epingle.gif);
	background-repeat: no-repeat;
	background-position: 0px 2px;
	font-weight: 600;
	padding-left: 15px;
	padding-bottom: 0px;
	margin-bottom: 15px;
}

/* Les puces */
ul {
	margin-top: 3px;
	text-align: justify;
	margin-bottom: 25px;
	font-size: 13px;
}

li {
	list-style: disc;
	margin-left: 0px;
	margin-top: 5px;
}

 /* Class pour LI avec l'image au lieu de la puce par défaut */
.puce-special {
	list-style-image: url(design/puce.gif);
	list-style-position: outside;
}

/* Les notes de bas de pages - exposants et sources */
sup {
	font-size: 11px;
	color: #B50000;
}

.note {
	font-size: 10px;
	color: Black;
	margin-top: 20px;
}

.source {
	font-size: 10px;
	color: #B50000;
	text-align: left;
}

/* ################################################################### */
/* ##########################    M E N U    ########################## */
/* ################################################################### */

/* ================= */
/* 1. G E N E R A L  */
/* ================= */

/* La zone du menu */
#zone-menu {
	background-color: White;
	width: auto;
	vertical-align: top;
}

/* Le tableau avec les options */
#tab-menu-options {
	margin-top: 0px;
	border: 0px;
	width: 90%;
	border-spacing: 0px;
}

/* Les infos suplémentaires du menu */
.info-menu { /* La zone */
	background-image: url(design/menu_haut_gauche.gif);
	background-repeat: no-repeat;	
	background-color: #B50000;
	width: 82%;
	margin-top: 20px;
	padding-left: 15px;
	height: 20px;
}

.lien-info-menu { /* Le lien bas de page */
	color: White;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
	/*
	background-image: url(design/fleche_bas.gif);
	background-repeat: no-repeat;
	padding-right: 20px;
	background-position: 90px 5px;
	*/
}

.lien-info-menu:visited {
	color: White;
	font-size: 13px;
	text-decoration: none;
}

.lien-info-menu:hover {
	color: #FFA54A;
	font-size: 13px;
	text-decoration: underline;
}

.lien-info-menu:active {
	color: #FFA54A;
	font-size: 13px;
	text-decoration: underline;
}

.lien-real-menu {
	/* Liens des pages réalisations */
	color: White;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
	background-image: url(design/new_window.gif);
	background-repeat: no-repeat;
	padding-right: 25px;
	background-position: 105px 3.5px;
}

.lien-real-menu:visited {
	color: White;
	font-size: 13px;
	text-decoration: none;
}

.lien-real-menu:hover {
	color: #FFA54A;
	font-size: 13px;
	text-decoration: underline;
}

.lien-real-menu:active {
	color: #FFA54A;
	font-size: 13px;
	text-decoration: underline;
}

/* ========================= */
/* 2. P A R T I E   H A U T  */
/* ==========================*/

/* L'arrondi au-dessus du tableau avec le titre du menu */
#cel-menu-haut {
	height: 5px;
	background-color: #B50000;
	color: White;
	font-weight: 900;
}

#cel-menu-haut-gauche {
	background-image: url(design/menu_haut_gauche.gif);
	background-repeat: no-repeat;
	width: 6px;
}


/* #cel-menu-haut-droite {
	background-image: url(design/menu_haut_droite.gif);
	background-repeat: no-repeat;
	background-position: right;
	background-position: top;
} */

/* Les ronds */
#rond1 {
	font-size: 15px;
}

#rond2 {
	font-size: 13px;
}

#rond3 {
	font-size: 8px;
}

/* ======================= */
/* 3. P A R T I E   B A S  */
/* ======================= */

/* La celle du bas avec l'arrondi */
#cel-menu-bas {
	height: 5px;
	background-color: #E2E2E2;
}

#cel-menu-bas-gauche {
	height: 5px;
	background-image: url(design/menu_bas_gauche.gif);
	background-repeat: no-repeat;
	background-position: left;
}

#cel-menu-bas-droite {
	height: 5px;
	background-image: url(design/menu_bas_droite.gif);
	background-repeat: no-repeat;
	background-position: right;
}

/* ============================== */
/* 4. L I E N S   D U   M E N U   */
/* ============================== */

/* La cellule du centre */
#cel-menu-centre {
	background-color: #E2E2E2;
	padding-left: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Les lettres des liens */
.first-letter {
	font-size: 14px;
}

.letters {
	font-size: 12px;
}

/* Les puces des liens */
ul.liste-menu {
	margin-top: 3px;
	margin-bottom: 3px;
	text-align: left;
}

li.puce-menu {
	list-style-image: url(design/puce.gif);
	list-style-position: outside;
	margin-left: -20px;
	margin-top: 2px;
	line-height: 18px;
}

/* Liens du menu */
a.lien-menu {
	color: #00018A;
	text-decoration: none;
}

a.lien-menu:visited {
	color: #00018A;
	text-decoration: none;
}

a.lien-menu:hover {
	color: #FF8000;
	text-decoration: none;
}

a.lien-menu:active {
	color: #FF8000;
	text-decoration: none;
}


/* ################################################################## */
/* #######################    B O T T O M    ######################## */
/* ################################################################## */

/* Le copyright */
#copy{
	font-size: 10px;
	text-align: center;
	margin-top: 5px;
	background-color: #E2E2E2;
}

/* Espace en dessous du texte */
#zone-blanc-bas {
	height: 20px;
	background-color: White;
}

/* Coordonnées */
#zone-sous-menu {
	background-color: White;
	vertical-align: bottom;
	text-align: right;
	font-size: 10px;
	padding-right: 20px;
}

/* Liens coordonnées */
.lien-sous-menu {
	color: black;
	text-decoration: none;
}

.lien-sous-menu:visited {
	color: black;
	text-decoration: none;
}

.lien-sous-menu:hover {
	color: #FFA54A;
	text-decoration: none;
}

.lien-sous-menu:active {
	color: #FFA54A;
	text-decoration: none;
}

/* La ligne du "design" */
#barre-bas {
	background-color: #FFA54A;
	height: 2px;
}

/* Petit espace entre la ligne et le reste */
.espace-bas {
	height: 5px;
}

/* Logos validations */
#w3c-validation {
	margin-top: 5px;
	text-align: right;
}

/* ################################################################## */
/* #########################     F O R M     ######################## */
/* ################################################################## */

/* Titre du champ */
.nom-champ {
	font-size: 12px;
	color: Gray;
}

/* Les input */
.contact {
	border-bottom-width: 1px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-color: White;
	border-style: solid;
	background-color: #E2E2E2;
	margin-bottom: 8px;
	width: 200px;
	color: #00018A;
}

/* Champ texte quand "OnFocus" */
.contact-focus {
	width: 200px;
	color: #00018A;
	background-color: #E2E2E2;
	border-color: #FFA54A;
	border-style: solid;
	border-bottom-width: 1px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	margin-bottom: 8px;
}

/* Zone message */
.textarea {
	border-bottom-width: 1px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
	border-color: White;
	border-style: solid;
	background-color: #E2E2E2;
	width: 300px;
	height: 150px;
	color: #00018A;
}

/* Zone message quand "OnFocus" */
.textarea-focus {
	width: 300px;
	height: 150px;
	color: #00018A;
	background-color: #E2E2E2;
	border-color: #FFA54A;
	border-style: solid;
	border-bottom-width: 1px;
	border-top-width: 1px;
	border-right-width: 1px;
	border-left-width: 1px;
}

/* Boutton de validation */
#validation {
	width: 100px;
	height: 25px;
	margin-left: 205px;
	color: #B50000;
	font-weight: 600;
}

/* Texte pour les champs obligatoires */
.champs-obligatoires {
	font-size: 10px;
	color: #B50000;
	font-style: italic;
}