/*

<div class="page-info">
   <p>Pour créer mon compte, je commence par donner par donner des informations sur <strong>moi</strong> et <strong>mon véhicule</strong></p>
   <small>Des infos en plus sur chaque champ en les survolant avec la souris</small>
   <small>Les champs obligatoires sont signalés par une étoile.</small>
</div>

<form ...>

  <div class="form-error">
    <html:errors/>
  </div>

  <div class="fieldset-rightInfo"> (definition d'une section qui comprend : une liste de champs a remplir et une description à droite)

    <fieldset class="fieldset-inputs"> (groupe d'inputs)
      <legend><span>Moi</span></legend> (entete du groupe)

		<p class="fieldset-info">...</p>
		
       <div class="fieldset-errors"> (TO CHECK les erreurs de la section)
          <html:errors/>
       </div>

       <div class="inputs inputs-rightLabels">
          <div class="input required"> (champ obligatoire)
            <label ...>Prenom ou pseudo
              <em class="input-tooltip">c'est comme ça que mes covoitureurs m'identifiront</em>  (apparaitra en tooltip sur focus du champ)
              (ou) <em>c'est comme ça que mes covoitureurs m'identifiront</em>  (apparaitra en dessous de l'input ?)
              (ou) <strong>doit être renseigné</strong> (message d'erreur)
            </label><input ...>
          </div>

          <div class="input error">  (champ optionnel en erreur)
            ...
          </div>

          <div class="checkbox required">
            <input /><label>  (le label doit venir après pour accessibilité?)
          </div>

          <div class="fieldset-radios">
            <fieldset> (groupe de radio)
              <legend><span>Je possède un véhicule</span></legend> (label du groupe de radio)
              <label for="yesVehicule"
                   <html:radio property="vehicule" value="T"  tabindex="7" />
                   Oui</label> (le label doit venir après pour accessibilité?)
              ...
            </fieldset>
          </div>
          
          (A T-ON BESOIN DE input et inputs NE PAS UTILISER POUR L'INSTANT?)
          <div class="inputs"> (groupe d'input sur une ligne)
            <label><input /> <label class="hidden"> (pas visible à l'écran)<input /> ...
          </div>

       </div>
    </fieldset>
  </div>

  <div class="form-actions">
  	<input type="submit" value="Valider" class="submit" />
  ...
  </div>
  
  title on label / fieldset _labelTitleTooltip on input => TO EXPLAIN
  
</form>


*/

.page-lrv form {
  /*width: 650px;*/
  /*margin: 0 0 5em 0;*/
}


.page-lrv form .form-error {
  color: red;
  font-size: 1em;
}

.page-lrv .fieldset-rightInfo {
	/*width: 650px;*/
	position: relative;
	padding: 2.5em 1em 1em 0em;
	/* ici ou dans form fieldset */
	clear: both; /* note that this clear causes inputs to break to left in ie5.x mac */
  font-size: 1em;
}

.page-lrv #content form .fieldset-rightInfo fieldset p.fieldset-info {
	font-size: 1em;
	margin-left: 5px;
	padding-top: 10px;
}

.page-lrv .fieldset-errors {
 	color: red;
}

.page-lrv .fieldset-rightInfo fieldset {
	border: none;
	border-top: 1px solid #FA8815;
	padding: 10px 0 0 0;
	margin: 0;
}

.page-lrv .fieldset-rightInfo legend span {
  position: absolute;
  top: 0.8em;
  left: 0;
  font-weight: bold;
  font-size: 1.2em;
  font-weight: normal;
  color: #F77D1B;
  margin: 0;
  padding: 0 5px;
}

.page-lrv .inputs .input {
  clear: left;
  display: block;
			__width: 380px; /* for ie at least */
/* NECESSARY FOR IE ? 
  height: expression('1%'); 
*/
  margin: 5px 0 0 0;
  padding: 1px 3px;
  position: relative;
  width:700px;
}

.page-lrv .inputs .input.required label {
  font-weight: bold;
}

.page-lrv .inputs .input.error label {
  color: red; /* TODO */
}

.page-lrv .inputs.inputs-rightLabels .input label {
	display: block;  /* block float the labels to left column, set a width */
	float: left;
	width: 170px;
	padding: 0;
	margin: 5px 0 0 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right;
	
margin-right: 10px;
}

