/* Général
-------------------------------------------------------- */

* {
margin: 0;
padding: 0;
}

html,body {
height: 100%;
}

body{
	behavior:url("hoverIE/csshover.htc");
	background: #daeedf /*url(shadow.png) repeat-y 50% 0*/;
	color: #000;
	font-size: 80%;
	line-height: 1.6em;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}

h1, h2, h3, h4, h5, h6{
	font-family: "Trebuchet MS", sans-serif;
}

h1{font-size: 1.5em;}
h2{font-size: 1.4em;}
h3{font-size: 1.3em;}
h4{font-size: 1.2em;}
h5{font-size: 1.1em;}
h6{font-size: 1em;}

/* Les containers
-------------------------------------------------------- */



#container {
position: relative;
width: 1024px;
min-height: 100%;
margin: 0 auto;
}

#shadow {
/*padding: 0 11px;*/
min-height: 100%;
}

#main {
width: 100%;
float: left;
/*/*border: 1px black solid; /* temp */
background: #fff url(background.jpg) 0 -220px;
background-repeat: no-repeat;
min-height: 100%;
}

#flou {
position: relative;
width: 100%;
float: left;
/*/*border: 1px black solid; /* temp */
/*background: transparent url(flou2.png) top left repeat-y;*/
min-height: 100%;
}

/* L'entête
-------------------------------------------------------- */

#header {
/*border: 1px red solid; /* temp */
/*padding: 0;*/
margin: 0 0 0 330px;
}

#header_title {
/*height: 30px;*/
position: relative;
left: 2px;
}

#header_title p {
color: #060;
font-family: Helvetica;
font-size: 54px;
/*font-weight: bold;*/
/*letter-spacing: 83px;*/
/*text-align: right;*/
/*margin: 40px 100px 0 0;*/
margin-top: 40px;
padding-right: 72px;
}

#header_title p .notlast{
margin-right: 83px;
}

#header_title p .last{
margin-right: 0;
}

#header_subtitle {
height: 45px;
}

#header_subtitle p {
color: #060;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
letter-spacing: 2px;
/*text-align: right;*/
margin: 20px 0 0 0;
}

/* Le menu
-------------------------------------------------------- */

#menu {

}

#menu ul,#menu li,#menu a {
	display:block;
	margin:0;
	padding:0;
	border:0;
}

#menu ul {
	width:240px !important;
	width:230px;
	/*border:1px solid #9d9da1;*/
	background:transparent url(flou2.png) top left repeat-y;
	/*background: white;*/
	list-style:none;
	font-weight: bold;
	/*border-left: 1px black solid;*/
	margin-left: 60px;
	padding: 10px 0;
}

#menu li {
	position:relative;
	padding:1px;
	/*padding-left:26px;*/
	padding-left: 7px;
	padding-right: 26px;
	/*background:url("imgs/orange.png") no-repeat;*/
	z-index:9;

}
	
/*#menu li.rubrique	{ background:url("imgs/orange.png") no-repeat; }		*/
	
#menu li.rubrique ul {
	position:absolute;
	left:230px; /* IE */
	top:-2em;
	background: transparent url("flou.png");
}		
	
#menu li.rubrique>ul { left:230px; background: transparent url("flou.png");} /* others */

#menu a {
	padding:2px;
	/*border:1px solid white;*/
	text-decoration:none;
	color:#777;
	/*font-weight:bold;*/
	width:100%; /* IE */
	/*background: transparent url("flou.png") bottom left repeat-x;*/
}

#menu li>a { width:auto; } /* others */

#menu li a.first-rub {
	/* background:url("imgs/orange.png") right no-repeat; */
	font-size: 1.3em;
}

#menu li a.second-rub {
	font-size:1.4em;
	/* background:url("imgs/orange.png") right no-repeat; */
}

#menu li a.third-rub {
	font-size:0.9em;
	/* background:url("imgs/orange.png") right no-repeat; */
}

/* regular hovers */

#menu a:hover {
	/*border-color:gray;
	background-color:#CCCCCC;*/
	color:black;
	/*background: transparent url("flou_hover.png");*/
}

#menu li.rubrique a:hover {
	/*background-color:#CCCCCC;*/
}
	
/* hovers with specificity */
	
#menu li.rubrique:hover { z-index:10; }		
		
#menu ul ul, #menu li:hover ul ul {
	display:none;
}

#menu li:hover ul,#menu li:hover li:hover ul {
	display:block;
}		

/* La page
-------------------------------------------------------- */

