/**** FEUILLE DE STYLE SIMULATEUR SOLAREN ************************************************************************************/

/* Général */
#simulateur								{ width:740px; margin:20px auto; }
#simulateur .top						{ width:740px; height:60px; position:relative; background:url(../../images/simulateur/bg_top.gif) no-repeat 0 0; }
#simulateur .middle						{ width:740px; height:450px; position:relative; background:url(../../images/simulateur/bg_middle.gif) repeat-y 0 0; }
#simulateur .bottom						{ width:740px; height:102px; position:relative; background:url(../../images/simulateur/bg_bottom.gif) no-repeat 0 0; }

/* Header */
#simulateur .top div					{ position:absolute; top:-4px; left:10px; }
#simulateur .top span					{ color:#9baf23; font:normal 48px "Trebuchet MS", Arial; }
#simulateur .top strong					{ color:#fff; font:normal 18px "Trebuchet MS", Arial; text-transform:uppercase; }

/* Navigation Footer */
#navigation								{ position:absolute; top:-10px; left:10px; }
#navigation ul, #navigation ul li		{ margin:0; padding:0; list-style-type:none; list-style-image:none; }
#navigation ul li						{ display:inline; }
#back									{ position:absolute; top:10px; left:380px; }
#next									{ position:absolute; top:20px; right:12px; }

/**** ETAPE 1 : SAISIE DES DONNEES ************************************************************************************/
.etape									{ width:325px; height:210px; padding-left:25px; float:left; /*position:relative;*/ margin:0 0 10px 10px; background:url(../../images/simulateur/bg_etapes.gif) no-repeat 0 0; }
.etape .title							{ padding-left:60px; margin:5px 0 20px 0; color:#1e1e1e; font:normal 18px "Trebuchet MS", Arial; text-transform:uppercase; width:100px; background-repeat:no-repeat; background-position:0 0; }
#etape1 .title							{ background-image:url(../../images/simulateur/un.png); }
#etape2 .title							{ background-image:url(../../images/simulateur/deux.png); }
#etape3 .title							{ background-image:url(../../images/simulateur/trois.png); }
#etape4 .title							{ background-image:url(../../images/simulateur/quatre.png); }
.etape p								{ font-size:12px; font-weight:normal; color:#1e1e1e; line-height:12px; width:150px; }

#etape1 img								{ top:35px; left:200px; position:absolute;}
#etape2 img								{ top:35px; right:40px; position:absolute;}
#etape3 img								{ bottom:30px; left:200px; position:absolute;}
#etape4 img.inclinaison					{ bottom:30px; right:30px; position:absolute;}
#etape4 img.btn							{ cursor:pointer;}

.etape input, .etape select				{ margin:0; }
.etape input							{ width:140px; }
#etape4 input							{ width:50px;}
.etape select							{ width:110px; }

/* Formulaire */
.etape input[type=text],
.etape select							{ font-size:14px; color:#becd0a; border:2px solid #becd0a; background-color:#FFF;}
.etape input[type=text]:focus,
.etape select:focus						{ color:#ff9600; border:2px solid #ff9600;  }

#indicator								{ margin:0 10px; }

/**** ETAPE 2 : RESULTAT ************************************************************************************/
.result									{ width:329px; float:left; position:relative; margin:0 0 3px 25px; }
.result img								{ position:absolute; top:0; left:0; z-index:0; }
#result_kit								{ height:137px; }
#result_prod							{ height:137px; }
#result_co2 							{ height:137px; }
#result_gain							{ height:417px; float:right; margin:0 30px 0 0; }

#gain_value								{ visibility:hidden; }
#result_kit_value						{ visibility:hidden; }

.result .chiffre							{ z-index:100; position:absolute; top:50px; left:12px; text-align:center; width:280px; font:normal 24px "Trebuchet MS", Arial; }
.result .chiffre strong					{ font:normal 36px "Trebuchet MS", Arial; }
#result_kit .chiffre						{ color:#1e1e1e; }
#result_prod .chiffre					{ color:#ff9600; }
#result_co2 .chiffre 					{ color:#003282; }
#result_gain .gain						{ color:#9baf23; z-index:100; position:absolute; top:125px; left:12px; text-align:center; width:250px; font:normal 60px "Trebuchet MS", Arial; }

.result .jauge							{ position:relative; width:260px; margin:95px 0 0 20px; text-align:left; }
.result .jauge .cursor					{ position:absolute; top:-6px; width:8px; height:38px; }

#result_kit .jauge .result_kit_cursor	{ left:0px; }
#result_prod .jauge .cursor				{ left:120px; }
#result_co2 .jauge .cursor 				{ left:100px; }


/**** ETAPE 3 : CONTACTER SOLAREN ************************************************************************************/
.contact								{ width:729px; height:450px; margin-left:2px; background:url(../../images/simulateur/bg_tournesol.jpg) no-repeat 100% 0; }
.contact .intro							{ width:669px; height:116px; margin:0 auto; color:#fff; background:url(../../images/simulateur/bg_help.gif) no-repeat 100% 100%; }
.contact .intro p						{ font:normal 18px "Trebuchet MS", Arial; text-transform:uppercase; margin:0 0 0 55px; padding-top:10px; line-height:16px; }
.contact .intro strong					{ color:#1e1e1e; font:normal 30px "Trebuchet MS", Arial; display:block; }
.contact .intro ul						{ margin:15px 0 0 10px; padding:0; list-style-type:none; list-style-image:none; }
.contact .intro ul li					{ margin:0 10px 0 0; padding:0; display:inline; font:normal 14px "Trebuchet MS", Arial; text-transform:uppercase; }

.contact table							{ width:400px; margin:20px auto; }
.contact td								{ font:normal 12px Arial; color:#969696; }
.contact td input[type=text]			{ width:350px; }
.contact label							{ font:normal 24px "Trebuchet MS", Arial; color:#fff; float:right; text-transform:uppercase; }
.contact td.mention						{ color:#fff; background-image:url(../images/black-70.png); padding:0 5px; }

.contact input[type=text],
.contact select							{ font-size:24px; color:#1e1e1e; background-color:#f2f5ce; border:2px solid #becd0a; }
.contact input[type=text]:focus,
.contact select:focus					{ color:#ff9600; border:2px solid #ff9600; }