<body>
<h1>Lantea Map</h1>
-<div id="overlayArea">
-<input type="button" id="zoomInButton" value="+"
- onclick="zoomIn();">
-<span id="zoomLevel">Z</span>
-<input type="button" id="zoomOutButton" value="-"
- onclick="zoomOut();"><br/>
+<div id="menuArea" class="overlayArea">
<input type="button" id="trackButton" value="Track"
onclick="toggleTrackArea();"><br/>
<fieldset id="trackArea"><legend>Track</legend>
</fieldset>
</div>
+<div id="zoomArea" class="overlayArea">
+<input type="button" id="zoomInButton" value="+"
+ onclick="zoomIn();"><br/>
+<span id="zoomLevel">Z</span><br/>
+<input type="button" id="zoomOutButton" value="-"
+ onclick="zoomOut();">
+</div>
+
<p id="debug" class="debugHide"></p>
<p id="copyright"></p>
display: none;
}
-#overlayArea {
+#menuArea {
position: absolute;
/* width: 30em; */
left: 1%;
z-index: 5;
}
-#overlayArea:-moz-system-metric(touch-enabled) {
+#zoomArea {
+ position: absolute;
+ right: 1%;
+ top: 1em;
+ z-index: 5;
+ text-align: center;
+}
+
+.overlayArea:-moz-system-metric(touch-enabled) {
font-size: 3mozmm;
}
-#overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
-#overlayArea select:-moz-system-metric(touch-enabled) {
+.overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
+.overlayArea select:-moz-system-metric(touch-enabled) {
font-size: 2.5mozmm;
}
body {
font-size: 10px;
}
- #overlayArea {
+ #menuArea {
top: 1px;
left: 1px;
}
+ #zoomArea {
+ top: 1px;
+ right: 1px;
+ }
#copyright {
bottom: 1px;
right: 1px;