#content {
/*width: 100%;*/
/*/*border: 1px red solid; /* temp */
}

#colonne_gauche {
width: 262px;
height: 100%;
float: left;
/*border: 1px black solid; /* temp */
}

#left_top {
margin-top: 10em;
margin-bottom: 5em;

/*border: 1px red solid; /* temp */
}

#left_bottom {
height: 70%;
padding: 18px;
/*border: 1px red solid; /* temp */
}

#colonne_centrale {
width: 740px;
height: 410px;
float: left;
/*border: 1px black solid; /* temp */
}

#middle_top {
height: 30%;
/*padding: 50px 0 0 50px;*/
/*position: relative;*/
/*border: 1px red solid; /* temp */
}

#middle_middle {
position: relative;
clear: both;
height: 200px;
/*border: 1px red solid; /* temp */
}

.avertissement {
/*position: relative;
top: 4.5em;
left: 70px;
width: 150%;
padding: 10px;*/
text-align: center;
display: block;
/*border-top: 1px #ddd solid;
border-bottom: 1px #ddd solid;
background: transparent url("flou.png") top left;*/
font-size: 1.2em;
margin-left: 100px;
}

.contact {
/*position: relative;
top: 4.5em;
left: 70px;
width: 150%;
padding: 10px;*/
text-align: left;
display: block;
/*border-top: 1px #ddd solid;
border-bottom: 1px #ddd solid;
background: transparent url("flou.png") top left;*/
font-size: 1.2em;
margin-left: 300px;
border-left: 3px #060 solid;
padding-left: 2em;
}

.liste_produits {
position: relative;
top: -90px;
text-align: left;
display: block;
font-size: 1.2em;
margin-left: 385px;
padding-left: 2em;
list-style: none;
}

.liste_produits p {
margin-top: 10px;
margin-bottom: 40px;
}

.liste_produits li {
margin: 5px 0;
}

.liste_produits li a {
text-decoration: none;
color: #222;
}

.liste_produits li a:hover{
background-color: #eee;
}

/* ------------------------ Mise en page pour chaque produit ---------------------------- */

/* ----------- ARBUM ----------- */

.arbum_boite {
position: relative;
left: 50px;
}

.arbum_visage {
position: relative;
top: -450px;
left: 550px;
width: 153px;
}

.arbum_plante {
position: relative;
top: 200px;
left: 50px;
}

.arbum_desc {
padding: 10px;
display: block;
position: relative;
top: -250px;
left: 270px;
background-color: #d2d6ff;
font-size: 1.2em;
width: 15em;
}

.arbum_desc ul {
padding-left: 19px;
}

.arbum_boite_desc {
position: relative;
top: -150px;
left: 250px;
width: 60%;
}

/* ------------- SILETTUM ------------------ */

.silettum_visage {
position: relative;
top: 100px;
left: 50px;
}

.silettum_boite {
position: relative;
top: -80px;
left: 500px;
width: 153px;
}

.silettum_boite_desc {
position: relative;
top: -70px;
left: 465px;
width: 30%;
text-align: right;
}

.silettum_desc_title {
position: relative;
top: -280px;
left: 80px;
font-size: 1.6em;
color: #055e04;
}

.silettum_desc {
position: relative;
top: -270px;
left: 80px;
font-size: 1.2em;
width: 60%;
list-style-image: url(puce.png);
}

.silettum_desc li {
margin-bottom: 6px;
}

.silettum_accroche {
position: relative;
top: -197px;
left: -31px;
width: 217px;
height: 28px;
background: transparent url(point_vert.png) top left repeat-x;
}

.cledist_velo {
position: relative;
top: -120px;
left: 550px;
width: 110px;
}

.cledist_boite {
position: relative;
top: -186px;
}

.cledist_boite_desc {
position: relative;
top: -186px;
}

.cledist_desc {
position: relative;
top: -351px;
left: 270px;
font-size: 1.2em;
width: 100%;
}

.cledist_plante1 {
width: 40px;
position: relative;
top: -249px;
left: 390px;
}

.cledist_plante2 {
width: 60px;
position: relative;
top: -318px;
left: 455px;
}

.cledist_plante3 {
width: 60px;
position: relative;
top: -380px;
left: 543px;
}

.cledist_plante4 {
width: 60px;
position: relative;
top: -470px;
left: 628px;
}

.cledist_plante5 {
width: 50px;
position: relative;
top: -610px;
left: 643px;
}

.elteans_dos {
position: relative;
top: 150px;
left: 100px;
}

