/* MAP */

#HUD_perso {
    position: absolute;
    z-index: 99999;






}

#map {
    clear:both;
    margin:0px;
    padding:0px;
    height: 750px;
    width:950px;
    position:relative;
    left:45px;
    top:50px;
}

audio {
    position: absolute;
    left: 350px;
    display: none;
}

#restart {
    width: 50px;
    height: 50px;
    position:absolute;
    z-index:99999999;
    left: 0px;
    bottom:0px;
    opacity:0.3;
}

#restart:hover {
    opacity:1;
}

.surcouche {
    margin:0px;
    padding:0px;
    height: 750px;
    width:950px;
    position:absolute;
    left:0px;
    top:0px;

}


/* personnage */
.pnj_wrapper {
    height: 100px;
    width:50px;
    margin: 0;
    padding: 0;
    position: absolute;
}

.perso_wrapper {
    height: 100px;
    width:50px;
    margin: 0;
    padding: 0;
    position: absolute;
}

.pnj, #perso , #f_t, #f_r, #f_b, #f_l {
    margin: 0px;
    position:absolute;
}

.pnj, #perso {
    left:-10px;
}

/* fleche apparition*/
.move {
    cursor:pointer;
    opacity: 0.15;
    z-index:99999999;
}

.move:hover{
    opacity:1;
}

/*
#f_r:hover{
        opacity:1;
}

#f_b:hover{
        opacity:1;
}

#f_l:hover{
        opacity:1;
}
*/




/* fleche d'interface */
#f_t {
    bottom:75px;left:0px;
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
}

#f_r {
    top:48px;left:50px;
}
#f_b {
    top:100px;left:0px;
    transform: rotate(90deg);
    -ms-transform: rotate(90deg); /* IE 9 */
    -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
}
#f_l {
    top:48px;left:-50px;
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* IE 9 */
    -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
}

.interaction {
    cursor:pointer;
    z-index:99;
    height:50px;
    width:50px;
    position:absolute;
}

.interaction:hover{
    opacity:1;
}

/* icone combat */
.fight {
    z-index:9999;
    opacity:0.20;
}

.fight:hover{


}

/*positionnement icone combat */

#p_l{
    left: -48px;top: 2px;
}

#p_r{
    top:-1px;left:50px;
}


#p_t{
    top:-46px;left:2px;
}

#p_b{
    top:59px;left:1px;
}

/* bulle d'interactions */



.move {
    opacity: 0.15;
}

.talk {
    opacity: 0.75;
}



/* positionnement des bulles */

#b_r{
    top:-40px;left:50px;
}

#b_l{
    top:-40px;left:-50px;
}

#b_b{
    top:20px;left:0px;
}

#b_t{
    bottom:140px;left:0px;
}

#PopupTalk {
    position: absolute;
    width:250px;
}

#PopupTalk, #PopupTalk img {
    z-index: 99;
}

#parole {
    /*left: 35px;
    top: 25px;*/
    padding:0px 20px 0px 30px;
    z-index: 100;
    background-image: url("img/bulle_text_mid.png");
}
#parole, .bulle_text_bot {
    position: relative;
    top: -3px;
}

#pnj_nom{
    font-weight: 900;
}

.reponse {
    cursor: pointer;
    text-decoration: underline;
    text-size : 75%;
}

.pnj_dial_nom {
    font-style: italic;

}
.pnj_dial_nom:after {
    content: '\a' ; white-space: pre;
}


/* INTERFACE */
#HUD_sac_wrapper {
    position: absolute;
    top : -50px;
    left : 0px;
}
#HUD_sac_wrapper img {
    height:50px;
    margin-right:25px;
}

#HUD_PV_bloc {
    height: 751px;
    z-index: 99;
    position: absolute;
    bottom : 0px;
    left : -30px;
    width: 20px;
    // opacity: 0.5;
    border: 2px solid black;
    border-radius: 15px;
}

