# HG changeset patch
# User Matti Hamalainen <ccr@tnsp.org>
# Date 1394645354 -7200
# Node ID ccb8e748a03f0c3a6331d86cc66b1e2384d21471
# Parent  6d9e3a63d6e155b650a2de4263dfcf6ff0bc2d82
Some stylesheet and HTML work.

diff -r 6d9e3a63d6e1 -r ccb8e748a03f css/mapstyle1.css
--- a/css/mapstyle1.css	Wed Mar 12 18:31:34 2014 +0200
+++ b/css/mapstyle1.css	Wed Mar 12 19:29:14 2014 +0200
@@ -169,16 +169,26 @@
 }
 
 #headcontent {
+	display: inline-block;
+	vertical-align: top;
 	color: white;
-	background: url(../img/batmud_logo2.png) no-repeat 0px 0px;
 	height: 100%;
 	padding: 0px;
-	padding-left: 200px;
+	margin-left: 2em;
 
 	text-shadow: 0px 0px 4px #000;
 	font-size: 0.7em;
 }
 
+#headlogo {
+	display: inline-block;
+	vertical-align: top;
+	width: 150px;
+	height: 90px;
+	padding: 0px;
+	background: url(../img/batmud_logo2.png) no-repeat 0px 0px;
+}
+
 #headcontent h1 {
 	font-size: 2em;
 	padding: 0px;
diff -r 6d9e3a63d6e1 -r ccb8e748a03f css/mapstyle2.css
--- a/css/mapstyle2.css	Wed Mar 12 18:31:34 2014 +0200
+++ b/css/mapstyle2.css	Wed Mar 12 19:29:14 2014 +0200
@@ -171,16 +171,26 @@
 }
 
 #headcontent {
+	display: inline-block;
+	vertical-align: top;
 	color: white;
-	background: url(../img/batmud_logo2.png) no-repeat 0px 0px;
 	height: 100%;
 	padding: 0px;
-	padding-left: 200px;
+	margin-left: 2em;
 
 	text-shadow: 0px 0px 4px #000;
 	font-size: 0.7em;
 }
 
+#headlogo {
+	display: inline-block;
+	vertical-align: top;
+	width: 150px;
+	height: 90px;
+	padding: 0px;
+	background: url(../img/batmud_logo2.png) no-repeat 0px 0px;
+}
+
 #headcontent h1 {
 	font-size: 2em;
 	padding: 0px;
diff -r 6d9e3a63d6e1 -r ccb8e748a03f css/mapstyle3.css
--- a/css/mapstyle3.css	Wed Mar 12 18:31:34 2014 +0200
+++ b/css/mapstyle3.css	Wed Mar 12 19:29:14 2014 +0200
@@ -1,26 +1,31 @@
-/* $Id: mapstyle.css 2151 2009-05-29 02:05:34Z jeskko $ */
-
 body {
-	font-family: Verdana;
-	background: url(../img/wood2.jpg) black repeat;
-//	background: url(../img/test.jpg) black repeat;
+	background: #89a;
+	font-family: "Arial", sans-serif;
 }
 
 #footer {
-//	background: url(../img/wood1.jpg) black repeat-x;
 	position: absolute;
 	bottom: 0px;
-	height: 1.6em;
+	height: 2em;
 	left: 0px;
 	right: 0px;
 	margin: 0px;
 }
 
 #footercontent {
-	padding-right: 0.15em;
-	padding-top: 0.15em;
+	position: absolute;
+
+	left: 0.2em;
+	right: 280px;
+	top: 0.25em;
+
+	padding: 0.5em;
+
 	color: white;
 	font-size: 10pt;
+	text-shadow: 1px 1px 1px #000;
+
+	background: rgba(0,0,0, 0.5);
 }
 
 #footercontent span {
@@ -29,72 +34,109 @@
 
 #sidebar {
 	position: absolute;
-	right: 5px;
-	top: 35px;
-	bottom: 50px;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
 	width: 270px;
 	padding: 0px;
 	margin: 0px;
