body {margin-left: 6px; margin-top: 6px; font-family: "Palatino Linotype"}

#frame {
 background: url(images/board.jpg) no-repeat;
 position: absolute;
 top: 20px;
 left: 20px;
 height: 443px;
 width:  443px;
}

#board {position: relative; top: 72px; left: 72px;}

#board td {height: 100px; width: 100px}

tr.row1 td {border-bottom: 1px solid black;}
tr.row2 td {border-bottom: 1px solid black;}
td.col1 {border-right: 1px solid black;}
td.col2 {border-right: 1px solid black;}

#tileholder {background-color: rgb(146,85,100);
 height: 340px;
 width: 340px;
 border: 1px solid black;
 margin-top: 12px;
 position: absolute;
 top: 20px;
 left: 500px;
}

div.tile {border: 1px solid black; position: absolute; height: 100px; width: 100px; }

div.tile image {height: 100px; width: 100px;}

.controls {
  background-color: #EAA;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 8px;
  padding-right: 8px;
}

#challenge {
  position: absolute;
  top: 470px;
  left: 20px;
  width: 500px;
}

#controls {
  position: absolute;
  top: 470px;
  left: 580px;
  width: 300px;
}

#challenge h1 {margin-top: 0px; margin-bottom: 6px; text-align: center;}

button.left {float: left; margin-left: 6px;}
button.right {float: right; margin-right: 6px;}

#challenge button {font-size: 200%;}

#description {margin-left: 1em; margin-bottom: 1em;}

div.clause {font-family: sans-serif;}

div.clause.solved {color: blue;}
div.clause.unsolved {color: red; font-weight: bold;}

#explanation {
  position: absolute;
  top: 620px;
  left: 20px;
  width: 80%;
}