/*Créez par b.vek1 le 17/06/2008 */


html 
{
	height:100%;
}
#en_tete 
{
	background-image: url("baniere1.jpg");
	background-repeat: no-repeat;
	width:770px;
    height:100px;
	margin-left:0 !important;
		 
}
#extension_header
{
	width:100%;
	background-image:url("baniere_ext.jpg");
	border-bottom:#d4d4d2 solid 2px;
	background-repeat: repeat; 
	margin-bottom: 2%;
}
body
{
	height:100%;
	margin-top:0;
    margin-bottom: 4%;  
	background-color:#d4d4d4;
		
}	
#contenu
{
	background-color:#B3B3B3; /*couleur de fond: gris*/
		
	margin-bottom: 3%; /*marge en bas du contenu pour evité que le footer colle*/
	border: 1px solid black; /*bordure autour du contenue*/
	padding-left: 1%; /*petite marge de 1% pour décallé le texte vers la gauche*/
	padding-right: 1% /*petite marge de 1% pour décallé le texte vers la droite, si il devient trop lont*/ 
		
}	
#menu_gauche
{
	float: left; /* Le menu flottera à gauche */
	width: 20%; /*en pourcentage pour design extensible, a testé sous differente resolution*/
}
.menu_interieur
{
	list-style-image: url("puce-menu1.png"); /* On change l'apparence des puces */
	border:dashed black 1px; /*bordure de 2px autour des menu, essayer de trouvé une belle image pour contour*/
	margin-top: 3%; /*marge au dessus des menus pour evitez qu'il se collent entre eux, a voir si on peu mettre un pourcentage*/
	margin-right: 5%; /*marge sur le coté droit pour évité que le menu colle aux texte du contenue*/
	padding-left: 4px; /*petite marge de 1% pour décallé le texte vers la gauche*/
	
	
	
}	

.menu_interieur a:hover
{
	/*background-color: #B3B3B3; le fond devient gris - enlever pour test .../!\ */
    color: green; /*le lien devient vert*/
	text-decoration: underline; /*le lien se souligne*/
}
#footer
{
	border: 1px solid black; /*bordure de 2px sur les bord du footer*/
/*	height: 10%; hauteur de 10%*/
	width : 100%; /*largeur de 100%*/
	text-align: center; /*on centre les texte ou image dans le pied de page*/
	float: left; /*pour reglé le bug du footer au milieu de la page*/
	
}
.titre_important
{
	text-align: center; /*centre */
	font-weight: bold; /*met le texte en gras*/
	text-decoration: underline; /*souligne le texte*/
	color: #000000; /*couleur*/
}
.titre_moyen 
{
	font-weight: bold; /*en gras*/
	background-image: url("h3-club.png"); /*une petite image devant les titres*/
    background-repeat: no-repeat; /*l'image devant les titre se repete pas*/
	padding-left: 30px; /*marge de 30 pour evité que l'image passe derriere le texte*/
    color: #303030; /*couleur gris */
    text-align: left; /*alignement a gauche*/
   
	
}
.titre_souligne
{
	background-image: url("heart.png"); /*une petite image devant les titres*/
    background-repeat: no-repeat; /*l'image devant les titre se repete pas*/
	padding-left: 20px; /*marge de 30 pour evité que l'image passe derriere le texte*/
	text-align: left; /*alignement a gauche*/
	text-decoration:underline; /*on souligne*/
}
.souligne
{
	text-decoration: underline; /*on souligne*/
}	
.information
{
	background-image: url("information.jpg"); /*une petite image devant les infos*/
    background-repeat: no-repeat; /*l'image devant les titre se repete pas*/
	padding-left: 30px; /*marge de 30 pour evité que l'image passe derriere le texte*/
	text-align: left; /*alignement a gauche*/
	
}	
.liste
{
	list-style-image: url("puce-menu1.png"); /* On change l'apparence des puces */
}	
.liste1
{
	list-style-image: url("dossier.png"); /*on change l'apparence des puces en dossier pour le plan du site*/
}
.liste-ff
{
	list-style-image: url("firefox.png"); /*on change l'apparence des puces - des mini firefox :D */
}
.centrer
{
	text-align:center; /*centre*/

}

