body 
{	font-family:Arial, Helvetica, sans-serif;
	font-size: 0.9em;
	width:80%;
	color: #666666;
	background-image:url(image/carbone.jpg);
	background-position:center;
	background-repeat:repeat;
	margin: auto; /* il est conseillé de mettre à zéro la marge et le remplissage de l'élément body, pour tenir compte des différentes valeurs par défaut des navigateurs */
	padding: 0;
	text-align: center; /* ce paramétrage centre le conteneur dans les navigateurs IE 5.x. Le texte est ensuite aligné à gauche (valeur par défaut) dans le sélecteur #container */
	color: #000000;}

fieldset {
	border: 1px dotted gray;
	background-color: #f0f0f0;
	margin-bottom: .5em;
}
legend {
	font-weight: bold;
	background-color: #f9f9f9;
	border: 1px solid #a0a0a0;
	border-width: 1px 2px 2px 1px;
	font-size: 1.5em;	
}

a
{	text-decoration: none;}

img
{	border: none;}

#container 
{	background: #DDD;
	margin: 0 auto; /* les marges automatiques (et dotées d'une largeur positive) centrent la page */
	border: 1px solid #000000;
	text-align: left;}  /* ce paramétrage annule le paramètre text-align: center de l'élément body. */
	
#entete 
{	background-color:#333333;
	text-align:center;}

#entete a:link, #entete a:visited 
{	color:#FFF;}

#entete a:active, #entete a:hover 
{	color:#ABC;}

#tabs li a:link, #tabs li a:visited 
{	color:#FFF;}

#tabs li a:active, #tabs li a:hover 
{	color:#ABC;}
 
#sidebar1 
{	float: right; 
	width: 12em; /* cet élément est flottant, il faut donc lui attribuer une largeur */
	background: #333; /* la couleur de l'arrière-plan est affichée sur la largeur du contenu de la colonne, mais pas au-delà */
	padding: 15px; /* le remplissage en haut et en bas crée un espace visuel à l'intérieur de cet élément div  */
	color:#CCC;
	margin:5px;}
	
#sidebar1 h3, .index #sidebar1 p 
{	margin-left: 10px; /* il est conseillé d'attribuer des valeurs pour les marges gauche et droite de chaque élément qui sera placé dans les colonnes latérales */
	margin-right: 10px;}

#mainContent 
{	margin: 0 15em 0 10px; }  /* La valeur de la marge gauche est égale à celles de l'en-tête et du pied de page, ce qui crée un alignement sur tout le côté gauche du document. */

#mainContent a
{	font-weight:bold;}  

#mainContent a:link, #mainContent a:visited 
{	color:#753;}

#mainContent a:active, #mainContent a:hover 
{	color:#333;}

#footer 
{	padding: 0 10px; /* ce remplissage correspond à l'alignement à gauche des éléments des div qui apparaissent au-dessus. */
	background:#333;}

#footer p 
{	margin: 0; /* la mise à zéro de la marge du premier élément du pied de page permet d'éviter une possible disparition de la marge (espace entre les éléments div) */
	padding: 10px 0;} /* l'utilisation d'un remplissage pour cet élément crée un espace, tout comme une marge l'aurait fait, mais en évitant le risque de disparition de la marge */

.fltrt  /* cette classe permet de rendre flottant le côté droit d'un élément dans la page. L'élément flottant doit précéder l'élément à côté duquel il doit se trouver dans la page. */
{	float: right;
	margin-left: 8px;}
	
.fltlft /* cette classe permet de rendre flottant le côté gauche d'un élément dans la page */
{	float: left;
	margin-right: 8px;}

.right  
{	text-align:right;}

.clearfloat  /* cette classe doit être placée pour un élément div ou break et doit être l'élément final avant la balise de fin d'un conteneur qui doit contenir entièrement un élément flottant */
{	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;}

h1
{color:#333;}

#center
{	text-align:center;}

	

/* dock - top */
.dock {
	position: relative; 
	height: 50px; 
	text-align: center;
}
.dock-container {
	position: absolute;
	height: 50px;
	background: url(image/dock-bg2.gif);
	padding-left: 20px;
}
a.dock-item {
	display: block;
	width: 40px;
	color: #000;
	position: absolute;
	top: 0px;
	text-align: center;
	text-decoration: none;
	font: bold 12px Arial, Helvetica, sans-serif;
}
.dock-item img {
	border: none; 
	margin: 5px 10px 0px; 
	width: 100%; 
}
.dock-item span {
	display: none; 
	padding-left: 20px;
}



#usual {  text-align:center;}
.usual {
  background:#DDD;
  padding:15px 20px;
  margin: 5px;
}
.usual li { list-style:none; float:left; }
.usual ul a {
  display:block;
  padding:6px 10px;
  text-decoration:none!important;
  margin:1px;
  margin-left:0;
  font:10px Verdana;
  background:#BBB;
}

.usual ul a.selected {
  margin-bottom:0;
  background:#444;
  cursor:default;
  }
.usual div {
  padding:10px 10px 8px 10px;
  *padding-top:3px;
  *margin-top:-15px;
  clear:left;
  font:10pt Georgia;
}

#tabs p
{ text-align:left;}




table 
{	margin:auto;}
.offre th 
{	vertical-align:middle;
	font-size:0.9em;}
.offre td 
{	font-size:0.9em;
	font-weight:bolder;
	vertical-align:top;
	background-color:#aaa;}
.offre
{	border:1px outset;}

#gallery
{	text-align:center;}







.gallery {
	list-style: none;
	text-align:center;
	margin: auto;
	padding: 0;

}
.gallery li {
	margin: auto;
	padding: 0;
	float: left;
	position: relative;
	width: 212px;
	height: 175px;
}

.gallery a {
	text-decoration: none;
	color: #999;
}
.gallery a:hover {
	color: #000;
	text-decoration: underline;
}
.gallery img {
	border: none;
	padding: 25px 5px 5px 5px;
}
.gallery em {
	width: 193px;
	height: 25px;
	display: block;
	position: absolute;
	top: 2px;
	left: 2px;
	background: url(image/watercolor-mask.png) no-repeat;
	text-align: center;
	font: italic 100%/100% Georgia, "Times New Roman", Times, serif;
	padding-top: 138px;
}