/*deplacement des div*/
.movedroite{
cursor: move;
}
#log,#zone_online_data,#zone_tchat,.ecran2,#message,.invbox,.conteneur_sac,.conteneur_inv12,.conteneur_sac_autre,.lookatwho,.lookatmeuble,.conteneur_inv2,.conteneur_inv3{
position: absolute;
box-shadow: inset 0px 0px 10px 0px #070707, 0px 5px 5px 0px #070707;
/*z-index: 500;*/
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
border:1px solid #303030;
}
#personnage{
position: absolute;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.98);
}
/*shadow*/
#designperso, #log, #zone_tchat,#statis{
box-shadow: 0px 10px 20px 0px #070707;
/*transition-duration: 0.8s;*/
}
/*
perso
*/
#designperso{
position: absolute;
width:308px;
height:151px;
background-image: url('../img/design/site/new/persocadre.png');
background-repeat:no-repeat;
left:27px;
top:20px;

}
#persodeplace{
position: absolute;
top: 0px;
width: 100%;
height: 10px;
cursor: move;

}
#personnage{
color: #d0d0d0;
cursor: default;
font-family: "Titillium Web","Trebuchet MS","Helvetica","Arial","Verdana","sans-serif";
font-variant: small-caps;
height: 130px;
left: 9px;
top: 10px;
width: 290px;
}
.showinfo{
height:160px;
font-variant: normal;
}
#astp, #gainpvpf, #pertefaimsoif, #expeinfo{
background-color: #333333;
border-top: 1px solid #303030;
bottom: 1px;
box-shadow: 0 5px 20px 0 #070707 inset;
font-size: 90%;
position: absolute;
text-align: center;
width: 100%;
}
#astp span{
display: inline-block;
margin-left: 2px;
margin-right: 2px;
}
#titre_perso, #pognon, #zone_avatar, #alimentation, #zone_info_perso1, #sante, #forme,#pseudoig{
position: absolute;
}
#pseudoig{
left: 75px;
font-size: 150%;
font-variant: small-caps;
color: #5EC4CD;
font-style: bold;
top:8px;

}
#titre_perso{
top: 30px;
left: 85px;
font-size: 96%;
}
#pognon{
right: 8px;
bottom:20px;
}
#zone_avatar{
width:55px;
height:55px;
overflow: hidden; 
border-radius: 2px;
left: 10px;
top:10px;
}
#alimentation{
left :8px;
bottom: 20px;
font-size: 80%;
cursor: pointer;
}
#zone_info_level{
position: absolute;
top: 70px;
left: 25px;
color:#4B5C5B;
}
#info_level:hover{
cursor: pointer;
}
#info_xp{
position: absolute;
left: 90px;
top: 15px;
}
#zone_info_perso1{
display: inline-block;
left:75px;
top :45px;
width:215px;
height:38px;
font-size: 92%;
color:#4B5C5B;
cursor: pointer;
}
#forme_poz{
position: absolute;
display: block;
top: 20px;
width: 220px;
}
#sante_poz{
position: absolute;
display: block;
width: 220px;
}
#forme_poz div,#sante_poz div{
display: inline;
margin-left: 4px;
}
.barrevide{
display:inline-block;
width:12px;
height:4px;
border:1px solid #333;
background-color:#B32015;
line-height: 0px;
}
.barrepleine{
display:inline-block;
background-color:#5EC4CD;
line-height: 0px;
}
.barre{
display:inline-block;
width:12px;
height:4px;
border:1px solid #333;
line-height: 0px;
}
#action, .infoperso{
position: absolute;
width:100%;
bottom:1px;
background-color: #333;
border-top:1px solid #303030;
box-shadow: inset 0px 5px 20px 0px #070707;
text-align: center;
font-size: 90%;
}

/*info afk en frontperso*/
#afkvisu{
position: absolute;
top: 20px;
right: 15px;
}
/*
Zone TCHAT
*/
#zone_tchat {
top:210px;
left:28px;
width:291px;
height:305px;
z-index: 600;
border-style: solid;
border-width: 6px 6px 5px 5px;
-moz-border-image: url('../img/design/site/new/tchatp.png') 6 6 5 5 stretch;
-webkit-border-image: url('../img/design/site/new/tchatp.png') 6 6 5 5 stretch;
-o-border-image: url('../img/design/site/new/tchatp.png') 6 6 5 5 stretch;
border-image: url('../img/design/site/new/tchatp.png') 6 6 5 5 fill stretch;
}
#zone_tchat_hidden{
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
}
#room{
position: absolute;
width:100%;
border-radius: 3px;
bottom: 0px;
color: #5EC4CD;
}
#chan{
display: block;
width:100%;
height:100%;
border-radius: 3px;
word-wrap: break-word;
position: relative;
bottom: 0px;
overflow:hidden ;
padding: 5px;
box-sizing: border-box;
}
.tchatmess{
display: block;

}
.miaou{
left: 1px; 
bottom: 0px;
word-wrap: break-word;
margin: 2px 0 0 0;
font-size: 100%;
line-height: 150%;
}

