body {
	margin-top: 10px;
	margin-right: 20px;
	margin-bottom: 10px;
	margin-left: 20px; 

	padding: 0;

	font: 0.85em/1.6 Arial, "Lucida Grande", Lucida, Verdana, sans-serif;
	}

p {	margin: 0 0 15px;
	}

#navigation { 
float: both; 
margin-left: 25px;
width: 1000px;
margin-top: 5px;
border:1px solid #00cc00;

}
#main { 
float: both; 
margin-left: 25px;
width: 1000px;
min-height: 600px; 
margin-top: 5px;
border:1px solid #00cc00;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
}

#auflistung{ 
float: both; 
margin-left: 25px;
width: 800px;
margin-top: 5px;
border:1px solid #00cc00;

}

#box {
float: left;
     width: 29%;
     margin-top: 5px;
     padding: 20px;
	font-size:12px;
	color:#008600;
     background: #eee;
     border:1px solid #00cc00;
}

#navileft {
float: left;
     width: 230px;
     margin-left: 5px;
     margin-top: 5px;
     padding: 20px;
	font-size:12px;
	color:#008600;
     border:1px solid #00cc00;
}

#aufgaben {
float: left;
     width: 280px;
     margin-left: 5px;
     margin-top: 5px;
     padding: 20px;
	font-size:12px;
	color:#008600;
     border:1px solid #00cc00;
}

#teilaufgaben {
float: left;
     width: 330px;
     margin-left: 5px;
     margin-top: 5px;
     padding: 20px;
	font-size:12px;
	color:#008600;
     border:1px solid #00cc00;
}


#body { 
float: both; 
margin-left: 25px;
width: 1000px; 
border:1px solid #dbdbdb;
}

#eingabe { 
float: both; 
margin-left: 25px;
width: 900px; 
border: 1px solid #045FB4; 
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;

}

#roundBorder { 
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
color:#ffffff; 
border: 1px solid #045FB4; 
background-color:#045FB4; }

#roundtable {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px; 
border:1px solid #045FB4;
}




.klein { 
font-size:12px; 
color:#6E6E6E;
}

.liste { 
font-size:14.5px; 
color:#0431B4;
}



.hoehe100 {font-size:12px; height:50px;}

/* für a-elemente der Klasse 'projekt' */
a.projekt{
font-size:15px;
text-decoration:none;
}

a:hover.projekt{
font-size:16px;
text-decoration:none;
color:red;
}


/* für Tabellen zellen der Klasse 'hintergrund01' */
td.hintergrund01 {
background-image:url(/images/bg1.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
}

td.hintergrund02 {
background-image:url(/images/bg2.jpg);
background-size:100% 100%;
background-repeat:no-repeat;
}

 #Seite {
text-align: left; /* Seiteninhalt wieder links ausrichten */
margin: 0 auto ; /* standardkonforme horizontale Zentrierung */
float: left;
width: 590px;
max-width:590px; /* or whatever width you want. */
padding: 0.5em;

}


div.imageHold {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
}
div.imageHold div {
  float: left;
  width: 70px;
  height: 70px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 50px;
}
div.imageHold img {
  width: 70px;  /* wir skalieren das große bild auf die kleine größe */
  height: 70px; /* um verpixelung beim vergößern zu verhindern       */
}
div.imageHold img:hover {
  position: absolute;
  margin-left: -85px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 120px;       /* die weite beim vergrößern */
  height: 120px;      /* die höhe beim vergrößern */
}


//div.imageHold2 {
  padding: 55px 85px; /* damit der container die höhe des großen bildes annimmt */
  /* andere formatierung, z.B. zentrieren/etc: */
  /* .... */
//}
div.imageHold2 div {
  float: left;
  width: 30px;
  height: 30px;
  /* ab hier kann man die abstände
  und sonstiges der bilder eintragen */
  margin-left: 50px;
}
div.imageHold2 img {
  width: 30px;  /* wir skalieren das große bild auf die kleine größe */
  height: 30px; /* um verpixelung beim vergößern zu verhindern       */
}
div.imageHold2 img:hover {
  position: absolute;
  margin-left: -15px; /* die hälfte des größenunterschiedes der bilder */
  margin-top: -55px;  /* hier genau so */
  width: 160px;       /* die weite beim vergrößern */
  height: 160px;      /* die höhe beim vergrößern */
}



.navigation-image {
  background-image: url("/images/background.jpg");
  background-color: #FFFFFF;
  height: 60px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}


