/* Main styles: layout, menus, slideshow, character selector and sheet */

/* beta/test tools: hidden except on the beta site and when running locally (startUp adds .betaSite) */
.beta {
    display: none;
}

.betaSite .beta {
    display: revert;
}

/* Main menu is laid out in a phone-shaped column. --u is 1% of that column's width:
   1vw on a phone, capped by the window height on wider screens so nothing grows or overlaps */
#mainMenuDiv {
    --u: min(1vw, 0.55vh);
}

#mainMenuItemsDiv {
    font-size: calc(5.4 * var(--u));
}

div {
    -webkit-user-select: none; /* Safari 3.1+ */
    -moz-user-select: none; /* Firefox 2+ */
    -ms-user-select: none; /* IE 10+ */
    user-select: none; /* Standard syntax */
}

charCard {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1;
}

.container {
    position: relative;
}

.namePosition {
    position: absolute;
    bottom: 50%;
    left: 10%;
    transform: translate(-0%, +50%);
    font-size: 9vw;
    text-align: center;
}

.strPosition {
    position: absolute;
    bottom: 91%;
    left: 33.5%;
    transform: translate(-50%, 50%);
    font-size: 7.4vw;
}

.strTouchPosition {
    position: absolute;
    top: 2%;
    bottom: 84%;
    left: 2%;
    right: 51%;
}

.dexPosition {
    position: absolute;
    bottom: 77%;
    left: 33.5%;
    transform: translate(-50%, 50%);
    font-size: 7.4vw;
}

.dexTouchPosition {
    position: absolute;
    top: 16%;
    bottom: 70%;
    left: 2%;
    right: 51%;
}

.intPosition {
    position: absolute;
    bottom: 63%;
    left: 33.5%;
    transform: translate(-50%, 50%);
    font-size: 7.4vw;
}

.intTouchPosition {
    position: absolute;
    top: 30%;
    bottom: 56%;
    left: 2%;
    right: 51%;
}

.maPosition {
    position: absolute;
    bottom: 49%;
    left: 33.5%;
    transform: translate(-50%, 50%);
    font-size: 7.4vw;
}

.weapon1Position {
    position: absolute;
    bottom: 30%;
    left: 30%;
    font-size: 5.5vw;

 }

.weapon2Position {
    position: absolute;
    bottom: 24%;
    left: 30%;
    font-size: 5.5vw;

}

.weapon1TouchPosition {
    position: absolute;
    top: 60%;
    bottom: 29%;
    left: 2%;
    right: 2%;
}

.weapon2TouchPosition {
    position: absolute;
    top: 70%;
    bottom: 19%;
    left: 2%;
    right: 2%;
}

.armor1Position {
    position: absolute;
    bottom: 12%;
    left: 30%;
    transform: translate( 0%, +50%);
    font-size: 5.5vw;

}

.armor2Position {
    position: absolute;
    bottom: 7%;
    left: 30%;
    transform: translate( 0%, +50%);
    font-size: 3.8vw;

}

.armorTouchPosition {
    position: absolute;
    top: 81%;
    bottom: 0%;
    left: 2%;
    right: 2%;
}

.portraitPosition {
    position: absolute;
    top: 7.3%;
    left: 52%;

    bottom: 43%;
    right: 4%;
    font-size: 100%;
    text-align: center;
}

.talentTitlePosition {
    position: absolute;
    top: 0%;
    left: 52%;
    bottom: 92%;
    right: 24%;
}

.spellTitlePosition {
    position: absolute;
    top: 0%;
    left: 76%;
    bottom: 92%;
    right: 4%;
}

.rightSideMenu {
    transition: 0.4s;
    position: fixed;
    left="120%";
    width="500%";
    background-color: lightgrey;
    font-size: 5.3vw;
    padding: 5%;
}

.rightSideFrameMenu {
    transition: 0.5s;
    position: fixed;
    left: "100%";
    right: -50%;
    height: auto;
    font-size: 6.3vw;
}

.leftSideMenu {
    transition: 0.6s;
    position: fixed;
    left="-200%";
    width="50%";
    background-color: lightgrey;
    font-size: 2.8vh;
}

.helpPosition {
    position: absolute;
    top: 17.3%;
    left: 17%;
    bottom: 23%;
    right: 17%;
    font-size: 100%;
    background-color: lightgrey;
    border: thin;
    display: none;
}

.myButton{
    border: thin;
    border-radius: 10;
    border-color: black;
    font-size: 100%;
    margin: 1px;
}

.percentages {
    display: none;
    font-size: 3vw;
    text-align="left"
    t
}

.slideImage {
    width: calc(34 * var(--u));
    opacity: 0;
    transition: opacity 1s;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.footerButton {
    bottom:0%;
    font-size: 4.5vw;
    border: solid thin;
    border-radius: 4px;
    background: lightGrey;
}

.talentSpellFormat {
    font-size:5.4vw;
    padding: 1vh 2.5vh;
    line-height: 1.8;
    z-index: 10;
    width: 85%
}