.cri > b {
opacity: 0.8;
font-size: 98%;
}
.cri {
opacity: 0.8;
font-size: 102%;
}

.chuchotement > b{
opacity: 0.65;
font-size: 89%
}
.chuchotement {
color: #909090;
opacity: 0.9;
font-size: 93%;
}

.parle{
font-size: 96%;
opacity: 0.9;
}
.parle > b{
font-size: 96%;
opacity: 0.8;
}

.mj .couleur3 {
margin-left: 2px;
}

.mj {
padding: 5px 14px 9px 10px;
background: #ff00002e;
border: 1px solid #5a2424;
overflow: hidden;
margin: 6px;
}

.mj:before {
content: 'MJ :';
display: block;
font-weight: bold;
font-size: 47px;
font-style: italic;
color: #8461613b;
margin: 5px 0 0 0;
height: 0;
}
#message{ 
position: absolute;
bottom: -45px;
width: 97%;
max-width:410px;
height: 20px;
font-size: 100%;
border-bottom:1px solid #606060;
box-shadow: inset 0px 5px 20px 0px #070707,0px 1px 4px 0px #070707;
margin: 0;
left: -9px;
border-style: solid;
border-width: 3px 9px 5px 11px;
-moz-border-image: url('../img/design/site/new/tchatinput.png') 3 9 5 11 stretch;
-webkit-border-image: url('../img/design/site/new/tchatinput.png') 3 9 5 11 stretch;
-o-border-image: url('../img/design/site/new/tchatinput.png') 3 9 5 11 stretch;
border-image: url('../img/design/site/new/tchatinput.png') 3 9 5 11 fill stretch;
/*background-image: url('../img/design/site/new/tchatinput.png');
background-repeat:no-repeat;*/
}
/*

Fin Zone Tchat

/*

Zone DRoite IG

*/
#droite{
position: absolute;
left: 360px;
top : 20px;
}
/*Info lieux - batiment ..*/
#deplacecarte{
cursor: move;
height: 42px;
left: 55px;
position: absolute;
top: 0;
width: 455px;
}
#informations{
left: 70px;
position: absolute;
text-align: center;
top: 14px;
width: 354px;
z-index: 499;
}

#informations_lieux > div{
display: inline-flex;
margin-left: 4px;
padding: 4px;
}
#designcarte{
position: absolute;
height:547px; 
width:567px;
background-image: url('../img/design/site/new/intercarte4.png');
background-repeat:no-repeat;
}

.mpouti{
cursor: pointer;

}
/*.mpouti:hover{
background-color: #101010;

}*/
#outil_sac{
position: absolute;
top: 55px;
min-width:490px;
}
.conteneur_sac,.conteneur_inv12,.conteneur_inv2,.conteneur_inv3{
display: block;
line-height: 0px;
}
.sac6{
width: 170px;
height: 110px;
}
.sac4{
width: 227px;
height: 55px;
}
.sac2{
width: 116px;
height: 55px;
}
.sac3{
width: 171px;
height: 55px;
}
.sac10{
width: 282px;
height: 110px;
}
#outil_inventaire{
position: absolute;
}
#invpersonnage{
position: relative;
width: 260px;
height: 230px;
margin-top: 8px;
}
#statisf{
 background-image: url("../img/design/site/new/persostatf.png");
    background-repeat: no-repeat;
    height: 10px;
    left: 23px;
    margin-top: 8px;
    position: absolute;
    width: 250px;
    top: 2px;
cursor: pointer;
}
#statis{
    position: absolute;
background-repeat: no-repeat;
    height: 195px;
    left: 23px;
    margin-top: 8px;
    position: relative;
    width: 245px;
background-image: url('../img/design/site/new/persostato1.png');
top:2px;

}
#statisferme{
    position: absolute;
    bottom: 0px;
    height: 10px;
    width: 245px;
    cursor: pointer;
}
#statis span{
display: inline-block;
margin: 3px;
width: 100%;
}

#agi{
position: absolute;
top:2px;
left: 65px;
}
#pun{
position: absolute;
top:20px;
left: 63px;
}
#res{
position: absolute;
top:38px;
left: 95px;
}
#obs{
position: absolute;
top:56px;
left: 107px;
}
#dis{
position: absolute;
top:74px;
left: 95px;
}
#med{
position: absolute;
top:92px;
left: 84px;
}
#pro{
position: absolute;
top:110px;
left: 108px;
}
#eco{
position: absolute;
top:128px;
left: 87px;
}
#ing{
position: absolute;
top:146px;
left: 89px;
}
#inf{
position: absolute;
top:164px;
left: 112px;
}
#outil_stuff{
position: absolute;
width: 55px;
height:50px;
}

.conteneur_sac_meuble, .conteneur_sac_don{
box-shadow: inset 0px 0px 10px 0px #070707, 0px 5px 5px 0px #070707;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
border:5px double #282828;
}

