From 69c761f55e3f7179aca2186f4e792772de1dc4a2 Mon Sep 17 00:00:00 2001
From: sD <stoned@derpymail.org>
Date: Wed, 12 Feb 2020 16:02:48 +0100
Subject: move css into the before empty styles folder

---
 webAO/classic.css        |  47 ----
 webAO/client.css         | 568 -----------------------------------------------
 webAO/client.html        |   4 +-
 webAO/client.js          |   2 +-
 webAO/index.html         |   4 +-
 webAO/master.css         | 382 -------------------------------
 webAO/soj.css            |  45 ----
 webAO/styles/classic.css |  47 ++++
 webAO/styles/client.css  | 568 +++++++++++++++++++++++++++++++++++++++++++++++
 webAO/styles/master.css  | 382 +++++++++++++++++++++++++++++++
 webAO/styles/soj.css     |  45 ++++
 11 files changed, 1047 insertions(+), 1047 deletions(-)
 delete mode 100644 webAO/classic.css
 delete mode 100644 webAO/client.css
 delete mode 100644 webAO/master.css
 delete mode 100644 webAO/soj.css
 create mode 100644 webAO/styles/classic.css
 create mode 100644 webAO/styles/client.css
 create mode 100644 webAO/styles/master.css
 create mode 100644 webAO/styles/soj.css

(limited to 'webAO')

