/*
Commençons par les éléments <p class="titre">. Nous allons leur mettre ceci :

- background : couleur de fond du titre
- color : couleur du texte
- padding : un petit espace pour ne pas écrire juste au bord du cadre du titre
- font-size : pour définir la taille du texte
- border : une bordure de 2 pixels avec un effet sortant (ombre) avec une couleur définie
- position : nous plaçon le titre en position relative à son conteneur
- margin-bottom : nous mettons une marge de bas négative, ce qui fait que le titre viendra s'encastrer dans l'elément en-dessous
- width : la largeur du cadre du titre
- margin-left : marge à gauche du titre
- margin-top : marge au-dessus du titre
*/
p.titre {
  background:#DED983;
  color:#345071;
  padding:.2em .3em;
  font-size:1.2em;
  border:2px outset #DED983;
  position:relative;
  margin-bottom:-1em;
  width:15em;
  margin-left:1em;
  margin-top:1em;
}


/*
Ensuite nous allons configurer un peu les jeux de champs en appliquant un style sur tous les "fieldset" :

- border : on spécifie de ne pas mettre de bordures (on la mettra sur chaque jeu de champ au cas par cas)
- margin-bottom : marge du dessous
- width : la largeur des cadres de champs
- padding-top : espace en haut, pour laisser la place aux cadres de titres.

fieldset {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
}
*/
.PanelListe {
  border:none;
  margin-bottom:1em;
  width:780px;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}


/*
Puis un petit style général à toutes les listes déroulantes :

- margin-left : on spécifie une marge à gauche (pour laisser la place aux "labels" : légende des champs)
- margin-bottom : à 0, pas de marge en dessous.

select {
  margin-left:9em;
  margin-bottom:0;
}
*/

select {
  width:208px;
}

/*
A présent voyons le bloc (jeu de champs) "coordonnées" :

- background : nous allons lui spécifier une couleur de fond
- border : nous allons lui mettre une bordure "outset", donc qui va sortir derrière pour faire comme un effet d'ombre.
*/ 

/* fieldset coordonnees */
fieldset#Identification {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}
fieldset#formcamping {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}
fieldset#formicons {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}
fieldset#formusers {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}

fieldset#copierimages {
  border:none;
  margin-bottom:1em;
  width:870px;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}
fieldset#envoyerimages {
  border:none;
  margin-bottom:1em;
  width:870px;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}
fieldset#formpub {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}

fieldset#formcontact{
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#A4D8EE;
  border:outset #A4D8EE;
}


/*
Puis définissons un stylepour tous les labels du bloc coordonnées. Remarquez comment il est possible d'atteindre un sous-élément en CSS en spécifiant tout d'abord l'élement principal (ici dont l'id est "coordonnees"), puis un élément qui se trouve dans ce dernier (les label). Cela évite de devoir mettre des id ou class à tous les labels pour rien, d'autant qu'ils auront tous le même style :

- position : position absolue (relative à aucun autre élément)
- font-size : on spécifie une taille de police, ici 90% de la taille par défaut
- padding-top : un espace au-dessus du texte du label
- left : spécifie la position horizontale du coin haut gauche de l'élément (20 pixels) 

#addcamping label {
  position:absolute;
  font-size:90%;
  padding-top:.2em;
  left:20px;
}
*/ 
#Identification label {
	display: block;
	padding: 0 4px 4px 4px;
  font-size:90%;
  float: left;
  width: 20%;
}



/*
De la même façon, nous allons atteindre et mettre en forme tous les éléments de type input du bloc coordonnees :

- margin-left : une marge à gauche pour permettre de laisser de la place aux labels (légende des champs)
- line-height : on allonge l'interligne
- margin-bottom : on met une marge en-dessous pour ne pasque les champs se touchent. 
*/ 
#Identification input {
  line-height:1.4em;
  margin-bottom:.2em;
  width: 40%;
}

/* fieldset message */
fieldset#message {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#9DF2CE;
  border:outset #9DF2CE;
}
fieldset#popupfr, fieldset#popupen {
  border:none;
  margin-bottom:1em;
  width:42em;
  padding-top:1.5em;
  background:#9DF2CE;
  border:outset #9DF2CE;
}
fieldset#listeimages {
  border:none;
  margin-bottom:1em;
  width:870px;
  padding-top:1.5em;
  background:#9DF2CE;
  border:outset #9DF2CE;
}

/*
Pour la zône de texte du message, voici le style que nous allons appliquer (il n'y a qu'un élément textearea donc nous ne spécifions pas d'id ni class) :
- font : la police de caractère ; sa taille sera 0.8em et elle sera de type "Trebuchet MS" (ou Verdana ou sans-serif si la ou les polices précédentes n'existent pas)
- width : la largeur de la zone de texte
- padding : nous allons espacer le texte de la zone de 0.2em de façon à ne pas écrire trop sur le bord.
*/ 

/* zone de texte du message */
textarea {
  font:.8em "Verdana", sans-serif;
  width:500px;
  padding:.2em;
}

.TableauListe{
  font:.7em "Verdana", sans-serif;
}




/*
Pour finir, nous allons voir les boutons submit et reset. Vous l'aurez peut-être remarqué, ils n'ont pas de "class" dans le code html, alors comment allons nous les atteindre ? Et bien nous allons utiliser leur type en faisant input[type="submit"] pour le bouton submit et la meme chose avec le bouton reset.
Nous allons leur appliquer le même style, à savoir :

- background : une couleur de fond
- font : une police de 1.2em en taille et de type "Trebuchet MS" (ou Verdana ou sans-serif si la ou les polices précédentes n'existent pas)
- color : une couleur du texte

NB : notez que l'on peut appliquer le même style à plusieurs éléments en les séparant d'un virgule comme ci-dessous. 
*/ 

/* les boutons submit et reset */
input[type="submit"], input[type="reset"], input[type="button"] {
  background:#DED983;
  font:1.2em "Verdana", sans-serif;
  color:#345071;
}

/*
Enfin nous allons centrer les deux boutons.

Attention : ils vont logiquement se mettre au centre de la page web et non au centre du formulaire, pour remédier à cela vous pouvez faire un div conteneur qui contient tous les éléments de notre page web, en lui spécifiant la largeur du formulaire. Si les boutons sont dedans ils s'aligneront alors sur le formulaire et non la page. 
*/ 

p#buttons {
  text-align:center;
}


/* 
Conteneur identification
*/

#conteneur_Identification {
  width:22em;
  margin-left : 5em;
}

#conteneur_Admin {
	margin-left: auto;
  margin-right: auto;
  width:800px;
}