body
{
	margin: 0 0 ;
	padding: 0 ;
	text-align: center ;
	font: 0.8em "Arial", helvetica, sans-serif ;
	background: #222 ;
	color:#bbb;
	scrollbar-face-color: #353535;
	scrollbar-highlight-color: #000000;
	scrollbar-shadow-color: #353535;
	scrollbar-3dlight-color: #454545;
	scrollbar-arrow-color:  #007799;
	scrollbar-track-color: #202020;
	scrollbar-darkshadow-color: #202020;
}

div#conteneur
{
	width: 98% ;
	margin: 0 auto ;
	text-align: left ;
	border: 1px solid #222 ;
	background: url(bord_ban.jpg) repeat-x #000;
}

#bord_gauche
{
	background: url(bordg_site.jpg) repeat-y;
	width:15px;
}

#bord_droit
{
	background: url(bordd_site.jpg) repeat-y;
	width:15px;
}

div#banniere
{
	height:150px;
	background: url(banniere_ud.jpg) no-repeat;
}

div#header_haut
{
	height:10px;
	background: url(header_haut.jpg) repeat-x;
	position:relative;
}

div#header_bas
{
	height:10px;
	background: url(header_haut.jpg) repeat-x;
	position:relative;
}

h1#header
{
	height:150px;
	background: url(banniere_elfe.jpg) no-repeat right;
	margin: 0 ;
}

