#game .clickMe.magnify,
#panel .clickMe.magnify {
    min-width: 20px;
    max-width: 25px;
    z-index: 1000;
}

img {
    height: auto;
}

#infoLabel .infoPic {
    height: 1.8em;
    vertical-align: bottom;
    margin-top: -.4em;
    margin-bottom: -0.3em;
}

.chooseColor img.meeple,
#gameTypeSettings img.meeple {
    width: 1.5em;
}


img.hexTile {
    width: auto;
    height: auto;
}

tr.playerDataBasic td span.valueResTechnology {
    color: green;
}
tr.playerDataBasic td.activate {
    background-color: lightgreen;
    border: 1px solid green;
    box-sizing: border-box;
}

div.actionCrane img.wheel {
    width: 100%;
}
div.actionCrane.orientation0 .actionWheel {
    transform: rotate(30deg); -webkit-transform: rotate(30deg);
}
div.actionCrane.orientation1 div.actionWheel {
    transform: rotate(60deg); -webkit-transform: rotate(60deg);
}
div.actionCrane.orientation2 div.actionWheel {
    transform: rotate(90deg); -webkit-transform: rotate(90deg);
}
div.actionCrane.orientation3 div.actionWheel {
    transform: rotate(120deg); -webkit-transform: rotate(120deg);
}
div.actionCrane.orientation4 div.actionWheel {
    transform: rotate(150deg); -webkit-transform: rotate(150deg);
}
div.actionCrane.orientation5 div.actionWheel {
    transform: rotate(180deg); -webkit-transform: rotate(180deg);
}
div.actionCrane.orientation6 div.actionWheel {
    transform: rotate(210deg); -webkit-transform: rotate(210deg);
}
div.actionCrane.orientation7 div.actionWheel {
    transform: rotate(240deg); -webkit-transform: rotate(240deg);
}
div.actionCrane.orientation8 div.actionWheel {
    transform: rotate(270deg); -webkit-transform: rotate(270deg);
}
div.actionCrane.orientation9 div.actionWheel {
    transform: rotate(300deg); -webkit-transform: rotate(300deg);
}
div.actionCrane.orientation10 div.actionWheel {
    transform: rotate(330deg); -webkit-transform: rotate(330deg);
}

div.actionCrane .actionTile {
    position: absolute;
    width: 18%;
}
div.actionCrane .actionTile.plus5 {
    width: 10%;
}
div.actionCrane .slot1 {
    left: 40.8%;
    top: -15.5%;
}
div.actionCrane .slot2 {    
    transform: rotate(30deg); -webkit-transform: rotate(30deg);
    left: 65.7%;
    top: -9.2%;
}
div.actionCrane .slot3 {    
    transform: rotate(60deg); -webkit-transform: rotate(60deg);
    left: 84.5%;
    top: 9.1%;
}
div.actionCrane .slot4 {    
    transform: rotate(90deg); -webkit-transform: rotate(90deg);
    left: 91.1%;
    top: 34%;
}
div.actionCrane .slot5 {    
    transform: rotate(120deg); -webkit-transform: rotate(120deg);
    left: 84.3%;
    top: 58.7%;
}
div.actionCrane .slot6 {    
    transform: rotate(150deg); -webkit-transform: rotate(150deg);
    left: 66.3%;
    top: 77.2%;
}
div.actionCrane .slot7 {    
    transform: rotate(180deg); -webkit-transform: rotate(180deg);
    left: 41.2%;
    top: 83.8%
}
div.actionCrane .slot8 {    
    transform: rotate(210deg); -webkit-transform: rotate(210deg);
    left: 16.1%;
    top: 77%;
}
div.actionCrane .slot9 {    
    transform: rotate(240deg); -webkit-transform: rotate(240deg);
    left: -2%;
    top: 59%;
}
div.actionCrane .slot10 {    
    transform: rotate(270deg); -webkit-transform: rotate(270deg);
    left: -9.2%;
    top: 34.4%;
}
div.actionCrane .slot11 {    
    transform: rotate(300deg); -webkit-transform: rotate(300deg);
    left: -2.6%;
    top: 9%;
}

div.actionCrane .actionTile.plus5.slot1 {
    margin-top: 10%;
    margin-left: 12%;
}
div.actionCrane .actionTile.plus5.slot2 {
    margin-top: 14%;
    margin-left: 11%;
}
div.actionCrane .actionTile.plus5.slot3 {
    margin-left: 8%;
    margin-top: 16%;
}
div.actionCrane .actionTile.plus5.slot4 {
    margin-left: 4%;
    margin-top: 18%;
}
div.actionCrane .actionTile.plus5.slot5 {
    margin-left: 0%;
    margin-top: 17%;
}
div.actionCrane .actionTile.plus5.slot6 {
    margin-left: -3%;
    margin-top: 14%;
}
div.actionCrane .actionTile.plus5.slot7 {
    margin-left: -4%;
    margin-top: 10%;
}
div.actionCrane .actionTile.plus5.slot8 {
    margin-left: -2%;
    margin-top: 6%;
}
div.actionCrane .actionTile.plus5.slot9 {
    margin-left: 0%;
    margin-top: 3%;
}
div.actionCrane .actionTile.plus5.slot10 {
    margin-top: 3%;
    margin-left: 4%;
}
div.actionCrane .actionTile.plus5.slot11 {
    margin-top: 4%;
    margin-left: 8%;
}


