.sudoku-grid {
    font-family: Courier, serif;
}

.sudoku-grid ::selection {
    background:transparent;
}

.sudoku-grid table {
    border-collapse: separate;
    border-spacing:0px;
    border-top:2px solid #333;
    border-left:2px solid #333;
    border-bottom:1px solid #333;
    border-right:1px solid #333;
}

.sudoku-grid td {
    border-bottom: 1px solid #333;
    border-right: 1px solid #333;
}

.sudoku-grid tr.edge + tr td {
    border-top: 1px solid #333;
}

.sudoku-grid td.edge + td {
    border-left: 1px solid #333;
}

.sudoku-grid table label {
    display:block;
    width:4em;
    height:4em;
    z-index: 1;
}

.sudoku-grid table label.highlight {
    background-color: #fffde6;
}

.sudoku-grid table label.invalid {
    background-color: #ffe7e6;
}

.sudoku-grid table label.focus {
    background-color: #e6e8ff;
}

.sudoku-grid input.cell {
    border: 0px none;
    background-color:transparent;
    text-align: center;
    font-size: 3em;
    height:100%;
    width:100%;
    color:transparent;
    text-shadow: 0 0 0 #000;
}

.sudoku-grid td div {
    position:relative;
}

.sudoku-grid .note {
    position:absolute;
    z-index: 0;
    color:#aaa;
}

.sudoku-grid .note-1,
.sudoku-grid .note-4,
.sudoku-grid .note-7 {
    left: 0;
}

.sudoku-grid .note-2,
.sudoku-grid .note-5,
.sudoku-grid .note-8 {
    left: 1.7em;
}

.sudoku-grid .note-3,
.sudoku-grid .note-6,
.sudoku-grid .note-9 {
    right:0;
}

.sudoku-grid .note-1,
.sudoku-grid .note-2,
.sudoku-grid .note-3 {
    top: 0;
}

.sudoku-grid .note-4,
.sudoku-grid .note-5,
.sudoku-grid .note-6 {
    top:1.4em;
}

.sudoku-grid .note-7,
.sudoku-grid .note-8,
.sudoku-grid .note-9 {
    bottom:0;
}