body { 
padding-bottom : 0; 
line-height : 1.4; 
margin : 0; 
text-align : center; 
font-family : "trebuchet ms", verdana, helvetica, freesans, sans-serif; 
background : #f0e68c; 
color : black; 
font-size : 12px; 
padding-top : 0; 
} 
#page {
   margin: 0 auto;
   width: 1024px;
   height: auto;
   background: transparent;
   z-index: 100;
   border: 2px solid #ddd;
   margin-left: auto;
   margin-right: auto;
   z-index: 100;
}  
a, a:visited, a:hover, a:active {}
.menuContainer {position:relative; float:left; left:50% ; z-index: 200}

.nav, 
.nav 
.nav {  z-index: 500; height:30px; float:left; padding:0; background:transparent; position:relative; right:50%;}

.nav table {border-collapse:collapse;}
.nav li {float:left;}
.nav li li {float:none;}
/* a hack for IE5.x and IE6 */
.nav li a li {float:left;}

.nav li a { 
   display: block;
   float: left;
   color: black;
   height: 30px;
   padding: 0 2px 0 1px;
   line-height: 30px;
   text-decoration: none;
   white-space: nowrap;
   font-size:0.8em; z-index: auto;
   WIDTH:115px;
   background-image: url(bars.gif);
   background-repeat: no-repeat;
   border-bottom: 1px solid #990000;
}
.nav li li a {height:15px; line-height:15px; float:none;}

.nav li:hover {position:relative; z-index:100; background:url(transparent.gif);}
.nav a:hover {position:relative; z-index:100; color:red; border:0;}
.nav li:hover > a {color:red;}

.nav :hover  ul {left:0; top:30px; z-index:300; background:black;WIDTH:150px;}
.nav :hover  ul li a { background:black;WIDTH:150px;
 z-index: auto;color: #fff; font-weight:bold; font: 14px arial, verdana, sans-serif;}
 .nav :hover  ul li a:visited {
   /* visited link styles here */
   color:yellow;
}
.nav a:hover ul {left:-1px;}

.nav ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
.nav li:hover li:hover > ul {left:0; margin-left:100%; top:0;
 background:black;WIDTH:120px}
/* keep further levels hidden */
.nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
.nav li:hover li:hover > a {color:black;background:#fff;}

.nav li a:hover {color:black;background:#fff;}

/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
.nav a:hover a:hover ul,
.nav a:hover a:hover a:hover ul,
.nav a:hover a:hover a:hover a:hover ul,
.nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:0;}

/* keep further levels hidden */
.nav a:hover ul ul,
.nav a:hover a:hover ul ul,
.nav a:hover a:hover a:hover ul ul,
.nav a:hover a:hover a:hover a:hover ul ul
 position:absolute; left:-9999px; top:-9999px;}
h1 {font-family: verdana, geneva, arial, helvetica, sans-serif;
	padding-bottom: 0px; line-height: 15px;  margin: 1em 0  0.5em;
    font-weight: bold; font-size: 1.75em;   }
h2 {
	font-size: 1.5em;line-height: 1.2; font-style: normal; margin: 1em 0px 0.5em; font-weight: bold;
}
h3 { font: italic normal 12px georgia, sans-serif;
	letter-spacing: 1px;
	margin-bottom: 0; 	 font-family: verdana, geneva, arial, helvetica, sans-serif;
   color: maroon;
	margin: 1em 0px 0.5em; font-weight: bold;
 }
h4 {font-size: 18px;
	  font-style: normal; margin: 1em 0px 0.5em; font-weight: bold;}
h5 {
	line-height: 1.2; font-style: normal; margin: 1em 0px 0.5em; font-weight: bold}
h6 {
	line-height: 1.2; font-style: normal; margin: 1em 0px 0.5em; font-weight: bold}
 
p {	font: 12px verdana, sans-serif;
	margin-top: 0;
	text-align: justify;
	}
address {
	font-style: normal; margin: 0.75em 0px
}
em {
	font-style: italic
}
strong {
	font-weight: bold
}

.left {
	float: left
}
.right {
	float: right
}
.textleft {
	text-align: left
}
.textright {
	text-align: right
}
.textcenter {
	text-align: center
}
.centre{
 	 margin-left: 34%;
   margin-right:34%;
  text-align:   center;
 }
.sec_droit {
   text-align:  right;
  padding-left: 2px;
  width: 33%;
    padding-right:  1px;
   float: right;
    margin-right:  1px;
   background: transparent;}
.sec_gauche {
   text-align:  left;
   float:  left;
 right: 5px;
   width: 33%;
   background: transparent;}

#gallery {
   width: 1000px;
   height: 550px;
   position: relative;
  overflow: hidden;
   margin: auto;
   padding: 2px;
   background: transparent url(../fichiers/fond.jpg);
}
.titre {
float : none;
font : bold 22px 'Arial', Helvetica, sans-serif;
color : Window;
text-align : center;
width : 250px;
height : 26px;
background-color : black;
}
#thumbs { z-index: auto;
	background-color: transparent;
	width: 100%;
	height: 500px;}  
.gauche{
	width: 220px;
	float: left;
	background-color: transparent;
}
.droit{
	width: 220px;
	float: right;
	background-color: transparent;
}
.titre {
float : none;
font : bold 22px 'Arial', Helvetica, sans-serif;
color : Window;
text-align : center;
width : 250px;
height : 26px;
background-color : black;
}
#thumbs a {
display : block;text-decoration : none; 
float : right;
margin : 0 10px 5px 5px;
width : 90px;
height : 70px;
border : 0 solid #000;
}
#thumbs a span {
display : none;
}
#thumbs a img {
width : 90px;
height : 70px;
top : 130px;
border : 3px black;
}
#thumbs a:hover {
border-color : #ddd;
}
img{
	border: none;
}
#thumbs a:hover span 
{ display: block; text-decoration : none; 
	font:  message-box 'Arial', Helvetica, sans-serif;
	width: 90px;
	float: none;
	height:  auto;
	top: 10px;
	left: 226px;
	background-color: aqua;
}
#thumbs a:hover img  {
clear : both;
position : absolute;
width : 560px;
float :  left;
height : auto;
top : 50px;
left : 220px;
}
#pied {
float : left;
height : auto;
font : bold 10px 'Arial', Helvetica, sans-serif;
color : teal;
text-align : center;
top : 2px;
width : 1000px;
position : relative;
}