/******************/
/* CSS INFOTELEC */
/******************/

/* Mise en forme générale */
body { 
	background-color: #DBDDDF; /* Couleur de fond de la page */
	color: #000000; /* Couleur du texte */
	font-family: Verdana, Arial, Helvetica, sans-serif; /* Polices du texte */
	font-size: 11px; /* Taille du texte */
	padding: 0px; /* Pour que la page n’ai aucune marge */ 
	margin: 0px; /* Pour que la page n’ai aucune marge */ 
} 

/* Mise en forme menu + contenu */
div#contenu { 
	background-image: url('./images/fond.jpg'); /* Image contenant le menu + le contenu */
	background-repeat: repeat-y; /* On autorise la répétition verticale */
	width: 800px; /* Largeur du design */
	margin: 0 auto 0 -400px; /* Marges du design ( la 4eme marge représente la moitié de la largeur du div */ 
	position: absolute; /* On place la forme en absolue */
	top: 25px; /* 25px entre le coin supérieur de l’écran et le design */ 
	left: 50%; /* 50% de marge ( cela centrera le design ) */ 
}   

/**********/
/* HEADER */
/**********/

/* Mise en forme haut */
div.haut {
	background-image: url('./images/haut.jpg'); /* Image du haut du header */
	background-repeat: no-repeat; /* On autorise pas la répétition de l'image */
	height: 41px; /* Hauteur de l'image */
	width: 800px; /* Largeur de l'image */
}

/* Mise en forme header */
div.header {
	background-image: url('./images/header.jpg'); /* Image du header */
	background-repeat: no-repeat; /* On autorise pas la répétition de l'image */
	height: 88px; /* Hauteur de l'image */
	width: 800px; /* Largeur de l'image */
}

/* Mise en forme images header */
.imghead {
	display: inline; /* On affiche les images sur une même ligne */
	height: 29px; /* Hauteur de l'image */
	border: 0px; /* On supprime toute bordure */
}

/********************/
/* MENU DE GAUCHE */
/********************/

/* Mise en forme menu */
div .menu {
	margin-left: 0px; /* Aucune marge  à gauche du menu */
	margin-top: 10px; /* Marge du haut du menu */
	margin-bottom: 10px; /* Marge du bas du menu */
	margin-right: 0px; /* Aucune marge à droite du menu */
	padding-right: 10px; /* Marge intérieure afin d'empêcher aux liens de dépasser du menu */
	float: left; /* On fait flotter le menu à gauche (indépendant du contenu de droite) */
}

/* Mise en forme liens */
ul , li {
	margin-left: 12px; /* Marge de gauche pour les liens afin de les décoller du bord */
	margin-top: 0px; /* Aucune marge en haut des liens */
	margin-bottom: 2px; /* Marge du bas pour les liens afin de les espacer entre-eux */
	margin-right: 0px; /* Aucune marge à droite des liens */
	padding: 0; /* Aucune marge intérieure */
	list-style-type: none; /* Aucun style */
}

/* Mise en forme séparateurs */
div .separateur {
	margin-left: 11px; /* Marge de gauche pour les séparateurs afin de les coller au bord */
	margin-top: 7px; /* Marge en haut pour les séparateurs afin de les décoller des liens */
	margin-bottom: 7px; /* Marge en bas pour les séparateurs afin de les décoller des liens */
}

/*************/
/* CONTENU */
/************/

/* Cadre de bienvenue accueil */
div .accueil {
	width: 619px; /* Largeur du cadre de bienvenue */
	height: 296px; /* Hauteur du cadre de bienvenue */
	margin-left: 168px; /* Marge de gauche pour placer le cadre correctement */
}

/* Degradé de haut de page */
div .degrade {
	background-image: url('./images/degrade.jpg'); /* Image de fond de l'annonce */
	width: 616px; /* Largeur du cadre de bienvenue */
	height: 32px; /* Hauteur du cadre de bienvenue */
	margin-left: 168px; /* Marge de gauche pour placer le cadre correctement */
}

/* Cadre de présentation */
/**********************/

/* Mise en forme cadre */
div .presentation {
	width: 616px; /* Largeur de l'image */
	height: 199px; /* Hauteur de l'image */
	margin-left: 168px; /* Marge de gauche pour placer l'annonce correctement */
	margin-bottom: 0px;
}

div .boitedialogue {
	width: 606px; /* Largeur de l'image */
/*	height: 125px;  Hauteur de l'image */
	height: auto;
	margin-left: 175px; /* Marge de gauche pour placer l'annonce correctement */
	margin-top: 10px;
	margin-bottom: 10px;
}

/*****************/
/* NE SERT PAS !!! */

