/*  GLOBAUX  ============================================================= 
Mise en forme de formulaires
Origine et exemple d'utilisation :   http://www.fredcavazza.net/tutoriels/formulaire/SVF_apres.htm
Voir aussi : http://www.svay.com/blog/index/2004/07/27/147-petits-trucs-css-a-utiliser-les-plus-souvent-possible (voir les commentaires)

Utilisation du focus :
<label for="prenom" title="Veuillez saisir votre prnom" class="oblig">* Prnom :</label>
<input type="text" name="prenom" id="prenom" title="Veuillez saisir votre prnom" tabindex="2" onfocus="this.className='focus';" onblur="this.className='normal';" />
Utilisation du script de validation : 
<script type="text/javascript" src="formValidation.js"></script>
*/

input[null], input[null] {
    width : 3000px;
}


textarea {
    width : 250px;
    height : 25em;
}


label {
    /*cursor : hand;*/
    Text-align : right;
    Color : rgb(102 , 102 , 102);
    Font-weight : bold;
}


/* pour IE */
input[null]:focus, input[null]:focus, textarea:focus {
    border-color : rgb(221 , 221 , 221) black rgb(238 , 238 , 238) rgb(153 , 153 , 153);
    border-top-width : 2px;
    border-right-width : 0px;
    border-bottom-width : 0px;
    border-left-width : 2px;
}


select {
    font-size : 10px;
    width : 150px;
}



/*  ID  ============================================================= */
#login {
/* <form name="inscription" id="login" method="get" action="#" onsubmit="return validateForm(this)"> */
    border : none;
    margin : 0px;
    padding : 0;
    width : 100%;
}


#inscription {
/* <form name="inscription" id="inscription" method="get" action="#" onsubmit="return validateForm(this)"> */
    border : none;
    margin : 0;
    padding : 0;
    width : 100%;
}


/*** Largeur du formulaire ***/
#modifcat {
/* <form name="inscription" id="modifcat" method="get" action="#" onsubmit="return validateForm(this)"> */
    border : none;
    margin : 0;
    padding : 0;
    width : 90%;
}


/*** Largeur du formulaire ***/
#titreForm, #piedForm {
/*** Mise en forme du titre et du pied de formulaire ***/
    font : bold 1.1em verdana , arial , hevetica , sans-serif;
    color : white;
    background : #0099cc;
    margin : 0;
    padding : 0.5em;
}


#piedForm {
    text-align : right;
}


/*** Les boutons sont aligns  droite ***/
#piedForm input {
    font-weight : bold;
    /*** Pour amliorer la lisibilit des boutons ***/
    margin-left : 1em;
}


#corpForm {
/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
    border : 0px solid black;
    color : black;
    /*background : rgb(239 , 239 , 239);*/
    margin : 0;
    padding : 1em;
}


#corpForm fieldset {
/*** Mise en forme des cadres ***/
    margin : 0;
    font-style : normal;
    padding : 0 1em 1em;
	border-color: #FFFFFF;
}


#corpForm legend {
/*** Mise en forme des titres des cadres ***/
    border: 0px solid #4475ce;
/*    background:#FFFFFF;*/
    color: #666;
    text-transform: uppercase;
}
#corpForm legend.alert {
    color:#FF0000;
}

#corpForm p {
/*** Mise en forme des lignes du formulaire ***/
    padding : 0.5em 0;
    margin : 0 0 0.5em 0;
}


#corpForm fieldset label {
/*** Mise en forme des intituls de champs ***/
    float : left; 
    width : 25%;
    text-align : right;
    margin : 0;
    padding : 0 2em 0 0;
    line-height : 1.8em;
}


#corpForm label:hover, #piedForm input {
    cursor : pointer;
}


/*** Petite astuce pour apprendre aux utilisateurs  cliquer sur les intituls ***/
#corpForm label.oblig {
    font-weight : bold;
}


/*** Mise en vidence des champs obligatoires ***/
#corpForm .legende {
/*** Mise en forme des aides contextuelles ***/
    font-style : italic;
    color : rgb(102 , 102 , 102);
    background : transparent;
    margin : 0;
    padding : 0;
}


#corpForm a.aide {
/*** Mise en forme des bulles d'aide ***/
    text-decoration : none;
}


#corpForm a.aide img {
/*** Mise en forme de l'image des bulles d'aide ***/
    margin : 0;
    padding : 0;
    border : 0;
}


#corpForm a.aide:hover {
/*** Le curseur de la souris change d'aspect quand il passe au-dessus d'une bulle d'aide ***/
    cursor : help;
}


#corpForm .focus {
/*** Mise en avant des champs en cours d'utilisation ***/
    background : #eee;
    color : black;
}


#corpForm .normal {
/*** Retour  l'tat normal aprs l'utilisation ***/
    background : white;
    color : black;
}


#corpForm .alerte /*** Mise en forme des messages d'erreur ***/ {
    border : 1px solid red;
}


#corpForm .messageAlerte {
/*** Mise en forme des message d'alerte ***/
    display : block;
    margin : 0 0 0.3em 0.3em;
    padding-left : 2em;
    color : red;
    font-weight : bold;
    background : url("icon_alert.gif") no-repeat left center;
}


.gras {
    font-weight : bold;
}