/*

<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>


*/










form {  /* set width in form, not fieldset (still takes up more room w/ fieldset width */
  width: 700px;
  /*margin: 0 0 5em 0;*/
}


form .form-error {
  color: red;
  font-size: 1.5em;
}

.fieldset-rightInfo {
 width: 700px;
 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: 1.4em;
}

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


.fieldset-errors {
 	color:red;
}

.fieldset-rightInfo fieldset {
	border: none;
	border-top:1px solid rgb(205,28,18);
}

.fieldset-rightInfo legend span {
  top: -2em; left: 0; padding-top: 0;
  /* pas bien sur ? valeur par défaut de legend span */
  position: absolute;
  top: 0.5em;
  left: 0em;
  font-weight: bold;
   /* ici ou dans form fieldset legend */
  font-size: 1.4em; /* bump up legend font size, not too large or it'll overwrite border on left */
  font-weight: normal;
  color: rgb(205,28,18);
    margin: 0 0 0 0;
  padding: 0 5px;  /* be careful with padding, it'll shift the nice offset on top of border */
  width:600px;
}

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

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


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


.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;
}

.inputs .input input, .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 */
}

textarea { overflow: auto; }

.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; */
}


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


.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 0px;  /* 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: 172px;
   padding: 0;
 margin: 0 0 0 0; /* set top margin same as form input - textarea etc. elements */
 text-align: right;
/* border:1px solid red;*/

}

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

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

.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:0px 0 0 0px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.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:0px 0 0 180px; /* set margin on left of form elements rather than right of
                              label aligns textarea better in IE */
}

.input img {
 display:inline;
}

.input .select {
	margin-left:10px;
}

input:focus, select:focus, textarea:focus {
 background:rgb(255,248,210);
 color:black;
 /*font-size:1.2em;*/
}

.labelTitleHint {
 position: absolute;
 right: 0px;
 width: 200px;
 padding:5px;
 /*border: 1px solid black;*/
 background:rgb(255,248,210);
 font-weight:normal;
 z-index:2;
 text-align:justify;
}

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

.form-actions {
 clear:both;
 margin-top:10px;
 padding-top:10px;
 border-top:1px solid rgb(205,28,18);
 text-align:right;
}

.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;
}

.form-actions input.submit, .fieldset-actions input.submit, .action-button {
 font-size: 1em;
 color: white;
 background:rgb(91,169,43);
 padding: 3px;
 cursor: pointer;
 font-weight: bold;
}

.form-actions input.submit {
 font-size:1.4em;
}

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