/* Mise en fome titre */
p.titrepresentation {
	font-size: 12px; /* Taille du titre */
	color: #1C0083; /* Couleur du titre */
	font-weight: bold; /* Style gras du titre */
	font-family: Verdana, Arial, serif; /* Police du titre */
	padding-right: 10px; /* Marge intérieure de droite pour éviter que le texte ne déborde */
	position: absolute; /* On place le titre en position absolue */
	top: 160px; /* On indique à quel emplacement placé le titre par rapport au haut */
	left: 200px; /* On indique à quel emplacement placé le titre par rapport à la gauche */
}

/* Mise en forme texte */
p.textepresentation {
	font-size: 12px; /* Taille du texte */
	color: #000000; /* Couleur du texte */
	font-family: Verdana, Arial, serif; /* Police du texte */
	padding-right: 5px; /* Marge intérieure de droite pour éviter que le texte ne déborde */
	position: absolute; /* On place le texte en position absolue */
	top: 190px; /* On indique à quel emplacement placé le texte par rapport au haut */
	left: 165px; /* On indique à quel emplacement placé le texte par rapport à la gauche */

}

/* NE SERT PAS !!! */
/*****************/

/* Mise en forme contenu texte */
div .texte {
	margin-left: 168px; /* Marge de gauche pour placer correctement le contenu texte */
	margin-top: 0px; /* Aucune marge en haut du contenu texte */
	margin-bottom: 10px; /* Aucune marge en bas du contenu texte */
	margin-right: 0px; /* Aucune marge à droite du contenu texte */
	padding-right: 10px;
	padding-bottom: 0px;
}

div .jdtexte {
	font-size: 12px; /* Taille du texte */
	color: #000000; /* Couleur du texte */
	font-family: Verdana, Arial, serif; /* Police du texte */
	text-align: center;
	margin-left: 168px; /* Marge de gauche pour placer correctement le contenu texte */
	margin-top: 0px; /* Aucune marge en haut du contenu texte */
	margin-bottom: 10px; /* Aucune marge en bas du contenu texte */
	margin-right: 0px; /* Aucune marge à droite du contenu texte */
	padding-right: 10px;
	padding-bottom: 0px;
}

/* Mise en forme textes */
p {
	margin-left: 10px; /* Marge de gauche pour décaler correctement le texte */
	margin-top: 0px; /* Marge de haut pour décaler correctement le texte */
	margin-bottom: 0px; /* Marge de bas pour décaler correctement le texte */
	padding-right: 10px; /* Aucune marge intérieure */
	padding-bottom: 0px;
}

table {
	margin-left: 10px;
}

/***********/
/* FOOTER */
/**********/

/* Mise en forme footer */
div#footer { 
	background-image: url('./images/footer.jpg'); /* Image de fond du footer */
	width: 800px; /* Largeur du footer */
	height: 40px; /* Hauteur du footer */
}

/*********/
/* LIENS */
/*********/

/* Mise en forme liens normaux */
a {
	color: #2375BF; /* Couleur des liens textes */
	text-decoration: none; /* Aucun style sur les liens textes */
}

/* Mise en forme liens en survol */
a:hover {
	color: #64A2EC; /* Couleur des liens textes en survol */
}

/*********/
/* Autres */
/*********/

/* Mise en forme style h1 */
h1 {
	background-image: url('./images/h1.jpg'); /* Image de fond du style h1 */
	background-repeat: no-repeat; /* On autorise pas la répétition de l'image */
	height: 29px; /* Hauteur de l'image */
	width: 605px; /* Largeur de l'image */
	margin-right: -17px; /* Marge de droite du style h1 afin de la coller au coté droit */
	float: right; /* On fait flotter le style h1 à droite afin qu'il ne soit pas positionner aprés le menu */
	margin-bottom: 5px; /* Marge en bas du style h1 afin qu'il ne soit pas coller au texte du dessous */
	margin-top: 10px; /* Marge en haut du style h1 afin qu'il ne soit pas coller au texte du dessus */
	padding-left: 30px; /* Marge intérieure de gauche afin que le titre h1 soit correctement placer (aprés le carré) */
	padding-top: 4px; /* Marge intérieure du haut afin que le titre h1 soit centrer par rapport au carré */
	font-size: 12px; /* Taille du titre h1 */
	color: #1C0083; /* Couleur du titre h1 */
	font-family: Verdana, Arial, serif; /* Police du titre h1 */
}

/* Mise en forme style h2 */
h2 {
	background-image: url('./images/h2.jpg'); /* Image de fond du style h1 */
	background-repeat: no-repeat; /* On autorise pas la répétition de l'image */
	height: 33px; /* Hauteur de l'image */
	width: 105px; /* Largeur de l'image */
	margin-left: 500px;
	margin-bottom: 0px;
	margin-top: 5px;
	padding-left: 20px;
	padding-top: 8px;
	font-size: 12px; /* Taille du titre h1 */
	color: #1C0083; /* Couleur du titre h1 */
	font-family: Verdana, Arial, serif; /* Police du titre h1 */
}

