From 7f63b95163d9caf82ee72a63adfaf122fb585393 Mon Sep 17 00:00:00 2001
From: "Jean (east-high-Nerd)" <jean@easthighnerd.net>
Date: Fri, 22 May 2026 22:30:57 -0400
Subject: [PATCH] Updated CSS file with new targeted divs, and turned spaced
 tabs into proper tabs

---
 res/css/default.css | 810 +++++++++++++++++++++++++-------------------
 1 file changed, 456 insertions(+), 354 deletions(-)

diff --git a/res/css/default.css b/res/css/default.css
index 48ddb4b..58296ef 100644
--- a/res/css/default.css
+++ b/res/css/default.css
@@ -1,455 +1,557 @@
-html, body {
-    height: 100%;
-    width: 100%;
-    margin: 0px;
-    padding: 0px;
-/*     font-size: clamp(12px, 18px, 24px); */
-    font-size: 18px;
+html, body	{
+	height:						100%;
+	width:						100%;
+	margin:						0px;
+	padding:					0px;
+/*	 font-size: clamp(12px, 18px, 24px); */
+	font-size:					18px;
 }
 
-.monitor_body {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background-color: #eceab9;
+.monitor_body	{
+	height:						100%;
+	width:						100%;
+	display:					flex;
+	justify-content:			center;
+	align-items:				center;
+	background-color:			#eceab9;
 }
 
-.monitor {
-    position: absolute;
-/*     background-image: url("/res/img/monitor.png"); */
-/*     width: 1280px; */
-/*     height: 1024px; */
-    background-repeat: no-repeat;
-    background-position: center;
-    margin: 0px;
-    padding: 0px;
-    background-size: contain;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.monitor	{
+	position:					absolute;
+/*	 background-image: url("/res/img/monitor.png"); */
+/*	 width: 1280px; */
+/*	 height: 1024px; */
+	background-repeat:			no-repeat;
+	background-position:		center;
+	margin:						0px;
+	padding:					0px;
+	background-size:			contain;
+	width:						100%;
+	height:						100%;
+	display:					flex;
+	justify-content:			center;
+	align-items:				center;
 }
 
-.power_button {
-/*     position: absolute; */
-/*     right: 208px; */
-/*     bottom: 0px; */
-    width: 80px;
-    height: 64px;
-    background-image: url("/res/img/power-button.png");
-/*     background-color: pink; */
-    border-width: 16px;
-    border-color: #c8c699;
-    border-style: solid;
+.power_button	{
+/*	 position: absolute; */
+/*	 right: 208px; */
+/*	 bottom: 0px; */
+	width:						80px;
+	height:						64px;
+	background-image:			url("/res/img/power-button.png");
+/*	 background-color: pink; */
+	border-width:				16px;
+	border-color:				#c8c699;
+	border-style:				solid;
 }
 
-.power_button:hover {
-    background-image: url("/res/img/power-button-pressed.png");
-    width: 80px;
-    height: 64px;
+.power_button:hover	{
+	background-image:			url("/res/img/power-button-pressed.png");
+	width:						80px;
+	height:						64px;
 }
 
 .desktop {
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    top: 0px;
-    left: 0px;
-    margin: 0px;
-    padding: 0px;
-    background-color: skyblue;
-    background-image: url("/res/img/bliss-hd.jpg");
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-position: center;
+	position:					absolute;
+	width:						100%;
+	height:						100%;
+	top:						0px;
+	left:						0px;
+	margin:						0px;
+	padding:					0px;
+	background-color:			skyblue;
+	background-image:			url("/res/img/bliss-hd.jpg");
+	background-size:			cover;
+	background-repeat:			no-repeat;
+	background-position:		center;
 }
 
-.desktop_buttons {
-    position: absolute;
-    width: calc(100% - 16px);
-    height: calc(100% - 38px);
-    top: 0px;
-    left: 0px;
-    padding: 8px;
-    padding-top: 0px;
-/*     background-color: pink; */
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    align-content: flex-start;
-    column-gap: 16px;
+.desktop_buttons	{
+	position:					absolute;
+	width:						calc(100%	-	16px);
+	height:						calc(100%	-	38px);
+	top:						0px;
+	left:						0px;
+	padding:					8px;
+	padding-top:				0px;
+/*	 background-color: pink; */
+	display:					flex;
+	flex-direction:				column;
+	flex-wrap:					wrap;
+	align-content:				flex-start;
+	column-gap:					16px;
 
 }
 
-.desktop_buttons a {
-    color: #e0f8cf;
-    text-shadow: 2px 2px #071821;
-    text-align: center;
-    text-decoration: none;
+.desktop_buttons	a	{
+	color:						#e0f8cf;
+	text-shadow:				2px	2px	#071821;
+	text-align:					center;
+	text-decoration:			none;
 }
 
-.desktop_buttons img {
-/*     width: clamp(1em, 1.5em, 2em); */
-/*     height: clamp(1em, 1.5em, 2em); */
+.desktop_buttons	img	{
+/*	 width: clamp(1em, 1.5em, 2em); */
+/*	 height: clamp(1em, 1.5em, 2em); */
 }
 
-.desktop_buttons a:hover {
-    color: #65ff00;
+.desktop_buttons	a:hover	{
+	color:						#65ff00;
 }
 
-.window {
-    position: absolute;
-    background-repeat: no-repeat;
-    width: calc(100% - 8px);
-    height: calc(100% - 10px);
-    margin: 0px;
-    padding: 0px;
-    background-color: #E0F8CF;
-    border-width: 4px;
-/*     border-top-width: 5px; */
-    border-bottom-width: 6px;
-    border-color: #255FDD;
-    border-top-color: #3675c2;
-    border-style: solid;
+.window	{
+	position:					absolute;
+	background-repeat:			no-repeat;
+	width:						calc(100%	-	8px);
+	height:						calc(100%	-	10px);
+	margin:						0px;
+	padding:					0px;
+	background-color:			#E0F8CF;
+	border-width:				4px;
+/*	 border-top-width: 5px; */
+	border-bottom-width:		6px;
+	border-color:				#255FDD;
+	border-top-color:			#3675c2;
+	border-style:				solid;
 }
 
-.window_bar {
-    position: absolute;
-    width: 100%;
-    height: 136px;
-    background-color: #255FDD;
-/*     background-color: pink; */
-    margin: 0px;
-    padding: 0px;
-    overflow: hidden;
-/*     border-width: 0px; */
-/*     border-bottom-width: 4px; */
-/*     border-color: #255FDD; */
-/*     border-style: solid; */
-    color: white;
-    text-shadow: 2px 2px 2px darkblue;
+.window_bar	{
+	position:					absolute;
+	width:						100%;
+	height:						136px;
+	background-color:			#255FDD;
+/* 	background-color:			#efedde; */
+/*	 background-color: pink; */
+	margin:						0px;
+	padding:					0px;
+	overflow:					hidden;
+/*	 border-width: 0px; */
+/*	 border-bottom-width: 4px; */
+/*	 border-color: #255FDD; */
+/*	 border-style: solid; */
+/* #efedde */
+	color:						white;
+	text-shadow:				2px	2px	2px	darkblue;
 }
 
-.window_bar p {
-    position: absolute;
-    text-align: left;
-    font-size: 32px;
-    font-weight: bold;
-    top: 0px;
-    left: 0px;
-    margin-top: -2px;
+.window_bar	p	{
+	position:					absolute;
+	text-align:					left;
+	font-size:					32px;
+	font-weight:				bold;
+	top:						0px;
+	left:						0px;
+	margin-top:					-2px;
 }
 
-.window_bar p::before {
-    position: relative;
-    content: "";
-    background-image: url("/res/img/explorer.png");
-    background-size: 32px 32px;
-    display: inline-block;
-    width: 32px;
-    height: 32px;
-    top: 4px;
+.window_bar	p::before	{
+	position:					relative;
+	content:					"";
+	background-image:			url("/res/img/explorer.png");
+	background-size:			32px	32px;
+	display:					inline-block;
+	width:						32px;
+	height:						32px;
+	top:						4px;
 }
 
 .close_button {
-/*     background-color: #639bff; */
-    position: absolute;
-    right: 3px;
-    top: 6px;
-    width: 32px;
-    height: 32px;
-    content: url(/res/img/close.png);
+/*	 background-color: #639bff; */
+	position:					absolute;
+	right:						3px;
+	top:						6px;
+	width:						32px;
+	height:						32px;
+	content:					url(/res/img/close.png);
 }
 
 /*.close_button:hover {
-    background-color: #5FCDE4;
+	background-color: #5FCDE4;
 }*/
 
-.back_button {
-/*     background-color: #639bff; */
-    position: absolute;
-    left: 9px;
-    top: 80px;
-    width: 23px;
-    height: 23px;
+.back_button	{
+/*	 background-color: #639bff; */
+	position:					absolute;
+	left:						9px;
+	top:						80px;
+	width:						23px;
+	height:						23px;
 }
 
 /*.back_button:hover {
-    background-color: #5FCDE4;
+	background-color: #5FCDE4;
 }*/
 
-.window_content {
-    position: absolute;
-    top: calc(48px + 88px);
-    margin: 0px;
-    padding: 8px;
-    padding-top: 0px;
-    width: calc(100% - 16px);
-    height: calc(100% - (64px + 88px + 15px));
-    overflow: auto;
-    background-color: #e0f8cf;
-    color: #071821;
-/*     background-color: pink; */
-/*     background-color: black; */
-/*     color: #e0f8cf; */
-/*     background-color: #071821; */
-    text-shadow: 2px 2px 3px #e0f8cf;
-    /*     margin-bottom: 23px; */
+.window_content	{
+	position:					absolute;
+	top:						calc(48px	+	88px);
+	margin:						0px;
+	margin-top:					1px;
+	padding:					8px;
+	padding-top:				0px;
+	width:						calc(100%	-	16px);
+	height:						calc(100%	-	(64px	+	88px	+	15px));
+	overflow:					auto;
+	background-color:			#e0f8cf;
+	color:						#071821;
+/*	 background-color: pink; */
+/*	 background-color: black; */
+/*	 color: #e0f8cf; */
+/*	 background-color: #071821; */
+	text-shadow:				2px	2px	3px	#e0f8cf;
+	/*	 margin-bottom: 23px; */
 }
 
-.window_content a {
-    color: #86c06c;
-    text-shadow: 1px 1px 0px #071821;
+.window_content	a	{
+	color:						#86c06c;
+	text-shadow:				1px	1px	0px	#071821;
 }
 
-.window_content a:hover {
-    color: #65ff00;
+.window_content	a:hover	{
+	color:						#65ff00;
 }
 
-.web_buttons {
-    display: flex;
-    align-items: center;
-    justify-content: space-around;
-    margin: 8px;
-    flex-wrap: wrap;
-    row-gap: 8px;
-    flex-direction: row;
+.web_buttons	{
+	display:					flex;
+	align-items:				center;
+	justify-content:			space-around;
+	margin:						8px;
+	flex-wrap:					wrap;
+	row-gap:					8px;
+	flex-direction:				row;
 }
 
 /*.power_light {
-    background-color: #00FF48;
-    width: 32px;
-    height: 32px;
-    position: absolute;
-    right: 320px;
-    bottom: 16px;
-    border-width: 16px;
-    border-color: #c8c699;
-    border-style: solid;
-    margin: 16px;
+	background-color: #00FF48;
+	width: 32px;
+	height: 32px;
+	position: absolute;
+	right: 320px;
+	bottom: 16px;
+	border-width: 16px;
+	border-color: #c8c699;
+	border-style: solid;
+	margin: 16px;
 }*/
 
-.left {
-    position: absolute;
-    top: 4px;
-    left: 4px;
-    width: 484px;
-    height: 544px;
-    border-style: solid;
-    border-size: 2px;
-    border-color: #071821;
-    padding: 4px;
+.left	{
+	position:					absolute;
+	top:						4px;
+	left:						4px;
+	width:						484px;
+	height:						544px;
+	border-style:				solid;
+	border-width:				2px;
+	border-color:				#071821;
+	padding:					4px;
 }
 
-.right {
-    position: absolute;
-    top: 4px;
-    right: 4px;
-    width: 484px;
-    height: 544px;
-    border-style: solid;
-    border-size: 2px;
-    border-color: #071821;
-    padding: 4px;
+.right	{
+	position:					absolute;
+	top:						4px;
+	right:						4px;
+	width:						484px;
+	height:						544px;
+	border-style:				solid;
+	border-width:				2px;
+	border-color:				#071821;
+	padding:					4px;
 }
 
-.button_container {
-    width: calc(50% - 20px);
-    height: calc(50% - 18px);
-    border-style: solid;
-    border-size: 2px;
-    border-color: #071821;
-    padding: 4px;
+.button_container	{
+	width:						calc(50%	-	20px);
+	height:						calc(50%	-	18px);
+	border-style:				solid;
+	border-width:				2px;
+	border-color:				#071821;
+	padding:					4px;
 }
 
-.taskbar {
-    background-color: #255FDD;
-    position: absolute;
-    width: 100%;
-    height: 30px;
-    left: 0px;
-    bottom: 0px;
-/*     border-style: solid; */
-/*     border-width: 0px; */
-/*     border-top-width: 4px; */
-/*     border-color: #3675c2; */
-    background-image: url("/res/img/taskbar.jpg");
-    background-size: 30px 30px;
+.taskbar	{
+	background-color:			#255FDD;
+	position:					absolute;
+	width:						100%;
+	height:						30px;
+	left:						0px;
+	bottom:						0px;
+/*	 border-style: solid; */
+/*	 border-width: 0px; */
+/*	 border-top-width: 4px; */
+/*	 border-color: #3675c2; */
+	background-image:			url("/res/img/taskbar.jpg");
+	background-size:			30px	30px;
 }
 
-.taskbar img {
-    position: absolute;
-    left: 0px;
-    bottom: 0px;
+.taskbar	img	{
+	position:					absolute;
+	left:						0px;
+	bottom:						0px;
 }
 
-.monitor_bar, .landing_screen_bar {
-    position: absolute;
-    bottom: 48px;
-/*     background-color: pink; */
-    width: calc(1056px - 32px);
-    height: calc(96px - 32px);
-/*     left: 50%; */
-/*     right: 50%; */
-    border-width: 16px;
-    border-color: #c8c699;
-    border-style: solid;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding-left: 8px;
-    padding-right: 8px;
+.monitor_bar,	.landing_screen_bar	{
+	position:					absolute;
+	bottom:						48px;
+/*	 background-color: pink; */
+	width:						calc(1056px	-	32px);
+	height:						calc(96px	-	32px);
+/*	 left: 50%; */
+/*	 right: 50%; */
+	border-width:				16px;
+	border-color:				#c8c699;
+	border-style:				solid;
+	display:					flex;
+	justify-content:			center;
+	align-items:				center;
+	padding-left:				8px;
+	padding-right:				8px;
 }
 
-.landing_screen_bar {
-/*     bottom: 0px; */
-    animation-name: fade-out;
-    animation-duration: 5s;
-    animation-iteration-count: 1;
-    animation-delay: 2s;
+.landing_screen_bar	{
+/*	 bottom: 0px; */
+	animation-name:				fade-out;
+	animation-duration:			5s;
+	animation-iteration-count:	1;
+	animation-delay:			2s;
 }
 
-.monitor_bar img, .landing_screen_bar img {
-    border-width: 16px;
-    border-color: #c8c699;
-    border-style: solid;
-    margin-left: 16px;
-    margin-right: 16px;
+.monitor_bar	img,	.landing_screen_bar	img	{
+	border-width:				16px;
+	border-color:				#c8c699;
+	border-style:				solid;
+	margin-left:				16px;
+	margin-right:				16px;
 }
 
-.monitor_screen, .landing_screen, .landing_screen_wallpaper {
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.monitor_screen,	.landing_screen,	.landing_screen_wallpaper	{
+	display:					flex;
+	justify-content:			center;
+	align-items:				center;
 }
 
-.monitor_screen img, .landing_screen img {
-    position: absolute;
-    bottom: 192px;
-/*     left: 16px; */
-/*     right: 16px; */
-    background-color: black;
-    max-width: 97.5%;
-    max-height: 75%;
+.monitor_screen	img,	.landing_screen	img	{
+	position:					absolute;
+	bottom:						192px;
+/*	 left: 16px; */
+/*	 right: 16px; */
+	background-color:			black;
+	max-width:					97.5%;
+	max-height:					75%;
 }
 
-.landing_screen_wallpaper img {
-    position: absolute;
-    bottom: calc(192px + 6.25%);
-    max-width: 80%;
-    max-height: 62.5%;
-    animation-name: fade-in-background, grow-wallpaper;
-    animation-duration: 2s, 5s;
-    animation-iteration-count: 1, 1;
-    animation-delay: 0s, 2s;
+.landing_screen_wallpaper	img	{
+	position:					absolute;
+	bottom:						calc(192px	+	6.25%);
+	max-width:					80%;
+	max-height:					62.5%;
+	animation-name:				fade-in-background,	grow-wallpaper;
+	animation-duration:			2s,	5s;
+	animation-iteration-count:	1,	1;
+	animation-delay:			0s,	2s;
 }
 
-.landing_screen img {
-    animation-name: fade-in;
-    animation-duration: 2s;
-    animation-iteration-count: 1;
-    background-color: skyblue;
+.landing_screen	img	{
+	animation-name:				fade-in;
+	animation-duration:			2s;
+	animation-iteration-count:	1;
+	background-color:			skyblue;
 }
 
-@keyframes fade-in {
-    0% {
-        background-color: white;
-    }
+@keyframes	fade-in	{
+	0%	{
+		background-color:		white;
+	}
 
-    100% {
-        background-color: skyblue;
-    }
+	100%	{
+		background-color:		skyblue;
+	}
 }
 
-@keyframes fade-in-background {
-    0% {
-        opacity: 0;
-    }
+@keyframes	fade-in-background	{
+	0%	{
+		opacity:				0;
+	}
 
-    100% {
-        opacity: 100;
-    }
+	100%	{
+		opacity:				100;
+	}
 }
 
-@keyframes grow-wallpaper {
-    20%, 100% {
-        bottom: unset;
-    }
+@keyframes	grow-wallpaper	{
+	20%,	100%	{
+		bottom:					unset;
+	}
 
-    80%, 100% {
-        max-width: 100%;
-        max-height: 100%;
-        width: 100%;
-        height: 100%;
-    }
+	80%,	100%	{
+		max-width:				100%;
+		max-height:				100%;
+		width:					100%;
+		height:					100%;
+	}
 }
 
-@keyframes fade-out {
-    0% {
-        opacity: 100;
-    }
+@keyframes	fade-out	{
+	0%	{
+		opacity:				100;
+	}
 
-    10%, 100% {
-        opacity: 0;
-        border-width: 0px;
-    }
+	10%,	100%	{
+		opacity:				0;
+		border-width:			0px;
+	}
 }
 
-.explorer_bar_top {
-    margin-top: 48px;
+.explorer_bar_top	{
+	margin-top:					48px;
+	background-color:			#efedde;
+/* 	background-color:			#255FDD; */
+	width:						100%;
+	height:						86px;
+	border-bottom-width:		2px;
+	border-bottom-style:		solid;
+	border-color:				#959387;
 }
 
-.explorer_bar_top p, .explorer_bar_bottom p {
-    position: absolute;
-    font-size: 11px;
-    font-weight: normal;
-    text-shadow: 0px 0px 0px black;
+.explorer_bar_top	p,	.explorer_bar_bottom	p	{
+	position:					absolute;
+	font-size:					11px;
+	font-weight:				normal;
+	text-shadow:				0px	0px	0px	black;
+	color:						black;
 }
 
-.explorer_bar_top p {
-    top: calc(71px + 48px - 3px);
-/*     left: 72px; */
-    left: 5.75%;
-    color: black;
+.address_bar	{
+	position:					absolute;
+	width:						100%;
+	top:						calc(71px	+	48px	-	7px);
+	border-top-width:			1px;
+	border-top-style:			solid;
+	border-top-color:			#959387;
 }
 
-.explorer_bar_top p::before {
-    position: unset;
-    content: unset;
-    background-image: unset;
-    background-size: unset;
-    display: unset;
-    width: unset;
-    height: unset;
-    top: unset;
+.address_bar	p	{
+/* 	position:					absolute; */
+/* 	top:						calc(71px	+	48px	-	3px); */
+/*	 left: 72px; */
+	top:						3px;
+	left:						5.75%;
+	width:						85%;
+	background-color:			white;
+	border-width:				1px;
+	border-style:				solid;
+	border-bottom-color:		#94adc5;
+	padding:					1px;
 }
 
-.explorer_bar_bottom {
-    position: absolute;
-    margin: 0px;
-    padding: 0px;
-    bottom: 0px;
-    left: 0px;
-    width: 100%;
-    height: 23px;
-/*     background-color: limegreen; */
+.explorer_bar_top	p::before	{
+	position:					unset;
+	content:					unset;
+	background-image:			unset;
+	background-size:			unset;
+	display:					unset;
+	width:						unset;
+	height:						unset;
+	top:						unset;
 }
 
-.explorer_bar_bottom p {
-    bottom: -8px;
-    left: 22px;
-    color: black;
+.address_bar	p::before	{
+	position:					relative;
+	content:					"";
+	background-image:			url("/res/img/explorer.png");
+	background-size:			10px	12px;
+	display:					inline-block;
+	width:						10px;
+	height:						12px;
+/* 	top:						4px; */
 }
 
-.portrait img {
-    border-style: solid;
-    border-width: 2px;
-    border-color: #071821;
-    border-radius: 12.5%;
-/*     width: clamp(160px, 320px, 320px); */
-/*     height: clamp(160px, 320px, 320px); */
-    margin-right: 16px;
+.menu_bar	p	{
+	margin-top:					46px;
+	padding:					4px;
+	border-bottom-width:		1px;
+	border-bottom-style:		solid;
+	border-color:				#959387;
+	width:						100%;
+}
+
+.navigation_bar	p	{
+	position:					absolute;
+	left:						30px;
+	top:						84px;
+}
+
+.navigation_bar	img	{
+	position:					absolute;
+	left:						-27px;
+	top:						-4px;
+}
+
+.navigation_bar	a	{
+	position:					unset;
+	left:						unset;
+	top:						unset;
+	text-decoration:			none;
+	color:						black;
+}
+
+.navigation_bar	p::after	{
+	position:					absolute;
+	width:						23px;
+	height:						23px;
+	content:					url(/res/img/back.png);
+	filter:						grayscale(1);
+	right:						-40px;
+	top:						-4px;
+	rotate:						y	180deg;
+}
+
+/*.navigation_bar	p::before	{
+	background-color:			#639bff;
+	position:					absolute;
+	left:						-17px;
+	top:						calc(80px	-	4px);
+	width:						23px;
+	height:						23px;
+	content:					url(/res/img/back.png);
+}*/
+
+.explorer_bar_bottom	{
+	position:					absolute;
+	margin:						0px;
+	padding:					0px;
+	bottom:						0px;
+	left:						0px;
+	width:						100%;
+	height:						23px;
+	background-color:			#efedde;
+/* 	background-color:			limegreen; */
+	border-top-width:			2px;
+	border-top-style:			solid;
+	border-color:				#959387;
+}
+
+.explorer_bar_bottom	p	{
+	bottom:						-8px;
+	left:						22px;
+}
+
+.explorer_bar_bottom	p::before	{
+	position:					relative;
+	content:					"";
+	background-image:			url("/res/img/explorer.png");
+	background-size:			14px	17px;
+	display:					inline-block;
+	width:						14px;
+	height:						17px;
+	left:						-20px;
+	top:						3px;
+
+.portrait	img	{
+	border-style:				solid;
+	border-width:				2px;
+	border-color:				#071821;
+	border-radius:				12.5%;
+/*	 width: clamp(160px, 320px, 320px); */
+/*	 height: clamp(160px, 320px, 320px); */
+	margin-right:				16px;
 }