/***********************************************/
/*				www.papilli.fr 				   */
/*		 Copyright(c)2006   www.menlog.com 	   */
/***********************************************/

body{
	font-family:Arial, Helvetica, sans-serif;
	color: #330099;
	margin: 0px;
	padding: 0px;
	background: #2D1E87 url("images/bgBody.gif") repeat-x top;
}


a img {border: none;}

.clear { clear: both; margin: 0; }


/************** Titres tag  **************/

h1{
 color: #FF9933;
 font-size:1.5em;
 margin: 0px;
 padding:0px 0px 0px 0px;
}

h2{
 font-size:1.1em;
 color: #FF9933;
 margin: 0px;
}

h3{
 font-size:1.2em;
 color: #2691E4;
 margin: 0px;
 padding: 0px;
}


h4{
 font-size:1.5em;
 color: #2691E4;
 margin:0;
 padding: 50px 0px 10px 0px;
 text-align:left;
}


h6{
 font-size:1em;
 color: #FF9933;
 margin: 0px;
 padding: 0px;
 font-weight:bold;
}

.separer{border-top:1px dotted #009EE0;}

/***********************************************/
/*  Divs                              		   */
/***********************************************/


div#Logo{
	width:900px;
	height:114px;
 	margin: auto;
	background: url("images/bgLogo.gif") no-repeat center;
}


#Logo .NavContact{
	padding:92px 0 0 0px;
	width:160px;
	float:right;
	color:#FFFFFF;

}


#Logo .NavContact  a:link, #Logo .NavContact a:visited{
	color:#FFFFFF;
	font-size:15px;
	text-decoration:none; 

}


#Logo .NavContact a:hover{
	text-decoration:underline;
}


div#Page{
	width:888px;
	margin: auto;
	background-color: #ffffff;
	padding: 6px;

}

div#Header{
	width:888px;
	height:177px;
	background: url("images/bgHeader.jpg");
}


#navHaut {
	padding:94px 0 0 61px;
	width:409px;
	height:67px;
}

#navHaut .presentation{
	padding:0px 0px 0px 0px;
	width:133px;
	height:49px;
}

#navHaut .presentation  a:link, #navHaut .presentation a:visited{
	display:block;
	float:left;
	width:133px;
	height:49px;
}


#navHaut .presentation a:hover{
	width:133px;
	height:49px;
	background-image:url(images/btPartOv.gif);
	background-color:#000066;
}


#navHaut .contact {
	padding-right:149px;
	float:right;
	width:108px;
	height:49px;
}


#navHaut .contact  a:link, #navHaut .contact a:visited{
	display:block;
	width:108px;
	height:49px;
}


#navHaut .contact a:hover{
	width:108px;
	height:49px;
	background-image:url(images/btProfOv.gif);
	background-color:#000066;
}


#offre {
	display:block;
	float:right;
	width: 122px;
	height:77px;
	padding:54px 139px 0 0px;

}

#offre  a:link, #offre a:visited{
	display:block;
	width:122px;
	height:77px;
}


#offre a:hover{
	display:block;
	width:122px;
	height:77px;	
	background-image:url(images/btOffrOv.gif);
	background-color:#000066;
}


div#Conteneur{
	width:888px;

}


div#Gauche {
	display:block;
	float:left;
	width: 222px;
	background: url("images/bgGauche.gif") repeat-y ;
	margin-top:2px;
}

#Gauche .photo{
	height:200px;
	padding-top:3px;
}


#bgNavGauche{
	font-size:13px;
	width:222px;
	background-image:url(images/bgNavG_P.gif);
	margin:0px;
	padding:0px;

}

#bgNavGauche .hautNav{
	height:13px;
	background:url(images/bgHeadNavG.gif) no-repeat;
	margin:0px;
	}


#bgNavGauche .finNavG{
background-image:url(images/finNavG.gif);
height:52px;

}

/****************Navigation produits***************/

#bgNavGauche h4{
	width:117px;
	height:16px;
	background: url(images/nosProd.gif) no-repeat;
	margin-left:90px;
}

#bgNavGauche .NavProduit{
	width:222px;
	margin:0px;
	padding:0px;
	margin-bottom:15px;
}




#bgNavGauche .NavProduit a, #bgNavGauche .NavProduit a:visited {
	position:relative;
	text-decoration:none; 
	color:#2B2B2B; 
	display:block; 
	width:180px;
	height:20px;
	border-bottom: 1px solid #CDCDCD;
	padding:0;
	margin:0.5em auto;
	background-color:#FFFFFF;
  }

