body
{
background-color:#434343;

width:100%;
height:100%;
position:absolute;
 border: solid white 0px;
padding:0px 0px 0px 0px;
margin:0;
 border: solid yellow 0px;
 left:0px;
}
 h2
{
display: block; 
text-align:center;
letter-spacing: 40px;
color:yellow;
font-style:strong;
font-family:"Batang",Calibri,Times New Roman;
width:100%;
height:auto;
background-color:black;
top:0px;
margin-left:0%;
position:relative;
font-size:2em;
padding:35px 0px 0px 0px;
margin-bottom:0px;
margin-top:0px;
right:0px;
 border: solid white 0px;

}
table /*cadre des images totalité*/
{
  border: solid orange 5px;/*cadre des images totalité*/
 margin-left:4%;
 margin-right:0%;
 margin-bottom: 0%;
 margin-top:0%;
 top:0%;
 padding:0px 0px 0px 0px;
 text-align:center;
background-color:#3F3D3C;
background-position:left;
padding-left:0;
left:0%;
bottom:0%;
border: solid red 0px;
}
#logo img
{
width:2.7%;
height:8%;
left:0%;
margin-left:0%;
margin-right:0%;
margin-bottom:0%;
margin-top:0%;
bottom:0%;
 border: solid red 0px;
 padding:6% 1% 52% 1%;
 text-align:center;
 position :fixed;
 z-index:-10;
 background:url(images/logotyp.gif) no-repeat ;
 background-color:none;
 right:0%;
top:2%;
 
}
#loadarea img
{
width:19%;
height:auto;
margin-left:50%;
margin-top:1%;
 border: solid red 2px;
 position:absolute;
}
 img 
{ 
   width: 95px;
   height:auto;
   margin:0px 0px 0px 0px;
   padding:5px;
   border:2px solid #C17615; /*cadre des images*/
background-color:grey; 

}
a:{
border:none;
}
p
{
text-align:center;
background-color:none;  
font-family:Times New Roman;
font-size:1 em;
}

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.info{
position: relatve ;
z-index: 0; 
 text-align:top;
 color:white;
}

.info:hover{
background-color: none;
z-index: 20;
color :white;
 text-align:center;

}

.info span{ /*CSS for enlarged image*/
position: absolute ;
background-color: transparent;
padding: 5px  ;
border: none;
visibility: hidden;
color: black;
text-decoration: none;
  border: none;
position:fixed;
  z-index: 20;
}

.info span img{ /*CSS for enlarged image*/
border-width:0px;
padding: 2px 10px 10px 2px;
   width: 65%;
   height:auto;
 border: solid white 0px;
   z-index:10;
      background-color:#3c3c3c;
	  padding:0;
   
}

.info:hover span { /*CSS for enlarged image on hover*/
visibility: visible;
top: 8%;
left:10%;
color:white;
font-size:1.2em;
font-family:simsun;
background-color: NONE;
 font-style: strong;
 border: solid transparent 0px ;/*cadre pop up*/
/*position where enlarged image should offset horizontally */  
  margin-right:1%;
  text-align:top;
 
}


.bouton1 a {
display:block;
width:50px;
line-height:50px;
text-align:left;
vertical-align:50%;
background:url(images/fleche1.gif) no-repeat;
background-color:transparent;
text-decoration:none;
position:absolute;
margin-left:75%;
top:53%;
color:#434343;


}
.bouton1 a:hover {
background:url(images/fleche1c.gif) no-repeat;
color:none;
}
.bouton2 a:hover {
background:url(images/fleche2c.gif) no-repeat;
color:none;
}
.bouton2 a {

display:block;
width:50px;
line-height:50px;
text-align:left;
vertical-align:50%;
background:url(images/fleche2.gif) no-repeat;
background-color:transparent;
text-decoration:none;
position:absolute;
margin-left:80%;
top:53%;
color:#434343;}




#pied_de_page 
{
   width:100%;
   height:auto;
   position :absolute;
   padding:50px 0% 2% 0%;
   text-align: center;
   border: 0px solid white;
   background-position:center;
   background-color:none;
   bottom:0%;
   left:0%;
   margin-bottom:2px;
   margin-top:0%;
   margin-right:0px;
   right:0px;
   z-index:0;
   background-image: url("images/girafesz.gif");
}