body{

    background: url('../img/ui/bg/bg.jpg');
    text-align: center;
    font-family: sans-serif;
}


/* a{ color: #0000EE; text-decoration: none;} */
a{ color: #17337e; text-decoration: none;}


h1, h2, h3{font-family: goudy; color: black; letter-spacing: 1px;}

@font-face {
  font-family: goudy;
  src: url('font/goudy.ttf');
}

@font-face {
  font-family: 'Reenie Beanie';
  font-style: normal;
  font-weight: 400;
  src: url(font/reenie_beanie.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

input[type="number"]{ text-align: center; width: 75px; }


.desaturate{
  filter: grayscale(1);
}

.blink {
    animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
    50% {
        opacity: 0;
    }
}

.fire {
    animation: fire 2.5s linear infinite;
}
@keyframes fire {
    50% {
        opacity: 0.6;
    }
}


.popup-content-box{
    position:fixed;
    left: 50%;
    top: 50%;
    -ms-transform: translate(-50%,-50%);
    -moz-transform:translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
     transform: translate(-50%,-50%);
}


.player-coords{cursor: pointer;}


/* box shadow */
.box-shadow{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}


/* no decoration */
.no-decoration{text-decoration: none;}


/* table max width */
table{max-width: 600px;}


/* login */
#banner {  text-align: center; top: 0px; position: relative; margin: 0 auto; width: 250px; }
.olympia{ animation-name: olympia; animation-duration: 10s; animation-iteration-count: infinite; animation-timing-function: linear;}
.banner-addon {  position: absolute; top: 75px; right: -25px; animation-name: addon; animation-duration: 60s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; }

@keyframes addon {
    0%{
      right: -25px;
    }
    50%   {
      right:240px;
    }
    100% {
      right: -25px;
      z-index: -1;
      width: 34px;
    }
}

/* (C) 2D SPINNING ANIMATION */
@keyframes spin {
  from { transform: rotate(0deg) }
  to { transform: rotate(360deg) }
}
.spin { animation: spin 3s linear infinite; }

#table-login{ position: relative; font-size: 88%; background: url('../img/ui/bg/login_ext.png?1'); width: 300px; height: 332px; margin-top: -50px; }
#table-login input{ margin: 0px; text-align: center; }
#table-login input[type="submit"]{ margin: 10px; }
#table-login h1{ margin-top: 25px; font-family: goudy; color: white; text-shadow: 1px 1px #0a0a0a; letter-spacing: 1px; }
#table-login #login-description{  margin: 20px; margin-top: 0px; margin-bottom: 5px; color: white; }
#table-login #login-maj{position: absolute; bottom: 15px; right: 15px;}
#table-login #login-reset{position: absolute; bottom: 15px; left: 15px;}
#table-login #login-maj a, #table-login #login-reset a{ color: grey; }
.logout-button{ width: 100%; }

/* awards */
#index-award{ height: 200px; margin-top: 100px; }
#index-award img{ display: none; cursor: pointer; }

#index-partenaires{}
#index-partenaires img{height: 25px; cursor: pointer; margin: 2px;}
#index-partenaires img:hover{}

#index-teasing, .search-result{ padding: 10px; position: relative; }
.search-result{max-height: 150px; overflow: hidden; cursor: pointer;}
.search-go{position: absolute; bottom: 5px; right: 5px;}
#index-teasing b{ color: red;}

#scroll-banner{max-width: 98vw;}

#index-install, #index-changelog, #index-tamacochon{ margin-top: 5px; position: absolute; top: 0px; left: 0px; text-align: left;}
.install-app{ border-radius: 5px; background: #fff; color: black; text-decoration: none; padding: 2px; font-size: 70%; opacity: 0.7;}
#index-changelog{top:30px;}
.install-app:hover{ opacity: 1; }
.install-app img{ vertical-align: middle;}
#index-tamacochon{top: 60px;}

/* install app */
#install-app{ text-align: center; }
.app-icone{ background: white; border-radius: 15px; padding: 3px; }


/* scroll */
#scroll-banner, #scroll-region{position: absolute; top: 25px; width: 99%; text-align:center; background: url('../img/ui/parchemin/parchemin.png') center no-repeat; height: 125px; opacity: 0.85;}
#scroll-region{z-index: 100; top: 0px;}
#scroll-text{margin: 40px; font-family: goudy; color: black; letter-spacing: 1px;}

/*#scroll-banner{
  animation-name: fade;
  animation-duration: 10s;
}

@keyframes fade {
    0%{
      opacity: 0;
    }
    1%   {
      opacity:0.85;
    }
    100% {
        opacity: 0;
    }
}*/


/* news */
.index-news{ width: 200px; height: 133px; margin: 0px auto; cursor: pointer;  background: url('../img/ui/gui/metal.png'); margin-bottom: 4px;}
.news-title{  font-size: 120%; margin-left: 25px; margin-right: 25px; text-align:left; padding-top: 25px;  font-family: goudy; color: black;  letter-spacing: 1px;}
.news-content{ text-align:left; font-size: 88%; margin-left: 25px; margin-right: 25px; font-style: italic;}
.news-date{ text-align:right; font-size: 75%; margin-left: 25px; margin-right: 25px; font-style: italic; color: white;}
.index-note{}
.index-note img{width: 25px; float: right;}

#avis{font-size: 12px; margin: 0 auto;}
#avis img{ float: left; width: 30px; margin: 2px; display: none; }


/* player view */
#view-wrapper{position: relative; overflow: scroll;}
#view-wrapper::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}
#player-view{user-select: none;}
#player-view table{cursor: pointer;}

#player-view .case{ width: 50px; height: 50px; text-align: center; vertical-align: middle; line-height: 50px; margin: 0px; padding: 0px; position: relative;}

.view-ground{position: absolute; width: 50px; height: 50px; background: url('../img/ground/steppe.png'); z-index: -100;}

.view-ground-arcadia{ background: url('../img/ground/eau.png');}

#player-view .case img{ position: absolute; top: 0px; left: 0px;}

#player-view .z{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);}



#button-wrapper{ position: absolute; top: 0px; left: 0px;}

#button-go{ width: 50px; height: 50px; }

.case-dedouble{ margin-left: 12px; margin-top: 0px; z-index: 1; opacity: 0.6;}
.case-dedouble2{ margin-left: -12px; margin-top: 0px; z-index: 1; opacity: 0.6;}


.z{ background: #000 url('../img/ground/underground.png'); }
.z0{ background: none; }
.plan-hell{ background: url('../img/ground/enfers.png'); }
.plan-fefnir{ background: url('../img/ground/fefnir.png'); background-size: cover; }
.plan-demiurge{ background: url('../img/ui/view/bg_space.jpg'); background-size:cover;
        -webkit-animation: slidein 50s;
        animation: slidein 50s;

        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;

        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

        -webkit-animation-direction: alternate;
        animation-direction: alternate;     }

.plan-ombres{ background: url('../img/ui/view/bg_ombres.jpg'); background-size:cover;
        -webkit-animation: slidein 50s;
        animation: slidein 50s;

        -webkit-animation-fill-mode: forwards;
        animation-fill-mode: forwards;

        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;

        -webkit-animation-direction: alternate;
        animation-direction: alternate;     }

.plan-ombres img{ opacity: 0.5; filter: grayscale(100%); }
.plan-ombres .avatar-shadow{ visibility: hidden; }

@-webkit-keyframes slidein {
from {background-position: top; background-size:1500px; }
to {background-position: -100px 0px;background-size:1375px;}
}

@keyframes slidein {
from {background-position: top;background-size:1500px; }
to {background-position: -100px 0px;background-size:1375px;}

}
.z1, .z2, .z3, .z4, .z5{ background: #8a0303;}
.z6, .z7, .z8, .z9, .z10{ background: WhiteSmoke;}

.z25, .z26{ background: url('../img/ui/view/bg_space.jpg'); background-size: cover;}

.biome1{ opacity: 0.3; }
.biome2{ opacity: 0.2; }
.biome3{ opacity: 0.1; }



.under{ opacity: 0.6; }
.underUnder{ opacity: 0.2; }

.glow{
  animation-name: glowing;
  animation-duration: 10s;
  animation-iteration-count: infinite;
}

@keyframes glowing {
    0%   {
        filter: brightness(1 );
    }
    50%  {
        filter: brightness(1.6);
    }
    100% {
        filter: brightness(1);
    }
}



.race{ z-index: 1;}
.race-nain{ border-bottom: 2px solid rgba(255, 0, 0, .5); }
.race-elfe{ border-bottom: 2px solid rgba(0, 128, 0, .5); }
.race-olympien{ border-bottom: 2px solid rgba(255, 165, 0, .5); }
.race-geant{ border-bottom: 2px solid rgba(165, 42, 42, .5); }
.race-hs{ border-bottom: 2px solid rgba(46, 102, 80, .5); }
.race-humain{ border-bottom: 2px solid rgba(0, 0, 255, .5); }
.race-lutin{ border-bottom: 2px solid rgba(255, 255, 255, .5); }

.race-nain-max{ box-shadow:inset 0px 0px 0px 3px rgba(255, 0, 0, 1); }
.race-elfe-max{ box-shadow:inset 0px 0px 0px 3px rgba(0, 128, 0, 1); }
.race-olympien-max{ box-shadow:inset 0px 0px 0px 3px rgba(255, 165, 0, 1); }
.race-geant-max{ box-shadow:inset 0px 0px 0px 3px rgba(165, 42, 42, 1); }
.race-hs-max{ box-shadow:inset 0px 0px 0px 3px rgba(46, 102, 80, 1); }
.race-humain-max{ box-shadow:inset 0px 0px 0px 3px rgba(0, 0, 255, 1); }
.race-lutin-max{ box-shadow:inset 0px 0px 0px 3px rgba(255, 255, 255, 1); }

.avatar-shadow{ filter: contrast(0%) brightness(50%); transform: rotate(-35deg); width: 35px; margin-top: 14px; margin-left: -5px; z-index: 1; opacity: 0.3;}

.sign{z-index: 3;}

.displayed{width: 15px; position: absolute; left: 0px; margin-left: 18px;}


.reflop{ transform: scaleX(1); }


/* player shortcut menu */
#shortcut-wrapper{margin-top: -10px;}
#shortcut-menu{width: 273px; height: 35px; background: url('../img/ui/raccourcis/bar.png');  margin: -11px;}
#shortcut-menu button{opacity: 0.2; width: 39px; height: 35px; margin: 0px; cursor: pointer;}
#shortcut-menu button:hover{opacity: 0.5;}

/* player menu */
.table-caracs{ display: inline-table; }
.table-caracs td{ text-align: center; width: 30px; white-space: nowrap;}
.effect-wrapper1{ position: absolute; right: 0px; top: 0px;}
.effect-wrapper7{ position: absolute; right: 13px; top: 0px;}
.effect-wrapper13{ position: absolute; right: 26px; top: 0px;}
.effect-wrapper19{ position: absolute; right: 26px; top: 0px;}
.effect-wrapper1 img, .effect-wrapper7 img, .effect-wrapper13 img, .effect-wrapper19 img{display: block;}

.effect-time{font-size: 75%; margin: 0 0 0 13;}
/* .effect-time img{width: 8px;} */


#missives{position: relative;}
.missives-n{display: inline; background: red; position: absolute; font-weight: bold; top:-10px; right: -10px; width: 20px; border-radius: 10px; color: white; font-size: 12px;}
.missive-n-shortcut{text-align: center; top: 0px;}


.wiki{color: black;}


/* npc */
#npc-portrait{white-space: nowrap;}
.table-caracs .npc{ width: 50px; }
.npc-wrapper{position: relative; cursor: pointer;}
.npc-selected{ border: 1px solid green;}
.npc-not-selected{ border: 1px solid grey;}
.npc-blood{background: maroon; width: 100%; height: 100%; position: absolute; bottom: 0px; opacity: 0.5; }
.npc-dead{ filter:grayscale(1); }

.npc-mail{position: absolute; bottom: 0px; left: 0px; display: none;}
.npc-mail img{width: 50px;}


/* #player-links{ margin: 10px; margin-bottom: 20px;} */
.menu-links{text-align: center;}
.menu-links a {margin: 5px; }


.hide-menu{display: none;}

.disableMenu{display: none;}


/* new turn */
#new-turn-wrapped{ font-size: 88%;}
/* #new-turn-wrapped:hover{opacity: 1;} */
.not-new-turn{opacity: 0.8;}


/* forum top menu */
#forum-top-menu #player-stats, #forum-top-menu #player-links{ display: none;}
#lmenu-wrapper{min-width:150px;}
.player-title{font-family: goudy; font-size: 120%;  letter-spacing: 1px;}


/* info */
#info-avatar, #info-mdj{ margin: 10px; }
#info-avatar-name {
  display: flex;
  justify-content: center;
  align-items: center;
}
#info-effect{ font-size: 88%; cursor: pointer;}
#info-effect .effect-name{ display: none; }
#info-effect-show{ display: inline; }
#info-faction td {padding-left: 5px;}

.secret-faction{opacity: 0.5;}
.secret-faction:hover{opacity: 1;}

#invitation-history{height: 100px; overflow: scroll;}

#info-mdj #wrapper{ max-width: 600px; max-height: 250px; overflow: scroll;}


/* inventory */
#inventory-filter{margin: 5px;}

.emplacement-img{opacity: 50%; cursor: pointer;}
.free-emplacement-tr{ display: none; cursor: pointer;}
.emplacement-show{font-size: 88%; text-align: right; width: 300px; margin: 0 auto; margin-top: -5px;}

/* item */
#item-action{ margin-top: 10px;}

#item-give{ margin-top: 10px; }

#info-item{ width: 500px; max-width: 80vw;}

.coated-nara{ filter:grayscale(1); }

.a-item img{width: 50px; height: 50px;}

#item-recipe{ margin: 0 auto; margin-top: 20px; font-size: 88%; width: 200px; text-align: right;}
#item-recipe img{ width: 25px; }


/* market */
.trade-table .dialog-table{cursor: pointer;}


/* fav */
.fav-used-1{ color: blue; }


/* item : grenade */
#grenade{z-index: 5;}
#spell{z-index: 5;}
#structure{z-index: 5;}


/* display item */
.display-result{ text-align: center; padding: 5px;}


/* action */
.action-result{ margin-top: 10px; }
.action-detail{ margin-top: 10px; font-style: italic; color: grey;}
.action-reload{ margin-top: 10px; }
.assist-table{ margin-top: 10px; opacity: 0.5; color: black;}



/* upgrades */
.upgrades-carac{ cursor: pointer;  border-top: #eee 1px solid; border-left: #eee 1px solid; padding: 5px; display: inline-table;  background: url('../img/ui/gui/metal.png');transition: transform 0.2s;}
.upgrades-carac-flipped {transform: rotateY(180deg) scale(-1, 1);}
.upgrades-carac .carac{width: 50px; height: 50px; text-align: center; vertical-align: middle; line-height: 50px;  font-weight: bold; white-space: nowrap;}
.back{ display: none;}
.green{ color: green; }
.red{ color: red; }
.grey{ color: grey; }
.gold-gradient{ background: url('../img/ui/bg/gold_gradient.jpg'); background-size: cover; }
.gold-gradient .back{ color: yellow; }
.gold-gradient .green{ color: yellow; }
.gold-gradient .red{ color: white; }

.spell-forget{opacity: 0.5; color: #333; cursor: pointer;}
.spell-temp{opacity: 0.7; color: #17337e;}
.spell-known{ cursor: pointer;}



/* effect */
#effect-wrapper img{ width: 35px; cursor: pointer;}


/* galery */
.galery{ margin-top: 10px; }
#portrait-galery img{ cursor: pointer; }
#galery-m, #galery-f{ display: none; }
#portrait-galery img[data-src] {
  filter: blur(0.2em);
}

#portrait-galery img {
  filter: blur(0em);
  transition: filter 0.5s;
}

.screenshot{box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); cursor: pointer; display: block; margin: 0 auto; margin-bottom: 15px;}


/* map */
#map-div { position: relative; margin: 0 auto; cursor: pointer; }


/* dialog */
.dialog-table{min-width: 350px; margin: -11px; background: url('../img/ui/gui/metal.png');}
/* .dialog-table img{ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } */
.node{display: none;}
.first-node{display: inline;}

.node-comeback-text{display: none;}

.answer{line-height: 1.8; padding: 5px;}
.text-wrapper{ padding: 10px; min-height: 58px; }

.dead-end{display: none;}


/* dialog gui */
.gui-table{padding:0px;}
.gui-table td{padding: 0px; margin: 0px;}
.corner{width: 20px; height: 20px;}
.vertical-bar{width: 20px;}
.horizontal-bar{height: 20px;}

.top-bar{background: url('../img/ui/gui/top_bar.png');}
.bottom-bar{background: url('../img/ui/gui/bottom_bar.png');}
.left-bar{background: url('../img/ui/gui/left_bar.png');}
.right-bar{background: url('../img/ui/gui/right_bar.png');}

.top-left-corner{background: url('../img/ui/gui/top_left_corner.png');}
.top-right-corner{background: url('../img/ui/gui/top_right_corner.png');}
.bottom-left-corner{background: url('../img/ui/gui/bottom_left_corner.png');}
.bottom-right-corner{background: url('../img/ui/gui/bottom_right_corner.png');}


/* input */
input[type="text"], input[type="password"]{ background: #f9dfa8 url('../img/ui/parchemin/input.png');}