/*
#background1 {
    transform: translate(100vw,0);
}
#background2 {
    transform: translate(100vw,0);
}
*/

#gameMenu {
    background-color: rgba(255,255,255,0.35);
    box-shadow: 0 0 6vmin rgba(0,0,0,0.8);
}
#gameMenu:after {
    opacity:0 !important;
}

#gameBoard {
    background-color: rgba(255,255,255,0.35);
    box-shadow: 0 0 6vmin rgba(0,0,0,0.8);
}

.fieldLineHorizontal {
    background-color: rgba(0,140,30,0.6);
}
.fieldLineVertical {
    background-color: rgba(0,140,30,0.6);
}

.field:after {
    background-color: rgba(0,140,30,1);
}
.fieldMoveable:after {
    background-color: #00ff00;
}
.fieldMoveable:hover:after {
    background-color: #ddff00;
}

.stoneWhite, .stoneBlack {
    margin: -5vmin 0 0 -5vmin;
    width: 10vmin;
    height: 10vmin;
}
.stoneWhite {
    background: url(../pictures/white-nature.png);
    background-size: cover;
}
.stoneBlack {
    background: url(../pictures/black-nature.png);
    background-size: cover;
}
.stoneWhite.stoneMoveable {
    background: url(../pictures/white-moveable-nature.png);
    background-size: cover;
}
.stoneWhite.stoneMoveable.stoneHoverable:hover {
    background: url(../pictures/white-moveable-hover-nature.png);
    background-size: cover;
}
/* Its specified later so will override possible moveable */
.stoneWhite.stoneActive {
    background: url(../pictures/white-active-nature.png);
    background-size: cover;
}
.stoneWhite.stoneActive:hover {
    background: url(../pictures/white-active-nature.png);
    background-size: cover;
}
.stoneWhite.stoneRemoveable {
    background: url(../pictures/white-removeable-nature.png);
    background-size: cover;
}
.stoneWhite.stoneRemoveable.stoneHoverable:hover {
    background: url(../pictures/white-removeable-hover-nature.png);
    background-size: cover;
}
.stoneBlack.stoneMoveable {
    background: url(../pictures/black-moveable-nature.png);
    background-size: cover;
}
.stoneBlack.stoneMoveable.stoneHoverable:hover {
    background: url(../pictures/black-moveable-hover-nature.png);
    background-size: cover;
}
/* Its specified later so will override possible moveable */
.stoneBlack.stoneActive {
    background: url(../pictures/black-active-nature.png);
    background-size: cover;
}
.stoneBlack.stoneActive:hover {
    background: url(../pictures/black-active-nature.png);
    background-size: cover;
}
.stoneBlack.stoneRemoveable {
    background: url(../pictures/black-removeable-nature.png);
    background-size: cover;
}
.stoneBlack.stoneRemoveable.stoneHoverable:hover {
    background: url(../pictures/black-removeable-hover-nature.png);
    background-size: cover;
}