body {
max-width: 860;  /* largeur du site */
margin: 0 auto 1 auto; /*marge haute et basse : 0 - marge gauche et droite : 0 */
padding: 0 ;
text-align: center;
font-family : verdana;
background-image : url(./logos/fondvert.png); /* fond d'ecran */
/*background-color: #99ffff; /* On ajoute de quoi mettre une police de caractère et une image de fond */
}

div#conteneur{
	max-width: 760px ; /* largeur des cadres */
	margin: auto;
	text-align: left ;
	border: 2px solid #000; /*Une bordure autour de l'ensemble de la page*/
	background-color: white; /*une couleur pour le fond de la page */
}

h1#header {
height: 100px; /* hauteur du logo*/
background-image: url(./logos/Logo_v2b.jpg) no-repeat left top;
margin: 0;
}

h1#header a{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(gris.jpg) ;
	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#intmenu{ /*pour encadrer le menu au centre*/
	max-width: 800px ; /* largeur du menu */
	margin: 0 auto ;
	text-align: left ;
	/*border: 2px solid #000;*/ /*Une bordure autour de l'ensemble de la page*/
	}
	/*background-image: url(gris.jpg); /*une image pour le fond de la page */
	
#menu {
		height: 20px; /* hauteur des cadres-menu */
		margin: 0px 0;
	}
	#menu ul, #menu li {
		margin: 0;
		padding: 0;
		list-style-type: none;
			}
			
	#menu li {
		width: 130px;
	}	
	#menu li a {
		display: block;
		text-decoration: none;
		text-align: center;
		border: 1px solid #fff;
	}
	/*---------- Niveau 1 ----------*/
	#menu .n1 li {
		float: left;
		margin: 0 -1px 0 0;
	}
	#menu .n1 li a {
		padding: 5px 0;
		height: 15px;
		font-family: "eras bold itc";
		font-size: 80%;
		color: #000;
		background-image: url(./images/bois.jpg); /*fond bois pour le menu */
	}
	#menu .n1 li:hover a,
	#menu .n1 li a:hover {
		color: #DFF20D;
		background-image: url(./images/boisn.jpg); 
	}
	/*---------- Niveau 2 ----------*/
	#menu .n2 {
		position: absolute;
		top: -9999em;
	}
	#menu .n2 li {
		width:190;
		clear: left;
		margin: -1px 0 0;
	}
	#menu .n2 li a {
		color: #DFF20D;
		background-image: url(./images/boisn.jpg);
	}
	#menu .n2 li a:hover {
		color: #000;
		background-image: url(./images/bois.jpg);
	}
	#menu li:hover .n2,
	#menu .sfhover .n2 {
		top: auto;
		min-height: 0; /* corrige un bug IE7 */
	}
	/*---------- Niveau 3 ----------*/
	#menu .n3 {
		position:absolute;
		left: 215; 
		top: 0;
		margin: -25;
		padding: 0;
		top: -9999em;
	}
	#menu .n3 li li{
		width:190;
		clear: left;
		margin: -1px 0 0;
	}
	#menu .n3 li li a {
		color: #DFF20D;
		background-image: url(./images/boisn.jpg);
	}
	#menu .n3 li li a:hover {
		color: #000;
		background-image: url(./images/bois.jpg);
	}
	#menu li li:hover .n3,
	#menu .sfhover .n3 {
		top: auto;
		min-height: 0; /* corrige un bug IE7 */
	}

div#contenu{
	padding: 0 0 0 0 px ;
	font-family: verdana;
		/*background: url(bg_page.gif) no-repeat 5px 5px ;pour insérer un élément décoratif sur le côté gauche avec un espace à gauche et à droite du contenu */
}

div#contenu h2{
	padding-left: 10px ;
	line-height: 10px ;
	font-size: 1.4em ;
		color: #ccc ;
	border-bottom: 1px solid #9b2 ;
}

div#contenu h3{
	margin-left: 10px ;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	border-left: 3px solid #9b2 ;
	color: #9b2 ;
}

div#contenu p{
	padding-left: 10px ;
	padding-right: 10px; 
	font: verdana;
	text-align: justify ;
	text-indent: 2em ;
	line-height: 1.7em ; /* On rend les paragraphes plus propre, alignement justifié, alinéa et hauteur de ligne supérieure à l'état normal pour aérer le tout */
}

div#contenu a{
	color: #003 ;
}

div#contenu a:hover{
	color: #0099cc; /* On met en forme les liens contenu dans la page */
}

#photo a:hover{
border:0px;
width:400px;
height:300px;
} 


p#footer{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color: #8a0 ; /*mise en forme pied de page */
}

pre{
	overflow: auto ; /* En passant on définit l'overflow de la balise pre à auto pour permettre d'afficher des barres de défilement si le texte contenu
  dans cette balise est trop grand */
    border: 2px solid #9b2 ;
	padding: 5px 0 0 5px ;
	font-size: 1.2em ; /*une bordure, la taille de police et un léger espace entre le texte et les bords du pre */
}

/* On doit donner une largeur au <pre> à cause d'Internet Explorer, on ne va donc l'appliquer qu'à Internet Explorer en utilisant le 
 commentaire conditionnel suivant, à placer dans la partie HTML,  et plus précisément dans l'élément <head> : */
<!--[if IE]>
 <style type="text/css">
 html pre{
	max-width: 750px ;
}
</style>
<![endif]-->

pre span
{
	color: #560 ;
}

pre span.comment
{
	color: #b30000 ;
}

div#gauche{
margin: 250 0 0 0;
position: absolute;
top: 1em;
left: 1%;
width: 18%;
}	
div#footer {
text-align:center;
}

.zoom {
height:300px;
}
.zoom p {
text-align:center;
}
.zoom img {
width:100px;
height:75px;
}
.zoom img:hover {
width:400px;
height:300px;
}

/* pour le nuage de mots */
.tagcloud
{
background-color: #E6E6FA; width: 200px; /* couleur de fond du tableau+taille */
border: 1px solid #BFBFBF; /* bordure+couleur du tableau */
padding: 2px; /* espace entre la bordure et le texte */
text-align: center; /* texte centré */
font-family: Verdana, Helvetica, sans-serif; /* style d'écriture */
}
.tagcloud a {
text-decoration:none; /* pas de décoration sur les liens */
}
.tagcloud a:hover { /* changement de couleur au passage de la souris */
text-decoration:none;
background-color:#DFF20D; /* couleur d'arriere plan du lien survolé */
color:#DFF20D; /* couleur du lien survolé */
}
.tag-1 { /* nom de la class*/
color:#AA3406; /* couleur du lien */
font-size: 10px; /* taille d'écriture */
font-weight:bold; /* gras */
}
.tag-2 {
font-size: 12px;
color:#070089;
}
.tag-3 {
font-size: 16px;
color:#336699;
}
.tag-4 {
font-size: 14px;
color:#333333;
}