main { display: flex; }
main > article { order: 2; min-width: 12em; flex:1; }
main > nav     { order: 1; width: 200px; }

body {
  font-family: Arial;
}
header h1 {
  font-size: 150%;
  text-align: center;
}
p {
  font-size: 90%;
}
a {
  font-size: 90%;
}
.ul {
  font-size: 90%;
}
footer {
  padding: 0.1em 0;
  background-color: #aaa;
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
footer p {
  text-align: center;
  
}
nav {
  overflow:hidden;
  background-color: #b4cde1;
 
  margin: 0 0 0 0;
}
nav ul {
  list-style: none;
  margin: 0 0;
  padding: 0;
}
nav a {
  display: block;
  color: #fff;
  text-align: left;
  padding: 0.5em 1em;
  text-decoration: none;
  font-size: 0.9em;
  font-family: Arial;
  background-color: cornflowerblue;

}
#meny li a:hover {
  background-color: #eee;
  color: black;
}
#meny a:active {
  background-color: #1565c0;
 color: white;
}
#meny a#current {
   background-color: #1565c0;
  color: white;
}
main {
  max-width: 1300px;
  margin-left: auto;
  margin-right: auto;
}
article {
  background-color: aliceblue;
  padding: 0 0.4em;
  margin-left: auto;
  margin-right: auto;
}
.img-type50 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  margin-top: 0.5em;
}
.img-type70 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 70%;
  margin-top: 0.5em;
}
.img-type {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  margin-top: 0.5em;
}

@media all and (max-width: 800px) {
  /* Too narrow to support two columns */
  main { flex-flow: column; }
  main > article {
    /* Return them to document order */
    order: 2; width: auto;
   }
  main > nav {
    order: 1; width: auto;
   } 
   nav a {
    margin: 0 auto;
  } 
}