@charset "utf-8";
/* CSS Document */

	/* ************** */
	/* INITIALISATION */
	/* ************** */

/* Images intégrées :
	fond.gif
	bouton_actif.png
	bouton_inactif.png
	puce.png
*/

/* General */
html, adress, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset, h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, hr, pre { display:block; }
li { display:list-item; }
head { display:none; }
table { display:table; }
tr { display:table-row; }
tbody { display:table-row-group; }
tfoot { display:table-footer-group; }
col { display:table-column; }
colgroup { display:table-column-group; }
td, th { display:table-cell; }
caption { display:table-caption; }

/* Page */
html { font-size:100%; /* Evite un bug d'IE 6-7 */ }
body {
	overflow:scroll; /* Affiche les scolling pour eviter le saut de page entre les pages avec et sans scrolling */
	margin:0px auto;
    padding:1em; /* Remettre à zéro si nécessaire */
    font-size:1em; /* A adapter pour la police choisie */
    line-height:1.25em; /* A adapter au design */
}

/* Titres */
h1, h2, h3, h4, h5, h6 {
    margin:0; /* Rapproche le titre du texte */
    line-height:1.2;
    font-weight:bold; /* Valeur par défaut */
    font-style:normal;
}
h1 { font-size:1.75em; text-align:center; } /* rubrique des pages en entête */
h2 { font-size:1.5em; text-align:center; }
h3 { font-size:1.25em; text-align:center; } /* sous rubriques sites & créations */
h4 { font-size:1em; text-align:left; } /* sous rubriques des puces (site/particularité...) */
h5 { font-size:0.75em; text-align:center; }
h6 { font-size:0.50em; text-align:center; }

/* Listes */
ol, ul, dd { margin-left:40px; margin-top:0px; margin-bottom:-10px; padding-top:0; padding-bottom:0; }
ol { list-style-type:decimal; }
ol ul, ul ol, ul ul, ol ol { margin-top:0; margin-bottom:0; }

/* Paragraphes */
p { margin:0; padding:0; text-indent:40px; border-spacing:0; border-collapse:collapse; border-width:0; }
address { margin:0.75em 0; font-style:italic; }
blockquote { margin:1.5em 0; font-size:1em; font-style:normal; }

/* Images */
img {
	border:0px;
	line-height:0px;
}

/* Liens */
a img { border:none; }
a { text-decoration:none; }
br:before { content:"\A" }
:focus { outline:thin dotted invert }

/* Elements caracteres */
i, cite, em, var { font-style:italic; }
b, strong { font-weight:bold; }
big { font-size:1.25em; }
small, sub, sup { font-size:0.75em; }

/* Formulaires */
form, fieldset { margin:0; padding:0; border:none; font-size:1em; }
input, button, select { vertical-align:middle; /* Solution pb. d'alignement */ }

/* Tables */
table { border:0; border-collapse:collapse; border-spacing:0px; }
td, th { vertical-align:inherit; }
th { font-weight:bold; text-align:center; }
caption { text-align:center; }

/* Elements autres */
pre, tt, code, kbd, samp { font-family:monospace }
pre { white-space:pre }
sub { vertical-align:sub }
thead, tbody, tfoot { vertical-align:middle }
del { text-decoration: line-through; }
hr { border:1px inset }
ins	 { text-decoration:underline }


	/* ******* */
	/* Général */
	/* ******* */

/* ************** */
/* Class standard */
/* ************** */

/* Applique au body */
body {
	background-color:#003300;
	font-family:"Comic Sans MS",Verdana,Arial,Helvetica,sans-serif;
}

/* Liens generaux */
	/* Applique aux liens normaux, actifs, visites */
	a:link, a:active, a:visited {
		color:#99FF66;
	}

	/* Applique aux liens quand la souris passe dessus */
	a:hover {
		color:#009900;
	}

/* Div de separation (retour à la ligne) */
	/* Remplace le <br /> donc fait un retour à la ligne */
	.mini_sep {
		margin:0px auto;
		height:0.50em; /* 6px */
		text-align:center;
	}
	
	/* Remplace le <br /> donc fait un retour à la ligne */
	.sep {
		margin:0px auto;
		height:0.75em; /* 10px */
		text-align:center;
	}
	
	/* Remplace le <br /> donc fait un retour à la ligne */
	.maxi_sep {
		margin:0px auto;
		height:1em; /* 14px */
		text-align:center;
	}

	/* pour des paragraphes sans décalage sur la première ligne */
	p.droit { text-indent:0px; }


