﻿@import "style_commun.css";

    body {
        font-family: 'Arial','Open Sans', 'sans-serif';
        background: #FFFFFF;
        font-size: 100%;
        height: 100%;
    }

    .Main {
        margin: auto;
        width: 1175px;
        background: #FFFFFF;
        min-width: 1175px;
        font-size: 22px;
        margin-top: -25px;
    }

    .Boite {
        overflow: hidden;
        height: auto;
        margin-bottom: 15px;
        width: 100%;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -khtml-border-radius: 5px;
        border-radius: 5px;
    }

.Boite_Entete {
    background: #048894;
    /*background-image: url('../Skin/Logo/Back_Entete.jpg');*/
    display: inline-block;
    text-transform: uppercase;
    padding: 5px;
    margin: 0;
    text-shadow: none;
    font-size: 20px;
    line-height: 44px;
    font-weight: 500;
    position: relative;
    color: #FFFFFF;
    width: 100%;
    text-align: center;
}


    .Boite_Contenu {
        background-color: #f6f6f6;
        padding: 10px;
        float: left;
        width: 100%;
    }

    .Boite_Entete_Pale {
        background-color: #eaf9fe;
        color: #000000;
        padding: 10px;
        border-bottom: 1px solid #808080;
        font-weight: bold;
        font-size: 14px;
    }

    .Entete_Liste {
        background-color: #c0c0c0;
        color: #000000;
        border-bottom: 1px solid #808080;
        border-top: 1px solid #808080;
    }

    .Logo_Entete {
        /*width: 175px;*/
        height: 85px;
    }

    .Lien_Menu_Haut {
        color: #000000;
        text-decoration: none;
    }

    .Lien_Menu_Haut:hover {
        color: #313131;
        text-decoration: none;
    }

    .Coin_Rond {
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        -khtml-border-radius: 10px;
        border-radius: 10px;
    }

    .Coin_Rond_Gauche {
        -moz-border-radius: 10px 0px 0px 10px;
        -webkit-border-radius: 10px 0px 0px 10px;
        -khtml-border-radius: 10px 0px 0px 10px;
        border-radius: 10px 0px 0px 10px;
    }

    .Formulaire_Bouton_Menu_Gauche_Membre_Normal {
        font-size: 14px;
        color: #FFFFFF;
        background: #666666;
        padding: 10px;
        text-transform: uppercase;
        border: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
        margin-top: 10px;
        width: 100%;
    }

    .Formulaire_Bouton_Menu_Gauche_Membre_Normal:hover {
        background: #333333;
    }

    .Formulaire_Bouton_Menu_Gauche_Membre_Fonce {
        font-size: 14px;
        color: #ffffff;
        background: #333333;
        padding: 10px;
        text-transform: uppercase;
        border: none;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
        margin-top: 10px;
        width: 100%;
    }

    .Formulaire_Bouton_Menu_Gauche_Membre_Fonce:hover {
        background: #575353;
    }

.Formulaire_Bouton {
    font-size: 13px;
    color: #FFFFFF;
    background: #87b850;
    padding: 10px 26px;
    line-height: 12px;
    text-transform: uppercase;
    border: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    margin-top: 10px;
}

    .Formulaire_Bouton:hover {
        background: #048894;
    }

    .Formulaire_Bouton2 {
        font-size: 13px;
        color: #ffffff;
        background: #033e88;
        padding: 10px 26px;
        line-height: 12px;
        text-transform: uppercase;
        border: none;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
        margin-top: 10px;
    }

    .Formulaire_Bouton2:hover {
        background: #575353;
    }

    .Formulaire_Bouton_Rouge {
        font-size: 13px;
        color: #ffffff;
        background: #FF0000;
        padding: 10px 26px;
        line-height: 12px;
        text-transform: uppercase;
        border: none;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
        margin-top: 10px;
    }

    .Formulaire_Bouton_Rouge:hover {
        background: #575353;
    }

    .Formulaire_Bouton_Vert2 {
        font-size: 13px;
        color: #ffffff;
        background: #008000;
        padding: 10px 26px;
        line-height: 12px;
        text-transform: uppercase;
        border: none;
        outline: none;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
        border-radius: 2px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -o-border-radius: 2px;
        margin-top: 10px;
    }

    .Formulaire_Bouton_Vert2:hover {
        background: #06ba06;
    }

