/* Le CSS de BALTRINGUE 

En premier les règles pour les résolutions Ordi / tablettes > 480px
*/

@font-face {
    font-family: 'Eurostile';
    src: url('ressources/Eurostile.ttf') format('truetype');
}
@font-face {
    font-family: 'SpookyMonsta';
    src: url('ressources/SpookyMonsta.ttf') format('truetype');
}
#conteneur_nav
{
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.5em;       
    background-color: rgba(32, 34, 32, 0.048);
    box-shadow: 1px 1px 1px rgb(44, 48, 44) inset;
    border-radius: 5px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    width: 1024px;
    margin: auto;
}
#conteneur_nav a
{
    text-decoration: none;
    color:rgb(238, 16, 90); 
    font-style: normal   ;
}

#conteneur_nav a:hover
{
    text-decoration: underline;
    color:rgb(16, 238, 116);
    font-style: italic;    
}

h2
{
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.9em;
    text-align: center;
    width: 1024px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 20px;
}

h3
{
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.3em;
    text-align: justify;
    /*background-color: rgba(32, 34, 32, 0.048);
    border: 1px green inset;
    border-style: none;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgb(44, 48, 44) inset;*/
    padding: 5px;
    width: 1024px;
    margin: auto;
    margin-top: 20px;
    margin-bottom: 4px;
}

ul
{
    list-style-type: circle;
}

table
{
    width: 1024px;
    margin: auto;
    border-collapse: collapse;
}

th, tfoot
{
    border: 1px solid black;
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.2em;
    text-align:center;
    background-color: rgba(32, 34, 32, 0.048);
    color:rgb(238, 16, 90);
    padding: 5px;
}

td
{
    border: 1px solid black;
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.2em;
    text-align:center;
    padding: 5px;
}

.td_gauche
{
    text-align: left;
}

p, li
{
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.2em;
    text-align:justify;
    padding: 5px;
    width: 1024px;
    margin: auto; 
}

figure
{
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    font-size: 1.2em;
    text-align:center;
    padding: 5px;
    width: 1024px;
    margin: auto;    
}

a
{
    text-decoration: none;
    color:rgb(16, 238, 116);
    font-style: italic;
}

a:hover
{
    text-decoration: underline;
    color: red;
}

strong, em
{
    color:rgb(238, 16, 90);
}

.strong_vert
{
    color:rgb(16, 238, 116); 
    font-weight: bold;  
}

.introduction
{
    text-align:justify;   
}

#tetiere
{
    text-align:center;   
}

.footer
{
    font-family: 'Eurostile', 'Verdana', 'sans-serif';
    color:gray;
    background-color: rgba(32, 34, 32, 0.048);
    border-style: none;
    border-radius: 5px;
    box-shadow: 1px 1px 1px rgb(44, 48, 44) inset;
    text-align:center;
    padding: 5px;
    /*
    border: 2px green inset;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 50px;*/
    width: 1024px;
    margin: auto;
}

.signature
{
    text-align:right;    
}

.notabene
{
    text-align:justify;
    font-size: 1em;
    font-style: italic;    
}

.separateur
{
    text-align:center;
    font-family: 'comic sans ms', 'Verdana', 'sans-serif'; 
    font-size: 0.8em;   
}

.souligne
{
    text-decoration: underline;
}

.barre
{
    text-decoration: line-through;
}

.imageflottante
{
    float:left;  
}

@media all and (max-device-width: 480px)
{
    /*règles pour les smartphones*/
    @font-face 
    {
        font-family: 'Eurostile';
        src: url('ressources/Eurostile.ttf') format('truetype');
    }

    @font-face 
    {
        font-family: 'SpookyMonsta';
        src: url('ressources/SpookyMonsta.ttf') format('truetype');
    }

    #conteneur_nav
    {
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.5em;       
        background-color: rgba(32, 34, 32, 0.048);
        box-shadow: 1px 1px 1px rgb(44, 48, 44) inset;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        height: 50px;
        width: auto;
    }

    #conteneur_nav a
    {
        text-decoration: none;
        color:rgb(238, 16, 90); 
        font-style: normal   ;
    }

    #conteneur_nav a:hover
    {
        text-decoration: underline;
        color:rgb(16, 238, 116);
        font-style: italic;    
    }

    h2
    {
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.9em;
        text-align: center;
        width: auto;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    h3
    {
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.3em;
        text-align: justify;
        padding: 5px;
        width: auto;
        margin-top: 20px;
        margin-bottom: 4px;
    } 

    ul
    {
        list-style-type: circle;
    }

    table
    {
        width: auto;
        margin: auto;
        border-collapse: collapse;
    }

    th, tfoot
    {
        border: 1px solid black;
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.2em;
        text-align:center;
        background-color: rgba(32, 34, 32, 0.048);
        color:rgb(238, 16, 90);
        padding: 5px;
    }

    td
    {
        border: 1px solid black;
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.2em;
        text-align:center;
        padding: 5px;
    }

    .td_gauche
    {
        text-align: left;
    }

    p, li
    {
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.2em;
        text-align:justify;
        padding: 5px;
        width: auto;
        
    }

    figure
    {
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        font-size: 1.2em;
        text-align:center;
        padding: 5px;
        width: auto;    
    }

    a
    {
        text-decoration: none;
        color:rgb(16, 238, 116);
        font-style: italic;
    }

    a:hover
    {
        text-decoration: underline;
        color: red;
    }

    strong, em
    {
        color:rgb(238, 16, 90);
    }

    .strong_vert
    {
        color:rgb(16, 238, 116); 
        font-weight: bold;  
    }

    .introduction
    {
        text-align:justify;   
    }

    #tetiere
    {
        text-align:center;
    }

    .footer
    {
        font-family: 'Eurostile', 'Verdana', 'sans-serif';
        color:gray;
        background-color: rgba(32, 34, 32, 0.048);
        border-style: none;
        border-radius: 5px;
        box-shadow: 1px 1px 1px rgb(44, 48, 44) inset;
        text-align:center;
        padding: 5px;
        width: auto;
    }

    .signature
    {
        text-align:right;    
    }

    .notabene
    {
        text-align:justify;
        font-size: 1em;
        font-style: italic;    
    }

    .separateur
    {
        text-align:center;
        font-family: 'comic sans ms', 'Verdana', 'sans-serif'; 
        font-size: 0.8em;   
    }

    .souligne
    {
        text-decoration: underline;
    }

    .barre
    {
        text-decoration: line-through;
    }

    .imageflottante
    {
        float:left;  
    }
}