img
{
	border: 0; /*on enleve le cadre violet autour des image avec des liens*/
}
.video
{
	text-align:center; /*centre les video*/
	margin:auto; /*marge autour de la video*/
	border: dashed black 1px; /*cadre en pointilé autour de la video*/
	width:  430px; /*on delimite le div pour que le cadre soit autour de la video et deborde pas*/
	height: 375px; /*idem*/
	margin-top:1%; /*marge de 1% en haut de la video pour évité quelque se colle*/
}

.trans_inline
{
	display: inline; /*on transforme "optimisé firefox" en type inline pour le callé entre les 2 image du w3c*/
	
}

.italic
{
	font-style: italic; /*on créer un class italic pr mettre en .... italic */
}
.centrer_souligne
{
	text-align:center; /*on centre*/
	text-decoration:underline; /*on soulogne*/
}
.livreor_formulaire
{
	
}	
.niveau_tutoriel
{
	border: dashed white 1px; /*on fait un contour en pointillé*/
	margin-top:1%;
}

#header_2
{
	border: dashed black 1px; /*bordure de 1px pointillé en noir*/
	text-align: center; /*on centre le texte en l'occurence l'heure en javascript*/
	margin-bottom: 1%; /*marge en 1% en dessous du div pour évité que sa colle au contenue*/
}
.image
{
	
	text-align:center; /*on centre*/
	
}
.image-sans-div
{
	/*tout sa pour centrer*/
	display:block; 
	width:auto; 
	margin-left:auto; 
	margin-right:auto
}

.new
{
	border:dashed white 1px; /*bordure de 1 pixel en poitilé autour d'une news*/
	width: 95%; /*95 % du block contenue*/
	padding: 1%; /*marge intérieur de 1% pour evite que le texte colle*/
	margin-bottom:1%; /*pour eviter que les news se colle entre elle*/
	
}
p , h1, h3, li, h5, dt, dl, .trans_inline, .new
{
   /* La police Comic Sans MS est agréable à lire pour les paragraphes je trouve */
   font-family: "Trebuchet MS", Verdana, Georgia, serif;
}

.image_news
{
	text-align:center; /*centre*/
	height: 50%;
	width: 50%
	
}

ul.liste-sans-puce-inline li
{
	list-style-type:none; /*on enleve les puces devant la liste*/
	display:inline; /*on transforme la liste en inline (afin de mettre plusieur liste les une a la suite des autre)*/
}	

a:hover
{
	color:green; /*au passage de la souris sur les lien , les liens seront en vers*/	
}

dt
{
	color:green; /*on colore le mot a défenir*/
}

.livre-or
{
	text-align: center; /*on centre tout le livre d'or*/
}	
.menu_interieur-1 /*inutile en ce moment car le menu livre d'or est désactivé ...*/
{
	list-style-image: url("puce-menu1.png"); /* On change l'apparence des puces */
	border:dashed black 1px; /*bordure de 2px autour des menu, essayer de trouvé une belle image pour contour*/
	margin-top: 3%; /*marge au dessus des menus pour evitez qu'il se collent entre eux, a voir si on peu mettre un pourcentage*/
	margin-right: 5%; /*marge sur le coté droit pour évité que le menu colle aux texte du contenue*/
	padding-left: 4px; /*petite marge de 1% pour décallé le texte vers la gauche*/
	overflow: hidden; /*on coupe le texte....*/
	
}

td /* Toutes les cellules des tableaux... */
{
   border: 1px dashed white; /* ... auront une bordure de 1px */
}


.anti-debordage
{
	overflow: auto; /*on coupe le texte avec une barre de défilement*/	
}	
.pseudo-or
{
	text-decoration:underline; /*on souligne le pseudo des gens*/
	
}	
.pub-video
{
	margin-top: 2%;
	width: 404px ; /*on défini une largeur de 404 pixel*/
	height: 436px ; /*et une hauteur de 436*/
	margin: auto; /*marge autour de la video*/
	border:dashed black 1px; /*bordure blanche autour */
	text-align: center; /*pub centré*/
}	

/*CSS POUR LE FORMULAIRE DU LIVRE D'OR*/

.livreor_formulaire fieldset
{
	margin-bottom: 10px;
	border: #CCC 1px solid;
}
.livreor_formulaire fieldset legend
{
	padding: 0 10px;
	border-left: #CCC 1px solid;
	border-right: #CCC 1px solid;
	font-size: 1.2em;
	color: #555;
}


