<!-- **************************************************************************************************************
	* Diese HTML-Seite stellt den Pfad der Sonnenfinsternis grafisch auf der
	* Weltkarte auf einem UTM-Gitter (Universale Transversale Mercator-Projektion) dar. 
	* Wegen der Erdkugel sind die Länder verzerrt dargestellt, entsprechen aber den
	* originalen Oberflächenkorrdinaten.
	* Die darstellung findet auf einem Canvas= Leinwand statt und erfolgt in transparenten Farben,
	* je nach Bedeckung der Sonne durch den Mond.
	* - Gelb		=   1 - 32%
	* - Grün	= 33 - 65%
	* - Violett	= 66 - 89%
	* - Blau		= 90 - 100% und mehr ...
	* Die Transparenz beträgt global 70% oder Deckkraft von 30%.
	*
	* Die Berechnung erfolgt in Gradschritten, die im Hauptprogramm anzugeben sind und umspannt
	* die gesamte Erdoberfläche.
	*
	* Für eine 100%-ige Genauigkeit kann nicht garantiert werden.
	*
	GPS-Daten Cities (5.138°/Pixel Long	- 5.133°/Pixel Lat):
	------------------------
	München				Germany				48.1372264 	N	11.581981 	O
	Berlin					Germany				52.520007	N	13.404954	O
	Paris						Frankreich			48.856614	N	2.3522219	O
	Rom						Italien					41.9027835	N	12.4963655	O
	Madrid					Spanien				40.4167754	N	-3.7037902	W
	Kopenhagen 		Dänemark				55.6786		N	12.5635		O
	Oslo						Norwegen				59.9111		N	10.7528		O
	Reykjavik				Island					64.133333	N	-21.933333	W
	Helsinki				Finnland				60.1733244	N	24.9410248	O
	Nuuk					Grönland				64,18			N	-51.72			W
	New York				USA						40.6943		N	-73.9249		W
	Ottawa					Kanada					45.4215296	N	-75.6971931	W
	Juneau					Alsaka					58.301944	N	-134.419722	W
	Pretoria				Südafrika				-25.75			S	28.20			O
	Kapstadt				Südafrika				-33.92			S	18.42			O
	Bloemfontein			Südafrika				-29.09			S	26.16			O
	Moskau				Russland				55.76			N	37.62			O
	Sydney					Australien				-33.867487	S	151.206990	O
	Tokio					Japan					35.6894875	N	139.691706	O
	Peking					China					39.904211	N	116.407395	O
	Ulaanbaatar			Mongolei				47.92			N	106.92			O
	Istanbul				Türkei					41.00527		N	28.97696		O
	Budapest				Ungarn					47.497912	N	19.040235	O
	Mexico-City			Mexico					19.432608	N	-99.133208	W
	Warschau				Polen					52.229676	N	21.012229	O
	Bukarest				Rumänien				44.4267674	N	26.1025384	O
	Brasilia					Brasilien				-15.7942287 S 	-47.8821658	W
	Lima						Peru						-12.046374	S	-77.0427934	W
	Buenos Aires		Argentinien			-34.6037232	S	-58.3815931	W
	Griechenland		Athen					37.983917	N	23.7293599	O
	Marokko				Rabat					33.9715904	N	-6.8498129	W
	Algerien				Algier					36.752887	N	3.042048		O
	Jerusalem				Isreal					31.768319	N	35.21371		O
	Nairobi					Kenia					-1.292066		S	36.821946	O
	Jaunde					Kamerun				3.866667		N	11.516667	O
	Addis Abeba			Äthiopien				8.9806034	N 	38.7577605	O
	Kampala				Uganda				0.313611		N 	32.581111	O 
	Kinshasa				Kongo					-4.325			S 	15.322222	O 
	Gaborone				Botswana				-24.658056	S 	25.912222	O 
	N'Djamena			Tschad					12.113056	N 	15.049167	O 
	Santiago de Chile	Chile					-33.4691199	S	-70.641997	W
	Bogotá					Kolumbien			4.598056		N	-74.075833	W
	La Paz					Bolivien				-16.5			S	-68.15			W 
	Sucre					Bolivien				-19.0195852	S	-65.2619615	W
	Neu-Delhi				Indien					28.613939	N	77.209021	O
	Kuala Lumpur		Malaysia				3.139003		N	101.686855	O 
	Jakarta					Indonesien			-6.186486		S	106.834091	O
	Manila					Phillipinen				14.602137	N	121.050904	O
	Hanoi					Vietnam				21.0277644	N	105.8341598 O
	Pjöngjang				Nordkorea			38.9613433	N	125.8279959 O
	Seoul					Südkorea				37.566535	N	126.9779692 O
	Port Moresby		Papua Neuguinea	-9.4438004	S	147.1802671 O
	Guatemala-Stadt	Guatenala				14.613333	N	-90.535278	W 
	San José				Costa Rica			9.928069		N 	-84.090725	W
	Washington D.C.	USA						38.9071923	N	-77.0368707	W
	Teheran				Iran						35.696111	N	51.423056	O
	Bagdad					Irak						33.325			N	44.422			O
	Kairo					Ägypthen				30.0444196	N	31.2357116	O
	Amman					Jordanien				31.9565783	N	35.9456951	O
	Islamabad				Pakistan				33.7293882	N	73.0931461	O
	Nur-Sultan			Kasastan				51.1333		N	71.4333		O
	Taschkent			Usbekistan			41.266667	N	69.216667	O
	Asgabat				Turkmenistan		37.960077	N	58.326063	O
	Riad						Saudi-Arabien		24.633333	N	46.716667	O
	Beirut					Libanon				33.8886289	N	35.4954794	O
	Wladiwostock		Russland				43.119809	N	131.886924	O 
	Los Angeles			USA						34.052234	N	-118.243685	W
	Tunis					Tunesien				33.886917	N	9.537499		O
	Bamako				Mali						12.65			N	-8					W 
	Ouagadougou		Burkina Faso		12.35			N	-1.516667		W
	Dakar					Senegal				14.7209030	N	-17.4395030	W
 **************************************************************************************************************
	*  This HTML page shows the path of the solar eclipse graphically on the
 	*  World map on a UTM (Universal Transversal Mercator Projection) grid. 
 	*  Because of the globe, the countries are distorted, but correspond to the
 	*  original surface cordinates.
 	*  The presentation takes place on a canvas= canvas and is done in transparent colors,
 	*  depending on how the sun is covered by the moon.
 	*  - Yellow		 =    1 – 32%
 	*  - Green = 33 -  65%
 	* -  Purple =  66 – 89%
 	*  - Blue		 = 90 – 100% and more ...
 	*  The overall transparency is 70% or opacity of 30%.
 	*
 	*  Calculation shall be carried out in step steps to be specified in the main programme and shall cover
 	*  the entire surface of the earth.
 	*
 	*  For 100% accuracy cannot be guaranteed.
 ************************************************************************************************************** -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

	<head>

		<title>[Pfad der Sonne auf der Erdoberfläche]</title>
		
		<style>
		
			/* ******************************
			 * ID des Body Tag Schriftfarbe
			 * und Hintergrundfarbe.
			 *******************************/
			#b {
				background-color: #293133;
				position: absolute;
				color: #eadebd;
				border: 0px solid red;
				padding: 0px;
				margin: 0px;
				z-index: 0;
			}
			
			/* ******************************
			 * ID des Body Tag Schriftfarbe
			 * und Hintergrundfarbe.
			 *******************************/
			#copyrights {
				background-color: #293133;
				border: 0px solid red;
				padding: 0px;
				margin: 0px;
				width: 100%;
			}
			
			/* ******************************
			 * ID der Links
			 * und Schriftfarbe.
			 *******************************/
			a {
				color: #eadebd;
			}
			
			/* ******************************
			 * ID der Tabelle.
			 *******************************/
			#t {
				width: 1920px;
				padding: 0px;
				margin: 0px;
				border: 0px;
			}
			
			/* ******************************
			 * ID den Textausgabe des
			 * Längengrades
			 *******************************/
			#long {
				background-color: #4682B4;
				color: white;
			}
			
			/* ******************************
			 * ID den Textausgabe des
			 * Breitengrades
			 *******************************/
			#lat {
				background-color: #4682B4;
				color: white;
			}
			
			/* ******************************
			 * ID den Textausgabe des
			 * X-Wert des Längengrades
			 *******************************/
			#x {
				background-color: #4682B4;
				color: white;
			}
			
			/* ******************************
			 * ID den Textausgabe des
			 * Y-Wert des Breitengrades
			 *******************************/
			#y {
				background-color: #4682B4;
				color: white;
			}
			
			/* ******************************
			 * ID den Textausgabe der
			 * Magnitude
			 *******************************/
			#magnitude {
				background-color: #4682B4;
				color: white;
			}
			
			/* ******************************
			 * ID der Überschrift
			 *******************************/
			#headline {
				font-size: 20px;
				border: 0px solid red;
				padding: 0px;
				margin: 0px;
			}
			
			/* ******************************
			 * ID des Canvas der Grafik der
			 * Weltkarte
			 *******************************/
			#frameworldcard {
				position: absolute;
				z-index:	0;
			}

			
			/* ******************************
			 * ID der 
			 * Zeichenkarte
			 *******************************/
			#framedrawcard {
				position: absolute;
				z-index:	1;
			}

			/* ******************************
			 * ID der 
			 * gelben Bedeckung 1-32%
			 *******************************/
			#magyellow {
				width:	100.0%;
				background-color: yellow;
				height:	20px;
				padding: 0px;
				margin: 0px;
				vertical-align: middle;
				opacity: 0.2;
			}
			
			/* ******************************
			 * HTML Div-Tag.
			 * Hüllt die Farbbeispiele 
			 * yellow usw. ein
			 *******************************/
			#progressbar {
				width:	50%;
				background-color: white;
				height:	20px;
				padding: 0px;
				margin: 0px;
				border-color: lightgrey;
				border-width: 1px;
				border-style: solid;
			}
			
			/* ******************************
			 * ID der 
			 * grünen Bedeckung 33-65%
			 *******************************/
			#maggreen {
				width:	100.0%;
				background-color: green;
				height:	20px;
				padding: 0px;
				margin: 0px;
				vertical-align: middle;
				opacity: 0.2;
			}
			
			/* ******************************
			 * ID der 
			 * violetten Bedeckung 66-89%
			 *******************************/
			#magviolet {
				width:	100.0%;
				background-color: violet;
				height:	20px;
				padding: 0px;
				margin: 0px;
				vertical-align: middle;
				opacity: 0.2;
			}
			
			/* ******************************
			 * ID der 
			 * blauen Bedeckung 90-89%
			 *******************************/
			#magblue {
				width:	100.0%;
				background-color: blue;
				height:	20px;
				padding: 0px;
				margin: 0px;
				vertical-align: middle;
				opacity: 0.2;
			}
			
			/* ******************************
			 * ID der 
			 * schwarzen Bedeckung 
			 * >= 100%
			 *******************************/
			#magblack {
				width:	100.0%;
				background-color: black;
				height:	20px;
				padding: 0px;
				margin: 0px;
				vertical-align: middle;
				opacity: 0.5;
			}
			
		</style>
		<!-- Muss demarkiert werden, wenn jQuery verwendet werden soll -->
		<!-- Must be demarcated if jQuery is to be used -->
		<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
		<script>
			// Mit der Ausführung warten bis DOM geladen ist.
			// Wait until DOM is loaded with execution.
			document.addEventListener("DOMContentLoaded", function(event) {
			
					// Funktion zum Einfügen der einzelnen Javascript Dateien.
					// Function to insert the individual Javascript files.
					function include(file) { 
					  var script  = document.createElement('script'); 
					  script.src  = file; 
					  script.type = 'text/javascript'; 
					  script.defer = true; 
					  document.getElementsByTagName('head').item(0).appendChild(script); 
					}
					
					//  ************************** Für Lokale Installation *******************************
					
					// Variablendefinitionen und Deklarationen ...
					// definitions of variables and declarations ...
					include('../../../Bibliotheken/Utilities.js');
					
					// Positionen der Städte auf der Weltkarte und die Anzeige ...
					// Locations of cities on the world map and display ...
					include('../../../Bibliotheken/canvasBitmaps.js');

					
					/*  ************************** Für Online Installation *******************************
					
					// Variablendefinitionen und Deklarationen ...
					// definitions of variables and declarations ...
					include('../../Bibliotheken/Utilities.js');
					
					// Positionen der Städte auf der Weltkarte und die Anzeige ...
					// Locations of cities on the world map and display ...
					include('../../Bibliotheken/canvasBitmaps.js');
					*/
				// Alles geladen inklusive Bilder.
				// Funktioniert nicht alleine: DOM muss vorher geleden sein und danach erst
				// der Windows Event Load.
				// All loaded including pictures.
 				// Doesn’t work alone:  DOM must be geleden beforehand and only afterwards
 				// the Windows Event Load.
				window.addEventListener("load", function(){
					// Objekt der Ausgabe für den ersten Kontakt des Mondes mit der Sonne als
					// dezimaler Zeitwert in der Weltzeit (Universal Time = UT)
					// Object of the output for the first contact of the Moon with the Sun as
 					// Decimal Time Value in World Time (Universal Time = UT)
					var objUTFirstContact = document.getElementById("utfirstcontact");
					// Objekt der Ausgabe für den maximalen Kontakt des Mondes mit der Sonne, also
					//	genau in der Mitte	als dezimaler Zeitwert in der Weltzeit (Universal Time = UT)
					//  Output object for the maximum contact of the Moon with the Sun, i.e.
 					//	exactly in the middle as a decimal time value in world time (Universal Time = UT)
					var objUTMaxContact = document.getElementById("utmaxcontact");
					// Objekt der Ausgabe für den letzten Kontakt des Mondes mit der Sonne, also
					// genau am Ende	als dezimaler Zeitwert in der Weltzeit (Universal Time = UT)
					//  Output object for the last contact of the Moon with the Sun, i.e.
 					//  exactly at the end as a decimal time value in world time (Universal Time = UT)
					var objUTLastContact = document.getElementById("utlastcontact");
					// Objekt der Ausgabe für die Bedeckung an dem Berechnungsort in Länge- und Breite
					// Object of the output for coverage at the place of calculation in length and width
					var objMagnitude = document.getElementById("magnitude");
					// Objekt der Ausgabe für den Längengrad am Berechnungsort
					// Object of the output for the longitude at the place of calculation
					var objLongitude = document.getElementById("long");
					// Objekt der Ausgabe für den Breitengrad am Berechnungsort
					// Object of the output for the latitude at the place of calculation
					var objLatitude = document.getElementById("lat");
					// Objekt der Ausgabe für die Zeichenkoordinate X auf der Weltkarte
					// Object of the output for the character coordinate X on the world map
					var objX = document.getElementById("x");
					// Objekt der Ausgabe für die Zeichenkoordinate Y auf der Weltkarte
					// Object of the output for the character coordinate Y on the world map
					var objY = document.getElementById("y");
					// Objekt der Ausgabe für das Bild der Weltkarte
					// Output object for the image of the world map
					var canvasFrameWorldcard = document.getElementById("frameworldcard");
					// Objekt der Ausgabe für die Zeichenebene der berechneten Punkte über der Weltkarte
					// Output object for the drawing plane of the calculated points above the world map
					var canvasFrameDrawcard = document.getElementById("framedrawcard");
					// Objekt der Ausgabe  für das Datum der Finsternis und dem Neumond
					// Object of the output   for the date of darkness and the new moon
					var objNewMoonDate = document.getElementById("newmoondate");
					// Objekt Ausgabe der Zeitzone, umgerechnet in dezimale Zeit am Berechnungsort, also
					// nicht nur alle 15 Längengrade
					// Object of Output of the time zone, converted into a decimal time at the place of calculation, i.e.
 					// not only all 15 longitude degrees
					var objTZ = document.getElementById("tz");
					// Objekte für die Berechnung des Offsets der Tabelle am Anfang der Seite, für die
					// Ausgabe der empfangenen Daten vom Hauptprogramm
					// Objects for calculating the offset of the table at the top of the page, for which
					// Output of received data from the main program
					var objT = document.getElementById("t");
					var objHeadline = document.getElementById("headline");
					var objCopyrights = document.getElementById("copyrights");
					var objEmpty = document.getElementById("empty");	
					// Höhenwert der Elemente der vorher deklarierten Objekte 
					// Height value of the elements of the previously declared objects
					var offsetCities = 0.0;			
					// Objekt des Canvas für die Ausgabe der Weltkarte
					// Object of the canvas for the output of the world map
					var ctxCard = null;
					// Objekt des Canvas über der Weltkarte, für die Ausgabe der berechneten Werte
					// und Zeichenrechtecke
					// Object of the canvas above the world map, for output of the calculated values
 					// and character-rectangles
					var ctxCard1 = null;
					// Variable die die Anzahl der Grad pro Pixel (5.138...), auf der Weltkarte, im Längengrad angibt.
					// Dabei wird die halbe Abbildungsbreite der Karte zugrunde gelegt
					// Variable  which indicates the number of degrees per pixel, on the world map, in longitude.
 					//  This is based on half the width of the map
					var degreesPerPixelLong = (925.0 / 180.0);
					// Variable die die Anzahl der Grad pro Pixel (5.133......), auf der Weltkarte, im Breitengrad angibt.
					// Dabei wird die halbe Abbildungshöhe der Karte zugrunde gelegt
					// Variable  which indicates the number of degrees per pixel, on the world map, in latitude.
 					// Half the image height of the map is used
					var degreesPerPixelLat = (462.0 / 90.0) ;
					// Die am Meisten verwendete Transparenz für die Zeichenrechtecke
					// The most used transparency for the character-rectangles
					var OPAC = 0.2;
					// Die Breite der Rechtecke in X-Richtung als Pixel
					// The width of the rectangles in the X-direction as pixel
					var widthPixelX = 0.0;
					// Die Breite der Rechtecke in Y-Richtung als Pixel
					// The width of the rectangles in the Y-direction as pixel
					var widthPixelY = 0.0;
					// Die Höhe der Rechtecke in Y-Richtung als Pixel
					// The height of the rectangles in Y-direction as pixels
					var heightPixelY = 0.0;
					// Der Ursprung (0-Punkt) von 0-Meridian und Äquator in Pixel
					// in X-Richtung
					// The origin (0-point) of 0-Meridian and equator in pixels
 					// in the X-direction
					var lambda0 = 945;
					// Der Ursprung (0-Punkt) von 0-Meridian und Äquator in Pixel
					// in Y-Richtung
					// The origin (0-point) of 0-Meridian and equator in pixels
 					// in the y-direction
					var beta0 = 517;
					// Die Zeichenposition X der aktuellen Berechnung an einem Ort in Länge
					// und Breite
					//  The character position x of the current calculation at a place in length
 					// and width
					var posX = 0.0;
					// Die Vorgängerversion von posX.
					// The previous version of posX.
					var posXSave = 0.0;
					// Die Zeichenposition Y der aktuellen Berechnung an einem Ort in Länge
					// und Breite
					// The character position y of the current calculation at a place in length
 					// and width
					var posY = 0.0;
					// Die Vorgängerversion von posY.
					// The previous version of posY.
					var posYSave = 0.0;
					// Berechnungs Increment für den Breitengrad
					// Calculation increment for latitude
					var stepLat = 0.0;
					// Berechnungs Increment für den Längengrad
					// Calculation increment for longitude
					var stepLong = 0.0;
					// Der Längengard als dezimaler Wert
					//  The longitude degree as a decimal value
					var lo = 0.0;
					// Der Breitengrad als dezimaler Wert
					//  The latitude degree as a decimal value
					var la = 0.0;
					// Die Bedeckung/Magnitude der Bedeckung als Wert 0 - 1 = 0 - 100%
					//  The coverage/magnitude of the coverage as a value 0 – 1 = 0 – 100%
					var mg = 0.0;
					// Zählvariable für den Empfang der Daten vom Hauptprogramm Längengrad,
					// Breitengrad und Bedeckung
					// Counting variable  for receiving data from the main program longitude,
 					// Latitude and coverage
					var count = 0;
					// Zählvariable für den Empfang des Berechnungsdatums
					// Counting variable for the receipt of the calculation date
					var countDate = 0;
					var newMoonDay = 0;			// Tag der Finsternis/Neumond
																// Day of Darkness /New moon
					var newMoonMonth = 0;		// Monat der Finsternis/Neumond
																// Month of Darkness /New moon
					var newMoonYear = 0;			// Jahr der Finsternis/Neumond
																// Year of Darkness /New moon
					var sunRiseTime = 0.0;		// Lokale Zeit des Sonnenaufgangs
																// Local time sun rise
					var sunSetTime = 0.0;			// Lokale Zeit des Sonnenuntergangs
																// Local time sun set
					var sunRiseState = "";			// Sonnenaufrgangsstatus
																// sunrise status
					var sunSetState = "";			// Sonnenuntergangsstatus
																// sunset status
					var moonRiseTime = 0.0;		// Lokale Zeit des Mondaufgangs
																// Local time moon rise
					var moonSetTime = 0.0;		// Lokale Zeit Monduntergang
																// Local time moon set
					var moonRiseState = "";		// Mondaufgangsstatus
																// Moonrise status
					var moonSetState = "";			// Monduntergangsstatus
																// Moonset status
					var lctEclipseStart = 0.0;		// Lokale Zeit des Finsternisstarts
																//  Local Time of the start of Darkness
					var lctEclipseEnd = 0.0;		// Lokale Zeit des Finsternisendes
																//  Local Time of the End of Darkness
					// Start, Differnz- und Stopzeit für die Verarbeitung als Date Objekt
					// Start, difference and stop time for processing as a date object
					var startProgressTime = 0.0;
					var stopProgressTime = 0.0;
					var diffProgressTime = 0.0;
					var DELAY = 0.0;					// Wartezeit vor Aufruf der Funktionen
																// Waiting time before calling the functions
					var sendData = false;			// Zeigt an, das Grafikfenster Daten haben möchte
																// true = Sende mir Daten vom Background Worker
																// Shows that the graphic window wants to have data
 																// true =  Send me data from the background worker
					var splitData = new Array();	// Array das die Daten getrennt durch die "=" Gleich
																// aufnimmt
																// Array  that the data is separated by the “=”  Same
 																//  takes up
					var workData = new Array();	// Array das die Daten getrennt durch das "~" Tilde
																// aufnimmt
																// Array  that the data is separated by the “~”  Tilde
 																//  takes up
					// Erstellt ein neues Objekt für ein Bild mit Pfad, Breite und Höhe ...
					// Created  a new object for an image with path, width and height ...
					var pic = new Image();
					pic.src = "./World_map_nations-UTM_1920x1002.png";
					pic.width = 1920;
					pic.height = 1002;
					// Erstelle zuerst die Weltkarte und den Canvas zur Darstellung der farbigen
					// Finsternisbereiche ...
					// First create the world map and the canvas to display the colored
 					// Darkness areas ...
					createWorldCard();
					// Erstellt die Weltkarte und die Zeichenfläche für die farbigen Finsternisbereiche.
					// Es handelt sich um zwei 2-Dimensionale Contexte, wobei die Zeichenfläche über der
					// Weltkarte liegt. Die Weltkarte besitzt keine Transparenz und die Zeichenfläche global
					// 30% Deckkraft.
					//
					//  Creates the world map and the drawing area for the colored eclipse areas.
 					//  These are two 2-dimensional contexts, where the drawing area above the
 					// World map is located.  The world map is not transparent and the drawing area is global
 					//  30% opacity.
					function createWorldCard(){
						// Erstellen der Weltkarte mit der globalen Transparenz
						// von 100% ...
						// Create the worldcard with the global transparency
 						// of 100%  ...
						if (canvasFrameWorldcard.getContext){
							ctxCard = canvasFrameWorldcard.getContext('2d');
							try{
								ctxCard.clearRect(0, 0, ctxCard.width, ctxCard.height);
								pic.onload = function(){
									ctxCard.drawImage(pic, 0, 0);
									ctxCard.globalAlpha = 1.0;
								};
							}catch(e){
								alert (e);
							}
						}else{
							alert("Weltkarte kann nicht erstellt werden!");
						}
						// Erstellen des Canvas als Zeichenfläche mit der globalen Transparenz
						// von 30% ...
						// Create the canvas as a drawing area with the global transparency
 						// of 30%  ...
						if (canvasFrameDrawcard.getContext){
							ctxCard1 = canvasFrameDrawcard.getContext('2d');
							try{
								ctxCard1.clearRect(0, 0, ctxCard.width, ctxCard.height);
								ctxCard1.globalAlpha = 0.3;
							}catch(e){
								alert (e);
							}
						}else{
							alert("Zeichenfläche kann nicht erstellt werden!");
						}
						
					}// End of createWorldCard()
					// Berechnung der Höhe, der Tabelle, am Seitenanfang 
					// Calculation of the height, table, at the top of the page
					offsetCities = objT.clientHeight + objEmpty.clientHeight + objHeadline.clientHeight + objCopyrights.clientHeight - 2.812;
					// Städtemarkierungen ausgeben
					// Display city tags
					loadCities(lambda0, beta0, offsetCities);

					/* ******************************************************************
					 * Eventhandler für das Schliessen des Browserfensters, kurz
					 * bevor es geschlossen wird.
					 * Die Standardaktion = Schliesen des Fensters wird verhindert. Dazu
					 * muss aber mindestens eine Aktion mit dem Fenster passiet sein. Z. B.
					 * Klicken in den Body.
					 *
					 * Er gilt für mehrere Browsertypen. Getestet mit IE 11, Edge, Chrome
					 * Opera und Firefox.
					 * 
					 *  Event handler for closing the browser window, short
 					 *  before it closes.
 					 *  The standard action =  It prevents the window from being closed.  For this
 					 *  but there must be at least one action with the window passiet.  E.g.
 					 *  Click into the body.
 					 *
 					 *  It applies to several types of browsers.  Tested with IE 11, Edge, Chrome
 					 *  Opera and Firefox.
 					 *
					 ****************************************************************** */
					window.addEventListener("beforeunload",  function (event){
							// Falls im event nichts steht, neuen Wert erstellen ...
							//  If event is empty, create new value ...
							if (!event) event = window.event;
							// ... ist die Funktion vorhanden? ... dann führe sie aus ...
							// ... is the function present?  ... then perform them ...
							if (event.preventDefault()) {
								// Cancel the event
								// If you prevent default behavior in Mozilla Firefox prompt will always be shown
								event.stopPropagation().preventDefault(); 
							// ... ansonsten Returnwert setzen und Standardaktion zulassen ...
							//  ... otherwise set return value and allow standard action ...
							}else{
								// Chrome requires returnValue to be set
								event.returnValue = false;
								return (event.returnValue);
							}

					});

					// Erstellt einen neuen Kommunikationskanal über den die berechneten
					// Daten vom Background Worker an dieses Fenster gesendet werden.
					// Created  a new communication channel through which the calculated
 					// Data from the Background Worker can be sent to this window.
					//
					var channelExtern = new BroadcastChannel("comExtern");

					// Event Handler für die vom Background Worker gesendeten Daten.
					//  Event handler for the data sent by the background worker.
					//
					channelExtern.onmessage = function (event){
						// Ermittelt die Anfangszeit der Verarbeitung in Millisekunden für das Julianische Datum
						startProgressTime = Date.now();
						// Empfängt vom Hauptprogramm die Daten und splitet die key=value Wertepaare,
						// die durch eine "~" getrennt sind auf speichert sie im Array workData ...
						//  Receives the data from the main program and splits the key = value pairs,
						//  which are separated by a “~” on stores them in the array workData ...
						workData = event.data.split("~");
						// ... danach durchlaufe das Array workData mit den key=value Paaren ...
						// ... then run through the array workData with the key=value pairs ...
						for(idx in workData){
							// ... und splitte diese anhand des Trenners "=" auf und lege sie im Array
							// splitData ab. Im Index 0 = key und Index 1 = Data ...
							// ...  and split them using the separator “=” and put them in the array
							// splitData ab.  In index 0 = key and index  1 = Data ...
							splitData = workData[idx].split("=");
							// ... Längengrad vom Programm empfangen, im Textfeld speichern und Zähler erhöhen ...
							//  ... Receive longitude from the background worker, save in the text field and increase counter ...
							if (splitData[0] == "longitude"){
								objLongitude.value = Number(splitData[1]);
								lo = Number(splitData[1]);
								objTZ.value = Number(splitData[1]) / 15.0;
								count++;
							// ... Breitengrad vom Background Worker empfangen, im Textfeld speichern und Zähler erhöhen ...
							//  ... Receive latitude from the background worker, save in the text field and increase counter ...
							}else if (splitData[0] == "latitude"){
								objLatitude.value = Number(splitData[1]);
								la = Number(splitData[1]);
								count++;
							// ... Magnitude vom Background Worker empfangen, im Textfeld speichern und Zähler erhöhen ...
							//  ... Receive magnitude from the background worker, save in the text field and increase counter ...
							}else if (splitData[0] == "magnitude"){
								objMagnitude.value = Number(splitData[1]);
								mg = Number(splitData[1]);
								count++;
							// ... Zeit UT Erster Kontakt vom Programm empfangen, im Textfeld speichern und Zähler erhöhen ...
							//  ... time  UT first contact Receive from the background worker, save in the text field and increase counter ...
							}else if (splitData[0] == "utfirstcontact"){
								objUTFirstContact.value = splitData[1];
							// ... Zeit UT Mittlerer Kontakt vom Background Worker empfangen, im Textfeld speichern und Zähler erhöhen ...
							//  ... time  UT middle contact Receive from the background worker, save in the text field and increase counter ...
							}else if (splitData[0] == "utmaxcontact"){
								objUTMaxContact.value = splitData[1];
							// ... Zeit UT Letzter Kontakt vom Background Worker empfangen, im Textfeld speichern und Zähler erhöhen ...
							//  ... time  UT last contact Receive from the background worker, save in the text field and increase counter ...
							}else if (splitData[0] == "utlastcontact"){
								objUTLastContact.value = splitData[1];
								count++;
							// ... Schrittweite für den Längengrad vom Hauptprogramm empfangen, dient der Darstellung ...
							// Step width for the longitude of the main program  received, serves the representation ...
							}else if (splitData[0] == "steplong"){
								stepLong = splitData[1];
							// Schrittweite für den Breitengrad vom Programm empfangen, dient der Darstellung ...
							// Step width for the latitude of the program  received, serves the representation ...
							}else if (splitData[0] == "steplat"){
								stepLat = splitData[1];
							// Empfang des Finsternis Tag / Neumond Tag ...
							// Receiving the Darkness Day  / new moon day ...
							}else if(splitData[0] == "newmoonday"){
								newMoonDay = splitData[1];
								countDate++;
							// Empfang des Finsternis Monats / Neumond Monats ...
							// Receiving the Darkness Month  / new moon month ...
							}else if(splitData[0] == "newmoonmonth"){
								newMoonMonth = splitData[1];
								countDate++;
							// Empfang des Finsternis Jahres / Neumond Jahr ...
							// Receiving the Darkness Year  / new moon year ...
							}else if(splitData[0] == "newmoonyear"){
								newMoonYear = splitData[1];
								countDate++;
							}else if(splitData[0] == "risetime"){
								sunRiseTime = splitData[1];
							// Empfang des Untergangszeit Sonne ...
							// Receiving the sunset time ...
							}else if(splitData[0] == "settime"){
								sunSetTime = splitData[1];
							// Empfang des Aufgangsstatus Sonne ...
							// Receiving the sunrise status ...
							}else if(splitData[0] == "risestate"){
								sunRiseState = splitData[1];
							// Empfang des Untergangsstatus Sonne ...
							// Receiving the sunset status ...
							}else if(splitData[0] == "setstate"){
								sunSetState = splitData[1];
							// Vom Hauptprogramm das Startkommando kommt, dann den
							// Canvas in Bildgröße, für das Zeichnen löschen ...
							//  From the main program comes the start command, then the
 							// Canvas in image size, delete for drawing ...
							}else if(splitData[0] == "start"){
								ctxCard1.clearRect(0,0, pic.width, pic.height);
							// Mondaufgang Uhrzeit als dezimaler Wert ...
							//  Moonrise Time as decimal value ...
							}else if(splitData[0] == "moonrise"){
								moonRiseTime = splitData[1] ;
							// Mondaufgang Status - OK, Nie Sichtbar, Immer Sichtbar ...
							// Moonrise Status - OK, Never Visible, Always Visible. . .
							}else if(splitData[0] == "moonrisestate"){
								moonRiseState = splitData[1] ;
							// Monduntergang Uhrzeit als dezimaler Wert ...
							// Moonset Time as decimal value ...
							}else if(splitData[0] == "moonset"){
								moonSetTime = splitData[1] ;
							// Monduntergang Status - OK, Nie Sichtbar, Immer Sichtbar ...
							// Moonset Status - OK, Never Visible, Always Visible. . .
							}else if(splitData[0] == "moonsetstate"){
								moonSetState = splitData[1] ;
							}
							// Wenn alle 3 Daten zur Darstellung, des Finsternisdatums
							// empfangen wurden dann in das Textfeld eintragen ...
							//  If all 3 dates to represent the date of eclipse
 							//  were received then enter in the text field ...
							if (countDate == 3){
								countDate = 0;
								objNewMoonDate.value = newMoonDay + "." + newMoonMonth + "." + newMoonYear;
							}
							// Wenn alle 3 Daten zur Darstellung, Längengrad, Breitengrad, Magnitude,
							// empfangen wurden dann Punkt (Rechteck) zeichnen ... und andere Berechnungen ...
							//  If all 3 data to display, longitude, latitude, magnitude,
							//  were received then point (square) draw ... and other calculations ...
							if ( count == 3){
								//console.log("ok");
								// ... zuerst Beginn und Ende der Finsternis als lokale Zeit am Berechnungsort
								// mit der UT in Greenwich und der Zeitzone ermitteln ...
								// . . . first beginning and end of darkness as local time at the place of calculation
								// determine with the UT in Greenwich and the time zone . . .
								lctEclipseStart = Number(objUTFirstContact.value) + Number(objTZ.value);
								lctEclipseEnd = Number(objUTLastContact.value) + Number(objTZ.value);
								// ... wenn der lokale Start der Finsternis größer oder gleich dem Sonnenaufgang und
								// ... kleiner dem Sonneuntergang und der lokale Start der Finsternis größer gleich 00:00 Uhr und
								// ... kleiner gleich 24:00 Uhr ist und der Status des Sonnenaufgangs "OK" ist und
								// ... die Bedeckung größer 0 % ist oder der Sonnenaufgangs Status "Immer Sichtbar" ist ...
								// ... Zeichne den Berechnungspunkt als Rechteck ...
								//
								// ... if the local start of darkness is greater than or equal to sunrise and
								//  ... smaller the sunset and the local start of the darkness greater equal to 00:00 o’clock and
								//  ... is less than 24:00 clock and the sunrise status is “OK” and
								//  ... the coverage is greater than 0% or the sunrise status is “Always Visible” ...
								//  ... Draw the calculation point as a rectangle ...
								if ( ( ( (moonRiseTime >= 0.0) && (moonRiseTime < 24.0) && (moonSetTime >= 0.0) && (moonSetTime < 24.0) ) &&
									( (sunRiseTime >= 0.0) && (sunRiseTime < 24.0) && (sunSetTime >= 0.0) && (sunSetTime < 24.0) ) &&
									( (lctEclipseStart >= 0.0) && (lctEclipseStart < 24.0) && (lctEclipseEnd >= 0.0) && (lctEclipseEnd < 24.0) ) && (mg > 0.0) )  ||
									( ( ( (sunRiseState == "Immer Sichtbar") && (sunRiseTime == -99) ) && ( (sunSetState == "Immer Sichtbar") && (sunSetTime == -99) ) ) && 
									( ( (moonRiseState == "Immer Sichtbar") && (moonRiseTime == -99) ) && ( (moonSetState == "Immer Sichtbar") && (moonSetTime == -99) ) ) 
									 && 	(mg > 0.0) )  ){
									// ... Hier wird die Zeichenposition x, y berechnet
									// ... bei Längengrad kleiner gleich 0.0 geht's nach Westen, also negative Werte ...
									// ...  Here the character position x, y is calculated
									// ...  at longitude less than 0.0 it goes west, so negative values ...
									if (lo >= -180.0 && lo < 0.0){
										// ... und dann zuerst die Breite des Zeichenrechtecks aus Grad/Pixel im Längengrad und der
										// vom Hauptprogramm übermittelten Schrittweite im Längengrad berechnen ...
										// ...  and then first the width of the rectangle of degree/pixel in longitude and
										// Calculate step width in longitude transmitted by the main program ...
										widthPixelX = lInt(degreesPerPixelLong * stepLong);
										// ... danach die Zeichenposition X auf dem UTM-Gitter der Weltkarte als Längengrad, aus
										// dem Ursprung X-Pixel des Berechnungslängengrades in Greenwich - dem absoluten Wert
										// des Längengrades * den Grad/Pixel im Längengrad ...
										//  ... then the character position X on the UTM grid of the world map as longitude,
										// the X-pixel origin of the computation length in Greenwich – the absolute value
										// of longitude  *  the degree/pixel in longitude ...
										posX = iInt(lambda0 - (Math.abs(Number(objLongitude.value)) * degreesPerPixelLong));
										// ... und in das Ausgabefeld schreiben ...
										// ... and write in the output field ...
										objX.value = posX;
									// ... und Längengrad größer 0.0 nach Osten, also positive Werte ...
									// ... and longitude greater than 0.0 to the east, so positive values ...
									}else if (lo >= 0.0 && lo < 180.0){
										// ... hier wie oben ...
										//  ... here as above  ...
										widthPixelX = iInt(degreesPerPixelLong * stepLong);
										posX = iInt(lambda0 + (Number(objLongitude.value) * degreesPerPixelLong));
										objX.value = posX;
									}
									// ... Hier wird die Zeichenposition x, y berechnet
									// ... bei Breitengrad kleiner gleich 0.0 geht's nach Süden, also negative Werte ...
									// ...  Here the character position x, y is calculated
									// ...  at latitude less than 0.0 it goes south, so negative values ...
									if (la >= -90.0 && la < 0.0){
										// ... und dann zuerst die Breite des Zeichenrechtecks aus Grad/Pixel im Breitengrad und der
										// vom Hauptprogramm übermittelten Schrittweite im Breitengrad berechnen ...
										// ...  and then first the width of the rectangle of degree/pixel in latitude and
										// Calculate step width in latitude transmitted by the main program ...
										widthPixelY = lInt(degreesPerPixelLat * stepLat);
										// ... danach die Zeichenposition Y auf dem UTM-Gitter der Weltkarte als Breitengrad, aus
										// dem Ursprung Y-Pixel des Berechnungsbreitengrades in Greenwich - dem absoluten Wert
										// des Breitengrades * den Grad/Pixel im Breitengrad ...
										// ... then the character position Y on the UTM grid of the world map as latitude, from
										// the origin of Y pixels of the computation latitude in Greenwich – the absolute value
										// of latitude  *  the degree/pixel in latitude ...
										posY = iInt(beta0 + (Math.abs(Number(objLatitude.value)) * degreesPerPixelLat) - widthPixelY);
										objY.value = posY;
									// ... und Breitengrad größer 0.0 nach Norden, also positive Werte ...
									// ... and latitude greater than 0.0 to the north, so positive values ...
									}else if  ( la >= 0.0 && la <= 90.0){
										// ... hier wie oben ...
										//  ... here as above  ...
										widthPixelY = iInt(degreesPerPixelLat * stepLat);
										posY = iInt(beta0 - (Number(objLatitude.value) * degreesPerPixelLat));
										objY.value = posY;
									}

									// ... Punkt an Stelle x, y Zeichnen und den Zeichenpfad beginnen ...
									//  ... Draw point at position x, y and start the drawing path ...
									ctxCard1.beginPath();
									// ... hier die Totale Finsternis als Schwarze Rechtecke ...
									// ... here the Total Eclipse as Black Rectangles ...
									if (mg >= 1.0){
										// ... Farbe der Rechteck Umrandung ...
										//  ... color of the rectangle border ...
										ctxCard1.strokeStyle = "black";
										// ... Farbe der Rechteck Füllung ...
										//  ... color of rectangle filling ...
										ctxCard1.fillStyle = "black";
										// ... und die Transparenz ...
										// ... and the transparency ...
										ctxCard1.globalAlpha = 0.5;
									// ... hier von 90% - 99% Bedeckung als Blaue Rechtecke ...
									// ... here from 90%  - 99% coverage as blue rectangles ...
									}else if ( mg >= 0.9  &&  mg < 1.0 ){
										// ... Farbe der Rechteck Umrandung ...
										//  ... color of the rectangle border ...
										ctxCard1.strokeStyle = "blue";
										// ... Farbe der Rechteck Füllung ...
										//  ... color of rectangle filling ...
										ctxCard1.fillStyle = "blue";
										// ... und die Transparenz ...
										// ... and the transparency ...
										ctxCard1.globalAlpha = OPAC;
									// ... hier von 66% - 89% Bedeckung als Violette Rechtecke ...
									// ... here from 66% -  89% coverage as violet rectangles ...
									}else if ( mg >= 0.66 &&   mg < 0.9){
										// ... Farbe der Rechteck Umrandung ...
										//  ... color of the rectangle border ...
										ctxCard1.strokeStyle = "violet";
										// ... Farbe der Rechteck Füllung ...
										//  ... color of rectangle filling ...
										ctxCard1.fillStyle = "violet";
										// ... und die Transparenz ...
										// ... and the transparency ...
										ctxCard1.globalAlpha = OPAC;
									// ... hier von 33% - 65% Bedeckung als Grüne Rechtecke ...
									// ... here from 33% -  65% coverage as Green Rectangles ...
									}else if ( mg >= 0.33 &&   mg < 0.66){
										// ... Farbe der Rechteck Umrandung ...
										//  ... color of the rectangle border ...
										ctxCard1.strokeStyle = "green";
										// ... Farbe der Rechteck Füllung ...
										//  ... color of rectangle filling ...
										ctxCard1.fillStyle = "green";
										// ... und die Transparenz ...
										// ... and the transparency ...
										ctxCard1.globalAlpha = OPAC;
									// ... hier von 1% - 32% Bedeckung als Gelbe Rechtecke ...
									// ... here from 1% -  32% coverage as yellow rectangles ...
									}else if ( mg > 0 &&   mg < 0.33){
										// ... Farbe der Rechteck Umrandung ...
										//  ... color of the rectangle border ...
										ctxCard1.strokeStyle = "yellow";
										// ... Farbe der Rechteck Füllung ...
										//  ... color of rectangle filling ...
										ctxCard1.fillStyle = "yellow";
										// ... und die Transparenz ...
										// ... and the transparency ...
										ctxCard1.globalAlpha = OPAC;
									}
									// ... nur wenn die aktuell berechnete Position x,y vom vorher
									// gespeicherten Wert abweicht, dann zeichne auch den Bereich.
									// Dies soll ein doppeltes Zeichnen eines Bereiches verhindern,
									// da sonst der Farbton dunkler wird und nicht mehr einheitlich ist ...
									//
									// ... only if the currently calculated position x,y from the previous
 									// stored value deviates, then also draw the area.
 									//  This is to avoid double drawing of an area,
 									//  otherwise the shade becomes darker and is no longer uniform ...
									if ( (posX != posXSave) || (posY != posYSave)){
										// ... zum Schluß zeichne die Rechtecke und fülle sie...
										//  ... at the end draw the rectangles and fill them ...
										ctxCard1.fillRect(posX, posY, widthPixelX+1, widthPixelY+1);
										ctxCard1.fill();
										// ... und Schliesse den Pfad ...
										// ... and Close the path ...
										ctxCard1.closePath();
										// ... wenn der aktuelle Wert vom gespeicherten differiert sichere den letzen Wert Y ...
										// ... if the current value differs from the stored one sure the last value Y ...
										if (posY != posYSave)
											posYSave = posY;
										// ... wenn der aktuelle Wert vom gespeicherten differiert sichere den letzen Wert X ...
										// ... if the current value differs from the stored one sure the last value X ...
										if (posX != posXSave)
											posXSave = posX;
									}

								}// End of if (  (lctEclipseStart >= sunRiseTime) ........
								// ... sowie alle Variablen auf "0" setzen ...
								count = 0;
								
							}// End of if ( count == 3)
							
							// Ermittelt die Endzeit der Verarbeitung in Millisekunden für das Julianische Datum ...
							//  Determines the processing end time in milliseconds for the Julian date ...
							stopProgressTime = Date.now();
							// Wenn die neue Verarbeitungszeit größer ist als die letzte ... 
							//  If the new processing time is greater than the last one ...
							if ( parseInt(stopProgressTime - startProgressTime) > diffProgressTime){
								// ... dann speichere die neue Verarbeitungszeit als die Höhere ...
								// ... then save the new processing time as the Higher ...
								diffProgressTime = parseInt(stopProgressTime - startProgressTime);
								// ... und ist die neue Verarbeitungszeit größer als die Wartezeit des Prozesses ...
								// ...  and the new processing time is greater than the waiting time of the process ...
								if ( diffProgressTime > DELAY)
									// ... dann passe die Wartezeit an plus eine kleine Sicherheit ...
									//  ... then adapt the waiting time to plus a small security ...
									DELAY = diffProgressTime + 10.0;
									// und sende es an das Hauptprogramm, welches den Wert
									// an den Background Worker weitergibt ...
									// and send it to the main program, which
 									//  to the background worker ...
									if (channelExtern) channelExtern.postMessage("delay=" + DELAY);
							}
							
						// Zum Schluss fordere neue Daten vom Background Worker an ...
						//  Finally, request new data from the background worker ...
						if (channelExtern) {
							// Sendet Datenanfrage an das Hauptprogramm, welches diese an den
							// Background Worker weiter gibt.
							channelExtern.postMessage("senddataoutput=true");
						}

						}// End of for ( ... )
						
					}// End of onmessage()

				}); // Ende alles geladen
					
			}); // Ende DOM geladen
			
		</script>
		
	</head>
	
