.board-frame {
    position: relative;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
}


.cell {
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 30px;
}

.cell.given {
    color: #666666;
    background-color: #fbf6c5;
    font-size: 14px;
}

.cell.user {
    background-color: white;
}

.cell.dead {
    background-color: #f7daec;
}


.cell > .dir-down,
.cell > .dir-left {
    position: absolute;
    font-size: 16px;
    line-height: 16px;
    font-weight: bold;
}
.cell > .dir-down {
    bottom: 5px;
    left: 5px;
}
.cell > .dir-left {
    top: 5px;
    right: 5px;
}

.memoCell {
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
}

.diagonal {
    position: absolute;

    /*
    top: 50%;
    left: -21%;
    background-color: black;
    width: 142%;
    height: 1px;
    -webkit-transform: rotate(45deg);
    */


    top: 0px;
    left: 0px;
    width: 42px;
    height: 42px;
    background-image: url(diagonal.png);
    background-size: 42px 42px;
}


/*************************/
/* Stiling for fasit     */
/*************************/

.game-kakuro.mode-fasit .cell.user {
    background-color: #efe;
}

.game-kakuro.mode-fasit .cell.given,
.game-kakuro.mode-fasit .cell.dead {
    background-color: #fff;
}





@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
  
  /* Retina-specific stuff here */
  
    .cell .diagonal {
        background-image: url(diagonal@2x.png);
    }

}