From 609cc6264e8a9dfc69666b40f7452300ad22caef Mon Sep 17 00:00:00 2001
From: Bobby <bobbyskhs@gmail.com>
Date: Wed, 16 Oct 2024 18:54:17 -0400
Subject: some japanese translation

---
 static/css/core.css              | 334 --------------------------------
 static/css/en/login-area.css     |  31 +++
 static/css/ja/login-area.css     |  31 +++
 static/css/login-area.css        | 124 ------------
 static/css/shared/core.css       | 401 +++++++++++++++++++++++++++++++++++++++
 static/css/shared/login-area.css |  94 +++++++++
 6 files changed, 557 insertions(+), 458 deletions(-)
 delete mode 100644 static/css/core.css
 create mode 100644 static/css/en/login-area.css
 create mode 100644 static/css/ja/login-area.css
 delete mode 100644 static/css/login-area.css
 create mode 100644 static/css/shared/core.css
 create mode 100644 static/css/shared/login-area.css

(limited to 'static/css')

diff --git a/static/css/core.css b/static/css/core.css
deleted file mode 100644
index d13338d4..00000000
--- a/static/css/core.css
+++ /dev/null
@@ -1,334 +0,0 @@
-/* Shared CSS File */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-  font-family: "Mali", sans-serif;
-  font-size: 11px;
-}
-
-*,
-input,
-button {
-  outline: none;
-  border: none;
-}
-
-hr {
-  border: 0;
-  height: 1px;
-  background: #fff;
-}
-
-html {
-  background-color: #000;
-  color: #fff;
-}
-
-#video-background {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  object-fit: cover;
-  z-index: -100;
-}
-
-#video-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000;
-  opacity: 0.35;
-  z-index: -99;
-}
-
-#body-wrapper {
-  position: relative;
-  z-index: 1;
-  width: 1000px;
-  margin: 0 auto;
-}
-
-#content-wrapper {
-  display: flex;
-}
-
-#left-sidebar {
-  width: 200px;
-  border-top: 1px solid #fff;
-  border-top-left-radius: 14px;
-}
-
-#main-content {
-  width: 580px;
-  padding: 0 20px;
-  border-top: 1px solid #fff;
-}
-
-#right-sidebar {
-  width: 200px;
-  border-top: 1px solid #fff;
-}
-
-.flip-container {
-  perspective: 1000px;
-}
-.flipper {
-  position: relative;
-  transform-style: preserve-3d;
-  transition: transform 0.6s;
-}
-.front,
-.back {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: start;
-}
-.back {
-  transform: rotateX(180deg);
-}
-
-.glitch,
-.glow {
-  color: #dfbfbf;
-  position: relative;
-  font-size: 18px;
-  font-weight: bold;
-  animation: glitch 5s 5s infinite;
-}
-
-.glitch::before,
-.glow::before {
-  content: attr(data-text);
-  position: absolute;
-  left: -2px;
-  text-shadow: -5px 0 magenta;
-  background: black;
-  overflow: hidden;
-  top: 0;
-  animation: noise-1 3s linear infinite alternate-reverse,
-    glitch 5s 5.05s infinite;
-}
-
-.glitch::after,
-.glow::after {
-  content: attr(data-text);
-  position: absolute;
-  left: 2px;
-  text-shadow: -5px 0 lightgreen;
-  background: black;
-  overflow: hidden;
-  top: 0;
-  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
-}
-
-@keyframes glitch {
-  1% {
-    transform: rotateX(10deg) skewX(90deg);
-  }
-  2% {
-    transform: rotateX(0deg) skewX(0deg);
-  }
-}
-@keyframes noise-1 {
-  3.3333333333% {
-    clip-path: inset(9px 0 46px 0);
-  }
-  6.6666666667% {
-    clip-path: inset(54px 0 5px 0);
-  }
-  10% {
-    clip-path: inset(13px 0 46px 0);
-  }
-  13.3333333333% {
-    clip-path: inset(54px 0 31px 0);
-  }
-  16.6666666667% {
-    clip-path: inset(80px 0 1px 0);
-  }
-  20% {
-    clip-path: inset(61px 0 29px 0);
-  }
-  23.3333333333% {
-    clip-path: inset(39px 0 32px 0);
-  }
-  26.6666666667% {
-    clip-path: inset(25px 0 43px 0);
-  }
-  30% {
-    clip-path: inset(68px 0 5px 0);
-  }
-  33.3333333333% {
-    clip-path: inset(4px 0 42px 0);
-  }
-  36.6666666667% {
-    clip-path: inset(90px 0 4px 0);
-  }
-  40% {
-    clip-path: inset(75px 0 25px 0);
-  }
-  43.3333333333% {
-    clip-path: inset(56px 0 17px 0);
-  }
-  46.6666666667% {
-    clip-path: inset(24px 0 26px 0);
-  }
-  50% {
-    clip-path: inset(90px 0 8px 0);
-  }
-  53.3333333333% {
-    clip-path: inset(22px 0 65px 0);
-  }
-  56.6666666667% {
-    clip-path: inset(45px 0 29px 0);
-  }
-  60% {
-    clip-path: inset(93px 0 3px 0);
-  }
-  63.3333333333% {
-    clip-path: inset(80px 0 12px 0);
-  }
-  66.6666666667% {
-    clip-path: inset(93px 0 4px 0);
-  }
-  70% {
-    clip-path: inset(75px 0 17px 0);
-  }
-  73.3333333333% {
-    clip-path: inset(96px 0 1px 0);
-  }
-  76.6666666667% {
-    clip-path: inset(68px 0 5px 0);
-  }
-  80% {
-    clip-path: inset(10px 0 64px 0);
-  }
-  83.3333333333% {
-    clip-path: inset(78px 0 18px 0);
-  }
-  86.6666666667% {
-    clip-path: inset(14px 0 36px 0);
-  }
-  90% {
-    clip-path: inset(54px 0 4px 0);
-  }
-  93.3333333333% {
-    clip-path: inset(18px 0 65px 0);
-  }
-  96.6666666667% {
-    clip-path: inset(79px 0 14px 0);
-  }
-  100% {
-    clip-path: inset(82px 0 11px 0);
-  }
-}
-@keyframes noise-2 {
-  0% {
-    clip-path: inset(45px 0 42px 0);
-  }
-  3.3333333333% {
-    clip-path: inset(97px 0 2px 0);
-  }
-  6.6666666667% {
-    clip-path: inset(98px 0 2px 0);
-  }
-  10% {
-    clip-path: inset(67px 0 19px 0);
-  }
-  13.3333333333% {
-    clip-path: inset(28px 0 8px 0);
-  }
-  16.6666666667% {
-    clip-path: inset(85px 0 2px 0);
-  }
-  20% {
-    clip-path: inset(94px 0 2px 0);
-  }
-  23.3333333333% {
-    clip-path: inset(75px 0 3px 0);
-  }
-  26.6666666667% {
-    clip-path: inset(47px 0 42px 0);
-  }
-  30% {
-    clip-path: inset(69px 0 9px 0);
-  }
-  33.3333333333% {
-    clip-path: inset(79px 0 22px 0);
-  }
-  36.6666666667% {
-    clip-path: inset(50px 0 5px 0);
-  }
-  40% {
-    clip-path: inset(2px 0 53px 0);
-  }
-  43.3333333333% {
-    clip-path: inset(74px 0 19px 0);
-  }
-  46.6666666667% {
-    clip-path: inset(8px 0 57px 0);
-  }
-  50% {
-    clip-path: inset(96px 0 3px 0);
-  }
-  53.3333333333% {
-    clip-path: inset(19px 0 36px 0);
-  }
-  56.6666666667% {
-    clip-path: inset(18px 0 43px 0);
-  }
-  60% {
-    clip-path: inset(28px 0 50px 0);
-  }
-  63.3333333333% {
-    clip-path: inset(17px 0 3px 0);
-  }
-  66.6666666667% {
-    clip-path: inset(77px 0 4px 0);
-  }
-  70% {
-    clip-path: inset(64px 0 29px 0);
-  }
-  73.3333333333% {
-    clip-path: inset(57px 0 29px 0);
-  }
-  76.6666666667% {
-    clip-path: inset(7px 0 62px 0);
-  }
-  80% {
-    clip-path: inset(27px 0 10px 0);
-  }
-  83.3333333333% {
-    clip-path: inset(44px 0 5px 0);
-  }
-  86.6666666667% {
-    clip-path: inset(18px 0 34px 0);
-  }
-  90% {
-    clip-path: inset(61px 0 39px 0);
-  }
-  93.3333333333% {
-    clip-path: inset(3px 0 51px 0);
-  }
-  96.6666666667% {
-    clip-path: inset(28px 0 22px 0);
-  }
-  100% {
-    clip-path: inset(48px 0 37px 0);
-  }
-}
-
-.glow {
-  text-shadow: 0 0 1000px #dfbfbf;
-  color: transparent;
-  position: absolute;
-  top: 0;
-}
diff --git a/static/css/en/login-area.css b/static/css/en/login-area.css
new file mode 100644
index 00000000..29024e12
--- /dev/null
+++ b/static/css/en/login-area.css
@@ -0,0 +1,31 @@
+#login-area {
+  background-image: image-set(
+    url("../../images/core/sidebar/login-area@2x.png") 1x,
+    url("../../images/core/sidebar/login-area@2x.png") 2x,
+    url("../../images/core/sidebar/login-area@3x.png") 3x
+  );
+}
+
+#login-area > #register-now-button {
+  display: block;
+  width: 50px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 23px;
+  right: 32px;
+  background: transparent;
+}
+
+#login-area > #forgot-password-button {
+  display: block;
+  width: 64px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 85px;
+  right: 21px;
+  background: transparent;
+}
diff --git a/static/css/ja/login-area.css b/static/css/ja/login-area.css
new file mode 100644
index 00000000..c05a350b
--- /dev/null
+++ b/static/css/ja/login-area.css
@@ -0,0 +1,31 @@
+#login-area {
+  background-image: image-set(
+    url("../../images/core/sidebar/login-area_ja@2x.png") 1x,
+    url("../../images/core/sidebar/login-area_ja@2x.png") 2x,
+    url("../../images/core/sidebar/login-area_ja@3x.png") 3x
+  );
+}
+
+#login-area > #register-now-button {
+  display: block;
+  width: 76px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 23px;
+  right: 27px;
+  background: transparent;
+}
+
+#login-area > #forgot-password-button {
+  display: block;
+  width: 75px;
+  height: 12px;
+  cursor: pointer;
+  border-radius: 2px;
+  position: absolute;
+  bottom: 85px;
+  right: 14px;
+  background: transparent;
+}
diff --git a/static/css/login-area.css b/static/css/login-area.css
deleted file mode 100644
index 3d8b75ac..00000000
--- a/static/css/login-area.css
+++ /dev/null
@@ -1,124 +0,0 @@
-#login-area {
-  width: 200px;
-  height: 280px;
-  /* background: url("../images/core/sidebar/login-area.png") no-repeat; */
-  background-image: image-set(
-    url("../images/core/sidebar/login-area@2x.png") 1x,
-    url("../images/core/sidebar/login-area@2x.png") 2x,
-    url("../images/core/sidebar/login-area@3x.png") 3x
-  );
-  background-repeat: no-repeat;
-  background-size: 200px 280px;
-  margin: auto;
-  padding: 0px;
-  border: 0px;
-  position: relative;
-  top: -65px;
-}
-
-#login-form {
-  display: block;
-  position: relative;
-  top: 118px;
-}
-
-#login-form input[type="text"],
-#login-form input[type="password"] {
-  display: block;
-  margin: 10px auto;
-  width: 144px;
-  font-size: 11px;
-  padding: 4px 8px;
-  background: transparent;
-  color: #4a2e6f;
-  border-radius: 4px;
-  font-weight: bold;
-}
-
-/* Reset auto fill */
-#login-form input:-webkit-autofill,
-#login-form input:-webkit-autofill:hover,
-#login-form input:-webkit-autofill:focus,
-#login-form input:-webkit-autofill:active {
-  transition: background-color 1s ease-in 2000s;
-}
-
-#login-form input::placeholder {
-  color: #4a2e6f;
-  font-weight: normal;
-}
-
-#login-form input[type="submit"] {
-  width: 106px;
-  height: 22px;
-  cursor: pointer;
-  position: absolute;
-  top: 96px;
-  left: 48px;
-  border-radius: 2px;
-  background: transparent;
-}
-
-#login-area > #register-now-button {
-  display: block;
-  width: 50px;
-  height: 12px;
-  cursor: pointer;
-  border-radius: 2px;
-  position: absolute;
-  bottom: 23px;
-  right: 32px;
-  background: transparent;
-}
-
-#login-area > #forgot-password-button {
-  display: block;
-  width: 64px;
-  height: 12px;
-  cursor: pointer;
-  border-radius: 2px;
-  position: absolute;
-  bottom: 85px;
-  right: 21px;
-  background: transparent;
-}
-
-#login-error {
-  position: relative;
-}
-
-#login-error > .RFEERR {
-  background: url("../images/backgrounds/login-messages/RFEERR.png") no-repeat;
-}
-
-#login-error > .IUOPERR {
-  background: url("../images/backgrounds/login-messages/IUOPERR.png") no-repeat;
-}
-
-#login-error > .ENVERR {
-  background: url("../images/backgrounds/login-messages/ENVERR.png") no-repeat;
-}
-
-#login-error > .VESENDERR {
-  background: url("../images/backgrounds/login-messages/VESENDERR.png")
-    no-repeat;
-}
-
-#login-error > .VESENT {
-  background: url("../images/backgrounds/login-messages/VESENT.png") no-repeat;
-}
-
-#login-error > .VESUCCESS {
-  background: url("../images/backgrounds/login-messages/VESUCCESS.png")
-    no-repeat;
-}
-
-#login-error > .messageBox {
-  position: absolute;
-  background-size: 250px 166px;
-  width: 250px;
-  height: 166px;
-  top: -100px;
-  left: -140px;
-  z-index: 2;
-}
diff --git a/static/css/shared/core.css b/static/css/shared/core.css
new file mode 100644
index 00000000..06fcb57c
--- /dev/null
+++ b/static/css/shared/core.css
@@ -0,0 +1,401 @@
+/* Shared CSS File */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+*,
+input,
+button {
+  outline: none;
+  border: none;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: #fff;
+}
+
+html {
+  background-color: #000;
+  color: #fff;
+}
+
+a:visited {
+  color: #fff;
+}
+
+#video-background {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  object-fit: cover;
+  z-index: -100;
+}
+
+#video-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+  opacity: 0.35;
+  z-index: -99;
+}
+
+#body-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 1000px;
+  margin: 0 auto;
+}
+
+#content-wrapper {
+  display: flex;
+}
+
+#left-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+  border-top-left-radius: 14px;
+}
+
+#main-content {
+  width: 580px;
+  padding: 0 20px;
+  border-top: 1px solid #fff;
+}
+
+#right-sidebar {
+  width: 200px;
+  border-top: 1px solid #fff;
+}
+
+.flip-container {
+  perspective: 1000px;
+}
+
+.flipper {
+  position: relative;
+  transform-style: preserve-3d;
+  transition: transform 0.6s;
+}
+
+.front,
+.back {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.back {
+  transform: rotateX(180deg);
+}
+
+.glitch,
+.glow {
+  color: #dfbfbf;
+  position: relative;
+  font-size: 18px;
+  font-weight: bold;
+  animation: glitch 5s 5s infinite;
+}
+
+.glitch::before,
+.glow::before {
+  content: attr(data-text);
+  position: absolute;
+  left: -2px;
+  text-shadow: -5px 0 magenta;
+  background: black;
+  overflow: hidden;
+  top: 0;
+  animation: noise-1 3s linear infinite alternate-reverse,
+    glitch 5s 5.05s infinite;
+}
+
+.glitch::after,
+.glow::after {
+  content: attr(data-text);
+  position: absolute;
+  left: 2px;
+  text-shadow: -5px 0 lightgreen;
+  background: black;
+  overflow: hidden;
+  top: 0;
+  animation: noise-2 3s linear infinite alternate-reverse, glitch 5s 5s infinite;
+}
+
+@keyframes glitch {
+  1% {
+    transform: rotateX(10deg) skewX(90deg);
+  }
+
+  2% {
+    transform: rotateX(0deg) skewX(0deg);
+  }
+}
+
+@keyframes noise-1 {
+  3.3333333333% {
+    clip-path: inset(9px 0 46px 0);
+  }
+
+  6.6666666667% {
+    clip-path: inset(54px 0 5px 0);
+  }
+
+  10% {
+    clip-path: inset(13px 0 46px 0);
+  }
+
+  13.3333333333% {
+    clip-path: inset(54px 0 31px 0);
+  }
+
+  16.6666666667% {
+    clip-path: inset(80px 0 1px 0);
+  }
+
+  20% {
+    clip-path: inset(61px 0 29px 0);
+  }
+
+  23.3333333333% {
+    clip-path: inset(39px 0 32px 0);
+  }
+
+  26.6666666667% {
+    clip-path: inset(25px 0 43px 0);
+  }
+
+  30% {
+    clip-path: inset(68px 0 5px 0);
+  }
+
+  33.3333333333% {
+    clip-path: inset(4px 0 42px 0);
+  }
+
+  36.6666666667% {
+    clip-path: inset(90px 0 4px 0);
+  }
+
+  40% {
+    clip-path: inset(75px 0 25px 0);
+  }
+
+  43.3333333333% {
+    clip-path: inset(56px 0 17px 0);
+  }
+
+  46.6666666667% {
+    clip-path: inset(24px 0 26px 0);
+  }
+
+  50% {
+    clip-path: inset(90px 0 8px 0);
+  }
+
+  53.3333333333% {
+    clip-path: inset(22px 0 65px 0);
+  }
+
+  56.6666666667% {
+    clip-path: inset(45px 0 29px 0);
+  }
+
+  60% {
+    clip-path: inset(93px 0 3px 0);
+  }
+
+  63.3333333333% {
+    clip-path: inset(80px 0 12px 0);
+  }
+
+  66.6666666667% {
+    clip-path: inset(93px 0 4px 0);
+  }
+
+  70% {
+    clip-path: inset(75px 0 17px 0);
+  }
+
+  73.3333333333% {
+    clip-path: inset(96px 0 1px 0);
+  }
+
+  76.6666666667% {
+    clip-path: inset(68px 0 5px 0);
+  }
+
+  80% {
+    clip-path: inset(10px 0 64px 0);
+  }
+
+  83.3333333333% {
+    clip-path: inset(78px 0 18px 0);
+  }
+
+  86.6666666667% {
+    clip-path: inset(14px 0 36px 0);
+  }
+
+  90% {
+    clip-path: inset(54px 0 4px 0);
+  }
+
+  93.3333333333% {
+    clip-path: inset(18px 0 65px 0);
+  }
+
+  96.6666666667% {
+    clip-path: inset(79px 0 14px 0);
+  }
+
+  100% {
+    clip-path: inset(82px 0 11px 0);
+  }
+}
+
+@keyframes noise-2 {
+  0% {
+    clip-path: inset(45px 0 42px 0);
+  }
+
+  3.3333333333% {
+    clip-path: inset(97px 0 2px 0);
+  }
+
+  6.6666666667% {
+    clip-path: inset(98px 0 2px 0);
+  }
+
+  10% {
+    clip-path: inset(67px 0 19px 0);
+  }
+
+  13.3333333333% {
+    clip-path: inset(28px 0 8px 0);
+  }
+
+  16.6666666667% {
+    clip-path: inset(85px 0 2px 0);
+  }
+
+  20% {
+    clip-path: inset(94px 0 2px 0);
+  }
+
+  23.3333333333% {
+    clip-path: inset(75px 0 3px 0);
+  }
+
+  26.6666666667% {
+    clip-path: inset(47px 0 42px 0);
+  }
+
+  30% {
+    clip-path: inset(69px 0 9px 0);
+  }
+
+  33.3333333333% {
+    clip-path: inset(79px 0 22px 0);
+  }
+
+  36.6666666667% {
+    clip-path: inset(50px 0 5px 0);
+  }
+
+  40% {
+    clip-path: inset(2px 0 53px 0);
+  }
+
+  43.3333333333% {
+    clip-path: inset(74px 0 19px 0);
+  }
+
+  46.6666666667% {
+    clip-path: inset(8px 0 57px 0);
+  }
+
+  50% {
+    clip-path: inset(96px 0 3px 0);
+  }
+
+  53.3333333333% {
+    clip-path: inset(19px 0 36px 0);
+  }
+
+  56.6666666667% {
+    clip-path: inset(18px 0 43px 0);
+  }
+
+  60% {
+    clip-path: inset(28px 0 50px 0);
+  }
+
+  63.3333333333% {
+    clip-path: inset(17px 0 3px 0);
+  }
+
+  66.6666666667% {
+    clip-path: inset(77px 0 4px 0);
+  }
+
+  70% {
+    clip-path: inset(64px 0 29px 0);
+  }
+
+  73.3333333333% {
+    clip-path: inset(57px 0 29px 0);
+  }
+
+  76.6666666667% {
+    clip-path: inset(7px 0 62px 0);
+  }
+
+  80% {
+    clip-path: inset(27px 0 10px 0);
+  }
+
+  83.3333333333% {
+    clip-path: inset(44px 0 5px 0);
+  }
+
+  86.6666666667% {
+    clip-path: inset(18px 0 34px 0);
+  }
+
+  90% {
+    clip-path: inset(61px 0 39px 0);
+  }
+
+  93.3333333333% {
+    clip-path: inset(3px 0 51px 0);
+  }
+
+  96.6666666667% {
+    clip-path: inset(28px 0 22px 0);
+  }
+
+  100% {
+    clip-path: inset(48px 0 37px 0);
+  }
+}
+
+.glow {
+  text-shadow: 0 0 1000px #dfbfbf;
+  color: transparent;
+  position: absolute;
+  top: 0;
+}
\ No newline at end of file
diff --git a/static/css/shared/login-area.css b/static/css/shared/login-area.css
new file mode 100644
index 00000000..4fd5331c
--- /dev/null
+++ b/static/css/shared/login-area.css
@@ -0,0 +1,94 @@
+#login-area {
+  width: 200px;
+  height: 280px;
+  background-repeat: no-repeat;
+  background-size: 200px 280px;
+  margin: auto;
+  padding: 0px;
+  border: 0px;
+  position: relative;
+  top: -65px;
+}
+
+#login-form {
+  display: block;
+  position: relative;
+  top: 118px;
+}
+
+#login-form input[type="text"],
+#login-form input[type="password"] {
+  display: block;
+  margin: 10px auto;
+  width: 144px;
+  font-size: 11px;
+  padding: 4px 8px;
+  background: transparent;
+  color: #4a2e6f;
+  border-radius: 4px;
+  font-weight: bold;
+}
+
+/* Reset auto fill */
+#login-form input:-webkit-autofill,
+#login-form input:-webkit-autofill:hover,
+#login-form input:-webkit-autofill:focus,
+#login-form input:-webkit-autofill:active {
+  transition: background-color 1s ease-in 2000s;
+}
+
+#login-form input::placeholder {
+  color: #4a2e6f;
+  font-weight: normal;
+}
+
+#login-form input[type="submit"] {
+  width: 106px;
+  height: 22px;
+  cursor: pointer;
+  position: absolute;
+  top: 96px;
+  left: 48px;
+  border-radius: 2px;
+  background: transparent;
+}
+
+#login-error {
+  position: relative;
+}
+
+#login-error > .RFEERR {
+  background: url("../images/backgrounds/login-messages/RFEERR.png") no-repeat;
+}
+
+#login-error > .IUOPERR {
+  background: url("../images/backgrounds/login-messages/IUOPERR.png") no-repeat;
+}
+
+#login-error > .ENVERR {
+  background: url("../images/backgrounds/login-messages/ENVERR.png") no-repeat;
+}
+
+#login-error > .VESENDERR {
+  background: url("../images/backgrounds/login-messages/VESENDERR.png")
+    no-repeat;
+}
+
+#login-error > .VESENT {
+  background: url("../images/backgrounds/login-messages/VESENT.png") no-repeat;
+}
+
+#login-error > .VESUCCESS {
+  background: url("../images/backgrounds/login-messages/VESUCCESS.png")
+    no-repeat;
+}
+
+#login-error > .messageBox {
+  position: absolute;
+  background-size: 250px 166px;
+  width: 250px;
+  height: 166px;
+  top: -100px;
+  left: -140px;
+  z-index: 2;
+}
-- 
cgit v1.2.3