style.css

@font-face {
	font-family: "Windows Regular";
 	src: url("Windows Regular.ttf");
}

* {
	box-sizing: border-box;
	user-select: none;
	cursor: default;
	font-family: "Windows Regular", Arial, sans-serif;
}

:focus {
	outline: none;
}

body {
	margin: 0;
	overflow: hidden;
}


#start-screen {
	position: absolute;
	z-index: 5;
	padding: 20px;
	width: 100%;
	height: 100%;
	background-color: #000;
	text-align: center;
}

	#start-screen img {
		height: 100%;
	}

#desktop {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #c3c7cb;
}

	#icon-fullscreen {
		position: absolute;
		bottom: 10px;
		left: 10px;
	}

		#icon-fullscreen .icon-button {
			margin-left: auto;
			margin-right: auto;
			width: 32px;
			height: 32px;
			border: 2px outset;
			box-shadow: 1px 0px #000, 0px 1px #000, -1px 0px #000, 0px -1px #000;
			font-size: 22px;
			text-shadow: -1px -1px #fff;
		}

		#icon-fullscreen .icon-caption {
			margin: 2px 0;
		}

.modal-window {
	position: absolute;
	z-index: 999;
	min-width: 200px;
	min-height: 100px;
	border: 4px solid #00a;
	background-color: #00a;
	text-align: center;
}

.window,
.window-with-menu-bar {
	position: absolute;
	z-index: 1;
	min-width: 200px;
	min-height: 100px;
	resize: both;
	overflow: hidden;
	border: 4px double #000;
	background-color: #c3c7cb;
}

	.title-bar {
		position: relative;
		height: 21px;
		border-bottom: 1px solid #000;
		background-color: #fff;
		color: #000;
		text-align: center;
	}

	.window:focus-within .title-bar,
	.window-with-menu-bar:focus-within .title-bar {
		background-color: #00a;
		color: #fff;
	}

		.title {
			padding: 1px;
			font-size: 14px;
			font-weight: bold;
		}

		hr {
			margin: 2px 0;
			border: none;
			border-top: 1px solid #000;
		}

		.control-menu-box {
			position: absolute;
			top: 0;
			left: 0;
			width: 20px;
			height: 20px;
			border-right: 1px solid #000;
			background-color: #c3c7cb;
			color: #fff;
			text-shadow:
				-1px -1px 0 #000,
				-1px 0px 0 #000,
				-1px 1px 0 #000,
				1px -1px 0 #000,
				1px 0px 0 #000,
				1px 1px 0 #000,
				2px 2px 0 #868a8e;
		}

		.control-menu:active .control-menu-box,
		.control-menu:focus .control-menu-box {
			background-color: #868a8e;
		}

			.control-menu:focus-within .menu-list {
				display: block;
				top: 22px;
				margin: -2px 0;
				text-align: left;
				text-shadow: none;
			}

		.minimize-box,
		.maximize-box {
			position: absolute;
			top: 0;
			border-left: 1px solid #000;
			background-color: #c3c7cb;
			color: #000;
			font-size: 11px;
		}

		.minimize-box {
			right: 21px;
		}

		.maximize-box {
			right: 0;
		}

			.minimize-button,
			.maximize-button {
				width: 20px;
				height: 20px;
				border: 1px outset;
			}

			.minimize-button:active,
			.maximize-button:active {
				border: 2px inset;
			}

				.minimize-button i {
					vertical-align: top;
				}

				.maximize-button i {
					vertical-align: bottom;
				}

	.menu-bar {
		border-bottom: 1px solid #000;
		background-color: #fff;
		font-size: 14px;
	}

		.menu-name {
			display: inline-block;
			padding: 0 5px;
			/*background-color: green;*/
		}

		.menu-name:focus {
			background-color: #00a;
			color: #fff;
		}

			.menu-list {
				display: none;
				position: absolute;
				z-index: 3;
				margin: 0 -5px;
				border: 1px solid #000;
				background-color: #fff;
				color: #000;
				white-space: nowrap;
			}

			.menu-name:focus .menu-list {
				display: block;
			}

				.menu-command {
					padding: 0 1em;
				}

				.menu-command:active {
					background-color: #00a;
					color: #fff;
				}

	.window-content {
		position: relative;
		width: 100%;
		background-color: #fff;
		overflow: auto;
		scrollbar-width: thin;
		scrollbar-color: #c3c7cb #fff;
	}

	.window-with-menu-bar .window-content {
		//padding: 5px;
		height: calc(100% - 42px);
		overflow: auto;
	}

	.window .window-content {
		height: calc(100% - 22px);
		overflow: auto;
	}

		.window-content textarea {
			box-sizing: content-box;
			width: calc(100% - 5px);
			height: calc(100% - 5px);
			resize: none;
			user-select: text;
			cursor: text;
		}

		.window-content .icon-container {
			position: relative;
			top: 200px;
		}

			.icon {
				display: inline-block;
				position: relative;
				margin: 2px 2px;
				width: 64px;
				text-align: center;
			}

				.icon img {
					display: block;
					margin-bottom: 2px;
					margin-left: auto;
					margin-right: auto;
				}

				.icon-caption {
					display: inline-block;
					margin: 0;
					padding: 0px 2px;
					font-size: 12px;
					line-height: 14px;
					white-space: nowrap;
					vertical-align: top;
				}

				.icon:focus .icon-caption {
					background-color: #00a;
					color: #fff;
				}

		button {
			margin: 10px 20px;
			width: 75px;
			background-color: #c3c7cb;
			color: #000;
			border-style: outset;
			border-radius: 1px;
			box-shadow: 0 0 0 1px #000;
			font-size: 14px;
		}

		button:active {
			border-style: inset;
		}


		p {
			margin: 5px;
		}



