body {
	color:var(--textcolor);
	background-color:var(--mainbg);
	font-family:verdana;sans-serif;
	-webkit-font-smoothing: antialiased;
	margin-bottom:6em;
}

h1 {
	font-family: 'Menlo', 'Courier New', monospace;
	font-size:140%;
	text-align:center;
	margin:3em 0;
	color:darkgray;
	font-weight:bold;
	letter-spacing:2px;
}

.beta {
	vertical-align:super;
	font-size:60%;
	color:var(--gray60);
}

h2 {
	font-size:120%;
}

label {
	white-space:nowrap;
}

th {
	text-align:left;
	white-space:nowrap;
	padding:0 4px;
}

td {
	border-top:1px solid #777;
	vertical-align:top;
	padding:2px 6px;
}

textarea {
	padding:0 0.5em;
	background-color:var(--gray80) !important;
	color:black !important;
}

textarea::placeholder {
	color:var(--gray40) !important;
	font-style:italic;
}

.process, .trash, .export {
	float:right;
}

.process {
	display:none;
}


table.parts {
	position: relative;
	width:100%;
}


th.parcode {
	text-align:center;
}

td p {
	margin:0;
}

.result {
	display:none;
}

.changes {
	margin:0 8em;
}

.changes .content {
	overflow:auto;
}
.changes .table td {
	color:var(--textcolor);
}

.changes .set {
	font-family:monospace;
}

.chgtog {
	cursor:pointer;
}

.chgtog .glyphicon {
	font-size:70%;
	padding-left:4px;
}

.output .content {
	white-space:pre;
	font-family:monospace;
	color:var(--black);
	background-color:var(--gray80);
	border-radius:6px;
	padding:1em 1em;
	overflow:auto;
}

.output .outp {
	Xwhite-space:pre;
	display:inline-block;
	margin:0;
}

.nochg {
	color:var(--gray60);
}

.nochgmsg {
	color:red;
	text-align:center;
}

.copied {
	background-color:#9CF;
}

.icount {
	font-size:80%;
	margin-left:0.5em;
	color:var(--white);
	background-color:green;
	padding: 1px 6px 3px 6px;
	border-radius:8px;
}

.diff ins {
	color:#99ff99;
	background-color:#004d00;
}
.diff del {
	color:#ffb3b3;
	background-color:#4d0000;
}

.cpyr {
	text-align:center;
	font-size:60%;
	color:var(--gray60);
	margin-top:60em;
}

.accordion {margin:0 4em}
.accordion-button {font-size:100%}

.howto h2 {font-size:120%}
.howto h3 {font-size:100%}
.howto .user {
	font-family:monospace;
	font-weight:bold;
	color:#3CF;
}

.main {
	margin-left:auto;
	margin-right:auto;
}

.build, .built, .spec {
	text-align:center;
}

.build {
	margin:3em;
}

.built {
	font-size:120%;
	display:none;
	margin-bottom:3em;
}

.spec {
	font-size:120%;
	margin-bottom:2em;
}

.accordion-button .icon {
	width:1.5em;
	color:var(--gray60);
}

.accordion-button.collapsed:hover .icon {
	color:var(--white);
}

h1 br {
	display:none;
}

@media screen and (max-width: 700px) {
	.fluff2 {
		display:none;
	}

	h1 {
		font-size:120%;
		margin:0.5em 0 1.5em 0;
	}

	.build {
		text-align:left;
		Xmargin:3em;
	}

	.built {
		font-size:100%;
	}

	h1 br {
		display:block;
	}

	h2 {
		text-align:center;
	}
}

@media screen and (max-width: 1400px) {
	.fluff {
		display:none;
	}

	.main {
		width:100%;
	}

	.accordion {margin:0}

	.build {
		font-size:80%;
	}

	.changes {margin:0};
}

.pno {
	font-weight:bold;
	padding-right:1em;
}

.set .in, .set .out {
	display: block;
	unicode-bidi: embed;
	font-family:"Lucida Console", monospace;
	font-size:12pt;
	white-space: pre;  /* show extra spaces */
}

.set .mod {
	font-size:11pt;
	font-style:italic;
	color:var(--modscolor);
}



/* DEBUG */

.debug {
	color:var(--textcolor);
	background-color:#222;
	column-span:all;
	unicode-bidi: embed;
	outline:1px solid blue;
	border-radius:20px;
	margin:1em;
	padding:0 1em 1em 1em;
	overflow:auto;
	text-align:left;
}

.debug .title {
	Xtext-align:center;
	font-size:110%;
	margin:-0.1em 0 -1em 0;
}

.debug .val {
	font-family: monospace;
	font-size:90%;
	white-space: pre;
	margin-left:1em;
}