h1#header a
{
	width: 400px;
	height: 112px ;
	display: block ;
	background: url(titre_banniere.png) no-repeat left;
	position: relative ;
	left: 30% ;
	top: 10% ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */

hr {
	clear:both;
}

div#metal-epais
{
	position:relative;
	background:url(header_bas.jpg) repeat-x;
	height:15px;
}

/*=========== BLOC GAUCHE =======*/
td.bloc-gauche
{
	padding:5px 5px 0 5px;
	background:url(chaine_bg.png) no-repeat bottom left;
	width:214px;
	vertical-align:top;
}

td.bloc-gauche a
{
	line-height:24px;
	padding-left:27px;
	background:url(bouton_bleu.jpg) no-repeat #003;
	background-position:left;
	border-bottom:2px dotted #017;
	display:block;
	text-decoration: none ;
	color:#ca2;
	font-weight:bold;
	font-size:1.2em;
}

td.bloc-gauche a:hover
{
	color:#ddd;
}

.header-blocg
{
	line-height:40px;
	position:relative;
	float:left;
	background:url(bg_header_bloc3.png) repeat-x;
	font-size: 1.3em ;
	color:#dadada;
	font-family: "Verdana","Arial";
	width:210px;
}

.icone {
	position:relative;
	float:left;
	width:40px;
	height:40px;
	padding-left:12px;
}

.header-blocg div#ico-navigation
{
	background:url(http://www.arena-100.com/image/ico-navigation.png) no-repeat;
}

.header-blocg div#ico-force
{
	background:url(ico-force.png) no-repeat;
}

.header-blocg div#ico-agilite
{
	background:url(ico-agilite.png) no-repeat;
}
.header-blocg div#ico-intelligence
{
	background:url(ico-int.png) no-repeat;
}

.header-blocg div#ico-objet
{
	background:url(ico-objet.png) no-repeat;
}

.header-blocg div#ico-screenshot
{
	background:url(ico-screenshot.png) no-repeat;
}

.header-blocg-fin
{
	position:relative;
	float:left;
	background:url(header_bloc_g.png) no-repeat;
	width:4px;
	height:40px;
}

.table_blocg
{
	position:relative;
	clear:left;
}
td.tab_bord_g
{
	width:16px; /*13*/
	height:14px;
	background:url(table_bord_g.png) repeat-y right;
}

td.tab_bord_d
{
	padding-right:3px;
	width:12px;
	height:14px;
	background:url(table_bord_d.png) repeat-y;
}

td.tab_bord_bg
{
	width:16px; /*13*/
	height:14px;
	background:url(table_bord_bg.png) no-repeat right top;
}

td.tab_bord_bd
{
	padding-right:3px;
	width:12px;
	height:14px;
	background:url(table_bord_bd.png) no-repeat;
}

td.tab_bord_bas
{
	width:111px;
	height:43px;
	background:url(table_bord_bas.png) repeat-x;
	text-align: right;
}

td.tab_bord_bas2
{
	width:78px;
	height:43px;
	background:url(table_bord_bas2.png) repeat-x;
}

div.title-desc-bord
{
	position:relative;
	float:left;
	width:6px;
}

td#separation
{
	background:url(separation.jpg) repeat-y;
	width:16px;
	/*display:block;*/
}

/*============ CONTENU ========*/
div.contenu
{
	padding:10px 0 0 0;
	color:#bbb;
	width:100%;
}

.title-desc-fond
{
	width:100%;
	position:relative;
	font-size: 1.4em ;
	background: url(h1_desc_fond.jpg) repeat-x;
	color: #ddd;
	text-align:center;
	border:1px solid #000;
	height:62px;
	clear:left;
}

.title-desc-fond img
{
	padding-top:11px;
}

div.bloc
{
	padding:0 10px 5px 10px;
	position:relative;
}

.note{
	color:#ca2;
	text-decoration:underline;
}

.tab-gris {
	width:100%;
	text-align:center;
	border:1px solid #222;
}

.tab-gris th {
	border-width:2px;
	border-style:groove;
	border-color:#333;
	background-color:#555;
}

.tab-gris tr {
	height:21px;
	color:#bbc;
}

.tab-gris td {
	font-size:0.9em;
}

.tab-gris td.h-ligne0 {
	background-color:#335;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
}

.tab-gris td.h-ligne1 {
	background-color:#223;
	border-bottom:1px solid #000;
	border-right:1px solid #000;
}

.tab-gris caption {
	font-weight:bold;
	color:#ca2;
	font-size:1.2em;
}

/*====== GENERAL =====*/
.texte  p
{
	background:url(petite_boule_bleu.png) no-repeat 8px 6px;
	margin:0 10px 5px 0;
	line-height:12px;
}

.texte h2
{
	background: url(fleche.png) no-repeat 14px 8px;
	margin:10px;

}

.texte ul
{
	margin:5px 0 5px 20px;
	padding:5px 0 5px 20px;
}


/*====== DESCRIPTION =====*/
.description {
	margin-left:15px;
}

.description p
{
	background:url(petite_boule_bleu.png) no-repeat 8px 6px;
	margin:0 10px 5px 0;
	line-height:12px;
}

.description h2
{
	background: url(fleche.png) no-repeat 14px 8px;
	margin:10px;

}

.description ul
{
	margin:5px 0 5px 25px;
	padding:5px 0 5px 25px;
}

.tab-couloir {
	width:40%;
	margin:10px auto 10px auto;
}

.tab-difficulte {
	width:85%;
	margin:10px auto 10px auto;
}

.tab-gris tr.ligne0 {
}
.tab-gris tr.ligne1 {
	color:#ca2;
}
.tab-gris th.difficulte {
	color:#bbb;
}

img.vague {
	margin:3px 0.6% 3px 0.6%;
	border:2px groove #555;
	width:22%;
}

img#ex-chat {
	width:613px;
	margin-left: auto;
	margin-right: auto;
	border:2px groove #555;
}
/*====== LISTE HEROS =====*/
.img-liste-hero {
	width:25%;
	height:200px;
	position:relative;
	float:left;
	text-align:center;
	letter-spacing:1px;
}

.img-liste-hero img{
	border:0px;
}

.img-liste-hero span{
	font-size:0.85em;
	color:#0af;
}


/*====== HEROS ========*/
.model-hero
{
	float:left;
	margin-right:10px;
	background-color:#000;
}

.description-hero
{
	min-height:180px;
	padding-top:10px;
}

#img-hero {
	width:142px;
}
#contour-hero-haut
{
	width:160px;
	height: 9px;
	background: url(cadre_hero_h.jpg) no-repeat;}
#contour-hero-bas
{
	width:160px;
	height: 9px;
	background: url(cadre_hero_b.jpg) no-repeat;
}
td#contour-hero-gauche
{	
	height:162px;
	width:9px;
	margin:0;
	padding:0;
	background: url(cadre_hero_g.jpg) no-repeat;
}
td#contour-hero-droit
{	
	height:162px;
	width:9px;
	background: url(cadre_hero_d.jpg) no-repeat;
}