.Formulaire_Bouton_Ajout_TCT {
    font-size: 16px;
    color: #FFFFFF;
    padding: 10px 26px;
    line-height: 12px;
    text-transform: uppercase;
    border: none;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    -o-border-radius: 2px;
    margin-top: 10px;
    background: url('../images/Icone_Plus3.png');
    background-position: left;
    background-repeat: no-repeat;
    background-position-x: 15px;
    background-size: 15px;
    text-indent: 15px;
    background-color: #666666;
}

    .Formulaire_Bouton_Ajout_TCT:hover {
        background-color: #333333;
    }

    .Bouton_Nouvelle_Reservation {
        font-size: 14px;
        line-height: 30px;
        margin: auto;
        cursor: pointer;
        width:fit-content;
    }

    .Entete_Commun_Logo {
        background: url("../images/Logo/Logo.png");
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 30px;
        height: 90px;
        background-repeat: no-repeat;
        background-size: 172px 120px;
    }

    .Entete_Commun {
        width: 100%;
        height: 0px;
        padding: 10px;
        margin-bottom: 60px;
        margin-top: 25px;
    }

    .Entete_Navigation {
        margin-top: 30px;
        font-size: 16px;
    }

    .Entete_Complete {
        background-repeat: no-repeat;
        max-height: 125px;
        height: 125px;
        width: 100%;
        position: absolute;
        margin-top: 0px;
        opacity: 1;
        background-size: 100%;
        background-position: center;
        background-image: url('../Skin/Logo/image_top.jpg');
    }

    .Entete_Complete_Admin {
        background-repeat: repeat-x;
        height: 130px;
        width: 100%;
        position:relative;
        opacity: 1;
        background-size: 100%;
        background-position: center;
        background-image: url('../Skin/Logo/image_top.jpg');
        top:0px;
    }
    .Logo_Entete_Admin {
        height: 85px;
        margin-top: 30px;
    }

    .squaredFour label:after {
        /*Crochet checkbox stylisé*/
        content: '';
        width: 12px;
        height: 8px;
        position: absolute;
        top: 2px;
        left: 1px;
        border: 3px solid #FF0000;
        border-top: none;
        border-right: none;
        background: transparent;
        opacity: 0;
        -webkit-transform: rotate(-55deg);
        -ms-transform: rotate(-55deg);
        transform: rotate(-55deg);
    }

    .Infobulle_Checkbox {
        width:5%;
    }

@media (max-width: 500px) and (min-width: 0px) {
    /*Mobile vertical*/
    .Entete_Commun {
        width: 100%;
        height: 40px;
        margin-top: 0px;
    }

    .Description_Reservation {
        width: 60%;
    }
}

    @media (max-width: 1024px) and (min-width: 500px) {
        /*Mobile horizontal*/
        .Logo_Entete {
            width:200px;
            height: 60px;
            margin-top: -25px;
        }

        .Entete_Commun {
            width: 100%;
            height: 20px;
            margin-top: 0px;
        }

    }

    @media (max-width: 1024px) {

        .Infobulle_Checkbox {
            width: 10%;
        }

        .Main {
            margin: auto;
            width: 1175px;
            background: #FFFFFF;
            min-width: 700px;
            /*height: 100%;*/
            font-size: 22px;
            margin-top: -25px;
        }

        .Entete_Complete {
            background-repeat: no-repeat;
            height: 400px;
            width: 100%;
            position: absolute;
            margin-top: 0px;
            opacity: 1;
            background-size: 150%;
            background-position-x: center;
            background-position-y: top;
            background-image: url('../Skin/Logo/image_top.jpg');
        }

        .Logo_Entete {
            width: 100%;
            margin-top: -25px;
        }

        .Menu_Mobile_Lien {
            color: #FFFFFF;
            text-decoration: none;
        }

            .Menu_Mobile_Lien:hover {
                color: #FFFFFF;
            }

        .Menu_Mobile_Background {
            background-color: #4b858e;
        }

        .Menu_Mobile_Enum {
            padding: 5px;
            text-indent: 50px;
            font-size: 18px;
            border-bottom: 1px solid #FFFFFF;
        }
    }

