/* -------------------------------------------------------
 	1. Principal
 ------------------------------------------------------- */
body 
{
color : #444;
font : 85%/1.0 Arial, "Trebuchet MS", "Lucida Grande", "Lucida Sans", Tahoma, Arial, 'Helvetica Neue', Helvetica, Geneva, Lucida, sans-serif;
margin : 0;
text-align : center;
background-image : url(images/background.png);
background-repeat : repeat;
}

#page 
{
position : relative;
text-align : left;
margin : 2em auto;
padding : 0;
width : 780px;
}

/* -------------------------------------------------------
 	2. Menu
------------------------------------------------------- */

#menu 
{
width : 779px;
height : 32px;
position : relative;
z-index : 100;
font-family : arial, sans-serif;
}

html > body #menu 
{
margin-bottom : -22px;
}

* html #menu  /* hack to correct IE5.5 */
{
width : 779px;
width : 778px;
margin-bottom : -2px;
}

#menu ul  /* remove bullets, borders and padding from the default list styling */
{
padding : 0;
margin : 0;
list-style-type : none;
}

#menu li /* float list to make it horizontal - control dropdown menu positon */
{
float : left;
position : relative;
}

#menu a, #menu a:visited  /* style links top level */
{
width : 85px;
display : block;
font-size : 11px;
text-align : center;
text-decoration : none;
color : #fff;
height : 32px;
line-height : 29px;
font-weight : bold;
}

#menu #currentpage a 
{
background : #859c68;
border-bottom : 1px solid #859c68;
border-top : 1px solid #663300;
border-left : 1px solid #663300;
border-right : 1px solid #663300;
}

* html #menu a, * html #menu a:visited  /* hack to correct IE5.5 faulty box model */
{
width : 96px;
width : 85px;
font-size : 11px;
padding-right : 0;
padding-left : 0;
}


#menu ul ul  /* hide sub levels and give them a positon absolute so that they take up no room */
{
visibility : hidden;
position : absolute;
top : 32px;
left : 0;
width : 149px;
border-top : 1px solid #663300;
}

* html #menu ul ul  /* another hack for IE5.5 */
{
top : 30px;
top : 31px;
}

#menu table  /* style the table so that it takes no ppart in the layout - required for IE to work */
{
position : absolute;
top : 0;
left : 0;
border-collapse : collapse;
}

#menu ul ul a, #menu ul ul a:visited, #menu #currentpage ul ul a, #menu #currentpage ul ul a:visited  /* style the submenu links */
{
background : #f1e692;
color : #000;
height : auto;
line-height : 1em;
padding : 5px 10px;
width : 128px;
border-width : 0 1px 1px 1px;
border-right : 1px solid #663300;
border-left : 1px solid #663300;
border-bottom : 1px solid #663300;
}

#menu #currentpage ul a, #menu #currentpage ul a:visited 
{
background : #f1e692;
color : #000;
height : auto;
line-height : 1em;
padding : 5px 10px;
width : 128px;
border-width : 0 1px 1px 1px;
}

* html #menu ul ul a, * html #menu ul ul a:visited   /* hack for IE5.5 */
{
width : 150px;
width : 128px;
}

#menu a:hover, #menu #currentpage a:hover, #menu #currentpage ul a:hover 
{
color : #000;
background : #b7d186;
border : 1px solid #663300;
}

#menu ul ul a:hover   /* style the submenu hover */
{
color : #000;
background : #b7d186;
border : 1px solid #663300;	
}


#menu :hover > a     /* style the menu hover */
{
margin-top:-1px;
color : #000;
background : #fffccc;
border : 1px solid #663300;
}

#menu ul li:hover ul, #menu ul a:hover ul  /* make the second level visible when hover on first level */
{
visibility : visible;
}

/* -------------------------------------------------------
 	3. SubMenu
------------------------------------------------------- */

#submenu1
{
	background-image : url(images/sousmenubar1.jpg);
	background-repeat:no-repeat;
	width:305px;
	height:40px;
	margin:auto;
	margin-top:35px;
}

#submenu2
{
	background-image : url(images/sousmenubar2.jpg);
	background-repeat:no-repeat;
	width:500px;
	height:40px;
	margin:auto;
	margin-top:10px;
}

#submenu
{
	background-image : url(images/sousmenubar.jpg);
	background-repeat:no-repeat;
	width:500px;
	height:40px;
	margin:auto;
	margin-top:36px;
}

* html #submenu  /* hack IE 6 and below */
{
	margin-top:36px;
	
}