.disabled {
	opacity: 0.25;
}

.clear {
	clear: both;
}

































#window-exit-windows {
	display: none;
	z-index: 999;
	top: calc(50% - 68px);
	left: calc(50% - 160px);
	height: 137px;
	width: 320px;
	border: 4px solid #00a;
	background-color: #00a;
	text-align: center;
}

	#window-exit-windows .title-bar {
		border: 1px solid #fff;
		border-bottom: 1px solid #000;
		background-color: #00a;
		color: #fff;
	}

		#window-exit-windows .title-bar {
			
		}

	#window-exit-windows .window-content {

	}

		#window-exit-windows .window-content i {
			color: #00a;
			vertical-align: middle;
			font-size: 34px;
		}

		#window-exit-windows .window-content span {
			vertical-align: middle;
			font-size: 14px;
		}



#window-program-manager {
	z-index: 1;
	top: calc(50% - 160px);
	left: calc(50% - 250px);
	height: 320px;
	width: 500px;
}

#window-program-manager-main {
	z-index: 2;
	top: calc(50% - 175px + 60px);
	left: calc(50% - 250px + 10px);
	height: 200px;
	width: 400px;
}

#window-program-manager-accessories {
	display: none;
	top: calc(50% - 175px + 60px);
	left: calc(50% - 250px + 10px);
	height: 200px;
	width: 400px;
}

	#window-program-manager-accessories .window-content {
		overflow-y: auto;
	}

#window-program-manager-games {
	display: none;
	top: calc(50% - 175px + 60px);
	left: calc(50% - 250px + 10px);
	/*height: 200px;
	width: 400px;*/
}

#window-program-manager-startup {
	display: none;
	top: calc(50% - 175px + 60px);
	left: calc(50% - 250px + 10px);
	height: 200px;
	width: 400px;
}

#window-program-manager-applications {
	display: none;
	top: calc(50% - 175px + 60px);
	left: calc(50% - 250px + 10px);
	height: 200px;
	width: 400px;
}

#window-msdos {
	display: none;
	top: calc(50% - 175px);
	bottom: calc(50% - 175px);
	left: calc(50% - 250px);
	right: calc(50% - 250px);
	width: 500px;
	height: 350px;
	resize: none;
}

	#window-msdos iframe {
		width: 100%;
		height: 100%;
		border: none;
	}

#window-notepad {
	display: none;
	top: calc(50% - 75px);
	/*bottom: calc(50% - 175px);*/
	left: calc(50% - 150px);
	/*right: calc(50% - 250px);*/
	/*width: 500px;
	height: 350px;*/
}

#window-write {
	display: none;
	top: calc(50% - 240px);
	/*bottom: calc(50% - 175px);*/
	left: calc(50% - 320px);
	/*right: calc(50% - 250px);*/
	height: 480px;
	width: 640px;
}