/* ----------------------- */
/* partie gauche, features */
/* ----------------------- */
#gauche {position:absolute;left:0;top:0;width:270px;border:0px solid #f00;}
	#gauche #visuel {display:block;width:260px;margin:5px;height:337px;border:0px dotted #03c;}
	#gauche #animation {position:absolute;left:47px;top:41px;display:block;width:176px;height:208px;}

	ol#etapes {list-style:none;margin:5px;border:0px dotted #03c;}
		#etapes li {color:#03C;font-weight:bold;border:0px dotted #f00;}
		#etapes .puce {margin:.5em;width:33px;height:33px;vertical-align:middle;}
		#etapes .puce3 {float:left;margin:.5em;width:33px;height:33px;vertical-align:middle;}
		#etapes #spuce3 {color:#03C;font-weight:bold;position:relative;top:8px;}

	ul#demos {clear:both;list-style:none;margin:56px 13px 0;border:0px dotted #03c;}
		#demos li {margin:8px 0;border:0px dotted #f00;}
		#demos li a {font-size:.9em;color:#03C;border:0px dotted #f00;}
		
/* ------------- */
/* partie droite */
/* ------------- */
#droite {position:absolute;left:285px;top:0;width:712px;border:0px solid #0f0;}

	/* titre de la partie droite */
	#droite h1 {padding:.3em 0;text-align:center;font-size:1.2em;background-color:#03c;color:#fff;}
		#droite h1 strong {font-size:1em;background-color:#03c;color:#fff;}
		
	/* conteneur des 3 étapes d'enregistrement */
	#droite ol {margin:5px .3em;list-style:none;}

		#droite li {position:relative;margin-bottom:3px;border:1px solid #fff;}
		#droite li div {position:relative;}
	
		#droite .b1, #droite .b2, #droite .b3, #droite .b4 {position:absolute;width:15px;height:15px;background:no-repeat;z-index:1;}
		#droite .b1 {left:0;top:0;}
		#droite .b2 {right:0;top:0;}
		#droite .b3 {right:0;bottom:0;}	
		#droite .b4 {left:0;bottom:0;}

		#droite li * {background:#bfcfff;}

	/* -------------------------------- */
	/* partie de récolte d'informations */
	/* -------------------------------- */

	/* ---------------------- */
	/* DIVs de droite des LIs */
	/* ---------------------- */
	#droite .question {float:left;width:450px;height:120px;border:1px solid #fff;}

		#droite .question h3 {margin:.5em 0;text-align:center;}
		#droite .question h4 {margin:1em 0;text-align:center;}
		#droite .question p {margin:.5em 0;text-align:center;}
		#droite .question img.osi {margin-right:1em;vertical-align:middle;width:55px;height:55px;}

		/* ------------ */
		/* vignettes OS */
		/* ------------ */
		#droite .question .os {float:left;margin:.75em 0 0 12px;width:130px;border:1px solid #03c;}
			#droite .question .os img {display:block;float:left;vertical-align:top;width:55px;height:55px;border-right:1px solid #03c;}
			#droite .question .os dl {margin-left:55px;height:55px;font-size:.9em;}
			#droite .question .os dl dt {margin-bottom:.3em;text-align:center;font-weight:bold;background:#03c;color:#fff;}
			#droite .question .os dl dd {text-align:center;font-size:.8em;}
			#droite .question .os dl dd.ddlast .submit {margin:.2em 0 0 0;padding:0 .2em;width:60px;font-size:1em;}

		/* ---------------------- */
		/* éléments de formulaire */
		/* ---------------------- */
		#droite .question label {font-weight:bold;}
		#droite .question input {vertical-align:middle;margin:.75em 0 .15em 0;background:#fff;border:1px solid #000;}
			#droite .question .text {}
				#droite .question #fmel {width:250px;}
/* "bug" sous IE si l'on met le background à une couleur pour une CHECKBOX, il y a un contour de cette couleur autour de la CHECKBOX */
/* => fond bleu sous Opera */
			#droite .question .check {margin:0 .3em 0 1em;border:none;background:transparent;}
