/* specialised styles needed for the game */
.board_switch {
    position:absolute;
    left:0%;
    top:1.2%;
    height:3.5%;
    width:14%;
    border:1px solid black;
    border-radius:5px;
    background-color:white;
}

/* color chooser */
#gameInfo .colorDiv.meeple { width: 2em; margin-right: .2em; }
.colorDiv.meeple .symbol { left: 50%; top: 50%; width: 22%; height: 22%;  }

#gameInfo .version { display: none; }

/* dialog chooser */
.ui-popup img.active { width: auto; height: auto; display: inline; margin: 1em; }
.dialog { display: inline-block; position:relative;}
.dialog .choice { display: inline-block; vertical-align: middle; align-content: center; margin:0.2%; }
.dialog .selected { position:absolute; right:0; top:0; width:25%; }
.dialog .target { position:relative; max-width:8em; max-height: 16em; }
.dialog .character { position:relative; max-width: 18%; margin:0.2%; }
.dialog .die { max-width: 2em;}
.dialog .contract { max-width: 3em;}
.dialog .resource { max-width: 2em;}
.dialog .bonus { max-width: 8em; max-height: 4em; }
.dialog .card { max-width: 40%; padding: 3%; vertical-align:middle; float: left; }
.dialog .okButton { vertical-align:middle; }
.dialog .okButton.inactive { visibility:hidden; }
.dialog .gifts { position: relative; width: 5em;}
.dialog .giftsmall { width: 3em;}
.dialog .giftblackdie { position: relative; max-width: 2em;}
.dialog .giftcoins3 { position: relative; max-width: 2em;}
.dialog .citycardarghundialog {position: relative; max-width: 20%}
.dialog .emptyblock {position: relative; width: 100%; height: 10%;}
.arghuntext {overflow: visible;}
   

/* Game log styles */
#gameLog .contract { width: 5em; height: 5em;}
#gameLog .gift {width: 4em; height: 3.4em;}


/* Popup styles */
.help_popup {
    width:30%;
}
/* board styles */
#btntabs, #btngrid, #tabDisplay, #userSettings .preferenceTabView  { display: none; }
#gameContainer { background-color: #d2b06d; }

#mainView { width: 100%; clear: both; }

