body
{
   margin-bottom: 10px; 
   padding: 0; 
   background: #E90069;
   color: #5B0029;
   text-align: center;
   font-family: Garamond, Georgia, sherif;
   font-size: 20;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 6em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #E90069;
border: 1px solid #9D004A;
}
#menu dd {
border: 1px solid #9D004A;
}
#menu li {
text-align: center;
background: url(fondmenu.jpg);
}
#menu li a, #menu dt a {
color: #9D004A;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: url(fondmenua.jpg);
}

a {text-decoration: none;
color: black;
color: #222;
}

div#conteneur
{
	width: 770px ;
	margin: 0 auto ;
	text-align: left ;
	border: 2px solid #C6005A ;
	background: #F28520;
}

h1#header
{
	height: 100px ;
	background: url() no-repeat left center ;
	margin: 0 ;
}

h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url() no-repeat ;
	position: relative ;
	left: 350px ;
	top: 15px ;
	text-indent: -5000px ;
}/* On donne les mêmes dimensions au lien, chose
 possible grâce à la propriété display: block ; qui transforme le lien
  en élément de type block, auquel on peut donner des propriétés de taille.
   On met aussi l'image de fond qui a les mêmes dimensions que le cadre ainsi créé */
/* Le text-indent négatif est fait pour pouvoir ne
 cacher le texte hors de la page, ce que nous voulons. Ainsi il reste
  exploitable pour les syntèses vocales */
div#contenu
{
	padding: 0 25px 0 100px ;
	background: url(bg_page.gif) no-repeat 15px 15px ;
}

div#contenu h2
{
	padding-left: 25px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(bulles.jpg) no-repeat left bottom ;
	color: #E90069 ;
	border-bottom: 1px solid #C6005A ;
}

div#contenu h3
{
	margin-left: 15px ;
	padding-left: 5px ;
	border-left: 3px solid #C6005A ;
	color: #BF0056 ;
}

div#contenu p
{
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ;
}

div#contenu a
{
	color: #F8B2D2 ;
}

div#contenu a:hover
{
	color: #F8B2D2 ;
}

p#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 50px ;
	font-style:italic;
	text-align: right ;
	color: #C80A04 ;
}

pre
{
	overflow: auto ;
	background: #dea ;
	border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ;
}


pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}


div#titre
{
color: #E90069 ;
font-weight:bold;
font-size: 19;
}

#calendrier {
display:inline;
padding-right:10px ;
border-width:0px ;
text-align: center; 
color: #8C003F; /* Couleur du texte dans les cases du calendrier */
border-spacing: 1px; 
font-size: 1.0em; 
margin: auto ;
float: left;
z-index: 100;
}

#calendrier td, #calendrier tr{
padding: 0;
}

/* Les 4 lignes qui suivent définissent la couleur de fond d'une case où il y a un évènement, ainsi que la couleur du texte. Ces mêmes couleurs 
sont utilisés pour le titre de l'évènement */
#calendrier #celluleevenement, #calendrier #evenement h6{
background-color: #F49D4C ;
color:#5B0029 ;
}

#calendrier #evenement h6{
font-size:0.9em ;
margin:0;
padding:0;
}

#calendrier #evenement{
font-weight:normal ;
border: 1px solid #C6005A; /* Largeur, type et couleur du bord du cadre qui contient l'évènement */
background-color: #F4F9FD; /* Couleur de fond du cadre qui contient l'évènement */
color: #000000 ; /* Couleur du texte dans le cadre qui contient l'évènement */
z-index: 10; 
padding: 2px;
margin-top:1px;
width: 150px;
position: absolute; 
visibility: hidden; 

}

#calendrier td {
border: none; 
background-color: #E90069; /* Couleur de fond des cases du calendrier */
width:25px ;
}

#calendrier td:hover {
background-color:#E90069 ;  /* Couleur de fond des cases lors du survol de la souris */
}

#calendrier .today{
font-weight:bold ;
border: 2px solid #003300; /* Largeur, type et couleur du bord de la case du calendrier qui correspond à aujourd'hui */