make the UI boxes constructed from a sprite sheet instead of being a static sized sprite

assets/css/styles.css

@@ -34,10 +34,7 @@ html, body {
     z-index: 2;
 }
 
-#queueBox {
+
-    position: fixed;
-    width: 650px;
-}
 
 #queue {
 
@@ -107,6 +104,20 @@ html, body {
     text-shadow: 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 2px #000, 0 0 3px #000, 10px 10px 2px #0000;
 }
 
+.UIBox {
+    position: fixed;
+    border: 40px solid;
+    border-image: url('../img/ui/UI_BorderAtlas.png') 40% round;
+    z-index: 1;
+}
+
+.UIBoxBackground 
+{
+    position: fixed;
+    background-color: rgba(0, 0, 0, 0.75);
+    z-index: 0;
+}
+
 .button {
     font-family: 'FRIZQT';
     font-size: 23px;

index.html

@@ -19,7 +19,8 @@
             
             <!--QUEUE BOX-->
             <div class="centered" id="queue">
-                <img src="assets/img/ui/queuebox.png" id="queueBox">
+                <div class="UIBox" style="width: 450px; height: 100px;"></div>
+                <div class="UIBoxBackground" style="width: 500px; height: 150px;"></div>
                 
                 <div id="queueTextContainer">
                     <p class="queueText">Realm is Full</p>
@@ -32,7 +33,8 @@
 
             <!--DISCONNECT MESSAGE-->
             <div class="centered" id="disconnectBox" style="display: none;">
-                <img src="assets/img/ui/queuebox.png" id="queueBox">
+                <div class="UIBox" style="width: 550px; height: 100px;"></div>
+                <div class="UIBoxBackground" style="width: 600px; height: 150px;"></div>
                 
                 <div id="dcTextContainer">
                     <p class="queueText">You have been disconnected from the server.</p>