body
{
	margin-top:2px;
	padding: 0 ;
	margin-left:auto;
	margin-right:auto;
	text-align: center ;
	font: 0.8em "Trebuchet MS", helvetica, sans-serif ;
	background-color:#fff;
	width:1024px;
	height:768px;
}

div#conteneur
{
	width: 800px ;
	margin: 0;
	text-align: left ;
	color:#fff;
	border: 1px solid #663333 ;
}

h1#header
{
	height: 220px ;
	width:800px;
	margin: 0 ;
}

h1#header a
{
	width: 400px ;
	height: 70px ;
	display: block ;
	background: url(title.gif) no-repeat ;
	position: relative ;
	left: 300px ;
	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 */


dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
/* POUR IE : margin: 5px 20px 0px -373px; */ 
z-index:100;
width: 100%;
}


#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}




#menu dt {
cursor: pointer;
text-align: center;
BACKGROUND-IMAGE:url("images/bouton2.jpg");
font-weight: bold;
border: 1px solid gray;


}
#menu dd {

border: 1px solid gray;

}


#menu li {
text-align: left;
background: #fff;

}



#menu li a, #menu dt a {
padding-left:5px;
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;

}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #CC9966;

}

div#contenu
{
	padding: 20px 18px 0 20px ;
	color:black;
}

div#contenu h2
{
	padding-left: 8px ;
	line-height: 25px ;
	font-size: 1.4em ;
	background: url(little_apple.gif) no-repeat left bottom ;
	color: #663333;
	border-bottom: 1px solid #663333 ;
}

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

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

div#contenu a
{
	color: #CC9966
}

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

div#footer
{
	margin: 0 ;
	padding-right: 10px ;
	line-height: 30px ;
	text-align: right ;
	color:#663333;
}

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 ;
}




#bloc-contenu {

float: left;
width: 100%;
}

#col-centre {
float:right;
width:40%;

}

#col-gauche {
float: left;
width: 60%;

}

label
{
width: 9em;
float: left;
text-align: left;
margin-right: 0.5em;
display: block;
color: #990000;
font-weight: bold;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}

.submit input{margin-left: 4.5em;}
input
{
color: #781351;
background: #CCCCCC;
border: 1px solid #781351;
}

.submit input
{
color: #000;
background: #ffa20f;
border: 2px outset #d7b9c9;
}
fieldset
{
border: 1px solid #781351;
width: 400px;
margin-left:auto;
margin-right:auto;
}

legend
{
color: #fff;
background: #CC9966;
border: 1px solid #781351;
padding: 2px 6px;
}
.textarea{
width: 350px;
height: 150px;

}