body {
	font-family: "Nimbus Mono L", "FreeMono", "Courier New", monospace;
	font-size: 10pt;
}

#screen {
	border: 1px solid black;
	line-height: 0px;
	width: 800px;
	height: 750px;
}

#termDiv > canvas {
	border: 3px solid black;
}

#transcript-frame {
	position: fixed;
	bottom: 0px;
	width:100%;
	margin: 0px;
	padding: 0px;
}
#transcript {
	overflow-y: auto;
	height: 100px;
	width: 600px;
	text-align: left;
	/*line-height: 0.8em;*/
	border: 3px double black;
	padding: 3px;
	margin: 3px;
	background-color: white;
	background-color: rgba(255,255,255,0.7);
	z-index: 99;
}
#transcript div {
	/*display: inline;*/
	padding-left: 20px;
	text-indent: -20px;
	/*margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 0px;
	padding-bottom: 0px;*/
	line-height: 1em;
}

#stats {
	padding: 3px;
	position: fixed;
	border: 3px double black;
	right: 0px;
	top: 0px;
	min-width: 150px;
	max-height: 100%;
	text-align: left;
	margin: 3px;
	background-color: white;
	background-color: rgba(255,255,255,0.7);
	overflow-y: auto;
	max-height: 95%;
	z-index: 99;
}
.bar {
	width: 100px;
	border: solid black 1px;
	padding: 0px;
	height: 10px;
}
.bar-inner {
	margin: 0px;
	height: 10px;
}

#menu {
	padding: 3px;
	position: fixed;
	border: 3px double black;
	left: 0px;
	top: 0px;
	min-width: 150px;
	text-align: left;
	margin: 3px;
	background-color: white;
	background-color: rgba(255,255,255,0.7);
	overflow-y: auto;
	max-height: 97%;
	z-index: 99;
}
#menu ol {
	list-style: lower-latin;
}
#menu ol li {
	cursor: pointer;
}
#menu ol li span {
	border-bottom: 1px solid white;
}
#menu ol li .hilite {
	border-bottom: 1px black dotted;
	border-radius: 2px;
	background-color: #DCD0FF;
}
#menu ol li:hover {
	color: green;
}
#menu ol li:hover span {
	border-bottom: 1px dotted green;
}
h3 {
	margin-top: 0px;
	margin-bottom: 8px;
}

#setup, #loadgame, #popup, #credits {
	position: absolute;
	left:40%;
	top: 40%;
	background-color:white;
	border: 3px double blue;
	padding: 3px;
}
#loadgame ol {
	text-align: left;
}
#loadgame li[onclick] {
	cursor: pointer;
	text-decoration: underline;
	color: blue;
}
#no-cookies {
	color: red;
}
#popup {
	max-width: 30%;
	max-height: 30%;
	overflow-y: auto;
	z-index: 99;
	padding: 12px;
}
#credits {
	padding: 8px;
	margin: 5px;
	top: 10%;
	left: 45%;
}
#credits dt {
	font-weight: normal;
	text-decoration: underline;
	color: green;
	margin-bottom: 12px;
	margin-top: 12px;
}
#credits dd {
	font-style: italic;
	margin-left: 0px;
	margin-bottom: 3px;
	margin-top: 8px;
	line-height: 99%;
}

#help {
	padding: 3px;
	position: fixed;
	border: 3px double black;
	left: 0px;
	top: 0px;
	bottom: 0px;
	right: 0px;
	text-align: left;
	margin: 3px;
	background-color: white;
	overflow-y: auto;
	z-index: 100;
}
.help-button {
	height: 20px;
	border: 2px black outset;
	background-color: silver;
	text-align: center;
	display: inline-block;
	padding: 3px;
	min-width: 100px;
	cursor: pointer;
}
.help-selected {
	border-style: inset;
}
dt {
	font-weight: bold;
}
#help-close-button {
	min-width: 20px;
	width: 20px;
	color: maroon;
}
#help-close-button:hover {
	color: red;
}