/* **************** */
/* Corps de la page */
/* **************** */

/* Applique au cadre principal (div_haut + div_centre + div_bas) */
#cadre {
	overflow:hidden;
	margin-left:auto;
	margin-right:auto;
	padding:20px;
	width:960px;
}

/* Applique au cadre du haut (tête de page : tout seul)*/
#div_haut {
	display:none;
	margin:0px auto; /* selon © Elephorm & Alsacreations.com : padding: 20px 0; et tout un patafard à voir */
}

/* Applique au cadre du centre verticalement (partie centrale : div_centre2) */
#div_centre {
	margin:0px auto;
	width:100%;
}

/* Applique au cadre du centre dans la div du centre (div_gauche + div_milieu + div_droite) */
#div_centre2 {
	margin:0px auto;
	width:100%;
}

/* Applique au cadre du bas (pied de page : mentions légales + copyright) */
#div_bas {
	border-top:solid 2px #99FF66;
	margin-left:auto;
	margin-right:auto;
	margin-top:20px;
	padding-top:10px;
	padding-bottom:25px;
	width:100%;
	font-size:12px;
	text-align:center;
	color:#FFFFFF;
}

/* Applique au cadre de gauche (menu/navigation) */
#div_gauche {
	float:left;
	border:solid 2px #99FF66;
	margin:0px auto;
	padding-left:0;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
	width:216px;
	height:100%;
	font-size:14px;
	text-align:center;
	color:#99FF66;
}

/* Applique au cadre du milieu (entête + contenu) */
#div_milieu {
	margin-left:240px;
	margin-right:0;
	padding-left:0;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
}

	/* Applique au cadre supérieur de div_milieu */
	#entete {
		background:url('fond.gif') center scroll repeat;
		border:solid 2px #99FF66;
		margin:0px auto;
		padding:25px;
		height:30px;
		color:#FFFFFF;
	}
	
	/* Applique au cadre inférieur de div_milieu */
	#contenu {
		border:solid 2px #99FF66;
		margin-left:auto;
		margin-right:auto;
		margin-top:20px;
		padding:25px;
		min-height:420px;
		font-size:14px;
		color:#FFFFFF;
	}
	
		/* Applique a la div de mise a jour dans contenu */
		#miseajour {
			font-size:10px;
			text-align:right;
			color:#006600;
		}

/* Applique au cadre de droite (informations) */
#div_droite {
	display:none;
	float:right;
	margin:0px auto;
	padding-left:0;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
	width:0;
	height:100%;
	font-size:14px;
	color:#99FF66;
}

/* Liens copyright */
	/* Applique aux liens normaux, actifs, visites pour les liens de copyright */
	a:link.copy_lien, a:active.copy_lien, a:visited.copy_lien {
		color:#99FF66;
	}

	/* Applique aux liens quand la souris passe dessus pour les liens de copyright */
	a:hover.copy_lien {
		color:#009900;
	}


/* ****** */
/*  Menu  */
/* ****** */

/* Applique a la div avant le menu */
#div_photo {
	display:none; /* ne pas afficher */
	margin:0px auto;
	width:100%;
}

/* Applique au menu des pages dans div_gauche */
#div_menu {
	margin:0px auto;
	width:100%;
}

/* Applique a la div apres le menu */
#div_pub {
	margin:0px auto;
	width:100%;
}

/* Appliquer a chaque ligne (div) du menu */
#div_menu .espace {	
	display:block;
	margin-left:15px;
	line-height:16px;
	text-align:left;
}

/* Appliquer a la div xiti-logo */
#xiti-logo {
	margin:0px auto;
	padding-left:0;
	padding-right:0;
	padding-top:0;
	padding-bottom:0;
	width:80;
	height:15;
}

/* Applique au bouton actif du menu (rubrique) */
a.bouton_actif {
	background:url('bouton_actif.png') no-repeat;
	padding-left:20px;
	line-height:16px;
	font-size:16px;
	font-weight:bold;
	color:#009900;
}

/* Applique au bouton actif du sous-menu (sous-rubrique) */
a.sous_bouton_actif {
	background:url('bouton_actif.png') no-repeat;
	margin-left:15px;
	padding-left:20px;
	line-height:16px;
	font-size:14px;
	font-weight:bold;
	color:#009900;
}

/* Applique aux boutons non actifs du menu (rubrique) */
a.bouton_inactif {
	background:url('bouton_inactif.png') no-repeat;
	padding-left:20px;
	line-height:16px;
	font-size:16px;
}