.navigation-image-high {
  background-image: url("/images/background.jpg");
  background-color: Ivory;
  height: 80px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.navigation-image-highest {
  background-image: url("/images/background.jpg");
  background-color: Ivory;
  height: 120px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.navigation-text {
  text-align: left;
  position: absolute;
  top: 2%;
  left: 5%;
  right: 10%;
  color: blue;
}



.page-image {
  background-image: url("/images/objekt.jpg");
  background-color: White;
  height: 600px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

.page-text-links {
  text-align: left;
  position: absolute;
  top: 5%;
  left: 5%;
  right: 50%;
  color: blue;
}

.page-text-rechts {
  text-align: left;
  position: absolute;
  top: 5%;
  left: 55%;
  right: 5%;
  color: GoldenRod;
}

.page-text-rechts-kontakte {
  text-align: left;
  position: absolute;
  top: 5%;
  left: 65%;
  right: 5%;
  color: GoldenRod;
}

.page-text-center {
  text-align: left;
  position: absolut;
  top: 5%;
  left: 5%;
  right: 5%;
  color: GoldenRod;
}

}
.page-text-main {
  text-align: left;
  position: absolut;
  top: 40%;
  left: 5%;
  right: 5%;
  color: GoldenRod;
}



.spalte-links {
  text-align: left;
  position: absolute;
  top: 5%;
  left: 4%;
  right: 50%;
  color: blue;
}



.spalte-rechts {
  padding-left: 5px;

  text-align: left;
  position: absolute;
  top: 5%;
  left: 55%;
  right: 5%;
  color: blue;
}


#tabelle
{
  text-align: center;
  background-color: Ivory;
  padding-left: 5px;

  font-size:14px;
  color: blue;
}


article {
  border: 1px solid transparent;
  display: grid; 
  grid-template-columns: auto auto auto; 
  grid-gap: 5px;
}

section, aside  {
/*  border-radius: 0px 1em 1em; */
/*  border:  1px solid red; */
  padding: 5px;

  align-items: center;
/*  background-color: #F7F2E0; */

}

/* ------------------------- */
/* DIE REITER ZUR NAVIGATION */

.reiter {
  display: grid;
  grid-template-columns: auto auto auto auto auto auto auto auto;
  grid-column-gap: 5px;
  grid-row-gap: 15px;
  background-color: white;
  padding: 10px;
}

.reiter > div {
  border-radius: 15px 15px 0px 0px;

  background-color: grey;
  text-align: center;
  padding: 5px 0;
  font-size: 15px;
  text-decoration: none;
  color: white;
}
.reiter > div a {
  text-decoration: none;
  color: white;
}
/* ------------TABELLE class= a ------------- */


table.a {
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; 
  border:1px solid #2980b9;
  width: 100%;
}
th {
  height: 40px;
  font-size: 16px;
  color: white;
  background-color: #045FB4;
}
th a {
  color: white;
}

td {
  height: 20px;
  font-size: 14px;
  color: blue;
  background-color: #FFFFFF;
}

/* ------------KLASSE vivinu ------------- */
table.vivinu {
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; 
  border:1px solid #BDBDBD;
  width: 100%;
}
table.vivinu th {
  height: 40px;
  font-size: 16px;
  color: white;
  background-color: #b29146;

}
th a {
  color: white;
}

td {
  height: 20px;
  font-size: 14px;
  color: #2980b9;
  background-color: #FFFFFF;
}

}
td a {
  color: #2980b9;
}



/* ------------KLASSE ergin ------------- */


table.ergin {
  border-radius: 10px 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px 10px; 
  border:1px solid #666666;
}
table.ergin th {
  height: 40px;
  font-size: 14px;
	padding: 0.3em 0.5em;

  color: white;
  background-color: #2980b9;
}
table.ergin td {
  height: 18px;
  font-size: 13px;
	padding: 0.3em 0.5em;

  color: #0431B4;
  background-color: #FFFFFF;
}
a.ergin {
  color: #0431B4;
}
a:hover.ergin {
  color: red;
  text-decoration:none
}

/*---- Klasse Eingabefelder----*/

.cssdesign{
border-bottom: 1px solid #666666;
border-top: 0px;
border-left: 1px solid #666666;
border-right: 1px solid #666666;
font-size: 15px;
color: #0000CD;
background-color: #F2F2F2;
}

.cssdesign2{
border-bottom: 0px solid #666666;
border-top: 0px;
border-left: 0px solid #666666;
border-right: 0px solid #666666;
font-size: 15px;
color: #0000CD;
background-color: #FFFFFF;
}

.cssdesign3{


  display: inline-block;
  text-align: center;
  padding: 8px 8px;
}

/* für a-elemente der Klasse 'cssdesign3' */
a.cssdesign3{
font-size:20px;
text-decoration:none;
color:#585858;
background-color: #CEF6E3;

}

a:hover.cssdesign3{
font-size:20px;
text-decoration:none;
Color:#FFFFFF;
background-color: #0404B4;

}

/*---- TOOLTIPS----*/

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 250px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: relative;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}