table, th, td {
	border: none;
	font-family: sans-serif;
	vertical-align: top;
}
#header {
	height:50px;
	background-color: #3291a8;
	vertical-align: center;
        text-align: left;
}
#footer {
	height:10%;
	background-color: #3291a8;
}
#content {
	width: 70%;
}
#menu {
}
#right {
}
		
 /* Dropdown Button */
.dropbtn {
  background-color: #3291a8;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #1d353b;} 


/* Grundlegende Styles für den Menübereich */
#menu {
  /* Hier können Sie allgemeine Styles für den Menücontainer festlegen */
}

#menu b {
  display: block; /* Macht die Überschriften zu Blockelementen */
  margin-bottom: 5px; /* Etwas Abstand nach den Überschriften */
  font-weight: bold;
}

/* Styles für die Haupt-UL */
#menu > ul {
  list-style: none; /* Entfernt die Aufzählungszeichen der obersten Ebene */
  padding: 0;
  margin: 0;
}

/* Styles für die LI-Elemente der ersten Ebene */
#menu > ul > li {
  position: relative; /* Für die Positionierung der direkten Untermenüs */
}

/* Styles für die Links der ersten Ebene */
#menu > ul > li > a.side {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  background-color: #f9f9f9;
  border-bottom: 1px solid #eee;
}

#menu > ul > li > a.side:hover {
  background-color: #ddd;
}

/* Styles für die Untermenü-ULs (standardmäßig ausgeblendet) */
#menu ul ul {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 0; /* Wird durch JavaScript oder CSS beim Hover angepasst */
  left: 100%; /* Standardmäßig rechts neben dem übergeordneten Element */
  background-color: #f1f1f1;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 10; /* Stellt sicher, dass es über anderen Inhalten liegt */
}

/* Styles für die LI-Elemente in den Untermenüs */
#menu ul ul li {
  width: 180px; /* Breite der Untermenüpunkte */
}

/* Styles für die Links in den Untermenüs */
#menu ul ul li a.side {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: #333;
  background-color: #f1f1f1; /* Gleiche Hintergrundfarbe wie das Untermenü */
  border-bottom: 1px solid #eee;
}

#menu ul ul li a.side:hover {
  background-color: #ddd;
}

/* Ausblenden des direkten Untermenüs (UL) beim Initialen Zustand */
#menu > ul > li > ul {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
}

/* Anzeigen des direkten Untermenüs beim Überfahren des LI-Elements der ersten Ebene */
#menu > ul > li:hover > ul {
  display: block;
}

/* Styles für weiter verschachtelte Untermenüs */
#menu ul ul ul {
  top: 0;
  left: 100%;
}

/* Anzeigen von weiter verschachtelten Untermenüs */
#menu ul li:hover > ul {
  display: block; /* Funktioniert für alle Ebenen */
}

/* Optisches Feedback für aktuelle Seite */
#menu a span.current_page {
  font-weight: bold;
  color: #007bff; /* Beispiel-Akzentfarbe */
}

/* Entfernen der unteren Border des letzten Links in jedem UL */
#menu ul li:last-child > a.side {
  border-bottom: none;
}