win98.css

win98.css

		@font-face{
			font-family:"Pixelated MS Sans Serif";
			src:url("/fonts/ms_sans_serif.woff") format("woff");
			src:url("/fonts/ms_sans_serif.woff2") format("woff2");
			font-weight:normal;
			font-style:normal;
		}
		*,html{
			font-family:"Pixelated MS Sans Serif", "Microsoft Sans Serif", "MS Sans Serif", Roboto, sans-serif;
			font-weight:normal;
			image-rendering:-moz-crisp-edges;
			image-rendering:-o-crisp-edges;
			image-rendering:-webkit-optimize-contrast;
			-ms-interpolation-mode:nearest-neighbor;
		}
		*:focus {
			outline: none !important;
		}
		::-webkit-scrollbar {
			width: 16px;
		}
		::-webkit-scrollbar:horizontal {
			height: 17px;
		}
		::-webkit-scrollbar-corner {
			background: #dfdfdf;
		}
		::-webkit-scrollbar-thumb {
			background-color: #dfdfdf;
			box-shadow:
				inset -1px -1px #0a0a0a, inset 1px 1px #fff,
				inset -2px -2px #808080, inset 2px 2px #dfdfdf;
		}
		::-webkit-scrollbar-button:horizontal:start:decrement,
		::-webkit-scrollbar-button:horizontal:end:increment,
		::-webkit-scrollbar-button:vertical:start:decrement,
		::-webkit-scrollbar-button:vertical:end:increment {
			display: block;
		}
		::-webkit-scrollbar-track {
			background-image: url("/x/win98/dot.svg");
		}
		::-webkit-scrollbar-button:vertical:start {
			height: 17px;
			background-image: url("/x/win98/up.svg");
		}
		::-webkit-scrollbar-button:vertical:end {
			height: 17px;
			background-image: url("/x/win98/down.svg");
		}
		::-webkit-scrollbar-button:horizontal:start {
			width: 16px;
			background-image: url("/x/win98/left.svg");
		}
		::-webkit-scrollbar-button:horizontal:end {
			width: 16px;
			background-image: url("/x/win98/right.svg");
		}
		body{
			background:#222;
			user-select:none;
			margin:0;
			padding:0;
			width:100%;
			height:100%;
			overflow: hidden;
		}
		#boot,
		#windows,
		#desktop,
		#BSOD,
		#clouds,
		.overlay {
			display:block;
			position:fixed;
			top:0;
			left:0;
			width: 100%;
			height:100%;
		}
		#boot,
		#windows,
		#BSOD {
			visibility: hidden;
		}
		#boot{
			background: #000;
			z-index: 1;
			#clouds {
				background:url("/x/win98/clouds.svg");
				background-size: cover;
			}
			#logo {
				position: absolute;
				left: 50%;
				top: 50%;
				width: 320px;
				height: 280px;
				transform: scale(2) translate(-20%, -45%);
				background:url("/x/win98/logo.svg");
			}
			h2,h3 {
				position: absolute;
			}
			h2,
			h2 *,
			h3,
			h3 *,
			h4,
			h4	*{
				font-family: Arial, sans-serif;
			}
			h2 {
				font-size: 52px;
				left: 40%;
				bottom: 15%;
				transform: scale(2);
				color: white;
				letter-spacing: 1.2px;
				line-height: 1ex;
				z-index: 1;
				text-shadow: 2px 2px #222;
				em{
					display: block;
					text-indent: 12px;
					font-size: 74px;
					font-weight: 900;
					color: #000;
					letter-spacing: -6px;
					line-height: 1ex;
					text-shadow: none;
					margin-top: 11px;
				}
				sup {
					font-size: 25px;
					padding: 0 5px;
					text-shadow: none;
				}
				i {
					font-style: normal;
					font-size: 25px;
					padding-left: 230px;
				}
			}
			h3 {
				right: 0;
				font-style: italic;
				font-weight: bold;
				font-size: 48px;
				line-height: 50px;
				z-index: 1;
				letter-spacing: -2px;
				margin-right: 2ex;
				sup{
					margin-left: 4px;
					font-size: 18px;
					margin-left: 5px;
				}
			}
			h4 {
				display: none;
				position: absolute;
				font-weight: bold;
				font-size: 55px;
				z-index: 999;
				letter-spacing: -2px;
				margin-right: 2ex;
				left: 40%;
				bottom: -3%;
				color: #000;
			}
			footer.loading {
				position: absolute;
				overflow: hidden;
				bottom: 0;
				width: 200%;
				height: 24px;
				background: linear-gradient(90deg, #47b, #bcd 19%, #bcd 31%, #47b 50%, #bcd 69%, #bcd 81%, #47b);
				-webkit-animation: smear 2s linear infinite;
				animation: smear 2s linear infinite;
			}
		}
		#windows {
			#desktop{
				background:#018281;
				color: #000;
				z-index: 5;
				article{
					position:absolute;
					transform:scale(1.5);
					text-align:center;
					isolation: isolate;
					kbd {
						display:block;
						color: #000;
						clear: both;
						padding: 2px;
					}
					&.selected img {
						filter: drop-shadow(0px 1000px 0 #000080);
						transform: translateY(-1000px);
					}
					&.selected kbd {
						background: #000080;
						color: #f0f0f0;
					}
				}
				#cpu {
					top:3%;
					left:2%;
				}
				#docs {
					top:16%;
					left:3%;
				}
				#trash {
					bottom:12%;
					left:3%;
				}
				#disks {
					top:3%;
					left:14%;
				}
				#msie {
					top:40%;
					left:50%;
				}
				#vb6 {
					top:34%;
					left:3%;
				}
				#todo {
					bottom:40%;
					left:90%;
				}
				#game {
					bottom:10%;
					left:80%;
				}
				#BO2k {
					top:3%;
					left:95%;
				}
				#sub7 {
					top:5%;
					left:86%;
				}
				#photoshop {
					top:36%;
					left:35%;
				}
				#spewfy {
					top:5%;
					left:78%;
				}
				#adraw{
					top:23%;
					left:79%;
				}
				#dialup {
					top:17%;
					left:13%;
				}
				#cal {
					top:53%;
					left:3%;
				}
				#cd {
					top:2%;
					left:23%;
				}
				#winamp{
					top:4%;
					left:30%;
				}
				#irc {
					top:82%;
					left:94%;
				}
				#torrent {
					top:22%;
					left:92%;
				}
				#reg {
					top:32%;
					left:24%;
				}
				#dw {
					top:25%;
					left:45%;
				}
				#putty {
					top:2%;
					left:55%;
				}
				#nero {
					top:17%;
					left:22%;
				}
				#app{
					top:19%;
					left:69%;
				}
				#vstudio{
					top:35%;
					left:12%;
				}
			}
			.app-hidden {
				visibility: hidden !important;
				pointer-events: none !important;
			}
			#app-adraw,
			#app-bo2k,
			#app-cmd,
			#app-dos,
			#app-explorer,
			#app-help,
			#app-mycpu,
			#app-nero,
			#app-notepad,
			#app-photoshop,
			#app-regedit,
			#app-sub7,
			#app-solitaire,
			#app-winamp,
			#app-xircon {
				z-index: 50;
				pointer-events: auto;
				header {
					width: 100%;
					margin:0;
					padding:0;
					height: 25px;
					.exit,
					.min{
						display:block;
						float: right;
						height: 25px;
						width: 25px;
					}
					.min{
						margin-right:14px;
					}
				}
			}
			#app-regedit {
				height: 223px;
				width: 450px;
				&::before{
					width: 448px;
					height: 221px;
				}
				h2,
				.label {
					width: 442px;
				}
				footer {
					gap: 1px;
					display: flex;
					margin: 0 5px 1px 4px;
					padding:0px;
					width: 98%;
					height: 25px;
					max-height: 25px;
					border:0;
					section {
						box-shadow: inset -1px -1px #dfdfdf, inset 1px 1px grey;
						flex-grow: 1;
						margin: 0;
						padding: 2px 3px;
					}
				}
				aside {
					float:right;
					background:#fff;
					width: 204px;
					height: 149px;
					border-width: 1px;
					border-style: solid;
					border-color: #808080 #fff #fff #808080;
					padding: 0;
					box-sizing: border-box;
					header {
						width: 202px;
						height:22px;
						background-color: #c0c0c0;
						border-bottom: 1px solid #808080;
						span:nth-child(1) {
							border-right: 1px solid #808080;
						}
						span:nth-child(2) {
							border-left: 1px solid #fff;
						}
						span{
							background: #c0c0c0;
						}
					}
					section {
						width: 202px;
						height: 140px;
						.highlight {
							border: 1px dotted #000;
							padding: 3px;
							img {
								margin-right: 2px;
								width: 12px;
								height:12px;
							}
						}
					}
					header,
					section {
						span{
							display:block;
							color: #000;
							float:left;
							width: 40%;
							padding: 5px 4px 4px 5px;
						}
					}
				}
				ul.tree-view {
					float:left;
					width: 220px;
					height: 140px;
					overflow: scroll;
					display: block;
					background: #fff;
					padding: 5px;
					margin: 0;
				}
				ul.tree-view li img {
					width: 12px;
					height: 12px;
					margin-right: 5px;
				}

				ul.tree-view li {
					list-style-type: none;
				}

				ul.tree-view a {
					text-decoration: none;
					color: #000;
				}

				ul.tree-view a:focus {
					background-color: #000080;
					color: #fff;
				}

				ul.tree-view ul,
				ul.tree-view li {
					margin-top: 3px;
				}

				ul.tree-view ul {
					margin-left: 16px;
					padding-left: 16px;
					/* Goes down too far */
					border-left: 1px dotted #808080;
				}

				ul.tree-view ul > li {
					position: relative;
				}
				ul.tree-view ul > li::before {
					content: "";
					display: block;
					position: absolute;
					left: -16px;
					top: 6px;
					width: 12px;
					border-bottom: 1px dotted #808080;
				}
				ul.tree-view ul > li:last-child::after {
					content: "";
					display: block;
					position: absolute;
					left: -20px;
					top: 7px;
					bottom: 0px;
					width: 8px;
					background: #fff;
				}

				ul.tree-view details {
					margin-top: 0;
				}

				ul.tree-view details[open] summary {
					margin-bottom: 0;
				}

				ul.tree-view ul details > summary:before {
					margin-left: -22px;
					position: relative;
					z-index: 1;
				}

				ul.tree-view details > summary:before {
					text-align: center;
					display: block;
					float: left;
					content: "+";
					border: 1px solid #808080;
					width: 8px;
					height: 9px;
					line-height: 8px;
					margin-right: 5px;
					padding-left: 1px;
					background-color: #fff;
				}

				ul.tree-view details[open] > summary:before {
					content: "-";
				}

				ul.tree-view details > summary::marker,
				ul.tree-view details > summary::-webkit-details-marker {
					content: "";
				}
			}
			#app-mycpu {
				position: absolute;
				left: 9%;
				top: 10%;
				width:908px;
				height: 596px;
				background:url("/x/win98/app-mycpu.png") no-repeat;
			}
			#app-xircon{
				position: absolute;
				left: 19%;
				top: 17%;
				width:908px;
				height: 530px;
				background:url("/x/win98/app-xircon.png") no-repeat;
			}
			#app-photoshop{
				position: absolute;
				right: 10%;
				top: 13%;
				width:800px;
				transform:scale(1.35);
				height: 572px;
				background:url("/x/win98/app-photoshop.png") no-repeat;
				.close {
					display:block;
					float: right;
					height: 50px;
					width: 50px;
				}
				input {
					width: 1px;
					height: 1px;
					position: absolute;
					top: 30%;
					left: 30%;
				}
			}
			#app-explorer {
				position: absolute;
				left: 19%;
				top: 17%;
				width: 908px;
				height: 596px;
				background:url("/x/win98/app-explorer-sm.png") no-repeat;
			}
			#app-solitaire {
				position: absolute;
				right: 241px;
				top: 150px;
				width: 598px;
				height: 475px;
				background:url("/x/win98/app-solitaire.png") no-repeat;
			}
			#app-sub7 {
				position: absolute;
				left: 300px;
				transform: scale(1.5);
				top: 222px;
				width:462px;
				height: 358px;
				background:url("/x/win98/app-sub7.png") no-repeat;
			}
			#app-bo2k {
				height: 344px;
				top: 222px;
				left: 24%;
				width: 510px;
				&::before {
				width: 508px;
				height: 342px;
				}
				aside,field-set {
					float: left;
					margin: 2px 10px 0 0;
				}
				fieldset {
					display: block;
					margin: 10px;
					label {
						display: block;
						width: 100%;
						clear: both;
						font-size: 10pt;
						margin: 8px 0 2px 0;
					}
					input[type="text"]{
						width: 98%;
					}
					select {
						width: 100%;
					}
					p {
						margin: 8px 0 0 0;
						padding: 0;
							&.btns {
								margin-top: 15px;
							}
					}
				}
			}
			#app-help {
				position: absolute;
				right: 8%;
				top: 10%;
				width:781px;
				height: 682px;
				background:url("/x/win98/app-help-sm.png") no-repeat;
			}
			#app-adraw{
				position: absolute;
				left: 12%;
				top: 16%;
				width:984px;
				height: 518px;
				background:url("/x/win98/app-cmd.png") no-repeat;
				text-align: center;
				.close {
					display:block;
					float: right;
					height: 50px;
					width: 50px;
				}
				img {
					margin-top: 106px;
				}
			}
			#app-nero{
				position: absolute;
				left: 26%;
				top: 8%;
				width:635px;
				height: 643px;
				background:url("/x/win98/app-nero.png") no-repeat;
				text-align: center;
				.close {
					display:block;
					float: right;
					height: 65px;
					width: 45px;
				}
				section {
					width: 99%;
					height: 90%;
					margin-top:65px;
				}
			}
			#app-winamp{
				position: absolute;
				left: 12%;
				top: 8%;
				width:550px;
				height: 692px;
				background:url("/x/win98/app-winamp.png") no-repeat;
				text-align: center;
				header {
					width: 100%;
					margin:0;
					padding:0;
					height: 25px;
					#winexit,
					#winmin{
						display:block;
						float: right;
						height: 25px;
						width: 25px;
					}
					#winmin{
						margin-right:14px;
					}
				}
				section {
					width: 99%;
					height: 96%;
				}
			}
			#app-dos {
				position: absolute;
				left: 12%;
				top: 16%;
				width:984px;
				height: 518px;
				background:url("/x/win98/app-cmd.png") no-repeat;
				text-align: center;
				header {
					width: 100%;
					margin:0;
					padding:0;
					height: 45px;
					.close {
						display:block;
						float: right;
						height: 45px;
						width: 50px;
					}
				}
				textarea {
					display: block;
					border: none;
					margin: 62px 0 0 11px;
					height: 394px!important;
					width:97%;
					padding: 2px;
					font-family: monospace;
					font-size: 14px;
					resize: none;
					background: #000;
					color: #f1f1f1;
				}
			}
			form {
				background-color: rgb(192, 192, 192);
				border-color: #c0c0c0 #000 #000 #c0c0c0;
				border-style: solid;
				border-width: 1px;
				box-sizing: border-box;
				color: #000;
				cursor: default;
				font-size: 12px;
				font-style: normal;
				height: 306px;
				left: 660px;
				margin: 0px;
				padding: 3px;
				position: absolute;
				top: 310px;
				transform: scale(2);
				input[type="text"]{
					display:none;
				}
				&::before {
					border-color: #fff #808080 #808080 #fff;
					border-style: solid;
					border-width: 1px;
					box-sizing: border-box;
					content: "";
					cursor: default;
					display: block;
					height: 305px;
					left: 0px;
					line-height: 12px;
					margin: 0px;
					padding: 0px;
					pointer-events: none;
					position: absolute;
					top: 0px;
					width: 510px;
				}
				h2 {
					background: #000081;
					background: linear-gradient(90deg, rgba(0, 0, 129, 1) 0%, rgba(16, 132, 208, 1) 64%);
					box-sizing: border-box;
					color: #fff;
					cursor: default;
					display: flex;
					font-size: 12px;
					height: 18px;
					line-height: 14px;
					margin-block-end: 0px;
					margin-block-start: 0px;
					margin-bottom: 0px;
					margin-inline-end: 0px;
					margin-inline-start: 0px;
					margin: 0px;
					padding: 2px;
					position: relative;
					width: 504px;
				}
				h2 img {
					width: 13px;
					height: 13px;
					margin-right: 2px;
				}
				.sm.pad {
					display: block;
					height: 16px;
					margin: 0px;
					padding: 0px;
					text-align: center;
					width: 16px;
					&::before {
						content: "📄";
						cursor: default;
						display: inline;
						font-size: 12px;
						font-size-adjust: none;
						font-stretch: 100%;
						font-style: normal;
						font-variant-emoji: normal;
						font-weight: 700;
						height: auto;
						line-height: 15px;
						margin: 0px;
						padding:0px;
						text-align: center;
					}
				}
				.label {
					color: #fff;
					display: block;
					flex-basis: 0%;
					flex-grow: 1;
					flex-shrink: 1;
					font-size: 12px;
					height: 14px;
					line-height: 14px;
					margin: 2px;
					overflow-x: hidden;
					overflow-y: hidden;
					padding: 0px;
					position: relative;
					text-overflow: ellipsis;
					text-wrap-mode: nowrap;
					white-space-collapse: collapse;
					width: 432px;
				}
				.btn {
					background: #c0c0c0;
					position: relative;
					height: 12px;
					width: 14px;
					margin:0;
					border-width: 1px;
					border-style: solid;
					border-color: #fff #000 #000 #fff;
					&::after {
						background-clip: border-box;
						background-color: #c0c0c0;
						background-origin: padding-box;
						background-position-x: 50%;
						background-position-y: 50%;
						background-repeat: no-repeat;
						background-size: cover;
						border-bottom-color: rgb(128, 128, 128);
						border-bottom-style: solid;
						border-bottom-width: 1px;
						border-left-color: rgb(224, 224, 224);
						border-left-style: solid;
						border-left-width: 1px;
						border-right-color: rgb(128, 128, 128);
						border-right-style: solid;
						border-right-width: 1px;
						border-top-color: rgb(224, 224, 224);
						border-top-style: solid;
						border-top-width: 1px;
						box-sizing: border-box;
						color: rgb(255, 255, 255);
						content: "";
						cursor: default;
						display: block;
						font-size: 12px;
						height: 12px;
						left: 0px;
						line-height: 14px;
						margin: 0px;
						padding: 0px;
						position: absolute;
						top: 0px;
						width: 14px;
					}
				}
				.min::after {
					background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M5 10h6v2H5z'/%3E%3C/svg%3E") no-repeat center center;
				}
				.max::after {
					background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16'%3E%3Cpath d='M4 4v8h9V4H4zm1 2h7v5H5V6z'/%3E%3C/svg%3E") no-repeat center center;
				}
				.close::after {
					background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 16' width='9' height='8'%3E%3Cpath d='M0 1l7 7-7 7h4l5-5 5 5h4l-7-7 7-7h-4L9 6 4 1z'/%3E%3C/svg%3E") no-repeat center center;
				}
			}
			.menu {
				display: flex;
				padding: 1px 0;
				position: relative;
				a,
				a:visited {
					padding: 3px 5px;
					color: inherit;
					text-decoration: none;
					cursor: default;
				}
				a:hover,
				a:focus,
				a:active{
					background: #000081;
					color: #f1f1f1;
				}
			}
			.client {
				border-width: 1px;
				border-style: solid;
				border-color: #808080 #fff #fff #808080;
				position: relative;
				cursor: default;
				margin: 0;
				padding: 0;
				box-sizing: border-box;
				&::before {
					content: "";
					position: absolute;
					box-sizing: border-box;
				}
				&::after {
					left: 0;
					top: 0;
					content: "";
					position: absolute;
					box-sizing: border-box;
					width: 100%;
					height: 100%;
					border-width: 1px;
					border-style: solid;
					border-color: #000 #c0c0c0 #c0c0c0 #000;
					pointer-events: none;
				}
				textarea {
					display: block;
					border: none;
					margin: 1px;
					height: 250px!important;
					padding: 2px;
					font-family: monospace;
					font-size: 13px;
					resize: none;
				}
			}
			footer{
				align-items: center;
				background:#C0C0C0;
				border-top: 1px solid #fff;
				bottom:0;
				display: flex;
				gap: 5px;
				height: 44px;
				left:0;
				max-height: 44px;
				overflow-block: hidden;
				overflow: hidden;
				padding:6px 6px 5px 6px;
				position:fixed;
				width:100%;
				z-index:999;

				#start{
					background: #c0c0c0;
					border-color: #fff #000 #000 #fff;
					border-style: solid;
					border-width: 2px;
					color:black;
					letter-spacing:0;
					padding:4px 10px 0 10px;
					flex-shrink: 0;

					&::before {
						content: "";
						position: absolute;
						left: -2px;
						top: -2px;
						display: block;
						width: 100%;
						height: 100%;
						border-width: 2px;
						border-style: solid;
						border-color: #e0e0e0 #808080 #808080 #e0e0e0;
						pointer-events: none;
					}
					&.pressed {
						border-color: #000 #fff #fff #000;
						border-width: 2px;
						padding-top: 6px;
						&::before {
							border-color: #000 #fff #fff #000;
						}
					}
					sup {
						font-size:1.4rem;
						margin-left:5px;
					}
				}
				.sep{
					height:40px;
					width:1px;
					border-left:2px solid #FCFCFC;
					border-right:2px solid #808080;
					flex-shrink: 0;
				}
				#quick{
					display:flex;
					align-items: center;
					padding:3px;
					height:40px;
					flex-shrink: 0;
					img{
						margin:0 2px;
					}
				}
				#tasks {
					display: flex;
					flex: 1;
					height: 45px;
					height: 100%;
					overflow: hidden;
					gap: 3px;
				}
				.task {
					align-items: center;
					background: #c0c0c0;
					border-color: #fff #000 #000 #fff;
					border-style: solid;
					border-width: 2px;
					box-sizing: border-box;
					color: black;
					display: flex;
					flex: 1;
					font-weight: bold;
					height: 100%;
					line-height: 24px;
					max-width: 300px;
					min-width: 100px;
					overflow: hidden;
					padding: 5px;
					text-decoration: none;
					text-overflow: ellipsis;
					white-space: nowrap;
					&.selected{
						border-color: #000 #fff #fff #000;
						border-width: 2px;
						padding-top: 6px;
						&::before {
							border-color: #000 #fff #fff #000;
						}
					}

					sup {
						margin-left: 4px;
						text-overflow: ellipsis;
						white-space: nowrap;
						overflow: hidden;
						display: inline-block;
						margin-top: 4px;
						font-size:1.2rem;
					}

					img {
						height: 27px;
						margin-right: 5px;
					}
				}
				aside{
					display:flex;
					transform:scale(1.25);
					border-top:1px solid #08080E;
					border-left:1px solid #08080E;
					border-right:1px solid #FCFCFC;
					border-bottom:1px solid #FCFCFC;
					padding:6px 5px;
					margin: 0 35px 0 25px;
					font-size:1.1rem;
					flex-shrink: 0;
					&::before {
						content: "";
						position: absolute;
						left: -2px;
						top: -2px;
						display: block;
						width: 100%;
						height: 100%;
						border-width: 2px;
						border-style: solid;
						pointer-events: none;
							border-color: #000 #fff #fff #000;
					}
					img {
						margin: 0 4px;
						transform:scaleX(1.25);
					}
				}
			}
			#cdc {
				display:none;
			}
			#startmenu{
				visibility: hidden;
				bottom:58px;
				height:485px;
				width: 250px;
				left:2;
				h2{
					position:absolute;
					font-size:24px;
					left:2px;
					bottom:4px;
					font-weight:bold;
					padding:20px 2px 140px 5px;
					margin:0;
					color:#c0c0c0;
					transform:rotate(180deg);
					-ms-writing-mode:tb-rl;
					writing-mode:vertical-lr;
					pointer-events:none;
					z-index:2;
					background:#030cdf;
					background:linear-gradient(0deg,#000 0%,#030cdf 100%);
					width:15%;
					font-family:Tahoma;
					font-weight:700;
					em,strong{
						font-family:Tahoma;
					}
					em {
						font-weight:normal;
						font-style:normal;
						font-size:24px;
					}
					strong {
						font-size:22px;
						font-weight:bold;
					}
				}
				.menu{
					margin:2px 0px 0px 45px;
					clear:both;
					pointer-events: all;
					width:200px;
					height:48px;
					display: block;
					&:hover,
					&:hover::after,
					& *:hover {
						background:#020571;
						color:#e0e0e0;
					}
					img, sup, em{
						float:left;
						display:block;
						height:48px;
					}
					sup{
						height:40px;
						padding-top:5px;
						margin-left:5px;
						margin-right:30px;
						line-height:3em;
					}
					em{
						font-style:normal;
						height:40px;
						font-size:2em;
						margin-right:10px;
						float:right;
						padding-top:5px;
					}
				}
				.more::after{
					content: "";
					border-style: solid;
					border-width: 7px 0 7px 7px;
					border-color: transparent currentColor transparent;
					width: 0;
					height: 0;
					position: absolute;
					right: 7px;
					color: #000;
					margin-top: 17px;
				}
				.divider{
					display:block;
					clear:both;
					width:70%;
					height:1px;
					background:#08080E;
					border-bottom:2px solid #FCFCFC;
					margin:5px 2px 5px 55px;
				}
			}

			#flyout {
				visibility: hidden;
				height:52px;
				width: 100px;
				left:248px;
				text-align: center;
				padding: 15px;
				color: #808080;
				text-shadow: 1px 1px #fff;
			}
			#startmenu,
			#flyout {
				pointer-events:auto;
				background:#c0c0c0;
				display:block;
				position:absolute;
				border-color:#e0e0e0 #808080 #808080 #e0e0e0;
				border-style:solid;
				border-width:3px;
				box-sizing:border-box;
				z-index:999;
			}
			#tooltip {
				position: absolute;
				display: none;
				opacity:0;
				background: #333;
				color: #fff;
				padding: 5px 10px;
				font-size: 16px;
				bottom: 60px;
				pointer-events: none;
				z-index: 1000;
				transition:
					opacity 0.7s ease-out,
					display 0.7s ease-out allow-discrete;
			}
		}
		#BSOD {
			background-color: #00a;
			color: #f1f1f1;
			font-size:30px;
			z-index: 10;
			article {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -62%);
				ul {
					margin-left: 4%;
				}
			}
			h2 {
				text-align: center;
				em {
					background: #a8a8a8;
					color: #0000a8;
					font-size: 1.15em;
					font-style: normal;
					font-weight: bold;
					padding: 0 1em;
				}
			}
			#hex {
				text-transform: capitalize;
			}
			footer {
				text-align: center;
			}
		}
		#minani {
			background: #000081;
			background: linear-gradient(90deg, rgba(0,0,129,1) 0%, rgba(16,132,208,1) 64%);
			box-sizing: border-box;
			color: #fff;
			cursor: default;
			display: flex;
			font-size: 12px;
			height: 18px;
			line-height: 14px;
			margin: 0;
			padding: 2px;
			position: fixed;
			z-index: 2000;
			transition: none;
			pointer-events: none;
		}
		.overlay {
			position:absolute;
			z-index:1000;
			pointer-events: none;
			user-select: none;

			&.vignette {
				background-image: radial-gradient(ellipse at center, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 100%);
			}
			&.scanlines {
				background-image: linear-gradient(0deg, rgba(0,0,0,0) 25%, rgba(0,0,0,0.33) 25%, rgba(0,0,0,0.33) 50%, rgba(0,0,0,0) 50%, rgba(0,0,0,0) 75%, rgba(0,0,0,0.33) 75%, rgba(0,0,0,0.33) 100%);
				background-size: 4px 4px;
			}
			&.off {
				z-index:900;
				color:#dfdfdf;
				padding: 100px;
				display:none;
				pointer-events: auto;
				h1 {
					color: #d97c41;
					font-family:Tahoma,Arial, Helvetica, sans-serif;
					font-size: 90px;
					position: absolute;
					text-align: center;
					width: 100%;
					margin:0;
					padding: 0;
					top: 40%;
					left: 42%;
					transform: translate(-50%, -50%);
				}
				textarea {
					display: none;
					width: 100%;
					height: 80%;
					margin:0;
					padding:0;
					color: #0f0;
					font-size: 42px;
					background:transparent;
					border:none;
				}
			}
		}
		dialog,
		#msg {
			z-index: 999;
			opacity: 0;

			&[open] {
				opacity: 1;
				padding: 2px;
				border: 0;
				min-width: 300px;
				background: silver;
				box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #dfdfdf, inset -2px -2px grey, inset 2px 2px #fff;

				@starting-style {
					opacity: 1;
					background: silver;
				}
			}

			&:not([open]) {
				opacity: 0;
				background: silver;
				padding: 0;
			}
			aside,
			section	{
				float:left;
			}

			input[type="text"],
			input[type="password"],
			select {
				display: block;
				background: #FCFCFC;
				color: #000;
				border-radius:0;
				font-size: 8pt;
				border-color:rgb(118, 118, 118);
				border-style:inset;
				border-width:2px;
			}
			input[type="radio"],
			input[type="checkbox"] {
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				margin: 0;
				background: 0;
				position: fixed;
				opacity: 0;
				border: none;
			}

			input[type="radio"] + label,
			input[type="checkbox"] + label {
				line-height: 13px;
			}

			input[type="radio"] + label {
				position: relative;
				margin-left: 18px;
			}

			input[type="radio"] + label::before {
				content: "";
				position: absolute;
				top: 0;
				left: -18px;
				display: inline-block;
				width: 12px;
				height:12px;
				margin-right: 6px;
				background: url("/x/win98/radio.svg");
			}

			input[type="radio"]:active + label::before {
				background: url("/x/win98/radio-disabled.svg");
			}

			input[type="radio"]:checked + label::after {
				content: "";
				display: block;
				width: 4px;
				height: 4px;
				top: 4px;
				left: -14px;
				position: absolute;
				background:url("/x/win98/radio-checked.svg");
			}

			input[type="radio"]:focus + label,
			input[type="checkbox"]:focus + label {
				outline: 1px dotted #000000;
			}
			.field-row {
				clear: both;
				padding: 8px;
				width: 90%;
				justify-content: flex-end;
				&.aleft {
					justify-content: flex-start;
				}
			}
		}
		#logon {
			.field-row {
				clear: both;
				padding: 0 0 1px 20px;
				margin-bottom: 5px;
			}
			aside {
				padding-top: 18px;
				margin-right:8px;
			}
			label {
				width: 100px;
				display: block;
				font-size: 16px;
				font-weight: bold;
			}
			input[type=text],
			input[type=password]{
				width:200px;
				font-size:16px;
			}
			img {
				margin:0 20px 0 0;
			}
			#frmErr{
				color: red;
				text-align: left;
				font-weight: bold;
				font-size: 18px;
				margin-bottom: 20px;
			}
		}
		::backdrop {
			background: none;
		}
		.title-bar {
			align-items: center;
			background: #000081;
			background: linear-gradient(90deg, rgba(0, 0, 129, 1) 0%, rgba(16, 132, 208, 1) 64%);
			display: flex;
			justify-content: space-between;
			padding: 3px 2px 3px 4px;
		}
		.title-bar.inactive {
			background: linear-gradient(90deg, grey, #b5b5b5);
		}
		.title-bar-text {
			color: #fff;
			font-weight: 700;
			letter-spacing: 0;
			margin-right: 24px;
		}
		.title-bar-controls {
			display: flex;
		}
		.title-bar-controls .close {
			background-clip: border-box;
			background-color: rgb(192, 192, 192);
			background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOCIgaGVpZ2h0PSI3IiB2aWV3Qm94PSIwIDAgOCA3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMEgxSDJWMUgzVjJINEg1VjFINlYwSDdIOFYxSDdWMkg2VjNINVY0SDZWNUg3VjZIOFY3SDdINlY2SDVWNUg0SDNWNkgyVjdIMUgwVjZIMVY1SDJWNEgzVjNIMlYySDFWMUgwVjBaIiBmaWxsPSJibGFjayIvPgo8L3N2Zz4K');
			background-origin: padding-box;
			background-position-x: 4px;
			background-position-y: 3px;
			background-repeat: no-repeat;
			background-size: auto;
			border-image-outset: 0;
			border-image-repeat: stretch;
			border-image-slice: 100%;
			border-image-source: none;
			border-image-width: 1;
			border-color: transparent;
			border-radius: 0;
			border-style: none;
			border-width: 0;
			box-shadow: #0a0a0a -1px -1px 0 0 inset,#fff 1px 1px 0 0 inset;
			box-sizing: border-box;
			cursor: default;
			display: block;
			height: 14px;
			margin: 0 0 0 2px;
			min-height: 14px;
			min-width: 16px;
			padding: 0;
			width: 16px
		}
		.window-body {
			margin: 12px;
		}
		.field-row {
			justify-content: flex-end;
			align-items: center;
			display: flex ;
		}
		.field-row>*+* {
			margin-left: 6px;
		}
		button, input[type=reset], input[type=submit] {
			background: silver;
			border: none;
			border-radius: 0;
			box-shadow: inset -1px -1px #0a0a0a, inset 1px 1px #fff, inset -2px -2px grey, inset 2px 2px #dfdfdf;
			box-sizing: border-box;
			color: transparent;
			min-height: 23px;
			min-width: 75px;
			padding: 0 12px;
			text-shadow: 0 0 #222;

			&:disabled {
				color: #888 !important;
			}
		}
		canvas,
		#glitch {
			display: block;
			z-index: 800;
			position:fixed;
			top:0;
			left:0;
			width: 100%;
			height:100%;
			user-select:none;
			pointer-events: none;
			user-select: none;
			image-rendering: pixelated;
		}
		.blink {
			animation: blink 1s steps(1) infinite;
		}
		@keyframes blink { 66% { opacity: 0; } }
		@keyframes smear {
			0% { margin-left: 0; }
			100% { margin-left: -100%; }
		}
		.progress{
			border: none;
			border-radius: 0;
			box-shadow: inset -2px -2px #dfdfdf, inset 2px 2px grey;
			box-sizing: border-box;
			height: 32px;
			padding: 4px;
			position: relative;
		}
		#dialupbar{
			background-color: transparent;
			background-image: linear-gradient(90deg, #000080 16px, transparent 0 2px);
			background-repeat: repeat;
			background-size: 18px 100%;
			width: 100%;
			display: block;
			height: 100%;
		}
		.group {
			background-image: url("data:image/svg xml;charset=utf-8,<svg width='5' height='5' fill='#808080' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0h5v5H0V2h2v1h1V2H0' fill='#fff'/><path fill-rule='evenodd' clip-rule='evenodd' d='M0 0h4v4H0V1h1v2h2V1H0'/></svg>");
			background-size: cover;
			margin: 0;
			padding: 10px;
			padding-block-start: 8px;
		}
		@media (min-width: 1201px) {
			#app-help {
				width:1042px;
				height: 900px;
				background:url("/x/win98/app-help.png") no-repeat;
			}
			#app-explorer {
				width:1340px;
				height: 786px;
				background:url("/x/win98/app-explorer.png") no-repeat;
			}
		}