.description-hero span{
	font-weight:bold;
	color:#ca2;
	line-height:17px;
}

.description-hero p{
	margin-top:5px;
}

.description-hero img.sort{
	padding-top:5px;
	margin-left:10px;
	border:0px;
}

.description-hero a span{
	display:none;
}
.description-hero a:hover span{
	display: block;
	position:absolute;
	top:206px;
	left:190px;
	border:1px solid #555;
	width:376px;
	text-align:center;
	color:#39f;
}

/*====== SORT HERO ====*/
.att-invoc{
	color:#ca2;
}

.hero-sort{
	position:relative;
}
.hero-sort img{
	position:relative;
	float:left;
}

.bord-droit-sort{
	margin-top:20px;
}

span.nom-sort{
	background:url(bg-titre-sort.jpg) repeat-x;
	height:40px;
	width:50%;
	display:block;
	position:relative;
	float:left;
	margin-top:20px;
	padding:9px 0 0 10px;
	letter-spacing:1px;
	font-size:1.3em;
	font-weight:bold;
}

.hero-sort span.for{color:#f33;}
.hero-sort span.agi{color:#f30;}
.hero-sort span.int{color:#39f;}

.hero-sort p{
	position:relative;
	clear:left;
	background:url(petite_boule_bleu.png) no-repeat 8px 6px;
	margin:0 10px 5px 10px;
}

.tab-sort {font-size:0.95em;}
/*====== OBJETS =====*/
.classe-objet {
	background:url(bg-titre-sort.jpg) repeat-x;
	height:48px;
	width:100%;
	display:block;
	padding:12px 0 0 0;
	margin-bottom:-25px;
	letter-spacing:1px;
	font-size:1.1em;
	font-weight:bold;
	position:relative;
	float:left;
}

.liste-objet {
	width:85%;
	margin-left:auto;
	margin-right:auto;
	padding:5px;
	background-color:#0E1C29;
	border:2px solid #ca2;
}

.obj-magiques{color:#39f;}
.obj-reliques{color:#ec5;}

.obj {
	position:relative;
	float:left;
	border:2px solid #ca2;
	padding:3px;
	background-color:#0E1C29;
	margin:5px;
}

.prix-objet {
	font-weight:normal;
	color:#fc0;
	margin-bottom:2px;
	line-height:21px;
}

.icone-objet {
	height:64px;
	width:64px;
	float:left;
}

.desc-objet {
	clear:left;
	color:#ca2;
	text-decoration:underline;
	line-height:18px;
}

.type-objet {color:#6c0;}
.nom-obj-classique{color:#fff;}
.nom-obj-orbe{color:#f60;}
.nom-obj-relique{color:#ec9;}

.obj-tooltip {
	font-size:1.05em;
	font-weight:bold;
	color:#fff;
	line-height:16px;
}


/*========= NEWS =======*/
.contour-news-hg
{
	width:15px;
	height:15px;
	background:url(bord-hg-news.jpg) no-repeat;
}

.contour-news-haut
{
	width:100%;
	height:15px;
	background:url(bord-haut-news.jpg) repeat-x;
}

.contour-news-hd
{
	width:16px;
	height:15px;
	background:url(bord-hd-news.jpg) no-repeat right;
}

.contour-news-gauche
{
	width:15px;
	background:url(bord-gauche-news.jpg) repeat-y;
}

.contour-news-droit
{
	width:16px;
	background:url(bord-droit-news.jpg) repeat-y;
}

.contour-news-bg
{
	width:15px;
	height:26px;
	background:url(bord-bg-news.jpg) no-repeat;
}

.contour-news-bas
{
	width:100%;
	height:26px;
	background:url(bord-bas-news.jpg) repeat-x;
}

.contour-news-bd
{
	width:16px;
	height:26px;
	background:url(bord-bd-news.jpg) no-repeat right;
}

.news p
{
	background:url(petite_boule_bleu.png) no-repeat 8px 6px;
	margin:0 10px 5px 10px;
	line-height:12px;
}

.news h2
{
	background: url(fleche.png) no-repeat 14px 8px;
	margin:10px;

}

.news ul
{
	margin:5px 0 5px 25px;
	padding:5px 0 5px 25px;
}

.news p.footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 20px ;
	text-align: right ;
	color: #27408B ;
	border-top: 1px solid #222;
	background:none;
}

/*======= SCREENSHOTS =====*/
.screenshot {
	width:93%;
	margin-left:auto;
	margin-right:auto;
}

.img_screenshot {
	border:0px;
	width:100%;
	height:100%;
}

.index-ss {
	text-align:center;
	width:100%;
}

.index-ss a {
	margin-left:3px;
	margin-right:3px;
}

.miniature, .categorie_ss {
	position:relative;
	text-align:center;
	margin:8px 8px 8px 0;
}

.categorie_ss {	float:right;
	width:170px;
	height:170px;
}
.miniature {float:left;
	width:254px;
	height:253px;
}

.fond_categorie_ss {background:url(fond_categorie_ss.png) no-repeat;}
.miniature-ss {	background:url(fond_miniature_ss.png) no-repeat;}

.fond_categorie_ss img {margin-bottom:8px;}
.miniature-ss img, .fond_categorie_ss img{
	margin-top:10px;
	border:0px;
}

.titre-miniature-ss {
	height:33px;
	background:url(bg-titre-ss-miniature.jpg) repeat-x;
	padding-top:5px;
}

#bord-haut-screenshot {
	height:11px;
	background:url(ss-bord-haut.jpg) repeat-x;}
#bord-bas-screenshot {
	height:11px;
	background:url(ss-bord-bas.jpg) repeat-x;}
#bord-gauche-screenshot {
	width:11px;
	background:url(ss-bord-gauche.jpg) repeat-y;}
#bord-droit-screenshot {
	width:11px;
	background:url(ss-bord-droit.jpg) repeat-y;}

#bord-hg-screenshot {
	width:11px;
	height:11px;
	background:url(ss-bord-hg.jpg) no-repeat;}
#bord-hd-screenshot {
	width:11px;
	height:11px;
	background:url(ss-bord-hd.jpg) no-repeat;}
#bord-bg-screenshot {
	width:11px;
	height:11px;
	background:url(ss-bord-bg.jpg) no-repeat;}
#bord-bd-screenshot {
	width:11px;
	height:11px;
	background:url(ss-bord-bd.jpg) no-repeat;}