/* Applique aux boutons non actifs du sous-menu (sous-rubrique) */
a.sous_bouton_inactif {
	background:url('bouton_inactif.png') no-repeat;
	margin-left:15px;
	padding-left:20px;
	line-height:16px;
	font-size:14px;
}


/* ****************** */
/* Contenu de la page */
/* ****************** */

/* Puces */	
	/* Applique aux puces des pages sites */
	.li_paragraphe {
		list-style-image:url('puce.png');
		margin-bottom:30px;
		font-weight:bold;
	}
	
	/* Applique aux puces dans les puces (astuces) */
	.li_hypertexte {
		list-style-image:url('puce.png');
		margin-left:-50px;
		text-indent:10px;
	}

	/* Applique aux puces dans les puces de pages sites */
	.li_none {
		list-style:none;
		list-style-image:none;
		margin-left:-120px;
		padding-right:30px;
		text-indent:40px;
		text-align:justify;
		font-weight:normal;
	}

	/* Applique aux puces (sites et creations) */
	.li_liste {
		list-style-image:url('puce.png');
	}

	/* Applique aux puces dans les puces (mentions legales) */
	.li_classic {
		list-style-image:url('puce.png');
		margin-left:-50px;
	}

	/* Applique aux puces (figurines) */
	.li_fig {
		list-style-image:url('puce.png');
		margin-bottom:10px;
	}

/* Applique pour mettre un fond blanc (contenu) */
.blanc {
	background-color:#FFFFFF;
}

/* Applique pour justifier (contenu) */
.justify {
	text-align:justify;
}

/* Applique aux textes en italique */
.italic {
	font-style:italic;
}

/* Applique pour centrer (contenu) */
.center {
	text-align:center;
}


/* ************************** */
/* Pour la page fonds d'ecran */
/* ************************** */

/* Applique aux div */
.fond_ecran {
	width:160px;
	text-align:center;
}

/* Applique a une div */
.div_moitie {
	margin:0px auto;
	width:160px;
	text-align:center;
}

/* Applique a la div de gauche Gundam Wing */
.div_moitie_gauche {
	margin-left:107px;
	margin-top:0px;
	margin-bottom:50px;
	width:160px;
	height:100%;
	float:left;
	text-align:center;
}

/* Applique a la div de droite Escaflowne */
.div_moitie_droite {
	margin-left:403px;
	margin-top:0px;
	margin-bottom:50px;
	text-align:center;
}


/* ******************** */
/* Pour la page contact */
/* ******************** */

/* Applique à la div générale du formulaire */
.encadrement {
	margin:0px auto;
	border:solid 2px #005500;
	width:600px;
	min-height:340px;
}

/* Applique à la div générale du formulaire */
.pour_centrer { /* ATTENTION changement de nom de "encadrement" c'est soit l'un, soit l'autre */
	margin:0px auto;
	width:600px;
}

/* Applique pour les div de gauche (alignées à droite) */
.form_cell_left {
    float:left;
    text-align:right;
    width:140px;
    padding-top:2px;
}

/* Applique pour les div de droite (alignées à gauche) */
.form_cell_right {
    margin-left:145px;
    padding-left:5px;
    text-align:left;
}

/* Applique a une div */
.div_moitie_left {
    float:left;
	width:48%;
	border:none;
	text-align:right;
}

.div_moitie_right {
    float:right;
	width:48%;
	border:none;
	text-align:left;
}

/* Applique aux champs de saisie "input" des formulaires */
.saisie {
	width:300px;
	text-align:left;
}

/* Applique aux champs "textarea" des formulaires */
.textarea {
	width:300px;
	height:100px;
/*	text-align::left; à remplacer par une commande valide W3C */
}

/* Applique aux champs de bouton "input" des formulaires */
.maxi_bouton {
	width:80px;
}

/* Applique aux div de message d'erreur */
.erreur {
	margin-left:100px;
	font-weight:bold;
	color:#990000;
}

/* ***************************** */
/* Pour la page mentions légales */
/* ***************************** */

/* Applique aux tableaux */
.tableau {
	border:0px;
	margin:auto;
}

/* Applique aux cellules de tableau */
.tdplein {
	background-color:#006600;
	width:110px;
	padding-left:5px;
	padding-right:5px;
	text-align:center;
}

/* Applique aux cellules de tableau dont le fond est vide */
.td {
	background-color:#003300;
	width:110px;
	height:5px;
}