#bgNavGauche .NavProduit a:hover {
	top:2px;
	left:2px;
	color:#FF9933;
	background-color:#E4F2CB;
  }


/***************navigation gauche generale********************/

#bgNavGauche .NavGeneral{
	top: 0;
	width:195px;
	height:239px;
	background-image:url(images/bgNavG_G.gif);
	background-repeat:no-repeat;
	margin-left:13px;
	padding:0px;
}


	#bgNavGauche .NavGeneral ul, #bgNavGauche .NavGeneral li {	/* utilisation de liste pour le menu */
	list-style-type: none;	/* suppression des puces de liste */
	margin:0;
	padding:0;
	}
	#bgNavGauche .NavGeneral ul {
	}
	#bgNavGauche .NavGeneral li {float: left;}

	#bgNavGauche .NavGeneral li a {	/* dimensions et définitions des boutons */
	display: block;	/* mise en block de <a> pour lui donner des dimensions */
	height: 60px;
	width: 195px;
	text-decoration: none;
	}
	#bgNavGauche .NavGeneral	li a:hover {
	background: url(images/bgNavG_GO.gif) top left no-repeat;
	}
	#bgNavGauche .NavGeneral	a#menu1:hover {
	background-position: 0% 0px ;	/* décalage de l'arrière-plan pour chaque bouton */
	}
	#bgNavGauche .NavGeneral	a#menu2:hover {
	background-position: 0% -60px;
	}
	#bgNavGauche .NavGeneral	a#menu3:hover {
	background-position: 0% -120px;
	}
	#bgNavGauche .NavGeneral	a#menu4:hover {
	background-position: 0% -180px;
	}


/******************************************************************************************/
div#content {
	margin-left: 222px;
	margin-right: 190px;
	margin-top:30px;
	height:inherit;
	padding: 0px 0px 0px 20px;
}

#content .conseil{
	width:416px;
	height:125px;
	padding-top:9px;
	padding-left:10px;
	background:url(images/fdConseils.gif) no-repeat;
}

#content .navigPlan{
	padding-top:10px;
	padding-bottom:10px;
	padding-left:15px;
	font-size:12px;
	text-align:left;
}


#content .p{
	font-size:0.8px;
}

#content hr{
	width: 100%;
	border: 0; 
	border-bottom: 1px #666666 dotted;
 	height: 1px; /* pour IE */
}


#content a:link, a:visited{
	/*color: #2691E4;*/
	color:#FF6600;
	text-decoration: underline;
}

