/*
  But : Styliser la page HTML le document et divisé par pages, de haut en bas dans la page
  Auteur : Mathis Nicolet
  Date :   07.06.2021 / V1.0
 */

/*
######################################
######################################
   CSS Page Accueil
######################################
######################################
 */
/*
######################################
   CSS Commun
######################################
 */
body {
    background-image: url(../data/fond.jpg);
    font-family: Rockwell;
}

#gifChargement{
    text-align: center;
}
/*
######################################
   CSS Entete
######################################
 */

.barreNav {
    list-style-type: none;
    overflow: hidden;
    background-color: black;
}

.barreNavRight {
    float: right;
}

.barreNavLeft {
    float: left;
}

li a {
    display: block;
    color: white;
    text-align: center;
    padding: 8px;
    text-decoration: none;
    background-color: black;
}

#logoHeaderNav:hover {
    background-color: black;
}

li a:hover {
    background-color: white;
    color: black;
}

.active {
    background-color: red;
}


/*
######################################
   CSS DU FORMULAIRE DE RECHERCHE
######################################
 */
#formContainers {
    background-color: white;
    margin: 2%;
    border: 1px solid black;
}

fieldset {
    margin: 5px;
}

legend {
    font-size: 42px;
    margin: 0;
    font-family: Rockwell;
    text-transform: uppercase;
    color: white;
    text-shadow: -1px -1px 0 black,
    1px -1px 0 black,
    -1px 1px 0 black,
    1px 1px 0 black,
    1px 0px 0px red,
    0px 1px 0px red,
    2px 1px 0px red,
    1px 2px 0px red,
    3px 2px 0px red,
    2px 3px 0px red,
    4px 3px 0px red,
    3px 4px 0px red,
    5px 4px 0px red,
    3px 5px 0px black,
    6px 5px 0px black,
    -1px 2px 0 black,
    0 3px 0 black,
    1px 4px 0 black,
    2px 5px 0px black,
    2px -1px 0 black,
    3px 0 0 black,
    4px 1px 0 black,
    5px 2px 0px black,
    6px 3px 0 black,
    7px 4px 0 black
}

/*
    TOP LINE FORM
 */

#formTopLine label {
    display: block;
}

#formTopLine input[type=text] {
    margin: 5px;
    font-family: Rockwell;
    font-size: 16px;
    width: 99%;
    height: 25px;
    display: block;
    float: left;
}


/*
   BOTTOM LINE FORM
 */

.fieldBottom {
    display: block;
    width: 30%;
    float: left;
    margin: 5px;
}

.listeForm {
    width: 75%;
    height: 20px;
}

.fieldBottom input[type=button] {
    font-family: Rockwell;
    height: 30px;
    font-size: 16px;
    width: 50%;
    display: block;
    float: right;
    background-color: red;
    color: white;
    border: 2px solid black;
    border-radius: 10px;
}

.fieldBottom input[type=button]:hover {
    background-color: white;
    color: black;
}

/*
######################################
   CSS DU TABLEAU DE POKEMON
######################################
 */
#apercuContainers {
    text-align: center;
    display: none;
}

#PokeTabApercu {
    margin: 2%;
    width: 96%;
}

#nbPokemon {
    margin-left: 40%;
    margin-right: 40%;
    background-color: white;
    border: 6px solid red;
    border: 4px solid white;
    border: 2px solid red;
    border-radius: 10px;
    font-size: 20px;
    padding: 3px;
    font-weight: bold;
}

.pokemonField {
    background-color: white;
    text-align: center;
    font-weight: bold;
    width: 20%;
    padding: 5px;
    border: 10px transparent;
}

.jeremie {
    background-color: white;
    color: red;
    font-size: 30px;
    padding: 2px;
    border: black;
}

/*
######################################
   CSS Details Pokemon
######################################
 */
#detailsContainer{
    margin-left: 20%;
    margin-right: 20%;
    background-color: white;
    padding: 10px;
}
#imageContainer{
    display: inline-block;
    width: 49%;
}

#imageDetail{
    width: 50%;
}
#infoContainer{
    display: inline-block;
    width: 49%;
    border: 3px solid black;
    border-radius: 10px;
}
#listeDetails{
    text-align: left;
    list-style-type: none;
    font-size: 24px;
}

#listeDetails li{
    margin: 5px;
    padding: 10px;
}

#detailIdEtNom{
    background-color: darkgray;
    color: white;
    font-weight: bold;
}
    /*
    ##########################
    CSS Error
    ##########################
    */
#errorContainer{
    background-color: white;
    font-size: 28px;
    margin-left: 20%;
    margin-right: 20%;
}

    /*
    ######################################
    ######################################
       CSS Page Autre
    ######################################
    ######################################
     */
.contenu {
    background-color: white;
    border: 5px solid black;
    padding: 3%;
}

#pokeswag{
    text-align: center;
    margin: 5%;
}