/*Feuille de styles pour couleurs de fond et d'écriture du site*/

* { padding: 0; margin: 0; } /*annule les marges feuilles de styles integrees navigateurs*/
html { height: 101%; } 
body {
  color: #660099; /*couleur de la police*/
  background-color: #ff9900; /*couleur de fond*/
  font-family: Comic sans MS, Verdana, Arial, Helvetica, sans-serif;
  font-size: 11pt; /*taille de la police*/
}
#wrapper {
 color: #660099; /*couleur de la police*/
 background-color: #ffff99; /*couleur de fond marron-orange*/
 width: 900px;
 margin: 20px auto 20px auto; /*marges automatiques pour droite et gauche*/
}
#bandeau {
 color: #660099; /*couleur de la police*/
 text-align: center;
 background-color: #ffff99; /*couleur de fond texte plus clair*/
 padding: 10px 40px 10px 20px; /*marges internes haut droite bas gauche*/
}	
#zone_de_navigation {
	text-align: center; /*barre de navigation centre*/
	font-weight: bold;
	background-color: #ff9900;
	padding: 15px 0px 10px 0px;
	margin: 0 20px 0 20px;
}
	#zone_de_navigation ul {
	 margin-bottom: 0px; /*pas de bord inferieur*/
	} 
	#zone_de_navigation li {
	 display: inline; /*barre de nav aligne cote a cote*/
	 list-style-type: none; /*parametrage liste sans point d enumeration et non surlignee*/
	 margin: O 40px 0 0px; /*a droite 40px sinon 0*/
	}
	#zone_de_navigation a {
	 text-decoration: none; /*supprime le soulignement*/
	 padding: 3px 8px 0px 8px;
	}
	#zone_de_navigation a:link  { color: #660099; }
	#zone_de_navigation a:visited  { color: #99ff00; }
	#zone_de_navigation a:hover,
	#index #accueil a, /*parametrage des onglets*/
	#vitrail #vitrail a, /*parametrage des onglets*/
	#mosaique #mosaique a, /*parametrage des onglets*/
	#stages #stages a, /*parametrage des onglets*/ 
	#actualite #liens a, /*parametrage des onglets*/
	#boiteAuxLettres #boiteauxlettres a /*parametrage des onglets*/
	{ 
	 text-decoration: none; /* soulignement désactivé */ 
	 background-color: #ffff99; 
	 padding-bottom: 11px; /* un pixel de plus qu'en haut */ 
	 border-bottom: none; /* ligne de cadre inférieure désactivée */ 
	}	
	#zone_de_navigation a:active {
     background-color: #ffff99;
    }
#zone_de_texte {
 height: 400px;
 font-size: 11pt;
 font-family: Comic sans MS, Verdana, Arial, Helvetica, sans-serif;
 line-height: 1.4em;
 text-align: justify; /*texte justifie*/
 text-indent: 3em; /*decalage de la 1ere ligne des paragraphes*/
 padding: 70px 20px 0px 20px;
 margin-right: 20px;
 margin-left: 15px;
}
	#contact {
	 margin-left: 65px;
	}
#pied_de_page {
 padding: 10px 20px 20px 20px;
 border-top: 1px solid #99ff00;
 margin-top: 15px;
}
	#date {
	 font-family: Comic sans MS, Verdana, Arial, Helvetica, sans-serif;
	 background-color: #ffff99;
	 color: #660099; 
	 font-size: 7pt;
	 font-weight: normal; 
	 text-align: center;
	}
	.retourHaut  {
	  float: right;
	  border: none;
	  margin-bottom: 10px;
	}
h1 { font-size: 100%; } 
h2 { 
 font-size: 130%; 
 margin-bottom: 1em;
}
h3 { 
 font-size: 130%; 
 margin-bottom: 1em;
}
strong { color: #99ff00; }
address {
 text-align: center; /*centrer adresse pied de page*/
 font-size: 70%; /*diminuer taille police par rapport au body*/
 font-style: normal; /*police non italique*/
 letter-spacing: 3px; /*espacement entre les lettres*/
 word-spacing: 4px; /*espacement entre les mots*/
 line-height: 2em; /* espacement entre les lignes*/
}
	.amis {
	 color: #660099;
	 text-decoration: none; /*supprime le soulignement*/
	}
p, ul {
 margin: 0 0 1em 0; /*marge externe inferieure de 1em pour paragraphes et listes*/
 }
li {
 margin: 0em 0 0em 1em; /*marge externe inferieure de 1em pour listes*/
}
 /* ============================
   	Le formulaire de contact
	============================ */
form {
  background-color: #ffff99; /*couleur jaune clair pour le formulaire*/
  width: 500px; /*largeur du formulaire*/
  margin-left: 50px;
}
label { 
 font: 16px,  Comic sans MS, Verdana, Arial, Helvetica, sans-serif; /*taille police des labels*/
 text-align: right; /*l'alignement se fait sur les :*/
 display: block; /*titre sur une ligne a part*/ /*meme longueur de saisie pour les labels*/
 float: left; /*boite flottante à gauche*/
 width: 200px; /*largeur du contenu de chaque labels*/
}
input {
 font: 15px, Comic sans MS, Verdana, Arial, Helvetica, sans-serif; /*taille police des zones de saisie texte*/
 color: #660099;
 background: #ff9900; /*couleur des zones de saisie*/
 text-indent: 1px; /*decalage d'un pixel dans les zones de saisie, pour que ça soit plus jolie*/
 display: block; /*meme longueur de saisie pour les lzones de saisie*/
 float: left; /*boite flottante à gauche*/
 width: 200px; /*largeur du contenu de chaque zones de saisie*/
 padding-left: 1px; /*zone de saise aérée*/
 border: none;
 margin-left: 10px; /*marge à gauche depuis les labels et les zones de saisie*/
}
#submit {
 font: 16px,  Comic sans MS, Verdana, Arial, Helvetica, sans-serif; /*taille police des labels*/
 width: 65px; /*largeur du boutton envoyer*/
 border: none;
 padding-left: 0px; 
 margin-top: 20px; /*espacement entre la grosse zone de saisie et le bouton envoyer*/
 margin-left: 215px; /*permet d'aligner le bouton envoyer sur la grosse zone de saisie*/
}
textarea {
 font: 12px, Comic sans MS, Verdana, Arial, Helvetica, sans-serif; /*taile police pour la grosse zone de saisie*/
 color: #660099; /*couleur de la police de saise*/
 background: #ff9900; /*couleur du fond de la grosse zone de saise*/
 width: 350px; /*largeur de la grosse zone de police*/
 height: 275px; /*hauteur de la grosse zone de police*/
 padding-left: 2px; /*zone de saise aérée*/
 margin-top: -28px;
 margin-left: 210px; /*permet d'aligner a grosse zone de saisie sur le bouton envoyer */
}
textarea { height: 7em; } /*augmente automatiquement la hauteur de la grosse zone de saisie si police superieur à 12*/
input:focus, textarea:focus  /*le curseur se met automatiquement sur la 1ère zone de saisie*/