/*@charset "utf-8";*/
/* CSS Document */

BODY {
	FONT-SIZE: 100%;
	COLOR: #000000;
	LINE-HEIGHT: 1em;
	FONT-FAMILY: Arial, Helvetica, sans-serif;
	background-color: #F8F9FC;
}

#tail-left {
	BACKGROUND: url(images_page/top_left.jpg) #f8f9fc repeat-x 50% 0%;
	WIDTH: 50%;
	POSITION: absolute;
	TOP: 0px;
	Z-INDEX: 0;
	height: 550px;
}

#tail-right {
	RIGHT: 0;
	BACKGROUND: url(images_page/top_right.jpg) repeat-x -5px 0%;
	WIDTH: 50%;
	POSITION: absolute;
	TOP: 0px;
	Z-INDEX: 0;
	height: 550px;
}

#tail-left_int {
	BACKGROUND: url(images_page/top_left_int.jpg) #f8f9fc repeat-x 50% 0%;
	WIDTH: 50%;
	POSITION: absolute;
	TOP: 0px;
	Z-INDEX: 0;
	height: 504px;
}

#tail-right_int {
	RIGHT: 0;
	BACKGROUND: url(images_page/top_right_int.jpg) repeat-x -5px 0%;
	WIDTH: 50%;
	POSITION: absolute;
	TOP: 0px;
	Z-INDEX: 0;
	height: 504px;
}

#tail-top {
	BACKGROUND: url(images_page/menu-top.jpg) repeat-x; 
	LEFT: 0px;
	WIDTH: 100%; 
	POSITION: absolute; 
	TOP: 0px; 
	HEIGHT: 60px;
}


#header-bg {
	/*MIN-WIDTH: 1088px;*/
	POSITION: relative;
	/*WIDTH: 100%;*/
}

#header {
	MARGIN: 0px auto;
	WIDTH: 710px;
	POSITION: relative;
	HEIGHT: 308px;
	/*WIDTH: 100%;*/
}

#header_int {
	MARGIN: 0px auto;
	WIDTH: 710px;
	POSITION: relative;
	HEIGHT: 219px
}

#menu {
	/*Z-INDEX: 2;*/
	LEFT: -116px;
	POSITION: absolute;
	TOP: 0px;
	width: 876px;
	/*left:10%;*/
} 

#titre {
	POSITION: absolute;
	BACKGROUND: url(images_page/titre.jpg) no-repeat;
	LEFT: -323px;
	/*LEFT: -50%; */
	TOP: 60px;
	width:1280px;
	height:248px;
	/*width:100%;*/
}

#titre_int {
	POSITION: absolute;
	LEFT: -323px;
	TOP: 60px
}

#content-bg {
	POSITION: relative;
}

#content {
	MARGIN: 0px auto;
	POSITION: relative;
	WIDTH: 1088px;
	Z-INDEX: 1;
	background-color: #f8f9fc;
	background-repeat: repeat-x;
	background-position: middle;
	/*WIDTH: 80%;*/
}

#content_int {
	MARGIN: 0px auto;
	POSITION: relative;
	WIDTH: 1088px;
	Z-INDEX: 1;
	background-color: #f8f9fc;
	background-repeat: repeat-x;
	/*background-position: middle;*/
}

#coin {
	WIDTH: 136px;
	HEIGHT : 196px;
	BACKGROUND: url(images_page/fond_gauche.jpg) no-repeat;
	POSITION: relative;
	left: -320px;
	top: 308px;
	z-index: 1;
}
#coin_droit {
	WIDTH: 128px;
	HEIGHT : 196px;
	BACKGROUND: url(images_page/fond_droit.jpg);
	POSITION: absolute;
	top: 0px;
	left: 1020px;
	z-index: -1;
	background-repeat: repeat-x;
	background-position: right;
	/*WIDTH: 5%;*/
}
#coin_int {
	WIDTH: 136px;
	HEIGHT : 220px;
	BACKGROUND: url(images_page/fond_gauche_int.jpg) no-repeat;
	POSITION: relative;
	left: -320px;
	top: 219px;
	z-index: 1;
}
#coin_droit_int {
	WIDTH: 136px;
	HEIGHT : 220px;
	BACKGROUND: url(images_page/fond_droit_int.jpg) no-repeat;
	POSITION: absolute;
	top: 0px;
	left: 1032px;
}

#conteneur{
	position:relative;
	width:800px; /*largeur du calque conteneur*/
	height:auto; /* hauteur du conteneur. il est important de mettre ce paramètre sur auto pour que sa hauteur s'adapte au contenu*/
	margin:0; /*permet de centrer ce claque au milieu de la page. Ce paramètre est optionnel*/
} 
/* centrer le bloc conteneur sous IE7  car sinon il pose problème */
html* #conteneur {
	position:relative;	
}

#design_top{
	width:800px; /*largeur de l'image*/
	height:151px; /*c'est la hauteur de l'image. A moi de vérifier la hauteur de mon image*/
	background-image:url(images_page/cadre_haut.jpg);/*lien de notre image du haut*/
}

#design_top_int {
	width:800px; /*largeur de l'image*/
	height:195px; /*c'est la hauteur de l'image. A moi de vérifier la hauteur de mon image*/
	background-image:url(images_page/cadre_haut_int.jpg);/*lien de notre image du haut*/
}

