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

img.loading {  
     background:url(../i/loading.gif) no-repeat center;  
} 

div#fond-contenu{
	width: 100%;
	background: url(../i/fond-accueil.jpg) center center no-repeat;
	height: 510px;
	}
	
body#decouvrir div#fond-contenu{background-image:url(../i/fond-decouvrir.jpg)}
body#collection div#fond-contenu{background-image:url(../i/fond-collection.jpg)}
body#services div#fond-contenu{background-image:url(../i/fond-services.jpg)}
body#contacts div#fond-contenu{background-image:url(../i/fond-contact.jpg)}
body#mentions div#fond-contenu{background-image:url(../i/fond-mentions.jpg)}



*{
	margin: 0;
	padding: 0;
}

body{
	font: 62.5% arial, Arial, Helvetica, sans-serif;
}

ul {list-style: none inside}
p {font-size: 1.2em; line-height: 1.2em; margin-bottom: 1.2em}
img {border: none}

.floatleft {float: left}
.floatright {float: right}
.clear {clear: both}

/* HEADER */

div#header{
	margin: 0 auto;
	height: 164px;
	width: 710px;
	margin-top: 50px;
}
ul#nav{
	position: relative;
	top: 135px;
	left: 24px;
	}
	ul#nav li, ul#nav1 li, ul#nav2 li{
			display: inline;
		}
		ul#nav li a{
			display: block;
			height: 29px;
			float: left;
			text-indent: -9999px;
			}
			ul#nav li a.presentation{
				width: 82px;
				background: url(../i/bouton-presentation.jpg) center left no-repeat;
			}
			ul#nav li a.decouvrir{
				width: 90px;
				background: url(../i/bouton-decouvrir.jpg) center left no-repeat;
			}
			ul#nav li a.collection{
				width: 79px;
				background: url(../i/bouton-collection.jpg) center left no-repeat;
			}
			ul#nav li a.services{
				width: 69px;
				background: url(../i/bouton-services.jpg) center left no-repeat;
			}
			ul#nav li a.contacts{
				width: 71px;
				background: url(../i/bouton-contact.jpg) center left no-repeat;
			}
			ul#nav li a:hover, ul#nav li a:active{background-position: bottom left}
	
body#presentation div#header, body#mentions div#header{background:url(../i/logo-presentation.png) top left no-repeat}
body#presentation ul#nav li a.presentation{background-position: top center}

body#decouvrir div#header{background:url(../i/logo-decouvrir.png) top left no-repeat}
body#decouvrir ul#nav li a.decouvrir{background-position: top center}

body#collection div#header{background:url(../i/logo-collection.png) top left no-repeat}
body#collection ul#nav li a.collection{background-position: top center}

body#services div#header{background:url(../i/logo-services.png) top left no-repeat}
body#services ul#nav li a.services{background-position: top center}

body#contacts div#header{background:url(../i/logo-contact.png) top left no-repeat}
body#contacts ul#nav li a.contacts{background-position: top center}

/* Fin HEADER */