-	z-index: 1;
-}
-
-#sidetop {
-	background: url(../img/scroll_top.png) no-repeat;
-	position: absolute;
-	right: 0px;
-	width: 270px;
-	height: 260px;
-	top: -20px;
-	z-index: 2;
-}
-
-#sidebottom {
-	background: url(../img/scroll_bot.png) no-repeat;
-	position: absolute;
-	right: 0px;
-	width: 270px;
-	height: 75px;
-	bottom: -30px;
-	z-index: 15;
 }
 
 #sidebox {
-	right: 40px;
-	left: 16px;
-	margin: 0px;
-	padding: 0px;
+	position: absolute;
+
+	width: 100%;
 	height: 100%;
-	background: url(../img/scroll_mid.jpg) repeat-y 2px 0px;
-	padding-left: 20px;
-	padding-right: 20px;
-	z-index: 3;
+	z-index: 5;
+}
+
+#sidetop {
+	position: absolute;
+	z-index: 10;
+
+	width: 100%;
+	height: 10px;
+	top: 0px;
+}
+
+#sidebottom {
+	position: absolute;
+	z-index: 10;
+
+	width: 100%;
+	height: 10px;
+	bottom: 0px;
 }
 
 #sidecontent {
-	position: relative;
-	padding-top: 45px;
-	color: white;
-	height: 100%;
-	width: 100%;
+	position: absolute;
+	z-index: 15;
+
+	top: 140px;
+	bottom: 16px;
+
+	right: 8px;
+	left: 8px;
+
+	color: black;
+	overflow: auto;
+
 	font-size: 10pt;
-	z-index: 13;
+	font-family: Arial;
+
+	padding: 1em;
+	background: #BBDDFF;
+
+	box-shadow: 0px 0px 2px #000;
+}
+
+#sidecontent a {
+	display: inline-block;
+	width: 85%;
+	text-decoration: none;
+	color: black;
+	padding: 2px;
+	margin: 2px;
 }
 
-#sidescroll {
+#sidecontent a:hover {
+	background: rgba(0,0,0,0.5);
+	color: #0f0;
+}
+
+#controls {
 	position: absolute;
-	overflow: auto;
+
+	top: 0.5em;
+	left: 0.5em;
+	right: 0.5em;
+
+	font-size: 12px;
+	text-align: center;
+
+	padding: 0.5em;
+	background: #BBDDFF;
+
+	box-shadow: 0px 0px 2px #000;
+}
+
+#controls span {
+	border: 1px solid black;
+	margin: 2px;
+	display: inline-table;
+}
+
+#controls * a {
+	text-decoration: none;
 	color: black;
-	top: 110px;
-	bottom: 70px;
-	width: 100%;
-	font-family: Times;
-	z-index: 16;
+	padding: 6px;
 }
 
+
 #sidecoll {
 	width: 8px;
 	position : absolute;
-	right: 270px;
+	right: 268px;
 	top: 0px;
 	bottom: 0px;
 	min-height: 50px;
@@ -103,7 +145,7 @@
 	padding-top: 0px;
 	padding-bottom: 0px;
 	margin: 0px;
-	}
+}
 
 #collbuttondiv {
 	position: relative; 
@@ -120,35 +162,126 @@
 }
 
 #header {
-	background: url(../img/wood2.jpg) black repeat-x;
 	position: absolute;
 	left: 0px;
 	right: 0px;
 	top: 0px;
-	height: 120px;
+	height: 100px;
+	padding: 0px;
+}
+
+#headcontent {
+	display: inline-block;
+	vertical-align: top;
+	color: white;
+	height: 100%;
+	padding: 8px;
+	margin-left: 2em;
+
+	text-shadow: 2px 2px 1px #000;
+	font-size: 0.7em;
+}
+
+#headlogo {
+	display: inline-block;
+	vertical-align: top;
+	width: 150px;
+	height: 90px;
+	padding: 0px;
+	margin: 8px;
+	background: url(../img/batmud_logo2.png) no-repeat 0px 0px;
+}
+
+#headcontent h1 {
+	font-size: 2em;
 	padding: 0px;
 	margin: 0px;
 }
 