html >/**/body #submenu  /* For non IE browser only */
{
	margin-top:0px;
}

* html #submenu2 /* hack IE 6 and below */
{
	margin-top:0px;
	
}

html >/**/body #submenu1 /* For non IE browser only */
{
	margin-top:0px;
}

.submenu li
{
	list-style-type : none;
	Display: inline;
}

.submenu 
{
padding-top:12px;
margin-left:-8px;
}

html >/**/body .submenu  /* For non IE browser only */
{
	margin-left:-50px;
}

.submenu  a
{
color:white;
text-decoration:none;
}

.submenu  a:hover
{
color:#990000;
}


.liblack
{
color:black;
}


/* -------------------------------------------------------
 	3. Header
------------------------------------------------------- */

#header 
{
background-image : url(images/header_left.jpg);
background-repeat : no-repeat;
background-position : left bottom;
height : 160px;
position : relative;
margin : -29px 0 0 0;
padding : 0;
border-width : 0;
background-color : #787878;
overflow : hidden;
z-index : 10;
}

#header a.site_name, #header a.site_name:link, #header a.site_name:visited 
{
display : block;
position : relative;
top : 0;
left : 0;
width : 100%;
height : 100%;
font-family : 'Lucida Sans Unicode', Verdana, Tahoma, "Lucida Grande", "Lucida Sans", Arial, 'Helvetica Neue', Helvetica, Lucida, Geneva, sans-serif;
text-decoration : none;
color : #006600;
font-size : 2em;
font-weight : bold;
padding : 0;
background-color : transparent;
background-repeat : no-repeat;
background-position : right top;
}

#header a.site_name:hover 
{
color : #009900;
}

#header .site_name span  /* position of the site's name  */
{
display : block;
position : absolute;
bottom : 48px;
margin-left : 250px;
}

/* -------------------------------------------------------
 	4. Twitter, Facebook
------------------------------------------------------- */ 

.facebook
{
display:inline;
font-style:italic;
margin-left:-500px;
color:#fff;
}

#facebooktwitter
{

}

#addthis
{

margin-left:650px;
margin-top:-18px;
}


#org
{

margin-left:333px;
margin-top:-33px;
}




/* -------------------------------------------------------
 	4. Main
------------------------------------------------------- */ 

#main 
{
position : relative;
border: 1px solid #663300;
background-image : url(images/background_main.png);
background-repeat : no-repeat;
background-color : #ffffdf;
padding: 20px 80px 0px 80px;
z-index : 13;
min-height : 630px;
}

* html #main   /* For IE6 and before only */
{
width : 617px;
}

html > body #main  /* For non IE browser only */
{
margin : 22px 0 30px 0;
}

* html  #main	/* For IE6 and before only */
{
height: 630px; 
margin: 0px 0px 30px 0px;
}

#main 
{
text-align : justify;
text-indent : 20px;
line-height : 120%;
}

#main td 
{
text-align : justify;
text-indent : 20px;
line-height : 120%;
}

.soustitre  /*Subtitle on most pages*/
{
color : #996600;
}

.soussoustitre  /*2nd Subtitle on most pages - for menu links in "poducts", "Learn more" and "ingredients"*/
{
color : black;
text-decoration : none;
}

.titre  	/*title on most pages*/
{
color : #336600;
border-bottom : 1px solid #996600;
text-align:center;
}

.align
{
text-align:center;
margin:auto;
}

.align2
{
text-align:center;
margin:auto;
margin-left:-65px;
}

.align3
{
text-align:center;
margin:auto;
margin-left:25px;
}

.green_underline  
{
color : #005300;
text-decoration:underline;
text-indent:40px;
margin-bottom:5px;
padding-bottom:1px;
}

.green
{
color :green ;
font-style:italic;
text-indent:60px;
margin-bottom:0px;
padding-bottom:0px;
}

#sousmenu  /* Used for first subtitle on "poducts", "Learn more" and "ingredients */ 
{
text-decoration : none;
text-align:center;
}

#sousmenu a:hover 
{
text-decoration : underline;
}

h3 a  /*For the What is a chemical page */
{
text-decoration : none;
color:#996600;
}

h3 a:hover /*For the What is a chemical page */
{
text-decoration : underline;
color:#996600;
}

.align  a img
{
border: none;
}	

.list ul 
{
list-style-type:circle;
}

.image a:hover
{
background-color:#6a773f;
}

a
{
color:#006699;
text-decoration:underline;
}

