summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--www/index_test2-erik.html620
1 files changed, 620 insertions, 0 deletions
diff --git a/www/index_test2-erik.html b/www/index_test2-erik.html
new file mode 100644
index 0000000..a041f81
--- /dev/null
+++ b/www/index_test2-erik.html
@@ -0,0 +1,620 @@
+<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> /-->
+<html>
+<head>
+<title>Neo – Ergonomisches Tastaturlayout</title>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+ <link rel="shortcut icon" href="./favicon.ico">
+<!-- <link rel="stylesheet" type="text/css" href="stylesheet.css"> /-->
+
+<script type="text/javascript">
+function Tastaturbildwechsel_nach (Zielebene) {
+ self.document.tastaturbild.src="./tastaturbilder/ebene" + Zielebene +".png";
+ for (var Nr = 1; Nr <= 6; Nr++) self.document.getElementById("ebenenreiter" + Nr).style.color="";
+ for (var Nr = 1; Nr <= 6; Nr++) self.document.getElementById("ebenenreiter" + Nr).style.borderColor="";
+ self.document.getElementById("ebenenreiter" + Zielebene).style.borderColor="#56b";
+ self.document.getElementById("ebenenreiter" + Zielebene).style.Color="#23b";
+ return false;
+ }
+</script>
+
+
+
+<style type="text/css">
+
+#Hauptfeld {
+ width:39em;
+ border-width:thin;
+ border-color:#444;
+ border-style:solid;
+ margin-left:12em;
+ margin-right:0em;
+ margin-top:2em;
+ padding-left:2.5em;
+ padding-right:4em;
+ padding-top:2em;
+ padding-bottom:2.4em;
+/* text-align:justify; */
+/* font-family: Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, sans-serif; */
+/* font-family: LinuxLibertine, Libertine, Linux-Libertine, sans;
+ line-height:1.35em;
+ font-size:1em;*/
+ background-color:White;
+ color:Black;
+}
+
+#Hauptfeldlink_rechtsunten {
+ position:relative; top:.8em; left:.5em;
+ text-align:right;
+ margin-bottom:0em;
+}
+
+#Navigationsleiste {
+ background-color:#F8F8FA;
+ color:WindowText;
+ position:relative;
+ width:10em;
+/* float:left; */
+ text-align:center;
+ margin:2em;
+ margin-left:0em;
+ margin-top:2em;
+ border-width:thin;
+ border-style:solid;
+ border-color:green;
+ border-top-width:0px;
+
+}
+
+#Navigationsthema {
+ border-bottom-width:1px;
+ border-bottom-style:solid;
+ border-color:black;
+ border-top-width:1px;
+ border-top-style:solid;
+ border-color:black;
+ text-align:center;
+ font-weight:bold;
+ background-color:#FAFBF8;
+ color:InfoText;
+ padding-top:.2em;
+ padding-bottom:.2em;
+}
+
+#Navigationsunterpunkte {
+ padding-top:.5em;
+ padding-bottom:.75em;
+}
+
+#Navigationseintrag {
+ display:block;
+ text-align:left;
+ padding-left:1em;
+ padding-right:1em;
+ padding-top:.25em;
+ padding-bottom:.25em;
+}
+
+#Bildcontainer_links {
+ width:10em;
+ border-width:thin;
+ border-color:#DDD;
+ border-style:solid;
+ margin-right: 1.2em;
+ margin-bottom: .8em;
+ margin-left: 0em;
+ margin-top: 1em;
+ float:left;
+ text-align:center;
+
+}
+
+
+#Bildcontainer_oben {
+ width:39em;
+ border-width:thin;
+ border-color:#DDD;
+ border-style:solid;
+ margin-left: 0em;
+ margin-bottom: 1.75em;
+ margin-right: 0em;
+ margin-top: 0em;
+/* float:left; */
+ display:block;
+ text-align:center;
+}
+
+
+#Bildcontainer_rechts {
+ width:10em;
+ border-width:thin;
+ border-color:#DDD;
+ border-style:solid;
+ margin-left: 1.2em;
+ margin-bottom: .8em;
+ margin-right: 0em;
+ margin-top: 1em;
+ float:right;
+ text-align:center;
+
+}
+
+#Bild {
+ text-align:center;
+ padding:.5em;
+ width:9em;
+}
+
+
+#Bild_oben {
+ text-align:center;
+ padding:.5em;
+ width:38em;
+}
+
+
+
+#Bildtext {
+ padding:.5em;
+ font-size:small;
+ text-align:left;
+ background-color:#EEE;
+}
+
+#Hintergrundverlauf_von {
+ background-color:#F30;
+}
+
+#Hintergrundverlauf_nach {
+ background-color:transparent;
+}
+
+a { text-decoration:none; }
+a:hover { color:HighlightText; background-color:Highlight; }
+
+h1 { margin-bottom:1em; margin-top:0em; font-size:1.5em; }
+h2 { margin-bottom:.5em; margin-top:1.5em; font-size:1.2em; /* padding-left:1em; */ }
+
+p { /* text-indent:1em;
+ text-align:justify; */
+ margin-bottom:-.5em;}
+
+/* Altbestand: */
+
+#linkbutton
+ {
+ line-height:2em;
+ text-align:left; color:#000;
+ }
+
+#linkbutton a
+ {
+ border-width:2px; border-style:solid;
+ border-color:#aaaaaa;
+ padding-top:.25em; padding-bottom:.25em;
+ background-color:#FAFAFA;
+ padding-left:1em; padding-right:1em;
+ }
+
+#linkbutton a:link { color:#000; text-decoration:none; }
+#linkbutton a:visited { color:#4a4a4a; text-decoration:none; }
+#linkbutton a:focus { color:#223; text-decoration:underline; }
+#linkbutton a:active { color:#8b2121; text-decoration:none; }
+#linkbutton a:hover { color:#020; text-decoration:none;
+ background-color:Highlight;
+ }
+
+#Gesamtzentrierung {
+ background-color: transparent;
+ text-align: left;
+ margin: 0px auto 0;
+ width: 57.5em;
+}
+/*-------------*/
+
+</style>
+
+<!--[if IE 6]>
+ <style type="text/css">
+
+#Bild_oben {
+ width:31em;
+}
+
+#Bildcontainer_oben {
+ width:32em;
+}
+#IE6-Bildweitenkorrektur {
+ width:32em;
+}
+
+
+ </style>
+<![endif]-->
+
+
+</head>
+<!-- Für Mittenpositionierung: padding: 0; margin: 0; text-align: center; ind bodystyle /-->
+<body style="background-color:#dceeee; background-image:url(./hintergrund.png); background-position: top center; background-repeat:no-repeat; padding: 0em; margin: 0em; text-align: center; ">
+
+
+<p style="position:absolute; display:block; width:100%; top:0em; left:0px; text-align:center; background-color:#F30; color:#FFF">
+ <b>Achtung: Baustelle! Mehr Informationen unten.</b>
+</p>
+
+
+
+
+<div id="Gesamtzentrierung">
+
+
+
+
+
+<!-- Logo /-->
+<!-- <div style="position:relative; top:2.25em; left:3.25em; width:522px; height:70px; overflow:hidden; float:left;"> /-->
+<div style="position:relative; top:2.25em; left:3.25em; width:54em; height:70px; overflow:hidden; ">
+ <object data="./neo_kopf_trac_522x50.svg" type="image/svg+xml" style="width:522px; height:50px; ">
+ <param name="src" value="./neo_kopf_trac_522x50.svg">
+ <img src="./neo_kopf_trac_522x50.png" alt="Neo – Ergonomisches Tastaturlayout">
+ </object>
+<!-- </div> /-->
+
+<!-- Quicklinks /-->
+
+
+
+<!-- <div style="position:relative; top:-1.65em; left:43em; width:200px; height:40px;"> /-->
+
+ <!-- Achtung: Die Links sind auch jeweils in den SVG-Dateien kodiert! /-->
+
+ <object data="./tastentier_laechelnd_quicklink_windows.svg" type="image/svg+xml" style="width:50px; height:34px; overflow:hidden; ">
+ <param name="src" value="./tastentier_laechelnd_quicklink_windows.svg">
+ <a href="https://svn.neo-layout.org/windows/autohotkey/neo20.exe">
+ <img src="./tastentier_laechelnd.png" alt="quickdownload:Neo_Windows" border="0">
+ </a>
+ </object>
+
+ <object data="./tastentier_linksblickend_quicklink_linux.svg" type="image/svg+xml" style="width:50px; height:34px; overflow:hidden; ">
+ <param name="src" value="./tastentier_linksblickend_quicklink_linux.svg">
+ <img src="./tastentier_linksblickend.png" alt="quickdownload:Neo_Linux" border="0">
+ </object>
+
+ <object data="./tastentier_grinsend_quicklink_osx.svg" type="image/svg+xml" style="width:50px; height:34px; overflow:hidden; ">
+ <param name="src" value="./tastentier_grinsend_quicklink_osx.svg">
+ <a href="https://svn.neo-layout.org/mac_osx/neo.keylayout">
+ <img src="./tastentier_grinsend.png" alt="quickdownload:Neo_OS-X" border="0">
+ </a>
+ </object>
+
+
+
+
+
+<!--
+
+ <a href="https://svn.neo-layout.org/windows/autohotkey/neo20.exe">
+ <img src="./tastentier_laechelnd.png" width="50px" height="34px" alt="quickdownload:Neo_Windows" border="0">
+ </a>
+ <a href="./neo_de.xmodmap">
+ <img src="./tastentier_linksblickend.png" width="50px" height="37px" alt="quickdownload:Neo für Linux" title="quickdownload:Neo für Linux" border="0">
+ </a>
+ <a href="http://wiki.neo-layout.org/browser/mac_osx/neo.keylayout?format=raw">
+ <img src="./tastentier_grinsend.png" width="50px" height="34px" alt="quickdownload:Neo für Mac OS-X" title="quickdownload:Neo für Mac OS-X" border="0">
+ </a>
+/-->
+
+ <a href="./neo_portable.zip">
+ <img src="./tastentier_usb.png" width="40px" height="34px" alt="quickdownload:Neo-Portable für USB-Stick" title="quickdownload:Neo-Portable für USB-Stick" border="0">
+ </a>
+ </div>
+<!-- /Quicklinks /-->
+
+<!--
+<div style="height:2em; width:1em;">
+</div>
+ /-->
+
+
+<div style="float:left; width:12em;">
+
+<div id="Navigationsleiste" >
+ <div id="Navigationsthema">Wiki</div>
+ <div id="Navigationsunterpunkte">
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki">Wiki-Hauptseite</a>
+ </div>
+ <div id="Navigationsthema">Dokumentation</div>
+ <div id="Navigationsunterpunkte">
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Einführung">Einführung</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Benutzerhandbuch">Handbuch</a>
+ </div>
+ <div id="Navigationsthema">Installation</div>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Neo%20unter%20Windows%20einrichten">Neo unter Windows</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Neo%20unter%20Linux%20einrichten">Neo unter Linux</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Neo%20auf%20dem%20Apple%20Macintosh%20einrichten">Neo unter Mac&nbsp;OS&nbsp;X</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Neo einrichten">Neo auf anderen Systemen einrichten</a>
+ <div id="Navigationsthema">Grafiken</div>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/browser/grafik/neo20-aufsteller.pdf?format=raw">Aufsteller zum Lernen</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/browser/grafik/druckvorlage-svg/neo-druckvorlage.pdf?format=raw">Druckvorlage</a>
+ <div id="Navigationsthema">Download</div>
+ <div id="Navigationsunterpunkte">
+<!-- <a id="Navigationseintrag" href="./download.html">Download</a> -->
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/browser/windows/">Windows-Treiber</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/browser/linux/">Linux-Treiber</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/browser/mac_osx/">Mac&nbsp;OS&nbsp;X-Treiber</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/Neo%20für%20unterwegs">Neo für unterwegs (portabel)</a>
+ </div>
+ <div id="Navigationsthema">Sonstiges</div>
+ <div id="Navigationsunterpunkte">
+ <a id="Navigationseintrag" href="./about.html">Impressum</a>
+ <a id="Navigationseintrag" href="http://wiki.neo-layout.org/wiki/links">Links</a>
+ </div>
+</div>
+
+<div id="Navigationsleiste" style="border-color:#AAA; opacity:.2;">
+ <div id="Navigationsthema" style="color:#AAA; border-color:#AAA;">FOSS-Links</div>
+ <div id="Navigationsunterpunkte" >
+ <a id="Navigationseintrag"
+ style="text-align:center; padding-top:.5em; padding-bottom:.5em; border-bottom-color:#EEE; border-bottom-style:solid;"
+ href="http://linuxlibertine.sf.net"><img src="./signet_linuxlibertine.png" border="0" style=" opacity:.5; width:50%;"><br>Libertine<br>Open Fonts</a>
+ <a id="Navigationseintrag"
+ style="text-align:center; padding-top:.5em; padding-bottom:.5em; border-bottom-color:#EEE; border-bottom-style:solid;"
+ href="http://dejavu.sourceforge.net"><img src="./signet_dejavu.png" border="0" style=" opacity:.5; width:50%;" ><br>DejaVu<br>Font</a>
+ </div>
+</div>
+
+
+
+</div>
+
+
+<!--------------------------------------------------/-->
+<div id="Hauptfeld">
+
+ <h1>Neo - Ergonomisches Tastaturlayout</h1>
+
+ <p>
+ <font style="color:#222">Neo ist ein neue Tastaturbelegung, die </font>extra für die Deutsche Sprache<font style="color:#222"> optimiert ist:
+ <!--. Ihre Hauptmerkmale sind: /--> </font>
+ </p>
+
+ <ul>
+ <li><font style="color:#222">Optimierungen bezüglich deutscher</font> Zweier- und Dreier-Zeichenfolgen</li>
+ <li>Programmiertasten <font style="color:#222">sind gut erreichbar</font></li>
+ <li><font style="color:#222">Neue Zeichen, wie </font>&nbsp;„ , ” , « , » , ∫ , √ , α , β , …<font style="color:#222"> sind direkt einzugeben</font></li>
+ </ul>
+
+ <a href="http://wiki.neo-layout.org/wiki/Benutzerhandbuch" id="Hauptfeldlink_rechtsunten">Warum Neo besser ist als qwertz…</a>
+
+</div>
+<!--------------------------------------------------/-->
+
+
+<div id="Hauptfeld">
+<div style="display:block; line-height:2em;" >
+ <div style="text-align:center; ">
+
+
+ <div style="min-width:650px; overflow:visible;">
+ <div id="linkbutton" style="text-align:center; ">
+ <a href="./index_ebene1.html" style="border-color:#56b; color:#23b" onclick="Tastaturbildwechsel_nach(1); return false;" id="ebenenreiter1" > Ebene1</a>
+ <a href="./index_ebene2.html" onclick="Tastaturbildwechsel_nach(2); return false;" style="" id="ebenenreiter2">Ebene2</a>
+ <a href="./index_ebene3.html" onclick="Tastaturbildwechsel_nach(3); return false;" style="" id="ebenenreiter3">Ebene3</a>
+ <a href="./index_ebene4.html" onclick="Tastaturbildwechsel_nach(4); return false;" style="" id="ebenenreiter4">Ebene4</a>
+ <a href="./index_ebene5.html" onclick="Tastaturbildwechsel_nach(5); return false;" style="" id="ebenenreiter5">Ebene5</a>
+ <a href="./index_ebene6.html" onclick="Tastaturbildwechsel_nach(6); return false;" style="" id="ebenenreiter6">Ebene6</a>
+ </div>
+ </div>
+
+ <div>
+ <img src="./tastatur_ebene1.png" name="tastaturbild" id="IE6-Bildweitenkorrektur" />
+ </div>
+
+ <div id="linkbutton" style="min-width:650px; overflow:visible; text-align:center;">
+ <a href="i" style="">Konzeptidee zur Ebene1</a> &nbsp; &nbsp;
+ <a href="" > <img src="tastatur_ebene1_shift.png" style="vertical-align:middle; border-width:0px; margin:2px; background-image:url(./hintergrund_button_hover.png);" /></a>
+
+ <a href="" > <img src="tastatur_ebene1_mod3.png" style="vertical-align:middle; border-width:0px; margin:2px; background-image:url(./hintergrund_button_hover.png);" /></a>
+ <a href="" > <img src="tastatur_ebene1_mod4.png" style="vertical-align:middle; border-width:0px; margin:2px; background-image:url(./hintergrund_button_hover.png);" /></a>
+
+ <br />
+
+ <a href="i" style="">Tastenverteilung an beliebigem Text testen (verwendet JavaScript)</a>
+ </div>
+
+
+ </div>
+</div>
+
+</div>
+
+
+<!--------------------------------------------------/-->
+<div id="Hauptfeld">
+
+ <div id="Bildcontainer_oben">
+ <img id="Bild_oben" src="./tastentierchen_baustelle_ohne_zigarette.png" />
+ <div id="Bildtext">Baustelle! Wenn was funktioniert, dann war es Glück!</div>
+ </div>
+
+
+<h1>Kurzinformation für Interessierte</h1>
+
+<p> Um an Neo zu ge&shy;langen, wird auf das SVN-Reposi&shy;tory: <b>svn co https://svn.neo-layout.org neo</b> verwiesen. Hier sind die direk&shy;ten Links zu den NEO-Treibern für die ver&shy;brei&shy;testen Be&shy;triebs&shy;sys&shy;teme (in jedem Ordner be&shy;findet sich eine Datei README.txt mit weiter&shy;gehen&shy;den In&shy;forma&shy;tionen):</p>
+
+<ul>
+ <li>Windows: <a href="http://wiki.neo-layout.org/browser/windows/">http://wiki.neo-layout.org/browser/windows/</a></li>
+ <li>Linux: <a href="http://wiki.neo-layout.org/browser/linux/">http://wiki.neo-layout.org/browser/linux/</a></li>
+ <li>Mac&nbsp;OS&nbsp;X: <a href="http://wiki.neo-layout.org/browser/mac_osx/">http://wiki.neo-layout.org/browser/mac_osx/</a></li>
+</ul>
+
+
+<p>Die <b>aktu&shy;elle Be&shy;legung</b> findet sich in der Datei
+
+<a href="http://wiki.neo-layout.org/browser/A-REFERENZ-A/neo20.txt">http://wiki.neo-layout.org/browser/A-REFERENZ-A/neo20.txt</a></p>
+
+<p>Eine (hoffentlich aktuelle) <b>Refe&shy;renz zum Aus&shy;drucken</b> und Auf&shy;stellen findet sich unter <a href="http://wiki.neo-layout.org/browser/grafik/neo20-aufsteller.pdf">http://wiki.neo-layout.org/browser/grafik/neo20-aufsteller.pdf</a>. Weiter gibt es im svn-Repo&shy;sitory Tastatur&shy;aufkleber&shy;generatoren.</p>
+
+
+<p>Auf jeden Fall wird em&shy;pfoh&shy;len, folgende <b>Schrift&shy;arten zu in&shy;stallieren</b>, damit alle mit Neo schreib&shy;baren Zeichen dar&shy;gestellt werden können:</p>
+
+<ul>
+ <li><a href="http://dejavu.sourceforge.net/wiki/index.php/Download">Deja-Vu</a></li>
+ <li><a href="http://sourceforge.net/project/showfiles.php?group_id=89513">Libertine</a></li>
+</ul>
+
+<p><b>Neo ist auf den »normalen Ebenen«</b> – will heißen: nor&shy;male Buch&shy;staben und Klam&shy;mern, etc. – <b>voll&shy;ständig be&shy;nutzbar</b>. Da die Be&shy;triebs&shy;sys&shy;teme oder Pro&shy;gramme bei weiteren Ebenen ger&shy;ne noch rum&shy;zicken, ist der Trei&shy;ber auf den anderen Ebenen noch nicht ganz fertig. Bei den Grund&shy;ebenen sol&shy;lte sich bei der Be&shy;legung nichts mehr ändern. Fehler sind hier zu finden:</p>
+
+<ul>
+ <li><a href="http://wiki.neo-layout.org/report/1">aktuelle Fehler (Active Tickets)</a></li>
+ <li><a href="http://wiki.neo-layout.org/newticket">neuen Fehler melden (New Ticket)</a></li>
+</ul>
+
+<h2>Kontakt</h2>
+
+<p>Kontakt zu den Neo-Ent&shy;wicklern kann man über die Mailing&shy;liste <b><a href="mailto:mailinglist@neo-layout.org?subject=Ich habe da mal eine Frage&body=Bitte (wenn möglich) folgende Dinge angeben:%0D- Nutzt Du Neo oder noch nicht%3F%0D- Welches Betriebsystem%3F%0D- Welchen Treiber (Xmodmap, Xkbmap, AHK, kbdneo2, usw.)%3F%0D%0D">mailinglist@neo-layout.org</a></b> bzw. über den IRC-Kanal <b>#NEO</b> bei <b>freenode.net</b> bekommen. Ver&shy;besserungs&shy;vorschläge sind im&shy;mer will&shy;kom&shy;men! Da wir sehr viele Ab&shy;hängig&shy;keiten haben, kann es aber sein, dass sie nicht un&shy;bedingt ein&shy;ge&shy;pflegt werden.</p>
+
+<p>Danke fürs Interesse!</p>
+<p>Euer Neo-Team</p>
+
+
+
+
+</div>
+<!--------------------------------------------------/-->
+
+
+
+<!--------------------------------------------------/-->
+<div id="Hauptfeld">
+ <div id="Bildcontainer_rechts" > <!-- style="margin-top:0em;" > /-->
+ <img id="Bild" src="tastentierchen_zwinkert.gif" />
+ <div id="Bildtext"> Ein Tasten&shy;tierchen als Quick&shy;download&shy;link. </div>
+ </div>
+
+ <div id="Bildcontainer_links" style="margin-top:1em;">
+ <img id="Bild" src="testbild.png" />
+ <div id="Bildtext">Neo ist zu 86% fertig</div>
+ </div>
+
+
+
+<p style="text-align:justify">
+
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+<b>Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nierung von Bildern links und rechts des Textes. </b>
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+Dies ist ein Bei&shy;spiel für die Po&shy;si&shy;tio&shy;nie&shy;rung von Bildern links und rechts des Textes.
+</p>
+
+</div>
+<!--------------------------------------------------/-->
+
+
+
+
+
+<!-- </div> rechts /-->
+
+</div>
+
+
+
+
+<!-- linker Verlauf /-->
+
+<div id="Hintergrundverlauf_nach" style="position:absolute; top:0em; left:0em; width:1em; height:100%; z-index:-4;">
+<div id="Hintergrundverlauf_von" style="opacity:.975;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.95; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.925;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.9; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.85; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.825;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.8; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.775;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.75; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.725;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.7; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.675;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.65; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.625;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.6; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.575;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.55; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.525;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.5; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.475;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.45; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.425;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.4; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.375;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.35; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.325;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.3; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.275;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.25; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.225;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.2; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.175;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.15; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.125;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.1; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.075;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.05; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.025; height:4%">&nbsp;</div>
+</div>
+
+
+
+
+<!-- rechter Verlauf /-->
+
+<div id="Hintergrundverlauf_nach" style="position:absolute; top:0em; right:0em; width:1em; height:100%; z-index:-4;">
+<div id="Hintergrundverlauf_von" style="opacity:.975;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.95; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.925;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.9; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.85; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.825;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.8; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.775;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.75; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.725;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.7; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.675;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.65; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.625;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.6; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.575;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.55; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.525;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.5; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.475;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.45; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.425;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.4; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.375;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.35; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.325;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.3; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.275;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.25; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.225;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.2; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.175;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.15; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.125;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.1; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.075;height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.05; height:2%">&nbsp;</div>
+<div id="Hintergrundverlauf_von" style="opacity:.025; height:4%">&nbsp;</div>
+</div>
+
+
+</body>
+</html>
+