/*

		Think different.
		Think "adding the to the beggining of every CSS class".

	*/
	@font-face {
		font-family: "Chicago";
		src: url("/res/ChicagoFLF.ttf") format("truetype");
	}
	@font-face {
		font-family: "Geneva";
		src: url(/res/geneva-9-1.ttf) format('truetype');
	}

	body, html {
		padding: 0;
		margin: 0;
	}

	.thePreloader {
		display: none;
	}

	body {
		background-color: black;
		font-family: Chicago, Arial, sans-serif;
		letter-spacing: 0px;
		color: black;
		font-size:12px;
	}

	b {
		/*font-weight: normal;*/
		/*font-family: CERN Bold, Arial, sans-serif;*/
		font-size: 12px;
	}
	.theMainContent {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100vw;
		height: 100vh;
	}
	.theThing {
		border-top: 1px solid #AAAAAA;
		border-left: 1px solid #AAAAAA;
		border-bottom: 1px solid #FFFFFF;
		border-right: 1px solid #FFFFFF;
	}
	.theTopBar {
		background-color: #DDDDDD;
		border-top: 1px solid white;
		border-right: 1px solid white;
		border-left: 1px solid white;
		border-bottom: 1px solid #999999;
		height: 20px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		display: flex;
		align-items: center;
		box-sizing:border-box;
		position: relative;
	}
	.theTopBar:before {
		content: " ";
		position: absolute;
		z-index: 2;
		top: 0px;
		left: -1px;
		right: -1px;
		bottom: -2px;
		border-bottom: 1px solid black;
		pointer-events:none;
	}
	#optAppleIcon {
		width: 12px;
		height: 18px;
		background-image: url("/res/apple.gif");
		image-rendering:pixelated;
		background-repeat:no-repeat;
		background-position:center;
		font-size:0px;
	}
	.theListContainer {
		width: 90%;
		margin-left: 20px;
		/*! margin-top: 2px; */
		display: flex;
		align-items: center;
	}
	.theList {
		margin-left: 15px;
		font-size: 12px;
		/*font-family: CERN Bold, Arial, sans-serif;*/
		display: flex;
		position: relative;
		align-items: center;
	}
	.theOption {
		text-align:center;
		padding-left:7px;
		padding-right:7px;
	}
	.theOption::selection {
		background: transparent;
	}
	.theOptionSelected {
		background-color: #333399;
		color:white;
		/*! position: absolute; */
		/*! top: -2px; */
		/*! height: 17px; */
		border-bottom: 1px solid #000088;
		border-top: 1px solid #6666CC;
		position: relative;
		top: 0px;
		height: 18px;
	}

	.theDesktop {
		height: calc(100% - 20px);
	}
	.theDesktopIcon, .theIconSelectionBorder {
		display:flex;
		flex-direction:column;
		width:fit-content;
		align-items:center;
		position:absolute;
		right:20px;
		/*height:48px;
		width:48px;*/
		left: calc(100% - 80px);
	}
	.theDesktopIconImage {
		image-rendering:pixelated;
		width:32px;
		height:32px;
		margin-bottom:3px;
		background-size:cover;
	}
	.theDesktopIconLabel {
		box-sizing: border-box;
		padding: 2px 2px 3px 3px;
		background: #FCFBF7;
		font-family: Geneva;
		width: fit-content;
		font-size: 20px;
		line-height: 0.8;
		letter-spacing:-0.3px;
		white-space:nowrap;
		text-align:center;
	}
	.theIconFocused>.theDesktopIconLabel {
		color:white;
		background:black;
	}
	.theIconFocused>.theDesktopIconImage {
		filter: brightness(50%);
	}
	.theIconSelectionBorder { opacity: 0.7; pointer-events:none; }

	.theLoadingBarContainer {
		text-align: center;
	}
	.theLoadingBarBackground {
		/* @todo GET THIS SHIT FIXED IT SUCKS */
		width: 100%;
		max-height: 12px;
		background-color: #BBBBBB;
		background-image: url("/res/loadingBorder.png?5");
		background-size: 100% 100%;
	}
	.theLoadingBar {
		width:0%;
		display: flex;
	}
	.theLoadingBarStart {
		width: 3px;
		height: 12px;
		background: url("/res/loadStart.png");
	}
	.theLoadingBarMiddle {
		width: 100%;
		height: 12px;
		background: url("/res/loadMiddle.png");
	}
	.theLoadingBarEnd {
		width: 4px;
		height: 12px;
		background: url("/res/loadEnd.png");
	}
	.theNoDiskIcontainer {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.theNoDiskIcon {
		width: 32px;
		height: 32px;
		background: url("/res/noDisk.gif");
	}
	.theScreenContent {
		width: calc(100vw - 50px);
		height: calc(100vh - 50px);
		border-radius: 10px;
		position:relative;
		background:black;
		border: 1px solid gray;
		/*background-image: url("/res/bg.png");*/
		cursor: url("/res/cursor.png"), auto;
		overflow:hidden;
	}
	.theWindow {
		border: 1px solid black;
		position:absolute;
		/*! min-width: 300px; */
		/*! min-height: 300px; */
		background: #CCCCCC;
		display:flex;
		flex-direction:column;
		box-sizing: border-box;
		z-index:50;
		box-shadow: black 1px 1px 0;
	}
	.theInnerBorder:before, .theWindow:before {
		content: " ";
		position: absolute;
		/*! z-index: -1; */
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		border-top: 1px solid white;
		border-left: 1px solid white;
		border-bottom: 1px solid #999999;
		border-right: 1px solid #999999;
		pointer-events:none;
	}
	.theBlackInnerBorder:before, .theWindowContent:before {
		content: " ";
		position: absolute;
		z-index: 2;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		border: 1px solid black;
		pointer-events:none;
	}
	.theRedWindow .theInnerBorder:before, .theRedWindow:before {
		border-top: 1px solid #FF9999;
		border-left: 1px solid #FF9999;
		border-bottom: 1px solid #FF6666;
		border-right: 1px solid #FF6666;
	}
	.theRedWindow {
		background: #FFCCCC;
	}
	.theUnfocused {
		background: #DDDDDD;
		color: #777777;
		box-shadow: #555555 1px 1px 0;
	}
	.theUnfocused:not(.theUnfocused.theNoBorderWindow):before {
		border: none;
	}
	.theUnfocused, .theUnfocused>.theWindowContent:before {
		border:1px solid #555555;
	}
	.theUnfocused>.theWindowContent {
		border:1px solid transparent;
	}
	.theUnfocused>.theWindowTopBar>.theWindowTopButton {
		opacity:0;
	}
	.theInnerBorder, .theBlackInnerBorder {
		position:relative;
		box-sizing:border-box;
	}
	.theWindowTopBar {
		height: 18px;
		margin: 2px 4px 2px 4px;
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.theWindowTopBarDecorationContainer {
		display:flex;
		flex:1;
		margin-right:5px;
		margin-left:5px;
		image-rendering:pixelated;
	}
	.theWindowTopBarDecStart {
		background: url("/res/windowDecStart.png");
	}
	.theWindowTopBarDecMiddle {
		background: url("/res/windowDecMiddle.png");
		width:100% !important;
	}
	.theWindowTopBarDecEnd {
		background: url("/res/windowDecEnd.png");
	}
	.theRedWindow>.theWindowTopBar>.theWindowTopBarDecorationContainer>.theWindowTopBarDecStart {
		background: url("/res/redWindowDecStart.png");
	}
	.theRedWindow>.theWindowTopBar>.theWindowTopBarDecorationContainer>.theWindowTopBarDecMiddle {
		background: url("/res/redWindowDecMiddle.png");
		width:100% !important;
	}
	.theRedWindow>.theWindowTopBar>.theWindowTopBarDecorationContainer>.theWindowTopBarDecEnd {
		background: url("/res/redWindowDecEnd.png");
	}
	.theRedWindow>.theWindowTopBar>button {
		display:none;
	}
	.theUnfocused>.theWindowTopBar>.theWindowTopBarDecorationContainer {
		opacity:0;
	}
	.theNoBorderWindow>.theWindowContent:before, .theNoBorderWindow>.theWindowContent {
		background: transparent;
		border:1px solid transparent;
	}
/*	.theNoBorderWindow {
		background:transparent;
	}*/
	.theNoBorderWindow>.theWindowContent {
		margin:0;
	}
	.theNoBorderWindow.theUnfocused {
		border:1px solid black;
	}
	.theNoBorderWindow>.theWindowTopBar {
		display:none;
	}
	.theWindowTopBarDecorationContainer>div {
		width: 1px;
		height: 12px;
	}
	.theWindowTopBarName {
		white-space:nowrap;
		position:relative;
		top: -1px;
	}
	.theWindowTopBarIcon {
		width: 16px;
		height:16px;
		background-size:cover;
		background-repeat:no-repeat;
		margin-right:5px;
		image-rendering:pixelated;
	}
	.theWindowTopBarInfo {
		display:flex;
		align-items:center;
		justify-content:center;
	}
	.theWindowContent {
		margin:0px 4px 4px 4px;
		background:#DDDDDD;
		flex:1;
		position:relative;
	}

	/*
	I stole the button CSS. Didn't wanna program the buttons. Thought it'd be too complicated, and tbh, it is. Just look at all this shit! https://robbiebyrd.github.io/platinum/
	*/
	button {
			background-color: #dedede;
			border: 1px solid #000;
			border-radius: 3px;
			box-shadow: inset -1px -1px 0 0 #777, inset -2px -2px 0 0 #aaa, inset 1px 1px 0 0 #ddd, inset 2px 2px 0 0 #fff;
			padding: 2px 15px 2px 15px;
			font-family: Chicago;
			margin:5px;
			cursor: url("/res/cursor.png"), auto;
			font-size: 12px;
	}

	button:active {
			background-color: #666;
			box-shadow: 0 0 0 1px #aaa, 0 0 0 2px #ddd, 0 0 0 3px #000, inset -1px -1px 0 0 #888, inset -2px -2px 0 0 #777, inset 1px 1px 0 0 #444, inset 2px 2px 0 0 #555 !important;
			color: #fff;
	}

	button:hover {
			box-shadow: inset -1px -1px 0 0 #777, inset -2px -2px 0 0 #aaa, inset 1px 1px 0 0 #ddd, inset 2px 2px 0 0 #fff, 0 0 0 1px #aaa, 0 0 0 2px #ddd, 0 0 0 3px #000;
	}

	/* This i did program */
	button:disabled {
		box-shadow: none !important;
		border: 1px solid #888888;
		color: #777777;
		background-color: transparent !important;
	}

	input[type=text], input[type=number] {
		background: white;
		font-family: Chicago;
		font-size:12px;
		color:black;
		border: 1px solid black;
		border-radius: 0;
	}
	/*input[type=text]::placeholder {
			opacity: 1;
	}*/
	input[type=text]:focus, input[type=number]:focus {
		outline:none;
		box-shadow: #66C 0px 0px 0px 2px;
		border-radius: 1px;
	}

	.theSelectionBorder {
		z-index: 1000000;
		position:absolute;
		top: 40px;
		left: 40px;
		border: 2px dotted;
		image-rendering:pixelated;
		pointer-events:none;
		box-sizing:border-box;
	}
	.theInnerSelectionBorder {
		border: 2px dotted;
		width:100%;
		height:100%;
	}

	.theWindowTopButton {
		all: unset;
		width: 13px;
		height: 13px;
		margin-left: 4px;
	}
	.theWindowTopButton:hover, .theWindowTopButton:active {
		box-shadow:unset !important;
	}
	.theWindowClose {
		margin-left:0;
		margin-right:4px;
		background: url("/res/close.png");
	}
	.theWindowSquish {
		background: url("/res/squish.png");
	}
	.theWindowClose:active {
		background: url("/res/closePressed.png");
	}
	.theWindowSquish:active {
		background: url("/res/squishPressed.png");
	}

  /* Styling select is a fucking nightmare. I'm not able to do much about it. */
	select {
		border-top: 1px solid white;
		border-left: 1px solid white;
		border-bottom: 1px solid #999999;
		border-right: 1px solid #999999;
		border-radius: 3px;
		padding: 4px;
		background-color: #DDDDDD;
		position:relative;
		border-style:double;
		outline: 1px solid black;
		font-family: Chicago;
		font-size:9px;
	}
	select * {
		font-family: monospace;
		font-size: 12px;
		border-radius: 0;
		background-color: #DDDDDD !important;
	}
	select:active {
		color:white;
		background:#666666;
		border-top: 1px solid #555555;
		border-left: 1px solid #555555;
		border-bottom: 1px solid #888888;
		border-right: 1px solid #888888;
	}

	#wOptionMenu>.theWindowContent {
		display:flex;
		box-sizing:border-box;
		min-width:128px;
		flex-direction:column;
	}
	.theOptionsMenuOption {
		width: 100%;
		padding-left:20px;
		padding-top: 2px;
		padding-bottom:2px;
		padding-right:10px;
		box-sizing:border-box;
	}
	.theOptionsMenuOption:hover:not(.theOptionsMenuOption.theOptionsRunning) {
		background-color: #333399;
		color:white;
	}
	.theOptionsMenuOption:hover, .theOptionsRunning {
		position:relative;
		left: -1px;
		width: calc(100% + 2px);
		border-left: 1px solid #66C;
		border-right: 1px solid #000088;
	}
	.theOptionsMenuOption:hover:nth-of-type(1), .theOptionsRunning:nth-of-type(1) {
		border-top: 1px solid #6666CC;
		top:-1px;
	}
	.theOptionsMenuOption:hover:last-of-type, .theOptionsRunning:last-of-type {
		top: 1px;
		border-bottom: 1px solid #000088;
	}
	.theOptionsMenuSeparator {
		width:calc(100% + 2px);
		height: 2px;
		position:relative;
		left:-2px;
		border-top: 1px solid #888888;
		border-bottom: 1px solid white;
		box-sizing:border-box;
		margin: 2px 0 2px 0;
	}
	.grecaptcha-badge {
		display:none !important;
	}
	@keyframes awesome {
		from {
			transform: rotate(0deg) rotateY(0deg) rotateX(0deg);
			filter:hue-rotate(0deg);
		}
		to {
			transform: rotate(360deg) rotateY(360deg) rotateX(360deg);
			filter:hue-rotate(360deg);
		}
	}
	@keyframes awesomeNoTrans {
		from {
			filter:hue-rotate(0deg);
		}
		to {
			filter:hue-rotate(360deg);
		}
	}