div.actionCrane .actionTile.actionDone {
    opacity: .4;
}


div.actionCrane .slot.pin {
    width: 18%;
}
div.actionCrane .slot1.pin.bonus {
    top: 18%;
    left: 41%;
}
div.actionCrane .slot1.pin.action2 {
    top: 0%;
    left: 41%;
}
div.actionCrane .slot2.pin.bonus {
    top: 21%;
    left: 51%;
}
div.actionCrane .slot2.pin.action1 {
    top: -8%;
    left: 70%;
}
div.actionCrane .slot2.pin.action2 {
    top: 5.5%;
    left: 62%;
}
div.actionCrane .slot3.pin.bonus {
    top: 28%;
    left: 59%;
}
div.actionCrane .slot3.pin.action1 {
    top: 13%;
    left: 91.5%;
}
div.actionCrane .slot3.pin.action2 {
    top: 20.8%;
    left: 77.5%;
}
div.actionCrane .slot4.pin.bonus {
    top: 38.5%;
    left: 61.5%;
}
div.actionCrane .slot4.pin.action1 {
    top: 41.5%;
    left: 99%;
}
div.actionCrane .slot4.pin.action2 {
    top: 41.5%;
    left: 83%;
}
div.actionCrane .slot5.pin.bonus {
    top: 48%;
    left: 58%;
}
div.actionCrane .slot5.pin.action1 {
    top: 70.5%;
    left: 91%;
}
div.actionCrane .slot5.pin.action2 {
    top: 62.5%;
    left: 77%;
}
div.actionCrane .slot6.pin.bonus {
    top: 56%;
    left: 51.5%;
}
div.actionCrane .slot6.pin.action1 {
    top: 91.5%;
    left: 70%;
}
div.actionCrane .slot6.pin.action2 {
    top: 77.5%;
    left: 62%;
}
div.actionCrane .slot7.pin.bonus {
    top: 58.5%;
    left: 41%;
}
div.actionCrane .slot7.pin.action1 {
    top: 99.5%;
    left: 41%;
}
div.actionCrane .slot7.pin.action2 {
    top: 83.5%;
    left: 41%;
}
div.actionCrane .slot8.pin.bonus {
    top: 56.5%;
    left: 31%;
}
div.actionCrane .slot8.pin.action1 {
    top: 91.5%;
    left: 12%;
}
div.actionCrane .slot8.pin.action2 {
    top: 77.5%;
    left: 20%;
}
div.actionCrane .slot9.pin.bonus {
    top: 48.5%;
    left: 23%;
}
div.actionCrane .slot9.pin.action1 {
    top: 70%;
    left: -9%;
}
div.actionCrane .slot9.pin.action2 {
    top: 62%;
    left: 5%;
}
div.actionCrane .slot10.pin.bonus {
    top: 38.5%;
    left: 21%;
}
div.actionCrane .slot10.pin.action1 {
    top: 42%;
    left: -17%;
}
div.actionCrane .slot10.pin.action2 {
    top: 42%;
    left: -1%;
}
div.actionCrane .slot11.pin.bonus {
    top: 28%;
    left: 22.5%;
}
div.actionCrane .slot11.pin.action1 {
    top: 12.5%;
    left: -9.5%;
}
div.actionCrane .slot11.pin.action2 {
    top: 20.5%;
    left: 4.5%;
}

#board div.actionCrane img.clickMe.magnify {
    position: absolute;
    width: 9%;
    left: 90%;
    top: 1%;
}

.modal div.actionCrane {
    position: relative;
    height: auto;
}
.modal div.actionCrane > img {
    width: 100%;
}

div.hungerWallCathedral img.cube {
    position: absolute;
    width: 3%;
    height: auto;
}
div.hungerWallCathedral img.builtInStep {
    position: absolute;
    width: 6.2%;
    height: auto;
}
div.hungerWallCathedral img.cube.idx1,
div.hungerWallCathedral img.cube.idx3 {
    margin-left: 3%;
}
div.hungerWallCathedral img.cube.idx2,
div.hungerWallCathedral img.cube.idx3 {
    margin-top: 3%;
}
div.hungerWallCathedral img.row0 {
    top: 56.5%;
}
div.hungerWallCathedral img.row1 {
    top: 44.5%;
}
div.hungerWallCathedral img.row2 {
    top: 31%;
}
div.hungerWallCathedral img.row3 {
    top: 18%;
}
div.hungerWallCathedral img.row4 {
    top: 5%;
}
div.hungerWallCathedral img.HungerWall.column0 {
    left: 39%;
}
div.hungerWallCathedral img.HungerWall.column1 {
    left: 32%;
}
div.hungerWallCathedral img.HungerWall.column2 {
    left: 25%;
}
div.hungerWallCathedral img.HungerWall.column3 {
    left: 17.7%;
}
div.hungerWallCathedral img.HungerWall.column4 {
    left: 10.5%;
}
div.hungerWallCathedral img.Cathedral.column0 {
    left: 54.5%;
}
div.hungerWallCathedral img.Cathedral.column1 {
    left: 61.5%;
}
div.hungerWallCathedral img.Cathedral.column2 {
    left: 68.5%;
}
div.hungerWallCathedral img.Cathedral.column3 {
    left: 75.8%;
}
div.hungerWallCathedral img.Cathedral.column4 {
    left: 83%;
}

