body {
	background-color: #def; 
	font-family: Trebuchet MS, Lucida Sans Unicode, Arial, Helvetica; 
	font-size: 12px; 
	color: #333; 
	margin: 0 auto;
	width: 800px;
}
a:link { 
	color: #333; 
	text-decoration:none; 
}a:visited { 
	color: #333; 
	text-decoration:none; 
}a:hover { 
	color: maroon; 
	text-decoration:none; 
}

#header, #footer {
	position: relative;
	float: left;
	/*left: 2%; /*12px; le texte est décalé de 2% de la bordure*/ 
	width: 800px; 
	border-top: 1px solid #333; 
	border-left: 1px solid #333; 
	border-right: 1px solid #fff; 
	border-bottom: 1px solid #fff; 
	background-color: #eef; 
	
}
#header {
	margin: 40px 0; /* gere les marges */
	/*top: 2%; /*12px;  gère l'interieur du texte (padding)*/
	height: 46px; /*48px; */
}
#footer {
	position: relative;
	float: left;
	clear: both;
	/*top: 300px; /* initialement à 524px du header */
	height: 24px; 
	font-size: 90%; 
	padding-top: 6px; 
}
#navbar, #body {
	position: relative;
	float: left;
	/*top: 50px;/*72px; */
	height: auto;
	margin: 0 0 70px 0;
}
#navbar {
	/*left: 10px; */
	width: 145px; /* 144 + 606 = 750px initialement */
	border-right: 1px dotted maroon;
}
#navbar ul.menu {
	margin: 36px 0 0 0; 
	padding: 0; 
	list-style-type: none; 
}#navbar ul.menu li {
	margin: 12px 0 0 0; 
	font-size: 150%; 
}#navbar ul.submenu {
	margin-left: 22px; 
	padding: 0; 
	text-align: left;  
}#navbar ul.submenu li {
	margin-top: 3px; 
	font-size: 66%; 
}#navbar .lang {
	margin: 24px 0 0 0; 
	/*text-align: center; */
	font-size: 90%; 
}#navbar .lang form {
	margin: 0; 
	display: inline; 
}
#body {
	/*left: 156px;*/
	width: 650px; /* 145 + XXX = 800px soit 655 - 10px*/ 
	overflow: none; 
	border-right: 1px solid #c3e2ff;
	
}#body a:link { 
	color: #333; 
	text-decoration:underline; 
}#body a:visited { 
	color: #333; 
	text-decoration:underline; 
}#body a:hover { 
	color: maroon; 
}

div .content {
	padding: 0 5px; 
	width: 650px; /* 145 + XXX = 800px soit 655 - 10px*/ 
	
}
div .contentTop {
	padding: 0; 
	width: 800px; /* 145 + XXX = 800px soit 655 - 10px*/ 
	
}

div .narrow {
	padding: 24px 0 0 160px; 
	width: 490px; /* 145 + 655 = 800px / 655 - 160 - 5 (ajustement) = 495px*/ 
	
}
div .std {
	padding: 24px 0 0 0; 
	width: 690px;
}
div .submenu {
	text-align: center; 
	padding: 12px 0; 
}
div .h3 {
	margin-top: 18px; 
}
h1 {
	font-size: 300%; 
	letter-spacing: 18px; 
	margin: 0; 
	/* border-bottom: 1px solid #999; */ 
}
h2 {
	font-size: 180%; 
	letter-spacing: 4px; 
	margin: 0; 
	border-bottom: 1px dotted #999; 
}
h3 {
	font-size: 150%; 
	letter-spacing: 2px; 
	margin: 0; 
}
p {
	margin: 6px 0 0 0;
}
#body p {
	text-indent: 24px; 
}
.li {
	margin: 6px 0 0 0;
	padding-left: 10px;
	text-indent: -10px; 
} 
.left {
	float: left; 
}
.right {
	float: right; 
	text-align: right; 
}
.smlcaps {
	font-variant: small-caps; 
}
.capital {
	color: maroon; 
}
.colophon {
	margin-top: 18px; 
	text-align: center; 
	line-height: 20px; 
	font-size: 200%; 
}

/* Form on the contact page */
#fcontact {
	border: 1px dotted maroon; 
	margin-top: 12px; 
	padding: 12px; 
}
#fcontact p {
	text-indent: 0; 
	font-size: 80%; 
	letter-spacing: 1px; 
}
#ufb, #unm, #uem {
	font: 11px Arial; 
	color: #333; 
}

/* Within popups dedicated to illustrations */ 
#mkill {
	text-align: center; 
}
#mkill .mkillti {
	font-weight: 700; 
}
#mkill .mkillle {
	font-size: 80%; 
}
#mkill .mkilllk {
	font-size: 70%; 
}

/* Within slideshow */ 
#mkslideshow {
	font-size: 120%; 
}
#mkslideshow .mkillti {
	font-weight: 700; 
}
#mkslideshow .mkillle {
	font-size: 100%; 
}
#mkslideshow .mkilllk {
	font-size: 80%; 
	font-weight: 700; 
}


/*affichage des images sur travaux */

#thumbs {
	list-style: none outside none; /* On supprime le style de la liste par défaut */
	margin: 0 auto; /* La galerie est centrée horizontalement */
	padding: 0;
	width: 700px;
	
}
 
#thumbs li {
	float: left;
	height: 150px;
	margin: 0;
	padding: 0;
	position: relative;
	width: 150px; /* 4 * 150 = 600 */
	z-index: 100;
}
 
#thumbs li img {
	border: none;
	z-index: 100;
	transition: transform 0.25s ease-in-out;
	-moz-transition: -moz-transform 0.25s ease-in-out;
	-o-transition: -o-transform 0.25s ease-in-out;
	-webkit-transition: -webkit-transform 0.25s ease-in-out;
	transform: scale(0.75); /* On réduit l'image à 75% */
	-moz-transform: scale(0.75);
	-o-transform: scale(0.75);
	-webkit-transform: scale(0.75);
}

#thumbs:hover li img {
	opacity: 0.5; /* Au survol de la galerie, toute les images auront une opacité de 50% */
	z-index: 100;
}
 
#thumbs li:hover img {
	opacity: 1; /* L'image survolée aura une opacité de 100% */
	z-index: 100;
	transform: scale(1); /* On affiche l'image à sa taille normale */
	-moz-transform: scale(1);
	-o-transform: scale(1);
	-webkit-transform: scale(1);
	box-shadow: 0 #000; /* On ajoute une ombre */
	-moz-box-shadow: 0 #000;
	-o-box-shadow: 0 #000;
	-webkit-box-shadow: 0 #000;
}

#corps {
	position: relative;
	float: left;
	width: 600px;
	height: auto;
	margin: 0;
	padding: 0;
}

.nomTravaux {
	position: relative;
	float: left;
	width: 150px;
	height: 10px;
	text-align: center;
	margin: 0;
	padding: 0;
}