html, body {
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
	background: #000;
}

#desktop {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #000 url('/images/background1.jpeg') no-repeat left top;
	background-size: cover;
	user-select: none;
	-webkit-user-select: none;
}

.desktop-icon {
	position: absolute;
	width: 92px;
	text-align: center;
	color: #fff;
	font-size: 12px;
	line-height: 1.2;
	cursor: default;
}

.desktop-icon .icon-hit { display: inline-block; padding: 2px 4px; }
.desktop-icon img { display: block; width: 32px; height: 32px; margin: 0 auto 6px auto; }

.desktop-icon .label {
	display: inline-block;
	padding: 1px 4px;
	text-shadow: 1px 1px 0 rgba(0,0,0,0.85);
	border: 1px dotted transparent;
	background: transparent;
}

.desktop-icon.selected .label {
	background: #000080;
	border: 1px dotted #fff;
}

.window {
	position: absolute;
	background: #c0c0c0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	box-shadow: 1px 1px 0 #000;
}

.main-window { top: 100px; left: 150px; width: 900px; max-width: calc(100vw - 190px); }
.dialog-window { min-width: 280px; }

.titlebar {
	background: linear-gradient(to right, #0a246a, #a6caf0);
	color: #fff;
	padding: 2px 3px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: bold;
	cursor: move;
}

.titlebar-left {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
	overflow: hidden;
}

.titlebar-left span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-logo { width: 16px; height: 16px; display: block; }
.title-buttons { display: flex; gap: 2px; align-items: center; }

.win-btn, .classic-btn {
	background: #c0c0c0;
	color: #000;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	font-family: inherit;
	cursor: pointer;
}

.win-btn { width: 18px; height: 16px; padding: 0; margin: 0; font-size: 10px; line-height: 1; }
.classic-btn { display: inline-block; padding: 6px 14px; font-size: 13px; min-width: 84px; box-sizing: border-box; }

.close-btn {
	width: 16px;
	height: 16px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	line-height: 0;
}

.close-btn img { display: block; width: 16px; height: 16px; }

.menu-bar { padding: 3px 8px 2px 8px; font-size: 13px; background: #c0c0c0; }
.menu-bar span { margin-right: 16px; cursor: default; }

.nav-toolbar, .location-row {
	padding: 3px 6px;
	background: #c0c0c0;
	border-top: 1px solid #dfdfdf;
	border-bottom: 1px solid #8a8a8a;
	display: flex;
	align-items: center;
	gap: 4px;
}

.nav-image-btn { padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; line-height: 0; height: 41px; }
.nav-image-btn img { display: block; height: 41px; width: auto; }

.toolbar-spacer { flex: 1 1 auto; }

.toolbar-logo-box {
	width: 28px;
	height: 28px;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
	background: #c0c0c0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.toolbar-logo-box img { width: 36px; height: 36px; }

.bookmark-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 2px 6px;
	font-size: 12px;
	background: #c0c0c0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
	flex: 0 0 auto;
}

.bookmark-btn img { width: 14px; height: 14px; }
.location-label { font-size: 12px; flex: 0 0 auto; }

#locationInput {
	flex: 1 1 auto;
	min-width: 180px;
	padding: 2px 4px;
	font-family: inherit;
	font-size: 12px;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background: #fff;
	box-sizing: border-box;
}

.small-arrow-btn {
	width: 18px;
	height: 18px;
	background: #c0c0c0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #808080;
	border-bottom: 1px solid #808080;
	text-align: center;
	line-height: 16px;
	font-size: 10px;
	cursor: pointer;
}

.browser-frame-wrap {
	margin: 6px;
	height: 420px;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background: #fff;
}

#browserFrame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }

.status-row { margin: 0 6px 6px 6px; display: flex; gap: 6px; font-size: 12px; }
.status-main {
	flex: 1 1 auto;
	padding: 3px 6px;
	background: #c0c0c0;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.dialog-body { padding: 18px 16px 14px 16px; font-size: 14px; line-height: 1.5; }
.dialog-body a { color: #0000cc; }
.dialog-actions { text-align: center; margin-top: 18px; }
.top-gap { margin-top: 14px; }
.right-gap { margin-right: 8px; }

.shutdown-grid { display: grid; grid-template-columns: 60px 1fr; gap: 10px; }
.shutdown-icon { display: block; width: 32px; height: 32px; }
.radio-btns { margin-top: 12px; }
.radio-btns label { display: block; margin: 0 0 8px 0; cursor: pointer; }

.modal-dim {
	position: absolute;
	inset: 0;
	display: none;
	background: rgba(0,0,0,0.38);
	z-index: 55;
}

.shutdown-overlay {
	position: absolute;
	inset: 0;
	display: none;
	background: #000;
	color: #ffb000;
	z-index: 80;
	text-align: center;
	font-size: 24px;
}

.shutdown-message {
	position: absolute;
	left: 50%;
	top: 45%;
	transform: translate(-50%, -50%);
	width: 80%;
	max-width: 760px;
	line-height: 1.6;
}

.welcome-screen {
	position: absolute;
	inset: 0;
	z-index: 85;
	background: #008080;
}

.welcome-window {
	position: absolute;
	top: 35%;
	left: 35%;
	width: 458px;
	background: #c0c0c0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	box-shadow: 1px 1px 0 #000;
	color: #000;
	font-size: 12px;
}

.welcome-titlebar {
	background: #0000a8;
	color: #fff;
	padding: 1px 2px 1px 3px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 12px;
	font-weight: bold;
	line-height: 1;
}

.welcome-title-buttons { display: flex; gap: 2px; }

.welcome-mini-btn {
	width: 16px;
	height: 14px;
	padding: 0;
	margin: 0;
	background: #c0c0c0;
	color: #000;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	font-family: inherit;
	font-size: 11px;
	line-height: 12px;
	text-align: center;
	cursor: pointer;
}

.welcome-body {
	display: grid;
	grid-template-columns: 74px 1fr 104px;
	gap: 12px;
	padding: 28px 16px 18px 14px;
	align-items: start;
}

.welcome-left { padding-top: 2px; }
.welcome-key-icon { width: 32px; height: 32px; display: block; margin-left: 4px; }
.welcome-main { min-width: 0; }
.welcome-copy { font-size: 12px; margin-bottom: 16px; }

.welcome-form {
	display: grid;
	grid-template-columns: 68px 1fr;
	gap: 8px 8px;
	align-items: center;
}

.welcome-form input {
	width: 100%;
	padding: 2px 4px;
	font-family: inherit;
	font-size: 12px;
	box-sizing: border-box;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	background: #fff;
}

.welcome-actions { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }

.welcome-action-btn {
	width: 74px;
	padding: 4px 0;
	background: #c0c0c0;
	color: #000;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	font-family: inherit;
	font-size: 12px;
	cursor: pointer;
}

#taskbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 28px;
	background: #c0c0c0;
	border-top: 1px solid #fff;
	display: flex;
	align-items: center;
	padding: 2px 3px;
	gap: 4px;
	box-sizing: border-box;
	z-index: 100;
}

.sep { width: 2px; align-self: stretch; background: #808080; border-right: 1px solid #fff; }
#startButton { padding: 0; margin: 0; border: none; background: transparent; cursor: pointer; line-height: 0; height: 22px; }
#startButton img { display: block; height: 22px; width: auto; }

.quick-btn {
	width: 24px;
	height: 22px;
	padding: 0;
	margin: 0;
	cursor: pointer;
	background: #c0c0c0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	line-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quick-btn img { display: block; width: 16px; height: 16px; }

#taskButton {
	min-width: 260px;
	max-width: 360px;
	padding: 4px 10px;
	background: #c0c0c0;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	font-family: inherit;
	font-size: 13px;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.taskbar-spacer { flex: 1 1 auto; }

#clock {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 4px 8px;
	background: #c0c0c0;
	border-top: 1px solid #808080;
	border-left: 1px solid #808080;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	font-size: 13px;
	min-width: 92px;
	text-align: center;
	box-sizing: border-box;
}

.clock-icon {
	width: 14px;
	height: 14px;
	display: block;
	flex: 0 0 auto;
}

#startMenu,
.submenu {
	background: #c0c0c0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
	border-right: 1px solid #404040;
	border-bottom: 1px solid #404040;
	box-shadow: 1px 1px 0 #000;
	user-select: none;
	-webkit-user-select: none;
}

#startMenu {
	position: absolute;
	left: 2px;
	bottom: 30px;
	width: 226px;
	display: none;
	z-index: 70;
	overflow: visible;
}

.start-strip {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 28px;
	background: linear-gradient(to bottom, #2a50b4, #002c8c);
}

.start-strip .vertical {
	position: absolute;
	left: -55px;
	bottom: 66px;
	transform: rotate(-90deg);
	font-size: 26px;
	font-weight: bold;
	white-space: nowrap;
	color: #fff;
	letter-spacing: 0;
	line-height: 1;
}

.start-strip .vertical .n98 {
	color: white;
	display: inline-block;
	position: relative;
	top: -1px;
	margin-left: 1px;
}

.start-body {
	margin-left: 28px;
	padding: 2px;
	position: relative;
}

.start-item,
.submenu-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 8px;
	font-size: 13px;
	cursor: pointer;
	color: #000;
	background: transparent;
}

.start-item.large { padding-top: 6px; padding-bottom: 6px; }

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

.menu-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.large-item-icon { width: 32px; height: 32px; flex: 0 0 auto; }
.submenu-icon { width: 20px; height: 20px; flex: 0 0 auto; }

.start-arrow,
.submenu-arrow {
	margin-left: auto;
	font-size: 12px;
}

.start-divider {
	height: 2px;
	margin: 3px 2px;
	background: #808080;
	border-bottom: 1px solid #fff;
}

.submenu {
	position: absolute;
	display: none;
	z-index: 71;
}

#programsSubmenu { left: 197px; top: 38px; width: 204px; }
#settingsSubmenu { left: 197px; top: 122px; width: 202px; }

.submenu-nested { left: 198px; top: 0; width: 196px; }
.submenu-double-nested { left: 190px; top: 112px; width: 184px; }
.submenu-nested-mid { top: 28px; }
.submenu-nested-low { top: 56px; }
.settings-nested { top: 112px; }

.fake-icon {
	width: 20px;
	height: 20px;
	background: #fff;
	border: 1px solid #000;
	box-sizing: border-box;
	text-align: center;
	line-height: 18px;
	font-size: 12px;
	flex: 0 0 auto;
}