#content a:hover{
	color: #FFF;
	background-color:#C2E188;
}

	.articles {
		margin: 20px 40px 25px 0px;
		padding: 10px 0 0 0;
		text-align: justify;
		border-bottom: 1px dotted #ccc;
		font-size:0.8em;
	}
	
	.calendar { height: 50px;float: left; background: #fff url(images/calendar.gif) no-repeat; width: 50px; padding: 8px 0 0 7px;  color: #808080; margin-top:25px;}
	.calendar p { padding: 0; margin: 0; }
	.description { padding: 0 0 2px 0; margin: 0 10px 5px 0; border-bottom: 1px dotted #ccc; font-size:1.2em; font-weight:bold; }
	.thumbnail { float: left; margin: 0 18px 8px 0; border: 1px solid #dedede; }



	.boxtop { height: 19px; background: #fff url(images/boxtop.gif) no-repeat; color: #000; }
	.box { background: #fff url(images/box.gif) no-repeat bottom left; color: #5b5b5b; padding: 0 50px 15px 10px; margin: 0 0 10px 0; }
	.box p { padding: 0; margin: 0; font-size:0.8em; }
	.imageOf {   
	border : 1px solid #d3d3d3;
	margin-bottom : 15px;
	padding:10px;
	}


	/*.boxtop02 {
	background: #fff url(images/boxtop02.gif) no-repeat;
	font-size:1.2em;
	color:#fff;
	font-weight:bold;
	padding: 2px 0 0 20px;
	margin:0px;
	}*/
	

	.boxtop02 {
	background: #fff url(images/boxtop02.gif) repeat-y ;
	font-size:1.2em;
	color:#fff;
	margin:0px;
	padding: 2px 0 0 20px;
	}
	.box02 {background: #fff url(images/fdbox02.gif) repeat-y ; padding: 0 50px 15px 10px; margin: 0 0 0px 0; }
	.box02 p { padding: 0; margin: 0; font-size:0.8em; }
	.imageOf02 {   
	border : 1px solid #d3d3d3;
	margin: 0 10px 10px 0px;
	padding:5px;
	float: left;
	}
	.finbox02 {
	background: #fff url(images/finbox02.gif) no-repeat ;
	width:420px;
	height:56px;
	padding: 0px;
	margin:0px;
	}


.Fgeneral{
color:#003399;
font-size:0.9em;
}


	.bouton {  padding: 4px 3px 0 0; margin:5px 0 0px 0; height:60px; text-align:left;}
	.boutonAc {  padding: 4px 3px 0 0; margin:10px 0 20px 0;text-align:right;}
	

	
	
	.offre {color:#FF6600;font : bold 1em "Tahoma", verdana, Arial;}
	.offre02 {color:#FF6600;font : bold 1.1em "Tahoma", verdana, Arial;}
	

	.detailO { background: #fff url(images/orangebtn.gif) no-repeat; padding: 7px 20px 13px 25px; }
	.detailO a { background: #fff url(images/orangebtn.gif) no-repeat; padding: 7px 20px 13px 25px;}
	
	.detailV { background: #fff url(images/vertbtn.gif) no-repeat; padding: 7px 20px 13px 25px; }
	.detailV a { background: #fff url(images/vertbtn.gif) no-repeat; padding: 7px 20px 13px 25px;}
	
	#produits {  border-top:1px dotted #333; margin:50px 0px 0px 0px; padding-top:10px;}
	#produits p{ color:#0066CC; font-size:0.9em;}
	#produits h1{ color:#FF6600; font-size:0.9em;}
	#produits h2{ color:#003399;font-size:0.9em;}
	#produits .cond{ margin-top:10px;font-weight:bold; font-size:small; color:#0066CC;}
	#produits .imgProd{ margin: 0px 10px 0px 0px; padding:5px;}
	.imgP{border : 1px solid #d3d3d3;padding:5px;}
	#produits .panier01{height:80px; width:69px;}


	.prix {
	color : #93D321;
	font : bold 1.5em "Tahoma", verdana, Arial;
	padding : 15px 35px 0 0;
	float : right;
	text-align : right;
	}
	
	.prix02 {
	border : 1px dotted #d3d3d3;
	color : #93D321;
	font : bold 1.1em "Tahoma", verdana, Arial;
	padding : 10px 10px 5px 5px;
	margin:8px;
	float : right;
	text-align : right;
	}


	.prix03 {
	border : 1px dotted #d3d3d3;
	color : #93D321;
	font : bold 1.1em "Tahoma", verdana, Arial;
	padding : 10px 10px 5px 5px;
	margin:8px;
	text-align : right;
	float:left;
	}
	
	
	.prixPromo {
	border : 1px dotted #d3d3d3;
	color:#FF9900;
	font : bold 1.1em "Tahoma", verdana, Arial;
	padding : 10px 10px 5px 5px;
	margin:8px;
	float : right;
	text-align : right;
	}


	.prixPromo02 {
	border : 1px dotted #d3d3d3;
	color:#FF9900;
	font : bold 1.1em "Tahoma", verdana, Arial;
	padding : 10px 10px 5px 5px;
	margin:8px;
	float : left;
	text-align : right;
	}


		

	


.infoPlus{
margin:10px 0px 0px 0px;
color:#003399;

font-size:14px;
}

/**************formulaires****************/

.orange{ color:#FF6600; font-weight:bold;}



.stylefieldset {
width:400px; 
display:block;
font-size: 76%; 
border:1px dotted  #333399; 
padding:5px; 
margin-bottom:0.5em; 
margin-left: 13px;
line-height:1.2em;
}


.styleLegend {
font-size:1.1em; 
font-weight:bold; 
color: #4d89ff;
margin: 0 0 5px 10px; 
height: 24px;
line-height: 24px;
width:300px; 
border: 1px solid  #333399;
padding: 0 5px;
background-color:#FFFFFF;

}

.styleLabel {
clear:left; 
display:block; 
float:left; 
width:100px; 
text-align:right; 
padding-right:10px; 
color: #003399; 
margin-bottom:0.5em;
}

.styleInput {
border:1px solid #333399;
padding:0 2px; 
margin-bottom:0.3em;
background-color:#CCE0FF;
}

.styleSelect {
margin-left:0.0em;
width:200px;
}

.styleTextarea {
width:320px; 
height:auto;
border:1px solid #003399; 
padding:0.5em; 
overflow:auto; 
}

.styleOption {
background:#003399; 
color:#fff;
}

.bouton1 {
color:#003399;
font-weight: bold;
display: inline;
width:89px; 
height: 27px;
line-height: 27px;
text-align: center;
margin-left: 11.5em
}

.bouton2 {
color:#003399;
font-weight: bold;
display: inline;
width:150px; 
height: 27px;
line-height: 27px;
text-align: center;
}


/**************textInfo1****************/
.textInfo1{
	padding: 0px 15px 10px 20px;
	font-size: 90%;
}
/*html>body .textInfo1 {height: auto;}*/
.textInfo1 p{
	text-align:justify;
}

.textInfo1 img{
	padding: 0px 10px 0px 0px;
}


/****************prixPanier**************/


/***************navigation droite********************/
div#Droite {
	display:block;
	float:right;
	width: 190px;
	font-size:11px;
	background: url(images/bgNavD.gif) top left no-repeat;
	margin-top:20px;
}

#Droite a:link{
	color: #393939;
	text-decoration: underline;
	/*background-color:#E4F2CB;*/
}

#Droite a:hover{
	color: #FFFFFF;
	background-color:#C2E188;
	text-decoration: none;
}

#Droite .compte{
	margin:50px 0 50px 30px;
	height:110px;
}

#Droite .HautPanier{
	width:182px;
	height:47px;
	margin:30px 0px 0px 7px;
	background-image:url(images/hautPanier.gif);
	background-repeat:no-repeat;
}

#Droite .ProdPanier{
	padding:0px 0px 0px 11px;
	font-size:11px;
	width:167px;
	margin:0px 0px 0px 7px;
	background-image:url(images/bgPanier.gif);
	background-repeat:repeat-y;
}

#Droite .FinPanier{
	padding:0px 0px 0px 20px;
	width:160px;
	height:48px;
	margin:0px 0px 0px 7px;
	background-image:url(images/finPanier.gif);
	background-repeat:repeat-y;
}


/***************navBas********************/
div#navBas {
	font-size:13px;
	text-align:center;
	color:#333;
	background-color: #D4EEFB;
	padding:3px;
}


#navBas  a:link, #navBas a:visited{
	color: #0F69E9;
	text-decoration: none;
}

#navBas a:hover{
	color: #00A6EB;
	text-decoration: underline;
}



/***************pied********************/
div#pied {
	font-size:11px;
	text-align:center;
	color:#FFFFFF;
	background-color: #0F69E9;
	padding:3px;
}


#pied p a:link, #pied p a:visited{
	color: #4ABBFF;
	text-decoration: underline;
}

#pied p a:hover{
	color: #FFFFFF;
	text-decoration: none;
}








/**
 * POPUP CONTAINER STYLES
 */


#popupMask {
	position: absolute;
	z-index: 200;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	opacity: .4;
	filter: alpha(opacity=40);
	/* this hack is so it works in IE
	 * I find setting the color in the css gives me more flexibility 
	 * than the PNG solution.
	 */
	background-color:transparent !important;
	background-color: #333333;
	/* this hack is for opera support
	 * you can uncomment the background-image if you don't care about opera.
	 * this gives you the flexibility to use any bg color that you want, instead of the png
	 */
	background-image/**/: url("maskBG.png") !important; // For browsers Moz, Opera, etc.
	background-image:none;
	background-repeat: repeat;
	display:none;
}
#popupContainer {
	position: absolute;
	z-index: 201;
	top: 0px;
	left: 0px;
	display:none;
	padding: 0px;
}
#popupInner {
	border: 2px solid #000000;
	background-color: #ffffff;
}

