body {

			background-color: #ddd;

			margin: 0;

			font-family: verdana;

			font-size: 13px;

			padding: 0;

		}

		div#container {

			position: relative;

			padding: 0;

			margin: 0 auto;

			width: 1600px;

		}

		div#wrapper {

			position: relative;

			float: left;

			padding: 0;

			margin: 0;

			width: 1600px;

			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;

		}

		span#title {

			text-align: center;

		}

		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: 70px;

			top: 330px;

			width: 100px;

			font: 14px 'Arial', Gadget, sans-serif;

		}

		input#Lat {

			position: absolute;

			left: 200px;

			top: 330px;

			width: 100px;

			font: 14px 'Arial', Gadget, sans-serif;

		}

		input#ReverseLookup {

			position: absolute;

			left: 70px;

			top: 365px;

			width: 230px;

			font: 14px 'Arial', Gadget, sans-serif;

		}

		input#Cog {

			position: absolute;

			left: 70px;

			top: 400px;

			width: 100px;

			font: 14px 'Arial', Gadget, sans-serif;

		}

		input#Sog {

			position: absolute;

			left: 200px;

			top: 400px;

			width: 100px;

			font: 14px 'Arial', Gadget, sans-serif;

		}













		/* Override voor de standaard emptyValye, gaugeValue en trendValue) */

		/*



		div#tankVoorSB canvas.tankGauge {

			position: absolute;

			left: 50px;

			top: 100px;

			width: 176px;

			height: 424px;

		}



		div#tankVoorSB div.emptyValue {

			position: absolute;

			left: 50px;

			top: 130px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #000;

			text-shadow: 1px 1px 0 #fff;

			font: 16px 'Arial', Gadget, sans-serif;

			font-style: italic;

		}

		div#tankVoorSB div.gaugeValue {

			position: absolute;

			left: 50px;

			top: 456px;

			width: 200px;

			height: 48px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 20px 'Arial', Gadget, sans-serif;

		}

		div#tankVoorSB div.trendValue {

			position: absolute;

			left: 50px;

			top: 482px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 16px 'Arial', Gadget, sans-serif;

		}

		*/







		/* Override voor de standaard emptyValye, gaugeValue en trendValue) */

		/*



		div#tankVoorBB canvas.tankGauge {

			position: absolute;

			left: 50px;

			top: 100px;

			width: 176px;

			height: 424px;

		}



		div#tankVoorBB div.emptyValue {

			position: absolute;

			left: 50px;

			top: 130px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #000;

			text-shadow: 1px 1px 0 #fff;

			font: 16px 'Arial', Gadget, sans-serif;

			font-style: italic;

		}

		div#tankVoorBB div.gaugeValue {

			position: absolute;

			left: 50px;

			top: 456px;

			width: 200px;

			height: 48px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 20px 'Arial', Gadget, sans-serif;

		}

		div#tankVoorBB div.trendValue {

			position: absolute;

			left: 50px;

			top: 482px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 16px 'Arial', Gadget, sans-serif;

		}

		*/












		div#tankFs {

			position: absolute;

			left: 670px;

			top: 26px;

			width: 272px;

			height: 700px;

			background-color: #122;

		}



		div#tankFs canvas.tankGauge {

			position: absolute;

			left: 50px;

			top: 100px;

			width: 176px;

			height: 424px;

		}



		/* Override voor de standaard emptyValye, gaugeValue en trendValue) */

		div#tankFs div.emptyValue {

			position: absolute;

			left: 50px;

			top: 130px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #000;

			text-shadow: 1px 1px 0 #fff;

			font: 16px 'Arial', Gadget, sans-serif;

			font-style: italic;

		}

		div#tankFs div.gaugeValue {

			position: absolute;

			left: 50px;

			top: 456px;

			width: 200px;

			height: 48px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 20px 'Arial', Gadget, sans-serif;

		}

		div#tankFs div.trendValue {

			position: absolute;

			left: 50px;

			top: 482px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 16px 'Arial', Gadget, sans-serif;

		}

















		/* bepaalt afmetingen tank 'container'

		   width/height worden gebruikt in de updateTank js functie die in

		   index.lua staat

		*/

		div#tankAsMID {

			position: absolute;

			left: 1272px;

			top: 26px;

			width: 272px;

			height: 700px;

			background-color: #122;

		}



		div#tankAsMID canvas.tankGauge {

			position: absolute;

			left: 50px;

			top: 100px;

			width: 176px;

			height: 424px;

		}



		div#tankAsMID div.gaugeValue {

			position: absolute;

			left: 50px;

			top: 456px;

			width: 200px;

			height: 48px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 20px 'Arial', Gadget, sans-serif;

		}

		div#tankAsMID div.trendValue {

			position: absolute;

			left: 50px;

			top: 482px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 16px 'Arial', Gadget, sans-serif;

		}

		div#tankAsMID div.emptyValue {

			position: absolute;

			left: 50px;

			top: 130px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #000;

			text-shadow: 1px 1px 0 #fff;

			font: 16px 'Arial', Gadget, sans-serif;

			font-style: italic;

		}



















		div#tankVoorSB {

			position: absolute;

			left: 331px;

			top: 26px;

			width: 332px;

			height: 450px;

			background-color: #122;

		}





		div#tankVoorBB {

			position: absolute;

			left: 331px;

			top: 474px;

			width: 332px;

			height: 250px;

			background-color: #122;

		}



		div#tankAchterSB {

			position: absolute;

			left: 940px;

			top: 26px;

			width: 332px;

			height: 350px;

			background-color: #122;

		}



		div#tankAchterBB {

			position: absolute;

			left: 940px;

			top: 374px;

			width: 332px;

			height: 350px;

			background-color: #122;

		}




		div#tankAchterBB div.emptyValue, div#tankAchterBB div.gaugeValue, div#tankAchterBB div.trendValue {
			margin-top: 100px;
		}


		canvas.tankGauge {

			position: absolute;

			left: 10px;

			top: 10px;

			width: 176px;

			height: 224px;

		}





		canvas.tankGaugeBB {

			position: absolute;

			left: 10px;

			top: 110px;

			width: 176px;

			height: 224px;

		}





		div.tankGaugeDataVoorSB {

			position: absolute;

			left: 190px;

			top: 45px;

			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.tankGaugeDataAchterSB br {

			display: block;

			margin: 2px 0;

		}



		div.tankGaugeDataAchterBB {

			position: absolute;

			left: 190px;

			top: 110px;

			width: 150px;

			height: 280px;

			color: #ffffff;

		}



		div.tankGaugeDataAchterBB br {

			display: block;

			margin: 2px 0;

		}



		div.tankGaugeDataAsMID {

			position: absolute;

			left: 90px;

			top: 540px;

			width: 150px;

			height: 280px;

			color: #ffffff;

		}



		div.tankGaugeDataFs {

			position: absolute;

			left: 90px;

			top: 540px;

			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#calcTempAchterSB, input#calcTempAchterBB {

			width: 60px;

			font-size: 14px;

			text-align: left;

			color: #000;

		}

		input#calcWgtVoorSB, input#calcWgtVoorBB, input#calcWgtAchterSB, input#calcWgtAchterBB, input#calcWgtAsMID, input#calcWgtFs {

			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;

		}



		div.gaugeValueBB {

			position: absolute;

			left: 10px;

			top: 266px;

			width: 200px;

			height: 48px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 20px 'Arial', Gadget, sans-serif;

		}

		div.trendValueBB {

			position: absolute;

			left: 10px;

			top: 292px;

			width: 200px;

			height: 24px;

			text-align: center;

			color: #fff;

			text-shadow: 2px 2px 0 #000;

			font: 16px 'Arial', Gadget, sans-serif;

		}

		div.emptyValueBB {

			position: absolute;

			left: 10px;

			top: 140px;

			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 {

			//display: none;

			position: absolute;

			left: 457px;

			//left: 326px;

			top: 350px;

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

			color: #000;

		}

		span#labelVolumeVoor {

			//display: none;

			position: absolute;

			left: calc(457px + 66px);

			//left: 392px;

			top: 352px;

			color: #fff;

		}

		input#trendVoor {

			//display: none;

			position: absolute;

			left: calc(457px + 84px);

			//left: 410px;

			top: 350px;

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

		}

		span#labelTrendVoor {

			//display: none;

			position: absolute;

			left: calc(457px + 150px);

			//left: 476px;

			top: 352px;

			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#volumeAchter {

			position: absolute;

			left: 1066px;

			top: 350px;

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

			color: #000;

		}

		span#labelVolumeAchter {

			position: absolute;

			left: 1132px;

			top: 352px;

			color: #fff;

		}

		input#trendAchter {

			position: absolute;

			left: 1152px;

			top: 350px;

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

		}

		span#labelTrendAchter {

			position: absolute;

			left: 1218px;

			top: 352px;

			color: #fff;

		}











		input#volumeAll {

			position: absolute;

			left: 122px;

			top: 270px;

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

			color: #000;

		}

		span#labelVolumeAll {

			position: absolute;

			left: 188px;

			top: 272px;

			color: #fff;

		}

		input#trendAll {

			position: absolute;

			left: 204px;

			top: 270px;

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

		}

		span#labelTrendAll {

			position: absolute;

			left: 270px;

			top: 272px;

			color: #fff;

		}

		span#labelAllTanks {

			position: absolute;

			left: 126px;

			top: 246px;

			color: #fff;

		}









		input#recording {

			position: absolute;

			left: 71px;

			top: 597px;

			width: 236px;

			font: 14px 'Arial', Gadget, sans-serif;

		}

		table.summary {

			position: absolute;

			left: 62px;

			top: 440px;

			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;

		}

		div#ladingstanks {

			position: absolute;

			left: 200px;

			top: 90px;

			/*width: 820px;

			height: 400px;*/

			background-color: #122;

		}

		div#ladingstanks table {

			width: 100%;

		}

		div#ladingstanks table td {

			text-align: center;

		}

		div#ladingstanks table td canvas.tankGauge {

			position: relative;

			left: 0px;

			top: 0px;

			width: 220px;

			height: 252px;

		}

		div#ladingstanks table td span.gaugeValue {

			font: 20px 'Arial', Gadget, sans-serif;

			color: #fff;

		}

		div#totaalVolume {

			position: absolute;

			left: 760px;

			top: 40px;

			color: #fff;

		}

		input#totalVolume_ladingstanks {

			width: 60px;

			height: 22px;

			padding: 0;

			margin: 0;

			color: #000;

		}