body {
    background: #07aaef;
    margin: 0;
    padding: 0;
}

.map {
    background: url('/static/img/map.jpg') no-repeat;
    width: 1000px;
    height: 841px;
    margin: auto;
    background-size: 1000px;
    padding-top: 12px;
}

.hud {
    position: absolute;
    width: 70px;
    margin-left: 10px;
    margin-top: 60px;
}

.hud_unit {
    background-size: 54px;
    background-repeat: no-repeat;
    background-position-x: 20px;
    width: 72px;
    background-color: #fff;
    border: 1px solid #fff;
    color: #006666;
    margin: 6px 0;
    padding-left: 2px;
    cursor: pointer;
}

.auto {
    text-align: center;
}

.row {
    float: left;
    clear: both;
    margin-left: 91px;
    margin-bottom: 2px;
}

.field {
    float: left;
    margin-right: 2px;
}

.field, .field_back {
    width: 56px;
    height: 56px;
}

.field.place, .field.displace {
    cursor: pointer;
}

.field {
    position: relative;
}

.field_holder, .field_content, .field_back {
    position: absolute;
    left: 0;
    top: 0;
}

.field_content,
.field_holder {
    width: 56px;
    height: 56px;
    background-size: 56px;
    background-repeat: no-repeat;
    left: 1px;
    top: 1px;
}

.field_holder {
    background: white;
    opacity: 0.0;
}

.field_holder:hover {
    opacity: 0.3;
}

.field.planning .field_content {
    background-color: black;
    opacity: 0.3;
}

.field.could_attack .field_holder {
    background: #f00;
    opacity: 0.2;
}

.field.hovered .field_holder {
    background: #fff;
    opacity: 0.3;
}

.field.planning.place .field_content, .field.planning.with_unit .field_content {
    background-color: transparent;
    opacity: 0.9;
}

.field .field_back {
    border: 1px solid #fff;
    background-color: #ccc;
    opacity: 0.3;
}

.field.border .field_content {
    border-width: 2px;
    width: 52px;
    height: 52px;
    background-size: 52px;
}

.field.with_unit .field_back {
    background-color: #000;
    opacity: 0.3;
}

.field.with_unit.can_move .field_back {
    background-color: #999;
    opacity: 0.3;
}

.field.with_unit.move_from .field_back {
    opacity: 0.3;
}

.field.move_to .field_content {
    border-style: dotted;
    border-color: #fff;
}

.field.with_unit.in_battle.opponent .unit,
.field.with_unit.move_to.could_attack .field_content {
    border-style: dotted;
    border-color: #f00;
}

.field.with_unit.in_battle.my .unit,
.field.with_unit.move_from .unit {
    border-style: solid;
    border-color: #ff0;
}

.field.with_unit.dead .unit {
    opacity: 0.9;
}

.unit {
    opacity: 0.5;
}

.field.with_unit.can_move .unit {
    opacity: 0.9;
}

.field.with_unit.dead .field_holder {
    background-image: url('/static/img/dead.png');
    background-color: transparent;
    background-size: 56px;
    opacity: 0.3;
}

.field.with_unit.in_battle .unit {
    opacity: 0.9;
}

.arrow {
    background-size: 20px;
    width: 20px;
    height: 20px;
    display: none;
    position: absolute;
    z-index: 100;
    opacity: 0.8;
}

.arrow.visible {
    display: block;
}

.arrow_left {
    background-image: url('/static/img/arrow_left.png');
    left: -11px;
    top: 18px;
}

.arrow_right {
    background-image: url('/static/img/arrow_right.png');
    right: -12px;
    top: 18px;
}

.arrow_up {
    background-image: url('/static/img/arrow_up.png');
    top: -12px;
    left: 18px
}

.arrow_down {
    background-image: url('/static/img/arrow_down.png');
    bottom: -13px;
    left: 18px
}

.aircraftCarrier {
    background-image: url('/static/img/icons/aircraftCarrier.png');
}
.battleship {
    background-image: url('/static/img/icons/battleship.png');
}
.destroyer {
    background-image: url('/static/img/icons/destroyer.png');
}
.mine {
    background-image: url('/static/img/icons/mine.png');
}
.patrol {
    background-image: url('/static/img/icons/patrol.png');
}
.torpedo {
    background-image: url('/static/img/icons/torpedo.png');
}
.airplane {
    background-image: url('/static/img/icons/airplane.png');
}
.cruiser {
    background-image: url('/static/img/icons/cruiser.png');
}
.fireShip {
    background-image: url('/static/img/icons/fireShip.png');
}
.minesweeper {
    background-image: url('/static/img/icons/minesweeper.png');
}
.raider {
    background-image: url('/static/img/icons/raider.png');
}
.vedette {
    background-image: url('/static/img/icons/vedette.png');
}
.atomicBomb {
    background-image: url('/static/img/icons/atomicBomb.png');
}
.cruisingSubmarine {
    background-image: url('/static/img/icons/cruisingSubmarine.png');
}
.fixedMine {
    background-image: url('/static/img/icons/fixedMine.png');
}
.MNB {
    background-image: url('/static/img/icons/MNB.png');
}
.submarine {
    background-image: url('/static/img/icons/submarine.png');
}
.unknownUnit {
    background-image: url('/static/img/icons/unknownUnit.png');
}


.hud_unit.aircraftCarrier {
    background-image: url('/static/img/icons/horizontal/aircraftCarrier.png');
}
.hud_unit.battleship {
    background-image: url('/static/img/icons/horizontal/battleship.png');
}
.hud_unit.destroyer {
    background-image: url('/static/img/icons/horizontal/destroyer.png');
}
.hud_unit.mine {
    background-image: url('/static/img/icons/horizontal/mine.png');
}
.hud_unit.patrol {
    background-image: url('/static/img/icons/horizontal/patrol.png');
}
.hud_unit.torpedo {
    background-image: url('/static/img/icons/horizontal/torpedo.png');
}
.hud_unit.airplane {
    background-image: url('/static/img/icons/horizontal/airplane.png');
}
.hud_unit.cruiser {
    background-image: url('/static/img/icons/horizontal/cruiser.png');
}
.hud_unit.fireShip {
    background-image: url('/static/img/icons/horizontal/fireShip.png');
}
.hud_unit.minesweeper {
    background-image: url('/static/img/icons/horizontal/minesweeper.png');
}
.hud_unit.raider {
    background-image: url('/static/img/icons/horizontal/raider.png');
}
.hud_unit.vedette {
    background-image: url('/static/img/icons/horizontal/vedette.png');
}
.hud_unit.atomicBomb {
    background-image: url('/static/img/icons/horizontal/atomicBomb.png');
}
.hud_unit.cruisingSubmarine {
    background-image: url('/static/img/icons/horizontal/cruisingSubmarine.png');
}
.hud_unit.fixedMine {
    background-image: url('/static/img/icons/horizontal/fixedMine.png');
}
.hud_unit.MNB {
    background-image: url('/static/img/icons/horizontal/MNB.png');
}
.hud_unit.submarine {
    background-image: url('/static/img/icons/horizontal/submarine.png');
}
.hud_unit.unknownUnit {
    background-image: url('/static/img/icons/horizontal/unknownUnit.png');
}