#popupFrame {
	margin: 0px;
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 202;
}
#popupTitleBar {
	background-color: #486CAE;
	color: #ffffff;
	font-weight: bold;
	height: 1.3em;
	padding: 5px;
	border-bottom: 2px solid #000000;
	border-top: 1px solid #78A3F2;
	border-left: 1px solid #78A3F2;
	border-right: 1px solid #204095;
	position: relative;
	z-index: 203;
}
#popupTitle {
	float:left;
	font-size: 1.1em;
}
#popupControls {
	float: right;
	cursor: pointer;
	cursor: hand;
}

/* css menu for carole */
/* This style sheet is intended to contain RARELY CHANGED rules used when the Menu control adapter is enabled. */
/* These rules correspond to the "pure CSS menu" technique that have been evolving over the past several years. */ 
/* See WhitePaper.aspx for details. */

ul.AspNet-Menu 
{
    position: relative;
}


ul.AspNet-Menu, 
ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;

}

ul.AspNet-Menu li
{
    position: relative;
    list-style: none;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}

ul.AspNet-Menu ul
{
    position: absolute;
    display: none;    
}

/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li:hover ul ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul ul
{
    display: none;
}

/* Add more rules here if your menus have more than three (3) tiers */
ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    display: block;
}



/* This style sheet is intended to contain OFTEN CHANGED rules used when the Menu control adapter is enabled. */