div.hungerWallCathedral .tier {
    position: absolute;
    width: 42.5%;
    height: auto;
}
div.hungerWallCathedral .tier.hungerWall {
    left: 3%;
}
div.hungerWallCathedral .tier.cathedral {
    left: 54%;
}
div.hungerWallCathedral .tier.tier1 {
    top: 44.6%;
}
div.hungerWallCathedral .tier.tier2 {
    top: 18.6%;
}
div.hungerWallCathedral .tier.tier3 {
    top: 5.6%;
}

div.hungerWallCathedral div.stepUpHungerWall {
    position: absolute;
    width: 6%;
    height: 6%;
    left: 14%;
    top: 88%;
}
div.hungerWallCathedral div.stepUpCathedral {
    position: absolute;
    width: 6%;
    height: 6%;
    left: 72%;
    top: 88%;
}
div.hungerWallCathedral div.sideStepHungerWall {
    position: absolute;
    width: 6%;
    height: 7%;
    left: 31.5%;
    top: 88%;
}
div.hungerWallCathedral div.sideStepCathedral {
    position: absolute;
    width: 4.5%;
    height: 10%;
    left: 58%;
    top: 86%;
}

#board div.hungerWallCathedral img.clickMe.magnify {
    position: absolute;
    width: 7%;
    left: 0%;
    top: 0%;
}
.modal div.hungerWallCathedral {
    position: relative;
}
.modal div.hungerWallCathedral img.hungerWallCathedral {
    width: 100%;
}

div.seals .pin.active {
    width: 7%;
}
div.seals .seal0.pin.active {
    left: 9%;
}
div.seals .seal1.pin.active {
    left: 25%;
}
div.seals .seal2.pin.active {
    left: 41%;
}
div.seals .seal3.pin.active {
    left: 57%;
}
div.seals .seal4.pin.active {
    left: 73%;
}

div.seals .cube {
    position: absolute;
    width: 4%;
    top: 66%;
}
div.seals .seal0.cube {
    left: 12%;
}
div.seals .seal1.cube {
    left: 28%;
}
div.seals .seal2.cube {
    left: 44%;
}
div.seals .seal3.cube {
    left: 60%;
}
div.seals .seal4.cube {
    left: 76%;
}

#board div.technologyPiles {
    position: absolute;
    width: 50%;
    top: 29%;
    left: 2%
}

div.technologyPiles div.level {
    position: absolute;
    width: 20%;
    height: auto;
}
div.technologyPiles div.level1 {
    left: 0;
}
div.technologyPiles div.level2 {
    left: 25%;
}
div.technologyPiles div.level3 {
    left: 50%;
}
div.technologyPiles div.level4 {
    left: 75%;
}

div.technologyPiles div.level img.technology {
    width: 100%;
    height: auto;
}
div.technologyPiles div.level img.technology.active {
    box-sizing: border-box;
    border: 3px solid green;
}
#game div.technologyPiles img.clickMe,
#panel div.technologyPiles img.clickMe {
    position: absolute;
    z-index: 50;
    width: 50%;
    max-width: 50%;
    left: 0;
    top: 10%;
}
div.technologyPiles div.level img.technology.clickMe.active {
    border: none;
}
div.technologyPiles img.technology.update {
    position: absolute;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
}
div.technologyPiles img.technologyUsed.update {
    position: absolute;
    width: 20%;
    left: 75%;
    top: 5%;
    z-index: 150;
}
.modal img.technology.active { border: 6px solid green; }
.modal div.technology { position: relative; }

.modal div.technology img.used {
    position: absolute;
    left: 75%;
    top: 10%;
}

div.hexTiles .hexTilesSupply {
    position: absolute;
    width: 5%;
    left: 100%;
    top: 0;
    visibility: hidden;
}

div.hexTiles .hexTile {
    position: absolute;
    width: 23%;
    top: 0;
}
div.hexTiles .hexTile.display0 { left: 0; }
div.hexTiles .hexTile.display1 { left: 25.5%; }
div.hexTiles .hexTile.display2 { left: 51%; }
div.hexTiles .hexTile.display3 { left: 77%; }

div.hexTiles img.clickMe.magnify {
    position: absolute;
    width: 9%;
    left: 91%;
    top: 28%;
}

div.hexTiles .underConstruction {
    opacity: .5;
}