/*====== TELECHARGEMENT ====*/
.telecharger {
	text-align:center;

}

div.tab-contenu-dl {
	position:relative;
	float:left;
	width:38%;
	margin:1%;
}

div.tab-nouveaute-dl {
	position:relative;
	float:right;
	width:58%;
	margin:1%;
}

div.contenu h2
{
	padding-left: 32px ;
	line-height: 28px ;
	font-size: 1.4em ;
	color: #ddd; ;
	border-bottom: 1px solid #27408B ;
}

div.contenu h3
{
	margin-left: 25px ;
	padding-left: 5px ;
	border-bottom: 1px solid #27408B ;
	border-left: 3px solid #27408B ;
}

div.contenu p
{
	text-align: justify ;
	text-indent: 1.8em ;
	line-height: 1.5em ;
}

div.contenu a
{
	/*color: #8a0 ;*/
}

div.contenu a:hover
{
	/*color: #9b2 ;*/
}

div#contact
{
	border-left: 2px solid #27408B;
	margin-left: 20px;
	padding-left: 5px;
}

p#footer {
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #27408B ;
	border-top: 2px solid #222;
}

a.lien_footer {
	text-decoration:none;
	color:#27408B;
}

pre
{
	overflow: auto ;
	background: #335 ;
	border: 2px groove #ddd ;
	padding-left:5px ;
	font-size: 1.2em ;
	color:#ccc;
	margin-left:10px;
	margin-right:10px;
}

pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}

span.jaune {color:#ca2;}
span.bleu {color:#39f;}
span.vert {color:#6f0;}

a {
	color:#ca2;
	font-weight:bold;
}

a:hover{color:#fff;}