.conteneur_sac .wrapcasesac, .conteneur_inv12 .wrapcasesac,.conteneur_inv2 .wrapcasesac,.conteneur_inv3 .wrapcasesac, .conteneur_sac_meuble .wrapcasesac, .conteneur_sac_don .wrapcasesac{
position: relative;
display: inline-block;
width: 54px;
height: 54px;
margin: 1px;
}

.conteneur_sac_meuble .wrapcasesac, .conteneur_sac_don .wrapcasesac{
  margin: 2px;
}

.conteneur_sac .casesacss,.conteneur_inv12 .casesacss,.conteneur_inv2 .casesacss,.conteneur_inv3 .casesacss,.conteneur_sac_meuble .casesacss, .conteneur_sac_don .casesacss {
position: absolute;
/*display: inline-block;*/
width: 54px;
height: 54px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px #070707;
background-color: #DADADA;
/*margin: 1px;*/
/* padding: 7px; */
}

.conteneur_sac_autre .items_sac {
    background-color: #DADADA;
    box-shadow: 1px 2px 1px #2c2c2c inset, 1px 2px 1px #101010, 0 0 10px 0 #070707 inset;
    display: inline-block;
    height: 40px;
    margin: 5px;
    padding: 2px;
    position: relative;
    width: 40px;
}

#invpersonnage > .items_inv{
/*background: #b0b0b0;*/
}

/*action*/
#outil_perso{
left: 6px;
position: absolute;
top: 55px;
width: 50px;
height: 220px;
}
.outil_perso{
left: 7px;
position: absolute;
top: 55px;
width: 50px;
height: 215px;
z-index: -1;
background-color: #111;    
}
#outil_option div:focus { 
outline: none; 
background-color:#4B5C5B;
}
#outil_option{
position: absolute;
top: 350px;
left: -25px;
width: 25px;
}
#outil_option2{
left: 17px;
position: absolute;
top: 382px;
width: 25px;
}
#outil_haut{
left: 528px;
position: absolute;
top: 245px;
}
#bandeaumapp{
position: absolute;
top: 0px;
height: 28px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.3);
width: 100%;
z-index: 199;
}
/*countdown*/
#countdown{
position: absolute;
right: 5px;
display: inline-block;
width: 20px;
background-color: #333;
cursor: default;
padding: 2px;
margin-bottom: 2px;
margin-left: 2px;
text-align: center;
border: 1px solid #4B5C5B;
font-size: 80%;
border-radius: 1px;
z-index: 199;
}
#labelInTens{
position: absolute;
left: 15px;
display: inline-block;
font-size: 10px;
font-variant: small-caps;
}
#labelInCrim{
position: absolute;
left: 155px;
display: inline-block;
font-size: 10px;
font-variant: small-caps;
}
#InCrim{

display: inline-block;
width: 20px;
background-color: #333;
cursor: default;
padding: 2px;
margin-bottom: 2px;
margin-left: 2px;
text-align: center;
border: 1px solid transparent;
font-size: 80%;
border-radius: 1px;
z-index: 199;
}
#InTens{

display: inline-block;
width: 20px;
background-color: #333;
cursor: default;
padding: 2px;
margin-bottom: 2px;
margin-left: 2px;
text-align: center;
border: 1px solid transparent;
font-size: 80%;
border-radius: 1px;
z-index: 199;
}
#animationtimer{
    z-index: -1;
    background-color: red;
    position:absolute;
    top:13px;
    left: 430px;
    height: 36px;
    width: 80px;

}
/*GP carte*/
#outil_map{
left: 526px;
position: absolute;
top: 55px;
width: 30px;
height: 195px;
}
.outil_map{
left: 526px;
position: absolute;
top: 55px;
width: 35px;
height: 215px;
background-color: #111;
z-index: -1;
}
/*inventaire sous la carte*/
.scrollog{
/*background-color: #333;*/
}
#outil_option2 div{
background-color: #000;
    color: #bbb;
    display: inline-block;
    font-size: 85%;
    height: 21px;
    margin: 2px;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: 21px;

}
#outil_haut div {
    /*border: 1px solid transparent;*/
    color: #bbb;
    display: inline-block;
    font-size: 85%;
    height: 22px;
    margin: 1px;
    position: relative;
    text-align: center;
    vertical-align: top;
    width: 22px;
    background-color: #000;
}
#outil_stuff div, #outil_option div{
    background-color: #000;
vertical-align: top;
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 1px;
border: 1px solid #303030;
box-shadow:  0px 1px 4px 0px #070707,inset 0px 0px 3px 0px #101010;
text-align: center;
font-size: 85%;
color: #bbb;

}
.scrollog{
background: none repeat scroll 0 0 #000;
border: 1px solid #303030;
color: #bbb;
display: inline-block;
font-size: 85%;
height: 20px;
margin: 1px;
position: relative;
text-align: center;
vertical-align: top;
width: 20px;
top: 6px;
left: -2px;
}
#foutilog{
position: absolute;
right: 0px;
width: 10px;
cursor: pointer;
height: 100%;
top:0px;
}

