/* App stylesheet. Copyright by Michael Benson for Mystery Master. 2018-08-08. */
/* Note: The width of the body is set in default.css. */

/* Display vertical scrollbar to avoid "content-shift" when tabbing between long/short content.  */
body { overflow-y:scroll; }

/* Remove outline for all buttons. */
button { outline-style:none !important; }
button::-moz-focus-inner { border:0; }

/* Container for the Solver controls. This contains the Board and the Tabs. Hide if no JavaScript. */
#divSolver { clear:both; display:block; }

/* Defining margin:auto; centers the inner elements (div, table, etc.) */
#divSolver div { margin:0 auto; }
#divSolver table { margin:0 auto; }

/* Board table. Center table with margin:0 auto; Note: use em (NOT px) for resizing! */
.clsBoard { margin:0 auto; border:1px solid gray; padding:1px; }
.clsBoard th { font-weight:normal; border:1px solid gray; text-align:center; }
.clsBoard td { font-weight:normal; border:1px solid gray; text-align:right; }
.clsBoard input  { width:2.8em; text-align:right; resize:none; border:0; }
.clsBoard button { width:4.8em; cursor:pointer; border:0; }
.clsBoard textarea { text-align:left; width:100%; box-sizing:border-box; border:0; }

/* Tabby */
#divTabby { border:0; }

/* Tabby - container for all of the tab buttons. */
#divTabButtons { border:0; text-align:center; }
#divTabButtons button { cursor:pointer; border:1px solid gray; }

/* Tabby - container for all of the tab contents. */
#divTabContents {
	border:0; text-align:center; resize:vertical;
}

/* Tabby - affect divs only one level down. Initially hide the content of each tab. */
#divTabContents > div { border:0; display:none; }

/* Application tables: Nouns, Verbs, Links, LinkGrid, Facts, Rules, Marks, Chart, Grids, Stats, Setup. */
.clsAppTable { margin:0 auto; border:1px solid silver; }
.clsAppTable th { white-space:nowrap; overflow:hidden; resize:none; padding:1px; border:1px solid silver; color:cyan; font-weight:normal; background-color:darkslategray; }
.clsAppTable td { white-space:nowrap; padding:1px; border:1px solid gray; }
.clsAppTable td input { width:100%; }

/* Nouns table. */
.clsNouns th { width:10em; text-align:center; }
.clsNouns td { width:10em; text-align:left; }
.clsNouns th:nth-child(1) { width:4.0em; text-align:center; }
.clsNouns td:nth-child(1) { width:4.0em; text-align:center; }

/* Verbs table. */
.clsVerbs th:nth-child(1) { width: 4.0em; }
.clsVerbs th:nth-child(2) { width: 8.0em; }
.clsVerbs th:nth-child(3) { width:16.0em; }
.clsVerbs th:nth-child(4) { width: 4.5em; }
.clsVerbs td:nth-child(1) { width: 4.0em; text-align:center; }
.clsVerbs td:nth-child(2) { width: 8.0em; text-align:left; }
.clsVerbs td:nth-child(3) { width:16.0em; text-align:left; }
.clsVerbs td:nth-child(4) { width: 4.5em; text-align:center; }

/* Links table. */
.clsLinks th:nth-child(1) { width: 4.5em; }
.clsLinks th:nth-child(2) { width:10.0em; }
.clsLinks th:nth-child(3) { width:15.0em; }
.clsLinks th:nth-child(4) { width: 1.7em; }
.clsLinks td:nth-child(1) { width: 4.5em; text-align:center; }
.clsLinks td:nth-child(2) { width:10.0em; text-align:left; }
.clsLinks td:nth-child(3) { width:15.0em; text-align:left; overflow:hidden; }
.clsLinks td:nth-child(4) { width: 1.7em; text-align:center; }
.clsLinks td input { border:0; }

/* Link Grid table. */
.clsLinkGrid th { width:10em; font-weight:normal; }
.clsLinkGrid td { border:1px solid gray; text-align:center; }
.clsLinkGrid th:nth-child(1) { text-align:center; }
.clsLinkGrid td:hover { border:1px solid yellow; }