diff --git a/webAO/classic.css b/webAO/classic.css
deleted file mode 100644
index 5235f70..0000000
--- a/webAO/classic.css
+++ /dev/null
@@ -1,47 +0,0 @@
-body {
-	font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "ＭＳ Ｐゴシック", "Tahoma", Sans;
-}
-
-img {
-	image-rendering: -moz-crisp-edges;
-	image-rendering: -o-crisp-edges;
-	image-rendering: -webkit-optimize-contrast;
-	image-rendering: crisp-edges;
-	-ms-interpolation-mode: nearest-neighbor;
-}
-
-#client_name {
-	display: none;
-	padding: 0px 6px;
-	height: 7%;
-	border: 1px solid rgba(255, 255, 255, 0.7);
-	background: rgba(73, 0, 254, 0.5);
-	top: 63%;
-	border-radius: 3px;
-	position: absolute;
-}
-
-#client_chat {
-	font-size: 1em;
-	display: none;
-	width: 98%;
-	width: calc(100% - 4px);
-	margin: auto;
-	height: 30%;
-	border: 2px solid rgba(255, 255, 255, 0.7);
-	background-color: rgba(0, 0, 0, 0.5);
-	top: 70%;
-	border-radius: 4px;
-	position: absolute;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_chat p {
-	margin: 4px;
-	color: white;
-}
\ No newline at end of file
diff --git a/webAO/client.css b/webAO/client.css
deleted file mode 100644
index e736e16..0000000
--- a/webAO/client.css
+++ /dev/null
@@ -1,568 +0,0 @@
-#about-logo {
-	padding-top: 5px;
-	height: 30%;
-	image-rendering: auto;
-}
-
-.lm_content :link {
-	color: #4288f2;
-}
-
-.lm_content :visited {
-	color: #a65bd4;
-}
-
-@keyframes error_blink {
-	0% {
-		color: #fff;
-	}
-
-	50% {
-		color: red;
-	}
-
-	100% {
-		color: #fff;
-	}
-}
-
-#client_error {
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	padding: 10px;
-	top: 50%;
-	left: 50%;
-	margin-right: -50%;
-	transform: translate(-50%, -50%);
-	justify-content: center;
-	align-items: center;
-	background: #a00;
-	color: #fff;
-	font-size: large;
-	animation: error_blink 3s ease-in-out infinite;
-	z-index: 100;
-}
-
-#client_loading {
-	position: absolute;
-	display: flex;
-	flex-direction: column;
-	padding: 10px;
-	top: 50%;
-	left: 50%;
-	margin-right: -50%;
-	transform: translate(-50%, -50%);
-	justify-content: center;
-	align-items: center;
-	background: black;
-	color: lightgreen;
-	font-size: large;
-	z-index: 100;
-}
-
-#client_loadingtext {
-	margin: 30px;
-}
-
-#client_gamewindow {
-	width: 100%;
-}
-
-@keyframes shake { 
-    0%,100%	{left: 0; }
-	20%		{left: -10%; }
-	40%		{left: +10%; }
-	60%		{left: -10%; }
-	80%		{left: +10%; }
-}
-
-@keyframes flash { 
-    0%,100%	{background-color: transparent; }
-    50%		{background-color: white; }
-}
-
-#client_charselect {
-	position: fixed;
-	top: 0;
-	left: 0;
-	width: 100%;
-	height: 100%;
-	overflow-y: auto;
-	justify-content: center;
-	align-items: center;
-	vertical-align: middle;
-	margin: 0 auto;
-	background: rgba(70, 70, 70, 0.5);
-	z-index: 50;
-}
-
-#client_chartable {
-	background: #eee;
-}
-
-#client_chartable_container {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}
-
-.demothing {
-	display: block;
-	height: 60px;
-	width: 60px;
-	max-width: 60px;
-	max-height: 60px;
-	margin: 3px;
-	border: 1px solid #000;
-}
-
-#client_icwrapper {
-	overflow-x: hidden;
-	overflow-y: auto;
-	height: 100%;
-}
-
-@media (max-width: 360px) {
-	#kek {
-		width: fit-content;
-	}
-}
-
-#client_emo {
-	position: relative;
-	top: 10px;
-	width: 95%;
-}
-
-.emote_button {
-	display: inline-block;
-	width: 40px;
-	height: 40px;
-	padding: 1px;
-	cursor: pointer;
-	border: 1px solid #000;
-}
-
-#client_settings {
-	width: 100%;
-}
-
-#client_court {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	top: 0;
-	left: 0;
-}
-
-#client_char {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	bottom: 0;
-}
-
-#client_pair_char {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	bottom: 0;
-}
-
-#client_bench {
-	display: none;
-	position: absolute;
-	height: auto;
-	width: 100%;
-	bottom: 0;
-	left: 0;
-}
-
-#client_fg {
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	bottom: 0;
-	left: 0;
-}
-
-#client_evi {
-	opacity: 0;
-	position: absolute;
-	background-repeat: no-repeat;
-	background-size: contain;
-	height: 0%;
-	width: auto;
-	top: 1.5em;
-	transition: 0.25s linear;  
-	transition-property: height, opacity;
-}
-
-#client_shout {
-	display: block;
-	position: absolute;
-	height: 100%;
-	width: 100%;
-	bottom: 0;
-	left: 0;
-}
-
-#client_background {
-	position: relative;
-	padding-bottom: 75%;
-	background-color: transparent;
-	top: 0;
-	left: 0;
-}
-
-.rainbow-text {
-	background-color: rgb(255, 255, 255);
-	background-image: repeating-linear-gradient(to right,
-	red  0%  8%, orange  8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%,
-	red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%,
-	red 80% 88%, orange 88% 96%, yellow 96% 100% );
-	background-size: 40% 40%;
-	background-clip: text;
-	-webkit-background-clip: text;
-	-webkit-text-fill-color: transparent;
-	animation: rainbow 4s linear infinite;
-  }
-  
-  @keyframes rainbow_alt { 
-    0%,100% {background-position:    0 0; }
-    50%     {background-position: 400% 0; }
-  }
-
-  @keyframes rainbow { 
-    0%   {background-position:    0 0; }
-    100% {background-position: 400% 0; }
-  }
-
-#client_inputbox {
-	font-size: 21px;
-	padding: 2px 10px;
-}
-
-.long {
-	width: 100%;
-	background-color: #ddd;
-	border: 1px solid #555;
-	border-style: solid;
-	box-sizing: border-box;
-	margin: auto;
-}
-
-#client_chatlog {
-	top: 0;
-	right: 0;
-	flex: 1;
-}
-
-#client_log {
-	position: relative;
-	height: 100%;
-	color: #fff;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	overflow-y: auto;
-	font-size: medium;
-	background-color: #242424;
-	text-align: start;
-	line-height: .85em;
-}
-
-#client_log>p {
-	line-height: 1.1em;
-}
-
-#iclog_name {
-	font-weight: bold;
-	padding-right: .35em;
-}
-
-#iclog_time {
-	float: right;
-	padding-right: .5em;
-	color: #dbdbdb;
-}
-
-#client_ooclog {
-	position: relative;
-	background-color: #242424;
-	color: #fff;
-	font-family: "Source Code Pro", "Consolas", monospace;
-	font-size: small;
-	overflow-wrap: break-word;
-	overflow-y: auto;
-	text-rendering: optimizelegibility;
-	resize: none;
-	flex: 1 1 auto;
-	border: none;
-}
-
-#client_musiclist {
-	width: 99%;
-	height: 100%;
-	background-color: #222;
-	color: #fff;
-}
-
-#client_bars {
-	position: relative;
-	text-align: center;
-	display: flex;
-	display: -webkit-flex;
-}
-
-#client_testimony {
-	display: block;
-	position: absolute;
-	width: 100%;
-	height: auto;
-}
-
-.evi_icon {
-	width: 70px;
-	height: 70px;
-	background-color: #787878;
-	outline-color:#886060;  
-	outline-width: 1px;
-	outline-style: inset;
-	outline-offset: -1px;
-}
-
-#evi_options {
-	display: inline-block;
-	padding-left: 5px;
-}
-
-#evi_options label {
-	display: inline-block;
-	width: 3em;
-}
-
-#evi_desc {
-	flex: 1 auto;
-}
-
-#bg_preview {
-	max-width: 150px;
-	max-height: 112px;
-	width: 100%;
-	height: 100%;
-	border-style: double;
-	border-radius: 7px;
-	border-color: #fff;
-	border-width: 3px;
-}
-
-.slider {
-	padding-right: 4px;
-	width: 80%;
-	align-self: center;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-#client_defense_hp {
-	text-align: left;
-}
-
-#client_defense_hp>.health-bar {
-	background-color: #169de0;
-}
-
-#client_prosecutor_hp {
-	text-align: right;
-}
-
-#client_prosecutor_hp>.health-bar {
-	background-color: #e01f5f;
-}
-
-.health-box {
-	background-color: #555;
-	height: 20px;
-	width: 50%;
-	margin: 0 auto;
-	border: solid 2px #aaa;
-	border-radius: 5px;
-	box-sizing: border-box;
-	display: block;
-}
-
-.health-bar {
-	width: 100%;
-	height: 100%;
-	border-radius: 3px;
-	bottom: 0;
-	position: relative;
-	display: inline-block;
-	transition: 1s linear;  
-  	transition-property: width;
-}
-
-.judge_button {
-	display: inline-block;
-	min-width: 85px;
-	min-height: 42px;
-	margin: 5px 1px;
-	padding: 2px;
-	cursor: pointer;
-	text-align: center;
-	font-weight: bold;
-	font-family: sans-serif;
-	text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
-	background-color: #c1c1c1;
-	border-radius: 5px;
-	border-style: solid;
-	border-width: 1px;
-	border-color: #919191;
-	box-shadow: 1px 1px white inset;
-	vertical-align: middle;
-}
-
-.client_button {
-	min-width: 6em;
-	margin: 1px;
-	padding: 6px 2px;
-	clip-path: polygon(75% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 25% 0);
-	cursor: pointer;
-	text-align: center;
-	color: white;
-	background-color: #7b2900;
-	text-shadow: 0 0 4px #000;
-	border: 1px solid #000;
-}
-
-.client_button.hover_button.inactive {
-	display: none;
-}
-
-.client_button.hover_button:hover {
-	border-color: #FFD081;
-}
-
-.dark {
-	filter: brightness(50%);
-}
-
-.noini {
-	transform: rotate(180deg);
-}
-
-.hrtext {
-	overflow: hidden;
-	text-align: center;
-	font-size: small;
-	color: #c6c6c6;
-}
-
-.hrtext:before,
-.hrtext:after {
-	background-color: #c6c6c6;
-	content: "";
-	display: inline-block;
-	height: 1px;
-	position: relative;
-	vertical-align: middle;
-	width: 50%;
-}
-
-.hrtext:before {
-	right: 0.5em;
-	margin-left: -50%;
-}
-
-.hrtext:after {
-	left: 0.5em;
-	margin-right: -50%;
-}
-
-#client_menu {
-	overflow-y: auto;
-	height: 100%;
-}
-
-.menu_content {
-	margin: 15px 15px;
-	display: none;
-}
-
-.menu_content.active {
-	display: block;
-}
-
-.menu_icon {
-	cursor: pointer;
-	display: inline-table;
-	margin: 10px 15px;
-	opacity: 1;
-}
-
-.menu_icon.active {
-	opacity: 0.25;
-}
-
-.menu_icon:hover {
-	color: #FFD081;
-}
-
-.em-3 {
-	font-size: 3em;
-}
-
-.area-button {
-	border-style: solid;
-	min-width: 120px;
-	margin: 5px;
-	display: inline-block;
-	padding: 6px;
-	border-radius: 5px;
-	border-color: white;
-	border-width: 1px;
-	cursor: pointer;
-	color: #000;
-}
-
-.area-button:hover {
-	border-color: #FFD081;
-}
-
-.area-default {
-	background-color: rgb(54,198,68);
-}
-
-.area-idle {
-	background-color: rgb(54,198,68);
-}
-
-.area-looking-for-players {
-	background-color: rgb(255,255,0);
-}
-
-.area-casing {
-	background-color: rgb(255,166,0);
-}
-
-.area-recess {
-	background-color: rgb(255,190,30);
-}
-
-.area-rp {
-	background-color: rgb(200,52,252);
-}
-
-.area-gaming {
-	background-color: rgb(55,255,255);
-}
-
-.area-locked {
-	background-color: rgb(127,127,127);
-}
-
-.area-spectatable {
-	background-color: rgb(54,198,68);
-}
\ No newline at end of file
diff --git a/webAO/client.html b/webAO/client.html
index 3c0845b..620ba04 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -5,8 +5,8 @@
 	<title>Attorney Online session</title>
 	<meta charset="utf-8">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<link rel="stylesheet" type="text/css" href="client.css?v=1.0.0" id="client_stylesheet">
