/*


Standards:

Keep articles simple - under 10,000 bytes.
Write the articles as if there are no images. Add images later to help.
80 chars, find with: (<br>|.{81,})
<br> should be used for line breaks, not spacing


*/


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~ Override Default HTML ~~~~~~~~~~~~~~~~~~~~~~~~~~*/


* {
	box-sizing:border-box;
	padding:0;
	border:0;
	border-collapse:collapse;
	margin:0;
	outline:none;
	text-decoration:none;
	font-size:100%;
	vertical-align:baseline;
}
body {
	/* Prevent the screen from oscillating around resizing javascript because of
	the scrollbar. */
	overflow-y:scroll;
	/* Repeat the background twice horizontally. The right side of the left copy, and
	the left side of the right copy, will be covered by the content. */
	/*background-image:url("./background.png");*/
	background-size:50% auto;
	background-repeat:repeat;
	background-attachment:fixed;
	background-color:#000000;
	/*background-color:#efefef;*/
	color:#e6e6e6;
	/*font-family:Montserrat,sans-serif,sans-serif;*/
	font-family:Arial,"Lucida Grande","Lucida Sans Unicode","GNU Unifont",Verdana,Helvetica,sans-serif;
	/*font-size:calc(0.45*( 1.5vh + 1.1vw ));*/
	/*font-size:calc(1.00*( 0.5em + 1.0vh ));*/
	font-size:clamp( 0.9rem , 0.25vw + 0.85rem , 1.15rem );
	/*line-height:140%;*/
	/* Prevent weird font resizing on mobile. */
	-webkit-text-size-adjust:none;
	-moz-text-size-adjust:none;
	-ms-text-size-adjust:none;
	text-size-adjust:none;
}
a, a:hover {
	color:#ffa500;
	/*background-color:rgb(210,210,210);*/
	/*font-family:sans-serif,sans-serif;*/
	/*font-weight:bold;*/
}
a:hover {
	text-decoration:underline;
}
sup {
	vertical-align:super;
	font-size:80%;
}
sub {
	vertical-align:sub;
	font-size:80%;
}
/* Safari doesn't inherit the baseline */
svg text {dominant-baseline:inherit;}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Main Content ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#content {
	padding:3rem;
	padding-top:0rem;
	padding-bottom:2.8rem;
	/*border:1px solid #808080;*/
	background-color:#1a1a1a;
	margin:auto;
	margin-bottom:3rem;
	margin-top:-4.5rem;
}
canvas, img {
	display:block;
	margin:auto;
	margin-top:3rem;
	margin-bottom:3rem;
}
h1 {
	display:block;
	padding:inherit;
	padding-top:0.5rem;
	padding-bottom:0.5rem;
	border-bottom:inherit;
	border-radius:inherit;
	border-bottom-left-radius:0;
	border-bottom-right-radius:0;
	margin:-3rem;
	margin-top:4.5rem;
	margin-bottom:2.5rem;
	background-color:#6e4c34;
	font-family:sans-serif,sans-serif;
	font-size:170%;
	font-weight:bold;
	line-height:150%;
	color:#eea360;
}
h2 {
	display:block;
	width:100%;
	margin-top:3rem;
	margin-bottom:0rem;
	font-size:170%;
	font-weight:bold;
	color:#e6e6e6;
}
i {
	display:inline-block;
	padding-left:1pt;
	padding-right:1pt;
	background-color:#252525;
	font-style:normal;
	font-family:Consolas,monospace,monospace;
	white-space:pre;
	color:#dcdcdc;
}
p {
	/* border:1px solid black; */
	display:block;
	/*text-align:justify;*/
	margin-top:1.5rem;
	margin-bottom:1.5rem;
}
button, select {
	margin:0.165rem;
	/* margin-left:0.0825rem; */
	/* margin-right:0.0825rem; */
	color:#ffffff;
	border:1px solid;
	border-color:#4e2c14;
	background-color:#6e4c34;
	padding:0.2rem;
	padding-left:0.4rem;
	padding-right:0.4rem;
	cursor:pointer;
	color:#eea360;
}
button:hover, select:hover {
	background-color:#8e6c54;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SVGs ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


.uitable {
	table-layout:fixed;
	width:100%;
}
.uibox {
	margin:0.3rem;
	margin-left:auto;
	margin-right:auto;
	width:2.2rem;
	height:2.2rem;
	border:#000000 2px solid;
	background-color:#303030;
}
.uiinput {
	width:5em;
	padding-left:0.2rem;
	padding-right:0.2rem;
	border:#101010 2px solid;
	background-color:#303030;
	color:#e6e6e6;
}
#uicount {
	margin-left:1rem;
}
#uifiltertable {
	width:100%;
}
#uifiltertable td {
	padding:0.5rem;
	padding-right:1rem;
	padding-left:0;
}
#uifiltertable > tbody > tr > td:nth-child(1) {
	text-align:right;
	width:5em;
}
/*#uifilter > tbody > tr > td:nth-child(2) {
	text-align:right;
}*/
#uistock0, #uistock1 {
	padding:1rem;
	font-weight:bold;
	min-width:13em;
}
#uicreature {
	margin-left:3rem;
}
#uicreature td {
	text-align:center;
	vertical-align:middle;
}
#uicreature td:first-child {
	text-align:right;
	vertical-align:middle;
}
#uioutput {
	width:100%;
	min-height:5rem;
	max-height:40rem;
	overflow-x:scroll;
	overflow-y:scroll;
}
#uioutput > table {
	background-color:#202020;
	border:1px solid #4e2c14;
	border-collapse:separate;
	border-spacing:0;
}
#uioutput > table > tbody > tr:hover > td {
	background-color:#37261a;
}
/* Padding for stock names */
#uioutput > table > tbody > tr > td:nth-child(1) {
	min-width:13em;
}
#uioutput > table > tbody > tr > td:nth-child(2) {
	min-width:13em;
}
#uioutput > table > tbody > tr:first-child {
	top:0;
	position:sticky;
}
#uioutput > table > tbody > tr:first-child > td {
	background-color:#6e4c34;
	color:#eea360;
	text-align:center;
}
#uioutput > table > tbody > tr:first-child > td:hover {
	background-color:#8e6c54;
}
#uioutput > table > tbody > tr > td {
	border:1px solid #4e2c14;
	padding:0.4rem;
	padding-left:0.75rem;
	padding-right:0.75rem;
	cursor:pointer;
}
#uiselrow {
	background-color:#37261a;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Header/Footer ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#header, #footer {
	padding-top:0;
	padding-bottom:0;
	text-align:center;
	color:#ffffff;
}
#header a, #footer a {
	color:#ffa500;
}
#header {
	padding-top:1rem;
	padding-bottom:1rem;
}
#footer {
	margin-top:-1.9rem;
	margin-bottom:3.1rem;
	border:none;
}
#footer b {
	display:none;
	user-select:none
}