@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 400;
    src: url(/font/ms_sans_serif.woff2) format("woff2")
}

@font-face {
    font-family: "Pixelated MS Sans Serif";
    font-style: normal;
    font-weight: 700;
    src: url(/font/ms_sans_serif_bold.woff2) format("woff2") 
}


html, body {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;

	
}

@keyframes flashEffect {
	0% { opacity: 1; }
	50% { opacity: 0.2; }
	100% { opacity: 1; }
  }
  
  .flash-animation {
	animation: flashEffect 1s ease-in-out;
  }
  
.start-menu {
	position: absolute !important;
    left: 2px;
    bottom: 25px;
    width: calc(200px + 21px);
    height: 420px;
    /* max-height: calc(100vh - 26px); */
    box-sizing: border-box;
    /* display: flex
; */
    flex-direction: row;
}
.start-menu-titlebar {
	flex: 0 0 auto;
	width: 21px;
}	
.start-menu-content {
	
	/*padding: 15px;*/
}

.start-menu-content ul {
	
	padding: 15px;
}

.start-menu-item img {
	margin-right: 6px; /* adjust to taste */
	width: 32px;
  }

.start-menu ul {
	list-style: none;
    margin: 0em 0em 0em 1.5em;
    padding: 0;
    font-family: "Pixelated MS Sans Serif";
}
.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;
}
/* .os-window above disables user-select so window chrome isn't selectable,
   but that inherits into form controls and breaks tapping to open a
   <select> on iOS Safari when an ancestor has -webkit-user-select: none. */
.os-window select,
.os-window input,
.os-window textarea {
	-webkit-user-select: auto;
	user-select: auto;
}
.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);
}

/* Special icon class for Network Spirituality / NS logos */
.icon-ns {
	width: 48px;
	height: 48px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	margin-top: -8px;
	margin-left: -7px;
}

.icon-bios {
	width: 42px;
	height: 42px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	display: inline-block;
	margin-top: -5px;
	margin-left: -5px;
}
.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 */
}

.folder-view .title {
	line-height: 13px;
	font-size: 12px;
	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%;
}

/* Hidden by default; only shown on mobile-sized viewports (see @media block below) */
.desktop-icon.mobile-only-icon {
	display: none;
}
/* 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;
}

@media screen and (max-width: 430px) and (max-height: 800px) {
	/* Mobile-cropped version of the desktop wallpaper; overrides the inline
	   background-image set on .desktop in index.html for the desktop layout. */
	.desktop {
		background-image: url(images/desktop-bg-mobile.webp) !important;
	}

    .start-menu.outset-deep {
		width: 200px;
	}

	.submenu-list.outset-deep {
		left: 10px;
		text-wrap: auto;
		line-height: 12px;
	}

	


	
	
	
	.os-window.help-window.about-window {
    width: 95vw !important;
    height: 80vh !important;
    left: 2.5vw !important;
    top: 10px !important;
  }

  .help-window .contents {
		background: white;
		background: var(--Window);
		color: var(--WindowText);
		flex-basis: 140px;
		flex-grow: 0;
		flex-shrink: 0;
		overflow: auto;
	}

  /* 2. Center the Help Title and Scale the Logo */

  .desktop-icon.mobile-only-icon {
    display: inline-block;
  }

  .os-window.display-properties-window {
    width: 95vw !important;
    height: 462px !important;
    max-width: 95vw !important;
    max-height: 462px !important;
  }

  .os-window.display-properties-window .window-content {
    overflow: auto;
  }

  /* The Background/Screen Saver/Appearance/Effects tabs all share the same
     .bg-layout markup: a fixed 280px preview pane next to a flex:1 controls
     pane holding the select. At 95vw on a phone there isn't 280px+ to spare,
     so the controls pane (and the select in it) gets squeezed down to almost
     nothing, which just shows the select's arrow glyph with no room for text.
     Stack them instead so the select gets the window's full width. */
  .display-properties .bg-layout {
    flex-direction: column !important;
  }
  .display-properties .preview {
    margin: 10px auto 0 !important;
    /* The fixed 297px height leaves too little room for the select below it
       once stacked; shrink to fit the monitor mockup's actual content. */
    height: auto !important;
  }

  /* The custom iframe program windows in programs.js open at a fixed desktop
     outerWidth/outerHeight (500-750px) that overflows a phone screen. They're
     all marked by an .iframe-scale-wrapper (Paint/Explorer use
     make_iframe_window and have no such wrapper, so they're left alone).
     Constrain them to the viewport like the other windows, and let the fixed-
     size scaled content scroll inside.
     Aim Away's window is excluded here — it opens at a small 300x300 that
     already fits a phone screen, so forcing it to 95vw/85vh just blew it up
     to nearly full-screen for no reason; it should just keep wrapping its
     iframe at its normal (centered, unscaled) size. */
  .os-window:has(.iframe-scale-wrapper, .iframe-scale-wrapper-gif) {
    width: 95vw !important;
    height: 85vh !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    left: 2.5vw !important;
    top: 8px !important;
  }
  .os-window:has(.iframe-scale-wrapper, .iframe-scale-wrapper-gif) .window-content {
    overflow: auto;
  }

  /* Spirit Generator opens at a fixed 600x460 desktop size with attributes
     and preview side by side (280px + 260px), which overflows a phone
     screen. Constrain the window like the others above and stack the
     columns, preview on top so the result is visible without scrolling
     past the whole attribute list first. */
  .os-window.spirit-generator-window {
    width: 95vw !important;
    height: 85vh !important;
    max-width: 95vw !important;
    max-height: 85vh !important;
    left: 2.5vw !important;
    top: 8px !important;
  }
  .os-window.spirit-generator-window .window-content {
    overflow: auto;
  }
  .spirit-generator-window .spirit-generator {
    flex-direction: column !important;
    height: auto !important;
  }
  .spirit-generator-window .sg-attributes {
    width: 100% !important;
    overflow: visible !important;
  }
  .spirit-generator-window .sg-preview-col {
    order: -1;
    width: 100% !important;
  }
}