#design_middle{
	width:800px;/* hauteur du calque du milieu. c'est celui qui va s'agrandir en fonction du contenu*/
	background-image:url(images_page/cadre_milieu.jpg);/*lien de notre image du milieu*/
	background-repeat:repeat-y;
	min-height: 250px;
	margin-top:-40px; /*j'ai un inexplicable décalage ici sans ça */
}

#design_middle_int{
	width:800px;/* hauteur du calque du milieu. c'est celui qui va s'agrandir en fonction du contenu*/
	background-image:url(images_page/cadre_milieu.jpg);/*lien de notre image du milieu*/
	background-repeat:repeat-y;
	min-height: 250px;
	margin-top:-19px; /*j'ai un inexplicable décalage ici sans ça */
}

#design_bottom{
	width:800px;
	height:57px;
	background-image:url(images_page/cadre_bas.jpg);/*lien de notre image du bas*/
	position: relative;
}

#zone_texte{ /*placement de la zone de texte*/
	width:740px;
	margin:auto;
	position: relative;
	top: -90px;
} 

#zone_texte_int{ /*placement de la zone de texte*/
	width:740px;
	margin:auto;
	position: relative;
	top: -161px;
} 

#conteneur2{
	position:absolute;
	width:220px; /*largeur du calque conteneur*/
	height:auto; /* hauteur du conteneur. il est important de mettre ce paramètre sur auto pour que sa hauteur s'adapte au contenu*/
	margin:0; /*permet de centrer ce claque au milieu de la page. Ce paramètre est optionnel*/
	left: 800px;
	top: 0px;
	z-index:1;
} 

#conteneur2_int{
	position:absolute;
	width:232px; /*largeur du calque conteneur*/
	height:auto; /*permet de centrer ce claque au milieu de la page. Ce paramètre est optionnel*/
	left: 800px;
	z-index:-1;
	top: 0px;
} 

#design_top2{
	width:220px; /*largeur de l'image*/
	height:137px; /*c'est la hauteur de l'image. A vous de vérifier la hauteur de votre image*/
	background-image:url(images_page/p-cadrehaut.jpg);/*lien de notre image du haut*/
}

#design_top2_int{
	width:232px; /*largeur de l'image*/
	height:189px; /*c'est la hauteur de l'image. A vous de vérifier la hauteur de votre image*/
	background-image:url(images_page/p-cadrehaut_int.jpg);/*lien de notre image du haut*/
}

#design_middle2{
	width:220px;
	/*height:auto;/* hauteur du calque du milieu. c'est celui qui va s'agrandir en fonction du contenu*/
	height:100px;
	background-image:url(images_page/p-cadremilieu.jpg);/*lien de notre image du milieu*/
	background-repeat:repeat-y; /*répétition de l'image sur l'axe des Y c'est à dire verticalement*/
}

#design_middle2_int{
	width:220px;
	/*height:auto;/* hauteur du calque du milieu. c'est celui qui va s'agrandir en fonction du contenu*/
	height:50px;
	background-image:url(images_page/p-cadremilieu.jpg);/*lien de notre image du milieu*/
	background-repeat:repeat-y; /*répétition de l'image sur l'axe des Y c'est à dire verticalement*/
}

#design_bottom2{
	width:220px;
	height:45px;
	background-image:url(images_page/p-cadrebas.jpg);/*lien de notre image du bas*/
}

#zone_texte2{ /*placement de la zone de texte*/
	width:170px;
	height:auto;
	margin:auto;
	/*left:-10px;*/
	top: -130px;
	position: relative;
	margin-right: 35px;
} 

#zone_texte2_int{ /*placement de la zone de texte*/
	width:175px;
	height:auto;
	margin:auto;
	/*left:-10px;*/
	top: -180px;
	position: relative;
	margin-right: 30px;
} 


#design_top3{
	width:220px; /*largeur de l'image*/
	height:80px; /*c'est la hauteur de l'image. A vous de vérifier la hauteur de votre image*/
	background-image:url(images_page/p-cadrehaut3.jpg);/*lien de notre image du haut*/
}

#design_middle3{
	width:220px;
	height:10px; 
	background-image:url(images_page/p-cadremilieu.jpg);/*lien de notre image du milieu*/
	background-repeat:repeat-y; /*répétition de l'image sur l'axe des Y c'est à dire verticalement*/
}

#zone_texte3{ /*placement de la zone de texte*/
	width:170px;
	height:auto;
	margin:auto;
	top: -66px;
	position: relative;
	margin-right: 35px;
} 

#design_bottom3{
	width:220px;
	height:45px;
	background-image:url(images_page/p-cadrebas.jpg);/*lien de notre image du bas*/
}

#footer-bg {
	BACKGROUND: url(images_page/footer.jpg) repeat-x
}
#footer {
	MARGIN: 0px auto;
	OVERFLOW: hidden;
	WIDTH: 938px;
	HEIGHT: 67px;
	color: #FFFFFF;
}
#footer P {
	PADDING-RIGHT: 1px;
	PADDING-LEFT: 0px;
	PADDING-BOTTOM: 0px;
	COLOR: #f4f4f4;
	LINE-HEIGHT: 66px;
	PADDING-TOP: 0px;
	TEXT-ALIGN: center;
	font-size: 12px;
}
#footer P SPAN {
	MARGIN: 0px 6px 0px 0px
}
#footer P A {
	MARGIN: 0px 0px 0px 6px; COLOR: #f4f4f4
}

.pub {
	position:relative;
	margin:0; /*permet de centrer ce claque au milieu de la page. Ce paramètre est optionnel*/
	width:220px;
	text-align:center;
	height:100%;
	padding:0;
}