/*.modal div.hexTiles img { position: relative; height: auto; }
.modal div.hexTiles { position: relative; height: auto; }
.modal.magnified.tile { min-width: 150px; max-width: 300px; width: 20%; height: auto; }
.modal.magnified.tile img { width: 100%; height: auto; }
.modal.magnified.tile.productionTile { min-width: 100px; max-width: 200px; width: 10%; }
.modal.magnified.tile.bridgeTile { min-width: 200px; max-width: 400px; width: 30%; }*/

div.river div.productionTiles {
    position: absolute;
    width: 29%;
    top: 44%;
    left: 28%;
    height: 26%;
}

div.river .productionTile {
    position: absolute;
    width: 14%;
}
div.river .productionTile.cnt2 {
    margin-left: 2%;
    margin-top: 1%;
}
div.river .productionTile.productionPoints2 {
    left: 4%;
    top: 3%;
}
div.river .productionTile.productionPoint {
    left: 20%;
    top: 8%;
}
div.river .productionTile.productionPointStone {
    left: 36%;
    top: 16%;
}
div.river .productionTile.productionPointGold {
    left: 51%;
    top: 27%;
}
div.river .productionTile.productionStone {
    left: 67%;
    top: 38%;
}
div.river .productionTile.productionGold {
    left: 83%;
    top: 50%;
}

#board div.city img.clickMe.magnify {
    position: absolute;
    width: 4%;
}
#board div.city img.clickMe.magnify.city {
    left: 93%;
    top: 5%;
}

#board div.city img.clickMe.info.city {
    margin-left: 1%;
    margin-top: -1%;
    width: 5.5%;
}

.modal div.city { position: relative; }
.modal div.city img.city {
    width: 100%;
}

div.city .tile {
    position: absolute;
}
div.city div.tile {
    width: 8.4%;
}
div.city div.tile img.hexTile {
    position: relative;
    width: 100%;
}
div.city div.tile img.cube,
.modal div.tile img.cube {
    position: absolute;
    width: 17%;
    top: 25%;
    left: 43%;
}

div.city img.tile.plaza {
    width: 8%;
    margin-top: .5%;
    margin-left: .2%;
}
div.city img.meeplePeterParler {
    position: absolute;
    width: 2.5%;
    margin-top: 1%;
    margin-left: 1%;
}
div.city img.pin.tile {
    width: 4%;
    margin-left: 3%;
    margin-top: 1%;
}
div.city div.dobuild {
    z-index: 600;
}
div.city img.dobuild.orientationHandler {
    margin-top: 2.5%;
    width: 2.5%;
    z-index: 700;
}
div.city img.dobuild.orientationHandler.left {
    margin-left: -.5%;
}
div.city img.dobuild.orientationHandler.fix {
    margin-left: 3.1%;
    margin-top: 3%;
}
div.city img.dobuild.orientationHandler.right {
    margin-left: 7%;
}
div.city div.tile img.bonusbonus {
    position: absolute;
    width: 31%;
    height: 42%;
    left: 4%;
    top: 29%;
}
div.city div.tile img.bonusstep {
    position: absolute;
    width: 30%;
    left: 35%;
    top: 5%;
}
div.city img.tile.pin.plazaBonus {
    width: 8%;
    margin: .3%;
}
div.city .tile.row0 {
    top: 80.2%;
}
div.city .tile.row1 {
    top: 67.2%;
}
div.city .tile.row2 {
    top: 54.2%;
}
div.city .tile.row3 {
    top: 41.2%;
}
div.city .tile.row4 {
    top: 28.3%;
}
div.city .tile.row5 {
    top: 15.2%;
}
div.city .tile.row6 {
    top: 2.2%;
}
div.city .tile.adjCol20 {
    left: 2.5%;
}
div.city .tile.adjCol25 {
    left: 6.8%;
}
div.city .tile.adjCol30 {
    left: 11.3%;
}
div.city .tile.adjCol35 {
    left: 15.6%;
}
div.city .tile.adjCol40 {
    left: 20.1%;
}
div.city .tile.adjCol45 {
    left: 24.4%;
}
div.city .tile.adjCol50 {
    left: 28.8%;
}
div.city .tile.adjCol55 {
    left: 33.2%;
}
div.city .tile.adjCol60 {
    left: 37.6%;
}
div.city .tile.adjCol65 {
    left: 42%;
}
div.city .tile.adjCol70 {
    left: 46.4%;
}
div.city .tile.adjCol75 {
    left: 50.8%;
}
div.city .tile.adjCol80 {
    left: 55.2%;
}
div.city .tile.adjCol85 {
    left: 59.6%;
}
div.city .tile.adjCol90 {
    left: 64%;
}
div.city .tile.adjCol95 {
    left: 68.4%;
}
div.city .tile.adjCol100 {
    left: 72.8%;
}
div.city .tile.adjCol105 {
    left: 77.2%;
}
div.city .tile.adjCol110 {
    left: 81.6%;
}
div.city .tile.adjCol115 {
    left: 85.8%;
}
div.city .tile.adjCol120 {
    left: 90.3%;
}
div.tile.orientation1 { transform: rotate(60deg); -webkit-transform: rotate(60deg); }
div.tile.orientation2 { transform: rotate(120deg); -webkit-transform: rotate(120deg); }
div.tile.orientation3 { transform: rotate(180deg); -webkit-transform: rotate(180deg); }
div.tile.orientation4 { transform: rotate(240deg); -webkit-transform: rotate(240deg); }
div.tile.orientation5 { transform: rotate(300deg); -webkit-transform: rotate(300deg); }