#outil_menu  div, #outil_perso  div,#outil_map  div {
    
   /* display: inline-block;*/
   /* font-size: 85%;*/
    height: 25px;
   /* margin: 2px;*/

    /*text-align: center;*/
    width: 25px;
    /*position: absolute;*/
}
/*MODULE MAPP*/
#grillemap{
position: absolute;
display: inline-block;
width: 475px;
height: 475px;
z-index: 100;
background-repeat: no-repeat;


}
#grillemap .divmap{
position: relative;
width: 25px;
height: 25px;
float:left;
opacity: 1.0;
display: inline-block;
}
#cachezone{
position: absolute;
z-index: 103;
}
#Z1, #Z2, #Z3{
width: 475px;
height: 475px;
position: absolute;
display: inline-block;
background-repeat: no-repeat;

}
#mapp{
position: absolute;
display: inline-block;
width: 475px;
height: 475px;
top : 55px;
left:43px;
overflow: hidden;
cursor: pointer;
border: 1px solid #303030;
/*box-shadow: 0px -1px 1px 0px #606060, 0px 5px 10px 0px #070707;*/
}
#mapcible{
position: absolute;
display: none;
width: 25px;
height: 25px;
border: 1px solid #029990;
cursor: pointer;
box-shadow: 0 0 1px 1px #029990;
z-index: 200;
top: 225px;
left: 225px;
}
#dechetsmap, #decorsmap,#maprue, #meublemap,#batimap,#persomapp,#decors{
position:absolute;
z-index: 105;
/*top:25px;*/
}
#lagrille{
position:absolute;
z-index: 109;
box-shadow: inset 0px -1px 1px 0px #070707,inset 0px 8px 100px 0px #070707;
width: 100%;
height: 100%;
}
#dechetsmap div, #maprue div,#decors div{
width: 25px;
height: 25px;
}

#decorsmap div{

}
/*
Affichage des perso
*/
#mapp #persomapp span{
border: 2px solid #999999;
box-shadow: 0px 2px 2px 1px #006064;
width: 6px;
height:6px;
border-radius: 50px;
z-index: 135;
background-color: #006064;
}

#mapp #persomapp span.deco, #mapp #persomapp span.dead{
box-shadow: none;
z-index: 134;
}
#mapp #persomapp span.moi{
z-index: 136;
}
#lagrille div span{
z-index: 135;
}
#lagrille div span .c1{
background-color: #006064;  
}
#lagrille div span .c2{
background-color: #640000; 
}
#lagrille div span .c3{
background-color: #645900; 
}
.zone_protection{
/*background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2);*/
z-index: 150;
border: 1px dashed #101010;
}
/*MODULE PRESENCES*/
#zone_online_data{
top: 63px;
left: 951px;
width: 233px;
height: 180px;
text-align: left;
z-index: 600;
border-style: solid; 
border-width: 6px 9px 5px 8px;
-moz-border-image: url("../img/design/site/new/presentp.png") 6 9 5 8 stretch;
-webkit-border-image: url("../img/design/site/new/presentp.png") 6 9 5 8 stretch;
-o-border-image: url("../img/design/site/new/presentp.png") 6 9 5 8 stretch;
border-image: url("../img/design/site/new/presentp.png") 6 9 5 8 fill stretch;

}
#zone_online_hidden{
height: 100%;
overflow: hidden;
}
#zone_online{
position: relative;
width: 100%;
padding-top: 2px;
padding-left: 2px;
top:0;
border-radius: 5px;
font-variant: small-caps;
}

