#cwd-container {
font-family: sans-serif;
}

#cwd-divGrid {
float: left;
margin-right: 2rem;
margin-bottom: 2rem;
}

#cwd-clues {
float: left;
width: 440px;
}

#cwd-grid {
border: solid 1px #000;
}

#cwd-grid td.cwd-tile-highlight
{
background-color: Yellow !important;
}

#cwd-grid td.cwd-tile-cursor
{
border-color: #fff !important;
background-color: #999 !important;
color: #fff;
}

#cwd-grid td.cwd-tile-correct
{
background-color: Lime !important;
}

#cwd-grid td.cwd-tile-incorrect
{
border-color: #c03 !important; 
}

.cwd-tile {
width: 25px;
height: 25px;
border: solid 1px #000;
padding: 0;
vertical-align: top;
}

.cwd-tile-letter {
text-align: center;
font-size: 16px; 
}

#cwd-clue-box {
padding: 5px;
margin-top: 5px;
border: solid 1px #000;
font-size: 105%;
font-weight: bold;
height: 50px;
}

.cwd-clue-highlight
{
font-weight: bold;
}

.cwd-clues-header {
font-size: 105%;
font-weight: bold;
padding-top: 5px;
padding-bottom: 5px;
}

.cwd-clue div {
display: table-cell;
}

.cwd-clue-no {
width: 25px;
}

.cwd-clue-text {
cursor: pointer;
}


@media screen and (max-width: 1024px) {
#cwd-clues {
width: 320px;
}
}

@media screen and (max-width: 1020px) {
#cwd-divGrid {
float: none;
margin-right: 0;
}

#cwd-clues {
float: none;
width: 100%;
}
}

@media screen and (max-width: 350px) {

.cwd-tile {
width: 20px;
height: 20px;
}

.cwd-tile-letter {
font-size: 15px; 
}


}

@media screen and (max-width: 320px) {

}

@media screen and (max-width: 300px) {

}




@media print {

#cwd-divGrid {
float: none;
margin-top: 2rem;
margin-right: 0;
margin-bottom: 2rem;
}

#cwd-clues {
float: none;
width: 100%;
}

td.cwd-tile.cwd-tile-inactive{
width: 25px;
height: 25px;
overflow: hidden;
box-shadow: 0 0 0 30px #333 inset;
}

#cwd-clue-box {
display: none;
}

}