div.city .meeple {
    position: absolute;
    width: 2.5%;
}
div.city .meeple.color0 {
    margin-left: 1%;
    margin-top: 2%;
    z-index: 100;
}
div.city .meeple.color2 {
    margin-top: -0.2%;
    margin-left: 2.8%;
}
div.city .meeple.color3 {
    margin-left: 3.5%;
    margin-top: 2%;
    z-index: 100;
}
div.city .meeple.kingsRoad0 {
    left: 100%;
    top: 39.5%;
}
div.city .meeple.kingsRoad1 {
    left: 87%;
    top: 39.5%;
}
div.city .meeple.kingsRoad2 {
    left: 56.5%;
    top: 27.7%;
}
div.city .meeple.kingsRoad3 {
    left: 25.5%;
    top: 12%;
}
div.city .meeple.pin.color1,
div.city .meeple.pin.color2 {
    margin-top: 2.5%;
}
div.city .meeple.pin.color0,
div.city .meeple.pin.color3 {
    margin-top: 4.5%;
}

div.river .meeple {
    position: absolute;
    width: 2.5%;
}
div.river .meeple.kingsRoad4 {
    left: 25%;
    top: 78%;
}
div.river .meeple.kingsRoad5 {
    left: 27%;
    top: 57%;
}
div.river div.bridgeTile .meeple.kingsRoad {
    width: 20%;
    margin: 0;
    left: 76%;
    top: -30%;
}
div.river .meeple.color0 {
    margin-left: 1%;
    margin-top: 2.5%;
    z-index: 100;
}
div.river .meeple.color2 {
    margin-left: 2.5%;
}
div.river .meeple.color3 {
    margin-left: 3.5%;
    margin-top: 2%;
    z-index: 100;
}

div.city .kingsRoad.pin {
    width: 10%;
    height: 8%;
}
div.city .kingsRoad.space1 {
    left: 77.5%;
    top: 45%;
}
div.city .kingsRoadB.space1 {
    width: 14%;
    left: 63.5%;
    top: 44%;
}
div.city .kingsRoad.space2 {
    left: 46%;
    top: 32%;
}
div.city .kingsRoadB.space2 {
    width: 12.5%;
    left: 34%;
    top: 31%;
}
div.city .kingsRoad.space3 {
    left: 19%;
    top: 6.5%;
}

div.city .kingsRoadB.space3 {
    width: 16%;
    height: 10%;
    left: 3%;
    top: 5%;
}

div.city .kingsRoadToken {
    position: absolute;
    width: 10.4%;
}
div.city .kingsRoadToken.space1 {
    left: 77%;
    top: 45%;
}
div.city .kingsRoadToken.space2 {
    left: 45.5%;
    top: 31%;
}
div.city .kingsRoadToken.space3 {
left: 18%;
    top: 6%;
}



.modal div.city img.city { width: 100%; }

div.river .bridgeStripe {
    position: absolute;
    transform: rotate(270deg); -webkit-transform: rotate(270deg);
    width: 27%;
    top: 30%;
}
div.river .bridgeStripe.reverse {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
div.river .bridgeStripe.space0 {
    left: 3%;
}
div.river .bridgeStripe.space1 {
    left: 8%;
}

div.river .bridgeTile {
    position: absolute;
    width: 10.5%;
    height: auto;
    left: 14%;
}
div.river div.bridgeTile img.bridgeTile {
    position: relative;
    width: 100%;
    left: 0;
    top: 0;
}
div.river img.bridgeTile.active {
    border: 3px solid green;
    box-sizing: border-box;
}
div.river img.bridgeTile.active.pin {
    border: none;
}
div .river div.bridgeTile img.pin {
    width: 90%;
    height: 100%;
    left: 10%;
    top: 0;
}
div.river .bridgeTile.bridge {
    height: 13%;
}
div.river .bridgeTile.bridge4 {
    top: 1%;
}
div.river .bridgeTile.bridge3 {
    top: 15%;
}
div.river .bridgeTile.bridge2 {
    top: 29%;
}
div.river .bridgeTile.bridge1 {
    top: 43%;
}
div.river .bridgeTile.bridge0 {
    top: 57%;
}

div.river .bridgeTile.bridge5 {
    top: 34%;
    left: 25%;
}
div.river .bridgeTile.bridge6 {
    top: 18%;
    left: 25%;
}


div.river .bridgeTileBackSilver {
    top: 84.2%;
}

div.river .bridgeTileBackGold {
    top: 71%;
}

div.river div.bridgeTileBackGold.bridgeTile0 {
    left: 20%;
    top: 58%;
}
div.river div.bridgeTile0 img.bridgeTileBackGold {
    visibility: hidden;
}

div.river .bridgeTileBackGold.open {
    border: 1px solid #e6be00;
}

div.river .bridgeTileBackGold.pos1 {
    left: 25%;
}

div.river .bridgeTileBackGold.pos2 {
    left: 36%;
}

div.river .bridgeTileBackGold.pos3 {
    left: 33%;
    top: 83%;
}

div.river .refresh {
    position: absolute;
    width: 6%;
    height: auto;
    left: 52%;
}
div.river .refresh.rowUpgrade {
    top: 9%;
}
div.river .refresh.rowWall {
    top: 36%;
}
div.river .refresh.rowBuilding {
    top: 70%;
}

div.hexTiles .hexes .hexTile.discard {
    height: 100%;
}

div.hexTiles .cube {
    position: absolute;
    width: 5%;
    margin-left: 9%;
    margin-top: 10%;
    z-index: 100;
}

div.seals .bridgeTile {
    position: absolute;
    width: 18.5%;
    left: 81%;
    top: 24%;
}

div.seals .bridgeTile.active {
    border: 5px solid green;
}

div.seals .meeple {
    position: absolute;
    width: 4%;
    z-index: 100;
    margin-left: 15%;
}

div.seals .bridgeTile.space1 {
    top: 96%;
    z-index: 100;
}

div.seals .bridgeTile.space2 {
    top: 96%;
    left: 61%;
    z-index: 100;
}

div.seals .bridgeTile.space3 {
    top: 96%;
    left: 41%;
    z-index: 100;
}

table#playerData {
    font-size: 12px;
}
table#playerData .basicDesc {
    padding: 0;
}
table#playerData .basicDesc > *  {
    margin: 0;
    padding-left: 2px;
}
table#playerData .basicDesc .playerInfoLogin {
    /*display: inline-block;*/