.avataronline{
float: left;
clear: both;
padding: 0px;
margin-left: 4px;
margin-top: 4px;
width: 35px;
height: 35px;
overflow: hidden;
border-radius: 20px;
}
.wraponline{
display: inline-block;
width: 110px;
min-height: 45px;
padding: 2px;
overflow: hidden;
box-shadow: inset 1px 1px 1px #2c2c2c, 1px 1px 1px #2c2c2c;
cursor: pointer;
}
.present{
font-size: 100%;
display: block;
height: 25px;
padding-top: 2px;
padding-left: 40px;
color:#d0d0d0;
}
.deconline{
color: #555;
}
.infos{
position: absolute;
padding-left: 10px;
bottom: 0px;
}
/*zone fourre tout a gauche.*/
.ici{
min-width: 80px;
background-color:#111;
padding-left: 8px;
padding-right: 23px;
padding-top: 8px;
padding-bottom: 8px;
z-index: 600;
position:absolute;
top:100px;
left:100px;
border:1px dashed #909090;
border-radius:3px;
}
.icimeuble {
    min-width: 130px;
    background: var(--bg-overlay-dark, #1a1918);
    border: 1px solid var(--border-medium, #5a5850);
    border-left: 2px solid #e67e22;
    border-radius: 4px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
    padding: 2px;
    z-index: 2000;
    position: absolute;
    /* On laisse le JS s'occuper du top/left pour être précis */
}

.icimeuble-header {
    padding: 4px 8px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    margin-bottom: 2px;
}

.icimeuble-header span {
    font-size: 9px;
    text-transform: uppercase;
    color: #777;
    font-weight: bold;
    letter-spacing: 0.5px;
}

.meuble-menu-item {
    padding: 6px 10px;
    color: #f0ece0;
    cursor: pointer;
    font-family: var(--font-family-base, "Segoe UI", Tahoma, sans-serif);
    font-size: 12px;
    border-radius: 2px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
}

.meuble-menu-item:hover {
    background: rgba(230, 126, 34, 0.15);
    color: #e67e22;
    padding-left: 14px;
}

.meuble-menu-item.active {
    color: #5ec4cd;
    background: rgba(94, 196, 205, 0.1);
    border-right: 2px solid #5ec4cd;
    cursor: default;
    pointer-events: none;
}

.meuble-menu-item span {
    margin-right: 6px;
    font-size: 14px;
}

.icimeuble-close {
    position: absolute;
    top: 2px;
    right: 6px;
    color: #555;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    transition: color 0.2s;
}

.icimeuble-close:hover {
    color: #e74c3c !important;
}

.no_eta:hover{
color:#e38c11;
}
.no_eta_css{
margin: 2px;

}
/*
infos items
*/
.infoitem{
position:absolute;
left:360px;
width: 280px;
top:140px;
z-index: 999999;
position: absolute;
box-shadow: 0px 5px 5px 0px #070707a3;
border:1px solid #8C8C8B;
background-color: #000;
padding: 10px;
}
.fond_item{
background-color: #DADADA;
box-shadow: 1px 2px 1px #2c2c2c inset, 1px 2px 1px #101010, 0 0 10px 0 #070707 inset;
display: block;
height: 50px;
padding: 2px;
position: relative;
width: 50px;
margin:12px;
}
.tooltitreitem{
position:absolute;
top:22px;
left:95px;
font-size:18px;
width:200px;
font-variant: small-caps;
font-weight: 700;
}
.tooldescr{
margin-top: 10px;
font-size:14px;
}
.tooloptionitem{
margin-left: 15px;
font-size:12px;
}
.toolfooteritems{
display: block;
bottom: 5px;
margin-left: 15px;
margin-bottom: 15px;
font-size:12px;
}
.tooliditem{
 font-size:10px;   
}
/*
FIN infos items
*/
#log{
position: absolute;
top:398px;
left:915px;
width:303px;
height:130px;
padding-left: 5px;
z-index: 600;

border-style: solid; 
border-width: 5px 9px 4px 0px; 

-moz-border-image: url("../img/design/site/new/logp.png") 5 9 4 0 stretch;
-webkit-border-image: url("../img/design/site/new/logp.png") 5 9 4 0 stretch;
-o-border-image: url("../img/design/site/new/logp.png") 5 9 4 0 stretch;
border-image: url("../img/design/site/new/logp.png") 5 9 4 0 fill stretch;
}
#vuelog{
display: block;
width:100%;
border-radius: 3px;
word-wrap: break-word;
position: absolute;
bottom: 0px;
}
#contlog{
position: absolute;
width:100%;
border-radius: 3px;
font-size: 88%;
bottom:0px;
color: #5EC4CD;
overflow: hidden;
height: 100%;
/*background-image: url("../img/design/site/new/logp.png");*/
/*border-style: solid; 
border-width: 29px 9px 33px 0px; 
-moz-border-image: url("../img/design/site/new/logp.png") 29 9 33 0 stretch;
-webkit-border-image: url("../img/design/site/new/logp.png") 29 9 33 0 stretch;
-o-border-image: url("../img/design/site/new/logp.png") 29 9 33 0 stretch;
border-image: url("../img/design/site/new/logp.png") 29 9 33 0 fill stretch;*/
}
.newlog, .Boxselected{
background-color: #4B5C5B;
}
#outil_scroll_logo{
position: absolute;
right: -15px;
top: 20px;
width: 10px;
height: 90px;
background-image: url("../img/design/site/new/logf.png");
background-repeat: no-repeat;
cursor: pointer; 
}
#outil_scroll_log{
position: absolute;
right: -45px;
top: 20px;
width: 33px;
height: 90px;
background-image: url("../img/design/site/new/logo.png");
background-repeat: no-repeat;
}
.InfoDeco{
background-color: #000;
}
.ecran2{
position: absolute;
display: inline-block;
width: 435px;
height: 435px;
top : 50px;
left:4px;
overflow: hidden;
box-shadow: 0 0 1px 1px #4B5C5B;
border: 1px solid #4B5C5B;
padding: 20px;
z-index: 501
}
#outil_tchato{
position: absolute;
left: -12px;
top: 5px;
width: 10px;
height: 120px;
background-image: url("../img/design/site/new/tchatf.png");
background-repeat: no-repeat;
cursor: pointer;
}
#outil_tchat{
position: absolute;
left: -45px;
top: 5px;
width: 30px;
height: 120px;
background-image: url("../img/design/site/new/tchato.png");
background-repeat: no-repeat;
cursor: pointer;
padding-left: 15px;
}
#foutiltchat{
position: absolute;
left: 0px;
top: 0px;
width: 10px;
height: 100%;
cursor: pointer; 
}
.movemebox_tchat{
cursor: move;
}
#outil_onlineo{
position: absolute;
right: -15px;
top: 8px;
width: 10px;
height: 110px;
background-image: url("../img/design/site/new/presentf.png");
background-repeat: no-repeat;
cursor: pointer;
}
#outil_online{
position: absolute;
right: -45px;
top: 8px;
width: 35px;
height: 110px;
background-image: url("../img/design/site/new/presento.png");
background-repeat: no-repeat;

}
#outil_onlinef{
position: absolute;
right: 0px;
top: 0px;
width: 10px;
height: 100%;
cursor: pointer; 
}
.movemebox_online{
cursor: move;
}
.closemebox{
top: 5px;
cursor: pointer;
right: -30px;
}
.movemebox{
top: 30px;
cursor: move;
right: -30px;
}
#outils_zoneperso{
height: 40px;
position: absolute;
right: -7px;
top: -5px;
width: 30px;
}
.movemeperso{
cursor: move;
}
.closemebox,.movemebox{
position: absolute;
display: inline-block;
width: 20px;
height: 20px;
margin: 1px;
text-align: center;
font-size: 85%;
border: 1px solid #303030;
box-shadow:  0px 1px 4px 0px #070707;
color: #bbb;
line-height: 18px;
}
.inv1, .inv2,.inv3 , .inv4, .inv5, .inv6, .inv7,
 .inv11, .inv8,  .inv9, .inv10, .inv12{
position: absolute;
width:40px;
height:40px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px #070707;
padding: 2px;
background-color: #DADADA;
}
#invpersonnage div{
cursor: pointer;
}
.inv1{
top:20px;
}
.inv2{
top:70px;
}
.inv3{
top:120px;
}
.inv4 , .inv7, .inv11{  
top:170px;
}
.inv5{
left:110px;
top:20px;
}
.inv8{
left:10px;
top:20px;
}
.inv9{
left:10px;
top:70px;
}
.inv10{
left:110px;
top:70px;
}
.inv12{
left:10px;
top:120px;
}
.inv6{
left:190px;
top:20px;
}
.inv7{
left:190px;
top:70px;
}
.inv1, .inv2, .inv3, .inv4{
left:60px;
}
.inv11{
left:10px;
}

