#logo{
	position: absolute;
	top: 0;
	background: url(../images/LogoCarpGrand.gif) no-repeat top left;
	width: 295px;
	height: 155px;
	z-index: 10;
}

#AcroRead{
	position: absolute;
	bottom: 30px;
	right: 3%;
	height: 100px;
	width: 20%;
	font: 9px Verdana,Arial,Helvetica,sans-serif;
	text-align: justify;
	z-index:9;
	/*visibility: hidden;*/
	
}

#Bas{
	position: absolute;
	bottom: 25px;
	height: 25px;
	width: 98%;
	/*padding: 0 10% 0 10%;*/
	background-color: #006666;
	font: 10px Verdana,Arial,Helvetica,sans-serif;
	text-align: center;
	color: #99CC00;
	z-index: 1;
}

#messageAccueil{
	position: absolute;
	top: 160px;
	/*height: 500px;*/
	width: 26%;
	left: 10px;
	font: 9px Verdana,Arial,Helvetica,sans-serif;
	/*padding: 0 10% 0 10%;*/
	text-align: center;
	z-index: 9;
}

.menu {
	position: absolute;
	top:50%;
	left:50%;
	margin-left: -250px; /* la moitié de la taille de l'image */
	margin-top: -235px;
	
}

ul{
	position: relative;
	list-style: none; /* On supprime les puces pour les elements LI de la balise */
	padding: 0px;
	margin: 0px;
	width: 490px; /* On définie la largeur et la hauteur de la balise en fonction des dimensions de l'image de fond	*/
	height: 460px;
	background: url(../images/fdeFonce.jpg) no-repeat left top; /* On definit le background de la balise */
}


/** LA BALISE A **
 * ------------- *
 * La balise A va nous permettre de définir les attributs communs à chaque element du menu 
 */
.menu a{
	position: absolute;
	display: block;
	left: 0px; /*accoler au bord gauche de leur conteneur : la balise UL */
	height: 28px; /*hauteur d'une ligne de menu*/
	padding-top: 10px; /*Décallage du texte dans la ligne de menu */
	text-decoration: none; /* On supprime le soulignement par défaut des liens */
	font: bold 14px Verdana,Arial,Helvetica,sans-serif; /* On definie les valeurs typographiques du texte de la balise */
	color: #000000;
	z-index: 2;
}


/** LA PSEUDO-CLASS :hover **
 * ------------------------ *
 * La pseudo-class :hover va nous permettre de définir les attributs communs à chaque balise A 
 * survolée par la souris
 * NOTE : IE comprend la pseudo-class :hover uniquement lorsqu'elle est appliquée a la balise A
 */
.menu a:hover{
	color: #006666; /* On fixe la largeur de la balise  */
 	/* width: 490px; On définie la largeur en fonction des dimensions de l'image de fond	*/
	/* border:solid; Pour tester le décallage */  
	z-index: 2;
	font: bold 15px Verdana,Arial,Helvetica,sans-serif;
	background: url(../images/fdeClair.jpg) no-repeat top left;
}

/** LE CAS PAR CAS **/
 
#menu1{
  top: 40px;            				/* Cet element de menu sera placé à 100px du bord haut de son conteneur : la balise UL */
 	padding-left: 290px;  				/* Le texte sera décallé de 370px vers la droite tout en laissant apparaitre le background de la balise */
  width: 200px; 								/* Largeur de la bande claire = LargeurImage - Padding-left */
}
#menu1:hover{
   background-position: 1px -40px;   
}

#menu2{
  top: 70px;
  padding-left: 270px;
	width: 220px;
}
#menu2:hover{
  background-position: 1px -70px;
}

#menu3{
  top: 100px;
  padding-left: 250px;
	width: 240px;
}
#menu3:hover{
   background-position: 1px -100px;
}

#menu4{
  top: 130px;
  padding-left: 230px;
	width: 260px;
}
#menu4:hover{
  background-position: 1px -130px;
}

#menu5{
  top: 160px;
  padding-left: 210px;
	width: 280px;
}

#menu5:hover{
  background-position: 1px -160px;
}

#menu6{
  top: 190px;
  padding-left: 190px;
	width: 300px;
}
#menu6:hover{
  background-position: 1px -190px;
}

#menu7{
  top: 220px;
  padding-left: 170px;
	width: 320px;
}
#menu7:hover{
  background-position: 1px -220px;
}

#menu8{
  top: 250px;
  padding-left: 150px;
	width: 340px;
}
#menu8:hover{
  background-position: 1px -250px;
}