/*    width: 60px;*/
    text-overflow: ellipsis;
    overflow: hidden;
}
table#playerData .basicDesc .meeple {
    height: 1.3em; 
    width: auto;
}
table#playerData td > img {
    width: 18px;
}
table#playerData td > img.cube {
    width: 12px;
}
table#playerData td > img.resEgg,
table#playerData td > img.resGold,
table#playerData td > img.resSilverWindow,
table#playerData td > img.resGoldWindow {
    width: 15px;
}

table#playerData td span.warnExcess {
    color: red;
}
table#playerData td img.soloCard {
    height: 1em; 
}

/*colors: ['blue', 'red', 'green', 'purple']*/
#game #playerData .color0,
#panel #playerData .color0,
div.actionBoard.color0,
div.playerBoardArea.color0 {
    background-color: #0000ff1a;
}

#game #playerData .color1,
#panel #playerData .color1,
div.actionBoard.color1,
div.playerBoardArea.color1 {
    background-color: #ff00001f;
}

#game #playerData .color2,
#panel #playerData .color2,
div.actionBoard.color2,
div.playerBoardArea.color2 {
    background-color: #00800026;
}

#game #playerData .color3,
#panel #playerData .color3,
div.actionBoard.color3,
div.playerBoardArea.color3 {
    background-color: #a900ff47;
}


div.playerBoard.gold0 img.wheel.gold {
    transform: rotate(342deg);
    -webkit-transform: rotate(342deg);
}
div.playerBoard.gold1 img.wheel.gold {
    transform: rotate(20deg);
    -webkit-transform: rotate(20deg);
}
div.playerBoard.gold2 img.wheel.gold {
    transform: rotate(55deg);
    -webkit-transform: rotate(55deg);
}
div.playerBoard.gold3 img.wheel.gold {
    transform: rotate(91deg);
    -webkit-transform: rotate(91deg);
}
div.playerBoard.gold4 img.wheel.gold {
    transform: rotate(127deg);
    -webkit-transform: rotate(127deg);
}
div.playerBoard.gold5 img.wheel.gold {
    transform: rotate(162deg);
    -webkit-transform: rotate(162deg);
}
div.playerBoard.gold6 img.wheel.gold {
    transform: rotate(198deg);
    -webkit-transform: rotate(198deg);
}
div.playerBoard.gold7 img.wheel.gold {
    transform: rotate(239deg);
    -webkit-transform: rotate(239deg);
}
div.playerBoard.gold8 img.wheel.gold {
    transform: rotate(269deg);
    -webkit-transform: rotate(269deg);
}
div.playerBoard.gold9 img.wheel.gold {
    transform: rotate(306deg);
    -webkit-transform: rotate(306deg);
}

