html,
body{
	height: 100%;
}


/* POLICES */

@font-face{
    font-family: 'SetFiretotheRainRegular';
    src: url('../fonts/setfiretotherain-webfont.eot');
    src: url('../fonts/setfiretotherain-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/setfiretotherain-webfont.woff') format('woff'),
         url('../fonts/setfiretotherain-webfont.ttf') format('truetype'),
         url('../fonts/setfiretotherain-webfont.svg#SetFiretotheRainRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face{
    font-family: 'DINCondBoldRegular';
    src: url('../fonts/dincond-bold-webfont.eot');
    src: url('../fonts/dincond-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/dincond-bold-webfont.woff') format('woff'),
         url('../fonts/dincond-bold-webfont.ttf') format('truetype'),
         url('../fonts/dincond-bold-webfont.svg#DINCondBoldRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


/* FOND */

body{
	background: #fff url(../img/body.jpg) no-repeat center -250px;
	color: #000;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 18px;
	font-smooth: always;
	-webkit-font-smoothing: antialiased;
}
body.template-home{
	background-position: center top;
}

/* CONTENEUR */

#wrapper{
	min-width: 960px;
	min-height: 100%;
	position: relative;
}


/* HEADER */

#header{
	background: url(../img/header.png) no-repeat center top;
	height: 128px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	min-width: 960px;
	z-index: 200;	
}
	#header-inner{
		margin: 0 auto;
		position: relative;
		width: 960px;		
	}
	/* TITRE */
	#header h1{
		left: 50%;
		margin: 0 0 0 -473px;
		position: absolute;
		top: 12px;
		z-index: 210;
	}
		#header h1 a{
			display: block;
			height: 100px;
			overflow: hidden;
			width: 250px;
		}
		
	/* MENU */
	#sections{
		overflow: hidden;
	}
		#sections h2{
			display: none;
		}
		#sections ul{
			margin: 25px 0 0 275px;
			overflow: hidden;
		}
			#sections ul li{
				float: left;
			}
				#sections ul li a{
					background: url(../img/sections.png);
					display: block;
					height: 60px;
					overflow: hidden;
					position: relative;
					text-indent: -9999px;
				}
				.generatedcontent.opacity #sections ul li a{
					background-image: none;
				}
				.generatedcontent.opacity #sections ul li.current a{
					background-image: url(../img/sections.png);
				}
				.generatedcontent.opacity #sections ul li a:after,
				.generatedcontent.opacity #sections ul li a:before{
					background: url(../img/sections.png);
					content: "";
					height: 100%;
					left: 0;
					position: absolute;
					top: 0;
					width: 100%;
					
					-moz-transition: opacity 250ms ease;
					-o-transition: opacity 250ms ease;
					-webkit-transition: opacity 250ms ease;
					transition: opacity 250ms ease;
				}
				#sections ul li.section-1 a,
				.generatedcontent.opacity #sections ul li.section-1 a:before{
					background-position: 0 0;
					width: 100px;
				}
				#sections ul li.section-2 a,
				.generatedcontent.opacity #sections ul li.section-2 a:before{
					background-position: -100px 0;
					width: 120px;
				}
				#sections ul li.section-3 a,
				.generatedcontent.opacity #sections ul li.section-3 a:before{
					background-position: -220px 0;
					width: 110px;
				}
				#sections ul li.section-4 a,
				.generatedcontent.opacity #sections ul li.section-4 a:before{
					background-position: -330px 0;
					width: 105px;
				}
				#sections ul li.section-5 a,
				.generatedcontent.opacity #sections ul li.section-5 a:before{
					background-position: -435px 0;
					width: 130px;
				}
				#sections ul li.section-6 a,
				.generatedcontent.opacity #sections ul li.section-6 a:before{
					background-position: -565px 0;
					width: 120px;
				}
				
				#sections ul li.section-1 a:hover,
				.generatedcontent.opacity #sections ul li.section-1 a:after{
					background-position: 0 -60px;
				}
				#sections ul li.section-2 a:hover,
				.generatedcontent.opacity #sections ul li.section-2 a:after{
					background-position: -100px -60px;
				}
				#sections ul li.section-3 a:hover,
				.generatedcontent.opacity #sections ul li.section-3 a:after{
					background-position: -220px -60px;
				}
				#sections ul li.section-4 a:hover,
				.generatedcontent.opacity #sections ul li.section-4 a:after{
					background-position: -330px -60px;
				}
				#sections ul li.section-5 a:hover,
				.generatedcontent.opacity #sections ul li.section-5 a:after{
					background-position: -435px -60px;
				}
				#sections ul li.section-6 a:hover,
				.generatedcontent.opacity #sections ul li.section-6 a:after{
					background-position: -565px -60px;
				}
				
				.generatedcontent.opacity #sections ul li a:after,
				.generatedcontent.opacity #sections ul li a:hover:before{
					opacity: 0;
				}
				.generatedcontent.opacity #sections ul li a:before,
				.generatedcontent.opacity #sections ul li a:hover:after{
					opacity: 1;
				}
				
				#sections ul li.section-1.current a,
				#sections ul li.section-1.current a:hover{
					background-position: 0 -120px;
				}
				#sections ul li.section-2.current a,
				#sections ul li.section-2.current a:hover{
					background-position: -100px -120px;
				}
				#sections ul li.section-3.current a,
				#sections ul li.section-3.current a:hover{
					background-position: -220px -120px;
				}
				#sections ul li.section-4.current a,
				#sections ul li.section-4.current a:hover{
					background-position: -330px -120px;
				}
				#sections ul li.section-5.current a,
				#sections ul li.section-5.current a:hover{
					background-position: -435px -120px;
				}
				#sections ul li.section-6.current a,
				#sections ul li.section-6.current a:hover{
					background-position: -565px -120px;
				}
				.generatedcontent.opacity #sections ul li.current a:before,
				.generatedcontent.opacity #sections ul li.current a:after{
					opacity: 0;
				}
		
		
/* ZONE DE CONTENU */
				
#container{
	padding-bottom: 84px;
	padding-top: 280px;
}
	#container-inner{
		margin: 0 auto;
		position: relative;
		width: 960px;
		zoom: 1;
	}
	#container-inner:before,
	#container-inner:after{
		content: "";
		display: table;
	}
	#container-inner:after{
		clear: both;
	}
	
	#container #bowl{
		position: absolute;
		right: -25px;
		top: -215px;
	}
	#container #ranges-products{
		display: block;
		margin: 50px 0 0 auto;
	}
	
	/* TEXTE */	
	
	#content{
	}
	#content.narrow{
		padding: 0 70px;
	}
	/*.template-product #content{
		background: url(../img/content-product.png) no-repeat center bottom;
		padding-bottom: 15px;
	}*/
		
	
	/* Liens */
	#container a{
		color: #dd0d72;
		text-decoration: none;
	}
	#container a:hover{
		color: #00663a;
	}
	
	/* Titres */
	#container h2,
	#container h3,
	#container h4{
		color: #dd0d72;
		font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
	}
	
	/* Titre h2 */
	#container h2{
		background: url(../img/h2.png) no-repeat left bottom;
		font-size: 32px;
		line-height: 30px;
		margin: 20px 0;
		padding: 5px 20px;
	}
	
	/* Titre h3 */
	#container h3{
		background: url(../img/h3.png) no-repeat left bottom;
		color: #027503;
		font-size: 22px;
		line-height: 24px;
		margin: 30px 10px 20px 10px;
		padding: 5px 10px;
	}
		#container h3 a{
			color: #027503;
		}
		#container h3 a:hover{
			color: #dd0d72;
		}
	
	/* Titre h4 */
	#container h4{
		background: url(../img/h4.png) no-repeat left top;
		font-size: 16px;
		line-height: 18px;
		margin: 30px 10px 20px 50px;
		padding: 0 0 0 20px;
		text-transform: uppercase;
	}
	
	/* Paragraphes */
	#container p{
		margin: 20px;
		text-align: justify;
	}
	
	/* Styles */
	#container strong,
	#container b{
		font-weight: bold;
	}
	#container em,
	#container i{
		font-style: italic;
	}
	
	/* Listes */
	#container ul,
	#container ol{
		margin: 20px 40px;
	}
	#container ul{
		list-style: none;
	}
		#container ul li{
			background: url(../img/li.png) no-repeat left top;
			margin: 5px 0;
			padding: 0 0 0 18px;
		}
	#container ol{
		list-style: outside decimal;
	}
		#container ol li{
			margin: 5px 0 5px 15px;
		}
		
	/* Citation */
	#container blockquote{
		background: #a2c651;
		background: -webkit-gradient(linear, left top, left bottom, from(#a5c856), to(#95be39));
		background: -webkit-linear-gradient(top, #a5c856, #95be39);
		background: -moz-linear-gradient(top, #a5c856, #95be39);
		background: -o-linear-gradient(top, #a5c856, #95be39);
		background: linear-gradient(top, #cfdde5, #95be39);
		border: 1px solid #dbe9bb;
		-webkit-border-radius: 5px;
		-o-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		-webkit-box-shadow: inset 0 0 5px rgba(255, 255, 255, .75);
		-o-box-shadow: inset 0 0 5px rgba(255, 255, 255, .75);
		-moz-box-shadow: inset 0 0 5px rgba(255, 255, 255, .75);
		box-shadow: inset 0 0 5px rgba(255, 255, 255, .75);
		clear: both;
		margin: 30px 20px;
		position: relative;
	}
	#container blockquote:after{
		border-radius: 100% / 10px;  
    	box-shadow: 0 0 8px #565656;
		content: "";
		height: 20px;
		left: 1%;
		position: absolute;
		bottom: 0;
		width: 98%;
		z-index: -1;
	}
	
	/* Images */
	#container img{
		margin: 20px;
	}
	#container img.no-margin{
		margin: 0;
	}
		#container img.float-left{
			float: left;
		}
		#container img.float-right{
			float: right;
		}
			#container p img.float-left{
				margin-top: 0;
				margin-left: 0;
			}
			#container p img.float-right{
				margin-top: 0;
				margin-right: 0;
			}
	
	/* Formulaires */
	#container form{
	}
		#container form input.text,
		#container form select,
		#container form textarea{
			background: #fff;
			background: rgba(255, 255, 255, .75);
			border: 2px solid #ddd;
			-webkit-border-radius: 4px;
			-moz-border-radius: 4px;
			border-radius: 4px;
			font-family: Arial, Helvetica, sans-serif;
			font-size: 12px;
			padding: 3px;
		}
		#container form textarea{
			height: 200px;
			width: 770px;
		}
		#container form input.text:focus,
		#container form select:focus,
		#container form textarea:focus{
			border-color: #ccc;
		}
		#container form select{
			padding: 2px;
		}
		#container form .checkboxes{
			display: inline-block;
			vertical-align: top;
		}
		#container form label{
			display: inline-block;
			*display: inline;
			margin-right: 5px;
			text-align: right;
			width: 175px;
		}
		#container form p.important label{
			font-weight: bold;
		}
			#container form p.important label.inline{
				font-weight: normal;
			}
		#container form label.inline{
			display: inline;
			margin: 0;
			text-align: left;
			width: auto;
		}
		#container form label.long{
			vertical-align: middle;
		}
		#container form label.block{
			display: block;
			text-align: left;
			width: auto;
		}
		#container form img.captcha{
			margin: 0;
			padding: 0;
			vertical-align: middle;
		}
		
	/* Tableaux */
	#container table{
		border: 1px solid #ccc;
		border-collapse: separate;
		-webkit-border-radius: 4px;
		-o-border-radius: 4px;
		-moz-border-radius: 4px;
		border-radius: 4px;
		clear: both;
		margin: 0 auto 20px auto;
		padding: 0;
	}
		#container table td,
		#container table th{
			padding: 10px;
			text-align: left;
		}
		#container table thead th{
			background: #c9d8e2;
			background: -webkit-gradient(linear, left top, left bottom, from(#cfdde5), to(#bfd1dd));
			background: -webkit-linear-gradient(top, #cfdde5, #bfd1dd);
			background: -moz-linear-gradient(top, #cfdde5, #bfd1dd);
			background: -o-linear-gradient(top, #cfdde5, #bfd1dd);
			background: linear-gradient(top, #cfdde5, #bfd1dd);
			border-bottom: 1px solid #ccc;
			color: #dd0d72;
			font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
			font-size: 14px;
			vertical-align: middle;
			text-align: center;
			text-transform: uppercase;
		}
		#container table tbody td{
			vertical-align: top;
		}
		#container table td + td{
		  border-left: 1px solid #ddd;
		}
		#container table tr + tr td{
		  border-top: 1px solid #ddd;
		}
		#container table tbody tr:first-child td:first-child{
		  -webkit-border-radius: 4px 0 0 0;
		  -moz-border-radius: 4px 0 0 0;
		  border-radius: 4px 0 0 0;
		}
		#container table tbody tr:first-child td:last-child{
		  -webkit-border-radius: 0 4px 0 0;
		  -moz-border-radius: 0 4px 0 0;
		  border-radius: 0 4px 0 0;
		}
		#container table tbody tr:last-child td:first-child{
		  -webkit-border-radius: 0 0 0 4px;
		  -moz-border-radius: 0 0 0 4px;
		  border-radius: 0 0 0 4px;
		}
		#container table tbody tr:last-child td:last-child{
		  -webkit-border-radius: 0 0 4px 0;
		  -moz-border-radius: 0 0 4px 0;
		  border-radius: 0 0 4px 0;
		}
		#container table tbody tr:nth-child(odd) td {
		  background-color: #f9f9f9;
		}
		#container table tbody tr:hover td {
		  background-color: #f5f5f5;
		}
		
	/* Boutons */
	#container .button{
		margin: 20px 0;
	}
	#container ul.buttons{
		list-style: none;
		margin: 40px 0 40px 80px;
		overflow: hidden;
	}
	#container li.button{
		background: transparent none;
		float: left;
		margin: 0;
		padding: 0;
	}
		#container .button a,
		#container .button button,
		#container .button input{
			background: url(../img/buttons.png) no-repeat 0 0;
			border: 0;
			color: #fff;
			cursor: pointer;
			display: block;
			font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
			font-size: 14px;
			height: 35px;
			line-height: 35px;
			margin: 0 20px;
			padding: 0;
			text-align: center;
			text-decoration: none;
			width: 165px;
		}
		#container .button button{
			margin: 0 auto;
		}
		#container .button.small a{
			font-size: 12px;
			line-height: 12px;
			padding-top: 6px;
			height: 29px;
		}
		#container .buttons .button a{
			float: left;
			margin: 0 10px;
		}
		#container .button.back a{
			background-position: 0 -35px;
			padding-left: 15px;
			width: 150px;
		}
		#container .button a:hover,
		#container .button button:hover,
		#container .button input:hover,
		#container .button.current a{
			background-position: -165px 0;
		}
		#container .button.back a:hover{
			background-position: -165px -35px;
		}
		
		
	/* Liste produits */
	#container ul.products{
		list-style: none;
		margin: 0 30px;
		overflow: hidden;
		padding: 0;	
	}
		#container ul.products li{
			background-image: none;
			float: left;
			font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
			font-size: 12px;
			font-weight: bold;
			margin: 20px;
			padding: 0;
			text-align: center;
		}
			#container ul.products li a{
				background: url(../img/products.png) no-repeat 0 0;
				display: block;
				height: 40px;
				line-height: 40px;
				padding: 6px 0 140px 0;
				position: relative;
				text-decoration: none;
				width: 140px;
				
				-moz-transition: color 250ms ease;
				-o-transition: color 250ms ease;
				-webkit-transition: color 250ms ease;
				transition: color 250ms ease;
			}
			.generatedcontent.opacity #container ul.products li a{
				background-image: none;
			}
			.generatedcontent.opacity #container ul.products li a:before,
			.generatedcontent.opacity #container ul.products li a:after{
				background: url(../img/products.png) no-repeat 0 0;
				content: "";
				left: 0;
				height: 100%;
				opacity: 0;
				position: absolute;
				top: 0;
				width: 100%;
				
				-moz-transition: opacity 250ms ease;
				-o-transition: opacity 250ms ease;
				-webkit-transition: opacity 250ms ease;
				transition: opacity 250ms ease;
			}
			.generatedcontent.opacity #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li a:hover:before{
				opacity: 0;
			}
			.generatedcontent.opacity #container ul.products li a:before,
			.generatedcontent.opacity #container ul.products li a:hover:after{
				opacity: 1;
			}
			.color-yellow #container ul.products li a,
			#container ul.products li.color-yellow a{
				color: #fdbe13;
			}
			.color-green #container ul.products li a,
			#container ul.products li.color-green a{
				color: #027503;
			}
			.color-pink #container ul.products li a,
			#container ul.products li.color-pink a{
				color: #dd0d72;
			}
			.color-lime #container ul.products li a,
			#container ul.products li.color-lime a{
				color: #9ecb30;
			}
			.color-blue #container ul.products li a,
			#container ul.products li.color-blue a{
				color: #4ab1d6;
			}
			.color-orange #container ul.products li a,
			#container ul.products li.color-orange a{
				color: #e8522f;
			}
			#container ul.products li a:hover{
				color: #fff;
			}
			.color-yellow #container ul.products li a:hover,
			#container ul.products li.color-yellow a:hover,
			.generatedcontent.opacity .color-yellow #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li.color-yellow a:after{
				background-position: -140px 0;
			}
			.color-green #container ul.products li a:hover,
			#container ul.products li.color-green a:hover,
			.generatedcontent.opacity .color-green #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li.color-green a:after{
				background-position: -280px 0;
			}	
			#container ul.products li a:hover,			
			.color-pink #container ul.products li a:hover,
			#container ul.products li.color-pink a:hover,
			.generatedcontent.opacity #container ul.products li a:after,
			.generatedcontent.opacity .color-pink #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li.color-pink a:after{
				background-position: -420px 0;
			}
			.color-lime #container ul.products li a:hover,
			#container ul.products li.color-lime a:hover,
			.generatedcontent.opacity .color-lime #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li.color-lime a:after{
				background-position: -560px 0;
			}
			.color-blue #container ul.products li a:hover,
			#container ul.products li.color-blue a:hover,
			.generatedcontent.opacity .color-blue #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li.color-blue a:after{
				background-position: -700px 0;
			}
			.color-orange #container ul.products li a:hover,
			#container ul.products li.color-orange a:hover,
			.generatedcontent.opacity .color-orange #container ul.products li a:after,
			.generatedcontent.opacity #container ul.products li.color-orange a:after{
				background-position: -840px 0;
			}
				#container ul.products li a img{
					left: 20px;
					margin: 0;
					position: absolute;
					top: 46px;
					z-index: 1;
				}
				#container ul.products li a span{
					display: inline-block;
					line-height: 16px;
					padding: 0 5px;
					position: relative;
					vertical-align: middle;
					z-index: 2;
				}
				#container ul.products li a em{
					color: #e8522f;
					display: block;
					font-style: normal;
					left: 40px;
					line-height: 16px;
					position: absolute;
					top: 154px;
					width: 75px;
					z-index: 1;
				}
				
	/* Alignements */
	#container .align-center{
		text-align: center;
	}
	#container .align-left{
		float: left;
	}
	#container .align-right{
		float: right;
	}
	
	/* Clear / overflow */
	.clear,
	.clear-both{
		clear: both;
	}
	.clear-left{
		clear: left;
	}
	.clear-right{
		clear: right;
	}
	.clearfix,
	.cf{
		zoom: 1;
	}
	.clearfix:before,
	.cf:before,
	.clearfix:after,
	.cf:after{
		content: "";
		display: table;
	}
	.clearfix:after,
	.cf:after:after{
		clear: both;
	}
	.overflow,
	.overflow-hidden{
		overflow: hidden;
	}
	
	/* Bordures */
	#container .border{
		background: #fff;
		border: 5px solid #fff;
		-webkit-border-radius: 3px;
		-o-border-radius: 3px;
		-moz-border-radius: 3px;
		border-radius: 3px;
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		-o-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		box-shadow: 0 0 5px rgba(0, 0, 0, .2);
		margin: 20px;
	}
	#container a.border{
		-webkit-transition: box-shadow 250ms ease;
		-o-transition: box-shadow 250ms ease;
		-moz-transition: box-shadow 250ms ease;
		transition: box-shadow 250ms ease;
	}
	#container a.border:hover{
		-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
		-o-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
		-moz-box-shadow: 0 0 5px rgba(0, 0, 0, .5);
		box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	}
		#container .border img{
			-webkit-border-radius: 3px;
			-moz-border-radius: 3px;
			border-radius: 3px;
			display: block;
			border: 0;
			margin: 0;
		}
				
	/* Icons */
	#container .icon{
		background-position: left 1px;
		background-repeat: no-repeat;
		padding-left: 20px;
	}
	#container .icon.plus,
	#container .icon.add{
		background-image: url(../img/icons/plus-button.png);
	}
	#container .icon.minus,
	#container .icon.del,
	#container .icon.remove,
	#container .icon.delete{
		background-image: url(../img/icons/minus-button.png);
	}
	#container .icon.exclamation,
	#container .icon.warning{
		background-image: url(../img/icons/exclamation.png);
	}
	#container .icon.information,
	#container .icon.info{
		background-image: url(../img/icons/information.png);
	}
	#container .icon.question,
	#container .icon.help{
		background-image: url(../img/icons/question.png);
	}
	#container .icon.tick,
	#container .icon.success{
		background-image: url(../img/icons/tick.png);
	}
	#container .icon.cross,
	#container .icon.error{
		background-image: url(../img/icons/cross.png);
	}
	#container .icon.slash,
	#container .icon.denied{
		background-image: url(../img/icons/slash.png);
	}
	#container .icon.date,
	#container .icon.calendar{
		background-image: url(../img/icons/calendar-day.png);
	}
	#container .icon.navigation,
	#container .icon.right,
	#container .icon.more{
		background-image: url(../img/icons/navigation.png);
	}
	#container .icon.navigation-180,
	#container .icon.left,
	#container .icon.back,
	#container .icon.less{
		background-image: url(../img/icons/navigation-180.png);
	}
	#container .icon.navigation-090,
	#container .icon.navigation-90,
	#container .icon.top,
	#container .icon.up{
		background-image: url(../img/icons/navigation-090.png);
	}
	#container .icon.navigation-270,
	#container .icon.bottom,
	#container .icon.down{
		background-image: url(../img/icons/navigation-270.png);
	}
		
		
	/* GAMMES */	
		
	#ranges{
		margin: 0 11px;
	}
		#ranges h2,
		#ranges h3{
			display: none;
		}
		#ranges ul{
			background: url(../img/ranges.png) no-repeat center bottom;
			list-style: none;
			margin: -50px 0 -55px 0;
			overflow: hidden;
			padding: 0 0 55px 0;
		}
			#ranges ul li{
				background-image: none;
				float: left;
				font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
				font-size: 18px;
				font-weight: bold;
				margin: 0 3px;
				padding: 0;
				text-align: center;
			}
				#ranges ul li a{
					color: #000;
					display: block;
					height: 64px;
					line-height: 64px;
					padding: 128px 0 14px 0;
					position: relative;
					text-decoration: none;
					width: 128px;
					
					-moz-transition: color 250ms ease;
					-o-transition: color 250ms ease;
					-webkit-transition: color 250ms ease;
					transition: color 250ms ease;
				}
				#ranges ul li.color-yellow a{
					color: #fdbe13;
				}
				#ranges ul li.color-green a{
					color: #027503;
				}
				#ranges ul li.color-pink a{
					color: #dd0d72;
				}
				#ranges ul li.color-lime a{
					color: #9ecb30;
				}
				#ranges ul li.color-blue a{
					color: #4ab1d6;
				}
				#ranges ul li.color-orange a{
					color: #e8522f;
				}
				#ranges ul li a:hover,
				#ranges ul li.current a{
					background: url(../img/ranges-li.png) no-repeat 0 0;
					color: #fff;
				}
				.generatedcontent.opacity #ranges ul li a:after{
					background: url(../img/ranges-li.png) no-repeat 0 0;
					content: "";
					left: 0;
					height: 100%;
					opacity: 0;
					position: absolute;
					top: 0;
					width: 100%;
					z-index: 0;
					
					-moz-transition: opacity 250ms ease;
					-o-transition: opacity 250ms ease;
					-webkit-transition: opacity 250ms ease;
					transition: opacity 250ms ease;
				}
				.generatedcontent.opacity #ranges ul li a:hover,
				.generatedcontent.opacity #ranges ul li.current a{
					background-image: none;
				}
				.generatedcontent.opacity #ranges ul li a:hover:after,
				.generatedcontent.opacity #ranges ul li.current a:after{
					opacity: 1;
				}
				#ranges ul li.color-yellow a:hover,
				#ranges ul li.color-yellow.current a,
				.generatedcontent.opacity #ranges ul li.color-yellow a:after{
					background-position: 0 0;
				}
				#ranges ul li.color-green a:hover,
				#ranges ul li.color-green.current a,
				.generatedcontent.opacity #ranges ul li.color-green a:after{
					background-position: -128px 0;
				}
				#ranges ul li.color-pink a:hover,
				#ranges ul li.color-pink.current a,
				.generatedcontent.opacity #ranges ul li.color-pink a:after{
					background-position: -256px 0;
				}
				#ranges ul li.color-lime a:hover,
				#ranges ul li.color-lime.current a,
				.generatedcontent.opacity #ranges ul li.color-lime a:after{
					background-position: -384px 0;
				}
				#ranges ul li.color-blue a:hover,
				#ranges ul li.color-blue.current a,
				.generatedcontent.opacity #ranges ul li.color-blue a:after{
					background-position: -512px 0;
				}
				#ranges ul li.color-orange a:hover,
				#ranges ul li.color-orange.current a,
				.generatedcontent.opacity #ranges ul li.color-orange a:after{
					background-position: -640px 0;
				}
					#ranges ul li a img{
						left: 0;
						margin: 0;
						position: absolute;
						top: 0;
						z-index: 2;
					}
					#ranges ul li a span{
						display: inline-block;
						line-height: 20px;
						padding: 0 5px;
						position: relative;
						vertical-align: middle;
						z-index: 2;
					}
	
	
	/* FICHES PRODUITS */
	
	.template-product #container p.button{
		left: 50px;
		margin: 0;
		position: absolute;
		top: -100px;
	}
	
	.template-product #container .wrapper{
		background: url(../img/content-product.png) no-repeat center bottom;
		padding-bottom: 20px;
		zoom: 1;
	}
	.template-product #container .wrapper:before,
	.template-product #container .wrapper:after{
		content: "";
		display: table;
	}
	.template-product #container .wrapper:after{
		clear: both;
	}
	.template-product #container #informations{
		float: left;
		margin: 0 0 0 20px;
		width: 520px;
	}
	
	.template-product #container #medias{
		float: right;
		height: 400px;
		margin-top: -150px;
		width: 400px;
	}
	
	.template-product #container #nutritional-values{
		background: url(../img/nutritional-values.jpg) no-repeat left top;
		clear: both;
		float: right;
		height: 280px;
		margin: 50px 0 0 0;
		padding: 30px 30px 60px 30px;
		width: 510px;
	}
	.ie7 .template-product #container #nutritional-values{
		padding-top: 50px;
	}
		.template-product #container #nutritional-values h3{
			font-size: 20px;
			margin: 20px 10px;
		}
		.template-product #container #nutritional-values ul{
			margin: 25px 20px 20px 20px;
		}
			.template-product #container #nutritional-values li{
				background: url(../img/nutritional-values-li.png);
				float: left;
				height: 72px;
				margin: 0 5px 25px 0;
				padding: 4px 2px;
				text-align: center;
				width: 68px;
			}
				.template-product #container #nutritional-values li strong{
					color: #027503;
					display: block;
					font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
					font-size: 12px;
					height: 30px;
					line-height: 14px;
					padding: 10px 0 0 0;
				}
				.template-product #container #nutritional-values li em{
					color: #00663a;
					display: block;
					font-size: 11px;
					height: 28px;
					font-style: normal;
					line-height: 14px;
					padding: 4px 0 0 0;
				}
		.template-product #container #nutritional-values p{
			color: #00663a;
			float: left;
			font-size: 11px;
			margin: 0 20px;
		}
	.template-product #container #bowl{
		float: left;
		left: auto;
		margin: 20px 0 0 0;
		position: relative;
		top: auto;
	}
	
	.template-news #container h2,
	.template-recipes #container h2{
		padding-right: 200px;
	}
	
	/* SOUS MENU */
	#pages{
		/*left: 0;
		position: absolute;
		top: -100px;*/
	}
	
	
