/* CSS2 du fan-site Hyperiums JeuxOnLine par rackam77 */

/**
 * Corps général du site
 */
body {
	margin:			0;
	background : 	#303030;
    text-align:		center;
	font-family: 	Verdana, sans-serif;
    font-size:		0.8em;
    font-weight:	normal;	
	background:		#303030 repeat;	/*couleur de fond gris-marron */
}
	/* Calque pour l'image de fond*/
	#fond{
		background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_fond.gif') top left repeat-x ; 
	}

	/**
	 * Positionnement du site
	 */
	#site {
		position:		relative;
		margin: 		0 auto;
		width:			900px;
		text-align:		left;	
}

		/* Hauteur minimum IE */
		 #site { 
			#_height:	1000px;
		}
		/* Hauteur minimum autres navigateurs */
		html>body #site {
			min-height: 	1000px;
		}

		/**
		 * Format général des liens du site
		 */
		#site a, #piedDePage a{
			text-decoration:	none; 
			outline: 			none; 
			color:				#c0eaff; /*bleu ciel*/
		}

			#site a:hover, #piedDePage a:hover{
				font-style:				bold;
				color :					#ffffff;
				text-decoration: 		none;
			}

		/**
		 * Calque du selecteur de style
		 */
		 #styleswitcher  {
			position:			absolute;
			margin-top:			310px;
			margin-left:		715px;
			width:				119px;
			height:				79px;
			background:			url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_switcher.png') top left no-repeat; 
		}
			/* classe générale des flèche-lien // celles spécifiques à chaque style sont définies dans leur propre fichier style.css*/
			.lienSwitcher{
				position:	absolute;
				top:		0px;
				display:	block;
				height: 	36px;
				width:		26px;
				z-index:	4;
			}	
			
			/* préchargement des images utilsées lors du survol de la souris des flèches-liens */
			span#loadImage1Switcher1{
				display:		none;
				background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_switcher_flecheBas_mouseover.png') top left no-repeat; 
			}
			span#loadImage1Switcher2{
				display:		none;
				background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_switcher_flecheHaut_mouseover.png') top left no-repeat; 
			}
		/**
		* Calque titre du site + Menu déroulant
		*/
		div#banniere{
			position:		absolute;
			margin-top:		30px;
			margin-left:	0;
			width:			900px;
			height:			775px;
			/** le backgroud est défini dans le ficher style.css specifique */
		}

			div#banniere a:hover { 
				cursor:		pointer; 
			}
			
				a#lienAccueil {
					display:	block;
					margin-left:40px;
					margin-top:	30px;
					height:		170px;
					width:		600px;
				}
	 
		/**
		 *	Menu (général)                   
		 */
		#menu { 
			position:		absolute;
			margin-top:		240px;
			margin-left:	85px;
			width:			746px;
			height:			30px;		
			color:			#ffffff;
			font-family: 	Verdana, sans-serif; 
			font-size:		1.1em;
			background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_barre_menu[v3].png') top left no-repeat;
			
		}

			/*
			 * Menu avec Javascript 
			 */
			.menu_js {
				padding-left:	50px;
				text-align:		center;   
				z-index:		1;
			}          
						
				.menu_js ul.categ_js {
					margin:				0;
					padding:			0;
					float:				left;
					height:				24px;
					list-style-type:	none;
					color:				white;
				}

					.menu_js ul.categ_js li.menu_titres {
						margin:				1px 0;
						padding:			0;
						width:				150px;
						height:				25px;
						text-transform:		uppercase;
					}
					
					.menu_js ul.categ_js li.menu_titres:hover{
						color:			#c0eaff; /*bleu ciel*/			
						cursor:			pointer;
					}
						.menu_js ul.categ_js li.menu_titres ul.menu_items_js {				
							position:			absolute;
							margin-top:			4px;
							padding-bottom: 	3px;
							width:				140px;
							display:			none;							
							text-align:			left;	
							list-style-type :	none;
							list-style-image :	none;  
							border-left :		1px solid #bababa;
							background:			#1c1713; /*3a3a3a*/
							opacity:			0.9;
							-moz-opacity:		0.9;
							filter:				alpha(opacity=90);							
							
							#_list-style-image: none; /* Parceque IE affiche les puces meme quand le menu n'est pas dayroulay */
							
							/*IE6*/
							#margin-left:		-120px ;
							#padding-left:		40px;
							#margin-top:		22px;
						}
						
						.menu_js ul.categ_js li.menu_titres ul.menu_items_js li {
							margin-left:		-40px;
							padding-left:		10px;
							margin-top:			-1px;
							height:				21px;
							width:				170px;
							text-transform:		none;
							font-size:			0.85em;
							z-index:			3;
						}
						
							.menu_js ul.categ_js li.menu_titres ul.menu_items_js li:hover {
								color:				rgb(100%,100%,100%);   
								height:				21px;
								width:				170px;
								background:			#88b2c6;
							}
							.menu_js ul.categ_js li.menu_titres ul.menu_items_js li a {
								padding-top:	4px;
								height:			21px;								
								width:			170px;
								display:		block;								
							}
						
			/**
			 * Menu sans Javascript 
			 */
			.menu {
				margin-top:		-70px;
				text-align:		center;
				display:		none;
				
			}	
				.menu ul.categ {
					list-style-type:	none;
					padding:			0;
					width:				100%;
				}
					.menu ul.categ li.menu_titres {
						text-align:		center;
						padding:		10px;
					}
						.menu ul.categ li.menu_titres ul.menu_items {
							text-align:			center;
							margin-left:		-40px;/* alignement par rapport au titre de cataygorie */
							list-style-type:	none;
							
						}	

		/**
		 * Calque Pub Google
		 */
		#pubJoL {
			position:			absolute;
			margin-top:			310px;
			margin-left:		85px;
			padding-top:		10px;
			padding-left:		20px;
			width:				548px;
			height:				78px;
			background:			url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_pubjol.png') top left no-repeat;
		}

		/**
		* Calque bandeau titres actus + titres forums
		*/
		#bandeau{
			position:			absolute;
			margin-top:			420px;
			margin-left:		0;
			width:				880px;
			height:				160px;
		}

			/**
			 * Titres des Actualités
			 */
			#sujetsActus {
				position:		absolute;
				margin-top:		15px;
				margin-left:	30px;
				width:			396px;
				height:			136px;
				text-align:		left;
				background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_titreactus.png') top left no-repeat;
				
			}
				#sujetsActus ul {
					list-style-type:	none;
					margin:				40px 0 0 30px;
					padding:			0;
					width:				330px;
					font-size:			0.9em;
				} 				
			/**
			 * Sujets des forums
			 */
			#sujetsForums {
				position:		absolute;
				margin-top:		15px;
				margin-left:	470px;
				width:			396px;
				height:			136px;
				text-align:		left;
				color:			#ffffff;
				background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_titreforum.png') top left no-repeat;
			}
				/**
				 *	Bug IE 
				 */
				#sujetsForums ul {  
					list-style-type:	none;
					margin:				40px 0 0 30px;
					padding:			0;
					width:				330px;
				} 
				#sujetsForums ul li:before { 
					content:	'> ';
					
				}
					#sujetsForums ul li span.pseudos {
					}

		/**
		 * Calque sans le bandeau titres actus + ...
		 */
		#contenuHaut3 {
			height:			50px;	
			margin-bottom:	-120px;
		}	

	/**
	 * Calque du contenu central
	 */
	#contenuCentral {
		position:			absolute;
		margin:				600px 0;
		padding:			0;
		width:				900px;	
		display:			inline;  
		background:			#5e5e5e top left repeat-y;
	}	  
		/* Les autres navigateurs 
		html>body #contenuCentral {
			min-height: 600px;
		}   
		html>body #contenuCentral {		
			#_height:	600px;
		}*/
		#contenuCentral_conteneur{
			min-height: 600px;
			#_height:	600px;
		}
	/**
	 * Calque du pied-de-page
	 */	
	#piedDePage {	
		position:		absolute;
		margin:			0;
		padding:		0;
		display:		inline;
		height:			354px;
		width:			900px;	
		/**
		 * le backgroud défini dans le style specifique
		 */
	}	
		div#lienPiedDePage {
			margin-top:			150px;
			margin-left:		200px;
			width:				500px;
			text-align:			center;
			line-height:		1em;
			font-family:		Verdana, sans-serif; /*Nasalization,*/
			font-size:			1em;
			line-height:		1.4em;
			/*text-transform:		uppercase; */
			color:				white;
		}
			.classeLienPiedDePage{
				position:		absolute;
				display:		block;
				height:			10px;
			}
			

	/**
	 *	Modification du CSS des ACTUS et ARTICLES JoL                  
	 */    
	 div.jol_actus_actualite , div.jol_article_article{ 
		width:		0;
		color:		#ffffff;		
	}
		div.jol_actus_container, div.jol_article_container{
			margin-left:		30px;
			margin-bottom:		30px;
			width:				829px;			
			background:			#6e6e6e;
		}
			/**
			 * Bordure (image) haut de la boite actus 
			 */
			div.act_header, div.art_header {
				width:				829px;
				height:				80px;
				background:			url(http://medias.jeuxonline.info/hyperiums/images_v2/hyp_act_header.gif) no-repeat top left;
			}
			
			/**
			 * Contenu des actus et articles
			 */
			div.jol_artact_container_contenu{
				width:			829px;				
				background:		#6e6e6e;
			}
			/**
			 * Gestion des erreurs
			 */
			div.jol_article_erreur {
				padding-left:	40px;
				color:			white;				
			}
			
			/**
			 *Bordure (image) bas de la boite actus et articles 
			 */
			div.actart_footer {
				width:			829px;
				height:			15px;
				background:		url(http://medias.jeuxonline.info/hyperiums/images_v2/hyp_act_footer.gif) no-repeat top left;				
			}
		
			/**
			 * Vignette des actus
			 */
			span.jol_actus_vignette {
				margin-top: 	20px;
				margin-left:	20px;
				height:			64px;
				width:			64px;
				float:			left;
			 }
			 
			 span.jol_actus_outils, span.jol_article_outils  {
				float:			left;
				margin-left:	18px;	
			 }
			 
				/** 
				 * Titres des actus et articles
				 */
				div.jol_actus_titre, div.jol_art_titre { 
					margin-top:			15px;
					width:				700px;
					text-transform:		uppercase; 
					color:				#c0eaff;
				}
					div.jol_actus_titre a ,div.jol_art_titre a {
						color:				#c0eaff;
					}
					
				div.jol_actus_hr, div.jol_art_hr { 
						width:			400px;
						height:			8px;
						text-align:		left;
						background:		url('http://medias.jeuxonline.info/hyperiums/images_v2/hyp_act_hr.gif') top left no-repeat;
					} 

				/**
				 * Auteur et date des actus
				*/
				div.jol_actus_auteur_date, div.jol_art_auteur_date  { 
					margin-top:		10px;
					font-size:		.8em;	
				}

	/** 
	 * Corps des actus et articles
	 */
	div.jol_actus_corps, div.jol_art_corps, div.jol_actus_accroche { 
		margin-left:		20px;
		text-align:			justify; 
		width:				780px;
		font-size:			1em;
		font-family: 
	}

	/**
	 * Titres
	 */
	div.jol_actus_corps h1, div.jol_art_corps h1 { 
		font-weight:	bold;
		
	}
	div.jol_actus_corps h2, div.jol_art_corps h2 {
		font-weight:	bold;
	}
	div.jol_actus_corps h3, div.jol_art_corps h3{
		font-weight:	bold;
	}
	div.jol_actus_corps h4, div.jol_art_corps h4 {
		font-weight:	bold;
	}

	/**
	 * Modification images sinon bordure bleu sous IE 
	 */
	div.jol_actus_corps img, div.jol_art_corps img { 
		border:		1px dotted #ffffff;
	} 

	div.jol_actus_infos, div.jol_art_infos{ 
		margin-top:			10px;
		margin-left:		20px;
		font-size:			.8em;  
		min-height:			40px;
	}	
			
	/**
	 * FIX LISTES SOMMAIRE : espace entre les listes (les divs d'une meme liste (physique) sont separees, bizarrement) 
	 */
	div.jol_article_sommaire { 
		margin-bottom:		13px; 
	}	
		div.jol_article_sommaire_titre { 
			margin-bottom:	13px; 
		}
		div.jol_article_sommaire_corps ul { 
			margin:			0;
		} 

	/**
	 * Gestion des actualités archivées
	 */
	div.archives {
		color:				white;
	}
	p.freshnews_archives_titre, p.freshnews_archives_texte {
		width:				790px;
		margin:				20px;
	}
	
	/**
	 * Gestion de la page lexique
	 */
	div.lexique {
		margin-left:		30px;
		margin-bottom:		30px;
		width:				829px;
		color:				white;
	}
		div.lex_header {
			width:				829px;
			height:				9px;
			background:			url(http://medias.jeuxonline.info/hyperiums/images_v2/hyp_act_header.gif) no-repeat top left;
		}
		div.lex_titre {
			padding-left:		20px;			
			height:				30px;
			background:			#6e6e6e;
			font-size:			1.4em;			
		}
		div.lexique_container {
			padding-left:		20px;
			padding-bottom:		20px;
			background:			#6e6e6e;
		}
		div.lex_footer {
			height:				16px;
			background:			url(http://medias.jeuxonline.info/hyperiums/images_v2/hyp_act_footer.gif) no-repeat top left;
		}

/**
 * Utilisation du CSS images, vidéos via @image() et @video()  
 */
 div.jol_image { 
	margin:		2px; 
	padding:	1px; 
	font-size:	0.8em;  
	border:		0 none;  
} 
	div.jol_image div.legende { 
		margin-top:		5px; 
	}
	div.jol_image a { 
		color:			#000; 
	}
	div.jol_image img { 
		display:		block;
	} 
    div.jol_image_legende { 
		display:		none;	
		visibility:		hidden;
		height:			0;
	}

div.jol_video { 
	margin-bottom:		20px ; 
	padding: 			1px 3px; 
	font-size:			11px;  
	border:				3px solid #1c1a17; 
} 

/**
 * Tags - Container des tags
 */
div.jol_actus_tags {
    position:		absolute;
    margin:         40px 0px 10px 170px;
	padding:        0px 0px 0px 20px;
	min-height:     15px;
}

/**
 *  Tags - Liste des tags
 */
div.jol_actus_tags ul.jol_actus_tags_liste {
    list-style-type:    none;
    margin:             0;
    padding:            0;
}

/**
 *  Tags - Tag
 */
div.jol_actus_tags li.jol_actus_tags_tag {
    display:            inline;
    padding-right:      5px;
}

/**
 * Tags - Séparateur
 */
div.jol_actus_tags li.jol_actus_tags_tag:after {
    content:    ',';
}
div.jol_actus_tags li.jol_actus_tags_tag_dernier:after {
    content:    '';
}
/**
 * Pages - Container
 */
div.jol_actus_pages {
   /* color:  		#999;*/
    margin: 		10px 0;
	
	
}

/**
 * Pages - Liste des pages
 */
div.jol_actus_pages ul.jol_actus_pages_liste {
    margin:     0;
    padding:    0;
    text-align: center;
}

/**
 * Pages - Page
 */
div.jol_actus_pages li.jol_actus_page {
    list-style-type:    none;
    display:            inline;
    padding-bottom:     1px;
    margin-right:       3px;
}

/**
 * Pages - S?parateur
 */
div.jol_actus_pages li.jol_actus_page_separateur { }

/**
 * Pages - Lien vers une page
 */
div.jol_actus_pages a.jol_actus_page_lien {
    border:             1px solid #45403a;
    color:              #ffffff;
    padding:            2px 5px;
    text-decoration:    none;
}

/**
 * Pages - Lien vers une page (survol? ou actif)
 */
div.jol_actus_pages a.jol_actus_page_lien:hover,
div.jol_actus_pages a.jol_actus_page_lien:active {
    border:             1px solid #a29885;
    color:              #00468C;
}

/**
 * Pages - Lien vers la page courante
 */
div.jol_actus_pages a.jol_actus_page_lien_actif,
div.jol_actus_pages a.jol_actus_page_lien_actif:hover {
    
    color:              #fff;
    border-color:       #a29885;
    font-weight:        bold;
    cursor:             default;
}

/**
 * Pages - Lien vers la page pr?c?dente ou suivante
 */
div.jol_actus_pages a.jol_actus_page_lien_suivprec {
    color:              #00468C;
    font-weight:        bold;
}
div.jol_actus_pages a.jol_actus_page_lien_suivprec:hover {
    color:              #00468C
}

/**
 * Pages - Liens d?sactiv?s
 */
div.jol_actus_pages a.jol_actus_page_lien_desactive,
div.jol_actus_pages a.jol_actus_page_lien_desactive:hover {
    border-color:       #a29885;
    color:              #ccc;
    cursor:             default;
    font-weight:        normal;
}