.elteans_boite {
position: relative;
top: -110px;
left: 533px;
width: 153px;
}

.elteans_boite_desc {
position: relative;
top: -100px;
left: 465px;
width: 30%;
text-align: right;
}

.elteans_desc_title {
position: relative;
top: -260px;
left: 100px;
font-size: 1.6em;
color: #055e04;
}

.elteans_desc {
position: relative;
top: -250px;
left: 100px;
font-size: 1.2em;
width: 60%;
}

.elteans_plante1 {
position: relative;
top: -220px;
left: 140px;
width: 140px;
z-index:2;
}

.elteans_paysage {
position: relative;
top: -270px;
left: 170px;
width: 220px;
z-index:1;
}

.elteans_plante2 {
position: relative;
top: -360px;
left: 320px;
width: 80px;
z-index:3;
}

.elteans_bebe {
position: relative;
top: -440px;
left: 550px;
width: 80px;
}

/* ------------- IDELT EMULSION --------------- */

.idelt_emulsion_boite {
position: relative;
top: -125px;
left: 550px;
width: 150px;
}

.idelt_emulsion_boite_desc {
position: relative;
top: -130px;
left: 465px;
width: 30%;
text-align: right;
}

.idelt_emulsion_visage2 {
position: relative;
top: -225px;
left: 320px;
width: 227px;
}

.idelt_emulsion_visage3 {
position: relative;
top: -330px;
left: 595px;
width: 227px;
}

.idelt_emulsion_visage1 {
position: relative;
top: 110px;
left: 140px;
width: 138px;
}

.idelt_emulsion_desc_title {
position: relative;
top: -285px;
left: 100px;
font-size: 1.6em;
width: 60%;
color: #51a5fb;
}

.idelt_emulsion_desc {
position: relative;
top: -275px;
left: 83px;
font-size: 1.2em;
width: 17.3em;
text-align: left;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
color: #51a5fb;
background-color: #ddd;
}

/* ------------ IDELT MAJEUR --------------- */

.idelt_majeur_boite {
position: relative;
top: -125px;
left: 560px;
width: 153px;
}

.idelt_majeur_boite_desc {
position: relative;
top: -125px;
left: 465px;
width: 30%;
text-align: right;
}

.idelt_majeur_visage {
position: relative;
top: -230px;
left: 550px;
width: 120px;
}

.idelt_majeur_desc_title {
position: relative;
top: -255px;
left: 170px;
font-size: 1.6em;
width: 60%;
color: #51a5fb;
}

.idelt_majeur_desc {
position: relative;
top: -245px;
left: 153px;
font-size: 1.2em;
width: 17.2em;
text-align: left;
padding-top: 1em;
padding-bottom: 1em;
padding-left: 1em;
color: #51a5fb;
background-color: #ddd;
}

.idelt_majeur_image1 {
position: relative;
top: 160px;
left: 80px;
width: 140px;
z-index:2;
}

.idelt_majeur_image2 {
position: relative;
top: 130px;
left: 110px;
width: 220px;
z-index:1;
}

.idelt_majeur_image3 {
position: relative;
top: 80px;
left: 230px;
width: 80px;
z-index:3;
}

.idelt_majeur_image4 {
position: relative;
top: 20px;
left: 50px;
width: 80px;
z-index:4;
}

/* ------------ IMGALT --------------- */

.imgalt_boite {
position: relative;
top: -125px;
left: 490px;
width: 200px;
}

.imgalt_boite_desc {
position: relative;
top: -125px;
left: 395px;
width: 40%;
text-align: right;
}

.imgalt_visage {
position: relative;
top: -180px;
left: 500px;
width: 180px;
}

.imgalt_desc_title {
position: relative;
top: -185px;
left: 125px;
font-size: 1.6em;
width: 60%;
color: #46cbf8;
}

.imgalt_desc {
position: relative;
top: -175px;
left: 100px;
font-size: 1.2em;
width: 19em;
text-align: center;
padding-top: 1em;
padding-bottom: 1em;
background-color: #e1fefe;
}

.imgalt_ventre {
position: relative;
top: 210px;
left: 120px;
width: 180px;
}

/* -------------- OXELIO ------------------- */

.oxelio_boite {
position: relative;
top: -130px;
left: 20px;
width: 200px;
}

.oxelio_boite_desc {
position: relative;
top: -130px;
left: 20px;
width: 40%;
text-align: left;
}

.oxelio_plage {
position: relative;
top: -120px;
left: 500px;
width: 220px;
}

