ul#outOfGame li a, ul#outOfGame li div.a { width: 30px; height: 30px; box-sizing: border-box; display: block; background-color: #c8bbaa; border: solid 1px #5c4134; border-bottom-width: 1px; border-bottom-width: 2px; border-radius: 4px; transition-duration: 150ms; box-shadow: 1px 0 1px rgba(0,0,0,0.35) inset,-1px 0 1px rgba(0,0,0,0.35) inset,0 -2px 1px rgba(0,0,0,0.4) inset,0 2px 1px rgba(255,255,255,0.7) inset; position: relative; } #mtop * { box-sizing: border-box; } ul#outOfGame { -ms-grid-column-align: end; justify-self: end; box-sizing: border-box; width: 160px; margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between; -ms-grid-column: 3; grid-column-start: 3; } ul#outOfGame li a:hover:not(:active) { background-color: #fff3df; } ul#outOfGame li a, ul#outOfGame li div.a { width: 30px; height: 30px; box-sizing: border-box; display: block; background-color: #c8bbaa; border: solid 1px #5c4134; border-bottom-width: 1px; border-bottom-width: 2px; border-radius: 4px; transition-duration: 150ms; box-shadow: 1px 0 1px rgba(0,0,0,0.35) inset,-1px 0 1px rgba(0,0,0,0.35) inset,0 -2px 1px rgba(0,0,0,0.4) inset,0 2px 1px rgba(255,255,255,0.7) inset; position: relative; } #mtop { position: relative; z-index: 32; /*Omid min-width: 1080px; max-width: 1080px; */ min-width: 1280px; max-width: 1440px; width: 80vw; height: 119px; margin: 0 auto; padding: 0 5px; display: -ms-grid; display: grid; -ms-grid-columns: 1fr 932px 1fr; grid-template-columns: 1fr 932px 1fr; } ul#outOfGame li svg .outline { fill: #2e2117; stroke: #2e2117; stroke-width: 1.5; } ul#outOfGame li svg .icon { fill: #73655a; } ul#outOfGame li svg { width: 16px; height: 16px; z-index: 3; margin-top: -1px; position: absolute; top: 50%; right: 50%; overflow: visible; transform: translateX(50%) translateY(-50%) scaleX(-1); } #mtop #header::before { content: ""; z-index: -1; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-style: solid; border-width: 0 149px 119px 142px; border-image: url('../../img/hud/topBar/header/headerBackground.png') 0 149 119 142 fill stretch; } #header #navigation { position: absolute; right: 100px; top: 0px; z-index: 1; width: 462px; display: -ms-inline-grid; display: inline-grid; -ms-grid-columns: 66px 71px 73px 63px 63px 63px 63px; grid-template-columns: 66px 71px 73px 63px 63px 63px 63px; -ms-grid-rows: 66px; grid-template-rows: 62px; } .perspectiveResources #header #navigation > a.village.resourceView::after, .perspectiveResources #header #navigation > label.village.resourceView::after { background-position: 0 -62px; } #header #navigation>a,#header #navigation>label{position:relative;border:1px solid #553420;border-radius:50%;background-image:linear-gradient(to bottom,#cbb198,#7b6050);box-shadow:inset 0 1px 0 0 #ddcbb7,inset 0 -1px 0 0 #664f3d,inset 1px 0 0 0 #bba693,inset -1px 0 0 0 #7d6651,0 3px 3px 0 rgba(0,0,0,0.3);display:inline-block;transition-duration:150ms;-webkit-tap-highlight-color:transparent;-ms-grid-column-align:end;justify-self:end;-ms-grid-row-align:end;align-self:end} #header #navigation>a:before,#header #navigation>a:after,#header #navigation>label:before,#header #navigation>label:after{content:""} #header #navigation>a:before,#header #navigation>label:before{position:absolute;top:5px;left:5px;bottom:5px;right:5px;border:1px solid #553420;border-radius:50%;box-shadow:0 -1px 0 0 #89735d,0 1px 0 0 #aa9789,-1px 0 0 0 #8e7360,1px 0 0 0 #8e7360,inset 0 0 3px 0 rgba(0,0,0,0.5);background-color:#5e4538;transition-duration:150ms} #header #navigation>a:after,#header #navigation>label:after{width:62px;height:62px;position:absolute;background-image:url('../../img/hud/topBar/header/navigation/navigation.png');transition:top 150ms} #header #navigation>a:hover,#header #navigation>a:focus,#header #navigation>label:hover,#header #navigation>label:focus{background-image:linear-gradient(to bottom,#dbc1a8,#b49581)} #header #navigation>a:hover:before,#header #navigation>a:focus:before,#header #navigation>label:hover:before,#header #navigation>label:focus:before{filter:saturate(0.8) brightness(1.2);background-color:#7a6153;box-shadow:0 -1px 0 0 #9b856f,0 1px 0 0 #bca99b,-1px 0 0 0 #a08572,1px 0 0 0 #a08572,inset 0 0 3px 0 rgba(0,0,0,0.5)} #header #navigation>a:hover:after,#header #navigation>a:focus:after,#header #navigation>label:hover:after,#header #navigation>label:focus:after{filter:none} #header #navigation>a:active:before,#header #navigation>label:active:before{background-color:#4a3223;box-shadow:0 -1px 0 0 #9b856f,0 1px 0 0 #bca99b,-1px 0 0 0 #a08572,1px 0 0 0 #a08572,inset 0 0 6px 0 rgba(0,0,0,0.9)} #header #navigation>a.village,#header #navigation>label.village{width:66px;height:66px} #header #navigation>a.village:after,#header #navigation>label.village:after{top:1px;right:1px} #header #navigation>a.village:hover:after,#header #navigation>a.village:focus:after,#header #navigation>label.village:hover:after,#header #navigation>label.village:focus:after{top:-2px} #header #navigation>a.map,#header #navigation>a.statistics,#header #navigation>a.reports,#header #navigation>a.messages,#header #navigation>a.dailyQuests,#header #navigation>a.mobileMenuButton,#header #navigation>a.mobileShopButton,#header #navigation>label.map,#header #navigation>label.statistics,#header #navigation>label.reports,#header #navigation>label.messages,#header #navigation>label.dailyQuests,#header #navigation>label.mobileMenuButton,#header #navigation>label.mobileShopButton{width:58px;height:58px} #header #navigation>a .indicator,#header #navigation>label .indicator{position:absolute;z-index:6;background-image:url('../../img/hud/topBar/header/navigation/indicator.png');width:27px;height:23px;font-family:Arial,Helvetica,Verdana,sans-serif;color:#fff9eb;text-align:center;padding-top:3px;font-size:10px;text-shadow:1px 0 0 #000,1px 1px 0 #000,0 1px 0 #000,-1px 1px 0 #000,-1px 0 0 #000,-1px -1px 0 #000,0 -1px 0 #000,1px -1px 0 #000} .fa-IR #header #navigation>a .indicator,.fa-IR #header #navigation>label .indicator{font-family:IRANSans,Arial,Helvetica,Verdana,sans-serif} .colorBlind #header #navigation>a .indicator,.colorBlind #header #navigation>label .indicator{background-image:url('../../img/hud/topBar/header/navigation/indicatorColorblind.png')} #header #navigation>a.village.resourceView,#header #navigation>label.village.resourceView{-ms-grid-column:1;grid-column-start:1} #header #navigation>a.village.resourceView:after,#header #navigation>label.village.resourceView:after{background-position:0 0} #header #navigation>a.village.resourceView.active:after,#header #navigation>a.village.resourceView:hover:after,#header #navigation>a.village.resourceView:focus:after,#header #navigation>label.village.resourceView:hover:after,#header #navigation>label.village.resourceView:focus:after{background-position:0 -62px} .perspectiveResources #header #navigation>a.village.resourceView:after,.perspectiveResources #header #navigation>label.village.resourceView:after{background-position:0 -62px} #header #navigation>a.village.buildingView,#header #navigation>label.village.buildingView{-ms-grid-column:2;grid-column-start:2} #header #navigation>a.village.buildingView:after,#header #navigation>label.village.buildingView:after{background-position:0 -124px} #header #navigation>a.village.buildingView.active:after,#header #navigation>a.village.buildingView:hover:after,#header #navigation>a.village.buildingView:focus:after,#header #navigation>label.village.buildingView:hover:after,#header #navigation>label.village.buildingView:focus:after{background-position:0 -186px} .perspectiveBuildings #header #navigation>a.village.buildingView:after,.perspectiveBuildings #header #navigation>label.village.buildingView:after{background-position:0 -186px} #header #navigation>a.map,#header #navigation>label.map{-ms-grid-column:3;grid-column-start:3} #header #navigation>a.map:after,#header #navigation>label.map:after{background-position:0 -248px} #header #navigation>a.map:hover:after,#header #navigation>a.map:focus:after,#header #navigation>label.map:hover:after,#header #navigation>label.map:focus:after{background-position:0 -312px;} .map #header #navigation>a.map:after,.map #header #navigation>label.map:after{background-position:0 -310px} #header #navigation>a.statistics,#header #navigation>label.statistics{-ms-grid-column:4;grid-column-start:4} #header #navigation>a.statistics:after,#header #navigation>label.statistics:after{background-position:0 -372px} #header #navigation>a.statistics:hover:after,#header #navigation>a.statistics:focus:after,#header #navigation>label.statistics:hover:after,#header #navigation>label.statistics:focus:after{background-position:0 -436px} .statistics #header #navigation>a.statistics:after,.statistics #header #navigation>label.statistics:after{background-position:0 -434px} #header #navigation>a.reports,#header #navigation>label.reports{-ms-grid-column:5;grid-column-start:5} #header #navigation>a.reports:after,#header #navigation>label.reports:after{background-position:0 -496px} #header #navigation>a.reports:hover:after,#header #navigation>a.reports:focus:after,#header #navigation>label.reports:hover:after,#header #navigation>label.reports:focus:after{background-position:0 -560px} .reports #header #navigation>a.reports:after,.reports #header #navigation>label.reports:after{background-position:0 -558px} #header #navigation>a.messages,#header #navigation>label.messages{-ms-grid-column:6;grid-column-start:6} #header #navigation>a.messages:after,#header #navigation>label.messages:after{background-position:0 -620px} #header #navigation>a.messages:hover:after,#header #navigation>a.messages:focus:after,#header #navigation>label.messages:hover:after,#header #navigation>label.messages:focus:after{background-position:0 -684px} .messages #header #navigation>a.messages:after,.messages #header #navigation>label.messages:after{background-position:0 -682px} #header #navigation>a.dailyQuests,#header #navigation>label.dailyQuests{-ms-grid-column:7;grid-column-start:7} #header #navigation>a.dailyQuests:after,#header #navigation>label.dailyQuests:after{background-position:0 -744px} #header #navigation>a.dailyQuests:hover:after,#header #navigation>a.dailyQuests:focus:after,#header #navigation>label.dailyQuests:hover:after,#header #navigation>label.dailyQuests:focus:after{background-position:0 -808px} .dailyQuests #header #navigation>a.dailyQuests:after,.dailyQuests #header #navigation>label.dailyQuests:after{background-position:0 -808px} #header #navigation>a.mobileMenuButton,#header #navigation>label.mobileMenuButton{-ms-grid-column:8;grid-column-start:8} #header #navigation>a.mobileMenuButton:after,#header #navigation>label.mobileMenuButton:after{background-position:0 -870px} #header #navigation>a.mobileMenuButton:hover:after,#header #navigation>a.mobileMenuButton:focus:after,#header #navigation>label.mobileMenuButton:hover:after,#header #navigation>label.mobileMenuButton:focus:after{background-position:0 -932px} .mobileMenuButton #header #navigation>a.mobileMenuButton:after,.mobileMenuButton #header #navigation>label.mobileMenuButton:after{background-position:0 -930px} #header #navigation > a.map::after, #header #navigation > a.statistics::after, #header #navigation > a.reports::after, #header #navigation > a.messages::after, #header #navigation > a.dailyQuests::after, #header #navigation > a.mobileMenuButton::after, #header #navigation > a.mobileShopButton::after, #header #navigation > label.map::after, #header #navigation > label.statistics::after, #header #navigation > label.reports::after, #header #navigation > label.messages::after, #header #navigation > label.dailyQuests::after, #header #navigation > label.mobileMenuButton::after, #header #navigation > label.mobileShopButton::after { top: -3px; right: -3px; } #header .currency { position: absolute; top: 10px; right: 469px; width: 165px; height: 44px; display: -ms-grid; display: grid; -ms-grid-columns: 40px 1fr 30px 1fr; grid-template-columns: 40px 1fr 30px 1fr; -ms-grid-rows: 42px; grid-template-rows: 42px; color: #fff9eb; font-weight: bold; } #header .currency { background-image: linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%); border: 1px solid #34220d; border-radius: 4px; } #header .currency::before { content: ""; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; background-color: #664e40; border: solid 1px #44321d; border-radius: 1px; } #header .currency { color: #fff9eb; font-weight: bold; } #header .currency i:first-of-type { -ms-grid-column: 1; grid-column-start: 1; } #header .currency i { -ms-grid-column-align: center; justify-self: center; } #header .currency i, #header .currency div { position: relative; -ms-grid-row-align: center; align-self: center; } #header .currency div:first-of-type { -ms-grid-column: 2; grid-column-start: 2; } #header .currency div { font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 11px; padding-top: 2px; -ms-grid-column-align: start; justify-self: start; } #header .currency a:last-of-type { -ms-grid-column: 3; grid-column-start: 3; } #header .currency a { -ms-grid-column-align: center; justify-self: center; } #header .currency a, #header .currency div { position: relative; -ms-grid-row-align: center; align-self: center; } #header .currency div:last-of-type { -ms-grid-column: 4; grid-column-start: 4; } #header .currency div { font-family: Arial,Helvetica,Verdana,sans-serif; font-size: 11px; padding-top: 2px; -ms-grid-column-align: start; justify-self: start; } #header .currency a, #header .currency div { position: relative; -ms-grid-row-align: center; align-self: center; } a.silverCoin_medium { background-image: url('../../img/general/units/silverCoin_medium.png'); width: 22px; height: 22px; } a.goldCoin_medium { background-image: url('../../img/general/units/goldCoin_medium.png'); width: 29px; height: 29px; } #mtop #header { -ms-grid-column: 2; grid-column-start: 2; position: relative; /*Omid left:100px;*/ } /* Button */ .iconButton:not(.buttonFramed){background-color:transparent;background-position:0 top;background-repeat:no-repeat;background-attachment:scroll;cursor:pointer;float:right;position:relative;width:16px;height:16px} .iconButton:not(.buttonFramed).checked{background-position:-16px top}.iconButton:not(.buttonFramed):hover{background-position:-32px top} .iconButton:not(.buttonFramed).disabled{background-position:-48px top}.iconButton:not(.buttonFramed).disabled:hover{background-position:-48px top} .iconButton:not(.buttonFramed).viewFull:hover{background-position:0 0}.iconButton:not(.buttonFramed).small{width:7px;height:7px} .iconButton:not(.buttonFramed).small.checked{background-position:-7px top}.iconButton:not(.buttonFramed).small:hover{background-position:-14px top} .iconButton:not(.buttonFramed).small.disabled{background-position:-21px top}.iconButton:not(.buttonFramed).small.disabled:hover{background-position:-28px top} .iconButton:not(.buttonFramed).zoomIn{background-image:url('../../img/map/buttons/zoom-in.png')} .iconButton:not(.buttonFramed).zoomOut{background-image:url('../../img/map/buttons/zoom-out.png')} .iconButton:not(.buttonFramed).viewFull,.iconButton:not(.buttonFramed).viewFullGold{background-image:url('../../img/map/buttons/view-full-on.png')} .iconButton:not(.buttonFramed).viewNormal{background-image:url('../../img/map/buttons/view-full-off.png')} .iconButton:not(.buttonFramed).filterMy{background-image:url('../../img/map/buttons/filter-my.gif')} .iconButton:not(.buttonFramed).filterAlliance{background-image:url('../../img/map/buttons/filter-ally.gif')} .iconButton:not(.buttonFramed).linkCropfinder{background-image:url('../../img/map/buttons/cropfinder.gif')} .iconButton:not(.buttonFramed).expand{background-image:url('../../img/map/buttons/expand.gif')} .iconButton:not(.buttonFramed).collapse{background-image:url('../../img/map/buttons/collapse.gif')} .iconButton:not(.buttonFramed).delete{background-image:url('../../img/map/buttons/delete.gif')} .iconButton:not(.buttonFramed).dropDownImage{background-image:url('../../img/map/buttons/dropdownArrow.gif')} .iconButton:not(.buttonFramed).iconRequireGold{background-image:url('../../img/map/buttons/goldMap.png')} .iconButton:not(.buttonFramed).iconRequireGold .iconButton:not(.buttonFramed).linkCropfinder{background-position:-32px top} .iconButton:not(.buttonFramed).dropDownImage{width:9px;height:8px}.iconButton:not(.buttonFramed).dropDownImage.checked{background-position:-9px top} .iconButton:not(.buttonFramed).dropDownImage:hover{background-position:-18px top} .iconButton:not(.buttonFramed).dropDownImage.disabled{background-position:-27px top} .iconButton:not(.buttonFramed).dropDownImage.disabled:hover{background-position:-36px top} .iconButton:not(.buttonFramed).viewFullGold:hover{background:url('../../img/map/buttons/view-full-on.png')} .iconButton:not(.buttonFramed).iconRequireGold:hover{background-position:right -35px} button.iconFilter{width:20px;height:20px;margin:2px;text-align:center;background-color:#fff;border-radius:0;padding:0} button.iconFilter.iconFilterActive{width:24px;height:24px;background-image:url('../../img/round/button/buttonFilter-rtl.png');border-radius:0} button.iconFilter:hover{margin:2px}button.iconFilter img{position:relative}.buttonFramed.withIcon svg{position:absolute;top:50%;right:50%;overflow:visible;transform:translateX(-50%) translateY(-50%)} .rtl .buttonFramed.withIcon svg,.buttonFramed.withIcon .rtl svg{transform:translateX(50%) translateY(-50%) scaleX(-1)} .rtl.ie .buttonFramed.withIcon svg,.buttonFramed.withIcon .rtl.ie svg{transform:translateX(-50%) translateY(-50%) scaleX(-1)} .buttonFramed,.buttonFramed:hover,.buttonFramed:active{background-image:linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%)} .buttonFramed{overflow:hidden;position:relative;display:inline-block;box-sizing:border-box;z-index:0;border:1px solid #34220d} .buttonFramed:hover,.buttonFramed:active{cursor:pointer}.buttonFramed:active{box-shadow:none} .buttonFramed:before{content:"";z-index:2}.buttonFramed.round:before{border:1px solid #34220d} .buttonFramed.rectangle:before{box-shadow:0 0 1px 1px #34220d}.buttonFramed:active:before,.buttonFramed.disabled:before,.buttonFramed:disabled:before{border:1px solid #392818} .buttonFramed.green:before{background-color:#546e39}.buttonFramed.green:hover:before{background-color:#699128} .buttonFramed.green:active:before{background-color:#546e39}.buttonFramed.green.disabled:before,.buttonFramed.green:disabled:before{background-color:#747a6a} .buttonFramed.green.disabled:hover,.buttonFramed.green:disabled:hover{cursor:not-allowed} .buttonFramed.green.round:before{position:absolute;top:2px;left:2px;bottom:2px;right:2px;box-shadow:inset 0 -2px 1px 1px #63a90b,inset 2px -1px 1px 0 #578b11,inset -2px -1px 1px 0 #578b11,inset 0 2px 1px 1px #cfdcbe} .buttonFramed.green.round:hover:before{box-shadow:inset 0 -2px 1px 1px #71bb13,inset 2px -1px 1px 0 #6da71d,inset -2px -1px 1px 0 #6da71d,inset 0 2px 1px 1px #d4e2c1} .buttonFramed.green.round:active:before{box-shadow:inset 0 -2px 1px 1px #88c72d,inset 2px -1px 1px 0 #8dc03a,inset -2px -1px 1px 0 #8dc03a,inset 0 2px 1px 1px #abd171} .buttonFramed.green.round.disabled:before,.buttonFramed.green.round:disabled:before{box-shadow:inset 0 -1px 1px 1px #90b65e,inset 0 1px 1px 1px #b3c19d} .buttonFramed.green.rectangle:before{position:absolute;top:3px;left:3px;bottom:3px;right:3px;border-width:2px;border-style:solid;border-color:#cfdcbe #578b11 #63a90b} .buttonFramed.green.rectangle:hover:before{border-color:#d4e2c1 #6da71d #71bb13} .buttonFramed.green.rectangle:active:before{border-color:#abd171 #8dc03a #88c72d} .buttonFramed.green.rectangle.disabled:before,.buttonFramed.green.rectangle:disabled:before{border-width:1px;border-color:#b3c19d #97aa7b #90b65e} .buttonFramed.gold:after{content:"";position:absolute;top:2px;left:2px;bottom:2px;right:2px;background-image:linear-gradient(to bottom,#ffeaae,#ffd55e)} .buttonFramed.gold:hover:after{background-image:linear-gradient(to bottom,#fdfbe7,#ffeab0)} .buttonFramed.gold:active:after{background-image:none;background-color:#b58426}.buttonFramed.gold.disabled:after,.buttonFramed.gold:disabled:after{background-image:none;background-color:#cda862} .buttonFramed.gold.disabled:hover,.buttonFramed.gold:disabled:hover{cursor:not-allowed} .buttonFramed.gold.round:after{border-radius:50%}.buttonFramed.gold.round:before{position:absolute;top:2px;left:2px;bottom:2px;right:2px;box-shadow:inset 0 -2px 1px 1px #ffe94c,inset 2px -1px 1px 0 #ffe464,inset -2px -1px 1px 0 #ffe464,inset 0 2px 1px 1px #ffeaae} .buttonFramed.gold.round:hover:before{box-shadow:inset 0 -2px 1px 1px #f3e083,inset 2px -1px 1px 0 #f9e8a5,inset -2px -1px 1px 0 #f9e8a5,inset 0 2px 1px 1px #fdfbe7} .buttonFramed.gold.round:active:before{box-shadow:inset 0 -2px 1px 1px #f6cc7d,inset 2px -1px 1px 0 #d7aa54,inset -2px -1px 1px 0 #d7aa54,inset 0 2px 1px 1px #715318} .buttonFramed.gold.round.disabled:before,.buttonFramed.gold.round:disabled:before{box-shadow:inset 0 -1px 1px 1px #daba4a,inset 0 1px 1px 1px #f4dc6a} .buttonFramed.gold.rectangle:before{position:absolute;top:3px;left:3px;bottom:3px;right:3px;border-width:2px;border-style:solid;border-color:#ffeaae #ffe464 #ffe94c} .buttonFramed.gold.rectangle:hover:before{border-color:#fdfbe7 #f9e8a5 #f3e083}.buttonFramed.gold.rectangle:active:before{border-color:#715318 #d7aa54 #f6cc7d} .buttonFramed.gold.rectangle.disabled:before,.buttonFramed.gold.rectangle:disabled:before{border-width:1px;border-color:#f4dc6a #e0bf4e #daba4a} .buttonFramed.withText{height:37px;border-radius:3px}.buttonFramed.withText:before{border-radius:3px} .buttonFramed.withText>div{position:relative;z-index:3;font-weight:bold;padding:9px 20px 8px} .buttonFramed.withText.green>div{color:#fff9eb}.buttonFramed.withText.gold>div{color:#774c14} .buttonFramed.withText.gold .goldCoin{width:16px;height:16px;margin-right:5px;vertical-align:text-bottom} .buttonFramed.withText:active>div,.buttonFramed.withText.disabled>div,.buttonFramed.withText:disabled>div{color:#fff9eb} .buttonFramed.withText.disabled>div,.buttonFramed.withText:disabled>div{opacity:.4} .buttonFramed.withIcon{padding:0}.buttonFramed.withIcon svg{z-index:3}.buttonFramed.withIcon svg .outline{stroke-width:2} .buttonFramed.withIcon svg .icon{fill:#fff9eb}.buttonFramed.withIcon:active svg,.buttonFramed.withIcon.disabled svg,.buttonFramed.withIcon:disabled svg{opacity:.6} .buttonFramed.withIcon.green svg .outline{fill:#263a11;stroke:#263a11}.buttonFramed.withIcon.gold svg .outline{fill:#aa6928;stroke:#aa6928} .buttonFramed.withIcon.round{width:40px;height:40px;border-radius:50%}.buttonFramed.withIcon.round:before{border-radius:50%} .buttonFramed.withIcon.rectangle{width:33px;height:33px}button.textButtonV1{height:25px;line-height:15px;padding:4px 20px;font-size:11px;font-weight:bold;text-align:right;border-radius:5px;white-space:nowrap} .rtl button.textButtonV1{font-size:12px}button.textButtonV1.green{color:#f2f2f2;background-image:linear-gradient(to bottom,#7cb029,#587c1e);background-color:#7cb029;border:1px solid #283308;box-shadow:inset 2px 0 1px -1px #4b6f19,inset -2px 0 1px -1px #4b6f19,inset 0 3px 1px -1px #b5e251,inset 0 -3px 1px -1px rgba(44,75,12,0.6);text-shadow:1px 1px 1px rgba(0,0,0,0.5)} button.textButtonV1.green:hover,button.textButtonV1.green:focus{color:#283308;background-image:none;border-color:#506030;box-shadow:inset 0 20px 25px -10px rgba(255,255,255,0.7);text-shadow:none} button.textButtonV1.green:active{color:#506030;background-image:linear-gradient(to top,#7cb029,#587c1e);box-shadow:inset 2px 0 1px -1px #4b6f19,inset -2px 0 1px -1px #4b6f19;text-shadow:none} button.textButtonV1.green.disabled,button.textButtonV1.green:disabled{color:#506030;border-color:#9fa38a;background-image:none;background-color:#89917b;box-shadow:none;text-shadow:none} button.textButtonV1.gold{color:#333;background-image:linear-gradient(to bottom,#fdf5cb,#f8eeb0 40%,#f0dc7c 45%,#e6ce64 85%,#caac50);background-color:#f8eeb0;border:1px solid #82631d;box-shadow:inset 0 0 1px 1px rgba(82,67,32,0.5),inset 0 2px 2px 1px #faf8ec,inset 0 -2px 2px 0 #a08939} button.textButtonV1.gold:hover,button.textButtonV1.gold:focus{background-image:none;border-color:#665722;box-shadow:inset 0 20px 10px -10px rgba(255,255,255,0.7)} button.textButtonV1.gold:active{color:#333;background-image:linear-gradient(to top,#f0dc7c,#caac50);box-shadow:inset 0 2px 2px 1px #77652c,inset 0 -2px 2px 0 #faf8ec} button.textButtonV1.gold.disabled,button.textButtonV1.gold:disabled{color:#8e7834;border-color:#b9b091;background-image:none;background-color:#d8cfa7;box-shadow:none} button.textButtonV1.gold .goldIcon{background-image:url('../../img/round/button/content/goldInner-rtl.png');width:14px;height:14px;margin-right:5px;margin-left:3px;vertical-align:middle} button.textButtonV1.gold.disabled .goldIcon,button.textButtonV1.gold:disabled .goldIcon{opacity:.4} button.textButtonV1.grey{color:#333;background-image:linear-gradient(to bottom,#f8f8f8,#b0b0b0);background-color:#d0d0d0;border:1px solid #606060;box-shadow:inset 2px 0 1px -1px #b0b0b0,inset -2px 0 1px -1px #979797,inset 0 3px 1px -1px #f8f8f8,inset 0 -3px 1px -1px rgba(128,128,128,0.6);text-shadow:1px 1px 1px rgba(255,255,255,0.2)} button.textButtonV1.grey:hover,button.textButtonV1.grey:focus{background-image:none;border-color:#404040;box-shadow:inset 0 20px 25px -10px rgba(255,255,255,0.7);text-shadow:none} button.textButtonV1.grey:active{background-image:linear-gradient(to top,#f8f8f8,#b0b0b0);box-shadow:inset 2px 0 1px -1px #808080,inset -2px 0 1px -1px gray;text-shadow:none} button.textButtonV1.grey.disabled,button.textButtonV1.grey:disabled{border-color:#838383;background-image:none;background-color:#919191;box-shadow:none} button.textButtonV1.grey.negativeAction{color:#d40000}.colorBlind button.textButtonV1.grey.negativeAction{color:#0022af} button.textButtonV1.grey.negativeAction:hover,button.textButtonV1.grey.negativeAction:focus,button.textButtonV1.grey.negativeAction:active{color:#d40000} .colorBlind button.textButtonV1.grey.negativeAction:hover,.colorBlind button.textButtonV1.grey.negativeAction:focus,.colorBlind button.textButtonV1.grey.negativeAction:active{color:#0022af} button.icon,a.button.icon{width:24px;height:24px;background-image:url('../../img/round/button/buttonSmall-rtl.png');padding:0;border:0} button.icon:hover,a.button.icon:hover{width:24px;height:24px;background-position:right -34px} button.icon.disabled:hover,a.button.icon.disabled:hover{width:24px;height:24px;background-position:right top} button.icon.iconActive,button.icon.iconActive.disabled,a.button.icon.iconActive,a.button.icon.iconActive.disabled{width:24px;height:24px;background-position:right -68px} button.icon.gold,a.button.icon.gold{width:24px;height:24px;padding:0;background-position:right -140px} button.icon img{position:relative}a.layoutButton{z-index:0}a.layoutButton .content{position:absolute;top:0;left:0;bottom:0;right:0;z-index:3;line-height:38px;color:#f2f2f2;text-align:center;font-weight:bold;padding-top:1px;font-family:Arial,Helvetica,Verdana,sans-serif;text-shadow:1px 0 0 #263a11,1px 1px 0 #263a11,0 1px 0 #263a11,-1px 1px 0 #263a11,-1px 0 0 #263a11,-1px -1px 0 #263a11,0 -1px 0 #263a11,1px -1px 0 #263a11} .fa-IR a.layoutButton .content{font-family:IRANSans,Arial,Helvetica,Verdana,sans-serif} .buttonFramed.withIcon svg .icon { fill: #fff9eb; } .buttonFramed.withIcon.round::before { border-radius: 50%; } .buttonFramed.withIcon.round::before { border-radius: 50%; } .buttonFramed.withIcon.round { width: 40px; height: 40px; border-radius: 50%; } .buttonFramed.MoveUp { margin-top: -7px; } .buttonFramed.withIcon { padding: 0; } a.layoutButton { z-index: 0; } .buttonFramed { overflow: hidden; position: relative; display: inline-block; box-sizing: border-box; z-index: 0; border: 1px solid #34220d; } .buttonFramed, .buttonFramed:hover, .buttonFramed:active { background-image: linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%); } .buttonFramed.green.round::before { position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; box-shadow: inset 0 -2px 1px 1px #63a90b,inset 2px -1px 1px 0 #578b11,inset -2px -1px 1px 0 #578b11,inset 0 2px 1px 1px #cfdcbe; } .buttonFramed.green::before { background-color: #546e39; } .buttonFramed.round::before { border: 1px solid #34220d; } .buttonFramed::before { content: ""; z-index: 2; } .buttonFramed.withIcon svg, .buttonFramed.withIcon svg { transform: translateX(-28%) translateY(23%) scaleX(-1) } button.layoutButton .buttonFramed div.button-container img,button.layoutButton.buttonFramed div.button-container img { position: absolute; left: -3px; top: 3px; z-index: 9; margin-top: 0px; } button.layoutButton.editBlack div.button-container img { top:0px; } #topBarHeroWrapper #topBarHero .health,#topBarHeroWrapper #topBarHero .health, #topBarHeroWrapper #topBarHero .experience,#topBarHeroWrapper #topBarHero .experience{transform:scaleX(-1)} #topBarHeroWrapper #topBarHero .heroStatus svg{position:absolute;top:50%;right:50%;overflow:visible;transform:translateX(-50%) translateY(-50%)} #topBarHeroWrapper #topBarHero .heroStatus svg,#topBarHeroWrapper #topBarHero .heroStatus svg{transform:translateX(50%) translateY(-50%) scaleX(-1)} .ie #topBarHeroWrapper #topBarHero .heroStatus svg,#topBarHeroWrapper #topBarHero .heroStatus .ie svg{transform:translateX(-50%) translateY(-50%) scaleX(-1)} #topBarHeroWrapper{position:absolute;right:50%;transform:translateX(50%)}#topBarHeroWrapper{min-width:1280px;max-width:1440px;width:80vw;height:119px;padding:0 5px;top:0;display:-ms-grid;display:grid; /*Omid -ms-grid-columns:1fr 1132px 1fr; grid-template-columns:1fr 1132px 1fr; */ -ms-grid-columns:1fr 932px 1fr; grid-template-columns:1fr 932px 1fr; z-index:32;pointer-events:none} @media screen and (max-width:620px){.mobileOptimized #topBarHeroWrapper{display:block;-ms-grid-columns:none;grid-template-columns:none;width:119px;min-width:auto;transform:none;right:0;top:10px;z-index:39} }.ie #topBarHeroWrapper,.edge #topBarHeroWrapper{right:auto;left:50%;transform:translateX(-50%)} #topBarHeroWrapper *{box-sizing:border-box}#topBarHeroWrapper #topBarHero{width:118px;height:119px;-ms-grid-column:2;grid-column-start:2;position:relative;margin-right:30px;pointer-events:auto} @media screen and (max-width:620px){.mobileOptimized #topBarHeroWrapper #topBarHero{margin-right:20px;margin-top:30px;background-image:url('../../img/hud/topBar/header/hero/heroFrameStandalone.png');background-size:cover;transform:scale(1.3);transform-origin:top right} }#topBarHeroWrapper #topBarHero:after{content:"";position:absolute;top:100px;right:35px;z-index:4;background-image:url('../../img/hud/topBar/header/hero/separator.png');width:18px;height:19px} #topBarHeroWrapper #topBarHero .health,#topBarHeroWrapper #topBarHero .experience{position:absolute;top:5px;right:4px;z-index:3;width:110px;height:110px;pointer-events:none} #topBarHeroWrapper #topBarHero .health .title,#topBarHeroWrapper #topBarHero .experience .title{pointer-events:auto} #topBarHeroWrapper #topBarHero .heroImageButton{position:absolute;top:15px;right:14px;z-index:5;width:90px;height:90px;border-radius:50%;overflow:hidden} #topBarHeroWrapper #topBarHero .heroImageButton .heroImage{width:68px;height:82px;position:absolute;top:6px;right:12px;z-index:2;bottom:0;border-radius:50%;overflow:hidden;transition-duration:150ms} #topBarHeroWrapper #topBarHero .heroImageButton:hover .heroImage,#topBarHeroWrapper #topBarHero .heroImageButton:focus .heroImage{box-shadow:inset 0 0 20px 10px rgba(255,255,255,0.8);opacity:.8;filter:saturate(0.4) brightness(1.2)} #topBarHeroWrapper #topBarHero .heroImageButton:after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;z-index:3;background-image:url('../../img/hud/topBar/header/hero/heroFrame.png');width:90px;height:90px;border-radius:50%;overflow:hidden} #topBarHeroWrapper #topBarHero .heroStatus{position:absolute;top:10px;right:5px;border-radius:50%;z-index:5;width:32px;height:32px;background-image:linear-gradient(to bottom,#f3e8d0,#867466);border:1px solid #553420} @media screen and (max-width:620px){.mobileOptimized #topBarHeroWrapper #topBarHero .heroStatus{right:3px;top:0;transform:scale(1.2)} }#topBarHeroWrapper #topBarHero .heroStatus:before{content:"";position:absolute;top:2px;left:2px;bottom:2px;right:2px;border-radius:50%;background-color:#e8d8c0;border:1px solid #634b3d;pointer-events:none} #topBarHeroWrapper #topBarHero .heroStatus a{display:inline-block;position:absolute;top:2px;left:2px;bottom:2px;right:2px;border-radius:50%;background-color:transparent;transition-duration:150ms} #topBarHeroWrapper #topBarHero .heroStatus a:hover,#topBarHeroWrapper #topBarHero .heroStatus a:focus{background-color:rgba(255,255,255,0.5)} #topBarHeroWrapper #topBarHero .heroStatus a:active{background-color:rgba(0,0,0,0.2)} #topBarHeroWrapper #topBarHero .heroStatus svg{z-index:3}#topBarHeroWrapper #topBarHero .heroStatus svg .outline{stroke-width:1} #topBarHeroWrapper #topBarHero .heroStatus svg.heroTrapped{width:21px;height:21px;fill:#514054} #topBarHeroWrapper #topBarHero .heroStatus svg.heroTrapped .outline{stroke:#fbebff} #topBarHeroWrapper #topBarHero .heroStatus svg.heroHome{margin-top:-1px;width:21px;height:21px;fill:#4a9242} #topBarHeroWrapper #topBarHero .heroStatus svg.heroHome .outline{stroke:#0e1d0e} #topBarHeroWrapper #topBarHero .heroStatus svg.heroReinforcing{width:18px;height:18px;fill:#4f7bbb} #topBarHeroWrapper #topBarHero .heroStatus svg.heroReinforcing .outline{stroke:#04191d} #topBarHeroWrapper #topBarHero .heroStatus svg.heroRunning{width:14px;height:14px;fill:#754c29} #topBarHeroWrapper #topBarHero .heroStatus svg.heroRunning .outline{stroke:#0f0707} #topBarHeroWrapper #topBarHero .heroStatus svg.heroDead{width:21px;height:21px;fill:#231f20} #topBarHeroWrapper #topBarHero .heroStatus svg.heroDead .outline{stroke:#eaeaea} #topBarHeroWrapper #topBarHero .heroStatus svg.heroReviving{width:21px;height:21px;fill:#231f20} #topBarHeroWrapper #topBarHero .heroStatus svg.heroReviving .icon .cross{fill:#be1e2d} .colorBlind #topBarHeroWrapper #topBarHero .heroStatus svg.heroReviving .icon .cross{fill:#3e69b3} #topBarHeroWrapper #topBarHero .heroStatus svg.heroReviving .outline{stroke:#eaeaea} #topBarHeroWrapper #topBarHero .levelUp{position:absolute;top:85px;right:35px;z-index:5;background-image:url('../../img/hud/topBar/header/hero/levelUp_medium.png');width:25px;height:25px} #topBarHeroWrapper #topBarHero .layoutButton.auction,#topBarHeroWrapper #topBarHero .layoutButton.adventure{position:absolute;z-index:8;width:28px;height:28px} #topBarHeroWrapper #topBarHero .layoutButton.auction svg,#topBarHeroWrapper #topBarHero .layoutButton.adventure svg{width:16px;height:16px;right:0px;top:1px;} #topBarHeroWrapper #topBarHero .layoutButton.auction:not(.attention):hover:before,#topBarHeroWrapper #topBarHero .layoutButton.adventure:not(.attention):hover:before{background-color:#a8937f;box-shadow:inset 0 -2px 1px 1px #a8937f,inset 2px -1px 1px 0 #897460,inset -2px -1px 1px 0 #897460,inset 0 2px 1px 1px #dad2c0} #topBarHeroWrapper #topBarHero .layoutButton.auction:not(.attention):active:before,#topBarHeroWrapper #topBarHero .layoutButton.adventure:not(.attention):active:before{box-shadow:inset 0 1px 1px 0 #dad2c0,inset 0 0 1px 1px #a8937f} #topBarHeroWrapper #topBarHero .layoutButton.auction:not(.attention) svg .outline,#topBarHeroWrapper #topBarHero .layoutButton.adventure:not(.attention) svg .outline{fill:#1b120e;stroke:#1b120e} .colorBlind #topBarHeroWrapper #topBarHero .layoutButton.auction.attention:before,.colorBlind #topBarHeroWrapper #topBarHero .layoutButton.adventure.attention:before{background-color:#1a61b1;box-shadow:inset 0 -2px 1px 1px #2c8dd6,inset 2px -1px 1px 0 #406684,inset -2px -1px 1px 0 #406684,inset 0 2px 1px 1px #c5d9d8} .colorBlind #topBarHeroWrapper #topBarHero .layoutButton.auction.attention:hover:before,.colorBlind #topBarHeroWrapper #topBarHero .layoutButton.adventure.attention:hover:before{background-color:#448de0;box-shadow:inset 0 -2px 1px 1px #42a8f1,inset 2px -1px 1px 0 #406684,inset -2px -1px 1px 0 #406684,inset 0 2px 1px 1px #cde1e0} .colorBlind #topBarHeroWrapper #topBarHero .layoutButton.auction.attention:active:before,.colorBlind #topBarHeroWrapper #topBarHero .layoutButton.adventure.attention:active:before{box-shadow:inset 0 1px 1px 0 #6cbbd2,inset 0 0 1px 1px #448de0} .colorBlind #topBarHeroWrapper #topBarHero .layoutButton.auction svg .outline,.colorBlind #topBarHeroWrapper #topBarHero .layoutButton.adventure svg .outline{fill:#1b120e;stroke:#1b120e} #topBarHeroWrapper #topBarHero .layoutButton.auction:before,#topBarHeroWrapper #topBarHero .layoutButton.adventure:before{position:absolute;top:1px;left:1px;bottom:1px;right:1px} #topBarHeroWrapper #topBarHero .layoutButton.adventure{top:3px;right:81px}@media screen and (max-width:620px){.mobileOptimized #topBarHeroWrapper #topBarHero .layoutButton.adventure{top:-10px;right:55px} }#topBarHeroWrapper #topBarHero .layoutButton.adventure>div{line-height:26px;font-size:12px} #topBarHeroWrapper #topBarHero .layoutButton.auction{top:30px;right:93px} #topBarHeroWrapper #topBarHero .layoutButton.auction::before, #topBarHeroWrapper #topBarHero .layoutButton.adventure::before { z-index: -1; } #topBarHeroWrapper #topBarHero .layoutButton.auction:not(.attention)::before, #topBarHeroWrapper #topBarHero .layoutButton.adventure:not(.attention)::before { background-color: #8f7b68; box-shadow: inset 0 -2px 1px 1px #7a6654,inset 2px -1px 1px 0 #84705d,inset -2px -1px 1px 0 #84705d,inset 0 2px 1px 1px #d7cfbe; } #topBarHeroWrapper #topBarHero .layoutButton.auction::before, #topBarHeroWrapper #topBarHero .layoutButton.adventure::before { position: absolute; top: 1px; left: 1px; bottom: 1px; right: 1px; } #topBarHeroWrapper #topBarHero .layoutButton.auction { top: 30px; right: 93px; } #topBarHeroWrapper #topBarHero .layoutButton.auction, #topBarHeroWrapper #topBarHero .layoutButton.adventure { position: absolute; z-index: 8; width: 28px; height: 28px; } #topBarHeroWrapper * { box-sizing: border-box; } a.layoutButton .content { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 3; line-height: 38px; color: #f2f2f2; text-align: center; font-weight: bold; padding-top: 1px; font-family: Arial,Helvetica,Verdana,sans-serif; text-shadow: 1px 0 0 #263a11,1px 1px 0 #263a11,0 1px 0 #263a11,-1px 1px 0 #263a11,-1px 0 0 #263a11,-1px -1px 0 #263a11,0 -1px 0 #263a11,1px -1px 0 #263a11; } #header .shop { position: absolute; top: 10px; left: 50px; width: 86px; height: 86px; border-radius: 50%; border: 1px solid #34220d; } #header .shop { background-image: linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%); } #header .shop::after { content: ""; position: absolute; top: 3px; left: 3px; bottom: 3px; right: 3px; z-index: 3; border-radius: 50%; background-image: url('../../img/hud/topBar/header/shop.png'); width: 78px; height: 78px; } #stockBar .warehouse,#stockBar .granary{background-image:linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%);border:1px solid #34220d;border-radius:4px} #stockBar .warehouse:before,#stockBar .granary:before{content:"";position:absolute;top:2px;left:2px;bottom:2px;right:2px;background-color:#664e40;border:solid 1px #44321d;border-radius:1px} #stockBar{font-size:11px;font-weight:bold;position:absolute;z-index:32;top: 74px; /*Omid right: 131px; */ right: 411px; display:-ms-inline-grid;display:inline-grid;-ms-grid-columns:auto 5px auto;grid-template-columns:auto 5px auto;-ms-grid-rows:36px;grid-template-rows:36px;box-sizing:border-box} #stockBar *{box-sizing:border-box}#stockBar .warehouse,#stockBar .granary{position:relative;padding:3px;display:-ms-inline-grid;display:inline-grid} #stockBar .warehouse .capacity,#stockBar .warehouse .stockBarButton,#stockBar .granary .capacity,#stockBar .granary .stockBarButton{font-family:Arial,Helvetica,Verdana,sans-serif;grid-column-start:auto;-ms-grid-row:1;grid-row-start:1;position:relative;height:100%;display:-ms-inline-grid;display:inline-grid} .fa-IR #stockBar .warehouse .capacity,.fa-IR#stockBar .warehouse .stockBarButton,.fa-IR#stockBar .granary .capacity,.fa-IR#stockBar .granary .stockBarButton{font-family:IRANSans,Arial,Helvetica,Verdana,sans-serif} #stockBar .warehouse .capacity:nth-child(1),#stockBar .warehouse .stockBarButton:nth-child(1),#stockBar .granary .capacity:nth-child(1),#stockBar .granary .stockBarButton:nth-child(1){-ms-grid-column:1} #stockBar .warehouse .capacity:nth-child(2),#stockBar .warehouse .stockBarButton:nth-child(2),#stockBar .granary .capacity:nth-child(2),#stockBar .granary .stockBarButton:nth-child(2){-ms-grid-column:2} #stockBar .warehouse .capacity:nth-child(3),#stockBar .warehouse .stockBarButton:nth-child(3),#stockBar .granary .capacity:nth-child(3),#stockBar .granary .stockBarButton:nth-child(3){-ms-grid-column:3} #stockBar .warehouse .capacity:nth-child(4),#stockBar .warehouse .stockBarButton:nth-child(4),#stockBar .granary .capacity:nth-child(4),#stockBar .granary .stockBarButton:nth-child(4){-ms-grid-column:4} #stockBar .warehouse .capacity,#stockBar .granary .capacity{color:#fff9eb;-ms-grid-columns:30px 1fr;grid-template-columns:30px 1fr;-ms-grid-rows:28px;grid-template-rows:28px} #stockBar .warehouse .capacity i,#stockBar .warehouse .capacity .value,#stockBar .granary .capacity i,#stockBar .granary .capacity .value{-ms-grid-row:1;grid-row-start:1;display:inline-block;-ms-grid-row-align:center;align-self:center} #stockBar .warehouse .capacity i,#stockBar .granary .capacity i{-ms-grid-column:1;grid-column-start:1;-ms-grid-column-align:center;justify-self:center} #stockBar .warehouse .capacity .value,#stockBar .granary .capacity .value{-ms-grid-column:2;grid-column-start:2} #stockBar .warehouse .stockBarButton,#stockBar .granary .stockBarButton{height:28px;width:100%;position:relative;color:#333;-ms-grid-columns:30px 1fr 2px;grid-template-columns:30px 1fr 2px;-ms-grid-rows:22px;grid-template-rows:22px;background-color:#e3d4bc;border:2px solid #968879;border-bottom-color:#695b52;border-top-color:#f4e8d3;margin-right:1px} #stockBar .warehouse .stockBarButton:hover,#stockBar .warehouse .stockBarButton:focus,#stockBar .granary .stockBarButton:hover,#stockBar .granary .stockBarButton:focus{background-color:#fff3df;border:2px solid #a19487;border-bottom-color:#695b52;border-top-color:#f3e9d6} #stockBar .warehouse .stockBarButton:active,#stockBar .granary .stockBarButton:active{background-color:#ccbea7;border:2px solid #988a7a;border-bottom-color:#d0c3ad;border-top-color:#695b52} #stockBar .warehouse .stockBarButton>*,#stockBar .granary .stockBarButton>*{pointer-events:none} #stockBar .warehouse .stockBarButton i,#stockBar .granary .stockBarButton i{-ms-grid-column:1;grid-column-start:1;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:end;align-self:end} #stockBar .warehouse .stockBarButton svg.productionBoost,#stockBar .granary .stockBarButton svg.productionBoost{position:absolute;top:1px;right:2px;width:11px;height:11px;fill:#62b1dc;stroke:#000} #stockBar .warehouse .stockBarButton .value,#stockBar .warehouse .stockBarButton .barBox,#stockBar .granary .stockBarButton .value,#stockBar .granary .stockBarButton .barBox{-ms-grid-column:2;grid-column-start:2;-ms-grid-row:1;grid-row-start:1} #stockBar .warehouse .stockBarButton .value,#stockBar .granary .stockBarButton .value{-ms-grid-column-align:end;justify-self:end} #stockBar .warehouse .stockBarButton .value.alert,#stockBar .granary .stockBarButton .value.alert{color:#b73a38} .colorBlind #stockBar .warehouse .stockBarButton .value.alert,.colorBlind#stockBar .granary .stockBarButton .value.alert{color:#0022af} #stockBar .warehouse .stockBarButton .value#stockBarFreeCrop,#stockBar .granary .stockBarButton .value#stockBarFreeCrop{-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center} #stockBar .warehouse .stockBarButton .barBox,#stockBar .granary .stockBarButton .barBox{-ms-grid-row-align:end;align-self:end;width:100%;height:7px;border:1px solid #52372a;background-color:#52372a} #stockBar .warehouse .stockBarButton .barBox .bar,#stockBar .granary .stockBarButton .barBox .bar{background-color:#699e32;height:100%} #stockBar .warehouse .stockBarButton .barBox .bar.stockFull,#stockBar .granary .stockBarButton .barBox .bar.stockFull{background-color:#b73a38} .colorBlind #stockBar .warehouse .stockBarButton .barBox .bar.stockFull,.colorBlind#stockBar .granary .stockBarButton .barBox .bar.stockFull{background-color:#0022af} #stockBar .warehouse{-ms-grid-column:1;grid-column-start:1;-ms-grid-columns:88px 88px 88px 88px;grid-template-columns:88px 88px 88px 88px} #stockBar .granary{-ms-grid-column:3;grid-column-start:3;-ms-grid-columns:88px 88px 88px;grid-template-columns:88px 88px 88px} #stockBar i.warehouse_medium{background-image:url('../../img/hud/topBar/header/stockBar/warehouse_medium.png');width:27px;height:23px} #stockBar i.granary_medium{background-image:url('../../img/hud/topBar/header/stockBar/granary_medium.png');width:22px;height:23px} img.iMiniHouseFailed,i.iMiniHouseFailed{background-image:url('../../img/report/mini_houseFailed-rtl.gif');width:16px;height:16px} i{display:inline-block}i.population_medium{background-image:url('../../img/general/units/population_medium.png');width:22px;height:26px} i.culturePoints_small{background-image:url('../../img/general/units/culturePoints_small.png');width:18px;height:16px} i.culturePoints_medium{background-image:url('../../img/general/units/culturePoints_medium.png');width:26px;height:24px} i.clock_medium{background-image:url('../../img/general/units/clock_medium.png');width:22px;height:22px} i.healTime_medium{background-image:url('../../img/general/units/healTime_medium.png');width:23px;height:22px} i.goldCoin_medium{background-image:url('../../img/general/units/goldCoin_medium.png');width:29px;height:29px} i.silverCoin_medium{background-image:url('../../img/general/units/silverCoin_medium.png');width:22px;height:22px} i.offense_medium{background-image:url('../../img/general/combat/offense_medium.png');width:26px;height:22px} i.defense_medium{background-image:url('../../img/general/combat/defense_medium.png');width:22px;height:24px} i.resources_small{background-image:url('../../img/general/resources/resources_small.png');width:19px;height:16px} i.resources_medium{background-image:url('../../img/general/resources/resources_medium.png');width:28px;height:24px} i.clay_huge{background-image:url('../../img/general/resources/clay_huge.png');width:100px;height:65px} i.clay_large{background-image:url('../../img/general/resources/clay_large.png');width:45px;height:29px} i.clay_small{background-image:url('../../img/general/resources/clay_small.png');width:26px;height:18px} i.clay_tiny{background-image:url('../../img/general/resources/clay_tiny.png');width:16px;height:12px} i.crop_huge{background-image:url('../../img/general/resources/crop_huge.png');width:100px;height:91px} i.crop_large{background-image:url('../../img/general/resources/crop_large.png');width:45px;height:41px} i.crop_medium{background-image:url('../../img/general/resources/crop_medium.png');width:26px;height:24px} i.crop_small{background-image:url('../../img/general/resources/crop_small.png');width:16px;height:16px} i.freeCrop_medium{background-image:url('../../img/general/resources/freeCrop_medium.png');width:26px;height:24px} i.freeCrop_small{background-image:url('../../img/general/resources/freeCrop_small.png');width:16px;height:16px} i.iron_huge{background-image:url('../../img/general/resources/iron_huge.png');width:100px;height:69px} i.iron_large{background-image:url('../../img/general/resources/iron_large.png');width:45px;height:29px} i.iron_small{background-image:url('../../img/general/resources/iron_small.png');width:26px;height:18px} i.iron_tiny{background-image:url('../../img/general/resources/iron_tiny.png');width:16px;height:12px} i.lumber_huge{background-image:url('../../img/general/resources/lumber_huge.png');width:100px;height:73px} i.lumber_large{background-image:url('../../img/general/resources/lumber_large.png');width:45px;height:32px} i.lumber_small{background-image:url('../../img/general/resources/lumber_small.png');width:26px;height:19px} i.lumber_tiny{background-image:url('../../img/general/resources/lumber_tiny.png');width:16px;height:12px} i.statusHome_small{background-image:url('../../img/general/hero/statusHome_small.png');width:19px;height:17px} i.statusRunning_small{background-image:url('../../img/general/hero/statusRunning_small.png');width:16px;height:16px} i.statusSupport_small{background-image:url('../../img/general/hero/statusSupport_small.png');width:16px;height:17px} i.statusDead_small{background-image:url('../../img/general/hero/statusDead_small.png');width:14px;height:18px} i.statusRevive_small{background-image:url('../../img/general/hero/statusRevive_small.png');width:14px;height:18px} i.statusCaptured_small{background-image:url('../../img/general/hero/statusCaptured_small.png');width:20px;height:18px} i.tribe1_small{background-image:url('../../img/general/tribes/roman_small.png');width:16px;height:16px} i.tribe1_medium{background-image:url('../../img/general/tribes/roman_medium.png');width:22px;height:21px} i.tribe2_small{background-image:url('../../img/general/tribes/teuton_small.png');width:16px;height:16px} i.tribe2_medium{background-image:url('../../img/general/tribes/teuton_medium.png');width:22px;height:23px} i.tribe3_small{background-image:url('../../img/general/tribes/gaul_small.png');width:16px;height:16px} i.tribe3_medium{background-image:url('../../img/general/tribes/gaul_medium.png');width:22px;height:22px} i.tribe5_small{background-image:url('../../img/general/tribes/natar_small.png');width:16px;height:16px} i.tribe5_medium{background-image:url('../../img/general/tribes/natar_medium.png');width:22px;height:22px} i.tribe6_small{background-image:url('../../img/general/tribes/egyptian_small.png');width:16px;height:16px} i.tribe6_medium{background-image:url('../../img/general/tribes/egyptian_medium.png');width:22px;height:23px} i.tribe7_small{background-image:url('../../img/general/tribes/hun_small.png');width:16px;height:16px} i.tribe7_medium{background-image:url('../../img/general/tribes/hun_medium.png');width:22px;height:24px} img.productionBoost{background-image:url('../../img/a/greenPlus-rtl.gif');width:16px;height:16px} i.r1{background-image:url('../../img/general/resources/lumber_tiny.png');width:16px;height:12px} i.r2{background-image:url('../../img/general/resources/clay_tiny.png');width:16px;height:12px} i.r3{background-image:url('../../img/general/resources/iron_tiny.png');width:16px;height:12px} i.r4{background-image:url('../../img/general/resources/crop_small.png');width:16px;height:16px} i.r5,i.cropConsumption{background-image:url('../../img/general/resources/freeCrop_small.png');width:16px;height:16px} i.r1Big{background-image:url('../../img/general/resources/lumber_small.png');width:26px;height:19px} i.r2Big{background-image:url('../../img/general/resources/clay_small.png');width:26px;height:18px} i.r3Big{background-image:url('../../img/general/resources/iron_small.png');width:26px;height:18px} i.r4Big{background-image:url('../../img/general/resources/crop_medium.png');width:26px;height:24px} i.r5Big,i.cropConsumptionBig{background-image:url('../../img/general/resources/freeCrop_medium.png');width:26px;height:24px} i.r0,i.rAll{background-image:url('../../img/a/resAll-rtl.gif');width:18px;height:12px} img.r0,img.rAll{height:12px;width:18px;background-image:url('../../img/a/resAll-rtl.gif')} .merged i.r1,.merged i.r2,.merged i.r3,.merged i.r4,.merged i.r5,.merged i.r6,.merged i.r7,.merged i.r8,.merged i.r9,.merged i.r10,.merged i.r11{height:21px;width:25px;background-image:url('../../img/a/resMerged-rtl.png')} .merged i.r1{background-position:0 0}.merged i.r2{background-position:0 -21px}.merged i.r3{background-position:0 -42px} .merged i.r4{background-position:0 -63px}.merged i.r5{background-position:0 -84px} .merged i.r6{background-position:0 -105px}.merged i.r7{background-position:0 -126px} .merged i.r8{background-position:0 -147px}.merged i.r9{background-position:0 -168px} .merged i.r10{background-position:0 -189px}.merged i.r11{background-position:0 -210px} img.unit,i.unit{width:16px;height:16px}img.unit_card_detail,i.unit_card_detail{margin-left:5px;background:no-repeat} img.u1,i.u1{background-image:url('../../img/u/v1_romans2.gif');background-position:0 0} img.u2,i.u2{background-image:url('../../img/u/v1_romans2.gif');background-position:-19px 0} img.u3,i.u3{background-image:url('../../img/u/v1_romans2.gif');background-position:-38px 0} img.u4,i.u4{background-image:url('../../img/u/v1_romans2.gif');background-position:-57px 0} img.u5,i.u5{background-image:url('../../img/u/v1_romans2.gif');background-position:-76px 0} img.u6,i.u6{background-image:url('../../img/u/v1_romans2.gif');background-position:-95px 0} img.u7,i.u7{background-image:url('../../img/u/v1_romans2.gif');background-position:-114px 0} img.u8,i.u8{background-image:url('../../img/u/v1_romans2.gif');background-position:-133px 0} img.u9,i.u9{background-image:url('../../img/u/v1_romans2.gif');background-position:-152px 0} img.u10,i.u10{background-image:url('../../img/u/v1_romans2.gif');background-position:-171px 0} img.u11,i.u11{background-image:url('../../img/u/v2_teutons2.gif');background-position:0 0} img.u12,i.u12{background-image:url('../../img/u/v2_teutons2.gif');background-position:-19px 0} img.u13,i.u13{background-image:url('../../img/u/v2_teutons2.gif');background-position:-38px 0} img.u14,i.u14{background-image:url('../../img/u/v2_teutons2.gif');background-position:-57px 0} #mid #contentOuterContainer:before,#mid #contentOuterContainerPreview:before,#mid #contentOuterContainer:after,#mid #contentOuterContainerPreview:after{content:"";pointer-events:none} #mid #contentOuterContainer:before,#mid #contentOuterContainerPreview:before{position:absolute;top:19px;left:0;bottom:auto;right:0;height:48px;background-image:url('../../img/hud/content/header.jpg');background-repeat:repeat-x} #mid #contentOuterContainer:after,#mid #contentOuterContainerPreview:after{position:absolute;top:0;left:0;bottom:0;right:0;z-index:1;border-style:solid;border-width:67px 50px 10px 50px;border-image:url('../../img/hud/content/frame.png') 67 50 10 50 fill repeat} .ie #mid #contentOuterContainer:after,#mid .ie #contentOuterContainer:after,.ie #mid #contentOuterContainerPreview:after,#mid .ie #contentOuterContainerPreview:after,.edge #mid #contentOuterContainer:after,#mid .edge #contentOuterContainer:after,.edge #mid #contentOuterContainerPreview:after,#mid .edge #contentOuterContainerPreview:after{direction:ltr} #mid #contentOuterContainer h1.titleInHeader,#mid #contentOuterContainerPreview h1.titleInHeader{height:32px;position:absolute;top:32px;right:45px;left:180px;margin:0;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;direction:rtl;line-height:26px;font-size:24px;font-family:"Vazir";color:#f2f2f2;text-shadow:1px 0 0 #b68363,1px 1px 0 #b68363,0 1px 0 #b68363,-1px 1px 0 #5e463a,-1px 0 0 #5e463a,-1px -1px 0 #5e463a,0 -1px 0 #5e463a,1px -1px 0 #5e463a} #mid #contentOuterContainer h1.titleInHeader,#mid #contentOuterContainer h1.titleInHeader, #mid #contentOuterContainerPreview h1.titleInHeader,#mid #contentOuterContainerPreview h1.titleInHeader{font-size:25px} .fa-IR #mid #contentOuterContainer h1.titleInHeader,#mid .fa-IR #contentOuterContainer h1.titleInHeader,.fa-IR #mid #contentOuterContainerPreview h1.titleInHeader,#mid .fa-IR #contentOuterContainerPreview h1.titleInHeader{font-family:IRANSans,Arial,Helvetica,Verdana,sans-serif} .activate #mid #contentOuterContainer h1.titleInHeader,#mid .activate #contentOuterContainer h1.titleInHeader,.activate #mid #contentOuterContainerPreview h1.titleInHeader,#mid .activate #contentOuterContainerPreview h1.titleInHeader{max-width:70%;text-align:center;left:0;position:absolute;right:50%;transform:translateX(50%)} #mid{position:relative;margin-top:10px;margin-bottom:10px;min-height:660px;width:100%} #mid #contentOuterContainer.size1,#mid #contentOuterContainerPreview.size1{width:600px} .login #mid #contentOuterContainer.size1,.login#mid #contentOuterContainerPreview.size1{top:62px} #mid #contentOuterContainer.size2,#mid #contentOuterContainerPreview.size2{width:795px;top:62px} #mid #contentOuterContainer .contentTitle ,#mid #contentOuterContainerPreview .contentTitle {height:67px;background-color:#d2bda1;border-radius:10px;z-index:35} #mid #contentOuterContainer .contentContainer,#mid #contentOuterContainerPreview .contentContainer{padding-bottom:10px;background-color:#d2bda1;border:solid 1px #b39253;border-top:0;border-bottom:0} #mid #contentOuterContainer .contentContainer #content,#mid #contentOuterContainerPreview .contentContainer #content{ background-color: #fff; margin: 0 17px; width: calc(100% - 34px) !important; box-sizing: border-box; min-height: 435px; } div#mid div#contentOuterContainer div.contentFooter{height:8px;border:solid 1px #b39253;border-top:0;border-bottom-right-radius:8px;border-bottom-left-radius:8px;background-color:white;font-size:0;line-height:0} div#mid div#contentOuterContainer div#content{width:554px;padding:9px 6px 10px;margin:0 auto} div#mid div#contentOuterContainer.size2 div#content{width:749px}.previewUiContent h4.round{height:24px;line-height:24px;padding:0 10px 0 0;vertical-align:middle;margin-bottom:0;width:561px;margin-top:15px} body.village1 div#mid div#contentOuterContainer div#content{width:554px;padding:9px 6px 10px;margin:-34px 0px} body.village1 #mid #contentOuterContainer { background: 0; padding: 0; border: 0; z-index: 33; } body.village1 #mid #contentOuterContainer{background:0;padding:0;border:0;z-index:33} body.village1 #mid #contentOuterContainer:before,body.village1 #mid #contentOuterContainer:after{display:none} body.village1 #mid #contentOuterContainer div.contentContainer{background:0;padding:0;border:0} body.village1 #mid #contentOuterContainer div.contentTitle{background:0;box-shadow:none;position:absolute;left:0;z-index:500;border:0} body.village1 #mid #contentOuterContainer div.contentTitle .contentTitleButton{display:none} body.village1 #mid #contentOuterContainer div.contentTitle .contentTitleButton#answersButton{display:inline-block} body.village1 #mid #contentOuterContainer div.contentFooter{display:none}body.village1 #mid #contentOuterContainer #content{padding:0;margin-top:-16px;background-color:transparent} body.village2 div#mid div#contentOuterContainer div#content{width:554px;padding:9px 6px 10px;margin:-34px 0px} body.village2 #mid #contentOuterContainer { background: 0; padding: 0; border: 0; z-index: 33; } body.village2 #mid #contentOuterContainer{background:0;padding:0;border:0;z-index:33} body.village2 #mid #contentOuterContainer:before,body.village2 #mid #contentOuterContainer:after{display:none} body.village2 #mid #contentOuterContainer div.contentContainer{background:0;padding:0;border:0} body.village2 #mid #contentOuterContainer div.contentTitle{background:0;box-shadow:none;position:absolute;left:0;z-index:500;border:0} body.village2 #mid #contentOuterContainer div.contentTitle .contentTitleButton{display:none} body.village2 #mid #contentOuterContainer div.contentTitle .contentTitleButton#answersButton{display:inline-block} body.village2 #mid #contentOuterContainer div.contentFooter{display:none}body.village2 #mid #contentOuterContainer #content{padding:0;margin-top:-16px;background-color:transparent} #mid #contentOuterContainer.size1, #mid #contentOuterContainerPreview.size1 { width: 600px; } #mid #contentOuterContainer, #mid #contentOuterContainerPreview { position: relative; float: right; top: 15px; right: 200px; } body.village1 #mid #contentOuterContainer{ right: 126px; } div#mid a.contentTitleButton#closeContentButton { left: 40px; } div#mid a.contentTitleButton { float: left; z-index: 2; left: 45px; top: 26px; margin-left: 7px; } .contentTitleButton { width: 33px; height: 33px; } .contentTitleButton { padding: 0; } .contentTitleButton::before { position: absolute; top: 3px; left: 3px; bottom: 3px; right: 3px; border-width: 2px; border-style: solid; border-color: #cfdcbe #578b11 #63a90b; } .contentTitleButton::before { background-color: #546e39; } .contentTitleButton::before { box-shadow: 0 0 1px 1px #34220d; } .contentTitleButton::before { content: ""; z-index: 2; } div#mid a.contentTitleButton#closeContentButton::after { background-image: url('../../img/hud/content/close_small.png'); width: 17px; height: 17px; top: 7px; right: 7px; } div#mid a.contentTitleButton::after { content: ""; position: absolute; z-index: 2; } .contentTitleButton { overflow: hidden; position: relative; display: inline-block; box-sizing: border-box; z-index: 0; border: 1px solid #34220d; } .contentTitleButton, .contentTitleButton:hover, .contentTitleButton:active { background-image: linear-gradient(to bottom,#cba467 5%,#f3e2ae 13%,#efbf7b 32%,#aa8050 48%,#835e35 72%,#ad8a54 93%,#d7b672 100%); } div.village1 table td.ico{ position: relative; } img.productionBoost { position: absolute; right: 0; top: 0; } .sidebar .sidebarBox .header .buttonsWrapper { display: flex; flex-direction: row; justify-content: flex-end; margin: 0 25px 0px; } div.village1 div#village_map.tribe1::after { background-image: url('../../img/layout/background2019/resourceFields/tribeSpecificCenter/villageCenter_vid1.png'); } #village_map.tribe2::after { background-image: url('../../img/layout/background2019/resourceFields/tribeSpecificCenter/villageCenter_vid2.png'); } #village_map.tribe3::after { background-image: url('../../img/layout/background2019/resourceFields/tribeSpecificCenter/villageCenter_vid3.png'); } div.village1 div#village_map::after{ content: ""; position: absolute; top: 0; left: 0; bottom: 2px; right: 0; background-position: center bottom; } div#wrapper::before { content: ""; width: 100%; height: 32px; position: absolute; background-color: #73655a; } /* compact3 */ div.village1 .level:not(.colorLayer), div.village2 div#village_map .buildingSlot .level { position: absolute; width: 24px; height: 23px; font-size: 14px; font-family: Arial, Helvetica, Verdana, sans-serif; text-align: center; background-image: url('../../img/g/circle.png'); background-position: 1px 0 } .rtl div.village1 .level:not(.colorLayer), .rtldiv.village2 div#village_map .buildingSlot .level { font-size: 15px } div.village2 div#village_map .buildingSlot .level:not(.colorLayer).maxLevel.ww { letter-spacing: -2px } div.village1 .colorLayer, div.village2 div#village_map .buildingSlot div.colorLayer { position: absolute; border: 1px solid #333; background-image: linear-gradient(to top, #606060, #c8c8c8 100%); margin: 1px; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 2px 0 white } div.village1 .colorLayer.notNow, div.village2 div#village_map .buildingSlot .colorLayer.notNow { border: 1px solid #988b42; background-color: #fdf15f; background-image: -moz-linear-gradient(bottom, #988b42, #fdf15f 100%); background-image: -webkit-linear-gradient(bottom, #988b42, #fdf15f 100%); background-image: linear-gradient(to top, #988b42, #fdf15f 100%) } div.village1 .colorLayer.good, div.village2 div#village_map .buildingSlot .colorLayer.good { border: 1px solid #506d00; background-color: #c7e94f; background-image: -moz-linear-gradient(bottom, #7da100, #c7e94f 100%); background-image: -webkit-linear-gradient(bottom, #7da100, #c7e94f 100%); background-image: linear-gradient(to top, #7da100, #c7e94f 100%) } div.village1 .colorLayer.maxLevel, div.village2 div#village_map .buildingSlot .colorLayer.maxLevel { border: 1px solid #0d648e; background-color: #b1e4ff; background-image: -moz-linear-gradient(bottom, #0d648e, #b1e4ff 100%); background-image: -webkit-linear-gradient(bottom, #0d648e, #b1e4ff 100%); background-image: linear-gradient(to top, #0d648e, #b1e4ff 100%) } div.village1 .colorLayer .labelLayer, div.village2 div#village_map .buildingSlot .colorLayer .labelLayer { position: relative; top: 4px; right: 4px; width: 18px; height: 18px; background-color: white; border-radius: 50%; line-height: 17px; font-size: 11px; font-family: Verdana, sans-serif; text-align: center } .rtl div.village1 .colorLayer .labelLayer, .rtldiv.village2 div#village_map .buildingSlot .colorLayer .labelLayer { font-size: 12px } div.village1 .colorLayer.underConstruction .labelLayer, div.village2 div#village_map .buildingSlot .colorLayer.underConstruction .labelLayer { background-color: #ffa84f } div.village2 div#village_map .buildingSlot div.colorLayer.maxLevel.ww { width: 32px; height: 32px; margin-right: -2px } div.village2 div#village_map .buildingSlot div.colorLayer.maxLevel.ww .labelLayer { width: 24px; height: 24px; line-height: 23px } .village1 .tip .level, .village2 .tip .level { font-weight: normal } .village1 .tip .showCosts, .village2 .tip .showCosts { line-height: 16px } .village1 .tip .showCosts .resources, .village2 .tip .showCosts .resources { margin-bottom: 0 } table#warehouse thead tr td { cursor: pointer } .rtl div.village1 #village_map svg.resourceField, div.village1 #village_map .rtl svg.resourceField, .rtl div.village1 #village_map svg.villageCenter, div.village1 #village_map .rtl svg.villageCenter { transform: scaleX(-1) } div.village1 #village_map .level.buildingSlot1:hover~svg.resourceField .buildingSlot1, div.village1 #village_map .level.buildingSlot2:hover~svg.resourceField .buildingSlot2, div.village1 #village_map .level.buildingSlot3:hover~svg.resourceField .buildingSlot3, div.village1 #village_map .level.buildingSlot4:hover~svg.resourceField .buildingSlot4, div.village1 #village_map .level.buildingSlot5:hover~svg.resourceField .buildingSlot5, div.village1 #village_map .level.buildingSlot6:hover~svg.resourceField .buildingSlot6, div.village1 #village_map .level.buildingSlot7:hover~svg.resourceField .buildingSlot7, div.village1 #village_map .level.buildingSlot8:hover~svg.resourceField .buildingSlot8, div.village1 #village_map .level.buildingSlot9:hover~svg.resourceField .buildingSlot9, div.village1 #village_map .level.buildingSlot10:hover~svg.resourceField .buildingSlot10, div.village1 #village_map .level.buildingSlot11:hover~svg.resourceField .buildingSlot11, div.village1 #village_map .level.buildingSlot12:hover~svg.resourceField .buildingSlot12, div.village1 #village_map .level.buildingSlot13:hover~svg.resourceField .buildingSlot13, div.village1 #village_map .level.buildingSlot14:hover~svg.resourceField .buildingSlot14, div.village1 #village_map .level.buildingSlot15:hover~svg.resourceField .buildingSlot15, div.village1 #village_map .level.buildingSlot16:hover~svg.resourceField .buildingSlot16, div.village1 #village_map .level.buildingSlot17:hover~svg.resourceField .buildingSlot17, div.village1 #village_map .level.buildingSlot18:hover~svg.resourceField .buildingSlot18, div.village1 #village_map svg.resourceField>path:hover, div.village1 #village_map svg.villageCenter>path:hover { fill: rgba(255, 255, 255, 0.2); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2 } div.village1 #village_map .level.buildingSlot1:active~svg.resourceField .buildingSlot1, div.village1 #village_map .level.buildingSlot2:active~svg.resourceField .buildingSlot2, div.village1 #village_map .level.buildingSlot3:active~svg.resourceField .buildingSlot3, div.village1 #village_map .level.buildingSlot4:active~svg.resourceField .buildingSlot4, div.village1 #village_map .level.buildingSlot5:active~svg.resourceField .buildingSlot5, div.village1 #village_map .level.buildingSlot6:active~svg.resourceField .buildingSlot6, div.village1 #village_map .level.buildingSlot7:active~svg.resourceField .buildingSlot7, div.village1 #village_map .level.buildingSlot8:active~svg.resourceField .buildingSlot8, div.village1 #village_map .level.buildingSlot9:active~svg.resourceField .buildingSlot9, div.village1 #village_map .level.buildingSlot10:active~svg.resourceField .buildingSlot10, div.village1 #village_map .level.buildingSlot11:active~svg.resourceField .buildingSlot11, div.village1 #village_map .level.buildingSlot12:active~svg.resourceField .buildingSlot12, div.village1 #village_map .level.buildingSlot13:active~svg.resourceField .buildingSlot13, div.village1 #village_map .level.buildingSlot14:active~svg.resourceField .buildingSlot14, div.village1 #village_map .level.buildingSlot15:active~svg.resourceField .buildingSlot15, div.village1 #village_map .level.buildingSlot16:active~svg.resourceField .buildingSlot16, div.village1 #village_map .level.buildingSlot17:active~svg.resourceField .buildingSlot17, div.village1 #village_map .level.buildingSlot18:active~svg.resourceField .buildingSlot18, div.village1 #village_map svg.resourceField>path:active, div.village1 #village_map svg.villageCenter>path:active { fill: rgba(255, 255, 255, 0.35); stroke: rgba(255, 255, 255, 0.5); stroke-width: 2 } div.village1 #village_map .level { position: absolute; z-index: 21; line-height: 23px; cursor: pointer } div.village1 #village_map .level.buildingSlot1 { top: 83px; right: 171px } div.village1 #village_map .level.buildingSlot2 { top: 84px; right: 261px } div.village1 #village_map .level.buildingSlot3 { top: 96px; right: 329px } div.village1 #village_map .level.buildingSlot4 { top: 122px; right: 113px } div.village1 #village_map .level.buildingSlot5 { top: 135px; right: 226px } div.village1 #village_map .level.buildingSlot6 { top: 142px; right: 283px } div.village1 #village_map .level.buildingSlot7 { top: 140px; right: 368px } div.village1 #village_map .level.buildingSlot8 { top: 173px; right: 53px } div.village1 #village_map .level.buildingSlot9 { top: 173px; right: 134px } div.village1 #village_map .level.buildingSlot10 { top: 174px; right: 324px } div.village1 #village_map .level.buildingSlot11 { top: 174px; right: 412px } div.village1 #village_map .level.buildingSlot12 { top: 234px; right: 61px } div.village1 #village_map .level.buildingSlot13 { top: 224px; right: 134px } div.village1 #village_map .level.buildingSlot14 { top: 260px; right: 270px } div.village1 #village_map .level.buildingSlot15 { top: 229px; right: 392px } div.village1 #village_map .level.buildingSlot16 { top: 294px; right: 165px } div.village1 #village_map .level.buildingSlot17 { top: 319px; right: 256px } div.village1 #village_map .level.buildingSlot18 { top: 296px; right: 346px } div.village1 #village_map svg.resourceField, div.village1 #village_map svg.villageCenter { position: absolute; pointer-events: none } div.village1 #village_map svg.resourceField>path, div.village1 #village_map svg.villageCenter>path { pointer-events: auto; cursor: pointer; transition-duration: 150ms; transition-timing-function: ease-in; fill: transparent } div.village1 #village_map svg.resourceField { z-index: 25; transform: scaleX(-1); top:65px; height: 314px; width:503px; } div.village1 #village_map svg.villageCenter { z-index: 26; transform: scaleX(-1); top:55px; } div.village1 .showTroopsToggleMobile { display: none } div.village1 div#map_details { position: absolute; left: -17px; top: 21px; width: 222px; z-index: 1000 } div.village1 div#map_details input#showTroopsToggleMobile { display: none } div.village1 div.production, div.village1 div.units { width: 200px } div.village1 div.movements div.boxes-contents.cf, div.village1 div.production div.boxes-contents.cf, div.village1 div.units div.boxes-contents.cf { padding: 8px } div.village1 div#map_details .boxes { float: left } div.village1 div.movements { min-height: 130px; width: 221px; line-height: 19px; float: left } div.village1 table#movements { margin-top: -1px } div.village1 table#movements td { padding: 1px 0 } div.village1 table#movements td.typ { width: 32px; vertical-align: top; font-weight: bold } div.village1 table#movements td.typ img { margin: 0 4px 0 1px } div.village1 table#movements div.mov { float: right; font-weight: bold; white-space: nowrap } div.village1 table#movements div.dur_r { float: left; padding-left: 2px; font-size: 11px; color: #6b6b6b; white-space: nowrap } .rtl div.village1 table#movements div.dur_r { font-size: 12px } div.village1 table#movements td.wrap { line-height: 10px } div.village1 table#movements div.dur_l { float: right; padding-bottom: 2px; font-size: 11px; color: #6b6b6b } .rtl div.village1 table#movements div.dur_l { font-size: 12px } div.village1 table#movements .a1 { color: #d40000 } .colorBlind div.village1 table#movements .a1 { color: #0022af } .village1 #center a.contentTitleButton#answersButton { position: absolute; left: -20px; z-index: 500; top: -15px } div.village1 table#movements .d1 { color: #228b22 } div.village1 table#movements .a2, div.village1 table#movements .d2 { color: #f2c700 } div.village1 table#movements .a3, div.village1 table#movements .d3 { color: #b500a3 } div.village1 table#movements .adventure, div.village1 table#movements .settle { color: #0022af } .colorBlind div.village1 table#movements .adventure { color: #228b22 } div.village1 table#movements .settle { color: #228b22 } div.village1 table#production td.res { width: 70% } div.village1 table#production td.per { width: 30% } div.village1 div.production button.productionBoostButton { float: left } div.village1 table#troops td.un { width: 80% } body.village1 #ingameManual { z-index: 1 } .contentNavi.subNavi { width: calc(100% + 15px); /*background-color: #red; background-image: linear-gradient(to top,#caa065 0%,#876338 20%,#ba8f5b 54%,#f3ce8b 74%,#ecd9a5 92%); border: solid 1px #34220d; height: 50px; padding: 4px 4px; */ background-color: #d2bda1; height: 40px; padding: 0px 4px; right: -7px; top: -9px; box-sizing: border-box; z-index: 36; } .contentNavi { position: relative; width: 100%; margin-bottom: 10px; } body { background-color: #54643a; } body.village1 { background-color: #67772e; background-image: linear-gradient(-4.9deg,#67772e 1875px,#abc7df 1911px,#aac8e2),linear-gradient(4.9deg,#67772e 1856px,#abc7df 1892px,#aac8e2); } #mid .sidebar.afterContent { /* align-items: flex-end; /* margin-right: 30px;*/ } .sidebar { position: relative; float: right; /* width: calc(((100% - 600px) / 2) - 30px); */ min-width: 240px; /*min-height: 660px;*/ display: flex; flex-direction: column; flex-wrap: nowrap; z-index: 40; } @media only screen and (min-width : 1366px) { .sidebar { min-width: 300px; } } .sidebar.beforeContent { align-items: flex-start; margin-left: 30px; top: 120px; right: 69px; position: absolute; } .sidebar .sidebarBoxWrapper { width: 160px; } /* Building */ /********** IMAGES ********* */ /********** GRID ********* */ /********** INLINE ICONS ********* */ /********** FONT ********* */ /********** MOBILE ********* */ /********** COLORBLIND ********* */ /********** DIRECTIONS ********* */ /********** TEXT ********* */ /*** MEASUREMENT ** */ /*** MOBILE ** */ /*** COLOR CODES ** */ /*** COLOR USAGE ** */ /*** DEFAULT STYLES ** */ /*** TRIBES ** */ /*** BUILDINGS ** */ /*** RESOURCES ** */ .buildingsV3 { /* buildings */ /* resource fields in upgrade view */ /* building icons */ } .buildingsV3 img { /* standard buildings shared by all tribes */ /* special buildings for each tribe */ /* rally points */ /* walls */ /* world wonders */ } .buildingsV3 img.building:not(.big) { width: 120px; height: 120px; } .buildingsV3 img.building.big { width: 184px; height: 179px; } .buildingsV3 img.g5.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g5-rtl.png'); } .buildingsV3 img.g5.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g5-rtl.png'); } .buildingsV3 img.g5.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g5-rtl.png'); } .buildingsV3 img.g5.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g5-rtl.png'); } .buildingsV3 img.g5.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g5-rtl.png'); } .buildingsV3 img.g5.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g5-rtl.png'); } .buildingsV3 img.g5.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g5-rtl.png'); } .buildingsV3 img.g5.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g5-rtl.png'); } .buildingsV3 img.g5.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g5-rtl.png'); } .buildingsV3 img.g5.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g5-rtl.png'); } .buildingsV3 img.g6.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g6-rtl.png'); } .buildingsV3 img.g6.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g6-rtl.png'); } .buildingsV3 img.g6.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g6-rtl.png'); } .buildingsV3 img.g6.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g6-rtl.png'); } .buildingsV3 img.g6.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g6-rtl.png'); } .buildingsV3 img.g6.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g6-rtl.png'); } .buildingsV3 img.g6.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g6-rtl.png'); } .buildingsV3 img.g6.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g6-rtl.png'); } .buildingsV3 img.g6.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g6-rtl.png'); } .buildingsV3 img.g6.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g6-rtl.png'); } .buildingsV3 img.g7.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g7-rtl.png'); } .buildingsV3 img.g7.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g7-rtl.png'); } .buildingsV3 img.g7.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g7-rtl.png'); } .buildingsV3 img.g7.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g7-rtl.png'); } .buildingsV3 img.g7.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g7-rtl.png'); } .buildingsV3 img.g7.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g7-rtl.png'); } .buildingsV3 img.g7.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g7-rtl.png'); } .buildingsV3 img.g7.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g7-rtl.png'); } .buildingsV3 img.g7.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g7-rtl.png'); } .buildingsV3 img.g7.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g7-rtl.png'); } .buildingsV3 img.g8.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g8-rtl.png'); } .buildingsV3 img.g8.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g8-rtl.png'); } .buildingsV3 img.g8.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g8-rtl.png'); } .buildingsV3 img.g8.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g8-rtl.png'); } .buildingsV3 img.g8.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g8-rtl.png'); } .buildingsV3 img.g8.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g8-rtl.png'); } .buildingsV3 img.g8.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g8-rtl.png'); } .buildingsV3 img.g8.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g8-rtl.png'); } .buildingsV3 img.g8.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g8-rtl.png'); } .buildingsV3 img.g8.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g8-rtl.png'); } .buildingsV3 img.g9.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g9-rtl.png'); } .buildingsV3 img.g9.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g9-rtl.png'); } .buildingsV3 img.g9.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g9-rtl.png'); } .buildingsV3 img.g9.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g9-rtl.png'); } .buildingsV3 img.g9.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g9-rtl.png'); } .buildingsV3 img.g9.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g9-rtl.png'); } .buildingsV3 img.g9.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g9-rtl.png'); } .buildingsV3 img.g9.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g9-rtl.png'); } .buildingsV3 img.g9.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g9-rtl.png'); } .buildingsV3 img.g9.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g9-rtl.png'); } .buildingsV3 img.g10.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g10-rtl.png'); } .buildingsV3 img.g10.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g10-rtl.png'); } .buildingsV3 img.g10.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g10-rtl.png'); } .buildingsV3 img.g10.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g10-rtl.png'); } .buildingsV3 img.g10.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g10-rtl.png'); } .buildingsV3 img.g10.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g10-rtl.png'); } .buildingsV3 img.g10.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g10-rtl.png'); } .buildingsV3 img.g10.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g10-rtl.png'); } .buildingsV3 img.g10.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g10-rtl.png'); } .buildingsV3 img.g10.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g10-rtl.png'); } .buildingsV3 img.g11.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g11-rtl.png'); } .buildingsV3 img.g11.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g11-rtl.png'); } .buildingsV3 img.g11.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g11-rtl.png'); } .buildingsV3 img.g11.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g11-rtl.png'); } .buildingsV3 img.g11.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g11-rtl.png'); } .buildingsV3 img.g11.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g11-rtl.png'); } .buildingsV3 img.g11.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g11-rtl.png'); } .buildingsV3 img.g11.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g11-rtl.png'); } .buildingsV3 img.g11.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g11-rtl.png'); } .buildingsV3 img.g11.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g11-rtl.png'); } .buildingsV3 img.g12.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g13-rtl.png'); } .buildingsV3 img.g13.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g13-rtl.png'); } .buildingsV3 img.g12.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g13-rtl.png'); } .buildingsV3 img.g13.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g13-rtl.png'); } .buildingsV3 img.g12.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g13-rtl.png'); } .buildingsV3 img.g13.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g13-rtl.png'); } .buildingsV3 img.g12.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g13-rtl.png'); } .buildingsV3 img.g13.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g13-rtl.png'); } .buildingsV3 img.g12.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g13-rtl.png'); } .buildingsV3 img.g13.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g13-rtl.png'); } .buildingsV3 img.g12.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g13-rtl.png'); } .buildingsV3 img.g13.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g13-rtl.png'); } .buildingsV3 img.g13.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g13-rtl.png'); } .buildingsV3 img.g13.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g13-rtl.png'); } .buildingsV3 img.g13.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g13-rtl.png'); } .buildingsV3 img.g13.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g13-rtl.png'); } .buildingsV3 img.g14.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g14-rtl.png'); } .buildingsV3 img.g14.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g14-rtl.png'); } .buildingsV3 img.g14.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g14-rtl.png'); } .buildingsV3 img.g14.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g14-rtl.png'); } .buildingsV3 img.g14.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g14-rtl.png'); } .buildingsV3 img.g14.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g14-rtl.png'); } .buildingsV3 img.g14.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g14-rtl.png'); } .buildingsV3 img.g14.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g14-rtl.png'); } .buildingsV3 img.g14.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g14-rtl.png'); } .buildingsV3 img.g14.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g14-rtl.png'); } .buildingsV3 img.g15.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g15-rtl.png'); } .buildingsV3 img.g15.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g15-rtl.png'); } .buildingsV3 img.g15.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g15-rtl.png'); } .buildingsV3 img.g15.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g15-rtl.png'); } .buildingsV3 img.g15.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g15-rtl.png'); } .buildingsV3 img.g15.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g15-rtl.png'); } .buildingsV3 img.g15.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g15-rtl.png'); } .buildingsV3 img.g15.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g15-rtl.png'); } .buildingsV3 img.g15.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g15-rtl.png'); } .buildingsV3 img.g15.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g15-rtl.png'); } .buildingsV3 img.g16.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g16-rtl.png'); } .buildingsV3 img.g16.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g16-rtl.png'); } .buildingsV3 img.g16.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g16-rtl.png'); } .buildingsV3 img.g16.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g16-rtl.png'); } .buildingsV3 img.g16.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g16-rtl.png'); } .buildingsV3 img.g16.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g16-rtl.png'); } .buildingsV3 img.g16.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g16-rtl.png'); } .buildingsV3 img.g16.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g16-rtl.png'); } .buildingsV3 img.g16.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g16-rtl.png'); } .buildingsV3 img.g16.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g16-rtl.png'); } .buildingsV3 img.g17.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g17-rtl.png'); } .buildingsV3 img.g17.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g17-rtl.png'); } .buildingsV3 img.g17.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g17-rtl.png'); } .buildingsV3 img.g17.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g17-rtl.png'); } .buildingsV3 img.g17.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g17-rtl.png'); } .buildingsV3 img.g17.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g17-rtl.png'); } .buildingsV3 img.g17.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g17-rtl.png'); } .buildingsV3 img.g17.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g17-rtl.png'); } .buildingsV3 img.g17.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g17-rtl.png'); } .buildingsV3 img.g17.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g17-rtl.png'); } .buildingsV3 img.g18.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g18-rtl.png'); } .buildingsV3 img.g18.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g18-rtl.png'); } .buildingsV3 img.g18.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g18-rtl.png'); } .buildingsV3 img.g18.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g18-rtl.png'); } .buildingsV3 img.g18.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g18-rtl.png'); } .buildingsV3 img.g18.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g18-rtl.png'); } .buildingsV3 img.g18.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g18-rtl.png'); } .buildingsV3 img.g18.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g18-rtl.png'); } .buildingsV3 img.g18.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g18-rtl.png'); } .buildingsV3 img.g18.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g18-rtl.png'); } .buildingsV3 img.g19.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g19-rtl.png'); } .buildingsV3 img.g19.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g19-rtl.png'); } .buildingsV3 img.g19.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g19-rtl.png'); } .buildingsV3 img.g19.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g19-rtl.png'); } .buildingsV3 img.g19.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g19-rtl.png'); } .buildingsV3 img.g19.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g19-rtl.png'); } .buildingsV3 img.g19.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g19-rtl.png'); } .buildingsV3 img.g19.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g19-rtl.png'); } .buildingsV3 img.g19.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g19-rtl.png'); } .buildingsV3 img.g19.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g19-rtl.png'); } .buildingsV3 img.g20.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g20-rtl.png'); } .buildingsV3 img.g20.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g20-rtl.png'); } .buildingsV3 img.g20.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g20-rtl.png'); } .buildingsV3 img.g20.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g20-rtl.png'); } .buildingsV3 img.g20.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g20-rtl.png'); } .buildingsV3 img.g20.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g20-rtl.png'); } .buildingsV3 img.g20.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g20-rtl.png'); } .buildingsV3 img.g20.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g20-rtl.png'); } .buildingsV3 img.g20.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g20-rtl.png'); } .buildingsV3 img.g20.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g20-rtl.png'); } .buildingsV3 img.g21.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g21-rtl.png'); } .buildingsV3 img.g21.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g21-rtl.png'); } .buildingsV3 img.g21.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g21-rtl.png'); } .buildingsV3 img.g21.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g21-rtl.png'); } .buildingsV3 img.g21.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g21-rtl.png'); } .buildingsV3 img.g21.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g21-rtl.png'); } .buildingsV3 img.g21.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g21-rtl.png'); } .buildingsV3 img.g21.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g21-rtl.png'); } .buildingsV3 img.g21.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g21-rtl.png'); } .buildingsV3 img.g21.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g21-rtl.png'); } .buildingsV3 img.g22.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g22-rtl.png'); } .buildingsV3 img.g22.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g22-rtl.png'); } .buildingsV3 img.g22.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g22-rtl.png'); } .buildingsV3 img.g22.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g22-rtl.png'); } .buildingsV3 img.g22.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g22-rtl.png'); } .buildingsV3 img.g22.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g22-rtl.png'); } .buildingsV3 img.g22.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g22-rtl.png'); } .buildingsV3 img.g22.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g22-rtl.png'); } .buildingsV3 img.g22.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g22-rtl.png'); } .buildingsV3 img.g22.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g22-rtl.png'); } .buildingsV3 img.g23.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g23-rtl.png'); } .buildingsV3 img.g23.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g23-rtl.png'); } .buildingsV3 img.g23.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g23-rtl.png'); } .buildingsV3 img.g23.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g23-rtl.png'); } .buildingsV3 img.g23.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g23-rtl.png'); } .buildingsV3 img.g23.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g23-rtl.png'); } .buildingsV3 img.g23.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g23-rtl.png'); } .buildingsV3 img.g23.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g23-rtl.png'); } .buildingsV3 img.g23.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g23-rtl.png'); } .buildingsV3 img.g23.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g23-rtl.png'); } .buildingsV3 img.g24.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g24-rtl.png'); } .buildingsV3 img.g24.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g24-rtl.png'); } .buildingsV3 img.g24.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g24-rtl.png'); } .buildingsV3 img.g24.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g24-rtl.png'); } .buildingsV3 img.g24.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g24-rtl.png'); } .buildingsV3 img.g24.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g24-rtl.png'); } .buildingsV3 img.g24.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g24-rtl.png'); } .buildingsV3 img.g24.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g24-rtl.png'); } .buildingsV3 img.g24.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g24-rtl.png'); } .buildingsV3 img.g24.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g24-rtl.png'); } .buildingsV3 img.g25.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g25-rtl.png'); } .buildingsV3 img.g25.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g25-rtl.png'); } .buildingsV3 img.g25.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g25-rtl.png'); } .buildingsV3 img.g25.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g25-rtl.png'); } .buildingsV3 img.g25.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g25-rtl.png'); } .buildingsV3 img.g25.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g25-rtl.png'); } .buildingsV3 img.g25.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g25-rtl.png'); } .buildingsV3 img.g25.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g25-rtl.png'); } .buildingsV3 img.g25.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g25-rtl.png'); } .buildingsV3 img.g25.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g25-rtl.png'); } .buildingsV3 img.g26.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g26-rtl.png'); } .buildingsV3 img.g26.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g26-rtl.png'); } .buildingsV3 img.g26.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g26-rtl.png'); } .buildingsV3 img.g26.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g26-rtl.png'); } .buildingsV3 img.g26.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g26-rtl.png'); } .buildingsV3 img.g26.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g26-rtl.png'); } .buildingsV3 img.g26.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g26-rtl.png'); } .buildingsV3 img.g26.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g26-rtl.png'); } .buildingsV3 img.g26.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g26-rtl.png'); } .buildingsV3 img.g26.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g26-rtl.png'); } .buildingsV3 img.g27.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g27-rtl.png'); } .buildingsV3 img.g27.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g27-rtl.png'); } .buildingsV3 img.g27.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g27-rtl.png'); } .buildingsV3 img.g27.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g27-rtl.png'); } .buildingsV3 img.g27.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g27-rtl.png'); } .buildingsV3 img.g27.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g27-rtl.png'); } .buildingsV3 img.g27.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g27-rtl.png'); } .buildingsV3 img.g27.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g27-rtl.png'); } .buildingsV3 img.g27.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g27-rtl.png'); } .buildingsV3 img.g27.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g27-rtl.png'); } .buildingsV3 img.g28.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g28-rtl.png'); } .buildingsV3 img.g28.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g28-rtl.png'); } .buildingsV3 img.g28.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g28-rtl.png'); } .buildingsV3 img.g28.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g28-rtl.png'); } .buildingsV3 img.g28.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g28-rtl.png'); } .buildingsV3 img.g28.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g28-rtl.png'); } .buildingsV3 img.g28.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g28-rtl.png'); } .buildingsV3 img.g28.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g28-rtl.png'); } .buildingsV3 img.g28.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g28-rtl.png'); } .buildingsV3 img.g28.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g28-rtl.png'); } .buildingsV3 img.g29.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g29-rtl.png'); } .buildingsV3 img.g29.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g29-rtl.png'); } .buildingsV3 img.g29.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g29-rtl.png'); } .buildingsV3 img.g29.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g29-rtl.png'); } .buildingsV3 img.g29.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g29-rtl.png'); } .buildingsV3 img.g29.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g29-rtl.png'); } .buildingsV3 img.g29.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g29-rtl.png'); } .buildingsV3 img.g29.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g29-rtl.png'); } .buildingsV3 img.g29.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g29-rtl.png'); } .buildingsV3 img.g29.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g29-rtl.png'); } .buildingsV3 img.g30.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g30-rtl.png'); } .buildingsV3 img.g30.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g30-rtl.png'); } .buildingsV3 img.g30.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g30-rtl.png'); } .buildingsV3 img.g30.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g30-rtl.png'); } .buildingsV3 img.g30.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g30-rtl.png'); } .buildingsV3 img.g30.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g30-rtl.png'); } .buildingsV3 img.g30.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g30-rtl.png'); } .buildingsV3 img.g30.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g30-rtl.png'); } .buildingsV3 img.g30.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g30-rtl.png'); } .buildingsV3 img.g30.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g30-rtl.png'); } .buildingsV3 img.g34.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g34-rtl.png'); } .buildingsV3 img.g34.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g34-rtl.png'); } .buildingsV3 img.g34.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g34-rtl.png'); } .buildingsV3 img.g34.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g34-rtl.png'); } .buildingsV3 img.g34.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g34-rtl.png'); } .buildingsV3 img.g34.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g34-rtl.png'); } .buildingsV3 img.g34.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g34-rtl.png'); } .buildingsV3 img.g34.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g34-rtl.png'); } .buildingsV3 img.g34.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g34-rtl.png'); } .buildingsV3 img.g34.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g34-rtl.png'); } .buildingsV3 img.g37.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g37-rtl.png'); } .buildingsV3 img.g37.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g37-rtl.png'); } .buildingsV3 img.g37.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g37-rtl.png'); } .buildingsV3 img.g37.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g37-rtl.png'); } .buildingsV3 img.g37.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g37-rtl.png'); } .buildingsV3 img.g37.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g37-rtl.png'); } .buildingsV3 img.g37.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g37-rtl.png'); } .buildingsV3 img.g37.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g37-rtl.png'); } .buildingsV3 img.g37.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g37-rtl.png'); } .buildingsV3 img.g37.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g37-rtl.png'); } .buildingsV3 img.g38.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g38-rtl.png'); } .buildingsV3 img.g38.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g38-rtl.png'); } .buildingsV3 img.g38.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g38-rtl.png'); } .buildingsV3 img.g38.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g38-rtl.png'); } .buildingsV3 img.g38.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g38-rtl.png'); } .buildingsV3 img.g38.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g38-rtl.png'); } .buildingsV3 img.g38.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g38-rtl.png'); } .buildingsV3 img.g38.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g38-rtl.png'); } .buildingsV3 img.g38.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g38-rtl.png'); } .buildingsV3 img.g38.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g38-rtl.png'); } .buildingsV3 img.g39.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g39-rtl.png'); } .buildingsV3 img.g39.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g39-rtl.png'); } .buildingsV3 img.g39.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g39-rtl.png'); } .buildingsV3 img.g39.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g39-rtl.png'); } .buildingsV3 img.g39.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g39-rtl.png'); } .buildingsV3 img.g39.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g39-rtl.png'); } .buildingsV3 img.g39.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g39-rtl.png'); } .buildingsV3 img.g39.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g39-rtl.png'); } .buildingsV3 img.g39.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g39-rtl.png'); } .buildingsV3 img.g39.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g39-rtl.png'); } .buildingsV3 img.g46.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g46-rtl.png'); } .buildingsV3 img.g46.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g46-rtl.png'); } .buildingsV3 img.g46.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g46-rtl.png'); } .buildingsV3 img.g46.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g46-rtl.png'); } .buildingsV3 img.g46.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g46-rtl.png'); } .buildingsV3 img.g46.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g46-rtl.png'); } .buildingsV3 img.g46.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g46-rtl.png'); } .buildingsV3 img.g46.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g46-rtl.png'); } .buildingsV3 img.g46.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g46-rtl.png'); } .buildingsV3 img.g46.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g46-rtl.png'); } .buildingsV3 img.g41.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g41-rtl.png'); } .buildingsV3 img.g41.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g41-rtl.png'); } .buildingsV3 img.g35.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g35-rtl.png'); } .buildingsV3 img.g35.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g35-rtl.png'); } .buildingsV3 img.g36.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g36-rtl.png'); } .buildingsV3 img.g36.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g36-rtl.png'); } .buildingsV3 img.g45.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g45-rtl.png'); } .buildingsV3 img.g45.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g45-rtl.png'); } .buildingsV3 img.g44.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g44-rtl.png'); } .buildingsV3 img.g44.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g44-rtl.png'); } .buildingsV3 img.g16.roman:not(.big) { width: 125px; height: 160px; } .buildingsV3 img.g16.teuton:not(.big) { width: 125px; height: 160px; } .buildingsV3 img.g16.gaul:not(.big) { width: 125px; height: 160px; } .buildingsV3 img.g16.egyptian:not(.big) { width: 125px; height: 160px; } .buildingsV3 img.g16.hun:not(.big) { width: 125px; height: 160px; } .buildingsV3 img.g31Top { background-image: url('../../img/g/buildings2019/roman/g31Top-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g31Bottom { background-image: url('../../img/g/buildings2019/roman/g31Bottom-rtl.png'); width: 794px; height: 540px; position:inherit; } .buildingsV3 img.g31.big { background-image: url('../../img/g/buildings2019/roman/big/g31-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g32Top { background-image: url('../../img/g/buildings2019/teuton/g32Top-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g32Bottom { background-image: url('../../img/g/buildings2019/teuton/g32Bottom-rtl.png'); width: 794px; height: 540px; position:inherit; } .buildingsV3 img.g32.big { background-image: url('../../img/g/buildings2019/teuton/big/g32-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g33Top { background-image: url('../../img/g/buildings2019/gaul/g33Top-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g33Bottom { background-image: url('../../img/g/buildings2019/gaul/g33Bottom-rtl.png'); width: 794px; height: 540px; position:inherit; } .buildingsV3 img.g33.big { background-image: url('../../img/g/buildings2019/gaul/big/g33-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g42Top { background-image: url('../../img/g/buildings2019/egyptian/g42Top-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g42Bottom { background-image: url('../../img/g/buildings2019/egyptian/g42Bottom-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g42.big { background-image: url('../../img/g/buildings2019/egyptian/big/g42-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g43Top { background-image: url('../../img/g/buildings2019/hun/g43Top-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g43Bottom { background-image: url('../../img/g/buildings2019/hun/g43Bottom-rtl.png'); width: 794px; height: 540px; } .buildingsV3 img.g43.big { background-image: url('../../img/g/buildings2019/hun/big/g43-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g40.roman:not(.big) { background-image: url('../../img/g/buildings2019/roman/g40_0-rtl.png'); width: 299px; height: 440px; } .buildingsV3 img.g40.roman:not(.big).g40_1 { background-image: url('../../img/g/buildings2019/roman/g40_1-rtl.png'); } .buildingsV3 img.g40.roman:not(.big).g40_2 { background-image: url('../../img/g/buildings2019/roman/g40_2-rtl.png'); } .buildingsV3 img.g40.roman:not(.big).g40_3 { background-image: url('../../img/g/buildings2019/roman/g40_3-rtl.png'); } .buildingsV3 img.g40.roman:not(.big).g40_4 { background-image: url('../../img/g/buildings2019/roman/g40_4-rtl.png'); } .buildingsV3 img.g40.roman:not(.big).g40_5 { background-image: url('../../img/g/buildings2019/roman/g40_5-rtl.png'); } .buildingsV3 img.g40.roman.big { background-image: url('../../img/g/buildings2019/roman/big/g40-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g40.teuton:not(.big) { background-image: url('../../img/g/buildings2019/teuton/g40_0-rtl.png'); width: 299px; height: 440px; } .buildingsV3 img.g40.teuton:not(.big).g40_1 { background-image: url('../../img/g/buildings2019/teuton/g40_1-rtl.png'); } .buildingsV3 img.g40.teuton:not(.big).g40_2 { background-image: url('../../img/g/buildings2019/teuton/g40_2-rtl.png'); } .buildingsV3 img.g40.teuton:not(.big).g40_3 { background-image: url('../../img/g/buildings2019/teuton/g40_3-rtl.png'); } .buildingsV3 img.g40.teuton:not(.big).g40_4 { background-image: url('../../img/g/buildings2019/teuton/g40_4-rtl.png'); } .buildingsV3 img.g40.teuton:not(.big).g40_5 { background-image: url('../../img/g/buildings2019/teuton/g40_5-rtl.png'); } .buildingsV3 img.g40.teuton.big { background-image: url('../../img/g/buildings2019/teuton/big/g40-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g40.gaul:not(.big) { background-image: url('../../img/g/buildings2019/gaul/g40_0-rtl.png'); width: 299px; height: 440px; } .buildingsV3 img.g40.gaul:not(.big).g40_1 { background-image: url('../../img/g/buildings2019/gaul/g40_1-rtl.png'); } .buildingsV3 img.g40.gaul:not(.big).g40_2 { background-image: url('../../img/g/buildings2019/gaul/g40_2-rtl.png'); } .buildingsV3 img.g40.gaul:not(.big).g40_3 { background-image: url('../../img/g/buildings2019/gaul/g40_3-rtl.png'); } .buildingsV3 img.g40.gaul:not(.big).g40_4 { background-image: url('../../img/g/buildings2019/gaul/g40_4-rtl.png'); } .buildingsV3 img.g40.gaul:not(.big).g40_5 { background-image: url('../../img/g/buildings2019/gaul/g40_5-rtl.png'); } .buildingsV3 img.g40.gaul.big { background-image: url('../../img/g/buildings2019/gaul/big/g40-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g40.egyptian:not(.big) { background-image: url('../../img/g/buildings2019/egyptian/g40_0-rtl.png'); width: 299px; height: 440px; } .buildingsV3 img.g40.egyptian:not(.big).g40_1 { background-image: url('../../img/g/buildings2019/egyptian/g40_1-rtl.png'); } .buildingsV3 img.g40.egyptian:not(.big).g40_2 { background-image: url('../../img/g/buildings2019/egyptian/g40_2-rtl.png'); } .buildingsV3 img.g40.egyptian:not(.big).g40_3 { background-image: url('../../img/g/buildings2019/egyptian/g40_3-rtl.png'); } .buildingsV3 img.g40.egyptian:not(.big).g40_4 { background-image: url('../../img/g/buildings2019/egyptian/g40_4-rtl.png'); } .buildingsV3 img.g40.egyptian:not(.big).g40_5 { background-image: url('../../img/g/buildings2019/egyptian/g40_5-rtl.png'); } .buildingsV3 img.g40.egyptian.big { background-image: url('../../img/g/buildings2019/egyptian/big/g40-rtl.png'); width: 184px; height: 179px; } .buildingsV3 img.g40.hun:not(.big) { background-image: url('../../img/g/buildings2019/hun/g40_0-rtl.png'); width: 299px; height: 440px; } .buildingsV3 img.g40.hun:not(.big).g40_1 { background-image: url('../../img/g/buildings2019/hun/g40_1-rtl.png'); } .buildingsV3 img.g40.hun:not(.big).g40_2 { background-image: url('../../img/g/buildings2019/hun/g40_2-rtl.png'); } .buildingsV3 img.g40.hun:not(.big).g40_3 { background-image: url('../../img/g/buildings2019/hun/g40_3-rtl.png'); } .buildingsV3 img.g40.hun:not(.big).g40_4 { background-image: url('../../img/g/buildings2019/hun/g40_4-rtl.png'); } .buildingsV3 img.g40.hun:not(.big).g40_5 { background-image: url('../../img/g/buildings2019/hun/g40_5-rtl.png'); } .buildingsV3 img.g40.hun.big { background-image: url('../../img/g/buildings2019/hun/big/g40-rtl.png'); width: 184px; height: 179px; } .buildingsV3 .g1.big { background-image: url('../../img/g/buildings2019/default/big/g1-rtl.png'); width: 184px; height: 179px; } .buildingsV3 .g2.big { background-image: url('../../img/g/buildings2019/default/big/g2-rtl.png'); width: 184px; height: 179px; } .buildingsV3 .g3.big { background-image: url('../../img/g/buildings2019/default/big/g3-rtl.png'); width: 184px; height: 179px; } .buildingsV3 .g4.big { background-image: url('../../img/g/buildings2019/default/big/g4-rtl.png'); width: 184px; height: 179px; } .buildingsV3 .gebIcon { background-image: url('../../img/g/buildings2019/default/icon/gebIcon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g1Icon { background-image: url('../../img/g/buildings2019/default/icon/g1Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g2Icon { background-image: url('../../img/g/buildings2019/default/icon/g2Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g3Icon { background-image: url('../../img/g/buildings2019/default/icon/g3Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g4Icon { background-image: url('../../img/g/buildings2019/default/icon/g4Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g5Icon { background-image: url('../../img/g/buildings2019/default/icon/g5Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g6Icon { background-image: url('../../img/g/buildings2019/default/icon/g6Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g7Icon { background-image: url('../../img/g/buildings2019/default/icon/g7Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g8Icon { background-image: url('../../img/g/buildings2019/default/icon/g8Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g9Icon { background-image: url('../../img/g/buildings2019/default/icon/g9Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g10Icon { background-image: url('../../img/g/buildings2019/default/icon/g10Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g11Icon { background-image: url('../../img/g/buildings2019/default/icon/g11Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g13Icon { background-image: url('../../img/g/buildings2019/default/icon/g13Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g14Icon { background-image: url('../../img/g/buildings2019/default/icon/g14Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g15Icon { background-image: url('../../img/g/buildings2019/default/icon/g15Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g16Icon { background-image: url('../../img/g/buildings2019/default/icon/g16Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g17Icon { background-image: url('../../img/g/buildings2019/default/icon/g17Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g18Icon { background-image: url('../../img/g/buildings2019/default/icon/g18Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g19Icon { background-image: url('../../img/g/buildings2019/default/icon/g19Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g20Icon { background-image: url('../../img/g/buildings2019/default/icon/g20Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g21Icon { background-image: url('../../img/g/buildings2019/default/icon/g21Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g22Icon { background-image: url('../../img/g/buildings2019/default/icon/g22Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g23Icon { background-image: url('../../img/g/buildings2019/default/icon/g23Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g24Icon { background-image: url('../../img/g/buildings2019/default/icon/g24Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g25Icon { background-image: url('../../img/g/buildings2019/default/icon/g25Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g26Icon { background-image: url('../../img/g/buildings2019/default/icon/g26Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g27Icon { background-image: url('../../img/g/buildings2019/default/icon/g27Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g28Icon { background-image: url('../../img/g/buildings2019/default/icon/g28Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g29Icon { background-image: url('../../img/g/buildings2019/default/icon/g29Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g30Icon { background-image: url('../../img/g/buildings2019/default/icon/g30Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g31Icon { background-image: url('../../img/g/buildings2019/default/icon/g31Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g32Icon { background-image: url('../../img/g/buildings2019/default/icon/g32Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g33Icon { background-image: url('../../img/g/buildings2019/default/icon/g33Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g34Icon { background-image: url('../../img/g/buildings2019/default/icon/g34Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g35Icon { background-image: url('../../img/g/buildings2019/default/icon/g35Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g36Icon { background-image: url('../../img/g/buildings2019/default/icon/g36Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g37Icon { background-image: url('../../img/g/buildings2019/default/icon/g37Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g38Icon { background-image: url('../../img/g/buildings2019/default/icon/g38Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g39Icon { background-image: url('../../img/g/buildings2019/default/icon/g39Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g40Icon { background-image: url('../../img/g/buildings2019/default/icon/g40Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g41Icon { background-image: url('../../img/g/buildings2019/default/icon/g41Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g42Icon { background-image: url('../../img/g/buildings2019/default/icon/g42Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g43Icon { background-image: url('../../img/g/buildings2019/default/icon/g43Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g44Icon { background-image: url('../../img/g/buildings2019/default/icon/g44Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g45Icon { background-image: url('../../img/g/buildings2019/default/icon/g45Icon.gif'); width: 16px; height: 16px; } .buildingsV3 .gebIcon.g46Icon { background-image: url('../../img/g/defaultBuildings/icon/g46Icon.png'); width: 16px; height: 16px; } .buildingsV3 .buildingSlot { width: 120px; height: 120px; position: absolute; top: 0; right: 0; /*pointer-events: none; user-select: none; /* building image */ /* level indicator */ /* building shapes */ } .buildingsV3 .buildingSlot.a19 { right: 80px; top: 75px; z-index: 19; } .buildingsV3 .buildingSlot.a20 { right: 174px; top: 31px; z-index: 17; } .buildingsV3 .buildingSlot.a21 { right: 137px; top: 135px; z-index: 25; } .buildingsV3 .buildingSlot.a22 { right: 404px; top: 30px; z-index: 17; } .buildingsV3 .buildingSlot.a23 { right: 490px; top: 85px; z-index: 20; } .buildingsV3 .buildingSlot.a24 { right: 22px; top: 128px; z-index: 23; } .buildingsV3 .buildingSlot.a25 { right: 537px; top: 145px; z-index: 24; } .buildingsV3 .buildingSlot.a26 { right: 285px; top: 16px; z-index: 15; } .buildingsV3 .buildingSlot.a27 { right: 44px; top: 278px; z-index: 32; } .buildingsV3 .buildingSlot.a28 { right: 15px; top: 210px; z-index: 27; } .buildingsV3 .buildingSlot.a29 { right: 148px; top: 214px; z-index: 27; } .buildingsV3 .buildingSlot.a30 { right: 350px; top: 79px; z-index: 21; } .buildingsV3 .buildingSlot.a30.roman { z-index: 30; } .buildingsV3 .buildingSlot.a31 { right: 295px; top: 136px; z-index: 23; } .buildingsV3 .buildingSlot.a35 { right: 232px; top: 268px; z-index: 32; } .buildingsV3 .buildingSlot.a35n { right: 181px; top: 281px; z-index: 32; } .buildingsV3 .buildingSlot.a33 { right: 538px; top: 220px; z-index: 32; } .buildingsV3 .buildingSlot.a34 { right: 138px; top: 330px; z-index: 36; } .buildingsV3 .buildingSlot.a32 { right: 369px; top: 268px; z-index: 29; /* world wonder building slot */ } .buildingsV3 .buildingSlot.a32.g40 { width: 299px; height: 440px; top: 0; right: 220px; } .buildingsV3 .buildingSlot.a36 { right: 470px; top: 301px; z-index: 33; } .buildingsV3 .buildingSlot.a37 { right: 250px; top: 349px; z-index: 39; } .buildingsV3 .buildingSlot.a38 { right: 368px; top: 336px; z-index: 38; } .buildingsV3 .buildingSlot.a39 { width: 125px; height: 160px; right: 431px; top: 160px; z-index: 28; } .buildingsV3 .buildingSlot.a40 { width: 794px; height: 540px; z-index: 1; right: -40px; top: -10px; /* empty wall building slot */ } .buildingsV3 .buildingSlot.a40.Bottom { z-index: 40; } .buildingsV3 .buildingSlot.a40.g0 { z-index: 0; } .buildingsV3 .buildingSlot.a40 .level { pointer-events: none; } .buildingsV3 .buildingSlot.a40.top { z-index: 0; } .buildingsV3 .buildingSlot img { z-index: 0; /*position: absolute;*/ } .buildingsV3 .buildingSlot .level { z-index: 40; position: absolute; right: calc(50% - 12px); top: calc(50% - 11px); pointer-events: auto; line-height: 25px; cursor: pointer; /* wall level indicator */ /* world wonder level indicator */ } .buildingsV3 .buildingSlot .level:hover ~ svg .hoverShape path { fill: rgba(255, 255, 255, 0.2); } .buildingsV3 .buildingSlot .level:active ~ svg .hoverShape path { fill: rgba(255, 255, 255, 0.35); } .buildingsV3 .buildingSlot .level.aid40 { top: auto; right: calc(50% - 34px); bottom: 8%; } .buildingsV3 .buildingSlot .level.aid40.teuton { bottom: 7%; } .buildingsV3 .buildingSlot .level.ww { top: auto; bottom: 14%; } .buildingsV3 .buildingSlot .level.ww.roman { right: calc(50% - 26px); bottom: calc(13% - 2px); } .buildingsV3 .buildingSlot .level.ww.teuton { right: calc(50% - 16px); bottom: 14%; } .buildingsV3 .buildingSlot svg.buildingShape { position: absolute; top: 0; right: 0; pointer-events: none; z-index: 1; /* not constructed rally point shape should always be visible */ } .buildingsV3 .buildingSlot svg.buildingShape path { fill: transparent; outline: none; cursor: pointer; pointer-events: auto; } .buildingsV3 .buildingSlot svg.buildingShape .clickShape:hover + .hoverShape path { fill: rgba(255, 255, 255, 0.2); } .buildingsV3 .buildingSlot svg.buildingShape .clickShape:active + .hoverShape path { fill: rgba(255, 255, 255, 0.35); -webkit-tap-highlight-color: transparent; } .buildingsV3 .buildingSlot svg.buildingShape .hoverShape path { transition-duration: 150ms; transition-timing-function: ease-in; } .buildingsV3 .buildingSlot svg.buildingShape .hoverShape:hover path { fill: rgba(255, 255, 255, 0.2); } .buildingsV3 .buildingSlot svg.buildingShape .hoverShape:active path { fill: rgba(255, 255, 255, 0.35); -webkit-tap-highlight-color: transparent; } .rtl.buildingsV3 .buildingSlot svg.buildingShape:not(.iso) { transform: scale(-1, 1); } .buildingsV3 .buildingSlot svg.buildingShape.hover > .hoverShape path { fill: rgba(255, 255, 255, 0.2); } .buildingsV3 .buildingSlot svg.buildingShape.active > .hoverShape path { fill: rgba(255, 255, 255, 0.35); -webkit-tap-highlight-color: transparent; } .buildingsV3 .buildingSlot svg.buildingShape.g16e path { fill: rgba(174, 188, 144, 0.35); } .buildingsV3 #sysmsg .ww { float: left; } .buildingsV3 #sysmsg .ww.roman { background-image: url('../../img/g/buildings2019/roman/g40_5-rtl.png'); width: 299px; height: 440px; } .buildingsV3 #sysmsg .ww.teuton { background-image: url('../../img/g/buildings2019/teuton/g40_5-rtl.png'); width: 299px; height: 440px; } .buildingsV3 #sysmsg .ww.gaul { background-image: url('../../img/g/buildings2019/gaul/g40_5-rtl.png'); width: 299px; height: 440px; } .buildingsV3 #sysmsg .ww.egyptian { background-image: url('../../img/g/buildings2019/egyptian/g40_5-rtl.png'); width: 299px; height: 440px; } .buildingsV3 #sysmsg .ww.hun { background-image: url('../../img/g/buildings2019/hun/g40_5-rtl.png'); width: 299px; height: 440px; } .buildingsV3 #sysmsg .ww.roman, .buildingsV3 #sysmsg .ww.teuton { background-position: center; width: 250px; } .buildingsV3 #sysmsg .ww.gaul { background-position: center; width: 275px; } .buildingsV3 #sysmsg .ww.egyptian { background-position: left; width: 285px; } .buildingsV3 #sysmsg .ww.hun { background-position: left; width: 270px; } /* Omid Hover Effect */ .buildingSlot { margin-top:-30px; pointer-events: all; } .buildingsV3 .buildingSlot:hover { } /* .buildingsV3 .buildingSlot:hover, */ .buildingsV3 .buildingSlot .hover{ /* filter:progid:DXImageTransform.Microsoft.Alpha(opacity=90); -moz-opacity: 0.9; opacity: 0.9; */ -webkit-filter: drop-shadow(1px 1px 4px ivory) drop-shadow(-1px -1px 4px ivory); filter:drop-shadow(-1px -1px 4px ivory) drop-shadow(1px 1px 4px ivory); transition-duration: 250ms; } /* Village */ /********** IMAGES ********* */ /********** GRID ********* */ /********** INLINE ICONS ********* */ /********** FONT ********* */ /********** MOBILE ********* */ /********** COLORBLIND ********* */ /********** DIRECTIONS ********* */ /********** TEXT ********* */ /*** MEASUREMENT ** */ /*** MOBILE ** */ /*** COLOR CODES ** */ /*** COLOR USAGE ** */ /*** DEFAULT STYLES ** */ /*** TRIBES ** */ /*** BUILDINGS ** */ /*** RESOURCES ** */ div.village1 div.buildingList, div.village2 div.buildingList { position: relative; float: right; width: 405px; z-index: 2; } div.village1 div.buildingList div.boxes-contents.cf, div.village2 div.buildingList div.boxes-contents.cf { padding: 11px; } div.village1 div.buildingList h5, div.village2 div.buildingList h5 { font-weight: normal; } div.village1 div.buildingList h5 span, div.village2 div.buildingList h5 span { font-size: 11px; } .rtl div.village1 div.buildingList h5 span, .rtl div.village2 div.buildingList h5 span { font-size: 12px; } div.village1 div.buildingList h5 img, div.village2 div.buildingList h5 img { position: relative; top: 2px; } div.village1 div.buildingList div.finishNow, div.village2 div.buildingList div.finishNow { position: absolute; left: 8px; top: 8px; } div.village1 div.buildingList div.finishNow button, div.village2 div.buildingList div.finishNow button { text-align: left; } div.village1 div.buildingList ul, div.village2 div.buildingList ul { padding: 0; margin: 8px 0 15px; } div.village1 div.buildingList ul li, div.village2 div.buildingList ul li { list-style: none; margin-bottom: 5px; } div.village1 div.buildingList a, div.village2 div.buildingList a { float: right; padding: 4px; } div.village1 div.buildingList div.name, div.village2 div.buildingList div.name { float: right; } div.village1 div.buildingList div.name .lvl, div.village2 div.buildingList div.name .lvl { font-size: 12px; color: #F88C1F; font-weight: bold; } .rtl div.village1 div.buildingList div.name .lvl, .rtl div.village2 div.buildingList div.name .lvl { font-size: 13px; } div.village1 div.buildingList div.buildDuration, div.village1 div.buildingList div.buildStart, div.village2 div.buildingList div.buildDuration, div.village2 div.buildingList div.buildStart { float: left; font-size: 11px; text-align: left; color: #6b6b6b; } .rtl div.village1 div.buildingList div.buildDuration, .rtl div.village1 div.buildingList div.buildStart, .rtl div.village2 div.buildingList div.buildDuration, .rtl div.village2 div.buildingList div.buildStart { font-size: 12px; } /* answers button */ .village1 a.contentTitleButton#answersButton, .village2 a.contentTitleButton#answersButton { width: 32px; height: 32px; border-radius: 50%; } .village1 a.contentTitleButton#answersButton:before, .village2 a.contentTitleButton#answersButton:before { border-radius: 50%; border: 1px solid #34220d; position: absolute; top: 2px; left: 2px; bottom: 2px; right: 2px; box-shadow: inset 0 -2px 1px 1px #63a90b, inset 2px -1px 1px 0 #578b11, inset -2px -1px 1px 0 #578b11, inset 0 2px 1px 1px #cfdcbe; } .village1 a.contentTitleButton#answersButton:hover:before, .village2 a.contentTitleButton#answersButton:hover:before { box-shadow: inset 0 -2px 1px 1px #71bb13, inset 2px -1px 1px 0 #6da71d, inset -2px -1px 1px 0 #6da71d, inset 0 2px 1px 1px #d4e2c1; } .village1 a.contentTitleButton#answersButton:active:before, .village2 a.contentTitleButton#answersButton:active:before { box-shadow: inset 0 -2px 1px 1px #88c72d, inset 2px -1px 1px 0 #8dc03a, inset -2px -1px 1px 0 #8dc03a, inset 0 2px 1px 1px #abd171; } .village1 a.contentTitleButton#answersButton.disabled:before, .village1 a.contentTitleButton#answersButton:disabled:before, .village2 a.contentTitleButton#answersButton.disabled:before, .village2 a.contentTitleButton#answersButton:disabled:before { box-shadow: inset 0 -1px 1px 1px #90b65e, inset 0 1px 1px 1px #b3c19d; } /* resource levels */ /* simple levels */ div.village1 .level:not(.colorLayer), div.village2 div#village_map .buildingSlot .level { position: absolute; /* Ungleich des Bildes, da die Zahlen mit ungerader Breite nicht mittig werden */ width: 24px; height: 23px; font-size: 14px; font-family: Arial, Helvetica, Verdana, sans-serif; text-align: center; background-image: url('../../img/g/circle.png'); background-position: 1px 0; } .rtl div.village1 .level:not(.colorLayer), .rtl div.village2 div#village_map .buildingSlot .level { font-size: 15px; } div.village2 div#village_map .buildingSlot .level:not(.colorLayer).maxLevel.ww { letter-spacing: -2px; } /* colored levels */ div.village1 .colorLayer, div.village2 div#village_map .buildingSlot div.colorLayer { position: absolute; border: 1px solid #333333; background-image: linear-gradient(to top, #606060, #c8c8c8 100%); margin: 1px; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 2px 0 white; } div.village1 .colorLayer.notNow, div.village2 div#village_map .buildingSlot .colorLayer.notNow { border: 1px solid #988b42; background-color: #fdf15f; background-image: -moz-linear-gradient(bottom, #988b42, #fdf15f 100%); background-image: -webkit-linear-gradient(bottom, #988b42, #fdf15f 100%); background-image: linear-gradient(to top, #988b42, #fdf15f 100%); } div.village1 .colorLayer.good, div.village2 div#village_map .buildingSlot .colorLayer.good { border: 1px solid #506d00; background-color: #c7e94f; background-image: -moz-linear-gradient(bottom, #7da100, #c7e94f 100%); background-image: -webkit-linear-gradient(bottom, #7da100, #c7e94f 100%); background-image: linear-gradient(to top, #7da100, #c7e94f 100%); } div.village1 .colorLayer.maxLevel, div.village2 div#village_map .buildingSlot .colorLayer.maxLevel { border: 1px solid #0d648e; background-color: #b1e4ff; background-image: -moz-linear-gradient(bottom, #0d648e, #b1e4ff 100%); background-image: -webkit-linear-gradient(bottom, #0d648e, #b1e4ff 100%); background-image: linear-gradient(to top, #0d648e, #b1e4ff 100%); } div.village1 .colorLayer .labelLayer, div.village2 div#village_map .buildingSlot .colorLayer .labelLayer { position: relative; top: 4px; right: 4px; width: 18px; height: 18px; background-color: white; border-radius: 50%; line-height: 17px; font-size: 11px; font-family: Verdana, sans-serif; text-align: center; } .rtl div.village1 .colorLayer .labelLayer, .rtl div.village2 div#village_map .buildingSlot .colorLayer .labelLayer { font-size: 12px; } div.village1 .colorLayer.underConstruction .labelLayer, div.village2 div#village_map .buildingSlot .colorLayer.underConstruction .labelLayer { background-color: #ffa84f; } div.village2 div#village_map .buildingSlot div.colorLayer.maxLevel.ww { width: 32px; height: 32px; margin-right: -2px; } div.village2 div#village_map .buildingSlot div.colorLayer.maxLevel.ww .labelLayer { width: 24px; height: 24px; line-height: 23px; } .village1 .tip .level, .village2 .tip .level { font-weight: normal; } .village1 .tip .showCosts, .village2 .tip .showCosts { line-height: 16px; } .village1 .tip .showCosts .resources, .village2 .tip .showCosts .resources { margin-bottom: 0; } table#warehouse thead tr td { cursor: pointer; } .buttonsWrapper button.layoutButton { margin-right:10px !important; } .gold button.layoutButton .buttonFramed div.button-container img, button.layoutButton.buttonFramed div.button-container img{ height: 25px; top:0px; -webkit-filter: drop-shadow(-1px -1px 4px ivory) drop-shadow(1px 1px 4px ivory); } /* Master */ /********** IMAGES ********* */ /********** GRID ********* */ /********** INLINE ICONS ********* */ /********** FONT ********* */ /********** MOBILE ********* */ /********** COLORBLIND ********* */ /********** DIRECTIONS ********* */ /********** TEXT ********* */ /*** MEASUREMENT ** */ /*** MOBILE ** */ /*** COLOR CODES ** */ /*** COLOR USAGE ** */ /*** DEFAULT STYLES ** */ /*** TRIBES ** */ /*** BUILDINGS ** */ /*** RESOURCES ** */ .sidebar #sidebarBoxQuestmaster .header #questmasterButton { margin-right: calc(50% - 102px); margin-bottom: -14px; height: 135px; width: 204px; overflow: hidden; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton img.mentor, .sidebar #sidebarBoxQuestmaster .header #questmasterButton img.border, .sidebar #sidebarBoxQuestmaster .header #questmasterButton img.animation { height: 135px; width: 204px; display: block; position: absolute; top: 0; right: 0; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton img.mentor { background-position: right top; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton img.border { background-position: right bottom; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton:hover img.mentor { background-position: right center; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_1 img.border, .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_1 img.mentor { background-image: url('../../img/layout/mentorRoman-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_1 img.animation { animation: questMasterAnimation 5s infinite step-end; background-image: url('../../img/layout/questmasterAnimationRoman-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_2 img.border, .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_2 img.mentor { background-image: url('../../img/layout/mentorTeuton-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_2 img.animation { animation: questMasterAnimation 5s infinite step-end; background-image: url('../../img/layout/questmasterAnimationTeuton-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_3 img.border, .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_3 img.mentor { background-image: url('../../img/layout/mentorGaul-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_3 img.animation { animation: questMasterAnimation 5s infinite step-end; background-image: url('../../img/layout/questmasterAnimationGaul-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_6 img.border, .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_6 img.mentor { background-image: url('../../img/layout/mentorEgyptian-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_6 img.animation { animation: questMasterAnimation 5s infinite step-end; background-image: url('../../img/layout/questmasterAnimationEgyptian-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_7 img.border, .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_7 img.mentor { background-image: url('../../img/layout/mentorHun-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_7 img.animation { animation: questMasterAnimation 5s infinite step-end; background-image: url('../../img/layout/questmasterAnimationHun-rtl.png'); } @keyframes questMasterAnimation { 0.6% { background-position: 0 0px; } 1.2% { background-position: 0 -135px; } 1.8% { background-position: 0 -270px; } 2.4% { background-position: 0 -405px; } 3% { background-position: 0 -540px; } 3.6% { background-position: 0 -675px; } 4.2% { background-position: 0 -810px; } 4.8% { background-position: 0 -945px; } 5.4% { background-position: 0 -1080px; } 6% { background-position: 0 -1215px; } 6.6% { background-position: 0 -1350px; } 7.2% { background-position: 0 -1485px; } 7.8% { background-position: 0 -1620px; } 8.4% { background-position: 0 -1755px; } 9% { background-position: 0 -1890px; } 9.6% { background-position: 0 -2025px; } } .sidebar #sidebarBoxQuestmaster .header #questmasterButton .bigSpeechBubble { position: absolute; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton .bigSpeechBubble.newQuestSpeechBubble img { background-image: url('../../img/layout/icons/exclamationMark-rtl.png'); } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_1 .bigSpeechBubble { right: 27px; top: 53px; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_2 .bigSpeechBubble { right: 33px; top: 62px; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_3 .bigSpeechBubble { right: 20px; top: 65px; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_6 .bigSpeechBubble { right: 37px; top: 61px; } .sidebar #sidebarBoxQuestmaster .header #questmasterButton.vid_7 .bigSpeechBubble { right: 40px; top: 70px; } .gecko .sidebar #sidebarBoxQuestmaster .content ul#mentorTaskList li { height: 21px; } .sidebar #sidebarBoxQuestmaster .content ul#mentorTaskList li a { display: -ms-inline-grid; display: inline-grid; -ms-grid-columns: 15px 235px; grid-template-columns: 15px 235px; -ms-grid-rows: 16px; grid-template-rows: 16px; align-items: center; } .sidebar #sidebarBoxQuestmaster .content ul#mentorTaskList li a > * { -ms-grid-row: 1; grid-row-start: 1; -ms-grid-row-align: center; align-self: center; } .sidebar #sidebarBoxQuestmaster .content ul#mentorTaskList li a svg.check { width: 12px; height: 12px; -ms-grid-column: 1; grid-column-start: 1; fill: #2a8d2f; } .sidebar #sidebarBoxQuestmaster .content ul#mentorTaskList li a .description { -ms-grid-column: 2; grid-column-start: 2; display: inline-block; } /* Omid Building View */ /********** IMAGES ********* */ /********** GRID ********* */ /********** INLINE ICONS ********* */ /********** FONT ********* */ /********** MOBILE ********* */ /********** COLORBLIND ********* */ /********** DIRECTIONS ********* */ /********** TEXT ********* */ /*** MEASUREMENT ** */ /*** MOBILE ** */ /*** COLOR CODES ** */ /*** COLOR USAGE ** */ /*** DEFAULT STYLES ** */ /*** TRIBES ** */ /*** BUILDINGS ** */ /*** RESOURCES ** */ .buildingsV3 #build .build_logo img { border: 1px solid #e0bf4e; outline: 1px dashed #e0bf4e; outline-offset: 1px; margin-right: 2px; box-shadow: inset 0px 0px 4px rgba(0,0,0,0.5); } .buildingsV3 #build .upgradeHeader { background-image: url('../../img/views/buildings/upgradeBuilding/background1.jpg'); width: 560px; height: 160px; max-width: 100%; position: relative; display: flex; align-items: center; } .buildingsV3 #build .upgradeHeader.levelSpecificInfo { background-image: url('../../img/views/buildings/upgradeBuilding/background2.jpg'); width: 560px; height: 160px; } .buildingsV3.roman #build .g5 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g5.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g5 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g5.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g5 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g5.png'); width: 241px; height: 160px; } .buildingsV3 #build .g5.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g5.png'); width: 241px; height: 160px; } .buildingsV3 #build .g5.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g5.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g6 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g6.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g6 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g6.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g6 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g6.png'); width: 241px; height: 160px; } .buildingsV3 #build .g6.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g6.png'); width: 241px; height: 160px; } .buildingsV3 #build .g6.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g6.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g7 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g7.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g7 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g7.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g7 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g7.png'); width: 241px; height: 160px; } .buildingsV3 #build .g7.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g7.png'); width: 241px; height: 160px; } .buildingsV3 #build .g7.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g7.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g8 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g8.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g8 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g8.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g8 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g8.png'); width: 241px; height: 160px; } .buildingsV3 #build .g8.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g8.png'); width: 241px; height: 160px; } .buildingsV3 #build .g8.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g8.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g9 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g9.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g9 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g9.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g9 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g9.png'); width: 241px; height: 160px; } .buildingsV3 #build .g9.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g9.png'); width: 241px; height: 160px; } .buildingsV3 #build .g9.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g9.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g10 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g10.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g10 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g10.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g10 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g10.png'); width: 241px; height: 160px; } .buildingsV3 #build .g10.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g10.png'); width: 241px; height: 160px; } .buildingsV3 #build .g10.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g10.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g11 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g11.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g11 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g11.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g11 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g11.png'); width: 241px; height: 160px; } .buildingsV3 #build .g11.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g11.png'); width: 241px; height: 160px; } .buildingsV3 #build .g11.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g11.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g13 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g13.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g13 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g13.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g13 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g13.png'); width: 290px; height: 160px; } .buildingsV3 #build .g13.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g13.png'); width: 290px; height: 160px; } .buildingsV3 #build .g13.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g13.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g14 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g14.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g14 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g14.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g14 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g14.png'); width: 241px; height: 160px; } .buildingsV3 #build .g14.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g14.png'); width: 241px; height: 160px; } .buildingsV3 #build .g14.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g14.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g15 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g15.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g15 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g15.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g15 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g15.png'); width: 241px; height: 160px; } .buildingsV3 #build .g15.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g15.png'); width: 241px; height: 160px; } .buildingsV3 #build .g15.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g15.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g16{ background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g16.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g16 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g16.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g16 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g16.png'); width: 290px; height: 160px; } .buildingsV3 #build .g16.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g16.png'); width: 290px; height: 160px; } .buildingsV3 #build .g16.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g16.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g17 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g17.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g17 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g17.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g17 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g17.png'); width: 290px; height: 160px; } .buildingsV3 #build .g17.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g17.png'); width: 290px; height: 160px; } .buildingsV3 #build .g17.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g17.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g18 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g18.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g18 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g18.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g18 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g18.png'); width: 290px; height: 160px; } .buildingsV3 #build .g18.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g18.png'); width: 290px; height: 160px; } .buildingsV3 #build .g18.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g18.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g19 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g19.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g19 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g19.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g19 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g19.png'); width: 241px; height: 160px; } .buildingsV3 #build .g19.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g19.png'); width: 241px; height: 160px; } .buildingsV3 #build .g19.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g19.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g20 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g20.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g20 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g20.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g20 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g20.png'); width: 241px; height: 160px; } .buildingsV3 #build .g20.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g20.png'); width: 241px; height: 160px; } .buildingsV3 #build .g20.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g20.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g21 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g21.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g21 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g21.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g21 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g21.png'); width: 241px; height: 160px; } .buildingsV3 #build .g21.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g21.png'); width: 241px; height: 160px; } .buildingsV3 #build .g21.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g21.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g22 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g22.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g22 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g22.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g22 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g22.png'); width: 290px; height: 160px; } .buildingsV3 #build .g22.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g22.png'); width: 290px; height: 160px; } .buildingsV3 #build .g22.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g22.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g23 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g23.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g23 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g23.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g23 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g23.png'); width: 241px; height: 160px; } .buildingsV3 #build .g23.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g23.png'); width: 241px; height: 160px; } .buildingsV3 #build .g23.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g23.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g24 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g24.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g24 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g24.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g24 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g24.png'); width: 290px; height: 160px; } .buildingsV3 #build .g24.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g24.png'); width: 290px; height: 160px; } .buildingsV3 #build .g24.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g24.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g25 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g25.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g25 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g25.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g25 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g25.png'); width: 290px; height: 160px; } .buildingsV3 #build .g25.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g25.png'); width: 290px; height: 160px; } .buildingsV3 #build .g25.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g25.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g26 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g26.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g26 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g26.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g26 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g26.png'); width: 290px; height: 160px; } .buildingsV3 #build .g26.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g26.png'); width: 290px; height: 160px; } .buildingsV3 #build .g26.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g26.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g27 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g27.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g27 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g27.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g27 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g27.png'); width: 290px; height: 160px; } .buildingsV3 #build .g27.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g27.png'); width: 290px; height: 160px; } .buildingsV3 #build .g27.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g27.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g28 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g28.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g28 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g28.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g28 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g28.png'); width: 241px; height: 160px; } .buildingsV3 #build .g28.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g28.png'); width: 241px; height: 160px; } .buildingsV3 #build .g28.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g28.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g29 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g29.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g29 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g29.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g29 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g29.png'); width: 241px; height: 160px; } .buildingsV3 #build .g29.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g29.png'); width: 241px; height: 160px; } .buildingsV3 #build .g29.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g29.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g30 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g30.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g30 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g30.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g30 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g30.png'); width: 241px; height: 160px; } .buildingsV3 #build .g30.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g30.png'); width: 241px; height: 160px; } .buildingsV3 #build .g30.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g30.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g34 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g34.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g34 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g34.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g34 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g34.png'); width: 241px; height: 160px; } .buildingsV3 #build .g34.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g34.png'); width: 241px; height: 160px; } .buildingsV3 #build .g34.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g34.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g37 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g37.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g37 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g37.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g37 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g37.png'); width: 290px; height: 160px; } .buildingsV3 #build .g37.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g37.png'); width: 290px; height: 160px; } .buildingsV3 #build .g37.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g37.png'); width: 290px; height: 160px; } .buildingsV3.roman #build .g38 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g38.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g38 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g38.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g38 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g38.png'); width: 241px; height: 160px; } .buildingsV3 #build .g38.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g38.png'); width: 241px; height: 160px; } .buildingsV3 #build .g38.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g38.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g39 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g39.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g39 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g39.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g39 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g39.png'); width: 241px; height: 160px; } .buildingsV3 #build .g39.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g39.png'); width: 241px; height: 160px; } .buildingsV3 #build .g39.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g39.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g46 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g46.png'); width: 241px; height: 160px; } .buildingsV3.teuton #build .g46 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g46.png'); width: 241px; height: 160px; } .buildingsV3.gaul #build .g46 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g46.png'); width: 241px; height: 160px; } .buildingsV3 #build .g46.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g46.png'); width: 241px; height: 160px; } .buildingsV3 #build .g46.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g46.png'); width: 241px; height: 160px; } .buildingsV3 #build .g41 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g41.png'); width: 241px; height: 160px; } .buildingsV3 #build .g35 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g35.png'); width: 290px; height: 160px; } .buildingsV3 #build .g36 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g36.png'); width: 241px; height: 160px; } .buildingsV3 #build .g45 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g45.png'); width: 241px; height: 160px; } .buildingsV3 #build .g44 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g44.png'); width: 290px; height: 160px; } .buildingsV3 #build .g31 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g31.png'); width: 241px; height: 160px; } .buildingsV3 #build .g32 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g32.png'); width: 241px; height: 160px; } .buildingsV3 #build .g33 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g33.png'); width: 241px; height: 160px; } .buildingsV3 #build .g42 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g42.png'); width: 241px; height: 160px; } .buildingsV3 #build .g43 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g43.png'); width: 241px; height: 160px; } .buildingsV3 #build .g1 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/g1.png'); width: 241px; height: 160px; } .buildingsV3 #build .g2 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/g2.png'); width: 241px; height: 160px; } .buildingsV3 #build .g3 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/g3.png'); width: 241px; height: 160px; } .buildingsV3 #build .g4 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/g4.png'); width: 241px; height: 160px; } .buildingsV3.roman #build .g40 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/roman/g40.png'); width: 290px; height: 160px; } .buildingsV3.teuton #build .g40 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/teuton/g40.png'); width: 290px; height: 160px; } .buildingsV3.gaul #build .g40 { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/gaul/g40.png'); width: 290px; height: 160px; } .buildingsV3 #build .g40.egyptian { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/egyptian/g40.png'); width: 290px; height: 160px; } .buildingsV3 #build .g40.hun { background-image: url('../../img/g/upgradeView2019/buildingIllustrations/hun/g40.png'); width: 290px; height: 160px; } img.nation1 { background-image: url("../../img/general/tribes/roman_small.png"); background-position: 0px 0px; width: 16px; height: 16px; } img.nation2 { background-image: url("../../img/general/tribes/teuton_small.png"); background-position: 0px 0px; width: 16px; height: 16px; } img.nation3 { background-image: url("../../img/general/tribes/gaul_small.png"); background-position: 0px 0px; width: 16px; height: 16px; } body.login #wrapper::before,body.logout #wrapper::before,body.signup #wrapper::before{ content: none; } #side_navi{ z-index: 4; width: 300px; } #side_navi::before { content: ""; z-index: -1; position: absolute; top: -37px; left: -15px; bottom: -30px; right: -18px; border-style: solid; border-width: 38px 53px 38px 53px; border-image: url('../../img/hud/sidebar/sidebarBox.png') 38 53 38 53 fill stretch; } #side_navi ul { border-top: 1px solid rgba(191, 179, 155, 0.6); margin-top: 2px; margin: 0; margin-top: 0px; padding: 0; list-style: none; } #side_navi ul li { padding: 0; margin: 0; line-height: 30px; height: 30px; } #side_navi ul li:not(:last-child) { border-bottom: 1px solid rgba(191, 179, 155, 0.6); } #side_navi ul li { position: relative; } #side_navi ul li.active { background: none; } #side_navi ul li a { font-size: 14px; font-weight: bold; margin: 0; padding: 0 20px 0 0; } #side_navi ul li a { font-size: 15px; } #side_navi ul li.active a, #side_navi ul li a:active{ color: #FFF9EB; background-color: #DDC6A2; } #side_navi ul li.active a:hover, #side_navi ul li a:hover { background-color: #fff9eb; transition-duration: 250ms; }