.page-lrv .inputs .input input, 
.page-lrv .inputs .input textarea {
	/* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
	width: auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
	margin: 5px 0 0 10px; /* set margin on left of form elements rather than right of
	                             label aligns textarea better in IE */
	/*float:left;  FD CHECK */

margin-left: 0;
}

.page-lrv textarea { 
	overflow: auto; 
}

.page-lrv .fieldset-radios {
  position: relative;
  /* sur .fieldset
  width: 700px;
  position: relative;
  padding: 2.5em 1em 0.5em 1em; */
  /* ici ou dans .radios fieldset */
	clear: both; /* note that this clear causes inputs to break to left in ie5.x mac */
  font-size: 1em;
  /*
  border-color: #000000;
  border-width: 1px 0 0 0;
  border-style: solid none none none;*/
  /*padding: 10px;    padding in fieldset support spotty in IE
  margin: 0 0 0 0; */
}

.page-lrv .fieldset-radios fieldset {
  border: none; /* facvtoriser avec form fieldset */
  /*border:1px solid blue;*/
}

.page-lrv .fieldset-radios legend span {
  /*top: 0em; left: 0; padding-top: 0;*/

  /* pas bien sur ? valeur par défaut de legend span */
  /*position: absolute;*/
  /*width: 29em;*/
  font-weight: normal;
  color: black;

   /* ici ou dans .radios fieldset legend */
  font-size: 1em; /* bump up legend font size, not too large or it'll overwrite border on left */
  margin: 5px 0 0 0;
  padding: 0;  /* be careful with padding, it'll shift the nice offset on top of border */

	/* comme */
	display: block;  /* block float the labels to left column, set a width */
	float: left;
	width: 170px;
	padding: 0;
	margin: 0; /* set top margin same as form input - textarea etc. elements */
	text-align: right;
	/* border: 1px solid red;*/
}

.page-lrv .inputs .fieldset-radios fieldset legend {
  margin: 0;
  padding: 0;
}

.page-lrv .inputs .fieldset-radios {
  clear: left;
  display: block;
  width: 500px; /* FD CHECK BOX MODEL!!! */
/*  height: expression('1%'); FD CHECK !!!!!!!!!*/
  margin: 0;
  padding: 0 3px;
}

.page-lrv .fieldset-radios label {
 /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
 width: auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
 margin: 0; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.page-lrv .fieldset-radios input {
  /* display: inline; inline display must not be set or will hide submit buttons in IE 5x mac */
  width: auto;      /* set width of form elements to auto-size, otherwise watch for wrap on resize */
  margin: 0 0 0 180px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.page-lrv .input img {
	display:inline;
}

.page-lrv .input .select {
	/*margin-left: 10px;*/
}

.page-lrv input:focus, 
.page-lrv select:focus, 
.page-lrv textarea:focus {
	background: #FFEFCF;
	color: black;
	/*font-size: 1.2em;*/
}

.page-lrv .labelTitleHint {
	position: absolute;
	right: 0;
	width: 200px;
	padding: 5px;
	/*border: 1px solid black;*/
	background: #FFEFCF;
	font-weight: normal;
	z-index: 2;
	text-align: justify;
}

.page-lrv .fieldset-actions {
	margin-top: 10px;
	margin-left: 185px; /* CHECK */
}

.page-lrv .form-actions {
	clear: both;
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid #F77D1B;
	text-align: right;
}

.page-lrv .fieldset-actions input.button {
	font-size: 1em;
	font-weight: bold;
	border: 1px solid black;
	background: white url(../../common/img/pictos/button.png) bottom left no-repeat;
	padding: 3px;
	cursor: pointer;
}

.page-lrv .form-actions input.submit, 
.page-lrv .fieldset-actions input.submit {
	font-size: 1em;
	color: white;
	background: #F77D1B;
	padding: 3px;
	cursor: pointer;
	font-weight: bold;
}

.page-lrv .form-actions input.submit {
	font-size: 1em;
}

/*
http://www.websiteoptimization.com/speed/tweak/forms/
http://www.tyssendesign.com.au/articles/html/forms/legends-of-style/
*/