﻿#infoLabel {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: zoom-in;
}

img.aspectRatio {
    width: 100%;
    height: auto;
    min-width: 50px;
}

#game .leftSection {
    flex: 1 1 200px;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}
#panel .rightSection {
    flex: 0 0 200px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    height: auto; /* wichtig: nicht fix auf 100% setzen */
    min-height: 40%; /* mindestens 40% der Höhe vom Elterncontainer */
    max-height: 400px;
    overflow-y: auto;
    overflow-x: auto;
}

#playerData {
    flex: 0 0 auto;
}

#panel .rightSection .boards {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
}

#infoPanel {
    flex: 1 1 auto;
}

#panel {
    height: 100%;
}

#board {
    margin-top: 6px;
}

#board #logo {
    position: absolute;
    width: 8%;
    left: 91.5%;
    top: 94%;
    z-index: 100;
}

#board > div {
    position: relative;
    float: left;
    width: 100%;
    line-height: 0;
}

#board > div > img:nth-child(1) {
    width: 100%;
}

#board div.hungerWallCathedral,
#board div.seals,
#board div.belowSeals {
    width: 57.39%;
}
#board div.actionCrane {
    width: 42.61%;
    float: right;
}
div.actionCrane div.actionWheel {
    position: absolute;
    width: 68%;
    left: 16.5%;
    top: 14%;
}

#board div.hexTiles {
    position: absolute;
    width: 40%;
    height: 84.5%;
    left: 58%;
    top: 0;
}

div.hexTiles div.hexes {
    position: absolute;
    width: 95%;
    height: 31%;
    left: 3%;
}
div.hexTiles div.hexesUpgrade {
    top: 1%;
}
div.hexTiles div.hexesWall {
    top: 35%;
}
div.hexTiles div.hexesBuilding {
    top: 68.5%;
}


div.playerBoard {
    position: relative;
}
#panel div.playerBoardArea {
    flex: 1 1 60%;
}
div.playerBoard img.playerBoard {
    width: 100%;
    position: absolute;
    left: 0; top: 0;
}

div.playerBoard img.playerBoardBase {
    width: 100%;
}

div.playerBoard img.wheel {
    position: absolute;
    width: 26%;
    top: 15%;
}
div.playerBoard img.wheel.gold {
    left: 9.8%
}
div.playerBoard img.wheel.stone {
    left: 37.5%;
}
div.playerBoard img.rivet {
    position: absolute;
    width: 3%;
    top: 32.7%;
}
div.playerBoard img.rivet.gold {
    left: 21.3%
}
div.playerBoard img.rivet.stone {
    left: 49%
}

#panel div.actionBoardArea {
    position: relative;
    flex: 1 1 40%;
}
