/* allgemeine Definitionen*/

a {
  text-decoration: none;
  border-bottom: 1px dotted;
}

a:link {
  color: #009900;
}
/* links und auch menueleiste*/
a:visited {
        color: #009900;
}

a:active {color: #ee0d09;}

a:hover {
  color: #FF0D09 background: #E3E3E3;
}


html {
  background-color: #fafafa;
}

body {
  padding: 6px 3px 6px 20px
  max-width: 1500px;
}

#index body {
  max-width: 1500px;
}

body {
  padding: 6px 3px 6px 20px
  color: #030303;
  background-color: #fefefe;
  font-family: Verdana, Hevetica, Arial, sans-serif;
}

h1,h2,h3 {
  margin: 30px 3px 6px 3px; /*trbl*/
  color: #009900;  /* ähnlich Schrift im Logo */
}

p {
  margin: 12px 3px 6px 5px; /*trbl*/
  max-width: 1200px;
}

li {
  margin: 3px 3px 3px 3px; /*trbl*/
  max-width: 1200px;
}

ul, ol {  /* ul AND ol */
  margin: 0px 3px 6px 5px; /*trbl*/
}

ul li { /* only li inside an ul, not in ol */
  margin: 3px 3px 3px 3px; /*trbl*/
  list-style: circle;
}

/* Empfehlung: keine allgemeinen Angaben zu Rändern bei Bildern. */

#index li { /* only li inside id="index" */
  margin: 0px 0px 0px 0px; /*trbl*/
  list-style: none;
}

#index img {
  margin: 3px 0px 3px 0px; /*trbl*/
}


td {
  vertical-align: top;
  padding: 3px;
}

/** Sonderbereiche **/

/* Kopfleiste mit Logo und den Links Home, Arrival, Impressum,  */
#kopfleiste {
  margin: 3px 0px 8px 4px; /*trbl*/
}

#kopfleiste a {
  color: #009900;  /* ähnlich Schrift im Logo */
  background-color: #e3e3e3;
  text-decoration: none;  border-bottom: none;
  display: inline-block;
}
#kopfleiste a:hover {
  background-color: #d3d3d3;
}

#bildleiste {
  margin: 0px 0px 0px 4px;
}

#textfield { /* Erläuterung zu Bild in Bildleiste */
  text-align: center;
  line-height: 150%;
  color: #222222;
  background: #FFFFCC;
  width: 500px;
  margin: 0px auto 0px auto;
}

.navbar {
  color: #222222;
  /*font-weight: bold;*/
  background: #E3E3E3;
  padding: 4px 4px 4px 6px;
  margin: 6px 3px 3px 3px;
}
.navbar a {
  text-decoration: none;  border-bottom: none;
}


/* figcaption = figure + caption */
/* main: max 640px incl. paddings  */
/* right side: max 360px incl. paddings */

.figcaption {
  /* ohne Positionierung als Absatz im Fließtext */
  padding: 4px;
  margin: 3px 3px 6px 3px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 80%;
  background: #efefef;
}

.figcaption-right {
  /* rechts ausserhalb des Fliesstextes */
  clear: right;
  float: right;
  width: 335px;
  padding: 4px;
  margin: 3px 3px 6px 4px;
  font-family: Arial, Hevetica, sans-serif;
  font-size: 80%;
  background: #efefef;
}

/* weitere figcaption-blöcke werden im HTML definiert */


/* für Tabellen zu Produktdarstellung - eva overview */
.products {
  border: 1px solid grey;
  border-collapse: collapse;
  margin: 24px 3px 12px 3px;
}

.products td, th {
  padding: 5px;
  border: 1px solid #cccccc;
}


.footer {
  font-size: 85%;
  color: grey;
  margin: 8px 4px 4px 6px;
}


/* ---- CSS-Funktionen für Bild-Pop-Up ---- */
.thumbnail{
position: relative;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #efefef;
padding: 5px;
left: -1000px;
border: 1px dashed #666666;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: -40px; /* original: 0 */
left: 60px; /*position where enlarged image should offset horizontally */

}