div.playerBoard.stone0 img.wheel.stone {
    transform: rotate(18deg);
    -webkit-transform: rotate(18deg);
}
div.playerBoard.stone1 img.wheel.stone {
    transform: rotate(341deg);
    -webkit-transform: rotate(341deg);
}
div.playerBoard.stone2 img.wheel.stone {
    transform: rotate(305deg);
    -webkit-transform: rotate(305deg);
}
div.playerBoard.stone3 img.wheel.stone {
    transform: rotate(268deg);
    -webkit-transform: rotate(268deg);
}
div.playerBoard.stone4 img.wheel.stone {
    transform: rotate(233deg);
    -webkit-transform: rotate(233deg);
}
div.playerBoard.stone5 img.wheel.stone {
    transform: rotate(197deg);
    -webkit-transform: rotate(197deg);
}
div.playerBoard.stone6 img.wheel.stone {
    transform: rotate(162deg);
    -webkit-transform: rotate(162deg);
}
div.playerBoard.stone7 img.wheel.stone {
    transform: rotate(125deg);
    -webkit-transform: rotate(125deg);
}
div.playerBoard.stone8 img.wheel.stone {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
div.playerBoard.stone9 img.wheel.stone {
    transform: rotate(54deg);
    -webkit-transform: rotate(54deg);
}

div.playerBoard img.cube {
    position: absolute;
    width: 4%;
}
div.playerBoard img.cube.mines {
    top: 82.2%;
}
div.playerBoard img.cube.quarry {
    top: 65.2%;
}
div.playerBoard img.cube.quarryMinesSpace3 {
    left: 37.4%;
}
div.playerBoard img.cube.quarryMinesSpace4 {
    left: 44.2%;
}
div.playerBoard img.cube.quarryMinesSpace5 {
    left: 50.7%;
}
div.playerBoard img.cube.quarryMinesSpace6 {
    left: 57.2%;
}
div.playerBoard img.cube.quarryMinesSpace7 {
    left: 63.7%;
}
div.playerBoard img.cube.quarryMinesSpace8 {
    left: 70.7%;
}

div.playerBoard img.cube.technology {
    left: 78.7%;
}
div.playerBoard img.cube.university {
    left: 92.7%;
}
div.playerBoard img.cube.techUniSpace0 {
    top: 86%;
}
div.playerBoard img.cube.techUniSpace1 {
    top: 75.5%;
}
div.playerBoard img.cube.techUniSpace2 {
    top: 65.5%;
}
div.playerBoard img.cube.techUniSpace3 {
    top: 55%;
}
div.playerBoard img.cube.techUniSpace4 {
    top: 44.8%;
}
div.playerBoard img.cube.techUniSpace5 {
    top: 34.5%;
}
div.playerBoard img.cube.techUniSpace6 {
    top: 24%;
}
div.playerBoard img.cube.techUniSpace7 {
    top: 14%;
}
div.playerBoard img.cube.techUniSpace8 {
    top: 3.5%;
}

div.playerBoard img.cube.blockedGold6 {
    left: 20.5%;
    top: 7.5%;
}
div.playerBoard img.cube.blockedStone6 {
    left: 48.5%;
    top: 7.5%;
}
div.playerBoard img.cube.blockedGoldStone9 {
    left: 34.4%;
    top: 34%;
}
div.playerBoard img.cube.active {
    margin-top: 1%;
}
div.playerBoard img.produce {
    width: 7%;
    top: 13%;
}
div.playerBoard img.quarry.produce {
    left: 58.7%;
}
div.playerBoard img.mines.produce {
    left: 7.5%;
}

div.playerBoard img.productionTile {
    position: absolute;
    width: 7.8%;
}
div.playerBoard img.productionTile.typeQuarry {
    left: 14.1%;
    top: 64.1%;
}
div.playerBoard img.productionTile.typeMines {
    left: 7.6%;
    top: 80.6%;
}

.magnified div.playerBoard .hideCubes img.cube {
    position: absolute;
    left: 1%;
    top: 2%;
}
.magnified div.playerBoard.hiddenCubes img.cube {
    display: none;
}
.magnified div.playerBoard.hiddenCubes .hideCubes img.cube.showCubes {
    display: block;
}
#game div.playerBoard img.clickMe.magnify,
#panel div.playerBoard img.clickMe.magnify {
    position: absolute;
    width: 6%;
    left: .5%;
    top: 1%;
}

/*div.playerBoard.modal.magnified { position: absolute; }*/


#game div.actionBoardArea img.clickMe.magnify,
#panel div.actionBoardArea img.clickMe.magnify {
    position: absolute;
    width: 12%;
    left: 86%;
    top: 3%;
}

div.actionBoard {
    position: relative;
    width: 100%;
    height: auto;
}

div.actionBoard img.aspectRatio {
    position: relative;
    width: 100%;
    height: auto;
}

div.actionBoard img.actionBoard {
    position: absolute;
    width: 60%;
    height: auto;
    left: 20%;
    top: 17%;
    max-width: 100%;
}

div.actionBoard .dobuild {
    z-index: 600;
}

div.actionBoard .tile {
    position: absolute;
    width: 20%;
    height: auto;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
    line-height: 0;
}

div.actionBoard .tile .resource {
    position: absolute;
    left: 20%;
    top: 50%;
}

div.actionBoard div.tile img.hexTile {
    position: relative;
    width: 100%;
    height: auto;
}