/*CSS POUR LE FORMULAIRE DE CONTACT*/

.contact-formulaire fieldset
{
	margin-bottom: 10px;
	border: #CCC 1px solid;
}


.contact-formulaire fieldset legend

{
	padding: 0 10px;
	border-left: #CCC 1px solid;
	border-right: #CCC 1px solid;
	font-size: 1.2em;
	color: #555;
}
.expo-new
{
	color:red; /*couleur texte en rouge*/
	font-size: 60%; /*taille reduite a 60%*/
	
}	
.image-centrer
{
	display:block; /*on transforme l'image en block (on evite un div comme sa)*/
	/*astuce vu sur un site, centrage*/
	width:auto;
	margin-left:auto; 
	margin-right:auto;
		
}	
/*PUB DE FIN DE TUTO GOOGLE*/
.pub-fin-tuto
{
	text-align: center; /*on centre les pub*/
	border: 1px dashed white; /*bordure pointillé blanc autour*/
	margin: 1% 1% 1% 1%; /*marge autour de la pub*/
	width: 238px;/*largeur de 238px*/
	height: 64px; /*hauteurde 64 pixel*/
}
.cadre-interieur-96 /*cadre interieur de l'article pour présenté les magiciens*/
{
	width: 96%; /*le cadre prendra 96% de la largeur du block interieur (contenu)*/
	padding: 1%; /*marge interieur de 1%*/
	
	border: 1px dashed white; /*bordure pointillé blanc autour*/
}	

.image-block
{
	float:left;
	margin-right:1%; /*marge de 1% a droite pour que le texte colle pas*/
}

/*modif effectué a partir du 2008-12-22*/

.input_connection /*les champs dans le menu de gauche pour se connecté*/
{
	width:90%; /*les champs a l'interieur du menu de gauche feront 90 % de sa longueur (c'est par rapport a la longueur du cadre de gauche pas par rapport a la page*/ 
}

.ligne_separation /*mise en forme des lignes de séparation <hr /> */
{
	text-align: center; /*centre les lignes de séparation*/
}


/*mis en forme des tableaux des MP des membres*/
.mp_titre 
{ 
	width:65%; 
}
.mp_expediteur 
{
	width:10%; 
}
.mp_time 
{ 
	width:20%; 
	
}

/**Mise en forme du tableau pour la validation des tutoriels proposer par les membres **/

.id_valid /**ligne de l'id**/
{
	width:5%; 
}

.titre_valid
{
	width: 50%; 
}

.tuto_valid
{
	width: 15%;
}

.auteur_valid
{
	width:15%; 
}

.date_valid
{
	width:10%;
}

.valid_valid
{
	width:5%; 
}

.tableau_validation
{
	text-align:center; 
	width: 100%; 
}
/** [ FIN ] Mise en forme du tableau pour la validation des tutoriels proposer par les membres **/

.tableau_liste_membre /*tableau de la liste des membres*/
{
	width: 100%; /*le tableau prend toutes la largeur*/
	text-align:center; 
}

.tableau_liste_tuto/*le talbeau qui fait la liste des tuto's */
{
		
	width:95%; /*prend 95 de toutes la largeur*/
	margin-left:auto; 
	margin-right:auto;
	
}

.menu_mp
{
	color: #6495ED; /*on colore le ( nombremp ) en bleu*/
}


.vmoment /* mise en forme du bloc video du moment sur l'index sur site*/
{
	width: 430px; /*430 pixel de large, pour la plupart des video */
	float: right; /*ce bloc sera a la droite du site*/
	text-align:center; /*centre les video*/
	margin:1%; /*marge de 1% en haut de la video pour évité quelque se colle*/
	border-left :6px solid gray;
	border-bottom :6px solid gray;
	
}
	
	
.stat /* mise en forme du bloc video du moment sur l'index sur site*/
{
	
		margin-top:1%; /*marge de 1% en haut de la video pour évité quelque se colle*/
}		

.accueil
{
	width:99%;
	height:500px; 
	border: dashed black 1px; /*cadre en pointilé autour de la video*/
	padding-left: 1%;	
		
}

.stat_site
{
	border-left :4px solid gray;
		
}

a .stat_site
{
	margin-left: 10px; 
}
/* ***** */

/*.message-livre-or
{
	color: green; text des livre en vert
}*/	
/*Créez par b.vek1 le 17/06/2008 */