body, h1, h2,h3 ,ul, p, img, table, li{
	margin:0;
	padding:0;
} /* resettage des balises*/

body {
	color:#353440;
	background:url(images/tete.png);
	font-family:arial, helvetica, sans-serif /*choix caste donner un choix sur windows, Mac, linux*/
}
/*
  sur quoi le style va s'affecter Body {
   quels sont les informations color:red
   } */
   
#bg-header{
	width:100%;
	background:black;
}
   
#header{ /*on attaque tt le bloc header*/
	background:url(images/bandeau.jpg);
	width:760px;
	margin:0 auto 0 auto;
	height:220px;
	padding: 30px 0 0 0; /*on souhaite descendre l écriture du header de 50px*/
}

#header p{ /*on attaq que le <p> du bloc Header*/
	font-size:2em;
	color:red;
}

#nav{
	background:#000;
	width:760px; /*interessant de tjs le mettre car si longeur total/nbre de bouton ne tombe pas rond cela permet d'avoir 1 image de fond tt du long*/
	margin:0 auto 0 auto;
	height:25px;
}

#nav li{
	display:inline; /*afficher en ligne*/
	list-style-type:none; /*enlever les puces*/
}

#nav a{
	/*width:152px;*/ /*largeur total du nav/nbre de bouton*/ /*on l'enleve car on ajoute un border en .bouton-autre dc on la rajoute avec*/
	height:25px;
	display:block;/*permet de mettre une largeur & hauteur au nav a sinon on ne peut pas*/
	float:left; /*pour s'assurrer qu'ils se mettent bien à la queuleuleu*/
	/*color:#fff*/; /*on l'enlever pour avoir different couleur sur les differents bouton*/
	text-decoration:none;/*pour enlever le souligner*/
	text-align:center;/*pour centrer les texte*/
	background:url(images/bg_nav.gif);
	}

#nav a:hover{ /*lorque la sourie est dessus*/
	color:white;
	text-decoration:underline;
	font-weight:bold;
	background:url(images/bg_nav_hover.gif);
	}

#content{
	background:#fff url(images/bg_content.gif) no-repeat 10px 100px;
	/*les valeurs: couleur, image, repeat or not, position X, position Y*/
	padding: 0 0 0 60px;
	width:700px;
	margin:0 auto 0 auto;
}

#content h1{
	color:#D03440;
	margin:0 0 0 50px;
}

#content h2{
	background:url(images/signet_h2.gif) no-repeat;
	padding: 0 0 0 40px;
	border-bottom: solid 2px #000; /*solid ou dashed; largeur; couleur*/
	margin: 0 0 50px 0; /*margin pour decoller le texte en dessous avec l'image en meme temps*/
}

#content p{ /*on attaq que le <p> du bloc Content*/
	/*margin:30px 0 100px 50px;*/ /*Marges Extérieur: haut droite bas gauche*/
	/*padding:50px 20px 50px 20px;*/ /*Marges intérieures: haut droite, bas, gauche. ATTENTION va agrandir la zone texte*/
	color:#353440; /*couleur du texte*/
	font-size:1.125em; /*taille du texte*/
	width:500px;
	background:#fff;
	text-align:justify;
}

#content img{
	float:right;
}

table{
	background:#9F9BBF;
}

.clear{
	clear:both; /* efface les float et permet de remettre à la ligne ou dans le flux de contenu */
}

.marque{
	font-weight:bold;
	font-style: italic;
	color:red;
}

.nom-marque{
	color:#B600FF;
	font-weight:bold;
	font-style:italic;
}

.bg-tableau{
	background:#666;
}

.acceuil{
	color:red;
	border-right: solid 1px white;
	border-left: solid 1px white;
	width: 154px; /*calcul: (1px + 152px + 1px) + (150px + 1px)*4 = 760px)*/
}

.bouton-autre{
	color:#fff;
	border-right: solid 1px white;
	width: 150px; /*calcul: (1px + 152px + 1px) + (150px + 1px)*4 = 760px)*/
}