@font-face {
    font-family: 'advanced_pixel_lcd-7regular';
    src: url('./advanced_pixel_lcd-7-webfont.woff2') format('woff2'),
         url('./advanced_pixel_lcd-7-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'mine-sweeperregular';
    src: url('./mine-sweeper-webfont.woff2') format('woff2'),
         url('./mine-sweeper-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

div#_winMinesweeper {
    display: inline-block;
    padding: 5px;
    background-color: #bdbdbd;
}

div#canvasMS {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0;
    padding: 0;
    background-color: #bdbdbd;
}

div#containerMS, table#containerScoreMS {
    display: inline-block;
    border-top: 2px solid #7b7b7b;
    border-right: 2px solid #f7f7f7;
    border-bottom: 2px solid #f7f7f7;
    border-left: 2px solid #7b7b7b;
}

div#canvasMS div {
    display: inline-block;
    width: 16px;
    height: 13px;
    margin: 0;
    padding: 3px 0 0 0;
    text-align: center;
    vertical-align: top;
    background-color: #bdbdbd;
    border: none;
    border-top: 2px solid #f7f7f7;
    border-right: 2px solid #7b7b7b;
    border-bottom: 2px solid #7b7b7b;
    border-left: 2px solid #f7f7f7;
    font-size: 8px;
    cursor: pointer;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div#canvasMS div.cellL {
    _border-left: 1px solid #7b7b7b;
}

div#canvasMS div.MS0, div#canvasMS div.MS1, div#canvasMS div.MS2, div#canvasMS div.MS3, div#canvasMS div.MS4, div#canvasMS div.MS5, div#canvasMS div.MS6, div#canvasMS div.MS7, div#canvasMS div.MS8, div#canvasMS div.bombedMS, div#canvasMS div.bombMS {
    width: 18px;
    height: 15px;
    padding: 3px 0 0 0;
    border: 1px solid #8e8e8e;
    background-color: #bdbdbd;
    font: 9px 'mine-sweeperregular';
}

div#canvasMS div.MS0 {
    color: #bdbdbd;
}

div#canvasMS div.MS1 {
    color: #0119fa;
}

div#canvasMS div.MS2 {
    color: #007e1d;
}

div#canvasMS div.MS3 {
    color: #fe1322;
}

div#canvasMS div.MS4 {
    color: #00007b;
}

div#canvasMS div.MS5 {
    color: #850b10;
}

div#canvasMS div.MS6 {
    color: #007f7e;
}

div#canvasMS div.MS7 {
    color: #000;
}

div#canvasMS div.MS8 {
    color: #b1b1b1;
}

div#canvasMS div.MS9 {
    color: #000;
}

div#canvasMS div.bombedMS {
    background: #ea3323 url('../img/ms_bomb.gif') no-repeat center center;
}

div#canvasMS div.bombMS {
    background: url('../img/ms_bomb.gif') no-repeat center center;
}

div#canvasMS div.flagMS {
    background: url('../img/ms_flag.gif') no-repeat center center;
}

div#canvasMS div.MS0.flagMS, div#canvasMS div.MS1.flagMS, div#canvasMS div.MS2.flagMS, div#canvasMS div.MS3.flagMS, div#canvasMS div.MS4.flagMS, div#canvasMS div.MS5.flagMS, div#canvasMS div.MS6.flagMS, div#canvasMS div.MS7.flagMS, div#canvasMS div.MS8.flagMS, div#canvasMS div.bombedMS.flagMS, div#canvasMS div.bombMS.flagMS {
    background: none;
}

div#_winMinesweeper table {
    display: table;
    width: 100%;
    margin: 0 auto 5px auto;
    border-collapse: collapse;
    background-color: #bdbdbd;
}

div#_winMinesweeper table td {
    padding: 4px 4px 1px 4px;
    margin: 0;
    border: 0;
}

div#_winMinesweeper table td>div {
    display: inline-block;
}

div#bgScoreMS, div#bgTimerMS, div#scoreMS, div#timerMS {
    width: 47px;
    height: 21px;
    margin-top: 1px;
    padding: 2px;
    text-align: center;
    font: 14px 'advanced_pixel_lcd-7regular';
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

div#bgScoreMS, div#bgTimerMS {
    position: absolute;
    color: #450000;
    background: #000;
    z-index: 0;
}

div#scoreMS, div#timerMS {
    position: relative;
    display: inline-block;
    color: #f50000;
}

div#iconMS {
    width: 29px;
    height: 27px;
    border-top: 2px solid #f7f7f7;
    border-right: 2px solid #7b7b7b;
    border-bottom: 2px solid #7b7b7b;
    border-left: 2px solid #f7f7f7;
    cursor: pointer;
    background: url('../img/emoji_default.gif') no-repeat center center;
}