/* balises */
html, body { margin: 0; padding: 0; background: #000; }
div { font: normal 12px arial; color: #bbbbbb; }
img { border: 0; }
h2 { margin: 0 0 5px 0; font: bold 12px arial; color: #e6b734; }
a { color: #bbbbbb; text-decoration: none; outline: none; }
a:hover { text-decoration: underline; }

/* styles courants */
.clear { clear: both; }
.left { float: left; }
.right { float: right; }
.puce { padding-left: 12px; background :transparent url('../img/puce.gif') no-repeat 0 4px; }

/* boutons */
.btn_infos { position: absolute; bottom: 10px; right: 0; display: block; margin: 20px 0 0 0; width: 88px; height: 21px; background: transparent url('../img/btn_infos.gif') no-repeat 0 0; }
	.btn_infos:hover { background-position: 0 -21px; }
	.btn_infos span { display: none; }
	
/* montage principal */
#wrapper { position: relative; margin: 0 auto; width: 816px; }

#header { padding: 90px 0 20px 320px; width: 488px; height: auto; background: #000 url('../img/bg_header.gif') no-repeat right 0; text-align: right; }
	#header strong { display: block; margin-bottom: 5px; }
	#header .logo { position: absolute; top: 0; left: -13px; }
	
#visites { float: left; margin: 90px 0 0 54px; -margin-left: 25px; padding: 35px 0 0 15px; width: 170px; height: 70px; overflow: hidden; }
	#visites.fr { background: transparent url('../img/cartMenus_fr.gif') no-repeat 0 0; }
	#visites.en { background: transparent url('../img/cartMenus_en.gif') no-repeat 0 0; }
	#visites ul { padding-left: 20px; }
	#visites li { line-height: 2.5ex; list-style-type: none; background: url(../img/puce.gif) no-repeat 0 3px; *background-position: 0 7px; display: block; padding-left: 14px; margin-bottom: 5px; font: 12px Arial, Helvetica, sans-serif; color: #fff; }
	#visites a:link, #visites a:visited { color: #bcf; text-decoration: none; }
	#visites a:hover, #visites a:active { color: #fff; text-decoration: none; }

.top_navigation { float: left; margin: 0; padding: 42px 0 0 20px; width: 549px; height: 157px; background: transparent url('../img/bg_nav.jpg') no-repeat 0 0 ; }
	.top_navigation .intro { float: left; margin: 19px 20px 0 0; padding: 0; width: 150px; text-align: justify; }
	.top_navigation .legende { float: left; margin: 15px 20px 0 0; padding: 0; width: 200px; text-align: right; color: #999999; }
	.top_navigation img { float: left; border: 1px solid #999999; }
		/* détails des icônes de la légende */
		.icone { display: block; padding: 4px 30px 0 0; height: 22px; background-position: right 0; background-repeat: no-repeat; }
		.icone.back_chap { background-image: url('../img/legende_retour_chap.gif'); }
		.icone.back_page { background-image: url('../img/legende_retour_page.gif'); }
		.icone.play { background-image: url('../img/legende_play.gif'); }
		.icone.plus { background-image: url('../img/legende_plus.gif'); }
	
#content { padding: 20px 0 15px 58px; width: 750px; }

	/* les différents univers */
	/* NB : pour le hover modifier la première position du background (= largeur !) */
	.case { position: relative; float: left; margin-right: 22px; padding: 150px 3px 0; width: 125px; height: 68px; background-repeat: no-repeat; }
		.case.loi_fr  { background-image: url('../img/bg_case_loi.jpg'); }
		.case.dieux_fr { background-image: url('../img/bg_case_dieux.jpg'); }
		.case.chaos_fr { background-image: url('../img/bg_case_chaos.jpg'); }
		.case.memoire_fr { width: 125px; background-image: url('../img/bg_case_memoire.jpg'); }/* /!\ attention exception : +large de 3px par rapport aux autre /!\ */
		.case.feu_fr { margin-right: 0; background-image: url('../img/bg_case_feu.jpg'); }
		.case.loi_en  { background-image: url('../img/bg_case_loi_en.jpg'); }
		.case.dieux_en{ background-image: url('../img/bg_case_dieux_en.jpg'); }
		.case.chaos_en { background-image: url('../img/bg_case_chaos_en.jpg'); }
		.case.memoire_en{ width: 125px; background-image: url('../img/bg_case_memoire_en.jpg'); }/* /!\ attention exception : +large de 3px par rapport aux autre /!\ */
		.case.feu_en{ margin-right: 0; background-image: url('../img/bg_case_feu_en.jpg'); }
		.case.inactive { background-position: right top; color: #3d3d3d; }
		.case.inactive h2 { color: #453c22; }
		.case.inactive a { background-position: bottom; }
		.case.active { background-position: left top; color: #bbb; }
		.case.active h2 { color: #e6b734; }
		.case.active a { background-position: top; }
	
	/* boutons */
	/* NB : pour le hover modifier la seconde position du background (= hauteur !) */
	.btn { display: block; position: absolute; bottom: 5px; left: 6px; display: block; margin: 0; width: 118px; height: 27px; background-repeat: no-repeat; background-position: left bottom; }
		.btn.niveau_1 { background-image: url('../img/btn_niveau_1.gif'); }
		.btn.niveau_2 { background-image: url('../img/btn_niveau_2.gif'); }
		.btn.niveau_3 { background-image: url('../img/btn_niveau_3.gif'); }
		.btn.niveau_4 { left: 9px; background-image: url('../img/btn_niveau_4.gif'); }/* /!\ attention exception : cf. ci-dessus /!\ */
		.btn.niveau_5 { background-image: url('../img/btn_niveau_5.gif'); }
	.btn span { display: none; }

#bottom { margin: 0 0 25px 58px; padding-top: 10px; width: 744px; border-top: 1px solid #333333; }
#footer { float: right; text-transform: uppercase; }
	#footer a, #footer a.visited { display: block; float: left; border-right: solid 1px #666; padding: 1px 7px; font-size: 10px; color: #999; text-decoration: none; }
	#footer a:hover, #footer a:active { color: #bbb; background-color: #1f439a; }
	#footer a.noborder { border: 0; }