<body id="b">

	<!-- Dakar -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="dakar">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagedakar" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricdakar">Dakar</div>
	</div>

	<!-- Ouagadougou -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="ouagadougou">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageouagadougou" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricouagadougou">Bamako</div>
	</div>

	<!-- Bamako -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="bamako">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebamako" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbamako">Bamako</div>
	</div>

	<!-- Tunis -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="tunis">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagetunis" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrictunis">Tunis</div>
	</div>

	<!-- Los Angeles -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="losangeles">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagelosangeles" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyriclosangeles">Los Angeles</div>
	</div>

	<!-- Wladiwostock -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="wladiwostock">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagewladiwostock" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricwladiwostock">Wladiwostock</div>
	</div>
	
	<!-- Beirut -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="beirut">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebeirut" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbeirut">Beirut</div>
	</div>

	<!-- Riad -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="riad">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageriad" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricriad">Riad</div>
	</div>

	<!-- Asgabat -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="asgabat">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageasgabat" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricasgabat">Asgabat</div>
	</div>

	<!-- Taschkent -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="taschkent">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagetaschkent" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrictaschkent">Taschkent</div>
	</div>

	<!-- Nur-Sultan -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="nursultan">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagenursultan" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricnursultan">Nur-Sultan</div>
	</div>

	<!-- Islamabad -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="islamabad">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageislamabad" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricislamabad">Islamabad</div>
	</div>
	
	<!-- Amman -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="amman">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageamman" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricamman">Amman</div>
	</div>

	<!-- Kairo -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="kairo">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagekairo" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrickairo">Kairo</div>
	</div>

	<!-- Bagdad -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="bagdad">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebagdad" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbagdad">Bagdad</div>
	</div>

	<!-- Teheran -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="teheran">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageteheran" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricteheran">Teheran</div>
	</div>

	<!-- Washington D.C. -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="washingtondc">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagewashingtondc" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricwashingtondc">Washington D.C.</div>
	</div>

	<!-- San José -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="sanrose">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagesanrose" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricsanrose">San José</div>
	</div>

	<!-- Guatemala-Stadt -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="guatemalastadt">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageguatemalastadt" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricguatemalastadt">Guatemala-Stadt</div>
	</div>

	<!-- Port Moresby -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="portmoresby">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageportmoresby" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricportmoresby">Port Moresby</div>
	</div>

	<!-- Seoul -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="seoul">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageseoul" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricseoul">Seoul</div>
	</div>
	
	<!-- Pjöngjang -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="pjoengjang">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagepjoengjang" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricpjoengjang">Pjöngjang</div>
	</div>

	<!-- Hanoi -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="hanoi">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagehanoi" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrichanoi">Hanoi</div>
	</div>

	<!-- Manila -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="manila">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagemanila" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricmanila">Manila</div>
	</div>

	<!-- Jakarta -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="jakarta">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagejakarta" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricjakarta">Jakarta</div>
	</div>

	<!-- Kuala Lumpur -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="kualalumpur">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagekualalumpur" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrickualalumpur">Kuala Lumpur</div>
	</div>

	<!-- Neu-Delhi -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="neudelhi">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageneudelhi" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricneudelhi">Neu-Delhi</div>
	</div>

	<!-- La Paz -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="lapaz">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagelapaz" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyriclapaz">La Paz</div>
	</div>

	<!-- Bogota -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="bogota">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebogota" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbogota">Bogotá</div>
	</div>
 
	<!-- Santiago de Chile -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="santiagodechile">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagesantiagodechile" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricsantiagodechile">Santiago de Chile</div>
	</div>
 
	<!-- N'Djamena -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="ndjamena">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagendjamena" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricndjamena">N'Djamena</div>
	</div>
	
	<!-- Gaborone -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="gaborone">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagegaborone" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricgaborone">Gaborone</div>
	</div>

	<!-- Kinshasa -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="kinshasa">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagekinshasa" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrickinshasa">Kinshasa</div>
	</div>
	
	<!-- Kampala -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="kampala">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagekampala" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrickampala">Kampala</div>
	</div>

	<!-- Addis Abeba -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="addisabeba">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageaddisabeba" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricaddisabeba">Addis Abeba</div>
	</div>
	
	<!-- Jaunde -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="jaunde">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagejaunde" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricjaunde">Jaunde</div>
	</div>

	<!-- Nairobi -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="nairobi">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagenairobi" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricnairobi">Nairobi</div>
	</div>
	
	<!-- Jerusalem -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="jerusalem">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagejerusalem" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricjerusalem">Jerusalem</div>
	</div>
	
	<!-- Algier -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="algier">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagealgier" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricalgier">Algier</div>
	</div>

	<!-- Rabat -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="rabat">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagerabat" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricrabat">Rabat</div>
	</div>

	<!-- Athen -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="athen">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageathen" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricathen">Athen</div>
	</div>

	<!-- Buenos Aires -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="buenosaires">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebuenosaires" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbuenosaires">Buenos Aires</div>
	</div>

	<!-- Lima -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="lima">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagelima" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyriclima">Lima</div>
	</div>

	<!-- Brasilia -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="brasilia">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebrasilia" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbrasilia">Brasilia</div>
	</div>
	
	<!-- Bukarest -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="bukarest">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebukarest" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbukarest">Bukarest</div>
	</div>

	<!-- Warschau -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="warschau">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagewarschau" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricwarschau">Warschau</div>
	</div>
	
	<!-- Mexico-City	 -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="mexico-city">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagemexico-city" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricmexico-city">Mexico-City</div>
	</div>


	<!-- Budapest	 -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="budapest">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagebudapest" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricbudapest">Budapest	</div>
	</div>

	<!-- Istanbul -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="istanbul">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageistanbul" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricistanbul">Istanbul</div>
	</div>
	
	<!-- Ulaanbaatar -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="ulaanbaatar">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageulaanbaatar" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyriculaanbaatar">Ulaanbaatar</div>
	</div>

	<!-- Peking -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="peking">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagepeking" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricpeking">Peking</div>
	</div>

	<!-- Tokio -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="tokio">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagetokio" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrictokio">Tokio</div>
	</div>

	<!-- Sydney -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="sydney">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagesydney" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricsydney">Sydney</div>
	</div>

	<!-- Helsinki -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="helsinki">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagehelsinki" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrichelsinki">Helsinki</div>
	</div>
	
	<!-- Reykjavik -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="reykjavik">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagereykjavik" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricreykjavik">Reykjavik</div>
	</div>

	<!-- Oslo -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="oslo">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageoslo" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricoslo">Oslo</div>
	</div>

	<!-- Kopenhagen -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="kopenhagen">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagekopenhagen" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyrickopenhagen">Kopenhagen</div>
	</div>

	<!-- Juneau -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="juneau">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagejuneau" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricjuneau">Juneau</div>
	</div>
	
	<!-- Moskau -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="moskau">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagemoskau" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricmoskau">Moskau</div>
	</div>

	<!-- Pretoria -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="pretoria">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagepretoria" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricpretoria">Pretoria</div>
	</div>

	<!-- Madrid -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="madrid">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagemadrid" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricmadrid">Madrid</div>
	</div>

	<!-- Paris -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="paris">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageparis" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricparis">Paris</div>
	</div>

	<!-- Nuuk -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="nuuk">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagenuuk" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricnuuk">Nuuk</div>
	</div>

	<!-- Ottawa -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="ottawa">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageottawa" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricottawa">Ottawa</div>
	</div>

	<!-- New York -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="newyork">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagenewyork" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricnewyork">New York</div>
	</div>

	<!-- Rom -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="rom">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagerom" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricrom">Rom</div>
	</div>

	<!-- Berlin -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="berlin">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imageberlin" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricberlin">Berlin</div>
	</div>
	
	<!-- München -->
	<div style="position: absolute; z-index: 9999; background-color: rgba(0,0,0, 0.0);" id="muenchen">
		<img id="dreieck" style="position:absolute; top: 0px; left: 0px; z-index: 9999; float: left; width: 5px; height: 5px" src="./img/Dreieck_5x5.png"></img>
		<img id="imagemuenchen" style="z-index: 9999; float: left; width: 7.5px; height: 10.5px" src="./img/City_15x21.png"></img>
		<div style="float:left; z-index: 9999; font-size: 6px; color: black" id="lyricmuenchen">München</div>
	</div>

	<div id="headline">
		<center><u>Darstellung des Sonnenpfads auf der Erdoberfläche</u></center><br>
	</div>
		
	<div id="copyrights">
		<center>Copyrights: 
		<a href="https://commons.wikimedia.org/wiki/File:Universal_Transverse_Mercator_zones.svg" target="_blank">cmglee, STyx, Wikialine and Goran tek-en</a> 
		<a href="https://creativecommons.org/licenses/by-sa/4.0" target="_blank">CC BY-SA 4.0 - via Wikimedia Commons</a></center>
	</div>
	
	<div id="empty">
		 
	</div>

	<!-- Ausgabetabelle der berechneten Werte -->
	<table id="t">
	
			<!-- tr>
				<td colspan="6">
					 
				</td>
			</tr -->
			
			<tr>
				
				<td style="width: 16.67%"  id="label">
					<label id="txtmagyellow"  title="Bedeckung der Sonne von 1% - 32% durch den Mond" >Gelb:</label>
				</td>
				
				<td style="width: 16.67%"  >
					<div id ="descmagyellow"><div title="Bedeckung der Sonne von 1% - 32% durch den Mond" id="magyellow"></div></div>
				</td>
				
				<td style="width: 16.67%"   id="label">
					<label id="txtmaggreen"  title="Bedeckung der Sonne von 33% - 65% durch den Mond" >Grün:</label>
				</td>
				
				<td style="width: 16.67%"  >
					<div id ="descmaggreen"><div title="Bedeckung der Sonne von 33% - 65% durch den Mond" id="maggreen"></div></div>
				</td>
				
				<td style="width: 16.67%"   id="label">
					<label id="txtmagviolet"  title="Bedeckung der Sonne von 66% - 89% durch den Mond" >Violett:</label>
				</td>
				
				<td>
					<div id ="descmagviolet"><div title="Bedeckung der Sonne von 66% - 89% durch den Mond" id="magviolet"></div></div>
				</td>
				
			</tr>
			
			<tr>
				
				<td id="label">
					<label id="txtmagblue"  title="Bedeckung der Sonne von 90% - 99% durch den Mond" >Blau:</label>
				</td>
				
				<td>
					<div id ="descmagblue"><div title="Bedeckung der Sonne von 90% - 99% durch den Mond" id="magblue"></div></div>
				</td>
			
				<td id="label">
					<label id="txtmagblack"  title="Bedeckung der Sonne von >= 100% durch den Mond" >Schwarz:</label>
				</td>
				
				<td>
					<div id ="descmagblack"><div title="Bedeckung der Sonne von >= 100% durch den Mond" id="magblack"></div></div>
				</td>
				
			</tr>
			
			<tr>
			
				<td id="label">
					<label id="descnewmoondate"  title="Datum der Berechnung und des Neumondes" >Datum:</label>
				</td>
				
				<td>
					<input title="Datum der Berechnung und des Neumondes" id="newmoondate" class="newmoondate" type="text" value="XX.YY.ZZZZ" disabled="disabled"></input>
				</td>
			
			</tr>
	
			<tr>
			
				<td id="label">
					<label id="descutfirstcontact"  title="Der Erste Kontakt Universal Time (UT)" >UT Erster Kontakt:</label>
				</td>
				
				<td>
					<input title="Der Erste Kontakt Universal Time (UT)" id="utfirstcontact" class="utfirstcontact" type="text" value="00:00:00.000" disabled="disabled"></input>
				</td>
				
				<td id="label">
					<label id="descutmaxcontact"  title="Der maximale Kontakt Universal Time (UT)" disabled="disabled">UT Mittlerer Kontakt:</label>
				</td>
				
				<td>
					<input title="Der maximale Kontakt Universal Time (UT)" id="utmaxcontact" class="utmaxcontact" type="text" value="00:00:00.000" disabled="disabled"></input>
				</td>
				
				<td id="label">
					<label id="descutlastcontact"  title="Der letzte Kontakt Universal Time (UT)" disabled="disabled">UT Letzter Kontakt:</label>
				</td>
				
				<td>
					<input title="Der letzte Kontakt Universal Time (UT)" id="utlastcontact" class="utlastcontact" type="text" value="00:00:00.000" disabled="disabled"></input>
				</td>
				
			</tr>

			<tr>
			
				<td id="label">
					<label id="descmagnitude"  title="Die Magnitude der Bedeckung" >Mag:</label>
				</td>
				
				<td>
					<input title="Die Magnitude der Bedeckung" id="magnitude" class="magnitude" type="text" value="0"  disabled="disabled"></input>
				</td>
				
				<td id="label">
					<label id="desclong"  title="Der Längengrades in Grad" disabled="disabled">Länge:</label>
				</td>
				
				<td>
					<input title="Der Längengrades in Grad" id="long" class="long" type="text" value="0.0"  disabled="disabled"></input>
				</td>
				
				<td id="label">
					<label id="desclat"  title="Der Breitengrades in Grad" disabled="disabled">Breite:</label>
				</td>
				
				<td>
					<input title="Der Breitengrades in Grad" id="lat" class="lat" type="text" value="0.0"  disabled="disabled"></input>
				</td>
				
			</tr>

			<tr>
			
				<td id="label">
					<label id="desctz"  title="Die Zeit, in der Zeitzone, umgerechnet in dezimale Stunden am Berechnungsort" disabled="disabled">Zeit<sub>[TZ]</sub>:</label>
				</td>
				
				<td>
					<input title="Die Zeit, in der Zeitzone, umgerechnet in dezimale Stunden am Berechnungsort" id="tz" class="tz" type="text" value="0.0"  disabled="disabled"></input>
				</td>
				
				<td id="label">
					<label id="descx"  title="Der X-Wert zum Längengrad" disabled="disabled">X:</label>
				</td>
				
				<td>
					<input title="Der X-Wert zum Längengrad" id="x" class="x" type="text" value="0.0"  disabled="disabled"></input>
				</td>
				
				<td id="label">
					<label id="descy"  title="Der Y-Wert zum Breitengrad" disabled="disabled">Y:</label>
				</td>
				
				<td>
					<input title="Der Y-Wert zum Breitengrad" id="y" class="y" type="text" value="0.0"  disabled="disabled"></input>
				</td>
				
			</tr>			
			
			<tr>
					<td colspan="6">
						<canvas style="z-index: 0" id="frameworldcard" width="1920" height="1002">
						</canvas>
						<canvas style="z-index: 1" id="framedrawcard" width="1920" height="1002">
						</canvas>
					</td>
			</tr>
			
	</table>

</body>

</html>