html{
	background-image: url("motif.jpg");
}

body{
	margin: auto; /* pour centrer la page */
	width: 770px;
	margin-top: 50px;
	font: 0.6em Verdana, Helvetica, Clean, Sans-serif;
	color:#444;
}

/***********************************************************
*                 DEFINITION DES LIENS                                                      *
*************************************************************/
a:link{color: #3d485e; text-decoration: underline;}
a:visited{color: #3d485e; text-decoration: underline;}
a:hover{color: #000;}
a img{ border: 0;}

/***********************************************************
*                 DEFINITION HEADER/SOUS HEADER                              *
*************************************************************/
div#header{
	width: 770px;
	height: 155px;
	background-image: url("header.jpg");
}



/***********************************************************
*                 DEFINITION DES MENUS                                                      *
*************************************************************/
li{
list-style-type:none;
}

div#page{
   width: 770px;
  background: url(page.jpg) repeat-y 0 0;
  float: left;
  }
  
div#gauche{
	float: left;
	width: 180px;
	margin-left: 30px;
}
div#menu_wakfu{
	background-image: url("menuwakfufrance.jpg");
	height: 51px;
	width: 180px;
	float: left;
	margin-top: 10px;
}
div#menu_jeu{
	background-image: url("menulejeu.jpg");
	height: 40px;
	width: 180px;
	float: left;
}
div#menu_database{
	background-image: url("menudatabase.jpg");
	height: 40px;
	width: 180px;
	float: left;
}
div#menu_media{
	background-image: url("menumedia.jpg");
	height: 47px;
	width: 180px;
	float: left;
}
div#menu_partenaire{
	background-image: url("menupartenaire.jpg");
	height: 40px;
	width: 180px;
	float: left;
}
div.menu{
	background-image: url("menu.jpg");
	width: 180px;
	float: left;
}
.menu_bas{
	background-image: url("menubas.jpg");
	height: 20px;
	width: 180px;
	float: left;
}
.menu ul li{
   margin: 2px 18px 2px 0;
   padding: 2px 0px 2px 0;
   font-weight:bold;
   display:block;
   border-bottom: 1px solid #DDDDDD;
}
/***********************************************************
*                 DEFINITION DES FLASH MENUS                                          *
*************************************************************/
div.flashscreen{
margin-left: 50px;
float: left;
}
div.flashinfo{
margin-right: 20px;
float: right;
}
div.screenhaut{
	background: url("screenhaut.jpg") no-repeat 0 0;
	height: 44px;
	width: 200px;
}
div.infohaut{
	background: url("infohaut.jpg") no-repeat 0 0;
	height: 53px;
	width: 200px;
}

div.flashcontenu{
	background: url("flashcontenu.jpg");
	width: 200px;

}

div.flashbas{
	background: url("flashbas.jpg");
	height: 25px;
	width: 200px;

}
/***********************************************************
*                 DEFINITION DU CONTENUE                                               *
*************************************************************/
div.global{
margin-right: 50px;
margin-top: 10px;
}

div.contenu_haut{
	float: right;
	background: url("contenuehaut.jpg") no-repeat 0 0;
	height: 40px;
	width: 480px;
	padding-top: 15px;
	text-align: center;
	font-size: 1.5em;
	color: #2b8580;
	font-weight: bold;
}

div.contenu{
	float: right;
	background-image: url("contenue.jpg");	
	width: 480px;
	margin-top: -15px;
	padding-top: 10px;
}
div.contenu_bas{
	float: right;
	background-image: url("contenuebas.jpg");
	height: 25px;
	width: 480px;
	margin-bottom: 10px;
}
div.contenu p, h2, h3, h4{
	margin-left: 30px;
	margin-right: 30px;
}
div.contenu .p1{
	margin-left: 110px;
	margin-right: 30px;
}
/***********************************************************
*                 DEFINITION BAS DU SITE (PAGEBAS ET FOOTER)       *
*************************************************************/
div#pagebas{
	background-image: url("pagebas.jpg");
	height: 40px;
	width: 770px;
	float: left;
	background-repeat: no-repeat;
}

div#footer{
	background-image: url("footer.jpg");
	background-repeat: no-repeat;
	height: 120px;
	width: 770px;
	margin: 20px 0 20px 0;
	float: left;
	text-align:center;
	padding: 10px 0 0 0;
}
/***********************************************************
*                 DEFINITION SCREENSHOT SCRIPT     *
*************************************************************/

#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }

#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../../screenshots/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../../screenshots/images/nextlabel.gif) right 15% no-repeat; }

#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }

#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	

#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }