﻿/***********************************************************************
* Masterpage.css
* - Généralités
* - Container principal
* - Encart Evian Royal
* - Footer
*
* Pages internes
* - Page Presentation
* - Page Etape 1
* - Page Etape 2
* - Page Validation
***********************************************************************/
	#popUp-mentions, #popUp-reglement, #popUp-reglement-parrainage {width:511px; height:410px; padding:20px; display:none; position:absolute; top:140px; left:50%; margin-left:-225px; color:#999999; background:url(/Images/V0/bg_popup.gif) no-repeat}
	#popUp-mentions {z-index:98;}
	#popUp-reglement, #popUp-reglement-parrainage {z-index:99;}
	#popUp-mentions a.closeReglement, #popUp-reglement a.closeReglement, #popUp-reglement-parrainage a.closeReglement{display:block; position:absolute; top:10px; right:10px;}
	#popUp-mentions h2, #popUp-reglement h2, #popUp-reglement-parrainage h2 { padding:15px 0; font-size:12px; text-align:center}
	#popUp-reglement h2 {padding:10px 0;}
	#popUp-mentions p, #popUp-reglement p, #popUp-reglement-parrainage p { padding-bottom:5px; font-size:11px;}
	#popUp-reglement p {line-height:13px;}
	#popUp-mentions p a {color:#999999}
/* - Généralités ******************************************************/
* { margin:0; padding:0; }

body	
{
    font-family: Arial, Sans-Serif;
    font-size:12px;
}
a img { border-style: none;
    border-color: inherit;
    border-width: medium;
}

fieldset { border:none;position:relative; }

.TextBox { border:1px solid #abdff5; }

/* Mise en forme pour les erreurs */
.TextBox-error { border-color:#EE0062; }
.Label-error { color:#EE0062; }
.MessageErreur {position:absolute; top:125px; left:50%; margin-left:-110px; z-index:98; width:350px; text-align:center; font-weight:bold; color:#ee0062; border:1px solid #ee0062; padding:5px; background-color:#fff;}

.clear {clear:both; height:1px; font-size:.1em;}

/* - Container principal **********************************************/
#container
{
	position:relative;
	margin:10px auto 0;
	width:1023px;
	height:620px;
    background:url(/Images/V0/background.jpg) no-repeat left top;
}

	.logo 
	{
		position:absolute;
		width:274px;
		height:124px;
		left:0px;
		top:0px;
		display:block;
		z-index:1px;
	}
	
	.main
	{
		position:relative;
		left:313px;
		top:68px;
		width:710px;
		height:509px;
	}
	
	.etape
	{
		position:relative;
		height:84px;
		width:710px;
	}
	
		.etape h2
		{
			position:absolute;
			left:15px;
		}
		
	.content
	{
		position:relative;
		overflow:hidden;
		width:582px;
		height:395px;
		padding:0 15px 15px 15px;
		color:#616161;
		background:url(/Images/V0/main.gif) no-repeat left bottom;
		
	}
	
		.content h3
		{
			color:#f272ab;
			margin-bottom:15px;
		}
	
		.content h4
		{
			font-size:19px;
			font-weight:bold;
			color:#ee0062;
		}
		.content h4 .mentions {float:right; color:#aeaeae; font-size:9px;}
		.content .bouton-suivant
		{
			position:absolute;
			right:35px;
			bottom:5px;
		}
		
		.content fieldset .champs-obligatoires
		{
			position:absolute;
			top:6px;
			right:0;
			color:#a5a5a5;
			font-size:9px;
		}
		.content p.retourAccueil
		{
		    margin-top:40px;
		}

/* - Encart Evian Royal ***********************************************/
.side
{
    position:absolute;
    left: 5px;
    top: 170px;
    width:298px;
    height:333px;
    color:#fff;
    background:url(/Images/V0/inscription.gif) no-repeat left top;
}

	.side .infos
	{
		position:absolute;
		left:44px;
		top:135px;
	}

	.side .reglement
	{
		position:absolute;
		left:44px;
		top:200px;
		font-size:10px;
	}
	
		.side a {text-decoration:underline; color:#fff;}


/* - Footer ***********************************************************/
.footer 
{
	position:absolute;
	top:590px;
	left:45px;
	text-align:center;
    width:100%;
    height:20px;
    color:#93117e;
    font-size:11px;
}

	.footer a {color:#bbbaba;text-decoration:none;padding:0 12px;}
	.footer a img {vertical-align:middle;}
	.footer a:hover{text-decoration:underline;}

/* - intro flash ************************************************/

	#intro {margin:0 auto; background:#fff; position:relative; z-index:99;}

/* - Page Presentation ************************************************/
.page-presentation .content {padding-top:15px}
.page-presentation .content p 
{
	clear:both;
	margin-bottom:12px;
}

	.page-presentation .content p span
	{
		padding-top:10px;
		display:block;
	}

	.page-presentation .content p img
	{
		float:left;
		margin-left:-15px;
		margin-right:5px;
	}
	
	.page-presentation .content p em
	{
		font-weight:bold;
		font-style:normal;
		color:#fe9c2f;
	}
	
	.page-presentation .extra1
	{
		position:absolute;
		right:-2px;
		top:106px;
	}
	.page-presentation .mention
	{
		position:absolute;
		left:15px;
		bottom:15px;
		color:#aeaeae;
		font-size:10px;
	}
	
/* - Page Etape 1 *****************************************************/
.page-etape1 .etape {height:104px;}
	.page-etape1 .etape h2
	{
		left:0;
		top:6px;
	}
.page-etape1 .intro { margin-bottom:10px; }
	.page-etape1 .intro em
	{
		font-weight:bold;
		font-style:normal;
		font-size:15px;
		color:#015fa7;
	}
	
.page-etape1 .mention
{
	position:absolute;
	left:15px;
	bottom:15px;
	color:#aeaeae;
	font-size:9px;
}

.page-etape1 fieldset
{
	height:270px;
}

	.page-etape1 fieldset p
	{
		position:absolute;
		bottom:0;
		right:0;
	}
	
		.page-etape1 fieldset p label
		{
			width:80px;
			float:left;
			padding-top:2px;
			.padding-top:4px;
			_padding-top:4px;
		}
		.page-etape1 fieldset p .RadioButtonList label { float:none; padding:0 30px 0 5px; }
		
		
		/* position */
		.page-etape1 fieldset .field1 {left:0; top:25px;}
		.page-etape1 fieldset .field2 {left:0; top:50px;}
		.page-etape1 fieldset .field3 {left:0; top:75px;}
		.page-etape1 fieldset .field4 {left:0; top:100px;}
		.page-etape1 fieldset .field5 {left:115px; top:100px;}
		
		.page-etape1 fieldset .field6 {left:0; top:125px;}
		.page-etape1 fieldset .field7 {left:0; top:150px;}
		.page-etape1 fieldset .field8 {left:115px; top:150px;}
		
		
		.page-etape1 fieldset .field9 {left:0; top:175px;}

		.page-etape1 fieldset .field10 {left:295px; top:50px;}
		.page-etape1 fieldset .field11 {left:295px; top:75px;}
		.page-etape1 fieldset .field12 {left:295px; top:100px;}
		.page-etape1 fieldset .field13 {left:295px; top:125px;}
		.page-etape1 fieldset .field14 {left:295px; top:150px;}
		
		
		/* labels */
		.page-etape1 fieldset .field10 label, 
		.page-etape1 fieldset .field11 label,
		.page-etape1 fieldset .field12 label,
		.page-etape1 fieldset .field13 label,
		.page-etape1 fieldset .field14 label  {width:125px;}
		
		.page-etape1 fieldset .field5 label,
		.page-etape1 fieldset .field8 label {width:42px;}
		.page-etape1 fieldset .field9 label {width:145px;}
		
		
		/* input */
		.page-etape1 fieldset .field2 .TextBox,
		.page-etape1 fieldset .field3 .TextBox,
		.page-etape1 fieldset .field6 .TextBox {width:185px;}
		
		.page-etape1 fieldset .field4 .TextBox,
		.page-etape1 fieldset .field7 .TextBox {width:25px;}
		
		.page-etape1 fieldset .field8 .TextBox {width:50px;}
		
		.page-etape1 fieldset .field5 .TextBox {width:108px}
		.page-etape1 fieldset .field9 .TextBox {width:120px; .width:119px; _width:119px;}
		.page-etape1 fieldset .field10 .TextBox {width:60px;}
		
		.page-etape1 fieldset .field11 .TextBox,
		.page-etape1 fieldset .field12 .TextBox,
		.page-etape1 fieldset .field13 .TextBox,
		.page-etape1 fieldset .field14 .TextBox  {width:160px; }
		
		* html .page-etape1 fieldset .field11 .TextBox,
		* html .page-etape1 fieldset .field12 .TextBox,
		* html .page-etape1 fieldset .field13 .TextBox,
		* html .page-etape1 fieldset .field14 .TextBox  {width:155px;}
		
		/**/
		.page-etape1 fieldset .field15 {left:0; top:200px;}
		.page-etape1 fieldset .field16 {left:0; top:220px;}
		
		.page-etape1 fieldset .field15 label,
		.page-etape1 fieldset .field16 label,
		.page-etape1 fieldset .field17 label {width:485px; padding-top:0; .padding-top:3px; _padding-top:3px;}
		.page-etape1 fieldset .field16 .RadioButtonList {}
		.page-etape1 fieldset p.field15 .RadioButtonList label,
		.page-etape1 fieldset p.field16 .RadioButtonList label,
		.page-etape1 fieldset p.field17 .RadioButtonList label 
		{
			float:none; padding:0 8px 0 5px;
			.padding:0;
			_padding:0;
		}
        .page-etape1 fieldset .field17 {left:0; top:260px;}
/* - Page Etape 2 *****************************************************/
	
	.page-etape2 .etape {height:105px;}
	.page-etape2 .etape h2 {
		left:0;
		top:6px;
	}
	.page-etape2 h4 {padding-bottom:5px; clear:both; font-size:17px}
	.page-etape2 .mention {
		padding-top:7px;
		color:#aeaeae;
		font-size:9px;
	}
	.page-etape2 .BtnRetour {position:absolute; left:15px; bottom:5px;}
	.page-etape2 .BtnNext {position:absolute; right:15px; bottom:5px;}
	
	.page-etape2 p {clear:both; margin-bottom:5px; .margin-bottom:2px}
	.page-etape2 p .mentions {color:#aeaeae; font-size:11px;}
	
	.page-etape2 p label {width:280px; float:left; padding-top:2px; .padding-top:4px; _padding-top:4px;}
	
	.page-etape2 p .TextBox {width:30px}
	
	.page-etape2 .votreBebe {clear:both; padding-top:15px; display:table; width:100%; background:url(/Images/V0/visuImg.gif) right bottom no-repeat}
	
	.page-etape2 .votreBebe p label {width:170px;}
	.page-etape2 .votreBebe p input {width:150px;}
	.page-etape2 .votreBebe p .RadioButtonList {float:left}
	.page-etape2 .votreBebe p .RadioButtonList label {width:60px; margin-bottom:5px}
	.page-etape2 .votreBebe p .RadioButtonList input {float:left; width:auto; margin-right:5px}
	.page-etape2 .votreBebe p .TextBox.babyBirthDayMonth {width:25px;} 	
	.page-etape2 .votreBebe p .TextBox.babyBirthYear {width:40px;} 
	
	.page-etape2 .accesContenus {clear:both; padding-top:20px}
	.page-etape2 .accesContenus p label {width:200px;}
	.page-etape2 .accesContenus p input {width:100px;}



/* - Page Etape 3 *****************************************************/	
	.page-etape3 .etape {height:105px;}
	.page-etape3 .etape h2 {
		left:0;
		top:6px;
	}
	
	.page-etape3 h4 {padding-bottom:15px;}
	
	.page-etape3 p {clear:both; min-height:25px; _height:25px; padding-bottom:5px}
	.page-etape3 p label {float:left; padding-top:2px; .padding-top:4px; _padding-top:4px;}
	.page-etape3 p input {float:left;}
	.page-etape3 p .RadioButtonList label {width:50px;}

	.page-etape3 .magasin label {padding-right:10px}
	.page-etape3 .magasin .RadioButtonList input {margin-right:5px}
	
	.page-etape3 .localisation {padding-bottom:0}
	.page-etape3 .localisation label,
	.page-etape3 .enseigne label {width:90px}
	.page-etape3 .enseigne input {width:172px}
	.page-etape3 .localisation input {width:40px}
	.page-etape3 .localisation label.city {width:45px; padding-left:5px}
	.page-etape3 .localisation input.city {width:80px}
	
	.page-etape3 .frequence {padding-bottom:15px}
	.page-etape3 .frequence label {float:none; display:block; padding-bottom:5px}
	.page-etape3 .frequence .RadioButtonList label, .page-etape3 .frequence .RadioButtonList input {float:none; display:inline; clear:none }
	.page-etape3 .frequence .RadioButtonList label {padding-right:10px}
	.page-etape3 .frequence .RadioButtonList input {margin-right:5px}
	
	.page-etape3 .adoucissant label,
	.page-etape3 .chatBebe label,
	.page-etape3 .laveVaisselle label {width:200px}
	.page-etape3 .adoucissant .RadioButtonList label,
	.page-etape3 .chatBebe .RadioButtonList label,
	.page-etape3 .laveVaisselle .RadioButtonList label {padding-right:20px; padding-left:5px}

	.backgroundContainer {background:url(/Images/V0/visuImg2.gif) 380px bottom no-repeat}

	.page-etape3 .mention {
		position:absolute; left:15px; bottom:60px;
		color:#aeaeae;
		font-size:9px;
	}
	.page-etape3 .BtnRetour {position:absolute; left:15px; bottom:5px;}
	.page-etape3 .BtnNext {position:absolute; right:15px; bottom:5px;}

/* - Page Validation *****************************************************/
	.validation .content {width:612px; height:405px; padding:0; background-position:0 bottom}
	.validation .etape {height:105px;}
	.validation .etape h2 {
		left:0;
		top:6px;
	}
	.validation h4 {padding-left:15px}
	.validation .mention { position:absolute; left:0; bottom:0; width:595px; height:35px; padding:140px 0 15px 15px; color:#aeaeae; font-size:9px; background:url(/Images/V0/bg_validation.gif) no-repeat }
	.descriptionLot {margin-top:20px; position:relative;}
	.descriptionLot .evianLink {display:block; position:absolute; right:15px; top:0}
	.descriptionLot p {padding:15px 0 0 15px}
	.descriptionLot p a {font-size:10px; color:#aeaeae}
	
	.avantages {clear:both; color:#ee0062; margin:20px 0; padding-left:15px;}
	
	.arrowLink {color:#ff9b30; text-decoration:none; padding-left:15px; margin-left:15px; background:url(/Images/V0/puce.gif) no-repeat}
	.arrowLink:hover {text-decoration:underline;}

	.oisouille {position:absolute; right:80px; bottom:110px; display:none}
	
	
	.link {color:#ee0062;}


/******************Sticker parrainage****************************/
#sticker_parrainage {position:absolute; top:195px; left:60px; background:url(/Images/formV2/bg-sticker-parrainage.png) no-repeat right top; width:267px; height:292px; text-align:center;}
#sticker_parrainage #sticker_conteneur {margin:70px auto 0 auto;width:180px;}                     
#sticker_parrainage .titre {margin-left:15px; color:#ffa200; font-size:1.2em; font-weight:bold;}
#sticker_parrainage .accroche {margin-left:15px; color:#005eaa; font-size:1.1em; font-weight:bold;} 
#sticker_parrainage .contenu {margin-left:15px; color:#005eaa;}
#sticker_parrainage .lien a {color:#aeaeae; font-size:.9em;}


