Resolve CSS architecture issues (#3)

* Move scrollbar attempt to the correct css architecture

* Add automated horizontal scrollbar to div ID mid

* Remove random hi.css file

The current elmastats architecture is randomly loading hi.css from the main PHP directory rather than the hi.css which is specifically located in the CSS directory. This is extremely confusing and I am fixing it.

* Address random hi.css file issue

The current elmastats architecture is randomly loading hi.css from the main PHP directory rather than the hi.css which is specifically located in the CSS directory. This is extremely confusing and I am fixing it.

* Actually load CSS from the CSS directory

The current elmastats architecture is randomly loading css from the main PHP directory rather than the css which is specifically located in the CSS directory. This is extremely confusing and I am fixing it.

* Remove base directory CSS files

CSS should now be loaded from the CSS directory as intended, rather than the directory serving as a red herring for developers

* Reinstate and comment the target-time-colour handling

css/Default.css

@@ -23,7 +23,7 @@ body {
 
 a.header {
   border: 1px solid #000000;
-  background-image: url("img/header.png");
+  background-image: url("../img/header.png");
 }
 
 #left {
@@ -45,8 +45,6 @@ table.times {
   border-style: solid;
   border-color: #000000;
   background-color: #303030;
-  max-width: 720px;
-  overflow-x: auto;
 }
 th.times {
   border-style: dotted;

css/hi.css

@@ -2,22 +2,41 @@ a.ttime0:link {text-decoration: none; color: #FF0000;}
 a.ttime0:visited {text-decoration: none; color: #FF0000;}
 a.ttime0:active {text-decoration: none; color: #FF0000;}
 a.ttime0:hover {text-decoration: none; color: #FF5555;}
-a.ttime1:link {text-decoration: none; color: #FF9C00;}
-a.ttime1:visited {text-decoration: none; color: #FF9C00;}
-a.ttime1:active {text-decoration: none; color: #FF9C00;}
-a.ttime1:hover {text-decoration: none; color: #FFB238;}
-a.ttime2:link {text-decoration: none; color: #FFF200;}
-a.ttime2:visited {text-decoration: none; color: #FFF200;}
-a.ttime2:active {text-decoration: none; color: #FFF200;}
-a.ttime2:hover {text-decoration: none; color: #FFF97B;}
-a.ttime3:link {text-decoration: none; color: #00FF00;}
-a.ttime3:visited {text-decoration: none; color: #00FF00;}
-a.ttime3:active {text-decoration: none; color: #00FF00;}
-a.ttime3:hover {text-decoration: none; color: #75FF75;}
-a.ttime4:link {text-decoration: none; color: #0090FF;}
-a.ttime4:visited {text-decoration: none; color: #0090FF;}
-a.ttime4:active {text-decoration: none; color: #0090FF;}
-a.ttime4:hover {text-decoration: none; color: #52B4FF;}
+
+a.ttime1:link {text-decoration: none; color: #AA43DD;}
+a.ttime1:visited {text-decoration: none; color: #AA43DD;}
+a.ttime1:active {text-decoration: none; color: #AA43DD;}
+a.ttime1:hover {text-decoration: none; color: #BB54EE;}
+
+a.ttime2:link {text-decoration: none; color: #FF66CC;}
+a.ttime2:visited {text-decoration: none; color: #FF66CC;}
+a.ttime2:active {text-decoration: none; color: #FF66CC;}
+a.ttime2:hover {text-decoration: none; color: #FF8FDA;}
+
+a.ttime3:link {text-decoration: none; color: #FF9C00;}
+a.ttime3:visited {text-decoration: none; color: #FF9C00;}
+a.ttime3:active {text-decoration: none; color: #FF9C00;}
+a.ttime3:hover {text-decoration: none; color: #FFB238;}
+
+a.ttime4:link {text-decoration: none; color: #FFF200;}
+a.ttime4:visited {text-decoration: none; color: #FFF200;}
+a.ttime4:active {text-decoration: none; color: #FFF200;}
+a.ttime4:hover {text-decoration: none; color: #FFF97B;}
+
+a.ttime5:link {text-decoration: none; color: #00FF00;}
+a.ttime5:visited {text-decoration: none; color: #00FF00;}
+a.ttime5:active {text-decoration: none; color: #00FF00;}
+a.ttime5:hover {text-decoration: none; color: #75FF75;}
+
+a.ttime6:link {text-decoration: none; color: #0090FF;}
+a.ttime6:visited {text-decoration: none; color: #0090FF;}
+a.ttime6:active {text-decoration: none; color: #0090FF;}
+a.ttime6:hover {text-decoration: none; color: #52B4FF;}
+
+a.ttime7:link {text-decoration: none; color: #F3F5CA;}
+a.ttime7:visited {text-decoration: none; color: #F3F5CA;}
+a.ttime7:active {text-decoration: none; color: #F3F5CA;}
+a.ttime7:hover {text-decoration: none; color: #F3F5CA;}
 
 body {
   font-family:monospace,courier new;
@@ -58,7 +77,10 @@ a.header {
   margin: 8px 0px 0px 180px;
   padding: 10px 10px 10px 10px;
   width: 798px;
-  overflow: hidden;
+  overflow-y: hidden;
+  overflow-x: auto;
+  scrollbar-width: thin;
+  scrollbar-color: #404040 #202020;
 }
 
 .menuheader {
@@ -106,6 +128,7 @@ td.times {
 .box2 {
   padding: 5px 5px 5px 5px;
   overflow: hidden;
+  background-color: #333333;
 }
 
 .ubwrap {
@@ -154,4 +177,4 @@ ul.tabbernav li a {
 
 .tabberlive .tabbertab h3 {
   display:none;
-}
+}