.oxelio_desc {
position: relative;
top: -300px;
left: 320px;
font-size: 1.2em;
width: 60%;
color: #f36217;
}

.oxelio_avert {
position: relative;
top: -280px;
left: 320px;
width: 60%;
}

/* ------------ OXELIO JUNIOR ------------ */

.oxelio_junior_plage1 {
position: relative;
top: 80px;
left: 80px;
}

.oxelio_junior_boite {
position: relative;
top: -110px;
left: 480px;
width: 180px;
}

.oxelio_junior_boite_desc {
position: relative;
top: -100px;
left: 465px;
width: 30%;
text-align: right;
}

.oxelio_junior_desc_title {
position: relative;
top: -180px;
left: 100px;
font-size: 1.6em;
width: 60%;
color: #f36217;
}

.oxelio_junior_desc {
position: relative;
top: -170px;
left: 100px;
font-size: 1.2em;
width: 60%;
color: #f36217;
}

.oxelio_junior_avert1{
position: relative;
top: -150px;
left: 100px;
font-size: 1.2em;
width: 60%;
}

.oxelio_junior_avert2{
position: relative;
top: -120px;
left: 100px;
font-size: 1.4em;
width: 60%;
}

.oxelio_junior_plage2 {
position: relative;
top: -250px;
left: 550px;
width: 102px;
}

/* ------------- OXELIO TOPIQUE --------------- */

.oxelio_topique_visage {
position: relative;
top: 160px;
left: 120px;
}

.oxelio_topique_boite {
position: relative;
top: -110px;
left: 462px;
width: 200px;
}

.oxelio_topique_boite_desc {
position: relative;
top: -100px;
left: 465px;
width: 30%;
text-align: right;
}

.oxelio_topique_desc_title {
position: relative;
top: -150px;
left: 130px;
font-size: 1.4em;
width: 60%;
color: #f36217;
font-style: italic;
}

.oxelio_topique_desc {
position: relative;
top: -130px;
left: 130px;
font-size: 1.2em;
width: 60%;
color: #f36217;
}

.oxelio_topique_avert{
position: relative;
top: -90px;
left: 130px;
font-size: 1.2em;
width: 60%;
}

.oxelio_topique_plage {
position: relative;
top: -160px;
left: 520px;
width: 200px;
}

/* ------------- TAVMET --------------- */

.tavmet_desc {
position: relative;
top: -300px;
left: 100px;
word-spacing:10px;
font-size: medium;
font-family: Arial; 
width: 100%;

}

.tavmet_boule {
position: relative;
top: -50px;
left: 100px;
width: 30%;
}


.tavmet_boite {
position: relative;
top: -90px;
left: 500px;
}


.tavmet_boite_desc {
position: relative;
top: -60px;
left: 465px;
width: 30%;
text-align: right;
}

.tavmet_bracelet{
position: relative;
top: -270px;
left: 370px;
width: 153px;
}
/* ----------------------------------------------------------------------------------------- */

#middle_bottom {
/*height: 30%;*/
/*border: 1px red solid; /* temp */
}

#middle_bottom img {
float: left;
position: relative;
top: -130px;
margin: 10px;
}

#colonne_droite {
width: 370px;
height: 400px;
float: left;
/*border: 1px black solid; /* temp */
}

#right_top {
height: 60%;
/*border: 1px red solid; /* temp */
}

#langue ul {
position: relative;
right: -160px;
/*width: 40%;*/
list-style: none;
/*display: block;*/
font-size: 1.3em;
/*background-color: #feffbf;*/
/*background: transparent url("fond_jaune.jpg") top left;*/
/*border-top: 1px #ddd solid;*/
/*border-right: 1px #ddd solid;*/
}

#langue li {
padding: 0.5em;
float: left;
/*line-height: 1.4em;*/
background: transparent url("fond_jaune.jpg") top left;
}

#langue a {
background-color: transparent;
text-decoration: none;
color: black;
}

#langue a:hover {
background-color: #bfdaff;
}

#right_bottom {
/*height: 40%;*/
/*border: 1px red solid; /* temp */
}

/* Le pied de page
-------------------------------------------------------- */

#footer {
clear: both;
position: absolute;
bottom: 0;
width: 1024px;
height: 40px;
background:white top left;
/*border: 1px black solid; /*temp*/
}

#footer p {
text-align: center;
font-size: 14px;
margin: 0 30px; 
line-height: 40px;
}

#nofooter {
clear: both;
bottom: 0;
width: 1024px;
height: 40px;
background:transparent;
}