body {
	background-color: #000029;
	font-family:  Verdana, Geneva, Arial, sans-serif;
	color: #c5c8e7;
	position: relative;
	width: 780px;
	margin-left:auto;
	margin-right:auto;
	margin-top: 20px;
	margin-bottom: 20px;
	font-size: 11px;
}

h1 { color: #ebecf6; }
h2 { color: #ebecf6; }
h4 { text-decoration: underline; }

#conteneur { position:relative; width: 100%; }
#head {
	position:absolute;
	left:12px;
	top:6px;
	width:100%;
/*	height:100px;*/
	height:600px;
	z-index:1;
	background-image: url(images/head2.png);
	background-repeat: no-repeat;
}

.lk {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 11px;
  color: #E0B245;
  text-decoration: underline;
}
A:link.lk    { color: #e0b245; }
A:hover.lk   { color: #000000; background-color: #DCDCDC; text-decoration: none; }
A:active.lk  { color: #e0b245; }
A:visited.lk { color: #686674; }

.lk2 {
  font-family: Verdana, Geneva, Arial, sans-serif;
  font-size: 11px;
  color: #c5c8e7;
  text-decoration: none;
}
A:link.lk2    { color: #c5c8e7; }
A:hover.lk2   { color: #000000; background-color: #DCDCDC; text-decoration: none; }
A:visited.lk2 { color: #686674; }

.fake { color: #E0B245; text-decoration: none; }
A:link.fake    { color: #c5c8e7; }
A:hover.fake   { color: #000000; text-decoration: none; background-color: #DCDCDC; }
A:active.fake  { color: #e0b245; text-decoration: none; }
A:visited.fake { color: #c5c8e7; text-decoration: none; }


.fps {
	font-size: 12px;
	font-weight: bold; 
	letter-spacing : 1px
}

#nav {
	position:absolute;
	left:12px;
	top:105px;
	width:187px;
	height: 407px;
	z-index:2;
	padding: 8px;
	/*background-image: url(images/nav.jpg);*/
	background-repeat: no-repeat;
}

#contenu {
	position:absolute;
/*	left:204px;*/
	left:220px;
	top:155px;
	width:569px;
	z-index:4;
	/* suppression de micky */
	/*text-indent : 20px ;*/
	/* ajout de micky */
	/*text-align: justify;*/
}

.txt {
/*	width:569px;*/
	margin-top: -40px;
	width:500px;
	float:left;
	min-height: 500px;
	line-height: 160%;
}

.image {
	width:134px;
	height:270px;
	float:right;
}

#perso {
	width:135px;
	height:270px;
	float:left;
}

#logo {
	position:absolute;
	left:15px;
	top:8px;
	width:193px;
	height:133px;
	z-index:5;

}

a img { border: none; }

#cartes {
	margin-top:10px;
	float: left;
	width:569px;
	border: solid 1px #676475;
}

.cases {
	border: solid 2px #000;
	margin: 5px 3px 5px 3px;
	padding:1px;
}

#pied {
	position:relative;
	float: left;
	width: 569px;
	height: 50px;
	text-align:right;
	text-decoration: overline;
	font-size: 9px;
	border: 1px;

}

/* Le comportement des images du menu (http://css.alsacreations.com/)
----------------------------------------------------------------------------*/

ul#menu {
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
/* Suppression du margin, du padding et des puces du <ul> */
}

ul#menu li {
	margin: 0 0 15px 15px ;
	padding: 0 ;
/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
}

ul#menu li a {
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 150px ;
	line-height: 30px ;
	color: #d3d5eb ;
	font-weight: bold;
	text-align: center;
	text-indent: -5px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	background: url(images/menu_nav.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

ul#menu li a:hover {
	background: url(images/menu_nav.jpg) no-repeat 0 -30px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}

ul#menu li a:visited {
	color: gray;
}


/* Le comportement des galleries d'images (http://sonspring.com/)
----------------------------------------------------------------------------*/

/* Gallerie cartes
----------------------------------------------------------------------------*/
.hoverbox {
	cursor: default;
	list-style: none;
	text-indent: 0px;
}

.hoverbox a {
	cursor: default;
}

.hoverbox a .preview {
	display: none;
}

.hoverbox a:hover .preview {
	display: block;
	position: absolute;
	top: -120px;
	left: -65px;
	z-index: 1;
}

.hoverbox img {
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 72px;
	height: 100px;
}

.hoverbox li {
	background: #000029;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: outset;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 5px 3px 5px 3px;
	padding: 5px;
	position: relative;
}

.hoverbox .preview {
	border-color: #000;
	width: 187px;
	height: 260px;
}


/* Gallerie artworks
----------------------------------------------------------------------------*/
.hoverbox2 {
	cursor: default;
	list-style: none;
	text-indent: 0px;
}

.hoverbox2 a {
	cursor: default;
}

.hoverbox2 a .preview {
	display: none;
}

.hoverbox2 a:hover .preview {
	display: block;
	position: absolute;
	top: -120px;
	left: -65px;
	z-index: 1;
}

.hoverbox2 img {
	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	width: 100px;
	height: 100px;
	margin:5px;
}

.hoverbox2 li {
	background: #eee;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 15px 6px 5px 6px;
	padding: 5px;
	position: relative;
}

.hoverbox2 .preview {
	border-color: #000;
	width: 240px;
	height: 240px;
}

/* Gallerie terrains (http://cssplay.co.uk/)
----------------------------------------------------------------------------*/


.a, .a:visited {color:#000;}
#terrains {
	position:relative; 
	width:600px; 
	height:1100px; 
	margin:10px auto;
}

#terrains b {
	font-weight:normal; 
	width:600px; 
	text-align:center; 
	position:absolute; 
	bottom:250px; 
	left:0; 	
	color:#eee; 
	font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; 				
	letter-spacing:1px; 
	line-height:1.7em; 
	z-index:1;
}

a.gallery, a.gallery:visited {
	display:inline; 
	color:#000; 
	text-decoration:none; 
	border:1px solid #c5c8e7; 	
	width:75px; 
	height:75px; 
	border-style: outset;
	float:left; 
	margin:7px 21px; 
	position:relative; 
	cursor:default;
}

a.slidea { background:url(./images/zones/bg-warplain.jpg         ); }
a.slideb { background:url(./images/zones/bg-dominaV.jpg          ); }
a.slidec { background:url(./images/zones/bg-Drk.jpg              ); }
a.slided { background:url(./images/zones/bg-Impacts.jpg          ); }
a.slidee { background:url(./images/zones/bg-In-Fort-NO.jpg       ); }
a.slidef { background:url(./images/zones/bg-Lave-birynth.jpg     ); }
a.slideg { background:url(./images/zones/bg-les-marais-de-Pan.jpg); }
a.slideh { background:url(./images/zones/bg-Route-B.jpg          ); }
a.slidei { background:url(./images/zones/bg-Zadel-Q.jpg          ); }
a.slidej { background:url(./images/zones/bg-cuves.jpg            ); }
a.slidek { background:url(./images/zones/bg-Point-O.jpg          ); }


a.gallery span {
	display:block; 
	position:absolute; 
	width:580px; 
	height:740px; 
	top:189px; 	
	left:9px; 
	color:#000; 
	background:#ccc; 
	text-align:center; 
	padding-top:10px;
	border:1px 
	solid #fff; 
	font-family:tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif; 				
	letter-spacing:1px; 
	cursor:default;
}

a.gallery span img {
	border:1px solid #000; 
}


a.slidea span { left: -13px; top:271px; }
a.slideb span { left:-132px; top:271px; }
a.slidec span { left:-251px; top:271px; }
a.slided span { left:-370px; top:271px; }
a.slidee span { left:-489px; top:271px; }
a.slidef span { left: -13px; top:180px; }
a.slideg span { left:-132px; top:180px; }
a.slideh span { left:-251px; top:180px; }
a.slidei span { left:-370px; top:180px; }
a.slidej span { left:-489px; top:180px; }
a.slidek span { left: -13px; top: 89px; }


a.gallery:hover {
	white-space:normal; 
	border:1px dashed #c5c8e7; 
	z-index:100;
}

a.gallery:hover span {
	visibility:visible; 
	z-index:100;
}

a.gallery:hover span img {
	border:1px solid #000; 
	position:relative; 
	z-index:100;
}

a.gallery:active, a.gallery:focus {
	border:1px solid white; 
	z-index:10;
}

a.gallery:active span, a.gallery:focus span {
	visibility:visible; 
	z-index:10;
}

a.gallery:active span img, a.gallery:focus span img {
	border:3px groove #3e3f50; 
	position:relative; 
	z-index:10;
}


/* Comportement scenarii (http://cssplay.co.uk/)
----------------------------------------------------------------------------*/
.holder {
	width:395px; 
	margin:5px; 
	padding:1em; 
	border:1px solid #676475; 
	float:left;
	text-indent: 0px
}

.holder h2 {
	text-align:left;
}
a.hid { 
	text-decoration:none; 
	outline-style:none;
	color: #c5c8e7;
}

a.hid em {
	display:none;
}

a.hid:hover {
	text-decoration:none;
	background-color: #DCDCDC;
	color: #000000;
}

a.hid:active, a.hid:focus {
	background:#fff;
}

a.hid:active span, a.hid:focus span {
	display:none;
}

a.hid:active em, a.hid:focus em {
	display:block; 
	color:#c5c8e7; 
	width:100%; 
	font-style:normal; 
	cursor:default;
}

.clear {
	clear:both;
}

/* Comportement interface fiche pers(http://www.webreference.com/ Stu Nicholls)
----------------------------------------------------------------------------*/

/* fixer la taille de la liste de definiion <dl> + ajout de l'image de bg */
#int {
  display:block;
  width:400px;
  height:282px;
  background:url(./images/interface.jpg) no-repeat;
  position:relative;
}

/* définir la table de definition <dt><a> comme contenant de l'image hover */
#int a#Interface {
  display:block;
  width:400px;
  height:0;
  padding-top:282px;
  overflow:hidden;
  position:absolute;
  left:0;
  top:0;
  /*background:transparent url(./images/interface_hover.jpg) no-repeat 400px 400px;*/
  background:transparent url(./images/interface.jpg) no-repeat 400px 400px;
  cursor:default;
  }

/* positionner le bg à 0 0 dans <dt><a>*/
#int a#Interface:hover { background-position: 0 0; z-index:10; }

/* placer les <dd>s dans la bonne position (en absolu)*/
#int dd { position:absolute; padding:0; margin:0; }
#int #case_boost  { left: 11px; top:  3px; z-index:20; }
#int #case_equip  { left:149px; top:  3px; z-index:20; }
#int #case_bonus  { left:276px; top:  3px; z-index:20; }
#int #case_vie    { left:  5px; top:112px; z-index:20; }
#int #case_armu   { left: 42px; top:109px; z-index:20; }
#int #case_numero { left:165px; top:109px; z-index:20; }
#int #case_arme   { left:276px; top:109px; z-index:20; }

/* style the <dd><a> links physical size and the background image for the hover */
#int a#bonus, #int a#equip, #int a#boost { display:block; width:118px; height: 83px; background:transparent url(./images/hover_haut.gif) -100px -100px no-repeat; text-decoration:none; z-index:20; }
#int a#vie                               { display:block; width: 30px; height:164px; background:transparent url(./images/hover_vie.gif ) -100px -100px no-repeat; text-decoration:none; z-index:20; }
#int a#armure, a#arme                    { display:block; width:116px; height:167px; background:transparent url(./images/hover_armu.gif) -200px -200px no-repeat; text-decoration:none; z-index:20; }
#int a#numero                            { display:block; width: 52px; height: 52px; background:transparent url(./images/hover_num.gif ) -100px -100px no-repeat; text-decoration:none; z-index:20; }

/* ne pas montrer le span texte dans l'état basal */
#int a span, #int a:visited span { display:none; }

/* move the link background image to position 0 0 when hovered */
#int a#numero:hover, #int a#arme:hover, #int a#bonus:hover, #int a#equip:hover, #int a#boost:hover, #int a#vie:hover, #int a#armure:hover {
  background-position:0 0;
}

/* style commun aux span textes */
#int a:hover span {
  position:absolute;  
  width:250px; /* avant micky : 150px */
  margin-top :-100px; /* ajouter par micky */
  margin-left:-100px; /* ajouter par micky */
  display:block; 
  font-family:arial; 
  font-size:12px; 
  background:#c5c8e7; 
  color:#000029; 
  border:1px solid #000029; 
  padding:5px;
}


/* positionner tous les span textes à gauche de l'image */
#int a#bonus:hover  span { left:-455px; top:  -3px; }
#int a#equip:hover  span { left:-328px; top:  -3px; }
#int a#boost:hover  span { left:-190px; top:  -3px; }
#int a#vie:hover    span { left:-184px; top:-112px; }
#int a#armure:hover span { left:-221px; top:-109px; }
#int a#numero:hover span { left:-344px; top:-109px; }
#int a#arme:hover   span { left:-455px; top:-109px; }

/* Première ligne du texte dans span */
#int a span:first-line { font-weight:bold; font-style:italic; }