.inv1_look, .inv2_look,.inv3_look , .inv4_look, .inv5_look, .inv6_look, .inv7_look,
 .inv11_look, .inv8_look,  .inv9_look, .inv10_look, .inv12_look{
position: absolute;
width:40px;
height:40px;
box-shadow: inset 1px 2px 1px #2c2c2c, 1px 2px 1px #101010, inset 0px 0px 10px 0px #070707;
padding: 2px;
background-color: #DADADA;
}

.inv1_look{
top:20px;
}
.inv2_look{
top:70px;
}
.inv3_look{
top:120px;
}
.inv4_look , .inv7_look, .inv11_look{  
top:170px;
}
.inv5_look{
left:110px;
top:20px;
}
.inv8_look{
left:10px;
top:20px;
}
.inv9_look{
left:10px;
top:70px;
}
.inv10_look{
left:110px;
top:70px;
}
.inv12_look{
left:10px;
top:120px;
}
.inv6_look{
left:190px;
top:20px;
}
.inv7_look{
left:190px;
top:70px;
}
.inv1_look, .inv2_look, .inv3_look, .inv4_look{
left:60px;
}
.inv11_look{
left:10px;
}


/*rezible*/
.ui-icon { width: 16px; height: 16px; background-image: url(../img/design/icones/ui-icons_222222_256x240.png)/*{iconsContent}*/; }
.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block;}
.ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { display: none; }
.ui-resizable-n { cursor: n-resize; height: 7px; width: 100%; top: -5px; left: 0px; }
.ui-resizable-s { cursor: s-resize; height: 7px; width: 100%; bottom: -5px; left: 0px; }
.ui-resizable-e { cursor: e-resize; width: 7px; right: -5px; top: 0px; height: 100%; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0px; height: 100%; }
.ui-resizable-se { cursor: se-resize; width: 12px; height: 12px; right: 1px; bottom: 1px; }
.ui-resizable-sw { cursor: sw-resize; width: 9px; height: 9px; left: -5px; bottom: -5px; }
.ui-resizable-nw { cursor: nw-resize; width: 9px; height: 9px; left: -5px; top: -5px; }
.ui-resizable-ne { cursor: ne-resize; width: 9px; height: 9px; right: -5px; top: -5px;}
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }

