body
{
/*width: 1400px;*/
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
/*background-image: url("mai2007_2.jpg");*/
background-color: #f2f2f2;
background-repeat: no-repeat; /*l'image ne se répetera pas même si la taille du bloc devient plus grande que celle de l'image. Autres options: repeat (dans les 2 dimensions), repeat-x (juste selon l'axe horizontal), repeat-y (juste l'axe vertical)*/
background-attachment: fixed; /* l'image ne défilera pas. Autre option: scroll*/
background-position: top left; /* peut aussi être exprimé en pixels à partir du coin supérieur gauche du bloc */
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center; /*other possibilities: left, right, justify*/
/* mettre en gras: font-weight: bold; */
min-height: 100%;
}

h1
{
text-transform: none; /* capitalize: la première lettre de chaque mot sera une majuscule! Autres options: uppercase (tout en majuscules), lowercase (tout en minuscules) ou none (pas de transformation) */
text-decoration: underline; /* Souligné. Autres options: line-through (barré), overline (ligne au-dessus), blink (clignotant), none */
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
}


p:first-letter /* La première lettre de chaque paragraphe */
{
   font-weight: bold; /* En gras */
   font-size: 1.2em; /* Ecrit légèrement plus gros que la normale */
   /*color: blue; /* En bleu */
}
p:first-line /* La première ligne de chaque paragraphe */
{
   /* font-variant: small-caps; En petites capitales */
}

p
{
text-indent: 30px; /*la première ligne de chaque paragraphe commencera en retrait de 30px vers la droite*/
}

em
{
font-style: italic; /* other options: normal */
}

#en_tete h1  /* s'applique aux titres h1 contenus dans l'id en-tête*/
{
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
color: rgb(0,0,100);  /* peut être indiwué en valeurs rgb: color: rgb(243, 12, 35);*/
text-decoration: none;
/*text-decoration:blink;*/
/* on pourrait mettre juste une image comme en-tête: background-image:...*/
}


#menu
{
/*float: left;
position: absolute;
left: 5px;*/
/*width: 1000px;*/
overflow: auto;
color: #DC143C; 
color: rgb(0,0,100);
/*border: 2px solid bottom #DC143C; /* bordure reltivement fine (2px), en ligne solide et de couleur rouge*/
/*margin-top: 5px;*/
}


.forum  /* les paragraphes de la classe forum sont alignés à gauche... et on pourrait aussi changer la police*/
{
	text-align: left;
	border-bottom: solid 1px;
}

.element_menu
{
	/*border: solid 2px;*/
	/*background-color: #fff993;*/
	padding: 2px; /* marge "intérieure": entre le bord du bloc et son contenu intérieur */
	width:90%;
	margin-left: 5%;
	/*text-decoration: underline overline;*/
	color: blue;
	color: rgb(0,0,100);
	border-top: solid;
	border-bottom:solid;
	/*text-align: justify; */
	/*margin-bottom:5px;*/
	text-align:center;
}

.element_menu table, .element_menu td
{
	border-left:solid;
	border-right: solid;
	border-top: none;
	border-bottom: none;
	text-align:center;
}

.element_menu a
{
 text-decoration: none; /* Les liens ne seront plus soulignés */
 
 /*border: 3px solid brown;*/
}

.element_menu a:hover  /* Quand le visiteur pointe sur le lien */
{
   /*text-decoration: underline; *//* Le lien deviendra souligné quand on pointera dessus */
   color: blue; /* Le lien sera écrit en vert quand on pointera dessus */
}

.element_menu a:active , .element_menu a:focus/* Quand le visiteur clique sur le lien */
{
   color: red;
}

.element_menu a:visited /* Quand le visiteur a déjà vu la page concernée */
{
   color: black;
   /*text-decoration: line-through;*/
}

.surligne /* Un style qui permet par exemple de surligner certains mots d'un texte */
{
   background-color: yellow;
   color: black; /* Le texte surligné sera écrit en noir, parce que le blanc sur fond jaune on voit rien ;o) */
}

a  /* propriétés qui s'appliquent sur les liens */
{
   color: rgb(0,0,100); /* Les liens seront en rouge au lieu de bleu */
   font-style: italic; /* Les liens seront en italique (pourquoi pas ?) */
   text-decoration: underline;
}

a:hover, a:visited a:hover/* quand le visiteur pointe sur un lien. Il faut mettre cela car sinon a est un élément plus "imbriqué" que element_menu, donc les propriétés données pour element_menu sont "effacées" par les propriétés données pour a. Bien sûr on pourrait créer un champ de propriétés CSS qui s'appliquera uniquement aux lien compris dans des éléments menus, si on voulait */
{
	color: rgb(2,150,238);
}

a:active, a:focus /* quand le visiteur clique sur un lien */
{
	color: red;
}

a:visited
{
	color: rgb(1,49,78);
}

/* Pour définir une classe "question" et que chaque élément de cette classe soit automatiquement précédé de "Question: " et suivi de "?"*/
.question:before /* Avant chaque question */
{
   content: "Question : "; /* Commencer par Question : */ /* on pourrait aussi mettre un lien vers une image: url(...)*/
}
.question:after /* Après chaque question */
{
   content: " ?"; /* Rajouter un point d'interrogation */
}

textarea
{
 /*background-color: white;*/
}

textarea:active, textarea:focus
{
 background-color: rgb(230,230,230);
}

ul /* propriétés appliquées aux listes non ordonnées*/
{
	
	/*background-color: white;*/
	list-style-position: outside; /* mise en retrait. Autre option: inside*/
	list-style-type: circle; /* un cercle (circle). Autres options: square (carré), disc (disque noir, valeur par défaut)* et none (pas de puce)/
	/*on peut aussi mettre une image comme puce: list-style-image: url(...);*/
}

ol /* propriétés appliquées aux listes ordonnées*/
{
	/*background-color: white;*/
	list-style-position: outside; /* mise en retrait. Autre option: inside*/
	list-style-type: decimal; /*options: decimal (1,2,3,...), upper-roman (I, II, III,...), lower-roman (i, ii, iii, ...), upper-alpha (A, B, C, ...), lower-alpha (a, b, c, ...)*/
}

li
{
	text-align: left;
}

#liste li
{
	margin:30px;
}

#liste_further li
{
	margin:2px;
}

table
{
 border-collapse: collapse;
 border: 2px solid black; /* bordure reltivement fine (2px), en ligne solide et de couleur noire*/
}

th /* Les cellules d'en-tête */
{
   /*background-color: rgb(197,250,249);*/
   border: 1px solid black;
   color: blue;
   font-size: 1.1em;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td /* Les cellules normales */
{
   border: 1px solid black;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
}


#corps
{
/*margin-left: 200px; /* le corps ne passera pas en-dessous du menu! */
margin-left: 5%;
text-align: center;
font-size: 120%; /* font-size:medium;*/
color: black; /*Crimson: #DC143C;*/
/*color: #005226;*/
width: 90%;
position: absolute;
left: 0px;
/*background-image: url("images/nous.jpg");
background-repeat: no-repeat; /*l'image ne se répetera pas même si la taille du bloc devient plus grande que celle de l'image*/
/*min-height: 1000px; /* taille minimale du bloc en hauteur*/
/*min-width: 1600px; /* taille du bloc en largeur*/
padding-bottom: 100px;
}

#footer
{
position: absolute;
bottom: 0px;
}

.deconnexion
{
float: right;
position: absolute;
right: 10px;
}

.photos_mosaique
{
 min-height: 100%;
}