body {
	background-color: #ddd;
	margin: 0;
	font-family: verdana;
	font-size: 13px;
	padding: 0;
}
div#container {
	position: relative;
	padding: 0;
	margin: 0 auto;
	width: 1024px;
}
div#wrapper {
	position: relative;
	float: left;
	padding: 0;
	margin: 0;
	width: 1024px;
	text-align: left;
	overflow: hidden;
}
h1 {
	background-color: #4373a4;
	width: 100%;
	text-align: center;
	color: #fff;
	padding: 0;
	margin: 12px;
}
h2 {
	background-color: #060;
	width: 99%;
	text-align: center;
	color: #fff;
	padding: 0;
	margin: 12px;
	padding: 4px;
	font-size: 16px;
	font-weight: normal;
}
h2.error {
	background-color: #a00;
}
span#verbinding {
	float: left;
	margin-left: 24px;
}
span#clock {
	float: right;
	margin-right: 32px;
}
div#layout {
	position: relative;
}
input#userMode {
	position: absolute;
	left: 15px;
	top: 0px;
	width: 160px;
	font: 17px 'Arial', Gadget, sans-serif;
	visibility: hidden;
}
input#Lng {
	position: absolute;
	left: 50px;
	top: 225px;
	width: 100px;
	font: 14px 'Arial', Gadget, sans-serif;
}
input#Lat {
	position: absolute;
	left: 180px;
	top: 225px;
	width: 100px;
	font: 14px 'Arial', Gadget, sans-serif;
}
input#ReverseLookup {
	position: absolute;
	left: 50px;
	top: 260px;
	width: 230px;
	font: 14px 'Arial', Gadget, sans-serif;
}
input#Cog {
	position: absolute;
	left: 50px;
	top: 295px;
	width: 100px;
	font: 14px 'Arial', Gadget, sans-serif;
}
input#Sog {
	position: absolute;
	left: 180px;
	top: 295px;
	width: 100px;
	font: 14px 'Arial', Gadget, sans-serif;
}
div#tankVoorSB {
	position: absolute;
	left: 301px;
	top: 26px;
	width: 332px;
	height: 250px;
	background-color: #122;
}

div#tankVoorBB {
	position: absolute;
	left: 301px;
	top: 274px;
	width: 332px;
	height: 250px;
	background-color: #122;
}

div#tankAchterSB {
	position: absolute;
	left: 642px;
	top: 26px;
	width: 332px;
	height: 250px;
	background-color: #122;
}

div#tankAchterBB {
	position: absolute;
	left: 642px;
	top: 274px;
	width: 332px;
	height: 250px;
	background-color: #122;
}

canvas.tankGauge {
	position: absolute;
	left: 10px;
	top: 10px;
	width: 176px;
	height: 224px;
}

div.tankGaugeDataVoorSB {
	position: absolute;
	left: 190px;
	top: 10px;
	width: 150px;
	height: 280px;
	color: #ffffff;
}

div.tankGaugeDataVoorBB {
	position: absolute;
	left: 190px;
	top: 45px;
	width: 150px;
	height: 280px;
	color: #ffffff;
}

div.tankGaugeDataAchterSB {
	position: absolute;
	left: 190px;
	top: 10px;
	width: 150px;
	height: 280px;
	color: #ffffff;
}

div.tankGaugeDataAchterBB {
	position: absolute;
	left: 190px;
	top: 45px;
	width: 150px;
	height: 280px;
	color: #ffffff;
}

input.spinner {
	width: 50px;
	font-size: 14px;
	font-weight: bold;
	margin-left: 16px;
	color: #000;
}
input#calcRhoAchterSB, input#calcRhoAchterBB {
	width: 60px;
	font-size: 14px;
	text-align: left;
	color: #000;
}
input#calcWgtVoorSB, input#calcWgtVoorBB, input#calcWgtAchterSB, input#calcWgtAchterBB {
	width: 60px;
	font-size: 14px;
	text-align: left;
	color: #000;
}
div.gaugeValue {
	position: absolute;
	left: 10px;
	top: 166px;
	width: 200px;
	height: 48px;
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px 0 #000;
	font: 20px 'Arial', Gadget, sans-serif;
}
div.trendValue {
	position: absolute;
	left: 10px;
	top: 192px;
	width: 200px;
	height: 24px;
	text-align: center;
	color: #fff;
	text-shadow: 2px 2px 0 #000;
	font: 16px 'Arial', Gadget, sans-serif;
}
div.emptyValue {
	position: absolute;
	left: 10px;
	top: 40px;
	width: 200px;
	height: 24px;
	text-align: center;
	color: #000;
	text-shadow: 1px 1px 0 #fff;
	font: 16px 'Arial', Gadget, sans-serif;
	font-style: italic;
}
input#volumeVoor {
	position: absolute;
	left: 326px;
	top: 260px;
	width: 60px;
	height: 22px;
	padding: 0;
	margin: 0;
	color: #000;
}
span#labelVolumeVoor {
	position: absolute;
	left: 392px;
	top: 262px;
	color: #fff;
}
input#trendVoor {
	position: absolute;
	left: 410px;
	top: 260px;
	width: 60px;
	height: 22px;
	padding: 0;
	margin: 0;
}
span#labelTrendVoor {
	position: absolute;
	left: 476px;
	top: 262px;
	color: #fff;
}
input#volumeAchter {
	position: absolute;
	left: 666px;
	top: 260px;
	width: 60px;
	height: 22px;
	padding: 0;
	margin: 0;
	color: #000;
}
span#labelVolumeAchter {
	position: absolute;
	left: 732px;
	top: 262px;
	color: #fff;
}
input#trendAchter {
	position: absolute;
	left: 752px;
	top: 260px;
	width: 60px;
	height: 22px;
	padding: 0;
	margin: 0;
}
span#labelTrendAchter {
	position: absolute;
	left: 818px;
	top: 262px;
	color: #fff;
}
input#volumeAll {
	position: absolute;
	left: 102px;
	top: 170px;
	width: 60px;
	height: 22px;
	padding: 0;
	margin: 0;
	color: #000;
}
span#labelVolumeAll {
	position: absolute;
	left: 168px;
	top: 172px;
	color: #fff;
}
input#trendAll {
	position: absolute;
	left: 184px;
	top: 170px;
	width: 60px;
	height: 22px;
	padding: 0;
	margin: 0;
}
span#labelTrendAll {
	position: absolute;
	left: 250px;
	top: 172px;
	color: #fff;
}
span#labelAllTanks {
	position: absolute;
	left: 106px;
	top: 146px;
	color: #fff;
}
input#recording {
	position: absolute;
	left: 50px;
	top: 505px;
	width: 236px;
	font: 14px 'Arial', Gadget, sans-serif;
}
table.summary {
	position: absolute;
	left: 40px;
	top: 340px;
	border-spacing: 0;
	border-right: 1px solid #888;
	border-bottom: 1px solid #888;
	background-color: #fff;
	font: 12px 'Arial', Gadget, sans-serif;
	visibility: hidden;
}
table.summary th {
	border-left: 1px solid #888;
	border-top: 1px solid #888;
	width: 46px;
	margin: 0;
	padding: 2px;
	background-color: #ddd;
	text-align: center;
	font-weight: normal;
}
table.summary td {
	border-left: 1px solid #888;
	border-top: 1px solid #888;
	margin: 0;
	padding: 2px;
	text-align: right;
	font-weight: bold;
}
