/*
  But : mettre en forme la page html  
  Auteur : Nicolas Monnard
  Date :   07.06.2021 / V1.0
*/

/*===========================================================================*/
/*Titre*/


/* style appliqué au menu */
.title {
  background-color: black;
  width: 100%;
  padding-bottom: 3%;
  vertical-align: middle;
}

/* Style appliqués au bouton du menu */
.title a {
  background-color: inherit;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
}

/*===========================================================================*/
/*Boutons*/


/* Style appliqué au contenu du boutton */
.bouttonMenu{

  font-size: 150%;
  margin-right: 4%;
  margin-top: 2.5%;
  color: white;
  float: right;
  text-decoration: none;

}

/* Style appliqué au bouton */
.button {
  font-family: "Trebuchet MS", sans-serif;
  border: none;
  color: white;
  padding: 30px 50px;
  text-align: left;
  text-decoration: none;
  font-size: 16px;
  margin: 10px 2px;
  transition-duration: 0.4s;
  cursor: pointer;
}

/* Style appliqué au div contenant le bouton pour chercher */
.button2{

  text-align: center;
  width: 80%;
  height: 5cm;
  margin-right: auto;
  margin-left: auto;

}

/*===========================================================================*/
/*Inputs*/


/* Style appliqué au div contenant la bare de recherche */
.chercherBar{

  margin-top: 5%;
  text-align: center;

}

.chercherBar input[type=text] {

  width: 40%;
  background-color: white;
  background-image: url("searchicon.png");
  background-position: 10px 10px; 
  background-repeat: no-repeat;
  padding: 12px 20px 12px 40px;
  background-size: 20px;
  margin: 8px 0;
  display: inline-block;
  border: 2px solid black;
  border-radius: 4px;
  box-sizing: border-box;

}

.chercherBar select{

  width: 180px;

}

/* Style appliqué aux input de texte du login */
.login{

  margin-top: 2%;
  text-align: center;

}

.login input, select{

  width: 20%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 2px solid black;
  border-radius: 4px;
  box-sizing: border-box;

}

/*===========================================================================*/
/*ID spécifiques*/


/* Style appliqué au paragraphe qui va afficher les erreurs*/
#info{

  color: red;

}

/* Style appliqué au bouton pour valider le login*/
#valider {
  text-align: center;
  width: 10%;
  background-color: black;
  color: white;
  border: 2px solid black;
}

#valider:hover {
  background-color: white;
  color: black;
}

#body{

  font-family: "Trebuchet MS", sans-serif;
  margin-top: -1px;
  margin-left: -1px;
  margin-right: -1px;
  display: flex;
  flex-direction: column;

}

/*===========================================================================*/
/*captcha*/


/* style appliqué pour le captcha */
.g-recaptcha {
  display: inline-block;
}

  /* Ici, on retrouve la partie du css concernant les informations du joueur */

/*===========================================================================*/
/*div*/


  /* Style appliqué au container des informations */
.playerInfo{

  margin-left: 20%;
  margin-right: 20%;
  background-color: rgb(214, 214, 214);
  border: 2px solid black;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: center;

}

/*===========================================================================*/
/*Infos Clan du joueur*/


  /* Style appliqué à l'image du clan du joueur */
.infoClan{

  margin-bottom: -6%;

}

  /* Style appliqué au nom du clan */
.infoNomC{

  font-size: 200%;
  margin-bottom: -2%;

}

  /* Style appliqué à l'ID du clan */
.infoIdC{

  color: rgb(175, 175, 175);
  margin-top: 2%;

}

/*===========================================================================*/
/*Séparations*/


  /* Style appliqué à la barre horizontale pour séparer les données */
hr.solid {
  margin-left: 20%;
  margin-right: 20%;
  border-top: 3px solid #bbb;
}

.separationVert{

  border-left: 3px solid #bbb;
  margin-left: 5%;
  margin-right: 5%;
  
}

/*===========================================================================*/
/*Infos joueur*/


/* Style appliqué au div contenant les informations principales du joueur */
.infosF{

  align-content: center;
  margin-right: 25%;

}

  /* Style appliqué au nom du joueur */
.infoNomP{

  font-size: 200%;
  margin-bottom: -2%;

}

  /* Style appliqué à l'id du joueur */
.infoIdP{

  color: rgb(175, 175, 175);
  margin-top: 2%;

}

/* Style appliqué au rôle du joueur */
.infoRole{

  font-size: 150%;
  margin-top: -5%;

}

/*===========================================================================*/
/*Tableaux*/


  /* Style appliqué au 1er tableau  */
.tablJoueur{

  margin-left: 25%;
  margin-right: 25%;

}

  /* Style appliqué au 2ème tableau */
.tablJoueur2{

  margin-left: 20%;
  margin-right: 20%;

}

/*===========================================================================*/
/*Centrage*/


  /* Style appliqué aux objets pour les centrer */
.centreTab{

  width: 50%;
  text-align: center;
  vertical-align: top;
}

  /* Style appliqué aux objets pour les centrer */
.centreTab2{

  width: 25%;
  text-align: center;
  vertical-align: middle;

}

/* Style appliqué pour centrer le contenu */
.text-center {
  text-align: center;
}

/*===========================================================================*/
/*Infos Ligue Joueur*/


  /* Style appliqué aux infos sur le ligue */
.infosLeague{

  margin-left: 25%;

}

  /* Style appliqué au nom de ligue */
.infoNomL{

  font-size: 140%;
  margin-bottom: -2%;
  margin-top: -10%;

}

/*===========================================================================*/
/*Texte*/

  /* Style appliqué aux paragraphes */
.infosBrutText{

  text-align: left;
  margin-left: 15%;

}

  /* Style appliqué aux paragraphes */
.txt{

  margin-bottom: -4%;

}

/* Style appliqué au paragraphe de bienvenue */
.textBienvenue{

  margin-top: 5%;
  text-align: center;

}

/*===========================================================================*/
/*Images*/


  /* Style appliqué à l'image de la ligue du joueur */
  .imgLeague{

    width: 70%;
    height: 70%;
    margin-top: -4%;
  
  }

  /* Style appliqué à l'image de trophé */
.imgTrophy{

  width: 10%;
  height: 10%;

}

  /* Style appliqué à l'image de trophé */
.imgXp{

  width: 2%;
  height: 2%;

}

/* Style appliqué à l'image de l'hotel de ville */
.imgHdv{

  margin-top: -1%;

}

.imgHdv2{

  width: 300px;
  height: 300px;
  margin-top: -1%;

}

/* Style appliqués à l'image du menu (logo à gauche) */
.imgTitle{

  width: 10%;
  height: 10%;
  margin-left: 4%;
  padding-top: 1%;

}

/*===========================================================================*/
/*Erreur*/


  /* Style appliqué aux paragrphes qui sera afficher lors d'erreurs */
#Terreur{

  color: red;
  text-align: center;

}
  
/*===========================================================================*/
/*Map*/


  /* Style appliqué à la map de l'api google map */
.contentMap {
  border-radius: 25px;
  width: 80%;
  height: 10cm;
  margin-right: auto;
  margin-left: auto;
}
 
#map {
  height: 100%;
  margin-top: 50px;
}