/* Default stylesheet. Copyright by Michael Benson for Mystery Master. 2024-12-10 */
/* All pages should include this stylesheet. */

body { max-width:100%; margin:0 auto; padding:4px; }

/* Asterisk means the style is applied to everything.  */
* {
	font-size:14pt; font-family:'Segoe UI',Tahoma,Helvetica,Sans-Serif;
}

@media only screen and (max-width:800px) {
	* { font-size:12pt; }
}

@media only screen and (max-width:700px) {
	* { font-size:10pt; }
}

@media only screen and (max-width:600px) {
	* { font-size:8pt; }
}

@media only screen and (max-width:500px) {
	* { font-size:6pt; }
}

/* Sticky Header - sticks to the top of the page. */
header { width:100%; margin:0; padding:0; text-align:center; background-color:white; position:fixed; top:0; left:0; }
header table { width:100%; margin:0; padding:0; border:0; font-family:Georgia; }
header table th { margin:0; padding:0; border:0; }
header h1, h2, h3, h4 { font-family:Georgia; font-weight:bold; }
header h1 { font-variant:small-caps; }
.imgScrollTo { margin:0; padding:0; width:20px; height:20px; }

/* Sticky Footer - sticks to the bottom of the page. */
footer { width:100%; margin:0; padding:0; text-align:center; background-color:white; position:fixed; bottom:0; left:0; font-family:Verdana; color:black; }
footer table { width:100%; margin:0; padding:0; border:0;}
footer table th { margin:0; padding:0; font-weight:normal; }
footer span { font-size:smaller; }

/* Header tags. */
h1, h2, h3, h4 { margin:0; }

p  { text-align:justify; margin-top:0; }
ol { text-align:left; }
ul { text-align:left; }
li { text-align:justify; }

a         { text-decoration:none; color:Blue; }
a:link    { text-decoration:none; color:Blue; }
a:visited { text-decoration:none; color:Blue; }
a:active  { text-decoration:none; color:Blue; }
a:hover   { text-decoration:underline; color:Purple; }

/** Border for clickable elements. Use none to remove the border. */
a:focus { outline:none !important; }

/* Class for fun images. Note: JavaScript creates a style sheet to show/hide (inline/none) these images. */
.imgFun { float:right; display:inline; border:1px solid gray; margin:3px; }

/* For code examples. */
pre { margin-left:3px; font-family:"Courier New", Courier, mono; white-space:pre; tab-size:3; -moz-tab-size:3; -o-tab-size:3; background-color:whitesmoke; }
code { font-family:"Courier New", Courier, mono; }

/* For potentially large blocks of code. */
.codeBlock { border:1px solid gray; max-height:400px; overflow-y:scroll; white-space:pre-wrap; overflow-wrap:normal; }

/* Generic class for tables. */
.tbl { margin: 0 auto; }
.tbl thead th { border:1px solid black; }
.tbl thead td { border:1px solid black; }
.tbl tbody th { border:1px solid gray; font-weight:normal; }
.tbl tbody td { border:1px solid gray; }