/* on met un léger padding pour Opera car IE et FF en ont un par défaut autour de la VALUE du SUBMIT */
			#droite .question .submit {margin-left:1em;padding:0 3px;cursor:pointer;}
			#droite .question .submit:hover {background:#809fff;}
		#droite .question select {font-size:.9em;font-weight:normal;background:#fff;border:1px solid #03c;}
			#droite .question option {padding-left:3px;background:#fff;}
		
		/* -------------------- */
		/* vignettes TELEPHONES */
		/* -------------------- */
		#droite .question #vignettes {position:relative;margin:20px 10px 0;width:430px;height:150px;overflow-y:scroll;overflow:auto;border:0px solid #000;border-top:none;}

			#vignettes .vi dl {float:left;margin:0 5px 5px 0;font-size:.9em;border:1px solid #03c;}
			#vignettes .vi dl dt {padding:2px 0;width:75px;text-align:center;font-weight:bold;background:#03c;color:#fff;}
			#vignettes .vi dl dd {text-align:center;font-size:.9em;}
			#vignettes .vi dl dd input.f_image {display:block;margin:0;padding:0;width:75px;height:75px;border:0;}
			#vignettes .vi dl dd img {display:block;width:75px;height:75px;}
			#vignettes .vi dl dd .submit {margin:0;width:75px;font-size:.95em;letter-spacing:.1em;border:none;border-top:1px solid #03c;}
			#vignettes .vi dl dd .submit:hover {background:#809fff;}

	/* ---------------------------------- */
	/* partie de réaction aux soumissions */
	/* ---------------------------------- */

	/* DIVs de gauche des LIs */
	#droite .reponse {margin-left:457px;width:240px;height:120px;border:1px solid #fff;}
		
		#droite .reponse h3 {margin:.5em 0;text-align:center;}

		#droite .reponse p {margin:15px .5em 3px;font-size:.9em;line-height:1.25em;text-align:justify;}
			#droite .reponse p strong {font-size:1em;}
			#droite .reponse p br {line-height:1em;}
		#droite .reponse p.psubmit {margin:.5em 0;text-align:center;border:0px solid #0f0;}
		#droite .reponse p.plsubmit {margin:1em;text-align:center;}


		#droite .reponse ul {margin:.5em 0 1em 1.5em;list-style:circle;}
			#droite .reponse ul li {font-size:.8em;border:none;}

		#droite .reponse label {font-weight:bold;font-size:.9em;}
		#droite .reponse input {vertical-align:middle;background:#fff;border:1px solid #000;}
			#droite .reponse .text {margin:0 0 0 .3em;width:70px;}
/* on met un léger padding pour Opera car IE et FF en ont un par défaut autour de la VALUE du SUBMIT */
			#droite .reponse .submit {margin-top:3px;padding:0 3px;cursor:pointer;font-size:.9em;}
			#droite .reponse .submit:hover {background:#809fff;}
		#droite .reponse select {margin:0 1em 0 0;width:80px;font-size:1em;background:#fff;border:1px solid #000;}
			#droite .reponse option {padding-left:3px;background:#fff;font-size:1em;}
		
		#pntel {position:relative;width:300px;left:15px;padding:.5em;border:1px solid #36c;}
		#pntel label {margin-left:1em;}
		
	
		/* hauteur des LIs pour le choix des téléphones */
		#droite #qlast, #droite #rlast {height:220px;}

		#droite .reponse .prlast {margin:.75em .5em;}
			#droite .reponse .prlast select {width:170px;}
			#droite .reponse .prlast input {width:100px;}
			#droite .reponse .plsubmit .submit {margin-top:.25em;}

	/* ----------------------------------------- */
	/* pour les parties attendant une validation */
	/* ----------------------------------------- */
	
	/* fond gris clair, police gris foncé */
	#droite .inactif *,
	#droite .inactif .question select, #droite .inactif .question option,
	#droite .inactif .os dl dt,
	#droite .inactif #vignettes dl dt {background:#ccc;color:#777;}
	
	/* bords grisés plus foncés que le fond gris */
	#droite .inactif input, #droite .inactif select,
	#droite .inactif .os,
	#droite .inactif #vignettes dl {border:1px solid #aaa;}

	#droite .inactif .os img {border-right:1px solid #aaa;}

	/* on ôte du flux les boutons de soumission */
	#droite .inactif .submit {display:none;}

	/* ------------------------- */
	/* pour les parties validées */
	/* ------------------------- */
	#droite .valide * {background:#809fff;}
	#droite .valide .question {float:none;position:relative;width:697px;height:70px;}
		#droite .valide .question p {margin:0;line-height:70px;}
		#droite .valide .question img {margin:0 .5em 0 .25em;border:1px solid #03c;}
		#droite .valide .question .b1 img, #droite .valide .question .b2 img, #droite .valide .question .b3 img, #droite .valide .question .b4 img {margin:0;border:0;}
	#droite .valide .reponse {display:none;}
	
	/* --------------------- */
	/* configuration requise */
	/* --------------------- */
	#droite p#config {margin-top:1.1em;font-size:.8em;color:#333;}
		#droite #config a {font-size:1em;color:#333;}
			#droite #config a sup {text-decoration:none;}
		#droite #config sup {margin:.1em;font-size:.9em;}
		#droite #config strong {font-size:1em;}