/* When the Menu control's Orientation property is Vertical the adapter wraps the menu with DIV */
/* whose class is AspNet-Menu-Vertical. */
/* Note that the example menu in this web site uses relative positioning to force the menu to occupy */
/* a specific place in the web page.  Your web site will likely use a different technique to position your */
/* menu.  So feel free to change all the properties found in this CSS rule if you clone this style sheet. */
/* There is nothing, per se, that is magical about these particular property value choices.  They happen to */
/* work well for the sample page used to demonstrate an adapted menu. */


.PrettyMenu
{
    top: 0;
	width:195px;
	margin-left:13px;
	padding:0px;
	margin-bottom:20px;
}

.PrettyMenu .AspNet-Menu-Vertical
{
    /* color: #545454;*/
	position:relative;
    top: 0px;
    left: 0;
    z-index: 100;
}

/* The menu adapter renders an unordered list (ul) in HTML for each tier in the menu. */
/* So, effectively says: style all tiers in the menu this way... */
.PrettyMenu ul.AspNet-Menu, 
.PrettyMenu ul.AspNet-Menu ul
{
    width: 196px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 10pt;

       
}

/* This rule effectively says: style all tiers EXCEPT THE TOP TIER in the menu this way... */
/* In other words, this rule can be used to style the second and third tiers of the menu without impacting */
/* the topmost tier's appearance. */
.PrettyMenu ul.AspNet-Menu ul
{
    left: 194px;
    top: 3px;
    background:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 8pt;

}





/* The menu adapter generates a list item (li) in HTML for each menu item. */
/* Use this rule create the common appearance of each menu item. */
.PrettyMenu ul.AspNet-Menu li
{
    background: url(bgMenuProd01.gif) repeat-x;
	line-height: 30px;
	height: 30px;
	margin:0 2px 0px 0;
  
}

.PrettyMenu ul.AspNet-Menu li a img
{
    border-style: none;
    vertical-align: middle;
}



/* Within each menu item is a link or a span, depending on whether or not the MenuItem has defined it's */
/* NavigateUrl property. By setting a transparent background image here you can effectively layer two images */
/* in each menu item.  One comes from the CSS rule (above) governing the li tag that each menu item has. */
/* The second image comes from this rule (below). */
.PrettyMenu ul.AspNet-Menu li a,
.PrettyMenu ul.AspNet-Menu li span
{
	background: transparent url(arrow.gif) right center no-repeat;
    padding-left:10px;
    display:block;
}


/*background: transparent url(arrow.png) right center no-repeat;*/ 
		     

/* When you hover over a menu item, this rule comes into play. */
/* Browsers that do not support the CSS hover pseudo-class, use JavaScript to dynamically change the */
/* menu item's li tag so it has the AspNet-Menu-Hover class when the cursor is over that li tag. */
/* See MenuAdapter.js (in the JavaScript folder). */
.PrettyMenu ul.AspNet-Menu li:hover, 
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Hover
{
	/*background-image: none;*/
	color:#fff;/* orange*/
	background: #FF6600 url(arrow-active.gif) right center no-repeat;
}



/* When a menu item contains no submenu items it is marked as a "leaf" and can be styled specially by this rule. */
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a,
.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf span
{
 	background: url(bgMenuProd02.gif) repeat-x;

}


/* While you hover over a list item (li) you are also hovering over a link or span because */
/* the link or span covers the interior of the li.  So you can set some hover-related styles */
/* in the rule (above) for the li but set other hover-related styles in this (below) rule. */
.PrettyMenu ul.AspNet-Menu li a:hover,
.PrettyMenu ul.AspNet-Menu li span.Asp-Menu-Hover
{
    color:#fff;/* bleu*/

}

.PrettyMenu ul.AspNet-Menu li.AspNet-Menu-Leaf a:hover
{
	background-color:#3399FF;
    background-image: none;
}