.box {
    position: relative;
    border-right: 1px solid black;
    border-bottom: 1px solid black;
    margin: 2px;
    float: left;
}

.cell.given {
    color: #666666;
    color: rgba(0,0,0,0.5);
}

.board-frame {
    overflow: hidden;
}
/*************************/
/* Stiling for 6x6 brett */
/*************************/

.layout-6x6 .band.bandIndex-0 .box.stackIndex-0 .cell.user {
    background-color: #f7ee8b;
}
.layout-6x6 .band.bandIndex-0 .box.stackIndex-1 .cell.user {
    background-color: #ccf4a5;
}
.layout-6x6 .band.bandIndex-1 .box.stackIndex-0 .cell.user {
    background-color: #ffce99;
}
.layout-6x6 .band.bandIndex-1 .box.stackIndex-1 .cell.user {
    background-color: #99d9e8;
}
.layout-6x6 .band.bandIndex-2 .box.stackIndex-0 .cell.user {
    background-color: #d0ccf2;
}
.layout-6x6 .band.bandIndex-2 .box.stackIndex-1 .cell.user {
    background-color: #f2cce4;
}


.layout-6x6 .band.bandIndex-0 .box.stackIndex-0 .cell.given {
    background-color: #f9f3ae;
}
.layout-6x6 .band.bandIndex-0 .box.stackIndex-1 .cell.given {
    background-color: #dbf7c0;
}
.layout-6x6 .band.bandIndex-1 .box.stackIndex-0 .cell.given {
    background-color: #ffddb7;
}
.layout-6x6 .band.bandIndex-1 .box.stackIndex-1 .cell.given {
    background-color: #b7e4ef;
}
.layout-6x6 .band.bandIndex-2 .box.stackIndex-0 .cell.given {
    background-color: #dedbf6;
}
.layout-6x6 .band.bandIndex-2 .box.stackIndex-1 .cell.given {
    background-color: #f6dbec;
}

.layout-6x6 .box {
    width: 183px;
    height: 122px;
}

.layout-6x6 .cell {
    width: 60px;
    height: 60px;
    line-height: 60px;
    font-size: 48px;
}

.layout-6x6 .memoCell {
    width: 20px;
    height: 30px;
    line-height: 30px;
    font-size: 20px;
}

.layout-6x6 .cell.c-0 {left: 0px;}
.layout-6x6 .cell.c-1 {left: 61px;}
.layout-6x6 .cell.c-2 {left: 122px;}
.layout-6x6 .cell.r-0 {top: 0px;}
.layout-6x6 .cell.r-1 {top: 61px;}


/*************************/
/* Stiling for 9x9 brett */
/*************************/

.layout-9x9 .box {
    background-color: #99d9e8;
    width: 129px;
    height: 129px;
}

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

.layout-9x9 .memoCell {
    width: 14px;
    height: 14px;
    line-height: 14px;
    font-size: 10px;
    font-weight: bold;
}

.layout-9x9 .cell.c-0 {left: 0px;}
.layout-9x9 .cell.c-1 {left: 43px;}
.layout-9x9 .cell.c-2 {left: 86px;}
.layout-9x9 .cell.r-0 {top: 0px;}
.layout-9x9 .cell.r-1 {top: 43px;}
.layout-9x9 .cell.r-2 {top: 86px;}


@media only screen and (min-width: 519px) {
.layout-9x9 .box {
    width: 177px;
    height: 177px;
}

.layout-9x9 .cell {
    width: 58px;
    height: 58px;
    line-height: 58px;
    font-size: 41px;
}

.layout-9x9 .memoCell {
    width: 19px;
    height: 19px;
    line-height: 19px;
    font-size: 14px;
}

.layout-9x9 .cell.c-1 {left: 59px;}
.layout-9x9 .cell.c-2 {left: 118px;}
.layout-9x9 .cell.r-1 {top: 59px;}
.layout-9x9 .cell.r-2 {top: 118px;}

/* stormskjerminnstillinger for 6x6-brett */
.layout-6x6 .box {
    width: 250px;
    height: 167px;
}

.layout-6x6 .cell {
    width: 82px;
    height: 82px;
    line-height: 82px;
    font-size: 54px;
}

.layout-6x6 .memoCell {
    width: 27px;
    height: 41px;
    line-height: 41px;
    font-size: 27px;
}

.layout-6x6 .cell.c-0 {left: 0px;}
.layout-6x6 .cell.c-1 {left: 83px;}
.layout-6x6 .cell.c-2 {left: 166px;}
.layout-6x6 .cell.r-0 {top: 0px;}
.layout-6x6 .cell.r-1 {top: 83px;}
}

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

.game-sudoku.mode-fasit .layout-6x6 .band .box .cell.user {
    background-color: #efe;
}

.game-sudoku.mode-fasit .layout-6x6 .band .box .cell.given {
    background-color: #fff;
}

.game-sudoku.mode-fasit  .band .box .cell.user {
    background-color: #efe;
}

.game-sudoku.mode-fasit .band .box .cell.given {
    background-color: #fff;
}

.game-sudoku.mode-fasit .box,
.game-sudoku.mode-fasit .cell {
    border-color: green;
    transition: border-color 1s;
}