/*
   New Perspectives on HTML and CSS
   Tutorial 5
   Case Problem 1

   Sudoku Puzzle Table Style Sheet
   Author: Mauricio Rivas Briceno
   Date:   10/08/2025

   Filename:         stable.css
   Supporting Files: green.jpg, gold.jpg
*/

/* === GENERAL TABLE SETTINGS === */
/* Remove spacing between cells and collapse borders
   for both the outer Sudoku table and inner subTables */
table.spuzzle,
table.subTable {
  border-collapse: collapse;
  border-spacing: 0;
}

/* === OUTER TABLE CELL BORDER === */
/* Adds a thick gray border to the main Sudoku grid cells */
table.spuzzle td {
  border: 5px outset gray;
}

/* === HEADER CELL STYLING === */
/* Sets small gray text for header cells (digits and row labels) */
table.spuzzle th {
  font-size: 8px;
  color: gray;
}

/* === HEADER ROW HEIGHT === */
/* Sets the row label height within the Sudoku grid */
table.spuzzle tbody th {
  height: 40px;
}

/* === INNER CELL STYLING (subTable) === */
/* Styles each individual Sudoku cell inside the 3x3 boxes */
table.subTable td {
  font-size: 20px;
  color: blue;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  border: 1px solid black;
}

/* === GOLD BOX BACKGROUND === */
/* Applies the gold.jpg background centered within cells
   of the goldBox class, without tiling */
.goldBox td {
  background-image: url("gold.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

/* === GREEN BOX BACKGROUND === */
/* Applies the green.jpg background centered within cells
   of the greenBox class, without tiling */
.greenBox td {
  background-image: url("green.jpg");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}