#commands {
	padding: 3px;
	position: fixed;
	border: 3px double black;
	left: 0px;
	top: 0px;
	text-align: left;
	margin: 3px;
	background-color: white;
	background-color: rgba(255,255,255,0.7);
	width: 16em;
	z-index: 99;
}
#commands-direction td {
	font-family: "Charis SIL", "Doulos SIL", "Lucida Sans Unicode", "Deja Vu Sans", "Bitstream Vera Sans", sans-serif;
	font-size: 13pt;
	border: 2px black outset;
	background-color: silver;
	text-align: center;
	width: 100%;
	width: 30px;
	cursor: pointer;
}
#commands-direction td:hover {
	border-style: inset;
}
.command-button {
	height: 15px;
	border: 2px black outset;
	background-color: silver;
	text-align: center;
	display: inline-block;
	padding: 3px;
	min-width: 50px;
	cursor: pointer;
	margin-bottom: 0.5ex;
}
.command-button:hover {
	border-style: inset;
}
.command-tooltip {
	display:none;
}
#command-status {
	background-color: grey;
	border: 1px dashed purple;
	margin-top: 0.5em;
	min-height: 1em;
}
#command-help {
	min-width: auto;
}

.footer {
	position: fixed;
	bottom: 3px;
	right: 3px;
	font-style: italic;
	font-size: 75%;
	cursor: pointer;
	color: green;
}
#header {
	position: fixed;
	top: 0px;
}
.subtitle {
	font-size: 75%;
}

.analyzable:hover {
	font-weight: strong;
	font-style: oblique;
	cursor: pointer;
}

ul.analysis {
	list-style: none;
}

.analysis li {
	text-indent: -20px;
	padding-left: 20px;
}

.analysis {
	margin: 0px;
	padding-left: 7px;
}

.analysis dt {
	float: left;
	clear: left;
	width: 57px;
	text-align: right;
	font-style: oblique;
	font-weight: normal;
}

.analysis dt:after {
	content: ":";
}

.analysis dd {
	margin-left: 65px;
}

.tilesheet {
	display: none;
}

#library-input {
	margin-bottom: 5px;
}

.lib-link {
	border-bottom: 1px dotted silver;
	cursor: pointer;
}
.lib-link:hover {
	color: green;
	border-bottom-color: green;
}
#stats .lib-link {
	border-bottom: none 0px;
	cursor: inherit;
}
#stats .lib-link:hover {
	color: inherit;
}

#transcript:hover, #stats:hover, #commands:hover, #menu:hover {
	background-color: white;
}

#stats ol {
	margin: 0px;
	margin-left: -1em;
}
#stats ol li {
	cursor: pointer;
	text-indent: -0.6em;
}
#stats ol li:hover {
	color: green;
}

.hotlist * {
	cursor: pointer;
}
.hotlist :hover {
	color: green;
}

li.divider {
	list-style: none;
	height: 1px;
	background-color: silver;
}

.secret-value {
	display: none;
}

#library-input {
	width: 50%;
}

/* Inventory colour-coding! */

.inventory-range {
	color: red;
}
.inventory-food {
	color: green;
}
.inventory-scroll {
	color: purple;
}
.inventory-potion {
	color: blue;
}
.inventory-sack {
	font-weight: 600;
	color: brown;
}
.inventory-equip {
	font-style: oblique;
}
.inventory-key {
	font-weight: 600;
	color: green;
}
.inventory-portal-shard {
	font-weight: 500;
	color: purple;
}
.equip-left-hand {
	color: blue;
}
.equip-right-hand {
	color: red;
}
.equip-head, .equip-torso,
.equip-hands, .equip-legs,
.equip-feet {
	color: brown;
}
.equip-neck, .equip-finger, .equip-wrist {
	color: darkorange;
}
.equip-back, .equip-waist,
.equip-ears, .equip-eyes, {
	color: purple;
}