#map {
    position: relative;
    width: 1024px; height: 768px;
    background-image: url(../img/map-pixel-temp.png);
}

#interfaceRowWrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#interfaceTop {
    padding: 10px;
}

#interfaceMiddle {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#interfaceBottom {
    display: flex;
    flex-direction: row;
    width: 1024px;
}

#interfaceTop > span {
    padding: 0 10px;
}

#interfaceMiddle #leftColumn {
    /*padding-right: 10px;*/
}

#interfaceMiddle #rightColumn {
    padding-left: 10px;
    display: flex; flex-direction:column;
    justify-content: space-between;
}

#moveSelection > div {
    margin-top: 10px;
}

.factionCapitolWrapper {
    position: absolute;
}

.factionCapitolWrapper .capitol {
    width: 64px;
    height: 64px;
    /*border: solid 2px #fff;*/
}

.factionCapitolWrapper .factionName {
    text-shadow: #000 0px 0px 3px;
    text-align: center;
    width: 256px;
    margin-left: -96px;
}

.factionCapitolWrapper .units {
    display: flex; flex-direction: row; flex-wrap: wrap;
    /*background-color: #ffffff6b;*/
    justify-content: center;
    width: 256px;
    margin-left: -96px;
}

.su {
    /*width: 64px; height: 64px; */
    width: 32px; height: 32px;
    background-size: contain;
    margin-left: -8px;
    filter: drop-shadow(0px 0px 1px #000);
}

#debugMarker {
    width: 2px; height: 2px;
    background-color: #fff;
    position: absolute;
}

.smallCard {
    display: flex; flex-direction:column; align-items:center;
    padding: 10px;
}

#armyLevelImage {
    background-color: #0c1010;
}

#moveSelection .unavailableOption {
    opacity: 0.5;
    color: gray;
}

#moveSelection .availableOption {
    color: #84c0f5;
}

#moveSelection .availableOption:hover {
    color: #fdf901;
    cursor: pointer;
}

.oneMoreTurn {
    color: #84c0f5;
}

.oneMoreTurn:hover {
    color: #fdf901;
    cursor: pointer;
}