a:hover
{
color:#009900;
text-decoration:underline;
}

a img
{
border:none;
}

.scents
{
margin-left:-56px;
}


/* -------------------------------------------------------
 	5. Homepage
------------------------------------------------------- */ 

#welcome  /*Wlecome Message*/
{
float : right;
padding-top : 50px;
float : right;
width : 330px;
text-align : center;
}

#dict /* Section where we explain the name of the brand*/
{
margin-top : 30px;
width : 400px;
padding : 10px;
margin-left : -40px;
}

html > body #dict  /* For non IE browser only */
{
margin-top : 370px;
}

#imagehome   /*Picture Woman*/
{
float : left;
margin-top : 65px;
margin-left : -139px;
background-image : url(images/imagehome2.jpg);
width : 421px;
height : 280px;
}

* html #imagehome /* hack to correct IE5.5 faulty box model */
{
position : relative;
left : 80px;
}

* html #welcome /* hack to correct IE5.5 faulty box model */
{
position : relative;
margin-left:-50px;
}

* html #dict /* hack to correct IE5.5 faulty box model */
 {
position : relative;
margin-left:-50px;
}

#corner  /*Image right bottom corner with logo Naprodis*/
{
background-image : url(images/corner.jpg);
width : 305px;
height : 305px;
margin-left : 394px;
margin-top : -252px;
margin-bottom : -1px;
margin-right : -21px;
position : relative;
}

html > body #corner  /* For non IE browser only */
{
margin-left : 394px;
margin-top : -272px;
}

* html #corner
 {
position : relative;
margin-right:-81px;
}

/* -------------------------------------------------------
 	7. Pages - Products
------------------------------------------------------- */ 

#images_products  /*Picture products in database*/
{
float : left;
margin : 10px 10px 0 10px;
width : 100px;
height : 100px;
}

#pic 
{
width : 150px;
float : left;
}

#name_product 
{
width : 400px;
border : 1px solid #a08858;
padding : 10px;
}

/* -------------------------------------------------------
 	7. Pages - FAQ
------------------------------------------------------- */ 

#menufaq a 
{
color : #005300;
text-decoration : none;
}

#menufaq a:hover
{
color : black;
text-decoration : underline;
}

/* -------------------------------------------------------
 	8. Page - Get Educated
------------------------------------------------------- */ 
.red  /* Used for red subttle in "Get Educated" */ 
{
color : #cc3300;
font-style : italic;
font-size : 1.2em;
}

.comment  /* Used for small comments that strat with * "Get Educated" */ 
{
font-style : italic;
font-size : 0.9em;
}

/* -------------------------------------------------------
 	9. Page - Contact us
------------------------------------------------------- */ 

.logo 
{
background-image : url(images/logo.jpg);
width : 461px;
height : 461px;
margin : auto;
margin-top : 0;
margin-bottom : 30px;
}

/* -------------------------------------------------------
 	10. Footer
------------------------------------------------------- */ 

#footer 
{
position : relative;
width : 780px;
float : right;
height : 20px;
border : solid #ffffff;
border-width : 1px 0;
background : transparent;
color : #ffffff;
margin : 0;
padding-top : 5px;
}

.copyright
{
color : #ffffff;
width : 400px;
float : left;
}

.map 
{
float : right;
margin-top : 0;
}

.map a 
{
text-decoration : none;
color : #ffffff;
}

.map a:hover 
{
text-decoration : none;
color : green;
}

/* -------------------------------------------------------
 	11. Site-Map
------------------------------------------------------- */ 

.map_ul1 
{
color : green;
font-size : 1.2em;
}

.brown 
{
color:#996600;
font-size : 1em;
}

.black 
{
color : black;
font-size : 0.8em;
}

#map1
{
float:left;
margin-left:-20px;
}

#map2
{
float:right;
padding-right:0px;
width:300px;
}

#map1 ul, #map1 ul ul, #map1 ul ul ul, #map2 ul, #map2 ul ul, #map2 ul ul ul 
{
margin-top:5px;
margin-bottom:5px;
}

#map1 a, #map2 a 
{
text-decoration : none;
}

#map1 ul, #map2 ul 
{
list-style-type : disc;
}

#map1 ul ul, #map2 ul ul
{
list-style-type : none;
}

#map2 a:hover.black, #map2 a:hover.brown , #map2 a:hover.map_ul1
{
text-decoration : underline;
}

#map1 a:hover.black, #map1 a:hover.brown , #map1 a:hover.map_ul1
{
text-decoration : underline;
}