/* HOME */

#home{
	padding-bottom: 84px;
	padding-top: 130px;
}
	#home-inner{
		margin: 0 auto;
		position: relative;
		width: 960px;
		zoom: 1;
	}
	#home-inner:before,
	#home-inner:after{
		content: "";
		display: table;
	}
	
	#home-inner:after{
		clear: both;
	}
	#home .column-left{
		float: left;
	}
	#home .column-right{
		float: right;
	}
	
	#home section{
		padding: 10px 0;
		position: relative;
	}
	#home h2{
		font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
		font-size: 20px;
		line-height: 20px;
		padding: 25px 0 15px 46px;
	}
		#home h2 a{
			text-decoration: none;
		}
	#home h3{
		color: #fff;
		font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
		font-size: 18px;
		line-height: 18px;
		margin: 20px;
	}
		#home h3 a{
			color: #fff;
			text-decoration: none;
		}
	#home p{
		margin: 20px;
		text-align: justify;
	}
	#home p.more{
		font-family: SetFiretotheRainRegular, Arial, Helvetica, sans-serif;
		font-size: 13px;
		overflow: hidden;
		text-align: left;
	}
		#home p.more a{
			background: url(../img/home-buttons.png);
			display: block;
			float: right;
			height: 30px;
			line-height: 30px;
			padding: 0 0 0 25px;
			text-decoration: none;
			text-transform: lowercase;
			width: 80px;
		}
	
	/* Produits (carrousel) */
	#products{
		background: url(../img/home-products.png) no-repeat 5px 0;
		margin: 0 0 80px 0;
		width: 960px;
		z-index: 4;
	}
		#products h2{
			left: 50px;
			padding: 0;
			position: absolute;
			top: 35px;
			z-index: 5;
		}
			#products h2 a{
				background: url(../img/home-buttons.png);
				color: #fff;
				display: block;
				height: 34px;
				line-height: 34px;
				padding: 0 0 0 30px;
				width: 114px;
			}
		#products ul.slides{
			list-style: none;
			margin: 0;
			width: 950px;
		}
		.js #products ul.slides{
			height: 300px;
		}
			#products ul.slides li{
				height: 300px;
				margin: 0;
				padding: 0;
				width: 950px;
			}
			.js #products ul.slides li{
				left: 0;
				position: absolute;
				top: 0;
			}
				#products ul.slides li .informations{
					height: 240px;
					left: 30px;
					position: absolute;
					top: 68px;
					width: 490px;
				}
					#products ul.slides li .informations h3{
						background: url(../img/product-title.png) no-repeat center bottom;
						color: #dd0d72;
						font-size: 26px;
						padding: 0 0 15px 0;
					}
						#products ul.slides li .informations h3 a{
							color: #dd0d72;
						}
					#products ul.slides li .informations p{
						line-height: 20px;
					}
					#products ul.slides li .informations p.more{
						bottom: 0;
						margin: 0;
						position: absolute;
						right: 20px;
					}
						#products ul.slides li .informations p.more a{
							background-position: 0 -34px;
							color: #ff9c00;
							height: 88px;
							line-height: 100px;
							padding: 0;
							text-align: center;
							width: 110px;
						}
						#products ul.slides li .informations p.more a:hover{
							background-position: -144px -34px;
							color: #dd0d72;
						}
				#products ul.slides li .media{
					height: 400px;
					position: absolute;
					right: 50px;
					top: -50px;
					width: 400px;
				}
		#products ul.navigation{
			
		}
			#products ul.navigation li{
				margin: -55px 0 0 0;
				position: absolute;
				top: 50%;
				z-index: 50;
			}
			#products ul.navigation li.previous{
				left: -30px;
			}
			#products ul.navigation li.next{
				right: -30px;
			}
				#products ul.navigation li a{
					background: url(../img/home-products-navigation.png) no-repeat 0 0;
					display: block;
					height: 110px;
					overflow: hidden;
					text-indent: -9999px;
					width: 110px;
				}
				#products ul.navigation li.next a{
					background-position: -110px 0;
				}
	
	/* Focus (plaisir du moment) */	
	#focus{
		background: url(../img/home-focus.png) no-repeat 0 0;
		height: 272px;
		margin: 0 10px;
		width: 620px;
		z-index: 3;
	}
		#focus h2,
		#focus h2 a,
		#focus h3 a:hover{
			color: #ba0d15;
		}
		#focus h3,
		#focus p{
			margin-right: 240px;
		}
		#focus img{
			position: absolute;
			right: 20px;
			top: 46px;
		}
		#focus p.more a{
			background-position: 0 -152px;
			color: #e8522f;
		}
		#focus p.more a:hover{
			background-position: 0 -182px;
			color: #4cb148;
		}
	
	/* Recette */
	#recipe{
		background: url(../img/home-recipe.png) no-repeat 0 0;
		height: 272px;
		margin: 0 10px;
		width: 620px;
	}
		#recipe h2,
		#recipe h2 a,
		#recipe h3 a:hover{
			color: #e8522f;
		}
		#recipe h3{
			padding-right: 80px;
		}
		#recipe p.more a{
			background-position: 0 -122px;
			color: #f5a427;
		}
		#recipe p.more a:hover{
			background-position: 0 -152px;
			color: #e8522f;
		}
	
	/* Actualites */
	#news{
		background: url(../img/home-news.png) no-repeat 0 0;
		height: 366px;
		margin: 0 10px;
		width: 300px;
		z-index: 1;
	}
		#news h2,
		#news h2 a,
		#news h3 a:hover{
			color: #b3db29;
		}
			#news h3 em{
				color: #004427;
			}
		#news p.more a{
			background-position: 0 -182px;
			color: #4cb148;
		}
		#news p.more a:hover{
			background-position: 0 -152px;
			color: #e8522f;
		}
	
		#recipe img,
		#news img{
			background: #fff;
			-webkit-box-shadow: 0 0 4px rgba(0, 0, 0, .4);
			-o-box-shadow: 0 0 4px rgba(0, 0, 0, .4);
			-moz-box-shadow: 0 0 4px rgba(0, 0, 0, .4);
			box-shadow: 0 0 4px rgba(0, 0, 0, .4);
			display: block;
			float: left;
			margin: 20px;
			padding: 5px;
		}
		#news img{
			margin-top: 0;
		}
	
	/* Partager */
	#facebook{
		background: url(../img/home-share.png) no-repeat 0 0;
		height: 178px;
		margin: 0 10px;
		width: 300px;
	}
		#facebook h2{
			display: none;
		}
		#facebook p.more{
			margin: 0;
		}
		#facebook p.more a{
			background: url(../img/home-facebook.png);
			float: none;
			height: 135px;
			margin: 20px auto;
			padding: 0;
			text-indent: -9999px;
			width: 268px;
		}
	
	#home #bowl{
		left: 140px;
		position: absolute;
		top: 230px;
		z-index: 2;
	}