#info { width: 100%; display: inline-block; }
#board { background-color: #fadea8; width: 100%; float: left; position: relative; }
#board .title { position:absolute; left:2%; top:11%; width:18%; }
.version { position: absolute; left: 9%; top: 19%; font-size: x-small; }
.logo { position:absolute; left:74%; top:7%; width:6%; }
.round { position: absolute; top: 6%; left: 6.5%; }
.board .active, .dialog .active, .tableau .active { border: 3px solid #03c2fc; border-radius: 4px; outline: none; border-color: #03c2fc; box-shadow: inset 0 0 10px #03c2fc; }
.inactive { opacity: 0.3; filter: alpha(opacity=30); }
/* .board .active, .tableau .active, .dialog .active { border: 3px solid #9ecaed; border-radius: 4px; outline: none; border-color: #9ecaed; box-shadow: inset 0 0 10px #9ecaed; } */
/* .tableau .active{ border: 4px solid #03c2fc; border-radius: 4px; outline: none; border-color: #03c2fc; box-shadow: inset 0 0 10px #03c2fc } */
.map { display: none; }
.actions { display: block; }
.map div { position: absolute; }
.map .large .objective { position: absolute; top: -10%; left: 0%; width: 16%; height: 22%; z-index: 10; }
.map .large .travel { position: absolute; top: 38%; left: 37%; width: 26%; height: 36%; z-index: 10; }
.map .small .objective { position: absolute; top: 96%; left: -10%; width: 22%; height: 22%; z-index: 10; }
.map .small .travel { position: absolute; top: 60%; left: 32%; width: 36%; height: 30%; z-index: 10; }
.map .oase .travel { position: absolute; width: 80%; height: 60%; z-index: 10; }
.map .travel .meeple { position: absolute; width: 80%; }
.cityAction { position: absolute; top: 38%; left: 7%; width: 17%; height: 27%; z-index: 10; }
.large { width: 12.5%; height: 12.5%; }
.large .bonus { width: 70%; margin-left: 15%; margin-top: 20%; }
.large .card { position: absolute; }
.large .space0 { position: absolute; top: 24%; left: 6%; width: 23%; }
.large .space1 { position: absolute; top: 5%; left: 30%; width: 23%; }
.large .space2 { position: absolute; top: 5%; left: 56%; width: 23%; }
.large .space3 { position: absolute; top: 24%; left: 76%; width: 23%; }
.map .city0 { top: 5%; left: 20.5%;}
.map .city1 { top: 4.9%; left: 56.4%;}
.map .city2 { top: 25%; left: 34.7%;}
.map .city3 { top: 36%; left: 68.3%;}
.map .city4 { top: 46.5%; left: 2.5%;}
.map .city5 { top: 52.3%; left: 46.8%;}
.map .city6 { top: 62.4%; left: 80.4%;}
.map .city7 { top: 83.5%; left: 74%;}
.map .city8 { top: 83.5%; left: 86.5%;}
.map .city9 { top: 10%; left: 3.8%; } 
.map .city10 {top: 7%; left: 85%; }
.bejing { width: 12.5%; height: 12.5%; }
.bejing .space0 { position: absolute; top: 50%; left: 42%; width: 23%; }
.bejing .space1 { position: absolute; top: 75%; left: 75%; width: 23%; }
.bejing .space2 { position: absolute; top: 84%; left: 42%; width: 23%; }
.bejing .space3 { position: absolute; top: 75%; left: 10%; width: 23%; }
.oase { width: 4%; height: 8%; }
.map .city11 {top: 4.8%; left: 13.3%; }
.map .city12 {top: 12.6%; left: 70.8%; }
.map .city13 {top: 4.7%; left: 81.2%; }
.map .city14 {top: 21.2%; left: 12.7%; }
.map .city15 {top: 34.6%; left: 51.4%; }
.map .city16 {top: 22.6%; left: 75%; }
.map .city17 {top: 39.9%; left: 19%; }
.map .city18 {top: 64.7%; left: 68.9%; }
.map .city19 {top: 71.8%; left: 15.4%; }
.map .city20 {top: 39.4%; left: 94.7%; }
.small { width: 9%; height: 14%; }
.small .space0 { position: absolute; top: 44%; left: 2%; width: 33%; }
.small .space1 { position: absolute; top: 44%; left: 64%; width: 33%; }
.small .space2 { position: absolute; top: 75%; left: 7%; width: 33%; }
.small .space3 { position: absolute; top: 75%; left: 60%; width: 33%; }
.map .city21 { top: 4%; left: 41.5%;}
.map .city22 { top: 42%; left: 24.5%;}
.map .city23 { top: 30.5%; left: 56.5%;}
.map .city24 { top: 30%; left: 84.1%;}
.map .city25 { top: 69.7%; left: 27.2%;}
.map .city26 { top: 79%; left: 56.2%;}
.map .skip { width: 5%; top: 90%; left: 5%; }
.map .steps { width: 10%; top: 86%; left: 5%; color: white; text-shadow: 2px 2px #666666;}
.map .path { width: 2%; height: 4%; }
.map .path .pin { width: 100%; height: 100%; }
.map .path .active { border: none; box-shadow: none; }
.map .travel .pin { width: 60%; height: 80%; border: none; box-shadow: none; z-index: 20; }
.map .travel0 { top: 11%; left: 36.9%;}
.map .travel1 { top: 6.5%; left: 17.4%; }
.map .travel2 { top: 6.7%; left: 9.2%; }
.map .travel3 { top: 27.8%; left: 1.9%; }
.map .travel4 { top: 18%; left: 10.5%; }
.map .travel5 { top: 39.6%; left: 13.5%; }
.map .travel6 { top: 30.5%; left: 17%; }
.map .travel7 { top: 49%; left: 20%; }
.map .travel8 { top: 27%; left: 24%; }
.map .travel9 { top: 63%; left: 16%; }
.map .travel10 { top: 80%; left: 19%; }
.map .travel11 { top: 82.5%; left: 44%; }
.map .travel12 { top: 76%; left: 74%; }
.map .travel13 { top: 15.5%; left: 51.6%; }
.map .travel14 { top: 15.6%; left: 69%; }
.map .travel15 { top: 9%; left: 77.5%; }
.map .travel16 { top: 3.5%; left: 88%; }
.map .travel17 { top: 19%; left: 72.4%; }
.map .travel18 { top: 29%; left: 75.4%; }
.map .travel19 { top: 20.5%; left: 80.6%; }
.map .travel20 { top: 31.6%; left: 48.6%; }
.map .travel21 { top: 39%; left: 53%; }
.map .travel22 { top: 48%; left: 61%; }
.map .travel23 { top: 57%; left: 39%; }
.map .travel24 { top: 58.6%; left: 64%; }
.map .travel25 { top: 56.8%; left: 81.8%; }
.map .travel26 { top: 27%; left: 88.5%; }
.map .travel27 { top: 70%; left: 65%; }
.map .travel28 { top: 32%; left: 95.5%; }
.map .travel29 { top: 51%; left: 92%; }

.actions div { position: absolute; }
.actions .city0 { top: 4%; left: 21%;}
.actions .city1 { top: 4%; left: 57%;}
.actions .city2 { top: 4%; left: 39%;}
.actions .city3 { top: 8%; left: 85%;}
.actions .city4 { top: 24%; left: 30%;}
.actions .city5 { top: 27%; left: 48%;}
.actions .city6 { top: 22%; left: 70.4%;}
.actions .city7 { top: 43.1%; left: 64%;}
.actions .city8 { top: 43.1%; left: 76.5%;}
.actions .action { width: 2%; height: 3%; }
.actions .blackDices { top: 47.6%; left: 24.5%; width: 20.5%; }
.actions .contract { width: 8.4%; }
.actions .contract0 { top: 85.6%; left: 37.5%; }
.actions .contract1 { top: 85.6%; left: 48%; }
.actions .contract2 { top: 85.6%; left: 58.5%; }
.actions .contract3 { top: 85.6%; left: 69%; }
.actions .contract4 { top: 85.6%; left: 79.5%; }
.actions .contract5 { top: 85.6%; left: 90%; }
.actions .dieActions { top: 24%; left: 8%; width: 3%;}
.dieActions .down { left: -150%; width: 150%; top: 20%; }
.dieActions .up  { left: 100%; width: 150%; top: 20%; }
.dieActions .reroll { left: -20%; float: left; width: 140%; }
.actions .coins3 { top: 41.4%; left: 9.4%; }
.actions .coins5 { top: 81%; left: 2.8%; }
.actions .khan0 { top: 92%; left: 2.8%; }
.actions .khan1 { top: 91.4%; left: 6.7%; }
.actions .khan2 { top: 90.4%; left: 10.6%; }
.actions .khan3 { top: 89.8%; left: 14.6%; }
.actions .contracts { top: 88.5%; left: 33%; }
.actions .travel { top: 63.8%; left: 65%; height: 6.5%; z-index: 11; }
.actions .travel0 { top: 64%; left: 65%; }
.actions .travel1 { top: 67.7%; left: 65.4%; }
.actions .market_gold { top: 58%; left: 9%; width: 7%; z-index: 11;}
.actions .market_gold0 { top: 58%; left: 9%; }
.actions .market_gold1 { top: 58%; left: 11.5%; }
.actions .market_gold2 { top: 58%; left: 14%; }
.actions .market_silk { top: 64%; left: 11.5%; width: 4.5%; z-index: 11; }
.actions .market_silk0 { top: 64%; left: 11.5%; }
.actions .market_silk1 { top: 64%; left: 14%; }
.actions .market_pepper { top: 69.5%; left: 14%; }
.actions .market_camel { top: 76%; left: 14%; }
.actions .markets { width: 6.2%; height: 4.9%; }
.actions .market00 { top: 57.2%; left: 17%; }
.actions .market01 { top: 57%; left: 23.2%; }
.actions .market02 { top: 57.2%; left: 29.4%; }
.actions .market03 { top: 57.1%; left: 35.6%; }
.actions .market04 { top: 56.9%; left: 41.8%; }
.actions .market05 { top: 56.9%; left: 48%; }
.actions .market10 { top: 62.7%; left: 17%; }
.actions .market11 { top: 62.5%; left: 23.2%; }
.actions .market12 { top: 62.7%; left: 29.4%; }
.actions .market13 { top: 62.6%; left: 35.6%; }
.actions .market14 { top: 62.4%; left: 41.8%; }
.actions .market15 { top: 62.4%; left: 48%; }
.actions .market20 { top: 68.7%; left: 17%; }
.actions .market21 { top: 68.5%; left: 23.2%; }
.actions .market22 { top: 68.7%; left: 29.4%; }
.actions .market23 { top: 68.6%; left: 35.6%; }
.actions .market24 { top: 68.4%; left: 41.8%; }
.actions .market25 { top: 68.4%; left: 48%; }
.actions .market30 { top: 74.8%; left: 17%; }
.actions .market31 { top: 74.6%; left: 23.2%; }
.actions .market32 { top: 74.8%; left: 29.4%; }
.actions .market33 { top: 74.5%; left: 35.6%; }
.actions .market34 { top: 74.6%; left: 41.8%; }
.actions .market35 { top: 74.6%; left: 48%; }
.actions .die { width: 100%; }
.actions .blackDices .die { position: relative; width: 11%; float: left; padding: 1.5%; }
.actions .skip { width: 5%; top: 93.4%; left: 26.3%; }
.giftpile { position: absolute; top: 32%; left: 90%; width: 7%;}
.giftsdiscarded { position: absolute; top: 42%; left: 90%; width: 7%;}
.giftspileimg { position: absolute; width: 100%;}
.giftlayer { position: absolute; left: 33%; width: 34%; top: 3%; height:25%; }
.giftcounter { position: absolute; left: 0; bottom: 64%; width: 100%;}
.gifttext { overflow: visible;}
.giftInfoIcon { position: absolute; z-index: 600; top: 0%; left: 0%; width: 30%; height: 30%}
.giftInfoImage { position: relative; width: 6.0em; margin-bottom: 1%; text-align: left; }
.giftInfoText { display: block; width: 100%; position: relative; font-size: calc(max(1.5vw, 12px)); text-align: left; }
.giftInfo { position: relative; }
.giftItem { position: relative; width: 6.0em; display: inline-block; }

/* player info styles */
#playerInfo { width:100%; float: left; box-sizing: border-box; }
#playerInfo hr { display: none; }
#playerInfo .playerInfo { border: 2px solid grey; float: left; width: 100%; }
.playerInfo .basicInfo { text-align: left; width: 100%; }
.playerInfo .basicInfo .colored { min-width: 100%; height: 50%; }
.playerInfo .basicInfo .plain { min-width: 100%; height: 50%; }
.basicInfo { position: relative; z-index: 200; text-shadow: none; }
.basicInfo div { display: inline-block; }
.basicInfo img { display: inline; margin-left: .2em; height: 1em; width: auto; }
.basicInfo .online { display: inline; height: auto; width: auto; }
.basicInfo .plain img, .basicInfo .plain span { vertical-align: middle; }
.basicInfo span { padding: 0 .1em; }
.basicInfo .symbol { vertical-align: text-top; }
.basicInfo .pointPlus { color: gray; font-size: .7em; line-height: 1.8em; }
.playerInfo .tableau { position: relative; height: 23%; width: 100%; display: inline-block; }
.tableau div { display: inline-block; float: left; padding: 1%; }
.tableau img { display: inline; }
.tableau .contracts { position: relative; width: 64%; }
.tableau .contract0 { position: absolute; width: 45%; top: 12%; left: 3%; }
.tableau .contract1 { position: absolute; width: 45%; top: 14%; left: 50%; }
.tableau .characters { position: relative; width: 30%; padding: 0; margin:0.25em; box-shadow: 5px 5px 5px #623110; border-radius: 0.75em; }
.tableau .character {position: relative}
.tableau .targets { width: 100%; padding: 0%; }
.tableau .target { width: 48%; }
.tableau .dices { width: 64%; }
.tableau .die { width: 13%; float: left; }
.tableau .giftskept { position: relative; width: 100%; }
.tableau .giftkept {position: relative; width: 25%;}
.tableau .citycardsarghun { width: 100%;}
.tableau .citycardarghun { width: 40%; margin: 2%; border: 3px solid brown; border-radius: 4px;}
.playerInfo .reroll { height: 100%; }
.tableau .travgunj {z-index: 300; position: absolute; top: 72%; left: 10%; width: 17%; height: 12%}
.tableau .resourcesgunj {z-index: 400; position: absolute; top: 50%; left: 10%; width: 17%; height: 12%}
.tableau .dgiftnicolao { width:100%; }
.tableau .dgiftnicolaoimg {width: 30%;}
/*.cnt1 { float: left; width: 50%;}*/
.cnt2 .target , .cnt3 .target , .cnt4 .target { display: none; }

.color3 .colored, #gameLog .player.color3 .name { background-color: #f2ce38; }
.color2 .colored, #gameLog .player.color2 .name { background-color: #3348e5; color: white; }
.color1 .colored, #gameLog .player.color1 .name { background-color: #65b10c; color: white; }
.color0 .colored, #gameLog .player.color0 .name { background-color: #de0e39; color: white;  }
#game .playerInfo.color3 { border-color: #f2ce38;  }
#game .playerInfo.color2 { border-color: #3348e5; }
#game .playerInfo.color1 { border-color: #65b10c; }
#game .playerInfo.color0 { border-color: #de0e39; }
.playerInfo.color3, #game.tabView .tabDisplay .activateTab.activatedTab.color3 { border-color: #f2ce38; background-color: #fcf3cd; } 
.playerInfo.color2, #game.tabView .tabDisplay .activateTab.activatedTab.color2 { border-color: #3348e5; background-color: #ccd1f9; }
.playerInfo.color1, #game.tabView .tabDisplay .activateTab.activatedTab.color1 { border-color: #65b10c; background-color: #d9ebc2; }
.playerInfo.color0, #game.tabView .tabDisplay .activateTab.activatedTab.color0 { border-color: #de0e39; background-color: #fbe1e6; }

/* responsive layout */
@media screen and ( max-width: 63.6em ) {
    #board { width:100%; }
    #game .playerInfo { width: 25%; }
}
@media screen and ( min-width: 63.6em ) {
    #board { width:78%; }
    #playerInfo { width: 22%; }
}