-	<link rel="stylesheet" type="text/css" href="classic.css?v=1.0.0" id="client_theme">
+	<link rel="stylesheet" type="text/css" href="styles/client.css?v=1.0.0" id="client_stylesheet">
+	<link rel="stylesheet" type="text/css" href="styles/classic.css?v=1.0.0" id="client_theme">
 	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 	<link type="text/css" rel="stylesheet" href="golden/css/goldenlayout.css" />
 	<link type="text/css" rel="stylesheet"
diff --git a/webAO/client.js b/webAO/client.js
index 8524880..bcf6d43 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -1843,7 +1843,7 @@ window.changeBlipVolume = changeBlipVolume;
 export function reloadTheme() {
 	viewport.theme = document.getElementById("client_themeselect").value;
 	setCookie("theme",viewport.theme);
-	document.getElementById("client_theme").href = viewport.theme + ".css";
+	document.getElementById("client_theme").href = "styles/" + viewport.theme + ".css";
 }
 window.reloadTheme = reloadTheme;
 
diff --git a/webAO/index.html b/webAO/index.html
index c7d279e..fca9173 100644
--- a/webAO/index.html
+++ b/webAO/index.html
@@ -9,9 +9,9 @@
     <link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
     <link href="https://fonts.googleapis.com/css?family=Oswald%7CRoboto+Condensed" rel="stylesheet">
     <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
-    <link rel="stylesheet" type="text/css" href="master.css" />
+    <link rel="stylesheet" type="text/css" href="styles/master.css">
     <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
-    <link rel="icon" href="images/favicon.ico" />
+    <link rel="icon" href="images/favicon.ico">
     <script src="master.b.js"></script>
 </head>
 
