@charset "UTF-8";
/* CSS Document by dAvydAv on 2007/16/10 */

@import url(css/intro.css);

@import url(css/nav.css);
@import url(css/menu.css);

@import url(css/contenu.css);
@import url(css/divers.css);
@import url(css/product.css);
@import url(css/cart.css);

@import url(css/compte.css);

@import url(css/lightbox.css);
@import url(css/ultrapics.css);



/*==========================================
General§
------------------------------------------*/

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	margin:0;
	padding: 0;
	background-color: #003366;
	background: url(images/design/bg_body.jpg) repeat;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #333333;
	min-height: 100%;
}

hr {
  visibility: hidden;
}

.spacer { clear:both;
 visibility:hidden;}

h6, h5, h4, h3, h2, h1  { margin: 0; padding: 0;}
h4 { font-size: 1em; }
h5{
color:#003366;
font-style:italic;
}
h2, h3 {
color: #003366;
font-weight: normal;}

span {
	font-weight: bold;
	}



#cadre { /* taille du cadre, à titre d'exemple */
	background-color: #ffffff;
	width: 955px;
	text-align: left;
	margin: 0 auto 10px auto;
	padding: 0;
	background-image: url(images/design/top.jpg);
	background-repeat:no-repeat;
	background-position: top right;	
	position: relative;
	border: solid 2px #003366;
	min-height: 95%; 
	}
	/*L'utilisation de position: relative; sur #cadre définit les frontières de l'élément #cadre comme point de repère pour le positionnement de ses enfants. La position "top: 0px, left: 0px" est maintenant le coin supérieur gauche de #cadre, au lieu de celui de body.*/
/* ----------------------------------------------------- */
/* ------------------------- TOP ------------------ */
/* ----------------------------------------------------- */

#onthetop {
	width: 955px; 
	height: 16px;
	margin: 0 auto 0 auto;
	padding: 5px 0 0 0;
	color: #CCCCCC;
	text-align: left;
	font-size: 8pt;
		
	}
#onthetop ul, #onthetop li{
	display: inline;
	}
#onthetop a{
	display: inline-block;
	color: #CCCCCC;
	text-decoration: none;
	}

#onthetop a:hover{
	color: #FFFFFF;
}
#onthetop .contactnous{
	background: url(images/design/contact.gif) no-repeat left center;
}
#onthetop .contactnous span{
	padding: 0 0 0 20px;
	font-weight: normal;
}	
/*==========================================
entete
------------------------------------------*/
div#top {
	padding:0; margin:0;
	height: 150px;
	}
	

div#top h1 {
	height: 100px;
	width: 200px;
	/*display: block;*/
	/*background-image: url(images/design/p_et_c_logo.png);
	background-repeat: no-repeat;*/
	position: relative;
	margin: 5px 0 5px 20px;
	padding:0;	
}

/*=========================================
accueil
=======================================*/

ul#gamme {
	width:100%;
	margin: 0 5px 10px 5px;
	padding: 0;
	text-align: center;
	list-style-type: none ;
	
/* Suppression du margin, du padding et des puces du <ul> */
}
ul#gamme li {
	margin: 2px 4px 2px 4px;
	padding: 0;
	/*background: #cccccc;*/
	float: left;
	}
#gamme01, #gamme02, #gamme03, #gamme04,#gamme05, #gamme06 {
	}
ul#gamme li a{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 175px; 
	height: 100px;
	text-indent: 40px ; /* On décale le texte de 40px du bord gauche */
	text-decoration: none ;
	padding:0; margin:0;	
}

#gamme01 a{
	background: url(images/gammes/gamme01.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme02 a{
	background: url(images/gammes/gamme02.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme03 a{
	background: url(images/gammes/gamme03.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme04 a{
	background: url(images/gammes/gamme04.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme05 a{
	background: url(images/gammes/gamme05.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme06 a{
	background: url(images/gammes/gamme06.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme07 a{
	background: url(images/gammes/gamme07.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme08 a{
	background: url(images/gammes/gamme08.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme09 a{
	background: url(images/gammes/gamme09.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}

#gamme01 a:hover {
	background: url(images/gammes/gamme01.jpg) no-repeat 0 -100px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
}
#gamme02 a:hover{
	background: url(images/gammes/gamme02.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme03 a:hover{
	background: url(images/gammes/gamme03.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme04 a:hover{
	background: url(images/gammes/gamme04.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme05 a:hover{
	background: url(images/gammes/gamme05.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme06 a:hover{
	background: url(images/gammes/gamme06.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme07 a:hover{
	background: url(images/gammes/gamme07.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme08 a:hover{
	background: url(images/gammes/gamme08.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
#gamme09 a:hover{
	background: url(images/gammes/gamme09.jpg) no-repeat 0 -100PX ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
}
ul#gamme span{
	display: none;
	}




/*==========================================
pied
------------------------------------------*/

#footer {
	clear: both;
	height: 45px;
	margin: 0;
	padding: 2px 10px 2px 0;
	text-align: center;
	color: #333333;
	background: url(images/design/footer.png) repeat-x 0;
	
}

#footer a { 
	color: #003366 ;
}

#footer a:hover {
	color: #ff3300;
}

/*==========================================
index
------------------------------------------*/
/*#Page_index #contenu  h1{
	display: none;
}*/

#Page_contact_us #contenu h1.french{
	background: url(images/design/side_contact.png) left top no-repeat;	
 }

#Page_index p{
	margin: 0 10px 0 10px;
}
#Page_index p a {
	text-decoration: none;
}
#Page_index p a span{
	color: #ff6600;
	}
#Page_index p a:hover, #Page_index p a span:hover{
	color: #FF3300;
}

#print_pied {
	display: none;
}