html {height: 100%;}

body {
    background-image: url('/web/island/images/water-level.jpg');
    background-repeat: repeat-x;
    background-size: 150px 100%;
    background-position: 0 5000px;
}

.spacing_columns {
    float: left;
}

#island_board {
    float: left;
}

.island_row {
    float: left;
    width: 100%;
}

.island_padding, .sunk {
    width: 16%;
    height: 16%;
    float: left;
}

#player_boxes {
    float: left;
    min-width: 200px;
}

div.card {
    height: 5em;
    width: 3.5em;
}

div.island_tile {
    width: 16%;
    height: 16%;

    float: left;

    background-size: cover;
    border: 1px solid #bdbdbd;
    border-radius: 0.5em;
    box-shadow: 0 0 3px #999;

    position: relative;
}


.player_hand, .player_hand span {
    position: relative;
    height: 6.5em;

    color: #fff;
    font-weight: bold;

    padding: 0.5em;
}

.player_hand .card {
    top: 2em;
    height: 5em;
    width: 3.5em;
}

.discard_pile {
    position: relative;
    height: 6em;

    color: #fff;
    font-weight: bold;

    padding: 0.5em;

    color: #fff;
    font-size: 1em;
    text-align: center;
}

.discard_pile_inactive {
    background-color: #f2f2f2;
    border: 1px solid #bdbdbd;
}

.discard_pile_active {
    background-color: #e9e9e9;
    border: 1px solid #bdbdbd;
}

.discard_pile_hover {
    border: 1px solid #7f7f7f;
}

.treasure_pile, .flood_pile {
    height: 7em;
    width: 4.5em;
    background-size: cover;

    position: relative;

    background-color: #fff;
    border-radius: 0.5em;
    border: 1px solid #bdbdbd;
}

.treasure_pile {
    background-image: url('/web/island/images/treasure-back.jpg');
}

.flood_pile {
    background-image: url('/web/island/images/flood-back.jpg');
}

div.treasure_icon {
    width: 33%;
    height: 16%;
    float: left;
    text-align: center;
}

img.treasure_icon {
    max-height: 5em;
    max-width: 5em;

    filter: sepia(100%);
}

img.treasure_found {
    filter: none;
}

table#water_markers {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
}

#water_markers tr td {
    width: 1em;
    padding: 0;
    margin: 0;
    text-align: center;
    font-weight: bold;
    color: #fff;
    font-size: 1.5em;
}

.water_level_grey {
    border-bottom: 1px solid #ccc;
}

.water_level_white {
    border-bottom: 1px solid #fff;
}

#water_level_10 {
    background-image: url('/web/island/images/skull.png');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 0 1em;
}

.player_marker {
    float: left;
    background-size: cover;
    height: 2.6em;
    width: 1.3em;
    z-index: 9;
    margin: 0.5;
}

.player_1 {
    background-image: url('/web/island/images/player_1.png');
}

.player_2 {
    background-image: url('/web/island/images/player_2.png');
}

.player_3 {
    background-image: url('/web/island/images/player_3.png');
}

.player_4 {
    background-image: url('/web/island/images/player_4.png');
}

.player_5 {
    background-image: url('/web/island/images/player_5.png');
}

.player_6 {
    background-image: url('/web/island/images/player_6.png');
}

#message_box img {
    max-height: 600px;
}

#message_box {
    max-width: 500px;
}

.player_hand_1 {
    background-color: #3c85e4;
}

.player_hand_2 {
    background-color: #1ccc5d;
}

.player_hand_3 {
    background-color: #d9e1ee;
}

.player_hand_4 {
    background-color: #f6ec00;
}

.player_hand_5 {
    background-color: #ef402b;
}

.player_hand_6 {
    background-color: #3a332d;
}

div.not_current_player {
    background-color: #adadad;
}