/* Interaction states
----------------------------------*/
.ui-state-default, .ui-widget-content .ui-state-default { border: 1px solid #d3d3d3/*{borderColorDefault}*/; background: #e6e6e6/*{bgColorDefault}*/ /*{bgImgUrlDefault}*/ 0/*{bgDefaultXPos}*/ 50%/*{bgDefaultYPos}*/ repeat-x/*{bgDefaultRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #555555/*{fcDefault}*/; outline: none; }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { color: #555555/*{fcDefault}*/; text-decoration: none; outline: none; }
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus { border: 1px solid #999999/*{borderColorHover}*/; background: #dadada/*{bgColorHover}*/ /*{bgImgUrlHover}*/ 0/*{bgHoverXPos}*/ 50%/*{bgHoverYPos}*/ repeat-x/*{bgHoverRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcHover}*/; outline: none; }
.ui-state-hover a, .ui-state-hover a:hover { color: #212121/*{fcHover}*/; text-decoration: none; outline: none; }
.ui-state-active, .ui-widget-content .ui-state-active { border: 1px solid #aaaaaa/*{borderColorActive}*/; background: #ffffff/*{bgColorActive}*/ /*{bgImgUrlActive}*/ 0/*{bgActiveXPos}*/ 50%/*{bgActiveYPos}*/ repeat-x/*{bgActiveRepeat}*/; font-weight: normal/*{fwDefault}*/; color: #212121/*{fcActive}*/; outline: none; }
.ui-state-active a, .ui-state-active a:link, .ui-state-active a:visited { color: #212121/*{fcActive}*/; outline: none; text-decoration: none; }

/* Interaction Cues
----------------------------------*/
.ui-state-highlight, .ui-widget-content .ui-state-highlight {border: 1px solid #fcefa1/*{borderColorHighlight}*/; background: #fbf9ee/*{bgColorHighlight}*/ /*{bgImgUrlHighlight}*/ 0/*{bgHighlightXPos}*/ 50%/*{bgHighlightYPos}*/ repeat-x/*{bgHighlightRepeat}*/; color: #363636/*{fcHighlight}*/; }
.ui-state-highlight a, .ui-widget-content .ui-state-highlight a { color: #363636/*{fcHighlight}*/; }
.ui-state-error, .ui-widget-content .ui-state-error {border: 1px solid #cd0a0a/*{borderColorError}*/; background: #fef1ec/*{bgColorError}*/ /*{bgImgUrlError}*/ 0/*{bgErrorXPos}*/ 50%/*{bgErrorYPos}*/ repeat-x/*{bgErrorRepeat}*/; color: #cd0a0a/*{fcError}*/; }
.ui-state-error a, .ui-widget-content .ui-state-error a { color: #363636/*{fcError}*/; }
.ui-state-error-text, .ui-widget-content .ui-state-error-text { color: #cd0a0a/*{fcError}*/; }
.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }
.ui-priority-primary, .ui-widget-content .ui-priority-primary { font-weight: bold; }
.ui-priority-secondary, .ui-widget-content .ui-priority-secondary { opacity: .7; filter:Alpha(Opacity=70); font-weight: normal; }


/*Bouton switch menu Ig*/
.cmn-toggle {
  position: absolute;
  margin-left: -50px;
  visibility: hidden;
}
.cmn-toggle + label {
  display: block;
  position: relative;
  cursor: pointer;
  outline: none;
  user-select: none;
}
input.cmn-toggle-round + label {
  padding: 2px;
  width: 30px;
  height: 12px;
  background-color: #dddddd;
  border-radius: 60px;
  float: right;
}
#switchafk input.cmn-toggle-round + label {
  top: 13px;
  right: 60px;

}
#switchdrag input.cmn-toggle-round + label {
  top: 13px;
  right:35px;

}

#switchtchatsound input.cmn-toggle-round + label {
  top: 13px;
  right:35px;

}
input.cmn-toggle-round + label:before,
input.cmn-toggle-round + label:after {
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  bottom: 1px;
  content: "";
}
input.cmn-toggle-round + label:before {
  right: 1px;
  /*background-color: #f1f1f1;*/
  background-color: #8ce196;
  border-radius: 60px;
  transition: background 0.4s;
}
input.cmn-toggle-round + label:after {
  width: 12px;
  background-color: #fff;
  border-radius: 60px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  transition: margin 0.4s;
}
input.cmn-toggle-round:checked + label:before {
  background-color: #b32015;
}
input.cmn-toggle-round:checked + label:after {
  margin-left: 20px;
}

/*MODULE MESSAGERIE*/
#menucom{
position: absolute;
display: inline-block;
width: 475px;
height: 55px;
top : 475px;
left:44px;
overflow: hidden;
z-index: 500;
border-top:1px solid #4B5C5B;
background: none repeat scroll 0 0 rgba(10, 10, 10, 0.99);
}
#messagerie{
position: absolute;
display: inline-block;
width: 475px;
height: 100%;
overflow: hidden;
z-index: 500;
box-shadow: inset 0px -50px 50px 10px #070707;
background-image: url('../img/design/com/com_mess_inter1.png');
}
.boitemess{
display: inline-block;
margin: 1px;
padding: 5px;
width: 300px;
word-wrap:break-word;
overflow: hidden;
height: 12px;
}
#infomess{
position: absolute;
left: 190px;
top:12px;
}
.mess{
max-width: 98%x;
padding: 18px;
padding-bottom: 50px;
word-wrap: break-word;
}
#contenumess{
position: absolute;
top:20px;
left: 20px;
width: 432px;
display: block;
position: relative;
height:330px;
overflow: auto;
text-align:justify;
}
#contenumess_rep{
position: absolute;
top:20px;
left: 20px;
width: 432px;
display: block;
position: relative;
height:150px;
overflow: auto;
}
.datemessage{
position: absolute;
top :10px;
right: 35px;
}
.inline{
display: inline;
vertical-align: top;
clear: both;
}
.pseudomessage{
position: absolute;
display: inline;
vertical-align: top;
font-variant: small-caps;
font-weight: 700;
}
.datemess{
position: absolute;
display: inline;
top: 30px;
}
.sujetmess{
position: absolute;
display: inline-block;
top: 50px;
}
.entetemess{
position: relative;
height: 50px;
border-top:3px solid #101010;
padding: 15px;
padding-bottom: 30px;
background: none repeat scroll 0 0 rgba(0, 0, 0, 0.6);
}
.entetemess img{
padding: 5px;
margin-right: 10px;
}
/*NOUVEAU MESS*/
.menunewmes{
box-shadow: 0px 0px 4px 0px #b90b0b;
}
.btn_mess{
font-size: 75%;
width: 35px;
height: 35px;
overflow: hidden;
display: inline-block;
position: center;
background-color: transparent;
border-radius: 2px;
margin-left: 5px;
margin-top: 10px;
text-decoration: none;
text-align: center;
border: 0px;
}
.btn_mess:hover,.btn_mess:focus{
cursor: pointer;
background-color: #4B5C5B;
}
#messaff{
position: relative;
}
#messform{
padding-top: 5px;
}
#messform > input{
margin: 2px;
border-radius: 2px;
color: #ddd;
box-shadow: none;
background: none;
font-size: 13px;
}
#messujet{
width: 420px;
}
#messform > textarea{
border-radius: 2px;
color: #ddd;
box-shadow: none;
background: none;
resize: none;
}
#messform2{
padding-top: 5px;
}
#messtxt{
height: 263px;
width: 420px;
font-size: 13px;
margin: 2px;
}
#messtxt_rep{
height: 170px;
width: 424px;
font-size: 13px;
margin-left: 20px;
border-top: 1px solid #101010;
border-radius: 2px;
color: #ddd;
box-shadow: none;
background: none;
resize: none;
}
.wrapmess{
padding: 2px;
position: relative;
border-bottom: 1px dashed #101010;
cursor: pointer;
}
.wrapmess:hover{
border-bottom:1px dashed #707070;
color: #e38c11;
}
.newmes{
background: none repeat scroll 0 0 rgba(185, 11, 11, 0.5);
}
.newmes:hover{
background-image: linear-gradient(to bottom, #ED5C6B, #b90b0b);
padding-left: 5px;
color: #ddd;
}
.newmes:active{
background-image: linear-gradient(to bottom, #b90b0b, #ED5C6B);
}
#ecran_com{
position: absolute;
display: inline-block;
width: 475px;
height: 420px;
top:55px;
left:44px;
overflow: hidden;
background-color: #000;
}
#menu_mess{
position: absolute;
right: 55px;
bottom:15px;
}
#visu_mess{
position: absolute;
top: 20px;
left: 20px;
width: 435px;
height: 360px;
}
.new_btn{
width: 35px;
height: 35px;
display: inline-block;
background-color: transparent;
border-radius: 2px;
margin-left: 5px;
margin-top:10px;
cursor: pointer;
border: 0px;
}
.com004{
position: relative;
top: 6px;
}
#messform2 .com004{
position: relative;
top: 8px;
left: 45px;
}
#messform2 .com001{
position: relative;
top: 8px;
left: 50px;
}
.fleche_droite,.fleche_gauche, .page_courante{
width: 35px;
height: 35px;
background-color: transparent;
cursor: pointer;
position: absolute;
}
.fleche_droite{
background-image: url('../img/design/com/com_mess__suiv.png');
top: 5px;
left: 90px;
}
.fleche_gauche{
background-image: url('../img/design/com/com_mess__prec.png');
top: 5px;
left: 15px;
}
.page_courante{
background-image: url('../img/design/com/com_mess__act.png');
text-decoration: none;
text-align: center;
color: #000;
font-weight: 700;
padding-top: 8px;
top: 5px;
left: 55px;
}
.footermess{
position: absolute;
width: 200px;
bottom: -10px;
height: 25px;
}
.footermess2{
position: absolute;                
width: 200px;
bottom: 30px;
height: 25px;
left: 50px;
}
#visu_mess .closefaq{
right : 5px;
display: inline;
float: right;
position: relative;

}