#design			{	position: relative; /* on positionne le conteneur, centré */
							margin: 0 auto; /* obligé de laisser la ligne complète pour rester centrer */
							width: 1000px;
							height: 570px;
							text-align: left;
							background: url(images/book.jpg) no-repeat;
			 				}
							
#signature, ul#navig, ul#navig-book,
ul#images
												 						{ position: absolute;
																			}

#signature		{ top: 10px; /* Pas possible de raccourcir la propriété margin en 1 ligne, les marges ne sont pas respectées (idem partout) */
								left: 20px;
								width: 166px;
								height: 95px;
								}
								
ul#navig,
ul#navig-book,
ul#images				{ margin:0 auto; /* le menu est centré (idem plus haut) */
									}

ul#navig		{ left: 446px;
							padding-top: 15px; /* définit la marge du haut */
							width: 523px;
							height: 42px;
							}
							
ul#navig-book				{			top: 125px;
													left: 42px;
													width: 518px;
													height: 35px;
													}
													
ul#images				{			top: 204px;
											left: 56px;
											width: 797px;
											height: 302px;
											}
									
ul#navig li,
ul#navig-book li,
ul#images li 		 			{	display:inline;
				 								}

a.bout-accueil, a.bout-book,
a.bout-services, a.bout-activite, 
a.bout-contact,a.bout-edition,
a.bout-multimedia,a.bout-evenementiel,
a.bout-supports, a.image1, a.image2,
a.image3, a.image4 					 						{		display: block; /* la balise a doit être en bloc pour pouvoir lui attribuer des dimensions */
								 														float: left;
																						}

a.bout-accueil, a.bout-book,
a.bout-services, a.bout-activite, 
a.bout-contact										{	height: 42px; /* hauteur de l'image réactive */
																		}	

a.bout-accueil 		{	background-image: url(images/boutacc.gif); /* source de l'image de départ */
										width: 102px; /* largeur de l'image réactive */
										}

a.bout-accueil:hover 		{	background-image: url(images/boutaccr.gif); /* source de l'image d'arrivée */
													}

a.bout-book 	{	background-image: url(images/boutbooa.gif); /* source de l'image de départ */
								width: 83px; /* largeur de l'image réactive */
								}

a.bout-book:hover 	{	background-image: url(images/boutboor.gif); /* source de l'image d'arrivée */
											}

a.bout-services 		{	background-image: url(images/boutser.gif); /* source de l'image de départ */
											width: 115px; /* largeur de l'image réactive */
											}

a.bout-services:hover  {	background-image: url(images/boutserr.gif); /* source de l'image d'arrivée */
											 		}

a.bout-activite 	{	background-image: url(images/boutact.gif); /* source de l'image de départ */
										width: 113px; /* largeur de l'image réactive */
										}

a.bout-activite:hover 	{	background-image: url(images/boutactr.gif); /* source de l'image d'arrivée */
													}

a.bout-contact 		{	background-image: url(images/boutcon.gif); /* source de l'image de départ */
										width: 110px; /* largeur de l'image réactive */
										}

a.bout-contact:hover 	{	background-image: url(images/boutconr.gif); /* source de l'image d'arrivée */
												}
									

a.bout-edition,
a.bout-multimedia,
a.bout-evenementiel,
a.bout-supports							{	height: 35px;
															}

a.bout-edition		{			background-image: url(images/boutedi.gif);
												width: 90px;
												}

a.bout-edition:hover		{			 background-image: url(images/boutedir.gif);
												 			 }
												  
a.bout-multimedia					{		 background-image: url(images/boutmul.gif);
															 width: 126px;
															 }

a.bout-multimedia:hover		{			 background-image: url(images/boutmulr.gif);
												 				 }

a.bout-evenementiel			 {	background-image: url(images/bouteve.gif);
														width: 146px;		 		
														}

a.bout-evenementiel:hover		{		background-image: url(images/boutever.gif);
																}
													
a.bout-supports						{			background-image: url(images/boutsup.gif);
																width: 156px;
																}

a.bout-supports:hover		{		background-image: url(images/boutsupr.gif);
														}


a.image1, a.image2,
a.image3, a.image4 					{ width: 199px;
															height: 302px;
															}	
															
a.image1			 {	background-image: url(images/EDIimag.gif);
									}

a.image1:hover		{		background-image: url(images/EDIimagR.gif);
											}																								
											
a.image2			 {	background-image: url(images/MULimag.gif);
									}

a.image2:hover		{		background-image: url(images/MULimagR.gif);
											}
											
a.image3			 {	background-image: url(images/EVEimag.gif);
									}

a.image3:hover		{		background-image: url(images/EVEimagR.gif);
											}
											
a.image4			 {	background-image: url(images/SUPimag.gif);
									}

a.image4:hover		{		background-image: url(images/SUPimagR.gif);
											}	
											

p.note		{		position: absolute;
							top: 580px;
							left: 458px; /* (right: 146px; text-align: right; = aligné à droite sur dernière image book) (left: 458px idem légendes projets - 168px idem accueil) */
							}
/* voir les propriétés de typo et de lien sur feuille de style "note.css" */