html {
  background-image: url(body.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

body {
  grid-template-columns: 240px 740px 240px;  
}

header { 
  width: 1220px;
  height: 300px;
  background-image: url(header.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  background-size: 100% 300px;
}

header ul {
  left:-40px;
  top: 82%;
}

header li , footer li{
  list-style: none;
  float: left;
}


header li a, footer li a{
  width: 120px; 
  color: black;
  font-size: 14px;
  font-family:Arial;
  font-weight:bold;
  font-style:normal;
  text-align:center; 
  text-decoration: none;
  border: 1px solid black;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  padding: 10px;
  background-image: linear-gradient(#C6C6C6 0%, #999999 100%);
  background-image: -webkit-linear-gradient(#C6C6C6 0%, #999999 100%);
}

header li a:hover , header li .selected, footer li a:hover , footer li .selected{
  background-image: linear-gradient(#C6C6C6 100%, #999999 0%);
  background-image: -webkit-linear-gradient(#C6C6C6 100%, #999999 0%);
}

article[name] {
  border: thin solid #339966;
  background-color: black; 
  color: white;
}

article[name]::before {
  background-color: #999999;
  background-image: linear-gradient(#C6C6C6 0%, #999999 100%);
  background-image: -webkit-linear-gradient(#C6C6C6 0%, #999999 100%);
  color: #ffffff;  
  font-size: 14px;
  font-family:Arial;
  font-weight:bold;
  font-style:normal;
  text-align: center;
  content: attr(name); 
  line-height: 30px;
}

nav,aside { 
  text-align: center;
  color: #ffffff;
}

nav ul, aside ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  border: 1px solid #555;
}

nav li a , aside li a{
  font-size: 14px;
  font-family:Arial;
  font-style:normal;
  text-align:center; 
  text-decoration: none;
  color: black;  
  padding: 8px 16px;
}

nav li a:hover , nav li .selected , aside li a:hover , aside li .selected{
  background-color: #04AA6D;
  color: white;
}


footer{	
  width: 1220px;
  height: 30px;
  bottom:-20px;	
  margin: 20px 0;
  padding: 10px 20px 10px 0px;
  border-radius: 5px;
  background-image: -moz-linear-gradient(top, #cccccc, #eeeeee);  
  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #eeeeee));
  background-image: -webkit-linear-gradient(top, #cccccc, #eeeeee);  
  background-image: -moz-linear-gradient(top, #cccccc, #eeeeee);  
  background-image: -ms-linear-gradient(top, #cccccc, #eeeeee);  
  background-image: -o-linear-gradient(top, #cccccc, #eeeeee); 
}

footer p {
  color: black;
  left: 50%;
  transform: translate(-50%, -50%);
}
footer a {
  color: black;
}
footer ul {
  bottom:34px;
  left:-40px;
}

a {
  color: white;
  background-color: transparent;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  padding: 0;
  margin: 0;
}


details#mobil_nav li a{
  background-image: linear-gradient(#C6C6C6 0%, #999999 100%);
  background-image: -webkit-linear-gradient(#C6C6C6 0%, #999999 100%);
}

details#mobil_nav li a:hover , details#mobil_nav li .selected{
  background-image: linear-gradient(#C6C6C6 100%, #999999 0%);
  background-image: -webkit-linear-gradient(#C6C6C6 100%, #999999 0%);
}

@media screen and (max-width: 1220px) {
  footer{ 
  bottom:0px;	
  margin: 0px;
  padding: 0px;
  }
  footer p {
    width: 100%;
    top:  40%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

}