/***************************************************
   HTML Element Styles
 ***************************************************/

 
body {
  margin: 0pt auto;
  margin-left:auto;
  margin-right:auto;
  font-family:verdana, arial, helvetica, sans-serif;
  font-size:10px;
  line-height:20px;
  color:#000000;
  background-color:#EEEEEE;
}

/*ici je creer un conteneur qui contient toute la page ... plutot que le body pas forcement obligé*/
#conteneur{
	position:relative;
	width:768px;/*largeur que tu veux que ta page est .....*/
	margin: 0pt;
    margin-left:auto;
    margin-right:auto;
}

/*cacher le titre de la banniere mais de maniere a ce quil existe pour un moteur de referencement par exemple qui lui ne lit pas les titre qui sont incruster dans une image*/
H1 span {display: none;}


#banniere {
  position:absolute;
  width: 768px;
  height: 200px;
  background:transparent url(../images/banner.jpg) no-repeat top left;
  margin:0pt;
  padding:0pt;
  border: 1px solid #999999;
}


#menue{
/*petite explication.... relativ plutot que absolue car absolue c par raport a toute la page , relative c par rapport au blo dans leqeul il se trouve...*/
	position: absolute;
	top:175px;/*ici tu peu regler a combien tu veu que ca rentre dans ta banniere*/
	left: 0px;
	padding: 10px;/*cest lespace interieur autour du contenue*/
	background-color: #FFFFFF;/*couleur de fond*/
	border: 1px solid #999999;/*bordure autour du menue*/
	width: 150px;/*largeur du bloc menue*/
    font-size:11px;
}

.menutitre {/*ici on gere juste les titres dans les menues*/
  background-color: #006600;
  font-size: 11px;
  font-weight: bold;
  color: #FFFF00;
  text-align: center;
  padding: 0px;
  margin-top: 5px;
  margin-bottom: 5px;
}

#menue a {
  color: #000000;
  text-decoration: none;
  font-weight: bold;
  padding-left: 15px;/*ici cest lecart entre licone devant les liens et les lien en eux meme*/
  background: url(../images/b-1.gif) no-repeat left;/*ladresse de ton image sans repetition*/
}

#menue a:hover {/*cette partie cest quand tu passe la souris au dessus dun lien*/
  color: #006600;
  background: url(../images/b-2.gif) no-repeat left;
}

#introduction {
	width:589px;
	height: 20px;
	margin:0px,0px,0px,0px;
	padding:0px,0px,0px,0px;
	position:absolute;
	Top:206px;/*tu regle la hauteur de la partie titre la*/
	left:179px;/*et la tu regle sa position horizontal*/
	background-color: #006600;
	font-size:11px;
	font-weight:bold;
	color:#FFFF00;
	text-align:center;
	margin:0px,0px,0px,0px;
	padding:0px,0px,0px,0px;
	border: 1px solid #999999;
}


#contenue {/*tjr le meme principe*/
	padding-left: 5px;
	padding-right: 5px;
	width:579px;
	position:absolute;
	Top:233px;/*tu regle la hauteur de la partie titre la*/
	left:179px;/*et la tu regle sa position horizontal*/
	font-weight: bold;
	text-align: left;
	background-color: #FFFFFF;
	color: #000000;
	border: 1px solid #999999;
	font-size:12px;
	padding-top: 0px;
	padding-bottom: 0px;
	line-height: 16px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	white-space: normal;
	text-indent: 10px;
	display: inline;
	margin: 0px;
	font-style: normal;
	vertical-align: middle;
}