Arrows, Buttons and Title styling added to map selection.

- a title added
- some images made transparent
- basic css styling
- some colours added

#story[1301]

racevisionGame/src/main/resources/css/dayMode.css

@@ -1,6 +1,9 @@
 .root {
     -fx-base: rgb(215, 232, 218);
-    -fx-background: rgb(242, 242, 242);
+    /*-fx-background: rgba(245, 215, 106, 0.3);*/
+    /*-fx-background: rgba(201, 156, 57, 0.35);*/
+    /*-fx-background: rgba(251, 197, 30, 0.51);*/
+    -fx-background: rgba(0, 255, 190, 0.11);
 
     /* make controls (buttons, thumb, etc.) slightly lighter */
     -fx-color: derive(-fx-base, 2.5%);
@@ -24,6 +27,45 @@
     /*Focus colour*/
     -fx-focus-color: rgb(128, 128, 128);
 }
+/* BUTTONS */
+    /* Small Buttons */
+    .button {
+        -fx-background-color: rgba(11, 158, 160, 0.42);
+        -fx-border-color: #0b9ea0;
+        -fx-text-fill: rgb(10, 123, 125);
+        -fx-border-radius: 20px;
+        -fx-background-radius: 20px;
+        -fx-font-family: "Trebuchet MS";
+    }
+
+    .button:hover {
+        -fx-background-color: #0b9ea0;
+        -fx-border-color: #0b9ea0;
+        -fx-text-fill: rgba(255, 230, 146, 0.43);
+        -fx-font-size: 14px;
+        -fx-font-weight: bold;
+    }
+
+    /* Large buttons */
+    #hostGameBtn {
+        -fx-font-size: 18px;
+    }
+
+    #hostGameBtn:hover {
+        -fx-font-size: 22px;
+    }
+
+/* Titles */
+#title {
+    -fx-font-size: 32px;
+    -fx-font-family: "Trebuchet MS";
+    -fx-text-fill: rgb(10, 123, 125);
+}
+
+/* Regular text */
+#lblLength {
+    -fx-font-family: "Trebuchet MS";
+}
 
 /* Fix derived prompt color for text fields */
 .text-input {
@@ -56,38 +98,26 @@
     -fx-graphic: url("/visualiser/images/arrow.png");
 }
 
-#nextButton {
+#nextButton, #previousButton {
-    -fx-background-image: url("/visualiser/images/ArrowRoundRight.png");
+    -fx-background-image: url("/visualiser/images/ArrowSelect.png");
-    -fx-background-size: 60px;
-    -fx-background-repeat: no-repeat;
-    -fx-background-position: center center;
-    -fx-focus-color: transparent;
-    -fx-background-color: transparent;
-}
-#nextButton:pressed {
-    -fx-background-image: url("/visualiser/images/ArrowRoundRightClicked.png");
     -fx-background-size: 60px;
     -fx-background-repeat: no-repeat;
     -fx-background-position: center center;
     -fx-focus-color: transparent;
     -fx-background-color: transparent;
+    -fx-border-color: transparent;
 }
 
-#previousButton {
+#nextButton {
-    -fx-background-image: url("/visualiser/images/ArrowRoundLeft.png");
+    -fx-rotate: 180;
-    -fx-background-size: 60px;
-    -fx-background-repeat: no-repeat;
-    -fx-background-position: center center;
-    -fx-focus-color: transparent;
-    -fx-background-color: transparent;
 }
+
+#nextButton:pressed {
+    -fx-background-image: url("/visualiser/images/ArrowClick.png");
+}
+
 #previousButton:pressed {
-    -fx-background-image: url("/visualiser/images/ArrowRoundLeftClicked.png");
+    -fx-background-image: url("/visualiser/images/ArrowClick.png");
-    -fx-background-size: 60px;
-    -fx-background-repeat: no-repeat;
-    -fx-background-position: center center;
-    -fx-focus-color: transparent;
-    -fx-background-color: transparent;
 }
 
 #lineChartWrapper{

racevisionGame/src/main/resources/visualiser/scenes/hostGame.fxml

@@ -34,16 +34,21 @@
                         <Insets bottom="20.0" left="20.0" right="20.0" top="20.0" />
                     </GridPane.margin>
                 </Button>
-                <Label text="Address: 127.0.0.1" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="TOP">
+                <Label fx:id="title" text="Map Selection"
-                    <font>
+                       GridPane.columnIndex="1"
-                        <Font size="17.0" />
+                       GridPane.halignment="CENTER"
-                    </font>
+                       GridPane.valignment="BOTTOM">
-                </Label>
-                <Label text="Port: 4942" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">
-                    <font>
-                        <Font size="17.0" />
-                    </font>
                 </Label>
+                <!--<Label text="Address: 127.0.0.1" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="TOP">-->
+                    <!--<font>-->
+                        <!--<Font size="17.0" />-->
+                    <!--</font>-->
+                <!--</Label>-->
+                <!--<Label text="Port: 4942" GridPane.columnIndex="1" GridPane.halignment="CENTER" GridPane.valignment="BOTTOM">-->
+                    <!--<font>-->
+                        <!--<Font size="17.0" />-->
+                    <!--</font>-->
+                <!--</Label>-->
                 <Button mnemonicParsing="false" onAction="#menuBtnPressed" text="Main Menu" GridPane.halignment="LEFT" GridPane.valignment="TOP">
                     <GridPane.margin>
                         <Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />