RegionChooser: Color tests and resizing.

src/eu/simstadt/regionchooser/RegionChooserBrowser.java

@@ -238,11 +238,11 @@ protected void layoutChildren() {
 
 	@Override
 	protected double computePrefWidth(double height) {
-		return 900;
+		return 1024;
 	}
 
 	@Override
 	protected double computePrefHeight(double width) {
-		return 600;
+		return 720;
 	}
 }

src/eu/simstadt/regionchooser/RegionChooserFX.java

@@ -20,7 +20,7 @@ public class RegionChooserFX extends Application
 	@Override
 	public void start(Stage stage) {
 		stage.setTitle("RegionChooser " + applicationVersion());
-		scene = new Scene(new RegionChooserBrowser(), 1024, 900, Color.web("#666970"));
+		scene = new Scene(new RegionChooserBrowser(), 1024, 720, Color.web("#666970"));
 		stage.setScene(scene);
 		stage.show();
 	}

src/eu/simstadt/regionchooser/website/index.html

@@ -24,9 +24,9 @@
 				<li class="title">Simstadt Region Chooser</li>
 			</ul>
 		</div>
-		<div id="map" class="map" tabindex="0" style="height: 800px;"></div>
+		<div id="map" class="map" tabindex="0" style="height: 660px;"></div>
 		<div id="side">
-			<div id="dataPanel" style="height: 800px;"></div>
+			<div id="dataPanel" style="height: 660px;"></div>
 		</div>
 		<script src="script/simstadt_openlayers.js" type="text/javascript"></script>
 	</body>

src/eu/simstadt/regionchooser/website/style/style.css

 html.wait, html.wait * { cursor: wait !important; }
 
 :root {
---color1:#fc5185;
---color2:#f5f5f5;
---color3:#3fc1c9;
---color4:#364f6b;
+	--color1:#fc5185;
+	--color2:#f5f5f5;
+	--color3:#3fc1c9;
+	--color4:#364f6b;
 }
 
-:other{
-    --color1:#6ba083;
-    --color2:#222831;
-    --color3:#6ba083;
-    --color4:#eeeeee;
+:palette1{
+	--color1:#071c21;
+	--color2:#153b44;
+	--color3:#2d6e7e;
+	--color4:#c6de41;
 }
 
+:palette3{
+	--color1:#1a3c40;
+	--color2:#144d53;
+	--color3:#307672;
+	--color4:#e4eddb;
+}
+
+:palette2{
+	--color1:#f0b917;
+	--color2:#155263;
+	--color3:#76b39d;
+	--color4:#f9f8eb;
+}
+
+:palette4{
+	--color1:#ff7f50;
+	--color2:#404969;
+	--color3:#bde4f4;
+	--color4:#e0fcff;
+}
 
 
 html,body{
 	margin:0;
 	padding:0;
-	width:100%;
-	height:100%;
 	font-family:Arial, Helvetica, sans-serif;
     background-color: var(--color2);
 }
@@ -31,7 +49,6 @@ form.pay{
 }
 div#header{	
 	vertical-align:middle;
-	border-bottom:1px solid #000;
 }
 
 div#map{
@@ -40,6 +57,8 @@ div#map{
 	float:left;
 	outline: 0;
 	background-color: var(--color4);
+	border:1px solid var(--color3);
+	box-sizing: border-box;
 }
 div#side{
 	width:30%;
@@ -48,6 +67,7 @@ div#side{
 
 a {
 	color: var(--color1);
+	text-decoration: none;
 }
 
 a:active,a:hover {
@@ -55,17 +75,17 @@ a:active,a:hover {
 }
 
 a:visited, a:selected {
-	color: var(--color4);
+	color: var(--color3);
 }
 
 
 div#dataPanel{
+	box-sizing: border-box;
 	color: var(--color2);
 	background-color: var(--color4);
-	width:90%;
 	height:80%;
 	overflow:auto;
-	border:2px solid var(--color3);
+	border:1px solid var(--color3);
 	font-family: Consolas,monaco,monospace;
 	font-size: 12px;
 	box-sizing:border-box;
@@ -89,14 +109,15 @@ div ul{
 div ul li{
 	display: inline;
 	list-style-type: none;
-	padding-right: 40px;
+	padding-right: 30px;
 	font-size:18px;
 	font-weight:bold;
 }
 
 div ul li.title{
 	font-size:22px;
-    color: var(--color1);
+	font-family: Calibri;
+    color: var(--color4);
 }
 
 div#header{