#HUD_PV{
    position: absolute;
    left : 0px;
    bottom : 0px;
    z-index: 100;
    border: 1px solid green;
    border-radius: 15px;
    width: 18px;
    text-align: center;
}

.HUD_text {
    opacity: 0.5;
    font-size: 90%;
    border-radius: 15px;
    background-color: transparent;
}

.HUD_text.active {
    position:absolute;
    top: -15px;
    left: -18px;
    opacity: 1;
    font-size: 200%;
    font-weight: bold;
    border: 2px solid black;
    border-radius: 25px;
    padding: 5px;
    text-align: center;
}

/* Pv boss */

#boss_pv_hud{
    height: 15px;
    z-index: 99;
    position: absolute;
    bottom : 0px;
    left : -30px;
    width: 101px;
    // opacity: 0.5;
    border: 2px solid black;
    border-radius: 15px;
    top:48px;
    left:550px;
}

#boss_pv{
    position: absolute;
    left : 0px;
    bottom : 0px;
    z-index: 100;
    border: 1px solid green;
    border-radius: 15px;
    height: 13px;
    text-align: center;
}

.HUD_text_pvch {
    opacity: 0.5;
    font-size: 80%;
    border-radius: 15px;
    background-color: transparent;
    top:-4px;
    position: relative;
}

#PopupDeadRestart, .sac {position:static;}

#PopupChooseCharacters .choose_pj {
    cursor:pointer;
}


/* Popup */
.modalbg {
    text-align:center;
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 99999;
    -moz-transition: all 2s ease-out;
    -webkit-transition: all 2s ease-out;
    -o-transition: all 2s ease-out;
    transition: all 2s ease-out;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -transition-delay: 0.2s;
    display: block;
    pointer-events: none;
}
.modalbg .dialog {
    width: 650px;
    position: relative;
    top: -1000px;
    margin: 10% auto;
    padding: 25px 25px 25px 25px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: #ffffff;
    background: -moz-linear-gradient(#ffffff, #cccccc);
    background: -webkit-linear-gradient(#ffffff, #cccccc);
    background: -o-linear-gradient(#ffffff, #cccccc);
    box-shadow: 0 0 10px #000000;
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
}
.modalbg .dialog .dialog-buttons{
    width: 200px;
    margin: auto;
}
.modalbg .dialog .ie7 {
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=3);
}
.modalbg:target {
    display: block;
    pointer-events: auto;
    background: rgba(4, 10, 30, 0.8);
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}
.modalbg:target .dialog {
    top: 150px;
    -moz-transition: all 0.8s ease-out;
    -webkit-transition: all 0.8s ease-out;
    -o-transition: all 0.8s ease-out;
    transition: all 0.8s ease-out;
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay: 0.4s;
    -o-transition-delay: 0.4s;
    -transition-delay: 0.4s;
}
.close {
    background: #606061;
    color: #FFFFFF;
    line-height: 25px;
    position: absolute;
    right: -12px;
    text-align: center;
    top: -10px;
    width: 24px;
    text-decoration: none;
    font-weight: bold;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
    box-shadow: 0 0 10px #000000;
    -moz-box-shadow: 0 0 10px #000000;
    -webkit-box-shadow: 0 0 10px #000000;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay: 0.2s;
    -o-transition-delay: 0.2s;
    -transition-delay: 0.2s;
    opacity:0.8;
}
.close .ie7 {
    filter: progid:DXImageTransform.Microsoft.Shadow(color='#000000', Direction=135, Strength=3);
}
.close:hover {
    background: #960F0F;
    -moz-transition: all 0.5s ease-out;
    -webkit-transition: all 0.5s ease-out;
    -o-transition: all 0.5s ease-out;
    transition: all 0.5s ease-out;
}

.popupdead{
    display: inline-block;
    width: 325px;
}

.popupwin{
    display: inline-block;
    vertical-align: top;
    width: 325px;
}

.Tiwi {
    width: 265px;
    border: 3px solid black;
    border-radius: 50px;
    display: inline-block;
}