﻿.playBoard {
    
}

.playBoard td {
    border-radius:15px;
    border-bottom-color:#444;
    border-bottom-width:medium;
    
    height:60px/*60px*/;
    width:55px/*55px*/;

    text-align:center;
    vertical-align:middle;

    position:relative;
}

.spot {
    font-family:'04b 30';
    font-size:24px;

    border-radius:5px;
    border-bottom-color:#444;
    border-bottom-width:medium;
    
    height:60px/*100px*/;
    width:60px/*100px*/;

    text-align:center;
    vertical-align:middle;

    display:inline-block;
    position:relative;

    border-color:#444;
    border-style:solid;
    border-width:thin;
    border-bottom-width:thick;

    margin-top:2px;
}

.bStart {
    background-color:#fff;
    border-color:#10ABEF;
    border-style:dashed;
    border-width:medium;

    border-bottom-style:solid;
}

.bEnd {
    background-image: url("../Images/Board/End.jpeg");
    color:#ff6a00;

    background-color:#fff;
    border-color:#E28989;
    border-style:dashed;
    border-width:medium;

    border-bottom-style:solid;
}

.bNormal {
    border-color:#888;
}

.bGrass {
    background-image: url("../Images/Board/Grass.jpeg");
    background-color:#5DA05B;
    color:#000;
}

.bSand {
    background-image: url("../Images/Board/Sand.jpeg");
    background-color:#F6E796;
}

.bWater {
    background-image: url("../Images/Board/Water.jpeg");
    background-color:#23B5CA;
    color:#fff;
}

.bGround {
    background-image: url("../Images/Board/Ground.jpeg");
    background-color:#23B5CA;
    color:#fff;
}

.bStone {
    background-image: url("../Images/Board/Stone.jpeg");
    background-color:#23B5CA;
    color:#000;
}

.bEvent {
    background-image: url("../Images/Board/Surprise.jpeg");
    background-position:center;
    background-color:#e83f19;
    color:#fff;
}

.player1 {
    background-color:red;
    border-radius:45px;
    
    height:30px;
    width:30px;
    
    left:0;
    top:0;
    position:absolute;
}

.player2 {
    background-color:aqua;
    border-radius:45px;

    height:30px;
    width:30px;

    right:0;
    top:0;
    position:absolute;
}

.player3 {
    background-color:green;
    border-radius:45px;
    
    height:30px;
    width:30px;
    
    left:0;
    bottom:0;
    position:absolute;
}

.player4 {
    background-color:yellow;
    border-radius:45px;

    height:30px;
    width:30px;

    right:0;
    bottom:0;
    position:absolute;
}

.playerHighlight {
    padding:3px;
    font-family:Upheaval;

    background-color:#ff6a00;
    color:#fff;
    box-shadow: 2px 2px 1px #888;
}

.playerRegular {
    padding:3px;
    font-family:Upheaval;

    background-color:#fff;
    color:#444;
    box-shadow: 2px 2px 1px #888;
}

.correctHighlight {
    padding:3px;
    font-family:Upheaval;

    background-color:#43cb1c;
    color:#fff;
    box-shadow: 2px 2px 1px #888;
}

.wrongHighlight {
    padding:3px;
    font-family:Upheaval;

    background-color:#e52424;
    color:#fff;
    box-shadow: 2px 2px 1px #888;
}

.playerPoints {
    padding:3px;
    font-family:Upheaval;

    background-color:#fff;
    color:#cda213;
    box-shadow: 2px 2px 1px #888;
}

.eventStripe {
    /*background-image: url(../Images/Icons/AlertDark.png);
    background-repeat:no-repeat;
    background-size:32px;
    background-position:left;
    padding:5px;
    padding-left:32px;*/

    font-family:Upheaval;
    font-size:16px;

    background-color:#ff6a00;
    color:#fff;
    width:400px;
    height:100px;
    position:fixed;
    z-index:3;

    top: 30%;
    left:40%;
}