battleforhill.css

@import url(../../../css/csslayer.css); /* Note: you must not use any @import directive other than this one */

/* Layout */
#game-container {
    height: auto;
    overflow: hidden;
}
#players-panel {
    float: left;
    position: relative;
    width: 167px;
}
#battlefield-panel {
    width: auto;
    overflow: hidden;
    margin-left: 202px;
}
.spectatorMode #battlefield-panel {
    margin-left: 0;
}

/* Hands */
.player-cards .playable-card {
    display: inline-block;
    margin-left: 5px;
    margin-bottom: 5px;
}
.player-cards {
    margin-left: -5px;
}
.clickable .playable-card {
    cursor: pointer;
}
.player-cards .playable-card .selected-border {
    display: none;
    background-position: -640px -115px;
    position: absolute;
}
.clickable .playable-card.selected .selected-border {
    display: inline-block;
}

/* Battlefield */
.battlefield-position {
    position: absolute;
    width: 160px;
    height: 230px;
}

/* Battlefield map */
#map_container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#map_scrollable, #map_scrollable_oversurface {
    position: absolute;
    top: 205px;
    left: 315px;
}
#map_surface {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: move;
}
#map_footer {
    text-align: center;
}
#movetop, #moveleft, #moveright, #movedown {
    display: block;
    position: absolute;
    background-image: url('../../../img/common/arrows.png');
    width: 32px;
    height: 32px;
}
#movetop {
    top: 0;
    left: 50%;
    background-position: 0 32px;
    margin-left:-16px;
}
#moveleft {
    top: 50%;
    left: 0;
    background-position: 32px 0;
    margin-top:-16px;
}
#moveright {
    top: 50%;
    right: 0;
    background-position: 0 0;
    margin-top:-16px;
}
#movedown {
    bottom: 0;
    left: 50%;
    background-position: 32px 32px;
    margin-left:-16px;
}

/** Zoom **/
.zoom10 {
    font-size: 100%;
    transform: scale(1,1);
}
.zoom9 {
    font-size: 99%;
    transform: scale(0.9,0.9);
}
.zoom8 {
    font-size: 98%;
    transform: scale(0.8, 0.8);
}
.zoom7 {
    font-size: 96.5%;
    transform: scale(0.7,0.7);
}
.zoom6 {
    font-size: 95%;
    transform: scale(0.6,0.6);
}
.zoom5 {
    font-size: 93.5%;
    transform: scale(0.5, 0.5);
}
.zoom4 {
    font-size: 92%;
    transform: scale(0.4,0.4);
}
.zoom3 {
    font-size: 91%;
    transform: scale(0.3, 0.3);
}
.zoom2 {
    font-size: 90%;
    transform: scale(0.2,0.2);
}

#zoom_controls {
    position: absolute;
    top: 12px;
    right: 12px;
}

.zoom_control {
    display: block;
    color: black;
    cursor: pointer;
    font-size: 32px;
    margin: 6px;
    padding-bottom: 6px;
    text-align: center;
    width: 32px;
    height: 32px;
}

.zoom_control:disabled {
    cursor: default;
}

