body {
    background-color: aliceblue;
}
div#board {
    position: relative;
    width: 800px;
    margin: auto;  
}

svg#monitor {
    position: relative;
    left: 80px;
    top: 60px;
    width:300px;
    height:12px;
}

svg#monitor2 {
    position: relative;
    left: 120px;
    top: 60px;
    width:300px;
    height:12px;
}

svg#pointer1 {
    position: absolute;
    left: 384px;
    top: 292px;
}

svg#pointer2 {
    position: absolute;
    left: 404px;
    top: 292px;
}

polygon {
    display: inline;
    position: relative;
    fill: limegreen;
    stroke:black;
    stroke-width:1.0;
    padding: 1px;
}

rect {
    display: inline;
    position: relative;
    width:10px;
    height:10px;

    stroke:black;
    stroke-width:0.5;
    fill: aliceblue;
  
    padding: 1px;   
}

.green {
    stroke:none;
    fill: limegreen
}
.red { fill: red }
.empty {
    stroke:black;
    stroke-width:0.5;
    fill: aliceblue;
}

div#messageArea {
    position: absolute;
    left: 80px;
    top: 500px;
    color: rgb(83, 175, 19);
}
button#newGameButton  {
    position: absolute;
    visibility: visible;
    left: 750px;
    top: 430px;
    color: black;
}

button#startButton  {
    position: absolute;
    left: 650px;
    top: 460px;
    color: black;
}

button#highScore  {
    position: absolute;
    left: 90px;
    top: 450px;
    color: black;
}

button#guestButton {
    display: flex;
    position: center;
    width: auto;
    margin: auto;
}

div#fieldHeader1 { 
    position: absolute;
    left: 200px;
    top: 70px;
    width: 100px;
}

div#fieldHeader2 {   
    position: absolute;
    left: 500px;
    top: 70px;
    width: 100px;   
}
table#myField {
    position: absolute;
    left: 80px;
    top: 150px;
    border-spacing: 0;
    background: url("../public/img/field.png") no-repeat;
}
table#enemyField {
    position: absolute;
    left: 420px;
    top: 150px;
    border-spacing: 0;
    background: url("./img/field.png") no-repeat;
}
td {
    width: 28px;
    height: 28px;
}

table#enemyField td:hover {
}

.full {
    background: url(./img/ship.png) no-repeat center center;
}
.hit {
    background: url(./img/hit.png) no-repeat center center;
}
.miss {
    background: url(./img/miss.png) no-repeat center center;
}
.sunk {
    background: url(./img/sunk.png) no-repeat center center;
}
.aura {
    background:  rgb(83, 175, 19); 
}
.space {
    /* clean class */
}

#menu {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 16px;
    text-align: right;
    color: #888;
}

#menu .name:after {
    content: ' -';
}
#menu a {
    text-decoration: none;
    margin-left: 5px;
    color: black;
}

#loginDiv {
    visibility: visible;
    position: absolute;
    top: 35px;
    right: 20px;
    font-size: 16px;
    text-align: right;
}

.navigation {
    text-align: right;
    background: lightgrey;
}

form {
    width: 240px;
    margin: 50px auto;
    align-items: center;
    justify-content: center;
}

form#inpForm1 {
    position: absolute;
    left: 200px;
    top: 470px;
    width: 500px;
}