rogue-loop-1/Static/space_hud.html

<style type="text/css">
	#screen-container {
		position: relative;
		margin: 0;
		padding: 0;
		color: rgb(204, 204, 204);
		display: block;
		margin-left: auto;
		margin-right: auto;
		white-space: nowrap;
		min-width: 1564px;
		min-height: 540px;
		height: 100%;
		font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
	}

	.header-info {
		text-align: center;
	}

	.ui-section {
		text-align: center;
		/* border: 1px solid crimson; */
		margin: 0;
		padding: 0;
		display: block;
		background-size: contain;
	}

	#top-left {
		position: absolute;
		top: 0;
		left: 0;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_top_tile_left.png'); */
		background: url('./Static/spacegameguiset/window_top_tile_left.png');
		height: 350px;
		width: 502px;
		background-repeat: no-repeat;
		background-position: left bottom;
		margin-left: 100px;
	}
	#top-middle {
		position: absolute;
		top: 0;
		left: 500px;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_top_tile_center_repeat.png'); */
		background: url('./Static/spacegameguiset/window_top_tile_center_repeat.png');
		background-repeat: repeat-x;
		background-position: left bottom;
		height: 350px;
		width: calc(100% - 1554px);
		margin-left: 100px;
	}
	#top-right {
		position: absolute;
		top: 0;
		right: 0;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_top_tile_right.png'); */
		background: url('./Static/spacegameguiset/window_top_tile_right.png');
		height: 350px;
		width: 868px;
		background-repeat: no-repeat;
		background-position: right bottom;
		margin-right: 86px;
	}

	#left-side {
		position: absolute;
		top: 334px;
		left: 0;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_middle_left.png'); */
		/* background: url('./Static/spacegameguiset/window_middle_left.png'); */
		/* height: 890px; */
		width: 108px;
		background-repeat: no-repeat;
		background-position: right middle;
		margin-left: 10px;
	}
	#main {
		position: absolute;
		top: 342px;
		left: 118px;
		/* height: 870px; */
		width: calc(100% - 224px);
		min-width: 1382px;
	}
	#right-side {
		position: absolute;
		top: 334px;
		right: 0;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_middle_right.png'); */
		/* background: url('./Static/spacegameguiset/window_middle_right.png'); */
		/* height: 890px; */
		width: 108px;
		background-repeat: no-repeat;
		background-position: left middle;
}

	#bottom-left {
		position: absolute;
		bottom: 0;
		left: 0;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_bottom_tile_left.png'); */
		background: url('./Static/spacegameguiset/window_bottom_tile_left.png');
		height: 202px;
		width: 1031px;
		background-repeat: no-repeat;
		background-position: left top;
	}
	#bottom-middle {
		position: absolute;
		bottom: 0;
		left: 1029px;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_bottom_tile_center_repeat.png'); */
		background: url('./Static/spacegameguiset/window_bottom_tile_center_repeat.png');
		background-repeat: repeat-x;
		background-position: left top;
		height: 202px;
		width: calc(100% - 1558px);
	}
	#bottom-right {
		position: absolute;
		bottom: 0;
		right: 0;
		/* background: url('http://192.168.1.109:3110/Static/spacegameguiset/window_bottom_tile_right.png'); */
		background: url('./Static/spacegameguiset/window_bottom_tile_right.png');
		height: 202px;
		width: 443px;
		background-repeat: no-repeat;
		background-position: right top;
		margin-right: 86px;
	}
</style>
<div id="screen-container">
	<div id="top-left" class="ui-section"></div>
	<div id="top-middle" class="ui-section"></div>
	<div id="top-right" class="ui-section"></div>
	<div id="left-side" class="ui-section"></div>
	<div id="main" class="ui-section"></div>  
	<div id="right-side" class="ui-section"></div>
	<div id="bottom-left" class="ui-section"></div>
	<div id="bottom-middle" class="ui-section"></div>
	<div id="bottom-right" class="ui-section"></div>	
</div>