/* PIED DE PAGE */
	
#footer{
	background: url(../img/footer.png) no-repeat center top;
	bottom: 0;
	height: 62px;
	left: 0;
	overflow: hidden;
	padding: 22px 0 0 0;
	position: absolute;
	width: 100%;
}
	#footer-inner{
		margin: 12px auto 0 auto;
		position: relative;
		width: 960px;
	}
	.ie7 #footer-inner{
		margin-top: 33px;
	}
	#footer p{
		color: #fff;
		font-family: DINCondBoldRegular, Arial, Helvetica, sans-serif;
		font-size: 13px;
		line-height: 14px;
		margin: 0 0 0 150px;
		text-transform: uppercase;
	}
	
	/* LOGO */
	#footer #sill{
		left: 20px;
		position: absolute;
		margin: 0;
		top: -6px;
	}
		#footer #sill img{
			display: block;
		}
	
	/* LIENS */
	#footer #links,
	#footer #sections-repeat{
		width: 400px;
	}
	#footer #sections-repeat{
		color: #badbea;
	}
		#footer p a,
		#footer #sections-repeat a:hover{
			color: #fff;
			text-decoration: none;
		}
		#footer #sections-repeat a,
		#footer p a:hover{
			color: #badbea;
		}
		
	/* MEMBRE DE */
	#footer #member{
		line-height: 58px;
		margin: 0;
		position: absolute;
		right: 180px;
		top: -10px;
	}
		#footer #member img{
			margin: -2px 0 0 10px;
			vertical-align: middle;
		}
