:root {
	--light-H:48deg;
	--light-S:50%;
	--light-L:92%;
	--light-color:hsl(var(--light-H) var(--light-S) var(--light-L));
	--light-colorL:hsl(var(--light-H) var(--light-S) calc(var(--light-L) + 5%));
	--bg-light:var(--light-color) url(../img/light.png) repeat;
	--bg-light-canvas:#E9E7DE url(../img/light_canvas.jpg) repeat;

	--dark-H:21deg;
	--dark-S:40%;
	--dark-L:70%;
	--dark-color:hsl(var(--dark-H) var(--dark-S) var(--dark-L));
	--dark-colorL:hsl(var(--dark-H) var(--dark-S) calc(var(--dark-L) + 5%));
	--dark-colorD:hsl(var(--dark-H) var(--dark-S) calc(var(--dark-L) - 5%));
	--bg-dark:var(--dark-color) url(../img/dark.png) repeat;

	--menu-width:320px;
}

.hidden {
	display: none !important;
}

* {
	box-sizing: border-box;
}

body {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	font-family: Arial, sans-serif;
	background: var(--bg-light);
	border-top: 1px solid transparent;	/*children margins fix*/
}


h2 {
	margin: 0px; padding: 0px;
	font-weight: normal;
	font-size: 12pt;
	text-align: center;
}

h3 {
	margin: 20px 0px 5px;
	font-weight: bold;
	font-size: 11pt;
	font-style: italic;
	color: #A00;
	text-shadow: #FFF 0px 1px 0px;
}
h3[onclick] { cursor: pointer; }
h3[onclick]:hover { box-shadow: inset 0 -4px 4px 0 #DEB09B; }
h4 {
	margin: 0;
	font-weight: bold;
	font-size: 11pt;
	font-style: italic;
	color: #A00;
	text-shadow: #FFF 0px 1px 0px;
}

button {
	position: relative;
	border: 1px groove;
	padding: .2em .8em;
	border-radius: .5em/1em;
	background: linear-gradient(#FDFDFD, #D2D9DD);
	text-align: center;
	font-weight: bold;
	font-size: 12px;
	white-space: nowrap;
	cursor: pointer;
	overflow: hidden;
	user-select: none;
}
button:hover {
	background: linear-gradient(#FDFDFD, #C3CCD2);
}

img {
	border-width: 0px;
}

a {
	margin: 0px;
	padding: 0px;
}

input:not([type]), input[type=""], input[type="text"],
input[type="password"], input[type="number"], input[type="datetime-local"] {
	background-color: #FFF;
	border: 1px solid;
	border-color: #AF8B7A #DEB09B #DEB09B #AF8B7A;
	outline: none;
	padding: 2px;
}

label * { vertical-align: middle; }

/* any interface window */
.window {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	position: relative;
	background: var(--bg-dark);
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
	border-radius: 5px;
	padding: 5px 8px 10px 8px;
}

.window .title {
	border-top: 2px groove #DEB09B;
	margin-bottom: 4px;
	cursor: default;
	font-weight: bold;
	font-size: 16px;
	text-align: center;
	color: #3C302A;
	text-shadow: 0px 0px 10px #fff;
}

/* interface window canvas for content */
.window .canvas {
	flex: 1;
	position: relative;
	background: var(--bg-light-canvas);
	border-radius: 3px;
	border: 1px solid;
	border-color: var(--dark-colorD) var(--dark-colorL) var(--dark-colorL) var(--dark-colorD);
	padding: 5px;
	overflow: auto;
}

.window.dialog {
	display: table;
	margin: 5vh auto 0 auto;
}

.window.dialog > .canvas {
	text-align: center;
}

.window.dialog:first-child {
	margin-top: 20vh;
}