style.css

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

* {
	box-sizing: border-box;
	user-select: none;
	cursor: default;
}

body {
	margin: 0;
	overflow: hidden;
	font-family: "Windows Regular", Arial, sans-serif;
}




#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;
}

.window,
.window-with-menu-bar {
	position: absolute;
	z-index: 1;
	/*resize: both;
	overflow: auto;*/
	padding: 1px;
	border: 1px solid #000;
}

#window-exit-windows {
	display: none;
	z-index: 5;
	top: calc(50% - 60px);
	left: calc(50% - 150px);
	//width: 300px;
	//height: 120px;
	background-color: #00a;
	border: 3px solid #00a;
	text-align: center;
}

	#window-exit-windows .title-bar,
	#window-exit-windows .window-content {
		border: 1px solid #fff;
	}

#window-program-manager {
	z-index: 1;
	top: calc(50% - 150px);
	bottom: calc(50% - 150px);
	left: calc(50% - 200px);
	right: calc(50% - 200px);
	width: 400px;
	height: 300px;
}

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

#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-notepad textarea {
	user-select: text;
	cursor: text;
	caret-style: block;
}

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

.title-bar {
	position: relative;
	height: 22px;
	text-align: center;
	border: 1px solid #000;
	/*background-color: #c3c7cb;*/
	background-color: #00a;
	color: #fff;
}

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

.options-button {
	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;
}

.minimize-button {
	position: absolute;
	top: 0;
	right: 20px;
	width: 20px;
	height: 20px;
	border-left: 1px solid #000;
	background-color: #c3c7cb;
	color: #000;
}

.maximize-button {
	position: absolute;
	top: 0;
	right: 0;
	width: 20px;
	height: 20px;
	border-left: 1px solid #000;
	background-color: #c3c7cb;
	color: #000;
}

.minimize-button-content,
.maximize-button-content {
	padding-bottom: 4px;
	width: 100%;
	height: 100%;
	border: 1px outset;
	font-size: 11px;
}

.minimize-button-content:active,
.maximize-button-content:active {
	border-style: inset;
	//transform: translate(1px, 1px);
}

.menu-bar {
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	background-color: #fff;
}

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

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

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

.menu-element {
	padding: 0 5px;
}

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

.window-content {
	position: relative;
	width: 100%;
	border: 1px solid #000;
	background-color: #fff;
}

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

.window .window-content {
	height: calc(100% - 21px);
}

.icon {
	display: inline-block;
	position: relative;
	padding: 5px;
}

.icon-caption {

}

.icon-background {
	position: absolute;
	width: 100%;
	height: 100%;
}

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;
}





.clear {
	clear: both;
}





















#desktop {
	height: calc(100% - 26px);
	background-color: #008080;
}

#start-bar {
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 26px;
	background-color: #c0c0c0;
	border-top: 1px solid #fff;
}

	#start-button {
		float: left;
		padding: 2px;
		height: 100%;
		background-color: #c0c0c0;
		border-width: 2px;
		border-style: outset;
	}

	#start-button:active {
		border-style: inset;
	}

		#start-button img {
			float: left;
			height: 100%;
		}

		#start-button .text {
			display: block;
			float: left;
			margin-top: -1px;
			margin-left: 2px;
			height: 100%;
		}

	#systray {
		float: right;
		margin: 2px;
		border: 1px inset;
		font-size: 14px;
	}

		#systray img {
			margin: 2px;
		}

		#systray #clock {
			float: right;
			margin: 2px;
		}

#start-menu,
.start-submenu {
	display: none;
	position: absolute;
	z-index: 5;
	background-color: #c0c0c0;
	color: #000;
	border: 2px inset;
	box-shadow: 1px 1px 0 1px #000, -1px -1px 0 1px #dfdfdf;
}

#start-menu {
	bottom: 0px;
	left: 0px;
	width: 184px;
	//height: 500px;
}

.start-submenu {
	
}

	.start-item {
		padding: 1px;
		height: 32px;
		font-size: 20px;
	}

	.start-item img {
		display: inline;
	}

	.start-item:hover,
	.programs-item:hover,
	.accessories-item:hover {
		background-color: #000080;
		color: #fff;
	}

		.start-item #programs-submenu {
			position: relative;
			top: -30px;
			left: 175px;
		}

		.start-item:hover #programs-submenu {
			display: block;
		}

			.programs-item,
			.accessories-item {
				height: 24px;
				font-size: 16px;
			}

				.programs-item #accessories-submenu {
					position: relative;
					top: -18px;
					left: 168px;
				}

				.programs-item:hover #accessories-submenu {
					display: block;
				}