canvas { border: 0px solid auto; }

      /* ---------------
       Mit dem siteWrapper Container wird die Zentrierung der Seite erreicht
         Dazu wird margin auf 0 auto gesetzt
         Bitte durch Ändern des Breitenwertes width die Seitenbreite individuell anpassen:
         width: 1200px;
         Gegebenenfalls kann hier auch die Hintergrundfarbe angepasst werden
        border: 1px solid blue;
      --------------------*/
      /*
      FloraWebFarben
       #EDEDED  hellgrau: Hintergrund
       #4E53AE  blau: Texte
       #D8E6D8  hellgrün
       #007744  dunkelgrün
      */

      #siteWrapper {
        width: 1404px;
        margin: 0px auto;
        background-color: #EDEDED;
      }

      body {
        margin: 0;
        padding:0;
        width:100%;
        height:100%;
        font-size:70%;
        background-color: #EDEDED;
      }


      div#ajaxloaderDiv
       {
        z-index: 100;
        position: absolute;
        top:25px; left:100px;
        width:34px; height:34px;
       }

      /* ---------------
         Der artboxDiv Container enthält den Kasten mit der Artbeschriftung
         auf der Karte. Seine Lage muss je nach Gestaltung der Karte angepasst
         werden.
         Er ist dem SiteContent Container untergeordnet, so dass seine Lage
         bezüglich dessen 0,0 Position - links unterhalb des Header-Bildes - angegeben
         Bitte die Werte für top und left entsprechend anpassen
         Beispiel:
         top:4px;
         left:612px;
      --------------------*/

      div#artboxDiv
       {
        opacity: 0.8;
        filter:alpha(opacity=80);
        -moz-opacity: 0.8;
        z-index: 5;
        position:absolute;
        top:4px;
        left:517px;
        width:280px; height:36px;
        font-size:105%;
        border: 1px solid black;
        margin: 4px;
        padding: 0px;
        background-color: #FFFFFF;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: visible;
       }
       div#artboxDiv p {
          margin-bottom: 0px;
          margin-top: 0px;
          text-align: center;
       }



      /* ---------------
         Der infoDiv Container enthält Informationen zu der ausgewählten Art.
         wie Rasterstatistik, abgefragte Art und als gültig angenommener Namen
         der Liste.
         Umschließt die artinfohDEiv und artninfDiv - Container
         Standardgemäß ist dieser Container auf der linken Randleiste unterhalb
         der Arteingabe platziert.
         Gegebenenfalls kann seine Plazierung und Größe er durch Änderung der Werte
         top, left und width angepasst werden
         Beispiel:
         top:46px;
         left:10px;
         width:230px;
      --------------------*/

      div#infoDiv
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity: 18;
        z-index: 6;
        position:absolute;
        top:46px;
        left:10px;
        width:230px;
        font-size:90%;
        border: 0px solid black;
        margin: 0px;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: visible;
       }
       div#infoDiv h1 {
         font-weight: bold;
         font-size: 1em;
       }


        /* artinfohDiv - Container nimmt Überschriften, die nicht gescrollt werden zu den
           Artinfos auf und umschließt den Artinfo Container.
           Nimmt einen Ajex-Request zur Art auf.
           KEINE Änderungen vornehmen
        */

       div#artinfohDiv{
        margin-top:10px;
        margin-bottom: 5px;
        color: #FFFFFF;
        background-color: #007744
       }

        /* artinfoDiv - Container die Abfrageergebnisse zu einer Art aufnimmt
           KEINE Änderungen vornehmen
        */

      div#artinfoDiv
       {
        margin-top: 0px;
        overflow:auto;
        background-color: #D8E6D8;
       }
       div#artinfoDiv p {
          margin-bottom: 3px;
          margin-top: 0;
        }


      /* ---------------
         Der infoDiv2 Container enthält die Daten der Rasterabfrage
         (Strg+Linker Mausklick).
         Standardgemäß ist dieser Container auf der rechten Randleiste unterhalb
         des infoDiv2 Containers platziert.
         Je nach Größe der Karte bzw. nach Individuellem Wunsch
         muss bzw. kann seine Plazierung individuell angepasst werden

         Anpassung zur Karte:
         canvasDiv left + canvasDiv width + 10
         Bsp. 250 + 660 + 10 = 920
         width:920px;

         für eine ander Platzierung die Werte für
         top, left und width entsprechend anpassen
      --------------------*/

      div#infoDiv2
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity: 18;
        z-index: 6;
        position:absolute;
        top:455px;
        left:834px;
        width:276px;
        font-size:90%;
        border: 0px solid black;
        margin: 0px;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: visible;
       }
       div#infoDiv2 h1 {
         font-weight: bold;
         font-size: 1em;
       }


      /* ---------------
         Der infoDiv3 Container enthält die Abfrageergebnisse zu Vorkommen
         einer der aktuell ausgewählten Art in der angeklickten Rasterzelle
         (Linker Mausklick auf die Karte).
         Standardgemäß ist dieser Container auf der rechten Randleiste in oberster
         Position  platziert.
         Je nach Größe der Karte bzw. nach Individuellem Wunsch
         muss bzw. kann seine Plazierung individuell angepasst werden

         Anpassung zur Karte:
         canvasDiv left + canvasDiv width + 10
         Bsp. 250 + 660 + 10 = 920
         width:920px;

         für eine ander Platzierung die Werte für
         top, left und width entsprechend anpassen
      --------------------*/

      div#infoDiv3
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity: 18;
        z-index: 6;
        position:absolute;
        top:30px;
        left:834px;
        width:276px;
        font-size:90%;
        border: 0px solid black;
        margin: 0px;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: visible;
       }
       div#infoDiv3 h1 {
         font-weight: bold;
         font-size: 1em;
       }


      /* ---------------
         Der infoDiv4 Container enthält die Abfrageergebnisse bezüglich
         aller Sippennachweisen in einer Rasterzelle (Link 'Artenliste abfragen'
         im infoDiv2 Container)
         Standardgemäß ist dieser Container auf der rechten Randleiste unterhalb
         des infoDiv2 Containers platziert.
         Je nach Größe der Karte bzw. nach Individuellem Wunsch
         muss bzw. kann seine Plazierung individuell angepasst werden.

         Anpassung zur Karte:
         canvasDiv left + canvasDiv width + 10
         Bsp. 250 + 660 + 10 = 920
         width:920px;

         für eine ander Platzierung die Werte für
         top, left und width entsprechend anpassen
      --------------------*/

      div#infoDiv4
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity: 18;
        z-index: 6;
        position:absolute;
        top:445px;
        left:834px;
        width:276px;
        font-size:90%;
        border: 0px solid black;
        margin: 0px;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: hidden;
       }
       div#infoDiv4 h1 {
         font-weight: bold;
         font-size: 1em;
       }


      /* ---------------
         Der links Container enthält die Arteingabebox
         Seine Plazierung sollte nicht verändert werden
      --------------------*/

      div#links {
       position:absolute;
       left:5px;
       top:5px;
       z-index: 7;
       visibility: visible;
      }


      /* ---------------
         Der canvasDiv Container enthält die Karte
         Breite und Höhe des Containers MÜSSEN an die Kartengröße
         angepasst werden
         Beispiel:
         width:660px;
         height:660px
         Seine Plazierung (left, top) sollte nicht verändert werden
      --------------------*/

      div#canvasdiv {
       position:absolute;
       left:250px;
       top:5px;
       width:560px;
       height:790px
      }

      /* ---------------
         Der legendeDiv Container enthält die Legende zur Karte
         Standardgemäß ist er auf der Linken Seitenleiste links unten
         plaziert
         Entsprechend der Höhe der Karte und dem individuell gestalten Inhalt
         der Legende müssen die Werte für top und height angepasst werden.
         Soll die Legende in der Karte erscheinen, kann der Container auch über
         die Karte verschoben werden. dann muss ein entsprechend hoher z-index
         gewählt werden
      --------------------*/

      div#legendeDiv
       {
        margin-top: 0px;
        background-color: #EDEDED;
        position:absolute;
        left:10px;
        width:230px;
        font-size:90%;
        border: 0px solid black;
        margin: 0px;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        top:320px;
        height:440px;
        visibility: visible;
       }
       div#legendeDiv h1 {
         font-weight: bold;
         font-size: 1em;
       }
       div#legendeDiv p {
          margin-bottom: 6px;
          margin-top: 3px;
        }

      div#HilfeDiv {
        margin-top: 0px;
        background-color: #EDEDED;
        position:absolute;
        left:834px;
        width:230px;
        font-size:100%;
        border: 0px solid black;
        margin: 0px;
        padding: 0px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        top:5px;
        height:14px;
        visibility: visible;
      }





      /* ---------------
         Der siteContent Container umschließt die Container der linken und
         rechten Seitenleiste und der Karte. Er ist zwischen dem
         headerDiv und dem footerDiv plaziert
         Entsprechend der Höhe der Karte müssen die Werte für height
         angepasst werden.
      --------------------*/

      div#siteContent
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity18;
        z-index: 6;
        position:relative;
        top:5px;
        width:100%;
        height: 800px;
        visibility: visible;
       }


      /* ---------------
         Der footerDiv Container enthält die Fußzeilen
         Entsprechend der individuellen Gestaltung kann seine Höhe
         angepasst werden.
         Beispiel:
         height: 12px
      --------------------*/

      div#footerDiv
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity18;
        z-index: 6;
        position:relative;
        top:5px;
        left:0px;
        width:100%;
        height:12px;
        font-size:80%;
        text-align: center;
        border-top: 1px solid black;
        border-bottom: 0px solid black;
        margin-top: 2px;
        padding: 0px;
        background-color: #FFFAF0;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: visible;
       }

      div#gridtaxondatainfohDiv
        {
        background-color: #007744;
        margin-top: 0px;
        color: #FFFFFF;
        }
      div#gridtaxondatainfohDiv h1 {
        margin: 0px;
       }

      div#gridfieldinfohDiv
        {
        background-color: #007744;
        margin-top: 0px;
        color: #FFFFFF;
        }
        div#gridfieldinfohDiv h1 {
          margin: 0px;
         }


      /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
      /* keine Änderungen in den folgenden  Container vornehmen  */
      /* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

        canvas#backgroundLayer
        {
          z-index: 2;
          position:absolute;
          left:0px;
          top:0px;">
        }

        canvas#waterflowLayer
        {
          z-index: 3;
          position:absolute;
          left:0px;
          top:0px;">
        }

        canvas#distributionmap
        {
          z-index: 4;
          position:absolute;
          left:0px;
          top:0px;">
        }


      div#MouseOverGridDiv
       {
        z-index: 400;
        margin-top: 0px;
        background-color: #FFFAFA;
        position:absolute;
        top:520px;
        left:10px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
       }

      div#gridfieldinfoDiv
       {
        max-height: 180px;
        margin-top: 0px;
        visibility: visible;
        overflow:auto;
        background-color: #D8E6D8;
       }
       div#gridfieldinfoDiv p {
          margin-bottom: 4px;
          margin-top: 0;
        }
       div#gridfieldinfoDiv p.trenner {
          margin-bottom: 2px;
          margin-top: 0;
        }

      div#gridlistinfoDiv
       {
        max-height: 360px;
        margin-top: 0px;
        visibility: visible;
        overflow:auto;
        background-color: #FFFAFA;
       }
       div#gridlistinfoDiv p {
          margin-bottom: 1px;
          margin-top: 0;
        }

      div#gridtaxondatainfoDiv
       {
        max-height: 400px;
        margin-top: 0px;
        visibility: visible;
        overflow:auto;
        background-color: #D8E6D8;
        color: #000000;

       }
       div#gridtaxondatainfoDiv p {
          margin-bottom: 4px;
          margin-top: 0;
        }

      a.jspArrowUp {
        background: url("./images/basic_arrow_up.gif") repeat-x scroll 0 0 transparent;
      }
      a.jspArrowUp:hover {
        background-position: 0 -15px;
      }
      a.jspArrowDown {
        background: url("./images/basic_arrow_down.gif") repeat-x scroll 0 0 transparent;
      }
      a.jspArrowDown:hover {
        background-position: 0 -15px;
      }
      a.jspActiveArrowButton, a.jScrollActiveArrowButton:hover {
        background-position: 0 -30px;
      }
      .jspArrowUp.jspDisabled {
        background-image: url(./images/basic_arrow_up.gif) !important;
      }
      .jspArrowDown.jspDisabled {
        background-image: url(./images/basic_arrow_down.gif) !important;
      }
      .jspVerticalBar
      {
        width: 11px !important;
      }
      .jspVerticalBar .jspArrow
      {
        height: 11px !important;
      }



      div#debugDiv
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity18;
        z-index: 9;
        position:relative;
        top:700px; left:10px;
        width:180px; height:12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: hidden;
       }

       div#optionsDiv
       {
        opacity: 1;
        filter:alpha(opacity=100);
        -moz-opacity18;
        z-index: 9;
        position:relative;
        top:720px; left:10px;
        width:180px; height:12px;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        visibility: visible;
       }
       div#optionsDiv h1 {
         font-weight: bold;
         font-size: 1em;
       }