/* Mise en forme style h3 */
h3 {
	background-image: url('./images/h3.jpg'); /* Image de fond du style h1 */
	background-repeat: no-repeat; /* On autorise pas la répétition de l'image */
	height: 33px; /* Hauteur de l'image */
	width: 164px; /* Largeur de l'image */
	margin-left: 445px;
	margin-bottom: 0px;
	margin-top: 5px;
	padding-left: 20px;
	padding-top: 8px;
	font-size: 12px; /* Taille du titre h1 */
	color: #1C0083; /* Couleur du titre h1 */
	font-family: Verdana, Arial, serif; /* Police du titre h1 */
}

/* Mise en forme des images */
.imgGauche {
	/* float:left; /* On fait flotter l'image à gauche  */
	margin-right: 10px; /* Marge de droite pour décoller l'image de tout texte ou autre */
	margin-top: 10px; /* Marge du haut pour décoller l'image de tout texte ou autre */
	margin-bottom: 10px; /* Marge du bas pour décoller l'image de tout texte ou autre */
}

fieldset {
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

/* Div de dégagement */
div.clear {
	clear: both; /* On place ce qui suit en dessous de chacun des boîtes flottantes plus haut */
}

/**********************/
/* CSS FORMULAIRES */
/*********************/

#AlloPass {
  border: none;
	margin: 0;
	padding: 0;
	margin-left: auto;
  margin-right: auto;
	width: 350px;	/*** Largeur du tableau ***/
}

#validCommand1 {
  border: none;
	margin: 0;
	padding: 0;
	margin-left: auto;
  margin-right: auto;
	width: 200px;	/*** Largeur du formulaire ***/
}

#validCommand2 {
  border: none;
	margin: 0;
	padding: 0;
	margin-left: auto;
  margin-right: auto;
	width: 105px;	/*** Largeur du formulaire ***/
}

#inscription {
	border: none;
	margin: 0;
	padding: 0;
	margin-left: auto;
  margin-right: auto;
	width: 50em;	/*** Largeur du formulaire ***/
}
#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	margin: 0;
	padding: .5em;
}
#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	margin: 0;
	padding: 0;
}
#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	padding: 0;
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: italic;
	color: black;
	background: transparent;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: 0;
	margin: 0;
}

#inscription {
	border: none;
	margin: 0;
	padding: 0;
	margin-left: auto;
  margin-right: auto;
	width: 50em;	/*** Largeur du formulaire ***/
}
#titreForm, #piedForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: black;
	margin: 0;
	padding: .5em;
}
#piedForm {
	text-align: right; /*** Les boutons sont alignés à droite ***/
}
#piedForm input {
	font-weight: bold; /*** Pour améliorer la lisibilité des boutons ***/
	margin-left: 1em;
}
#corpForm {	/*** Mise en fome du corp du formulaire (bordure, couleur du fond...) ***/
	border: 1px solid black;
	color: black;
	background: #efefef;
	margin: 0;
	padding: 1em;
}
#corpForm fieldset {	/*** Mise en forme des cadres ***/
	margin: 0;
	font-style: normal;
	padding: 0 1em 1em;
}
#corpForm legend {	/*** Mise en forme des titres des cadres ***/
	font-weight: bold;
	color: black;
	background: transparent;
}
#corpForm p {	/*** Mise en forme des lignes du formulaire ***/
	padding: .2em 0;
	margin: 0 0 .2em 0;
}
#corpForm fieldset#coordonnees label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 30%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}
#corpForm fieldset#commande label {	/*** Mise en forme des intitulés de champs ***/
	float: left;	/*** Très important, ne pas suprimer ! ***/
	width: 50%;	/*** Les intitulés prennent 1/3 de la largeur totale du formulaire... ***/
	text-align: right;	/*** ... et ils sont alignés à droite... ***/
	margin: 0;
	padding: 0 .5em 0 0;
	line-height: 1.8;	/*** ... et centrés verticalement. ***/
}
#corpForm label:hover, #piedForm input {
	cursor: pointer;	/*** Petite astuce pour apprendre aux utilisateurs à cliquer sur les intitulés ***/
}
#corpForm label.oblig {
	font-weight: bold;	/*** Mise en évidence des champs obligatoires ***/
}
#corpForm .legende {	/*** Mise en forme des aides contextuelles ***/
	font-style: italic;
	color: #666;
	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: beige;
	color: black;
}
#corpForm .normal {	/*** Retour à l'état normal après l'utilisation ***/
	background: white;
	color: black;
}

/** Mise en forme des messages d'erreur **/

#corpForm .alerte {	/** Mis en évidence des champs mal renseignés ***/
	border: 1px solid red;
}
#corpForm .messageAlerte {	/** Mise en forme des message d'alerte ***/
	display: block;
	margin: 0 0 .3em .3em;
	padding-left: 2em;
	color: red;
	font-weight: bold;
	background: url('images/icon_alert.gif') no-repeat left center;
}