diff --git a/webAO/master.css b/webAO/master.css
deleted file mode 100644
index 9aa459f..0000000
--- a/webAO/master.css
+++ /dev/null
@@ -1,382 +0,0 @@
-#serverinfo {
-	margin-top: 75px;
-	margin-bottom: 0px;
-	float: left;
-	font-size:0.6em;
-}
-
-#clientinfo {
-	margin: 0px;
-	display: block;
-	float: left;
-	clear: both;
-	font-size:0.6em;
-}
-
-.button {
-	padding: 5px;
-	vertical-align: middle;
-	text-decoration: none;
-	cursor: pointer;
-	background: repeating-linear-gradient(#792c01, #792c01 3px, #9a491c 3px, #9a491c 4px);
-	border: 1px solid #553e30;
-	border-radius: 5px;
-	box-shadow: 0 0 0 1px #FFFFFF; 
-	color: white;
-	text-align: center;
-    text-shadow:
-    0px -1px 0 #612000,
-    1px 0px 0 #612000,
-    -1px 0px 0 #612000,
-    0px 1px 0 #612000;
-	padding: 11px;
-	font-family: Times New Roman, sans;
-	font-weight: normal;
-}
-
-.button:hover {
-	background: repeating-linear-gradient(#a57318, #a57318 3px, #c68c39 3px, #c68c39 4px);
-	border: 1px solid #bdb521;
-}
-
-#menu .chosen:before {
-	height: 200px;
-	width: 200px;
-	border-color: #bdb521;
-	border-width:11px;
-	padding: 1px;
-}
-
-#serverdescription_box {
-	display: inline-block;
-	position: fixed;
-	width: 185px;
-	height: 276px;
-	top: 35%;
-	right: 0px;
-	padding: 0px;
-	background: url("./images/desc.png") no-repeat;
-	border: 2px solid #888;
-	border-radius: 5px;
-}
-
-#serverdescription_content {
-	width: 180px;
-	height: 270px;
-	position: relative;
-	color: white;
-	white-space: pre-line;
-	word-wrap: break-word;
-	text-align: center;
-	margin: 2px;
-	overflow-x: visible;
-	overflow-y: auto;
-}
-
-
-.serverlist {
-	display: block;
-	margin: auto;
-	width: 500px;
-}
-
-.serverlist li {
-	position: relative;
-	left: -55px;
-	background-color: #FFF;
-	border: 2px solid #BBB;
-	border-radius: 5px;
-	padding: 0px;
-	padding-left: 10px;
-	display: block;
-	width: 500px;
-	height: 50px;
-	margin: 10px;
-	margin-left: auto;
-	margin-right: auto;
-	float: left;
-	text-align: center;
-	cursor: default;
-}
-.serverlist li:hover {
-	background-color: #FFFF6B;
-	border-color: #EFAD21;
-}
-
-.serverlist li p {
-	display: inline-block !important;
-}
-
-.serverlist li a {
-	float: right;
-}
-
-.serverlist .button {
-	position: relative;
-	top: 0px;
-	right: -2px;
-	height: 38px;
-	padding: 0px;
-	padding-top: 10px;
-	border-radius: 0px 5px 5px 0px;
-	width: 50px;
-	box-shadow: 0 0 0 2px #BBB; 
-}
-
-.serverlist .available {
-	background-color: #6BFF6B;
-	border-color: #21AD21;
-}
-
-.serverlist .unavailable {
-	background-color: #ff6b6B;
-	border-color: #ad2121;
-    display: none;
-}
-
-.serverlist .button:hover {
-	box-shadow: 0 0 0 1px #EFAD21; 
-}
-
-#content h2 {
-	vertical-align: top;
-	display: inline-block;
-	margin-top: 0px;
-	margin-left: auto;
-	margin-right: auto;
-}
-#content p {
-	vertical-align: top;
-	display: inline-block;
-}
-
-#content > p {
-	margin-right: 50px;
-}
-
-ul.navbar-nav.ml-auto {
-    display: inline-flex;
-    list-style-type: none;
-}
-
-nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top{
-    background: black;
-}
-
-body{
-    margin: 0px;
-}
-
-/*!
- * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
- * Copyright 2013-2017 Start Bootstrap
- * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
- */
-
-.carousel-item {
-  height: 65vh;
-  min-height: 300px;
-  background: no-repeat center center scroll;
-  -webkit-background-size: cover;
-  -moz-background-size: cover;
-  -o-background-size: cover;
-  background-size: cover;
-}
-
-.portfolio-item {
-  margin-bottom: 30px;
-}
-
-.navbar {
- font-family: 'Poiret One', cursive;
- text-transform: uppercase;
- font-size:22px;
-}
-
-.navbar-dark .navbar-nav .nav-link {
-  margin-right: 25px;
-  color: white !important;
-}
-
-.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
- color: rgba(255, 229, 145, .75)!important;
- opacity: 100 !important;
-}
-
-body {
-  background: #2c3d51;
-  color: white;
-  font-family: 'Roboto Condensed', sans-serif;
-}
-
-.page-heading{
- font-family: 'Oswald', sans-serif;
- text-transform: uppercase;
- margin-top: 5px;
- text-align: center;
-}
-
-hr.gold {
-border-top: 10px solid #f3b137;
-width: 250px;
-}
-
-.about {
-  text-align: center;
-}
-
-.card-body {
-background-color: #473322; 
-font-family: 'Roboto Condensed', sans-serif;
-}
-
-.card-header {
-background-color: #2f2216;
-border-bottom: 1px solid #ffe591;
-font-family: 'Roboto Condensed', sans-serif;
-border-radius: 0px !important;
-}
-
-.card-header a {
-  color: #ffe591 !important;
-}
-
-.card {
-  border: 1px solid #ffe591;
-  border-radius: 0px !important;
-}
-
-@media (max-width:411px) {
-  .top-bois {
-    display: none !important;
-  }
-}
-
-.top-bois {
-  display: inline-table;
-  width: 100%;
-}
-
-.carousel-item {
-  height: 90vh;
-  background-size: contain;
-}
-
-.carousel-inner {
-  background-color: #2c3d51;
-}
-
-@media (max-width:980px){
-  .carousel-item {
-  background-size: cover;
-}
-}
-
-h1 {
- font-family: 'Poiret One', cursive;
- text-transform: uppercase;
-}
-
-a {
-  color: #ffe591!important;
-}
-
-@media (max-width:576px){
-.borderbox{
-  padding: 0px 20px 0px 20px;
-}
-}
-
-.inside-carousel {
-  position:relative;
-}
-
-.button-carousel, .tagline-carousel {
-  right: 0;
-  bottom: 0;
-  left: 0;
-  position: absolute;
-  margin: auto;
-  text-align: center;
-}
-
-.button-carousel {
-      background-color: #2f2216;
-    max-width: 200px;
-    padding: 30px;
-    border: 2px solid #ffe591;
-    color: white !important;
-    border-radius: 15px;
-}
-
-.button-carousel p{
-  margin-top: -17px;
-  font-family: 'Poiret One', cursive;
- text-transform: uppercase;
-     font-size: 24px;
-}
-
-.download-button h4 {
-  font-family: 'Poiret One', cursive;
- text-transform: uppercase;
- margin-bottom:0px;
-}
-
-.button-carousel a, .download-button a {
-  color: white !important;
-}
-
-.download-button{
-  background-color: #2f2216;
-    max-width: 400px;
-    padding: 10px;
-    text-align: center;
-    border: 2px solid #ffe591;
-    color: white !important;
-    border-radius: 15px;
-    margin: 0 auto;
-}
-
-.card {
-  background-color: #2c3d51;;
-}
-
-.download-box strong {
-  color:#ffe591;
-}
-.download-box a, .download-button a, .links a, .card a {
-  text-decoration: underline;
-}
-
-.acc {
-  text-decoration: none !important;
-}
-
-a:hover{
-  opacity: 0.8;
-}
-
-.navbar .container {
-    text-align: center;
-}
-
-a.nav-link {
-    text-decoration: none !important;
-}
-
-ul.serverlist p {
-    color: black;
-}
-
-a.nav-link {
-    padding: 8px;
-}
-
-ul.navbar-nav.ml-auto{
-    margin-top: 19px;
- padding: 0;
-}
-
-nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top{
-    height: 65px;
-}
diff --git a/webAO/soj.css b/webAO/soj.css
deleted file mode 100644
index ad29317..0000000
--- a/webAO/soj.css
+++ /dev/null
@@ -1,45 +0,0 @@
-body {
-	font-family: sans-serif;
-}
-
-#client_chatcontainer {
-	position: absolute;
-	top: 73%;
-	height: 27%;
-	width: 100%;
-	background-image: url("images/chatbox.svg");
-	background-size: cover;
- 	background-repeat: no-repeat;
-}
-
-#client_name {
-	display: none;
-	top: 5%;
-	padding: 0px 10px;
-	height: 20%;
-	border-radius: 3px;
-	position: absolute;
-}
-
-#client_chat {
-	font-size: 1em;
-	display: none;
-	width: 100%;
-	margin: auto;
-	height: 90%;
-	top: 20%;
-	border-radius: 4px;
-	position: absolute;
-	word-break: keep-all;
-	word-wrap: break-word;
-	overflow-wrap: break-word;
-	text-align: left;
-	overflow: hidden;
-	scroll-behavior: smooth;
-}
-
-#client_chat p {
-	margin: 4px;
-	padding: 5px 10px;
-	color: white;
-}
\ No newline at end of file
diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css
new file mode 100644
index 0000000..5235f70
--- /dev/null
+++ b/webAO/styles/classic.css
@@ -0,0 +1,47 @@
+body {
+	font-family: "Ace Attorney", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "Osaka", "MS Gothic", "ＭＳ Ｐゴシック", "Tahoma", Sans;
+}
+
+img {
+	image-rendering: -moz-crisp-edges;
+	image-rendering: -o-crisp-edges;
+	image-rendering: -webkit-optimize-contrast;
+	image-rendering: crisp-edges;
+	-ms-interpolation-mode: nearest-neighbor;
+}
+
+#client_name {
+	display: none;
+	padding: 0px 6px;
+	height: 7%;
+	border: 1px solid rgba(255, 255, 255, 0.7);
+	background: rgba(73, 0, 254, 0.5);
+	top: 63%;
+	border-radius: 3px;
+	position: absolute;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: none;
+	width: 98%;
+	width: calc(100% - 4px);
+	margin: auto;
+	height: 30%;
+	border: 2px solid rgba(255, 255, 255, 0.7);
+	background-color: rgba(0, 0, 0, 0.5);
+	top: 70%;
+	border-radius: 4px;
+	position: absolute;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_chat p {
+	margin: 4px;
+	color: white;
+}
\ No newline at end of file
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
new file mode 100644
index 0000000..e736e16
--- /dev/null
+++ b/webAO/styles/client.css
@@ -0,0 +1,568 @@
+#about-logo {
+	padding-top: 5px;
+	height: 30%;
+	image-rendering: auto;
+}
+
+.lm_content :link {
+	color: #4288f2;
+}
+
+.lm_content :visited {
+	color: #a65bd4;
+}
+
+@keyframes error_blink {
+	0% {
+		color: #fff;
+	}
+
+	50% {
+		color: red;
+	}
+
+	100% {
+		color: #fff;
+	}
+}
+
+#client_error {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	padding: 10px;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+	justify-content: center;
+	align-items: center;
+	background: #a00;
+	color: #fff;
+	font-size: large;
+	animation: error_blink 3s ease-in-out infinite;
+	z-index: 100;
+}
+
+#client_loading {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	padding: 10px;
+	top: 50%;
+	left: 50%;
+	margin-right: -50%;
+	transform: translate(-50%, -50%);
+	justify-content: center;
+	align-items: center;
+	background: black;
+	color: lightgreen;
+	font-size: large;
+	z-index: 100;
+}
+
+#client_loadingtext {
+	margin: 30px;
+}
+
+#client_gamewindow {
+	width: 100%;
+}
+
+@keyframes shake { 
+    0%,100%	{left: 0; }
+	20%		{left: -10%; }
+	40%		{left: +10%; }
+	60%		{left: -10%; }
+	80%		{left: +10%; }
+}
+
+@keyframes flash { 
+    0%,100%	{background-color: transparent; }
+    50%		{background-color: white; }
+}
+
+#client_charselect {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	overflow-y: auto;
+	justify-content: center;
+	align-items: center;
+	vertical-align: middle;
+	margin: 0 auto;
+	background: rgba(70, 70, 70, 0.5);
+	z-index: 50;
+}
+
+#client_chartable {
+	background: #eee;
+}
+
+#client_chartable_container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.demothing {
+	display: block;
+	height: 60px;
+	width: 60px;
+	max-width: 60px;
+	max-height: 60px;
+	margin: 3px;
+	border: 1px solid #000;
+}
+
+#client_icwrapper {
+	overflow-x: hidden;
+	overflow-y: auto;
+	height: 100%;
+}
+
+@media (max-width: 360px) {
+	#kek {
+		width: fit-content;
+	}
+}
+
+#client_emo {
+	position: relative;
+	top: 10px;
+	width: 95%;
+}
+
+.emote_button {
+	display: inline-block;
+	width: 40px;
+	height: 40px;
+	padding: 1px;
+	cursor: pointer;
+	border: 1px solid #000;
+}
+
+#client_settings {
+	width: 100%;
+}
+
+#client_court {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top: 0;
+	left: 0;
+}
+
+#client_char {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+}
+
+#client_pair_char {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+}
+
+#client_bench {
+	display: none;
+	position: absolute;
+	height: auto;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+}
+
+#client_fg {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+}
+
+#client_evi {
+	opacity: 0;
+	position: absolute;
+	background-repeat: no-repeat;
+	background-size: contain;
+	height: 0%;
+	width: auto;
+	top: 1.5em;
+	transition: 0.25s linear;  
+	transition-property: height, opacity;
+}
+
+#client_shout {
+	display: block;
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	bottom: 0;
+	left: 0;
+}
+
+#client_background {
+	position: relative;
+	padding-bottom: 75%;
+	background-color: transparent;
+	top: 0;
+	left: 0;
+}
+
+.rainbow-text {
+	background-color: rgb(255, 255, 255);
+	background-image: repeating-linear-gradient(to right,
+	red  0%  8%, orange  8% 16%, yellow 16% 24%, green 24% 32%, blue 32% 40%,
+	red 40% 48%, orange 48% 56%, yellow 56% 64%, green 64% 72%, blue 72% 80%,
+	red 80% 88%, orange 88% 96%, yellow 96% 100% );
+	background-size: 40% 40%;
+	background-clip: text;
+	-webkit-background-clip: text;
+	-webkit-text-fill-color: transparent;
+	animation: rainbow 4s linear infinite;
+  }
+  
+  @keyframes rainbow_alt { 
+    0%,100% {background-position:    0 0; }
+    50%     {background-position: 400% 0; }
+  }
+
+  @keyframes rainbow { 
+    0%   {background-position:    0 0; }
+    100% {background-position: 400% 0; }
+  }
+
+#client_inputbox {
+	font-size: 21px;
+	padding: 2px 10px;
+}
+
+.long {
+	width: 100%;
+	background-color: #ddd;
+	border: 1px solid #555;
+	border-style: solid;
+	box-sizing: border-box;
+	margin: auto;
+}
+
+#client_chatlog {
+	top: 0;
+	right: 0;
+	flex: 1;
+}
+
+#client_log {
+	position: relative;
+	height: 100%;
+	color: #fff;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	overflow-y: auto;
+	font-size: medium;
+	background-color: #242424;
+	text-align: start;
+	line-height: .85em;
+}
+
+#client_log>p {
+	line-height: 1.1em;
+}
+
+#iclog_name {
+	font-weight: bold;
+	padding-right: .35em;
+}
+
+#iclog_time {
+	float: right;
+	padding-right: .5em;
+	color: #dbdbdb;
+}
+
+#client_ooclog {
+	position: relative;
+	background-color: #242424;
+	color: #fff;
+	font-family: "Source Code Pro", "Consolas", monospace;
+	font-size: small;
+	overflow-wrap: break-word;
+	overflow-y: auto;
+	text-rendering: optimizelegibility;
+	resize: none;
+	flex: 1 1 auto;
+	border: none;
+}
+
+#client_musiclist {
+	width: 99%;
+	height: 100%;
+	background-color: #222;
+	color: #fff;
+}
+
+#client_bars {
+	position: relative;
+	text-align: center;
+	display: flex;
+	display: -webkit-flex;
+}
+
+#client_testimony {
+	display: block;
+	position: absolute;
+	width: 100%;
+	height: auto;
+}
+
+.evi_icon {
+	width: 70px;
+	height: 70px;
+	background-color: #787878;
+	outline-color:#886060;  
+	outline-width: 1px;
+	outline-style: inset;
+	outline-offset: -1px;
+}
+
+#evi_options {
+	display: inline-block;
+	padding-left: 5px;
+}
+
+#evi_options label {
+	display: inline-block;
+	width: 3em;
+}
+
+#evi_desc {
+	flex: 1 auto;
+}
+
+#bg_preview {
+	max-width: 150px;
+	max-height: 112px;
+	width: 100%;
+	height: 100%;
+	border-style: double;
+	border-radius: 7px;
+	border-color: #fff;
+	border-width: 3px;
+}
+
+.slider {
+	padding-right: 4px;
+	width: 80%;
+	align-self: center;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+#client_defense_hp {
+	text-align: left;
+}
+
+#client_defense_hp>.health-bar {
+	background-color: #169de0;
+}
+
+#client_prosecutor_hp {
+	text-align: right;
+}
+
+#client_prosecutor_hp>.health-bar {
+	background-color: #e01f5f;
+}
+
+.health-box {
+	background-color: #555;
+	height: 20px;
+	width: 50%;
+	margin: 0 auto;
+	border: solid 2px #aaa;
+	border-radius: 5px;
+	box-sizing: border-box;
+	display: block;
+}
+
+.health-bar {
+	width: 100%;
+	height: 100%;
+	border-radius: 3px;
+	bottom: 0;
+	position: relative;
+	display: inline-block;
+	transition: 1s linear;  
+  	transition-property: width;
+}
+
+.judge_button {
+	display: inline-block;
+	min-width: 85px;
+	min-height: 42px;
+	margin: 5px 1px;
+	padding: 2px;
+	cursor: pointer;
+	text-align: center;
+	font-weight: bold;
+	font-family: sans-serif;
+	text-shadow: -2px 0 #fff, 0 2px #fff, 2px 0 #fff, 0 -2px #fff;
+	background-color: #c1c1c1;
+	border-radius: 5px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #919191;
+	box-shadow: 1px 1px white inset;
+	vertical-align: middle;
+}
+
+.client_button {
+	min-width: 6em;
+	margin: 1px;
+	padding: 6px 2px;
+	clip-path: polygon(75% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 25% 0);
+	cursor: pointer;
+	text-align: center;
+	color: white;
+	background-color: #7b2900;
+	text-shadow: 0 0 4px #000;
+	border: 1px solid #000;
+}
+
+.client_button.hover_button.inactive {
+	display: none;
+}
+
+.client_button.hover_button:hover {
+	border-color: #FFD081;
+}
+
+.dark {
+	filter: brightness(50%);
+}
+
+.noini {
+	transform: rotate(180deg);
+}
+
+.hrtext {
+	overflow: hidden;
+	text-align: center;
+	font-size: small;
+	color: #c6c6c6;
+}
+
+.hrtext:before,
+.hrtext:after {
+	background-color: #c6c6c6;
+	content: "";
+	display: inline-block;
+	height: 1px;
+	position: relative;
+	vertical-align: middle;
+	width: 50%;
+}
+
+.hrtext:before {
+	right: 0.5em;
+	margin-left: -50%;
+}
+
+.hrtext:after {
+	left: 0.5em;
+	margin-right: -50%;
+}
+
+#client_menu {
+	overflow-y: auto;
+	height: 100%;
+}
+
+.menu_content {
+	margin: 15px 15px;
+	display: none;
+}
+
+.menu_content.active {
+	display: block;
+}
+
+.menu_icon {
+	cursor: pointer;
+	display: inline-table;
+	margin: 10px 15px;
+	opacity: 1;
+}
+
+.menu_icon.active {
+	opacity: 0.25;
+}
+
+.menu_icon:hover {
+	color: #FFD081;
+}
+
+.em-3 {
+	font-size: 3em;
+}
+
+.area-button {
+	border-style: solid;
+	min-width: 120px;
+	margin: 5px;
+	display: inline-block;
+	padding: 6px;
+	border-radius: 5px;
+	border-color: white;
+	border-width: 1px;
+	cursor: pointer;
+	color: #000;
+}
+
+.area-button:hover {
+	border-color: #FFD081;
+}
+
+.area-default {
+	background-color: rgb(54,198,68);
+}
+
+.area-idle {
+	background-color: rgb(54,198,68);
+}
+
+.area-looking-for-players {
+	background-color: rgb(255,255,0);
+}
+
+.area-casing {
+	background-color: rgb(255,166,0);
+}
+
+.area-recess {
+	background-color: rgb(255,190,30);
+}
+
+.area-rp {
+	background-color: rgb(200,52,252);
+}
+
+.area-gaming {
+	background-color: rgb(55,255,255);
+}
+
+.area-locked {
+	background-color: rgb(127,127,127);
+}
+
+.area-spectatable {
+	background-color: rgb(54,198,68);
+}
\ No newline at end of file
diff --git a/webAO/styles/master.css b/webAO/styles/master.css
new file mode 100644
index 0000000..9aa459f
--- /dev/null
+++ b/webAO/styles/master.css
@@ -0,0 +1,382 @@
+#serverinfo {
+	margin-top: 75px;
+	margin-bottom: 0px;
+	float: left;
+	font-size:0.6em;
+}
+
+#clientinfo {
+	margin: 0px;
+	display: block;
+	float: left;
+	clear: both;
+	font-size:0.6em;
+}
+
+.button {
+	padding: 5px;
+	vertical-align: middle;
+	text-decoration: none;
+	cursor: pointer;
+	background: repeating-linear-gradient(#792c01, #792c01 3px, #9a491c 3px, #9a491c 4px);
+	border: 1px solid #553e30;
+	border-radius: 5px;
+	box-shadow: 0 0 0 1px #FFFFFF; 
+	color: white;
+	text-align: center;
+    text-shadow:
+    0px -1px 0 #612000,
+    1px 0px 0 #612000,
+    -1px 0px 0 #612000,
+    0px 1px 0 #612000;
+	padding: 11px;
+	font-family: Times New Roman, sans;
+	font-weight: normal;
+}
+
+.button:hover {
+	background: repeating-linear-gradient(#a57318, #a57318 3px, #c68c39 3px, #c68c39 4px);
+	border: 1px solid #bdb521;
+}
+
+#menu .chosen:before {
+	height: 200px;
+	width: 200px;
+	border-color: #bdb521;
+	border-width:11px;
+	padding: 1px;
+}
+
+#serverdescription_box {
+	display: inline-block;
+	position: fixed;
+	width: 185px;
+	height: 276px;
+	top: 35%;
+	right: 0px;
+	padding: 0px;
+	background: url("./images/desc.png") no-repeat;
+	border: 2px solid #888;
+	border-radius: 5px;
+}
+
+#serverdescription_content {
+	width: 180px;
+	height: 270px;
+	position: relative;
+	color: white;
+	white-space: pre-line;
+	word-wrap: break-word;
+	text-align: center;
+	margin: 2px;
+	overflow-x: visible;
+	overflow-y: auto;
+}
+
+
+.serverlist {
+	display: block;
+	margin: auto;
+	width: 500px;
+}
+
+.serverlist li {
+	position: relative;
+	left: -55px;
+	background-color: #FFF;
+	border: 2px solid #BBB;
+	border-radius: 5px;
+	padding: 0px;
+	padding-left: 10px;
+	display: block;
+	width: 500px;
+	height: 50px;
+	margin: 10px;
+	margin-left: auto;
+	margin-right: auto;
+	float: left;
+	text-align: center;
+	cursor: default;
+}
+.serverlist li:hover {
+	background-color: #FFFF6B;
+	border-color: #EFAD21;
+}
+
+.serverlist li p {
+	display: inline-block !important;
+}
+
+.serverlist li a {
+	float: right;
+}
+
+.serverlist .button {
+	position: relative;
+	top: 0px;
+	right: -2px;
+	height: 38px;
+	padding: 0px;
+	padding-top: 10px;
+	border-radius: 0px 5px 5px 0px;
+	width: 50px;
+	box-shadow: 0 0 0 2px #BBB; 
+}
+
+.serverlist .available {
+	background-color: #6BFF6B;
+	border-color: #21AD21;
+}
+
+.serverlist .unavailable {
+	background-color: #ff6b6B;
+	border-color: #ad2121;
+    display: none;
+}
+
+.serverlist .button:hover {
+	box-shadow: 0 0 0 1px #EFAD21; 
+}
+
+#content h2 {
+	vertical-align: top;
+	display: inline-block;
+	margin-top: 0px;
+	margin-left: auto;
+	margin-right: auto;
+}
+#content p {
+	vertical-align: top;
+	display: inline-block;
+}
+
+#content > p {
+	margin-right: 50px;
+}
+
+ul.navbar-nav.ml-auto {
+    display: inline-flex;
+    list-style-type: none;
+}
+
+nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top{
+    background: black;
+}
+
+body{
+    margin: 0px;
+}
+
+/*!
+ * Start Bootstrap - Modern Business (https://startbootstrap.com/template-overviews/modern-business)
+ * Copyright 2013-2017 Start Bootstrap
+ * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-logomodern-business-nav/blob/master/LICENSE)
+ */
+
+.carousel-item {
+  height: 65vh;
+  min-height: 300px;
+  background: no-repeat center center scroll;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  -o-background-size: cover;
+  background-size: cover;
+}
+
+.portfolio-item {
+  margin-bottom: 30px;
+}
+
+.navbar {
+ font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+ font-size:22px;
+}
+
+.navbar-dark .navbar-nav .nav-link {
+  margin-right: 25px;
+  color: white !important;
+}
+
+.navbar-dark .navbar-nav .nav-link:focus, .navbar-dark .navbar-nav .nav-link:hover {
+ color: rgba(255, 229, 145, .75)!important;
+ opacity: 100 !important;
+}
+
+body {
+  background: #2c3d51;
+  color: white;
+  font-family: 'Roboto Condensed', sans-serif;
+}
+
+.page-heading{
+ font-family: 'Oswald', sans-serif;
+ text-transform: uppercase;
+ margin-top: 5px;
+ text-align: center;
+}
+
+hr.gold {
+border-top: 10px solid #f3b137;
+width: 250px;
+}
+
+.about {
+  text-align: center;
+}
+
+.card-body {
+background-color: #473322; 
+font-family: 'Roboto Condensed', sans-serif;
+}
+
+.card-header {
+background-color: #2f2216;
+border-bottom: 1px solid #ffe591;
+font-family: 'Roboto Condensed', sans-serif;
+border-radius: 0px !important;
+}
+
+.card-header a {
+  color: #ffe591 !important;
+}
+
+.card {
+  border: 1px solid #ffe591;
+  border-radius: 0px !important;
+}
+
+@media (max-width:411px) {
+  .top-bois {
+    display: none !important;
+  }
+}
+
+.top-bois {
+  display: inline-table;
+  width: 100%;
+}
+
+.carousel-item {
+  height: 90vh;
+  background-size: contain;
+}
+
+.carousel-inner {
+  background-color: #2c3d51;
+}
+
+@media (max-width:980px){
+  .carousel-item {
+  background-size: cover;
+}
+}
+
+h1 {
+ font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+}
+
+a {
+  color: #ffe591!important;
+}
+
+@media (max-width:576px){
+.borderbox{
+  padding: 0px 20px 0px 20px;
+}
+}
+
+.inside-carousel {
+  position:relative;
+}
+
+.button-carousel, .tagline-carousel {
+  right: 0;
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  margin: auto;
+  text-align: center;
+}
+
+.button-carousel {
+      background-color: #2f2216;
+    max-width: 200px;
+    padding: 30px;
+    border: 2px solid #ffe591;
+    color: white !important;
+    border-radius: 15px;
+}
+
+.button-carousel p{
+  margin-top: -17px;
+  font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+     font-size: 24px;
+}
+
+.download-button h4 {
+  font-family: 'Poiret One', cursive;
+ text-transform: uppercase;
+ margin-bottom:0px;
+}
+
+.button-carousel a, .download-button a {
+  color: white !important;
+}
+
+.download-button{
+  background-color: #2f2216;
+    max-width: 400px;
+    padding: 10px;
+    text-align: center;
+    border: 2px solid #ffe591;
+    color: white !important;
+    border-radius: 15px;
+    margin: 0 auto;
+}
+
+.card {
+  background-color: #2c3d51;;
+}
+
+.download-box strong {
+  color:#ffe591;
+}
+.download-box a, .download-button a, .links a, .card a {
+  text-decoration: underline;
+}
+
+.acc {
+  text-decoration: none !important;
+}
+
+a:hover{
+  opacity: 0.8;
+}
+
+.navbar .container {
+    text-align: center;
+}
+
+a.nav-link {
+    text-decoration: none !important;
+}
+
+ul.serverlist p {
+    color: black;
+}
+
+a.nav-link {
+    padding: 8px;
+}
+
+ul.navbar-nav.ml-auto{
+    margin-top: 19px;
+ padding: 0;
+}
+
+nav.navbar.fixed-top.navbar-expand-lg.navbar-dark.bg-dark.fixed-top{
+    height: 65px;
+}
diff --git a/webAO/styles/soj.css b/webAO/styles/soj.css
new file mode 100644
index 0000000..ad29317
--- /dev/null
+++ b/webAO/styles/soj.css
@@ -0,0 +1,45 @@
+body {
+	font-family: sans-serif;
+}
+
+#client_chatcontainer {
+	position: absolute;
+	top: 73%;
+	height: 27%;
+	width: 100%;
+	background-image: url("images/chatbox.svg");
+	background-size: cover;
+ 	background-repeat: no-repeat;
+}
+
+#client_name {
+	display: none;
+	top: 5%;
+	padding: 0px 10px;
+	height: 20%;
+	border-radius: 3px;
+	position: absolute;
+}
+
+#client_chat {
+	font-size: 1em;
+	display: none;
+	width: 100%;
+	margin: auto;
+	height: 90%;
+	top: 20%;
+	border-radius: 4px;
+	position: absolute;
+	word-break: keep-all;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+	text-align: left;
+	overflow: hidden;
+	scroll-behavior: smooth;
+}
+
+#client_chat p {
+	margin: 4px;
+	padding: 5px 10px;
+	color: white;
+}
\ No newline at end of file
-- 
cgit