design-menue2.css

/* design-menue - cascading style sheet (css)  */

body {
  font-family: luxi sans, trebuchet ms, bitstream vera sans, sans-serif;
  background-color: #fdfdfd;
  color: #555753;
  margin-top: 0em;
}

/*
body {
  font-family: luxi sans, trebuchet ms, bitstream vera sans, sans-serif;
  background-color: #fdfdfd;
  color: #555753;
}
*/

pre.programmcode {
  font-family: bitstream vera sans mono, monospace;
  font-size: small;
  color: #000080;
}

hr {
  border: none;
  border-top: 1px dotted #555753;
  color: #eeeeee;
  background-color: #eeeeee;
  height: 1px;
}

/* Links */

a.extern:link, a.extern:visited, a.extern:active, a.extern:hover
{
  background: url(./images/external.png) center right no-repeat;
  padding-right: 12px;
  text-decoration: none;
  color: #ce5c00;
}

a.extern:active, a.extern:hover
{
  text-decoration: underline;
}

a:link, a:visited, a:active, a:hover
{
  text-decoration: none;
  color: #ce5c00;
}

a:active, a:hover
{
  text-decoration: underline;
}

/* Responsive */

@media screen {
    /* For mobile: */
  .legend .area {
    width: 100%;
  }
  .legend .poi {
    width: 100%;
  }
  .legend .mtblines{
    display: block;
  }
}
@media screen and (min-width: 650px) {
    /* For tablet: */
  .legend .area {
    width: 100%;
  }
  .legend .poi {
    width: 50%;
  }
  .legend .mtblines{
    display: block;
  }
}

@media screen and (min-width: 1000px) {
    /* For desktop: */
  .legend .area {
    width: 50%;
  }
  .legend .poi {
    width: 33%;
  }
  .legend .mtblines{
    display: flex;
  }
}

/* Seitenstruktur */

#title {
  color: #555753;
  width: 100%;
  float: left;
}

#cssmenu {
  width: 100%;
  float: left;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 200;
}

/*
#cssmenu {
  width: 100%;
  float: left;
}
*/

#content {
  width: 100%;
  display: inline-block;
}

/*
#content {
  width: 100%;
  float: left;
}
*/

#footer {
  width: 100%;
  float: left;
}

/* Tabellen */

table {
  /* border: 1px dotted #555753; */
  cellpadding: 0;
  cellspacing: 0;
  margin-top: 1em;
  margin-bottom: 1em;
}

table.style2 {
  border: none;
  text-align: left;
  margin-bottom: 0em;
}

th {
  border: none;
  background-color: #b0c69b;
}

td {
  border: none;
}

tr.zeilenfarbe {
  background-color: #d3d7cf;
}

/* CSS-Menue */

#cssmenu ul {
  background: #555753;
  height: 35px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Link Position Korrektur mit sticky Menü */
:target::before {
  content: "";
  display: block;
  height: 50px; /* fixed header height*/
  margin: -50px 0 0; /* negative fixed header height */
}

#cssmenu li {
  float: left;
  padding: 0px;
}

#cssmenu li a {
  background: #555753 url('./images/seperator.gif') bottom right no-repeat;
  display: block;
  font-weight: normal;
  line-height: 35px;
  margin: 0px;
  padding: 0px 20px;
  text-align: center;
  text-decoration: none;
}

#cssmenu > ul > li > a {
  color: #ffffff;
}

#cssmenu ul ul a {
  color: #ffffff;
}

#cssmenu li > a:hover,
#cssmenu ul li:hover > a {
  background: #2580a2 url('./images/hover.png') bottom center no-repeat;
  color: #FFFFFF;
  text-decoration: none;
}

#cssmenu li ul {
  background: #555753;
  display: none;
  height: auto;
  padding: 0px;
  margin: 0px;
  border: 0px;
  position: absolute;
  width: 200px;
  z-index: 200;
  /*top:1em;
  /*left:0;*/
}

#cssmenu li:hover ul {
  display: block;
}

#cssmenu li li {
  background: url('./images/sub_sep.gif') bottom left no-repeat;
  display: block;
  float: none;
  margin: 0px;
  padding: 0px;
  width: 200px;
}

#cssmenu li:hover li a {
  background: none;
}

#cssmenu li ul a {
  display: block;
  height: 35px;
  line-height:35px;
  margin: 0px;
  padding: 0px 15px 0px 15px;
  text-align: left;
}

#cssmenu li ul a:hover,
#cssmenu li ul li:hover > a {
  background: #2580a2 url('./images/hover_sub.png') center left no-repeat;
  border: 0px;
  color: #ffffff;
  text-decoration: none;
}

#cssmenu p {
  clear: left;
}

/* Legende */

.legend {
  margin-top: 1em;
  margin-bottom: 1em;
  display: block;
  width: 100%;
}
.legend .subtitle{
  padding-top: 1em;
  padding-bottom: 1em;
  clear: left;
}
.legend .area {
  min-height: 60px;
  display: flex;
  align-items: center;
  float: left;
}
.legend .lines{
  min-height: 60px;
  display: flex;
  align-items: center;
  float: left;
  width: 100%;
}
.legend .mtblines {
  min-height: 60px;
  align-items: center;
  float: left;
  width: 100%;
}
.legend .area img, .legend .lines img {
  border-width: 1px; border-color: lightgray; border-style: solid; width: 100px; height: 60px;
}
.legend .mtblines img {
  width: 431px; height: 61px; max-width: 100%; object-fit: contain;
}
.legend .poi {
  min-height: 35px;
  display: flex;
  align-items: center;
  float: left;
}
.legend .poi img {
  border-width: 1px; border-color: lightgray; border-style: solid; width: 35px; height: 35px;
}
.legend .description {
  text-align: left;
  padding-left: 4px;
}
.legend .mtblines .description {
  padding-bottom: 12px;
}
.legend:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}