/* Facts table. */
.clsFacts th:nth-child(1) { width: 4.0em; }
.clsFacts th:nth-child(2) { width: 1.5em; }
.clsFacts th:nth-child(3) { width: 4.0em; }
.clsFacts th:nth-child(4) { width:40.0em; }
.clsFacts td:nth-child(1) { width: 4.0em; text-align:center; }
.clsFacts td:nth-child(2) { width: 1.5em; text-align:center; }
.clsFacts td:nth-child(3) { width: 4.0em; text-align:right; }
.clsFacts td:nth-child(4) { width:40.0em; text-align:left; overflow:hidden; }
.clsFacts td input[type=text] { border:0; }

/* Rules table. */
.clsRules th:nth-child(1) { width: 4.0em; }
.clsRules th:nth-child(2) { width: 1.5em; }
.clsRules th:nth-child(3) { width: 4.0em; }
.clsRules th:nth-child(4) { width:40.0em; }
.clsRules td:nth-child(1) { width: 4.0em; text-align:center; }
.clsRules td:nth-child(2) { width: 1.5em; text-align:center; }
.clsRules td:nth-child(3) { width: 4.0em; text-align:right; }
.clsRules td:nth-child(4) { width:40.0em; text-align:left; overflow:hidden; }
.clsRules td input { border:0; }

/* Marks table. */
.clsMarks th:nth-child(1) { width: 4.0em; }
.clsMarks th:nth-child(2) { width: 1.5em; }
.clsMarks th:nth-child(3) { width: 1.5em; }
.clsMarks th:nth-child(4) { width: 4.0em; }
.clsMarks th:nth-child(5) { width:40.0em; }
.clsMarks td:nth-child(1) { width: 4.0em; text-align:center; }
.clsMarks td:nth-child(2) { width: 1.5em; text-align:center; }
.clsMarks td:nth-child(3) { width: 1.5em; text-align:center; }
.clsMarks td:nth-child(4) { width: 4.0em; text-align:center; }
.clsMarks td:nth-child(5) { width:40.0em; text-align:left; overflow:hidden;  }
.clsMarks input { border:0; width:100%; }

/* Chart table. */
.clsChart th { width:10em; white-space:nowrap; overflow:hidden; resize:none; cursor:pointer; }
.clsChart td { width:10em; white-space:nowrap; overflow:hidden; resize:none; text-align:left; }

/* Small Grid table. */
.clsGrids td { text-align:center; cursor:pointer; width:10em; }
.clsGrids th { font-weight: normal; }
.clsGrids th:nth-child(1) { width:15em; text-align:right; }
.clsGrids td:nth-child(1) { text-align:left; }

.pnlGrids > * { vertical-align:middle; }
.pnlGrids input { width:1.5em; height:1.5em; text-align:center; }

/* Big Grid table. */
.clsBigGrid th { width:1.5em; white-space:nowrap; overflow:hidden; font-weight:normal; }
.clsBigGrid td { width:1.5em; white-space:nowrap; overflow:hidden; text-align:center; }
.clsBigGrid th:nth-child(1) { width:10em; text-align:center; }
.clsBigGrid td:nth-child(1) { width:10em; text-align:right; }
.clsBigGrid td:hover { border:1px solid yellow; }

.clsBigGrid .clsGridSep { width:1px; min-width:1px; max-width:1px; border:0; }

/* Grid Controls div. */
.clsGridControls { text-align:center; }
.clsGridControls label { display:inline-block; width:8em; text-align:left; cursor:pointer; }
.clsGridControls button { width:4.8em; height:4.8em; margin:0.5em; cursor:pointer; border:1px solid gray; }

/* Separator between grids. */
.clsGridSep { width:1px; }

/* Stats table. */
.clsStats { table-layout:fixed; }
.clsStats th { width:3.8em; font-weight:normal; }
.clsStats td { width:3.8em; text-align:right; }
.clsStats td:nth-child(1) { text-align:center; }

/* Setup table. */
.clsSetup { margin:0 auto; border:0; padding:2px; }
.clsSetup td { vertical-align:top; padding:0 2em 0 2em; text-align:left; }
.clsSetup td input { width:auto; min-width:0; }
.clsSetup button { cursor:pointer; border:1px solid gray; }
.clsSetupHeader { font-weight:bold; text-align:center; }