-#headlogo {
-	position: relative;
-	background: url(../img/batmud_logo2.png) no-repeat 0px 0px;
-	height: 100%;
+#headcontent h2 {
+	font-size: 1.5em;
+	padding: 0px;
+	margin: 0px;
+	color: red;
+}
+
+#headcontent div {
+	display: inline-block;
 }
 
-#headcontent {
-	position: relative;
-	color: white;
-	font-size: 8pt;
+#headcontent div.controls {
+	position: absolute;
+	right: 280px;
+	width: auto;
 }
 
+#headcontent div.controls a {
+	background: rgba(0,0,0,0.5);
+	padding: 0.5em;
+	color: #ddd;
+	border-radius: 0.5em;
+	border: 1px solid white;
+	box-shadow: 2px 2px 2px #000;
+}
+
+#headcontent div.controls a:hover {
+	background: rgba(0,0,0,0.2);
+	color: #fff;
+	border: 1px solid #888;
+}
+
+
 #map {
 	position: absolute;
 	left: 0px;
 	top: 100px;
 	right: 280px;
-	bottom: 1.6em;
+	bottom: 2em;
 	padding: 0px;
 	margin: 0px;
 }
 
+#copyrights {
+	position: absolute;
+	padding: 0.2em;
+	left: 80px;
+	bottom: 4em;
+	height: auto;
+	width: auto;
+	font-size: 8pt;
+	color: rgba(255,255,255, 0.85);
+	text-shadow: 1px 1px 1px #000;
+}
+
+
+.labels {
+	color: white;
+	background: black;
+	font-family: "Arial", sans-serif;
+	font-weight: bold;
+	font-size: 10px;
+	white-space: nowrap;
+	padding: 2px;
+	border: 1px dotted black;
+	border-radius: 5px;
+}
+
+
+#sidecontent div div {
+	display: inline-block;
+	width: 10%;
+	height: auto;
+	border-radius: 0.5em;
+	border: 1px solid black;
+}
+
+.c_laenor div { background: #955; }
+.c_rothikgen div { background: #595; }
+.c_lucentium div { background: #559; }
+.c_desolathya div { background: #599; }
+.c_furnachia div { background: #959; }
+.c_renardy div { background: #c70; }
+.c_tormentas div { background: #7a0; }
+.c_hcbat div { background: #444; }
+.c_special div { background: #a06; }
+.c_all div { background: #0af; }
diff -r 6d9e3a63d6e1 -r ccb8e748a03f css/mapstyle4.css
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/mapstyle4.css	Wed Mar 12 19:29:14 2014 +0200
@@ -0,0 +1,208 @@
+body {
+	background: #def;
+	font-family: "Arial", sans-serif;
+}
+
+#footer {
+	position: absolute;
+	bottom: 0px;
+	height: 2em;
+	left: 0px;
+	right: 0px;
+	margin: 0px;
+}
+
+#footercontent {
+	position: absolute;
+
+	left: 0.2em;
+	right: 280px;
+	top: 0.25em;
+
+	padding: 0.5em;
+
+	color: white;
+	font-size: 10pt;
+	text-shadow: 1px 1px 1px #000;
+
+	background: rgba(0,0,0, 0.5);
+}
+
+#footercontent span {
+	color: red;
+}
+
+#sidebar {
+	position: absolute;
+	right: 0px;
+	top: 0px;
+	bottom: 0px;
+	width: 270px;
+	padding: 0px;
+	margin: 0px;
+}
+
+#sidebox {
+	position: absolute;
+
+	width: 100%;
+	height: 100%;
+	z-index: 5;
+
+	overflow: auto;
+}
+
+#sidetop {
+	position: absolute;
+	z-index: 10;
+
+	width: 100%;
+	height: 10px;
+	top: 0px;
+}
+
+#sidebottom {
+	position: absolute;
+	z-index: 10;
+
+	width: 100%;
+	height: 10px;
+	bottom: 0px;
+}
+
+#sidecontent {
+	position: relative;
+	margin: 8px;
+
+	color: black;
+
+	font-size: 10pt;
+	font-family: Arial;
+
+	padding: 1em;
+	background: #BBDDFF;
+}
+
+#sidecontent a {
+	display: inline-block;
+	width: 85%;
+	text-decoration: none;
+	color: black;
+	padding: 2px;
+	margin: 2px;
+}
+
+#sidecontent a:hover {
+	background: rgba(0,0,0,0.5);
+	color: #0f0;
+}
+
+#controls {
+	position: relative;
+	margin: 8px;
+
+	font-size: 12px;
+	text-align: center;
+
+	padding: 0.5em;
+	background: #BBDDFF;
+}
+
+#controls span {
+	border: 1px solid black;
+	margin: 2px;
+	display: inline-table;
+}
+
+#controls * a {
+	text-decoration: none;
+	color: black;
+	padding: 6px;
+}
+
+
+#sidecoll {
+	width: 8px;
+	position : absolute;
+	right: 268px;
+	top: 0px;
+	bottom: 0px;
+	min-height: 50px;
+	padding-left: 1px;
+	padding-right: 1px;
+	padding-top: 0px;
+	padding-bottom: 0px;
+	margin: 0px;
+}
+
+#collbuttondiv {
+	position: relative; 
+	width: auto;
+	height: 16px;
+	top: 50%;
+	margin-top: -8px;
+	padding: 0px;
+	
+}
+
+#collbutton {
+	border: 0px;
+}
+
+#header {
+	display: none;
+}
+
+#map {
+	position: absolute;
+	left: 0px;
+	top: 0px;
+	right: 280px;
+	bottom: 2em;
+	padding: 0px;
+	margin: 0px;
+}
+
+#copyrights {
+	position: absolute;
+	padding: 0.2em;
+	left: 80px;
+	bottom: 4em;
+	height: auto;
+	width: auto;
+	font-size: 8pt;
+	color: rgba(255,255,255, 0.85);
+	text-shadow: 1px 1px 1px #000;
+}
+
+
+.labels {
+	color: white;
+	background: black;
+	font-family: "Arial", sans-serif;
+	font-weight: bold;
+	font-size: 10px;
+	white-space: nowrap;
+	padding: 2px;
+	border: 1px dotted black;
+	border-radius: 5px;
+}
+
+
+#sidecontent div div {
+	display: inline-block;
+	width: 10%;
+	height: auto;
+	border: 1px solid black;
+}
+
+.c_laenor div { background: #955; }
+.c_rothikgen div { background: #595; }
+.c_lucentium div { background: #559; }
+.c_desolathya div { background: #599; }
+.c_furnachia div { background: #959; }
+.c_renardy div { background: #c70; }
+.c_tormentas div { background: #7a0; }
+.c_hcbat div { background: #444; }
+.c_special div { background: #a06; }
+.c_all div { background: #0af; }
diff -r 6d9e3a63d6e1 -r ccb8e748a03f index.php
--- a/index.php	Wed Mar 12 18:31:34 2014 +0200
+++ b/index.php	Wed Mar 12 19:29:14 2014 +0200
@@ -32,6 +32,7 @@
 ?>
   <body>
     <div id="header">
+      <a id="headlogo" href="http://www.bat.org/"></a>
       <div id="headcontent">
         <h1><?php echo $pageTitle1 ?></h1>
         <h2><?php echo $pageTitle2." v".$pageVersion ?></h2>
@@ -55,8 +56,7 @@
       </div>
     </div>
     <div id="footer">
-      <div id="footercontent">
-      </div>
+      <div id="footercontent">&nbsp;</div>
     </div>
     <script type="text/javascript" src="map.js"></script>
     <script type="text/javascript" src="lib/util.js"></script>