/* - - - - - - - - - - - -

 simple responsive Design
 Copyright: Adrian Jost
 
- - - - - - - - - - - - */
/* relative Positionierung aller Elemente */
body{
   background-image: url("images/mgb_color_300.png");
   position: relative;
   background: #e5e5e5;
   margin:0px;
   padding: 0px;
   color: #4b3e25; /* Textfarbe -> schwarz */
   font-family: Verdana;
}

.index {
   background-image: url("images/mgb_color_300.png");
   background: #e5e5e5;
   background-position:center;
   background-attachment:fixed;
   background-size:cover;
}

/* - - - - - - - - - - - -

 GRUNDGERÜST
 
- - - - - - - - - - - - */

/* Header über die volle Breite ziehen */
.header{
   width: 100%;
   height: auto;
}

/* Die Sidebar nimme 20% der Breite ein und wird am linken Rand ausgerichtet */
.left{
   float: left;
   width: 20%;
}
/* Der Hauptteil nimmt 80% der Breite ein und wird am rechten Rand ausgerichtet */
.right{
   float: right;
   width: 80%;
}

/* positioniert die Hauptbereiche auf kleinen Bildschirmen neu */
@media screen and (max-width: 500px){
   .left,
   .right{
      float: left !important;
      width: 100% !important;
   }
}

/* - - - - - - - - - - - -

 Inhaltsboxen
 
- - - - - - - - - - - - */

#head{
   padding: 1em 2em; /* Abstand vom Rand */
   background: #dddddd; /* Hintergrundfarbe -> grau */   
   text-align: center;
   box-shadow: 0 5px 6px -3px rgba(0,0,0,.4);
}


.boxleft{
   margin: 10px; /* Außenabstände der Boxen */
   padding: 10px; /* Innenabstand vom Rand der Box */
   background: #eeeeee; /* Hintergrundfarbe -> grünton */
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.boxright{
   margin: 10px; /* Außenabstände der Boxen */
   padding: 10px; /* Innenabstand vom Rand der Box */
   background: #fff; /* Hintergrundfarbe -> grünton */
   box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.innerbox:last-child {
     margin-right: 0;
}

/* - - - - - - - - - - - -

 Inhalt
 
- - - - - - - - - - - - */

/* Hier weiteres CSS einfügen */

.navbar {
  overflow: hidden;
  background-color: #4f4633;
}

.navbar a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #f4cc74;
  color: #4f4633;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #4f4633;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;  
}

th, td {
  text-align: left;
  padding: 8px;
  font-size: 12px;  
}

td.blue {
   color: blue;
}

.bild {
   padding:0px;
   margin:0px;
   max-width: 100%;
   min-width: 50%;
   height: auto;
}

tr:nth-child(even){background-color: #f2f2f2}