/* Default stylesheet. Copyright by Michael Benson for MathBin. 2020-01-28. */
/* 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; }
}

/* Header */
header { width:100%; text-align:center; background-color:white; }
header table { width:100%; border:0; padding-left:8px; padding-right:8px; font-family:Georgia; }
header h1, h2, h3, h4 { font-family:Georgia; font-weight:bold; }
header h1 { font-variant:small-caps; }

/* Sticky Footer - sticks to the bottom of the page. */
footer { width:100%; text-align:center; background-color:white; font-family:Verdana; color:black; position:fixed; bottom:0; }
footer table { width:100%; border:0; table-layout:fixed; padding-left:8px; padding-right:8px; }
footer table th { 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; }

/* Code and math styles. */
pre { margin-left:3px; font-family:"Courier New", Courier, mono; white-space:pre; tab-size:3; -moz-tab-size:3; -o-tab-size:3; }
code { font-family:"Courier New", Courier, mono; }
var { font-family:mono; }
sub { font-size:smaller; }
sup { font-size:smaller; }

/* 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; }

/* JavaScript Bins. */
#imgFlex { float:left; margin-right:4px; }

/*
   Flexbox: https://www.w3schools.com/css/css3_flexbox.asp#flex-direction
	flex-direction: row, column, row-reverse, column-reverse
	flex-wrap: wrap, nowrap
	justify-content: flex-start, center, flex-end, space-around, space-between
	align-items: flex-start, center, flex-end, stretch, baseline
	align-content: stretch, flext-start, center, flex-end, space-around, space-between
*/
#divFlex {
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:flex-start;
	margin-right:0px;
	border:0px solid black;
	height:90vh;
}

/* Control Panel. Form allows: (1) pressing Enter key same as Submit button. (2) Set focus on first field. */
#frmBin { width:320px; border:1px solid gray; margin:1px; }
.clsBin { width:100%; table-layout:fixed; }
.clsBin tbody td:nth-child(1) { border:0; text-align:right; }
.clsBin tbody td:nth-child(3) { border:0; text-align:right; }
.clsBin input[type="text"]   { width:100%; box-sizing:border-box; border:1px solid gray; }
.clsBin input[type="submit"] { width:72px; margin-left:16px; margin-right:16px; }
.clsBin input[type="reset"]  { width:72px; margin-left:16px; margin-right:16px; }
.clsBin select { width:100%; }

#btnStart { width: 84px; }
#btnReset { width: 84px; }

/* Output. */
#divOut  { flex:1; border:1px solid gray; margin:1px; }
#divOut div { height:100%; margin:1px; padding:0; }
#divOut1 { border:1px solid green; }
#divOut2 { border:1px solid purple; }
#divOut3 { border:1px solid black; }