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

/* 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; }

/* montage principal */
#wrapper { position: relative; margin: 0 auto; width: 816px; }

#header_logo { float: left; width: 313px; height: 271px; }
#header_rightcol { float: left; width: 503px; height: 271px; }

#language_picker { position: absolute; left: 768px; top: 76px; width: 41px; height: 19px; padding-left: 5px; background: #232323 url(../img/bg_languages_picker_home.gif) no-repeat left top; }
#language_picker ul { list-style-type: none; }
#language_picker li { float: left; margin: 4px 3px 0 0; }
#bt_fr { display: block; width: 16px; height: 11px; background: url(../img/flag_fr.gif) no-repeat left bottom; }
#bt_en { display: block; width: 16px; height: 11px; background: url(../img/flag_en.gif) no-repeat left bottom; }
.selected_language a#bt_fr, .selected_language a#bt_en, a#bt_fr:hover, a#bt_en:hover { background-position: left top; }

#softnav_fr { height: 26px; background: url(../img/hp_softnav_fr.gif); }
#softnav_en { height: 26px; background: url(../img/hp_softnav_en.gif); }
#softnav_fr a, #softnav_en a { display: block; width: 438px; height: 26px; }

#softnav_hover { position: absolute; top: 180px; right: 0; width: 566px; height: 173px; background: #232323 url(../img/hp_bg_softnav_rollover.jpg) no-repeat left top; font-size: 13px; }
	#softnav_hover .intro { float: left; margin: 32px 25px 0 30px; padding: 0; width: 140px; }
	#softnav_hover .legende { float: left; margin: 32px 30px 0 0; padding: 0; width: 180px; text-align: right; color: #999999; }
	#softnav_hover .txt2 { float: left; margin-top: 32px; padding: 0; width: 140px; }
	#softnav_hover img { margin-top: 5px; }
		/* 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_home.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'); }

#middle_rightcol { float: right; width: 566px; text-align: right; }
#middle_leftcol { float: right; width: 250px; }

#searchbar { float: left; width: 365px; height: 40px; margin-bottom: 20px; padding-left: 17px; background: url(../img/hp_searchbar.gif) no-repeat left top; }
#searchbar .txt { float: left; width: 220px; height: 22px; padding: 10px 5px 8px 0; background: none; border: none; font-size: 16px; color: #f3c53e; }
#searchbar .sub { float: left; width: 140px; height: 40px; padding-right: 45px; background: url(../img/hp_searchbutton.gif) no-repeat left top; border: none; cursor: pointer; text-align: right; font: normal 16px Arial, Helvetica, sans-serif; color: #fff; }

#fb_home { float: left; width: 175px; height: 40px; margin-left: 9px; }

#visites { float: right; margin-top: 7px; padding: 40px 0 0 15px; width: 170px; height: 35px; overflow: hidden; }
	#visites.fr { background: transparent url('../img/pagesvis_home_fr.gif') no-repeat 0 0; }
	#visites.en { background: transparent url('../img/pagesvis_home_en.gif') no-repeat 0 0; }
	#visites ul { padding-left: 4px; }
	#visites li { line-height: 2.5ex; list-style-type: none; background: url(../img/puce.gif) no-repeat 0 3px; 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; }
	
#content { padding: 0 0 15px 66px; 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: 23px; padding: 143px 6px 0; width: 119px; height: 75px; background-repeat: no-repeat; cursor: pointer; }
		.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 { background-image: url('../img/bg_case_memoire.jpg'); }
		.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{ background-image: url('../img/bg_case_memoire_en.jpg'); }
		.case.feu_en{ margin-right: 0; background-image: url('../img/bg_case_feu_en.jpg'); }
		.case h2 { display: none; }
		.case h3 { margin-bottom: 10px; font: bold 12px arial; color: #e6b734; }
		.case.inactive { background-position: right top; color: #3d3d3d; }
		.case.inactive h3 { color: #453c22; }
		.case.inactive a.btn { background-position: left bottom; color: #453c22; }
		.case.active { background-position: left top; color: #bbb; }
		.case.active a.btn { background-position: left top; color: #E6B734; }
		
	/* boutons */
	/* NB : pour le hover modifier la seconde position du background (= hauteur !) */
	.btn { display: block; width: 118px; height: 19px; padding: 4px 0; background: url('../img/btn_level.gif') no-repeat left bottom; text-align: center; font: bold 13px Arial, Helvetica, sans-serif; }
	a.btn:hover { text-decoration: none; }
	
#bottom { margin: 0 0 25px 66px; padding-top: 10px; width: 747px; 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, #footer a.noborder:active, #footer a.noborder:hover { border: 0; padding-right: 1px; background: none; }