/* ---------------------------------------------------------------------- 

css info
========
Client:			XL-S
Agency: 		Agency.com Brussels
Author:			Chris Pirotte (cpirotte@agency.com)
Start: 			03-03-2009
Last update:	[Chris Pirotte (cpirotte@agency.com)]


table of contents
=================
1 	=RESET
2	=LAYOUT & STYLING
	2.1 =general styles
		2.1.1  =typography
		2.1.2  =links
		2.1.3  =forms
		2.1.4  =button
	2.2 =header
		2.2.1 =main-navigation
	2.3 =content
		2.3.1 =homepage
		2.3.2 =subpages
	2.4 =footer
3	=MISCELLEANEOUS

notes & remarks
===============

---------------------------------------------------------------------- */


/* 1 =RESET
---------------------------------------------------------------------- */
* { margin:0;padding:0 }
table {	border-collapse:collapse; border-spacing:0 }
fieldset,img { border:0 }
address,caption,cite,code,dfn,em,th,var { font-style:normal; font-weight:normal }
ol,ul { list-style:none }
caption,th { text-align:left }
h1,h2,h3,h4,h5,h6 { font-size:100%; font-weight:normal }
.orange { color:#f29400 } 
.mauve { color:#9085ba }
.upper { font-size:1.1em }


/* 2 =LAYOUT & STYLING
---------------------------------------------------------------------- */

	/* 2.1 =general styles
	---------------------------------------------------------------------- */	
	body { color:#666666; font:12px "Trebuchet MS", Arial, Verdana, Helvetica, sans-serif }
	#container { background:#ffffff url(../images/backgrounds/bg_body.jpg) repeat-x bottom; }
	#homepage, #subpage, #subpagemenu { width:960px; margin:auto; text-align:center }

		/*2.1.1 =typography
		---------------------------------------------------------------------- */
		p { padding:0 0 15px 0 }
		
		h2 { color:#ffffff; font-family:"Trebuchet MS",Helvetica,sans-serif; font-size:18px; line-height:28px; text-transform:uppercase; padding:0 0 25px 0; width:100%; height:28px; overflow:hidden }
		h3 { color:#F68B1F; font-size:24px; padding:0 0 15px 0; text-transform:uppercase; }
		h4 { font-weight:bold; font-size:12px; padding: 0 0 15px 0; color:#333333 }
		dl { width:100%}
		dt { font-weight:bold; font-size:12px; color:#F68B1F }
		ul { padding:0 0 15px 0; margin:0 0 0 15px }
		ul li { padding:0 0 0 14px; background:url(../images/icons/icon_bullet_lightorange.gif) no-repeat top left; line-height:14px; margin:2px 0 }
		ul.links { margin:0 0 15px 0 }
		ul.links li { padding:0 0 0 14px; background:url(../images/icons/icon_arrow_lightorange.gif) no-repeat top left; line-height:14px; margin:2px 0 }
		ol { padding:0 0 15px 15px; margin:0 0 0 15px; list-style-type:decimal; color:#F68B1F }
		ol li { padding:0 0 0 0px; line-height:14px; color:#666666 }
		strong { color:#333333; font-weight:bold }
						
		/*2.1.2 =links
		---------------------------------------------------------------------- */	
		a { color:#666666 }
		a:hover { color:#333333 }
		a:active, a.active { color:#F68B1F }
		
		/*2.1.3 =forms
		---------------------------------------------------------------------- */
		form { margin:0 0 25px 0 }
		fieldset { border:none; width:49%; float:left }
		legend { display:none }
		label { font-weight:bold; font-size:12px; display:block; width:325px; clear:both }
		input, textarea { border:none; background-color:#CCCCCC; color:#666666;  width:325px; padding:2px; margin-bottom:15px }
		textarea { height:150px }
		.even { margin-right:10px}
		label.radio { width:140px; float:left; clear:none; line-height:12px}
		input.radio { width:20px; float:left;  }
		
		/*2.1.4 =button
		---------------------------------------------------------------------- */
		a.button { background:url(../images/buttons/button_click.gif) no-repeat top left; line-height:18px; padding:0 7px 0 10px; color:#ffffff; font-family:"Trebuchet MS",Helvetica,sans-serif; font-size:14px; text-transform:uppercase; text-decoration:none; font-weight:bold }
		a:hover.button { color:#FFFFFF }
	
	/* 2.2 =header
	---------------------------------------------------------------------- */
	#header { padding:40px 0 10px 7px; width:960px; text-align:left; position:relative; float:left }
	#header	ul { padding:0 0 0 0; margin:0 0 0 15px }
	#header a img{ position:absolute; bottom:10px; left:7px }
				
		/*2.2.1 =main-navigation
		---------------------------------------------------------------------- */
		#main-navigation { max-width:750px; float:right }
			#main-navigation ul { float:left; margin:0 15px; font-size:11px }
			#main-navigation ul li { background-image:none; padding:0; margin:0; border-left: 1px solid #cccccc; line-height:14px }
			#main-navigation ul li a{ padding:0 0 0 14px; color:#999999; text-decoration:none }
			#main-navigation ul li a:hover{ background:url(../images/icons/icon_arrow_black.gif) no-repeat top left; color:#333333 }
			#main-navigation ul li a:active, #main-navigation ul li a.active,#main-navigation ul li.active a{ background:url(../images/icons/icon_arrow_darkorange.gif) no-repeat top left ;color:#F68B1F }
			#main-navigation ul li.title { border:none; color:#000000; font-size:12px; margin-bottom:15px; text-transform:uppercase }
			#main-navigation ul li.title a { color:#000000; text-decoration:none; padding:0; margin:0 }
			#main-navigation ul li.title a:hover { color:#000000; text-decoration:none; background-image:none; padding:0; margin:0 }
			#sub-navigation ul li { clear:both }
			#sub-navigation ul li.title a { color:#000000; text-decoration:none; padding:0; margin:0 }
			#sub-navigation ul li.title a:hover { color:#000000; text-decoration:none; background-image:none; padding:0; margin:0 }

	/* 2.3 =content
	---------------------------------------------------------------------- */
		
		/*2.3.1 =homepage
		---------------------------------------------------------------------- */
		#homepage #wrapper { min-height:475px; width:953px; text-align:left; margin-bottom:3px; _margin-bottom:0px; padding: 0 0 0 7px; clear:both;position:relative }
		#homepage h2 { padding:0 0 0 25px }
		
		#magazine { float:left; width:380px; height:475px; position:relative; margin-right:7px }
			#overlayerlogo { position:absolute; top:0; left:0 }
			#taglines { position:absolute; top:349px; left:242px; height:125px; width:135px; overflow:hidden }
				#taglines p { text-transform:uppercase; font-size:13px; font-weight:bold; color:#F68B1F }
				#taglines a { font-weight:bold; color:#666666; text-transform:uppercase; font-size:12px; border-bottom: 1px solid #666666; text-decoration:none; text-transform:uppercase }
				#taglines a.em{ color:#000000; font-size:15px; border-bottom: 2px solid #F68B1F }
				#taglines em { text-transform:uppercase; color:#F68B1F; text-decoration:none }
		
		#productrange { float:left; width:566px; height:207px; margin-bottom:3px; overflow:hidden; background:#ffffff url(../images/backgrounds/bg_contentdivs.jpg) no-repeat top left; position:relative }
			#productrange h3 { padding:25px 225px 10px 25px; font-size:20px }
			#productrange p { padding:0 0 10px 25px; line-height:14px }
			#productrange img { float:right;margin:0 0 0 10px; }
			#subscribe { width:241px; height:28px; position:absolute; top:0; right:0; background:url(../images/backgrounds/bg_subscribe.gif) no-repeat top left; text-align:right }
			#subscribe a{ display:block; overflow:hidden; color:#E2E2E2; font-size:10px; text-transform:uppercase; line-height:28px; padding-right:30px }
		
		#video { float:left; width:325px; height:265px; margin-right:3px; overflow:hidden; /*background:#ffffff url(../images/backgrounds/bg_video.gif) no-repeat top left;*/ background:#ffffff url(../images/backgrounds/bg_contentdivs.jpg) no-repeat top left; }
		
		#nutrition { float:left; width:238px; height:140px;margin-bottom:3px;  overflow:hidden; background:#ffffff url(../images/backgrounds/bg_contentdivs.jpg) no-repeat top left }
			#nutrition h3 { padding:10px 100px 0px 10pxpx;margin:0; font-size:13px }
			#nutrition p { padding:0 0px 10px 10px; font-size:10px; line-height:12px }
			#nutrition img { float:right;margin:0 0 0 10px; }
		#nutrition_ie { float:left; width:238px; height:264px;margin-bottom:3px;  overflow:hidden; background:#ffffff url(../images/backgrounds/bg_contentdivs.jpg) no-repeat top left }
			#nutrition_ie h3 { padding:10px 100px 0px 10pxpx;margin:0; font-size:13px }
			#nutrition_ie p { padding:0 100px 10px 10px; font-size:10px; line-height:12px }
			#nutrition_ie img { float:right }

		#tips { float:left; width:238px; height:122px; overflow:hidden; background:#ffffff url(../images/backgrounds/bg_contentdivs.jpg) no-repeat top left }
			#tips h3 { padding:10px 40px 0px 10px;margin:0; font-size:13px }
			#tips p { padding:0 40px 4px 10px; font-size:10px; line-height:12px }
			#tips ul { padding:0 100px 0px 25px; margin:0; font-size:10px; line-height:12px }
			#tips ul li { padding:0 0 0 14px; background:url(../images/icons/icon_arrow_lightorange.gif) no-repeat top left; line-height:14px }
			#tips img { float:right }

		
		/*2.3.2 =subpages
		---------------------------------------------------------------------- */
		#subpage #wrapper { width:960px; text-align:left; margin-bottom:3px; _margin-bottom:0px; clear:both; background: url(../images/backgrounds/bg_content_without_menu.png) no-repeat bottom left }
		/*#subpage.menu #wrapper {  background: url(../images/backgrounds/bg_content_with_menu.png) no-repeat bottom left }*/
		#subpage.lcom #wrapper {  background: url(../images/backgrounds/bg_content_with_menu_complement.png) no-repeat bottom left; padding-bottom:0px; }
		#subpage.lnut #wrapper {  background: url(../images/backgrounds/bg_content_with_menu_nutrition.png) no-repeat bottom left; }
		#subpage.ltips #wrapper {  background: url(../images/backgrounds/bg_content_without_menu_tips.png) no-repeat bottom left }
		#subpage.lqui #wrapper {  background: url(../images/backgrounds/bg_content_without_menu_qui.png) no-repeat bottom left }
		#content { min-height:475px;_height:475px;; margin:0 0 0 222px; padding:0 25px 25px 25px; background:url(../images/backgrounds/bg_contentdivs.jpg) no-repeat top left; position:relative }

		
		#sub-navigation { float:left; width:206px; margin-top:58px; padding:0 5px }
			#sub-navigation ul { float:left; margin:0 0 0 15px; padding:0; font-size:11px }
			#sub-navigation ul li { background-image:none; padding:0; line-height:14px; padding:2px 0 }
			#sub-navigation ul li a{ background:url(../images/icons/icon_arrow_grey.gif) no-repeat top left; padding:0 0 0 14px; color:#666666; text-decoration:none }
			#sub-navigation ul li a:hover{ background:url(../images/icons/icon_arrow_black.gif) no-repeat top left; color:#333333 }
			#sub-navigation ul li a:active, #sub-navigation ul li a.active,#sub-navigation ul li.active a{ background:url(../images/icons/icon_arrow_darkorange.gif) no-repeat top left ;color:#F68B1F }
			#sub-navigation ul li.title { color:#000000; font-size:12px; margin-bottom:21px; text-transform:uppercase }
			#sub-navigation ul li.title a{background:none;}
			#sub-navigation ul li a.open{ background:url(../images/icons/icon_arrow_grey_down.gif) no-repeat top left; padding:0 0 0 14px; color:#333333; text-decoration:none }
			#sub-navigation ul li a:hover.open{ background:url(../images/icons/icon_arrow_black_down.gif) no-repeat top left; color:#333333 }
		
		li.showmoreinfo { font-size:13px; color:#F68B1F; background:url(../images/icons/icon_arrow_lightorange.gif) no-repeat top left; text-transform:uppercase; margin:4px 0px; cursor:pointer /*;border-bottom:1px dotted #F68B1F*/ }
		li.showmoreinfo.open { background:url(../images/icons/icon_arrow_lightorange_down.gif) no-repeat top left;}
		li.moreinfo { margin:5px 0 }
		dt.image { display:none }
		dd.image { width:215px; float:right; text-align:center }
		ul.news { margin:0; padding:0 }
		ul.news li { background-image:none; border-bottom: 1px solid #cccccc; clear:left; padding:0 0 40px; margin: 0 0 15px 0 }
		ul.news li img { float:left;margin:0 10px 0 0; }
		ul.news li h3 { color:#F68B1F; font-size:18px; padding:0 0 15px 0; text-transform:uppercase; }
		ul.news li p { margin:0 0 0 100px; padding:0 }
		ul.news li a.button { float:right; clear:both }
		

			
	
		
	/* 2.4 =footer
	---------------------------------------------------------------------- */
	#homepage #footer { height:100px; padding:40px 0 0 0; background:url(../images/backgrounds/bg_footer_homepage.gif) no-repeat; text-align:right; }
	#subpage #footer { height:100px; padding:40px 0 0 0; background:url(../images/backgrounds/bg_footer_subpage.gif) no-repeat; text-align:right; }
		ul#nav-footer li{ background-image:none; display:inline; padding:0 3px }

	

/* 3 =MISCELLEANEOUS
---------------------------------------------------------------------- */
img, div, input { behavior: url("../script/iepngfix.htc")}
a.moreinfo { padding:0 0 0 14px; background:url(../images/icons/icon_arrow_lightorange.gif) no-repeat center left ;color:#F68B1F; text-decoration:none; text-transform:uppercase }
a.moreinfo:hover { text-decoration:underline }
.highlight { color:#F68B1F }
li.moreinfo{ background-image:none }
.fright { float:right; clear:both}
.natural { float:right }
.smallprint { font-size:10px; color:#999999 }
.paging { margin:0 }
.next { float:right; background:url(../images/icons/icon_arrow_lightorange.gif) no-repeat top right; padding: 0 14px 0 0 }
.previous { float:left; background:url(../images/icons/icon_arrow_lightorange_left.gif) no-repeat top left; padding: 0 0 0 14px }

/* FAQ 
---------------------------------------------------------------------- */
table.faq { border-collapse:collapse;border:1px solid black;width:640px; color:#000; margin:10px 0 20px 0; text-align:left; }
table.faq th { font-weight:bold; font-size:1.2em; background:#fff; padding:6px 10px; border:1px solid #333; }
table.faq td { padding:2px 4px 2px 30px; border:1px solid #333; }
table.faq tr.tr_typeprod td { font-weight:bold;font-size:1.1em; padding:10px 0 2px 10px; }
table.faq tr.tr_package td { font-weight:bod; padding-left:20px; font-style:italic; }
table.faq tr.tr_prepa td { background:#fc6; }
table.faq tr.tr_plats td { background:#fc0; }
table.faq tr.tr_nomade td { background:#f90; }
table.faq tr.tr_prepa_pause td { background:#f9c; }
table.faq tr.tr_snack_sucre td { background:#c9f; }
table.faq tr.tr_snack_sale td { background:#f0f; }

/* Points de ventes 
---------------------------------------------------------------------- */
.left { float: left; }
.right { float: right; }
.clear { clear: both; }

.gMapsSearch { height: 180px; width: 250px; margin: 0 0 0 6px; font-size: 12px; }
.gMapsSearch select { border:none; background-color:#CCCCCC; color:#666666; padding:2px; margin-bottom:15px }
.gMapsSearch input[type='text'] { width: 246px; }
.gMapsSearch input[type='submit'] { width: auto; }
.gMapsSearch .gMapsListData { width: 210px; float: left;}
.gMapsFirstResltat { height: auto; width: 250px;  margin: 20px 0 0 6px; }
.gMapsFirstResltat .gMapsListData { font-size: 12px; width: 210px; float: left;}
.gMapsFirstResltatTitle { font-weight: bold; font-size: 12px; }
.map01 { height: 312px; width: 420px; float: right; }
.gMapsList { height: 260px; width: 680px; margin: 10px 0 10px 0; overflow: auto; float: right; }
.gMapsListOne { padding: 5px 0 5px 0; width: 660px; border-bottom: 1px solid #666666; }
.gMapsListPoint { padding: 0 10px 0 10px; float: left; }
.gMapsListData { font-size: 12px; width: 460px; float: left;}
.gMapsListToggle { font-size: 12px; width: 140px; float: left; }
.gMapsListToggle input[type='checkbox'] { margin-bottom: 0px; width:12px; cursor: pointer; display:inline; }
.gMapsListToggle label { margin-bottom: 0px; width:12px; cursor: pointer; display:inline; }



/******************************************************************************
** Page -- ACCUEIL -- SLIDESHOW **/
/******************************************************************************/
#slidesContainer { position:relative;width:566px;overflow:hidden }
.specialSlide { background-image:url(../images/backgrounds/bg_contentdivs2.jpg); }
#slideInner {  }
#productrange div.slide div.imgslide { float:left;text-align:center;/*width:160px;*/overflow:hidden;height:175px;padding:0; }
#productrange div.slide div.imgslide img { margin:0;float:none; }
#productrange div.slide div.txtSlide { float:right;width:400px;margin-top:10px; }
#productrange div.slide h2 {  }
#productrange div.slide h3 { padding:0 0 10px 0px; font-size:20px }
#productrange div.slide p { padding:0 10px 10px 0px; line-height:18px; font-size:16px; }

/******************************************************************************
** Page -- ACCUEIL -- POPUP **/
/******************************************************************************/
#popup_accueil { position:absolute;top:0;left:7px;z-index:1;width:955px;height:475px;background:url('../images/backgrounds/back-promo.png') repeat;text-align:center;display:none }
#popup_accueil div.contenu_offre { width:270px;margin:70px auto;background:#fff;}
#popup_accueil div.contenu_offre h3 { background:#F68B1F;color:#fff;margin:0;padding:4px 0;text-align:center }
#popup_accueil img.offre { border:10px solid #fff; }
#popup_accueil a.close { position:absolute;top:52px;left:532px; }

h4.prod-categ {font-size:16px;margin:20px 0 4px 0;padding:0;}