@font-face {
	font-family:Marlett;
	src:url(fonts/marlett.ttf) format("TrueType");
}
@font-face {
	font-family:Tahoma;
	src:url(fonts/tahoma.ttf) format("TrueType");
}
@font-face {
	font-family:Tahoma;
	src:url(fonts/tahomabd.ttf) format("TrueType");
	font-weight: bold;
}

@font-face {
	font-family:Trebuchet;
	src:url(fonts/trebuc.ttf) format("TrueType");
}
@font-face {
	font-family:Trebuchet;
	/* src:url(fonts/trebucbd.ttf) format("TrueType"); */
	src:url(fonts/trebucbd.otf) format("OpenType");
	font-weight: bold;
}
@font-face {
	font-family: "Lucida Console";
	src:url(fonts/LUCON.TTF) format("TrueType");
}

.hidden {
	visibility: hidden;
}

body, .window button:hover  {
	cursor: url("images/cursor.png"), auto;
}

.window {
	position: absolute;
	/* background-color: #ECE9D8; */
	border: 4px solid;
	border-top: none;
	border-image: url("images/window_border.png") 30 5 4 / 30px 5px 4px / 0 4px 4px;
	border-image-outset: 0;
	font-family: Tahoma;
	font-size: 12px;
	display: flex;
	flex-direction: column;
	min-width: 175px;
	min-height: 75px;
}
.window > * {
	background-color: #ECE9D8;
}

.window-body {
	flex-grow: 1;
}

.window-body input {
	width: 100%;
}


.window-body input[type="range"]{
	appearance: none;
	height: 21px;
	box-sizing: border-box;
	border-radius: 0;
	background:none;
	margin:0;
	padding:0;
	outline: none;
	box-shadow: none;
	border: none;
}
.window-body input[type="range"]::-webkit-slider-runnable-track {
	appearance: none;
	height: 4px;
	box-sizing: border-box;
	border-radius: 0;
	background:none;
	margin: 0;
	padding: 0;
	outline: none;
	box-shadow: none;
	border: 2px solid;
	border-image: url("images/slider_border.png") 2 2 / auto;
}
.window-body input[type="range"]::-moz-range-track {
	appearance: none;
	height: 4px;
	box-sizing: border-box;
	border-radius: 0;
	background:none;
	margin:0;
	padding:0;
	outline: none;
	box-shadow: none;
	border: 2px solid;
	border-image: url("images/slider_border.png") 2 2 / auto;
}

.window-body input[type="range"]::-webkit-slider-thumb{
	appearance: none;
	border:none;
	border-radius: 0;
	width: 11px;
	height: 21px;
	outline: none;
	box-shadow: none;
	transform: translateY(-10px);
	background: url("images/window_buttons.png") left -63px;
}
.window-body input[type="range"]::-moz-range-thumb {
	appearance: none;
	border:none;
	border-radius: 0;
	width: 11px;
	height: 21px;
	outline: none;
	box-shadow: none;
	transform: translateY(1px);
	background: url("images/window_buttons.png") left -63px;
}
.window-body input[type="range"]:hover::-webkit-slider-thumb{
	background-position-x: -11px;
}
.window-body input[type="range"]:hover::-moz-range-thumb{
	background-position-x: -11px;
}
.window-body input[type="range"]:active::-webkit-slider-thumb{
	background-position-x: -22px;
}
.window-body input[type="range"]:active::-moz-range-thumb{
	background-position-x: -22px;
}
.window-body input[type="range"]:disabled::-webkit-slider-thumb{
	background-position-x: -33px;
}
.window-body input[type="range"]:disabled::-moz-range-thumb{
	background-position-x: -33px;
}


.window-body button {
	border: none;
	margin: 0;
	padding: 0 4px;
	height: 21px;
	box-sizing: border-box;
	font-size: 12px;
	font-family: Tahoma;
	border-style: solid;
	background:none;
	border-image: url("images/button.png") 3 fill / auto;
	color: black;
}
.window-body button:focus {
	border-image-source: url("images/button_focused.png");
}
.window-body button:disabled {
	border-image-source: url("images/button_disabled.png");
	color: #A1A192;
}
.window-body button:hover:enabled {
	border-image-source: url("images/button_hover.png");
}
.window-body button:active:enabled {
	border-image-source: url("images/button_pressed.png");
}


.title-bar {
	min-height: 30px;
	height: 30px;
	background: url("images/window_buttons.png");
	background-position-y: bottom;
	background-size: 100% 380%;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	padding-top: 3px;
	margin: 0 1px;

	font-size: 13px;
	text-shadow: 1px 1px #00000080;
	color: white;
	font-family: Trebuchet;
	font-weight: bold;
}

.title-bar img {
	width: 16px;
	height: 16px;
	margin-left: 2px;
	margin-top: -1px;
	margin-right: 4px;
	user-select: none;
	pointer-events: none;
}

.title-bar div {
	flex-grow : 1;
	margin-top:2px;
	margin-right: 1em;
}

.title-bar button{
	width: 21px;
	height: 21px;
	border:none;
	padding: 0;
	margin: 0 2px 0 0;
	color: white;
	font-family: Marlett;
	background: url("images/window_buttons.png");
}
.title-bar button[aria-label="Close"]{
	background-position-x: -21px;
}

.title-bar button:hover:enabled{
	background-position-y: -21px;
}
.title-bar button:active:enabled{
	background-position-y: -42px;
}
.title-bar button:disabled {
	opacity: 50%;
}

.menu-bar {
	height: 20px;
	box-sizing: border-box;
	border-bottom: 1px solid white;
	display: flex;
	align-items: stretch;
	justify-content: left;
	position: relative;
}
.menu-bar button {
	background:none;
	border:none;
	padding: 0 6px 0 7px;
	margin:0;
	font-size: 12px;
	color: black;
}
.menu-bar button:is(:hover,.open){
	background-color: #316AC5;
	color: white;
}

.menu-body {
	position: absolute;
	left: 0;
	top: 19px;
	z-index: 1;
	background-color: white;
	border: 1px solid #ACA899;
	box-shadow: 2px 2px 2px #00000080;
	padding: 2px;
	display: flex;
	flex-direction: column;
}
.menu-body button {
	text-align: left;
	height: 17px;
	padding: 0 22px 0 17px;
	box-sizing: border-box;
}

.menu-body .menu-item-toggle:before {
	content:"a";
	font-size: 1.25em;
	position: absolute;
	left: 2px;
	font-family: "Marlett";
}


.status-bar {
	height: 24px;
	font-size: 11px;
	box-sizing: border-box;
	border-top: 1px white solid;
	background-image: linear-gradient(to right, #EFEFE8, #EBEAD9);
	background-repeat: no-repeat;
	background-size: 50px auto;
	display: flex;
	align-items: center;
	padding-left: 2px;
	padding-top: 2px;
	box-shadow: inset 0 25px 4px -25px #000000,
		inset 0 -25px 6px -25px #00000040;
}


.field {
	display: flex;
	justify-content: space-between;
	gap: 8px;
}
.field > * {
	flex-grow: 1;
}