/* app css stylesheet */

/* -------------------- GENERAL ---------------------------------*/
html {
    background-color: #000000;
}

body {
    background-color: #ffffff;
    color: #000000;
    width : 1080px; /* 1080 - 8px pour tenir compte de la bordure de 2 px de part et d'autre du body*/
    height: 1920px;
    font-family: Karbon, Helvetica, sans-serif;
    overflow: hidden;
}

* {
    box-sizing: border-box;
}

/* ------------------------HEADER ET MENU HAUT --------------------*/

header {
    height: 380px;
}

#logo {
    width: 100%;
}

footer {
    height: 300px;
    padding: 0;
    background-color: #1D3551;
    /*background-color: #185593;*/
    background-image: url("../image/rejoindre_fee.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}


.sponsor {
    text-align: center;

}

/* --------------------------- MODAL ------------------------------------*/
#modalDetail {
    position : absolute;
    top: 1620px;
    width: 1080px;
    height: 300px;
    background-color: #ffffff;
    color: #333333;
    overflow-y: auto;
    display: none;
}


.logo {
    max-width: 185px;
    margin: 2px 40px;
    max-height: 95px;
}

.logo {
    max-width: 140px;
    margin: 10px 30px;
    max-height: 80px;
}


#modalDetail p {
    padding: 0 20px;
    margin: 0.5em;
    font-size: 16px;
    line-height: 1.2;
}

#logoDetail {
    margin: 10px auto -20px;
    display: block;
    max-height: 80px;
}

#closeModalDetail {
    float: right;
    margin: 10px;
}

.titre {
    font-family:Karbon-Semibold, sans-serif;
}


/* ------------------------- CANVAS ET PLAN-----------------------------*/

#canvasContainer {
    background-color: #d4e7c7;
}

#phaserCanvas {
    z-index: 970;
    margin-right: 720px;
    display: block;
    height: 790px;
}

/* -------------- MENU DROITE ----------------------*/

#menuStand {
    position: absolute;
    top : 1170px;
    left: 720px;
    width : 360px;
    height: 450px;
    overflow: hidden;
    background-color: #c3e2f4;
    color: #004f88;
}

#menuStand ul {
    margin: 0;
    padding: 0;
}

#listeStands {
    position: absolute;
    top : 0; /* position par rapport à son parent menuStand*/
    left: 0; /* position par rapport à son parent menuStand*/
    width: inherit;
}

#listeStands li {
    height: 40px;
    font-size: 22px;
    line-height: 40px;
    text-align: left;
    padding-left: 25px;
    overflow: hidden;
}


#listeStands li.colorA:before {
    content: url("../image/puceA.png");
    margin-right: 15px;
    vertical-align: sub;
    color : transparent;
}

#listeStands li.colorB:before {
    content: url("../image/puceB.png");
    margin-right: 10px;
    vertical-align: sub;
    color : transparent;
}

#listeStands li.mixte:before {
    content: url("../image/puceM.png");
    margin-right: 15px;
    vertical-align: sub;
    color: transparent;
}


#listeStands li.menuSelected:before {
    display: none;
}

.menuSelected {
    padding-left: 25PX;
    background: #313131 url("../image/flecheMenu40.png") no-repeat;
    color: #ffffff;
}

.menuSelected.colorA {
   background-color:#004f88;
;
}

.menuSelected.colorB {
    background-color: #004f88;
}

.menuSelected.mixte {
    background: url("../image/backgroundMixte.png") no-repeat;
}



#cachePourAnimationNavSalle {
    position: absolute;
    top : 0; /* position par rapport à son parent menuStand*/
    left: 0; /* position par rapport à son parent menuStand*/
    width: inherit;
    height: inherit;
    display: none;
}


@-webkit-keyframes animationMenu {
    0%   {background-color: rgba(195,226,244,1)}
    100% { background-color: rgba(195,226,244,0)}
}

/*---------------------- FORMULAIRE DE RECHERCHE ----------------------------*/

#formSearch {
    width: 70%;
    margin: 0 auto 15px;

}

#nameSearch {
    padding: 10px;
    height: 55px;
    width: 100%;
    font-size: 36px;
    font-weight: bold;
    text-transform: uppercase;
    border: 1px solid #004f88;
    background-color: #ffffff;
    color: #004f88;
}


/* ---------------------- CLAVIER VIRTUEL --------------------------*/


#clavier {
    width: 720px;
    height: 450px;
    padding: 10px 0;
    background-color: #d8ebf9;;
}

#clavier>p:first-child {
    text-align: center;
    font-size: 20px;
    margin: 10px 0;
}

#clearClavier {
    float: right;
    margin: 9px 26px;
}

.ligneClavier {
    margin: 10px auto;
    text-align: center;
}

.toucheClavier {
    display: inline-block;
    padding: 4px 0 2px;
    margin: 0 3px;
    border-radius: 5%;
    width: 48px;
    color: #004f88;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
    border: 1px solid #004f88;
    background-color: #ffffff;
}

#toucheClavierSpace {
    width: 450px;
}

.black-touch {
    background-color: black ;
}


.marginLeft50 {
    margin-left: 50px;
}

/*
#backModal {
    float: left;
    margin: 10px;
}
*/


/* ---------------------- LOGO PARTENAIRES -----------------------------*/

#partenaires {
    position: absolute;
    top : 105px; /* position par rapport à son parent partenaires*/
    left: 10px; /* position par rapport à son parent partenaires*/
}

#partenaires img {
    margin-bottom: 5px;
    width: 92px;
    height: 92px;
    background-color: #ffffff;
}

.colonnePartenaire1 {

    display: block;
    margin-left: 0;
}


.colonnePartenaire2 {
    display: block;
    margin-left: 98px;
}

.colonnePartenaire3 {
    display: block;
    margin-left: 196px;
}

.colonnePartenaire4 {
    display: block;
    margin-left: 294px;
}


.firstColonne {
    margin-top: -970px;
}


#partenaires_designers {
    margin: auto;
    position: absolute;
    top: 900px;
    left: 325px;
}


#partenaires_designers img  {
    /*margin-bottom: 5px;
    width: 240px;
    height: 235px;
    background-color: #c0c0c0;
    */
    width: 150px;
    height: 150px;
    background-color: #fff;
    margin: 2px;
}

.float_left {
    display: block;
    float: left;
}

.partenaire-header {
    position: absolute;
    left: 0;
    width: 1080px;
    top: 245px;
    height: 135px;
}

/* ------------------------- FONTS -----------------------------*/

@font-face {
    font-family: "Karbon";
    src: url('../fonts/Karbon-Regular.otf');
}

@font-face {
    font-family: "Karbon";
    font-weight: bold;
    src: url('../fonts/Karbon-Semibold.otf');
}

@font-face {
    font-family: "Minion Pro";
    src: url('../fonts/MinionPro-Regular.otf');
}

@font-face {
    font-family: "Stag-Semibold";
    src: url('../fonts/Stag-Semibold.otf');
}


@font-face {
    font-family: "FontAwesome";
    src: url('../fonts/FontAwesome.otf');
}