#menu9{
  top: 280px;
  padding-left: 130px;
	width: 360px;
}
#menu9:hover{
  background-position: 1px -280px;
}

#menu10{
  top: 310px;
  padding-left: 110px;
	width: 380px;
}
#menu10:hover{
  background-position: 1px -310px;
}

#menu11{
  top: 340px;
  padding-left: 90px;
	width: 400px;
}
#menu11:hover{
  background-position: 1px -340px;
}

#menu12{
  top: 370px;
  padding-left: 70px;
	width: 420px;
}
#menu12:hover{
  background-position: 1px -370px;
}

/* Inset 3D Raised */
.raised {background: transparent; width:100%; margin:0 auto;text-align:center ;}
.raised h1, .raised p {margin:0 10px;}
.raised h1 {font-size: 1.3em; color: #fff;	letter-spacing: 1px; text-align:center}
.raised a {color:#006666; text-decoration: none;}
.raised a:hover{color: #000;}

.raised .top, .raised .bottom {display:block; background:transparent; font-size:1px;}
.raised .b1, .raised .b2, .raised .b3, .raised .b4, .raised .b1b, .raised .b2b, .raised .b3b, .raised .b4b {display:block; overflow:hidden;}
.raised .b1, .raised .b2, .raised .b3, .raised .b1b, .raised .b2b, .raised .b3b {height:1px;}
.raised .b2 {background:#99CC00; border-left:1px solid #fff; border-right:1px solid #eee;}
.raised .b3 {background:#99CC00; border-left:1px solid #fff; border-right:1px solid #ddd;}
.raised .b4 {background:#99CC00; border-left:1px solid #fff; border-right:1px solid #aaa;}
.raised .b4b {background:#99CC00; border-left:1px solid #eee; border-right:1px solid #999;}
.raised .b3b {background:#99CC00; border-left:1px solid #ddd; border-right:1px solid #999;}
.raised .b2b {background:#99CC00; border-left:1px solid #aaa; border-right:1px solid #999;}


.raised .b1 {margin:0 5px; background:#fff;}
.raised .b2, .raised .b2b {margin:0 3px; border-width:0 2px;}
.raised .b3, .raised .b3b {margin:0 2px;}
.raised .b4, .raised .b4b {height:2px; margin:0 1px;}
.raised .b1b {margin:0 5px; background:#999;}
.raised .boxcontent {display:block;  background:#99CC00; border-left:1px solid #fff; border-right:1px solid #999; font-size:11px;}


/* Inset 3D Raised Jaune*/
.remarque {background: transparent; width:100%; margin:0 auto;text-align:center ;}
.remarque h1, .remarque p {margin:0 10px;}
.remarque h1 {
	font-size: 1.3em;
	color: #FFFFFF;
	letter-spacing: 1px;
	text-align: center;
}
.remarque h2 {
	font-size: 1.3em;
	color: #FFFFFF;
	letter-spacing: 1px;
	text-align: center;
}
.remarque a {
	color: #31955C;
	text-decoration: none;
}
.remarque a:hover{color: #000000;}

.remarque .top, .remarque .bottom {display:block; background:transparent; font-size:1px;}
.remarque .b1, .remarque .b2, .remarque .b3, .remarque .b4, .remarque .b1b, .remarque .b2b, .remarque .b3b, .remarque .b4b {display:block; overflow:hidden;}
.remarque .b1, .remarque .b2, .remarque .b3, .remarque .b1b, .remarque .b2b, .remarque .b3b {height:1px;}
.remarque .b2 {
	background: #006666;
	border-left: 1px solid #fff;
	border-right: 1px solid #eee;
}
.remarque .b3 {background:#006666; border-left:1px solid #fff; border-right:1px solid #ddd;}
.remarque .b4 {background:#006666; border-left:1px solid #fff; border-right:1px solid #aaa;}
.remarque .b4b {background:#006666; border-left:1px solid #eee; border-right:1px solid #999;}
.remarque .b3b {background:#006666; border-left:1px solid #ddd; border-right:1px solid #999;}
.remarque .b2b {background:#006666; border-left:1px solid #aaa; border-right:1px solid #999;}


.remarque .b1 {margin:0 5px; background:#fff;}
.remarque .b2, .remarque .b2b {margin:0 3px; border-width:0 2px;}
.remarque .b3, .remarque .b3b {margin:0 2px;}
.remarque .b4, .remarque .b4b {height:2px; margin:0 1px;}
.remarque .b1b {margin:0 5px; background:#999;}
.remarque .boxcontent {display:block;  background:#006666; border-left:1px solid #fff; border-right:1px solid #999; font-size:11px;}