body /* On travaille sur la balise body, donc sur TOUTE la page */
{
   width:95%;
   max-width: 1300px; 
   min-width: 700px; 
   background-color: #ffe4e1; /* Le fond de la page sera ... */
   color: #800080; /* Le texte de la page sera blanc */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   background-attachment: fixed; /* Le fond restera fixe */
   margin: auto; /*On peut donc demander à ce que le block soit centré avec "auto"*/
   margin-top: 10px; /* Pour éviter de coller avec le haut de la fenêtre du navigateur. Essayez d'enlever pour voir ! */
   margin-bottom: 10px;    /* Idem pour le bas du navigateur */
}

h2
{
	border-top: 3px ridge #800080;
}

#maxitop
{
	position:fixed; 
	width:95%;
	height:10px;
	top:0px;
	margin-bottom: 10px;
	background-color: #ffe4e1; /* Le fond de la page sera ... */
	z-index: 4;
}

#top
{
	position:fixed; 
	width:95%;
	height:70px;
	top:10px;
	margin-bottom: 10px;
	
	background-color:#ffc0cb;
	border:4px groove #ff1493;
	padding:2px;
	
	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
	font-size:40px;
	color: #ff1493;
	text-align: center;
	z-index: 3;
}

.ange:before
{
   content: url("1ange.gif"); /* Mettre une image */
}

.papillon:before
{
   content: url("papillon2.gif"); /* Mettre une image */
}

#gauche
{
	float: left; /* Le menu flottera à gauche */
	position:fixed; 
	width:250px;
	top:90px;
	color:#ff1493;
	z-index: 2;
}

ul#papill /* Ma liste aura des puces en forme de papillons */
{
   list-style-image: url("papillon.gif");
}

ul#plume /* Ma liste aura des puces en forme de plume */
{
   list-style-image: url("plume.gif");
}

ul#camera
{
   list-style-image: url("camera.gif");
}

a
{
   text-decoration: none; /* Les liens ne seront plus soulignés */
   color: #ff1493; /* Les liens seront en rouge au lieu de bleu */
}
a:hover /* Quand le visiteur pointe sur le lien */
{
   text-decoration: underline; /* Le lien deviendra souligné quand on pointera dessus */
   color: #ffc0cb; /* Le lien sera écrit en vert quand on pointera dessus */
}
a:active, a:focus /* Quand le visiteur sélectionne clique sur le lien */
{
   background-color: white;
   color: #ff1493; /* Le lien sera écrit en vert quand on pointera dessus */
}


#principal
{
   padding-top:70px;
   margin-left:280px; /* Une marge à gauche pour pousser le corps, afin qu'il ne passe plus sous le menu */
   font-size: 14px; /* Paragraphes de 14 pixels */
   font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
   font-weight: bold;
   text-align: justify; /* Texte justifié pour mieux voir la largeur du block */
   z-index: 2;
}

a img /* Toutes les images contenues dans un lien */
{
   border: none; /* Pas de bordure */
}

#principal img 
{ 
  border: 4px solid #fff;
        -moz-box-shadow: 8px 8px 12px #aaa; 
        -webkit-box-shadow: 8px 8px 12px #aaa; 
        box-shadow: 8px 8px 12px #555; 

} 

#pierre img 
{ 
  border: none; /* Pas de bordure */
          -moz-box-shadow: 0px 0px 0px; 
        -webkit-box-shadow: 0px 0px 0px; 
        box-shadow: 0px 0px 0px; 
} 

img.imageflottante
{
   float: left;
   margin-right:10px;
   margin-bottom:10px;
}

#principal img.imageflottantedroite2
{
   float: right;
   margin-left:10px;
   margin-bottom:10px;
   border: 0px; /* Pas de bordure */
          -moz-box-shadow: 0px 0px 0px; 
        -webkit-box-shadow: 0px 0px 0px; 
        box-shadow: 0px 0px 0px; 
}

img.imageflottantedroite
{
   float: right;
   margin-left:10px;
   margin-bottom:10px;
}

.dessous
{
   clear: both;
}

#principal h2
{
	text-align:center;
}

hr
{
	border-top: 3px ridge #800080;
}

#pierre
{
	background-color: grey; /* Le fond de la page sera ... */
	margin-top:20px;
	border:4px groove black;
	padding:2px;
	
	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
	font-size:20px;
	color: white;
	text-align: center;
}

#pierre h1
{
	background-color: black; /* Le fond de la page sera ... */
	color:white;
}

#pierre p
{
	color: white;
	font-size: 16px; /* Paragraphes de 14 pixels */
	font-family: "Comic Sans MS", "Trebuchet MS", Georgia, serif;
	font-weight:normal;
	text-align:justify;
}

#pierre p.photo
{
	text-align: center;
}

#pierre h2
{
	border-top: 3px ridge white;
}

#petit
{
	font-size: x-small;
}

h1
{
text-shadow: 2px 2px 4px #999; 
}