<!doctype html>
<html>
	<head>
		<title>vtm-gdx</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">

		<!-- pixel and dpi are way too simple concepts for web devs, lets also have css-pixels! -->
		<!-- http://www.html5rocks.com/de/mobile/touch/ -->
		<!-- http://www.quirksmode.org/mobile/viewports.html -->
		<!-- http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html  -->
		<!-- devicePixelRatio: http://coding.smashingmagazine.com/2012/08/20/towards-retina-web/ -->
		<meta name="viewport"
		content="width=device-width, initial-scale=1, user-scalable=no">

		<style>
			.header {
				background-color: #ddd;
				text-align: center;
			}

			html, body {
				height: 100%;
				width: 100%;
				margin: 0 0 0 0;
				font-family: Arial, "MS Trebuchet", sans-serif;
			}

			#gdx-canvas {
				cursor: default;
				outline: none;
				position: fixed;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 0;
			}

			#credits {
				position: absolute;
				bottom: 0.2em;
				right: 0.2em;
				z-index: 20000;
				color: white;
				background-color: #000;
				opacity: 0.5;
				padding: 0.2em 0.5em 0.2em 0.5em;
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				font-size: 11px;
			}
			#credits a {
				color: white;
				text-decoration: none;
				font-variant: small-caps;
			}
			#search {
				z-index: 20000;
				position: absolute;
				top: 0.5em;
				left: 0.5em;
				background-color: rgba(0,0,0,0.8);
				-moz-border-radius: 3px;
				-webkit-border-radius: 3px;
				border-radius: 3px;
				visibility: hidden;
			}
			#listContainer{
				color: #FFFFFF;
			}
			#nameFieldContainer, .gwt-TextBox {
				width: 250px;
			}

			/* Turn on a 16x16 scrollbar */
			::-webkit-scrollbar {
				width: 10px;
				height: 0px;
			}

			/* Turn on single button up on top, and down on bottom */
			::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
				display: block;
			}

			/* Turn off the down area up on top, and up area on bottom */
			::-webkit-scrollbar-button:vertical:start:increment, ::-webkit-scrollbar-button:vertical:end:decrement {
				display: none;
			}

			/* Place The scroll down button at the bottom */
			::-webkit-scrollbar-button:end:increment {
				/*background-image: url(images/scroll_cntrl_dwn.png);*/
			}

			/* Place The scroll up button at the up */
			::-webkit-scrollbar-button:start:decrement {
				/*background-image: url(images/scroll_cntrl_up.png);*/
			}

			/* Top area above thumb and below up button */
			::-webkit-scrollbar-track-piece:vertical:start {
				/*background-image: url(images/scroll_gutter_top.png), url(images/scroll_gutter_mid.png);
				background-repeat: no-repeat, repeat-y;*/
			}

			/* Bottom area below thumb and down button */
			::-webkit-scrollbar-track-piece:vertical:end {
				/*background-image: url(images/scroll_gutter_btm.png), url(images/scroll_gutter_mid.png);
				background-repeat: no-repeat, repeat-y;
				background-position: bottom left, 0 0;*/
			}

			/* The thumb itself */
			::-webkit-scrollbar-thumb:vertical {
				height: 56px;
				width: 12px;
				/*				-webkit-border-image: url(images/scroll_thumb.png) 8 0 8 0 stretch stretch;*/
				background-color: #DDDDDD;
				opacity: 0.5;
			}

		</style>

		<script type="text/javascript">
			var mapconfig = {
				tilesource : "oscimap4",
				tileurl : "/tiles",
				zoom : 2,
				latitude : 0.0,
				longitude : 0.0
			}
			//background : "naturalearth"
		</script>

	</head>

	<body>
		<script type="text/javascript" src="js/_tessellate.js"></script>
		<script type="text/javascript" src="js/tessellate.js"></script>

		<script type="text/javascript"
		src="org.oscim.gdx.GwtDefinition/org.oscim.gdx.GwtDefinition.nocache.js"></script>

		<div id="credits">
			<a href="https://github.com/hjanetzek/vtm">Source</a>
			| map data © <a href="http://www.openstreemap.org">OpenStreetMap</a> contributors
			| <a href="http://www.opensciencemap.org">OpenScienceMap</a>
		</div>

		<div id="search">
			<table align="center">
				<tr>
					<td id="nameFieldContainer">
					<td id="sendButtonContainer">
				</tr>
				<tr>
					<td colspan="2" id="listContainer">
				</tr>
			</table>
		</div>
	</body>
</html>