/* icons */
.counter-cell {
    display: inline-block;
}
.counter-cell .counter-icon {
    display: inline-block;
}
.counter-cell.player-number {
    font-size: 70%;
    border-radius: 10px;
    background: #515151;
    width: 20px;
    height: 20px;
    color: white;
    text-align: center;
}
.counter-cell.player-number .counter-text {
    height: 20px;
    line-height: 20px;
}
.counter-cell.deck-count .counter-icon {
    width: 22px;
    height: 24px;
    background-position: 0 -460px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
.counter-cell.hand-count .counter-icon {
    width: 27px;
    height: 24px;
    background-position: -22px -460px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
.counter-cell.air-strike-count .counter-icon {
    width: 26px;
    height: 23px;
}
#player_board_inner_3b550c .counter-cell.air-strike-count .counter-icon {
    background-position: -53px -464px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
#player_board_inner_04237b .counter-cell.air-strike-count .counter-icon {
    background-position: -87px -464px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
.counter-cell.units-destroyed .counter-icon {
    width: 30px;
    height: 28px;
    background-position: -117px -460px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
.counter-cell.units-in-play .counter-icon {
    width: 24px;
    height: 26px;
    background-position: -147px -460px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
/* TODO: Remove */
.air-strike-icon {
    border: 4px solid transparent;
    width: 26px;
    height: 23px;
    display: inline-block;
}
.air-strike-icon.clickable {
    cursor: pointer;
}
.air-strike-icon.clickable.selected {
    border: 4px dashed red;
}
#player_board_inner_3b550c .air-strike-icon {
    background-position: -53px -464px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
#player_board_inner_04237b .air-strike-icon {
    background-position: -87px -464px;
    background-image: url(img/cards.png);
    background-repeat: no-repeat;
}
/* End remove */

/* Card view/perspective */
.battlefield-card > .card.color-3b550c {
    transform: rotate(0deg);
}
.battlefield-card > .card.color-04237b {
    transform: rotate(180deg);
}
.viewing-as-upwards-player .battlefield-card > .card.color-3b550c {
    transform: rotate(180deg);
}
.viewing-as-upwards-player .battlefield-card > .card.color-04237b {
    transform: rotate(0deg);
}
.battlefield-card > .card.hill {
    transform: rotate(0deg);
}
.viewing-as-upwards-player .battlefield-card > .card.hill {
    transform: rotate(180deg);
}

/* Base indicators */
.battlefield-card > .card.base-indicator {
    word-break: break-word;
    text-align: center;
    font-weight: bold;
    font-size: 1.65em;
    background-image: url(img/cards.png);
    background-size: 1760px 491px;
    background-repeat: no-repeat;
    background-position: -1440px -230px;
    display: table-cell;
    vertical-align: middle;
    padding-left: 6px;
    padding-right: 6px;
}

/* Card interactions */
.battlefield-button {
    width: 160px;
    height: 230px;
    position: absolute;
    display: none;
}
.battlefield-button.clickable {
    display: block;
    cursor: pointer;
    width: 160px;
    height: 230px;
    background-image: url(img/cards.png);
    background-size: 1760px 491px;
    background-repeat: no-repeat;
    background-position: -1440px 0px;
}
.state-choose-attack .battlefield-button.clickable {
    background-position: -1280px 0px;
}
.battlefield-button .coordinates {
    color: white;
    font-weight: bold;
    font-size: 2.7em;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 230px;
    display: none;
    text-shadow: -2px 0 #333333, 0 2px #333333, 2px 0 #333333, 0 -2px #333333;
}
.battlefield-button.clickable .coordinates {
    display: block;
}
.state-choose-attack .battlefield-button.clickable .coordinates {
    color: red;
}

/* Card Effects */
.explosion {
    position: relative;
    top: -230px;
    display: block;
    width: 160px;
    height: 230px;
    background-image: url(img/cards.png);
    background-size: 1760px 491px;
    background-repeat: no-repeat;
    background-position: -1600px 0;
}

/* Cards */
.card {
    width: 80px;
    height: 115px;
    background-image: url(img/cards.png);
    background-size: 880px 246px;
    background-position: 80px 115px;
    background-repeat: no-repeat;
}
.card.artillery.color-04237b {
    background-position: 0px 0px;
}
.card.heavy-weapons.color-04237b {
    background-position: -80px 0px;
}
.card.infantry.color-04237b {
    background-position: -160px 0px;
}
.card.paratroopers.color-04237b {
    background-position: -240px 0px;
}
.card.special-forces.color-04237b {
    background-position: -320px 0px;
}
.card.tank.color-04237b {
    background-position: -400px 0px;
}
.card.air-strike.color-04237b {
    background-position: -480px 0px;
}
.card.hill {
    background-position: -560px 0px;
}
.card.artillery.color-3b550c {
    background-position: 0px -115px;
}
.card.heavy-weapons.color-3b550c {
    background-position: -80px -115px;
}
.card.infantry.color-3b550c {
    background-position: -160px -115px;
}
.card.paratroopers.color-3b550c {
    background-position: -240px -115px;
}
.card.special-forces.color-3b550c {
    background-position: -320px -115px;
}
.card.tank.color-3b550c {
    background-position: -400px -115px;
}
.card.air-strike.color-3b550c {
    background-position: -480px -115px;
}
.card.back {
    background-position: -560px -115px;
}

/* Battlefield Cards */
.battlefield-card > .card {
    width: 160px;
    height: 230px;
    background-image: url(img/cards.png);
    background-size: 1760px 491px;
    background-position: 160px 230px;
    background-repeat: no-repeat;
}
.battlefield-card > .card.artillery.color-04237b {
    background-position: 0px 0px;
}
.battlefield-card > .card.heavy-weapons.color-04237b {
    background-position: -160px 0px;
}
.battlefield-card > .card.infantry.color-04237b {
    background-position: -320px 0px;
}
.battlefield-card > .card.paratroopers.color-04237b {
    background-position: -480px 0px;
}
.battlefield-card > .card.special-forces.color-04237b {
    background-position: -640px 0px;
}
.battlefield-card > .card.tank.color-04237b {
    background-position: -800px 0px;
}
.battlefield-card > .card.air-strike.color-04237b {
    background-position: -960px 0px;
}
.battlefield-card > .card.hill {
    background-position: -1120px 0px;
}
.battlefield-card > .card.artillery.color-3b550c {
    background-position: 0px -230px;
}
.battlefield-card > .card.heavy-weapons.color-3b550c {
    background-position: -160px -230px;
}
.battlefield-card > .card.infantry.color-3b550c {
    background-position: -320px -230px;
}
.battlefield-card > .card.paratroopers.color-3b550c {
    background-position: -480px -230px;
}
.battlefield-card > .card.special-forces.color-3b550c {
    background-position: -640px -230px;
}
.battlefield-card > .card.tank.color-3b550c {
    background-position: -800px -230px;
}
.battlefield-card > .card.air-strike.color-3b550c {
    background-position: -960px -230px;
}
.battlefield-card > .card.back {
    background-position: -1120px -230px;
}

/* Tooltip Cards */
.tooltip-card {
    width: 160px;
    height: 230px;
    background-image: url(img/cards.png);
    background-size: 1760px 491px;
    background-position: 160px 230px;
    background-repeat: no-repeat;
}
.tooltip-card.artillery.color-04237b {
    background-position: 0px 0px;
}
.tooltip-card.heavy-weapons.color-04237b {
    background-position: -160px 0px;
}
.tooltip-card.infantry.color-04237b {
    background-position: -320px 0px;
}
.tooltip-card.paratroopers.color-04237b {
    background-position: -480px 0px;
}
.tooltip-card.special-forces.color-04237b {
    background-position: -640px 0px;
}
.tooltip-card.tank.color-04237b {
    background-position: -800px 0px;
}
.tooltip-card.air-strike.color-04237b {
    background-position: -960px 0px;
}
.tooltip-card.hill {
    background-position: -1120px 0px;
}
.tooltip-card.artillery.color-3b550c {
    background-position: 0px -230px;
}
.tooltip-card.heavy-weapons.color-3b550c {
    background-position: -160px -230px;
}
.tooltip-card.infantry.color-3b550c {
    background-position: -320px -230px;
}
.tooltip-card.paratroopers.color-3b550c {
    background-position: -480px -230px;
}
.tooltip-card.special-forces.color-3b550c {
    background-position: -640px -230px;
}
.tooltip-card.tank.color-3b550c {
    background-position: -800px -230px;
}
.tooltip-card.air-strike.color-3b550c {
    background-position: -960px -230px;
}
.tooltip-card.back {
    background-position: -1120px -230px;
}