layout.css

html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}
.start-menu {
	position: absolute !important; /* XXX overriding relative; could instead of using :after use border-image */
	left: 2px;
	bottom: 25px;
	width: calc(186px + 21px); /* 186px isn't the proper width measured out, just what I had it before, (for the content, on chrome on windows 10; text wrapping is not cross-platform-consistent) */
	height: 340px;
	max-height: calc(100vh - 26px); /* based on taskbar height TODO: do this differently, probably in JS, since the taskbar will be resizable (or could be) */
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
}
.start-menu-titlebar {
	flex: 0 0 auto;
	width: 21px;
}	
.start-menu-content {
	overflow: auto;
	padding: 15px;
}
.start-menu ul {
	list-style: none;
	margin: 1em 0;
	padding: 0;
}
.desktop {
	height: 100%;
	display: flex;
}
.folder-view {
	position: relative;
	flex: 1;
	overflow: auto;
}
.desktop .folder-view {
	overflow: hidden;
}
.taskbar {
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	right: 0;
	height: 27px; /* not including outline part of border */
	display: flex;
	flex: 1;
}
/* .taskbar-button is generally .task or .start-button for now */
.taskbar button,
.taskbar-divider,
.tray {
	margin: 2px;
}
.taskbar-divider {
	margin-right: 0px;
	margin-left: 0px;
	/* TODO: maybe make that 2px rule padding on the taskbar instead and avoid resetting this */
}
.taskbar button {
	line-height: 14px;
	padding: 2px;
	overflow: hidden; /* TODO: If tons and tons of tasks don't show icons? (smaller than width of an icon?) */
	display: flex;
	flex-direction: row;
	align-items: center;
	/* (justify-content: flex-start;) */
}
.taskbar button .title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.taskbar .start-button {
	flex-shrink: 0;
	padding: 2px 4px;
}
.tray {
	display: flex;
	flex-direction: row;
	/* align-items: center; */
	/* align-content: center; */
	/* justify-content: center; */
	line-height: 22px;
	box-sizing: border-box;
	vertical-align: middle;
}
.tray-icons {
	display: flex;
	align-items: center;
	margin-left: 2px; /* XXX basically 1px, but 2px because of the way the border is done */
}
.tray-icon {
	margin-left: 1px;
}
.taskbar-time {
	width: 60px;
	text-align: center;
}
/* TODO: offset task button contents down a px when depressed... actually most buttons */
.tasks {
	display: flex;
	flex: 1;
	height: 100%;
	min-width: 0; /* reset implicit min-width from flexbox */
}
.task {
	max-width: 200px;
	width: 50%;
	text-align: left;
}
.task img {
	padding-right: 4px;
	flex: 0 0 auto;
}
.desktop,
.folder-view,
.taskbar,
.start-button,
.tasks,
.task,
.os-window,
.window-titlebar,
.window-title {
	cursor: default;
	user-select: none;
	-o-user-select: none;
	-ms-user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
}
.os-window {
	display: flex;
	flex-direction: column;
}
.window-titlebar .icon {
	vertical-align: bottom;
}
.window-content {
	margin: 0;
	padding: 0;
	flex: 1;
}
.desktop-icon {
	display: inline-block;
	vertical-align: bottom; /* with inline-block, always */
	text-align: center;
}
.desktop-icon .icon-wrapper {
	display: inline-block;
	vertical-align: bottom; /* with inline-block, always */
	position: relative;
}
.desktop-icon .icon-wrapper,
.desktop-icon .icon-wrapper .selection-effect {
	width: var(--icon-size, 32px);
	height: var(--icon-size, 32px);
}
.desktop-icon .title {
	line-height: 13px;
	font-size: 9px;
	overflow: hidden;
	text-overflow: ellipsis; /* TODO: make this work with multiline text! This is apparently a limitation of this CSS property and there are various crazy CSS hacks and JS libs to solve this. */
	word-wrap: break-word; /* All browsers since IE 5.5+ */
	overflow-wrap: break-word; /* Renamed property in CSS3 draft spec */
}
.desktop-icon:not(.focused) .title {
	/* max-height: 2em would only work with line-height: 1 */
	max-height: calc(13px * 2);
}
.desktop-icon.focused {
	z-index: 1; /* for multi-line title display */
}
.desktop-icon .title input {
	display: flex;
	width: 100%;
}
/* Fix dragging things (like windows) over iframes */
.drag iframe {
	pointer-events: none;
}

.marquee {
	pointer-events: none;
}

.window-content .button-group {
	width: 85px;
}
.window-content .button-group > button {
	width: 95%;
	padding: 3px 5px;
}

.help-window .window-content {
	display: flex;
	flex-flow: column;
}
.help-window .main {
	flex: 1;
	display: flex;
	flex-flow: row;
}
.help-window .toolbar button {
	width: 55px;
	height: 40px;
	padding: 0;
}
.help-window .toolbar button span {
	display: inline-flex;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	/* flex centering + preventing overflow wrap means the font can be too big and it'll still stay centered */
	font-size: 12px;
	white-space: pre;
	justify-content: center;
}
.help-window .toolbar button {
	position: relative;
}
.help-window .toolbar button .icon {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
.help-window .toolbar button .icon {
	background-image: url("images/help-viewer-toolbar-icons-grayscale.png");
}
.help-window .toolbar button:not([disabled]):hover .icon {
	background-image: url("images/help-viewer-toolbar-icons.png");
}
.help-window .toolbar button[disabled] .icon {
	filter: saturate(0%) opacity(50%); /* fallback */
	filter: url("#disabled-inset-filter");
}
.help-window .contents {
	background: white;
	background: var(--Window);
	color: var(--WindowText);
	flex-basis: 300px; /* normally the default is 200px, but that leaves a scrollbar and we don't have rollover viewing of longer titles (@TODO) */
	flex-grow: 0;
	flex-shrink: 0;
	overflow: auto;
}
.help-window ul {
	margin: 0;
	padding: 0;
}
.help-window li {
	display: block;
	white-space: nowrap;
}
.help-window .item {
	display: inline-block;
}
.help-window .folder:not(.expanded) ul {
	display: none;
}
.help-window iframe {
	flex: 1;
	width: 0;
}
.help-window li ul {
	padding-left: 16px;
}
.help-window li:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 16px;
	height: 16px;
	background-position: 0 0;
	margin-right: 2px;
}
.help-window .folder.expanded:before {
	background-position: -16px 0;
}
.help-window .page:before {
	background-position: -32px 0;
}

::before, ::after {
	pointer-events: none;
}

.cursor-bully * {
	cursor: inherit !important;
}
.loading-program * {
	cursor: progress;
}

#webamp-context-menu {
	z-index: 5000000 !important;
}