div.actionBoard .tile .pin.step {
    width: 28%;
    height: 15%;
    left: 36%;
    top: 8%;
}
div.actionBoard .tile .pin.bonus,
div.actionBoard .tile .pin.trade {
    width: 48%;
    height: 37%;
    left: 26%;
    top: 32%;
}
div.actionBoard .tile .pin.edge {
    width: 23%;
}
div.actionBoard .tile .pin.edgeTopLeft {
    left: 20%;
    top: 11%;
    transform: rotate(60deg); -webkit-transform: rotate(60deg);
}
div.actionBoard .tile .pin.edgeTopRight {
    left: 58%;
    top: 10%;
    transform: rotate(30deg); -webkit-transform: rotate(30deg);
}
div.actionBoard .tile .pin.edgeRight {
    left: 77%;
    top: 40%;
}
div.actionBoard .tile .pin.edgeBottomRight {
    left: 58%;
    top: 68%;
    transform: rotate(60deg); -webkit-transform: rotate(60deg);
}
div.actionBoard .tile .pin.edgeBottomLeft {
    left: 20%;
    top: 69%;
    transform: rotate(30deg); -webkit-transform: rotate(30deg);
}
div.actionBoard .tile .pin.edgeLeft {
    left: 0;
    top: 39%;
}

#game img.openOthersBoards,
#panel img.openOthersBoards {
    position: absolute;
    width: 10%;
    left: 90%;
    top: 90%;
    display:none;
}

#game img.closeOthersBoards,
#panel img.closeOthersBoards {
    position: absolute;
    width: 10%;
    left: 90%;
    top: 90%;
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    display: none;
}

#game .switch.clickMe,
#panel .switch.clickMe {
    position: absolute;
    width: 10%;
    left: 90%;
    top: 90%;
}
#game .othersBoards .switch.clickMe,
#panel .othersBoards .switch.clickMe {
    display: none;
}

.playerNr1 #game img.openOthersBoards,
.playerNr1 #game img.closeOthersBoards,
.playerNr1 #panel img.openOthersBoards,
.playerNr1 #panel img.closeOthersBoards {
    display: none;
}

#game.otherBoardsVisible img.openOthersBoards,
#game.otherBoardsVisible #infoPanel,
#panel.otherBoardsVisible img.openOthersBoards,
#panel.otherBoardsVisible #infoPanel {
    display: none;
}

#game.otherBoardsHidden img.closeOthersBoards,
#game.otherBoardsHidden .othersBoards,
#panel.otherBoardsHidden img.closeOthersBoards,
#panel.otherBoardsHidden .othersBoards {
    display: none;
}

#game .actionBoard .clickMe.info,
#panel .actionBoard .clickMe.info {
    position: absolute;
    width: 17%;
    left: -2%;
    top: 85%;
}

#game .finalscoringIcon,
#panel .finalscoringIcon {
    position: absolute;
    width: 6%;
    left: 77%;
    top: 9%;
}

.finalScoreDetail .plazas {
    margin-bottom: .5em;
}
.modal-body .finalScoreDetail .plazas .plaza { height: 40px; }

#game .clickMe.help,
#panel .clickMe.help {
    position: absolute;
}

    #game .clickMe.help.gamePlay,
    #panel .clickMe.help.gamePlay {
        left: 82%;
        top: -5%;
        width: 8%;
    }
    #game .clickMe.help.chooseActionTile,
    #panel .clickMe.help.chooseActionTile {
        width: 15%;
        left: 42%;
        top: 38.5%;
    }
    #game .clickMe.help.actionKingsRoad,
    #panel .clickMe.help.actionKingsRoad {
        width: 6%;
        left: 94%;
        top: 42%;
    }
    #game .clickMe.help.actionBuilding,
    #panel .clickMe.help.actionBuilding {
        width: 6%;
        left: 94%;
        top: 15%;
    }
    #game .clickMe.help.actionMines,
    #panel .clickMe.help.actionMines {
        width: 9%;
        left: 18%;
        top: 28%;
    }
    #game .clickMe.help.actionQuarries,
    #panel .clickMe.help.actionQuarries {
        width: 9%;
        left: 45.5%;
        top: 28%;
    }
    #game .clickMe.help.helpTechnology,
    #panel .clickMe.help.helpTechnology {
        width: 9%;
        left: 69%;
        top: -1%;
    }
    #game .clickMe.help.helpUniversity,
    #panel .clickMe.help.helpUniversity {
        width: 9%;
        left: 85%;
        top: -1%;
    }
    #game .clickMe.help.seals,
    #panel .clickMe.help.seals {
        width: 10%;
        left: 29%;
        top: 59%;
        z-index: 100;
    }
    #game .clickMe.help.goldenBridgeTiles,
    #panel .clickMe.help.goldenBridgeTiles {
        width: 6%;
        left: 0%;
        top: 63%;
    }
    #game .clickMe.help.silverBridgeTiles,
    #panel .clickMe.help.silverBridgeTiles {
        width: 6%;
        left: 0%;
        top: 89%;
        z-index: 100;
    }
#game .seals .clickMe.help.goldenBridgeTiles {
    width: 9%;
    left: 90%;
    top: -26%;
    z-index: 100;
}

.modal-footer { justify-content: center; }