/* CONTENU */


	div#fond-contenu div#contenu{
		width: 710px;
		margin: 0 auto;
		display: none;
		}
		div#fond-contenu div#contenu h1{
			text-indent: -9999px;
			display: block;
			background: url(../i/titre-esprit.png) 0 50px no-repeat;
			height: 79px;
			width: 118px;
			margin-left: 23px;
		}
		div#fond-contenu div#contenu p{
			padding: 10px 0 10px 23px;
			color: #555;
			text-align: justify;
			width: 300px;
		}
	div#fond-contenu div#fenetre{
		display:none;
		margin: 0 auto;
		width: 720px;
		height: 460px;
		background: url(../i/fenetre-ombre.png) right 20px no-repeat;
		}
		body#contacts div#fond-contenu div#fenetre{background-image: url(../i/fenetre-ombre-contact.png)}
		div#fond-contenu div#fenetre a{
			text-decoration: underline;
			color: #9d9d9c;
		}
		div#fond-contenu div#fenetre a:hover{text-decoration: none}

		div#fond-contenu div#fenetre h1{
			margin: 0 0 0 30px;
			width: 140px;
			height: 100px;
			background: url(../i/titre-decouvrir.png) left 48px no-repeat;
			text-indent: -9999px;
		}
		
		div#fond-contenu div#fenetre h1#collection{background-image:url(../i/titre-collection.png)}
		div#fond-contenu div#fenetre h1#services{background-image:url(../i/titre-services.png)}
		div#fond-contenu div#fenetre h1#contact{background-image:url(../i/titre-contact.png)}
		div#fond-contenu div#fenetre h1#mentions{background-image:url(../i/titre-mentions.png); width: 250px;}
		
		div#fond-contenu div#fenetre a#site-marque{
			display: block;
			float: right;
			width: 222px;
			height: 57px;
			text-indent: -9999px;
			margin: 43px 150px 0 0;
		}
		
		div#fond-contenu div#fenetre a.dedon{background: url(../i/collection/marques/dedon.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.royal-botania{background: url(../i/collection/marques/royal-botania.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.driade{background: url(../i/collection/marques/driade.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.ego{background: url(../i/collection/marques/ego.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.fermob{background: url(../i/collection/marques/fermob.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.glatz{background: url(../i/collection/marques/glatz.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.gloster{background: url(../i/collection/marques/gloster.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.sifas{background: url(../i/collection/marques/sifas.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.versus{background: url(../i/collection/marques/versus.png) bottom right no-repeat}
		div#fond-contenu div#fenetre a.xlboom{background: url(../i/collection/marques/xlboom.png) bottom right no-repeat}
	
		div#fond-contenu div#fenetre a#site-marque:hover{background-position: top right}
	
		div#fond-contenu div#fenetre a#retour{
			display: block;
			position: relative;
			top: -41px;
			left: 155px;
			width: 71px;
			height: 28px;
			background: url(../i/bouton-retour.jpg) bottom left no-repeat;
			text-indent: -9999px;
			margin-bottom: -28px;
			}
			div#fond-contenu div#fenetre a#retour:hover{background-position: top left}
		div#fond-contenu div#fenetre h2#modele{
			display: block;
			position: relative;
			top: -25px;
			left: 30px;
			background: url(../i/bande-transparent.png) 0 0 repeat-x;
			height: 25px;
			width: 530px;
			color: #000;
			z-index: 2;
			font-size: 1.1em;
			line-height: 25px;
			padding-left: 10px;
			font-weight: normal;
		}
				
			div#fond-contenu div#fenetre div#textes-fenetre{
				width: 680px;
				height: 350px;
				margin-left: 30px;
				overflow: auto;
				}
				div#fond-contenu div#fenetre div#textes-fenetre p{
					margin: 0 0 10px 0;
					text-align: justify;
					width : 655px;
					color: #9d9d9c;
				}
				div#fond-contenu div#fenetre div#textes-fenetre h2{
					font-size: 1.4em;
					padding: 0;
					color: #0199d8;
				}
				body#contacts div#fond-contenu div#fenetre div#textes-fenetre h2{
					color: #666;
				}
				body#mentions div#fond-contenu div#fenetre div#textes-fenetre h2{
					color: #f90;
				}
				div#fond-contenu div#fenetre div#textes-fenetre strong{color: #666}
				

	
	div#fond-contenu img#photo{margin-left: 30px}
	
		div#fond-contenu div#vignettes{
			float: right;
			width: 130px;
			height: 330px;
			}
			div#fond-contenu div#vignettes img{
				border: 1px solid #9d9d9c;
				float: left;
				margin: 0 20px 16px 0;
			}
		 ul#nav1, ul#nav2{
			 width: 670px;
			 height: 130px;
			 background: url(../i/collection/nav-haut.jpg) 0 0 no-repeat;
			 margin: 0 0 30px 32px;
			 }
			 ul#nav2{
				 clear: left;	 
				 background-image:url(../i/collection/nav-bas.jpg);
			 }
			 ul#nav1 li a, ul#nav2 li a{
				 float:left;
				 width:120px;
				 display:block;
				 text-indent: -9999px;
				 margin: 0 12px 0 0;
				 height: 130px;
				 background: url(../i/collection/rollover.png) 85px 0 no-repeat;
			 }
			 ul#nav1 li a:hover, ul#nav2 li a:hover{background-position: 0 0;}

		
			
/* fin CONTENU */

/* FOOTER */

div#footer{
	/*position: absolute;
	bottom: 0;
	left: 0;*/
	width: 100%;
	}
	div#footer p{
		margin: 0 auto;
		color: #9d9d9c;
		text-align: center;
		padding: 10px 0 0 5px;
		}
		div#footer p a{
			color: #9d9d9c;
			text-decoration: none;
		}
		div#footer p a:hover{text-decoration: underline}