* {    
  box-sizing: border-box;
}


html {

  background:#d0efff;
  background-size: 20px 20px;
  color: #d0efff;
}

body {
  margin: 0 auto;
  padding: 1%; 
  max-width: 1200px;  
  font-family: courier new ;
  background: #2a9df4;
}


div.header {
  background: #03254c;
  height: 64px; 
  margin: 0; 
  padding: 0 16px;
  text-align: right;
  line-height: 54px;
  font-size: 64px; 
  color: #d0efff; 
  text-decoration: none; /* keine Unterstriche für die Professionalität ;) */
}

a { color: #d0efff; text-decoration: underline; } 
a:visited { color: black; } /* bereits besuchte Seiten schwarz für bessere Übersichtlichkeit */


main {
  padding: 0 2%; 
  line-height: 24px; 
}

div.article{display: inline-block;width:73%;}


div.nav {
  width: 25%; /* Je kleiner das Fenster desto kleiner die Breite von nav, damit genügend Platz für article bleibt ;3 */
  float: right; /* Inhalt links neben nav fließt vorbei und fängt nicht erst unten drunter an. */
  clear:right;
  display : inline-block;
  padding: 0px 1% 16px;
  margin: 160px 1% 0 1%;
  border-left: 1px dotted #d0efff;/* Abgrenzung zwischen articel und nav */
}


div.nav dd { /* Unterpunkte von nav */
  padding: 0;
  margin: 3.2px 0;
}

h1 { 
  font-size: 250%;
  font-weight: normal;
  line-height: 12.8px;
  padding: 20px 0 15px 2%;
  margin: 0;
  border-bottom: 1px dashed #b3cba2;
}

h1, h2 { 
  color: #d0efff;
  font-family: broadway;
}
 

img { /* Bilderrahmen */
  border: solid 1px #d0efff;
  padding: 1px;
}

.fleft { /* Sachen, an denen Text vorbeifließen soll*/
  float: left;
  margin: 0 16px 3.2px 0; 
  width: 19%;
}
.fright {
  float: right;
  margin: 0 0 3.2px 16px;
  width: 19%
}


div.footer {
  clear: both; /* Damit #main mindestens so hoch ausgedehnt wird wie div.nav, falls div.nav länger sein sollte. ;3 */
  padding: 2%;
  text-align:center;
  border-top: 1px dotted #d0efff; /* Trennung zwischen footer und dem Rest */
}

div.menu ul {
  background: #2565AE;
  padding: 5px 5%; /* Je kleiner das Fenster desto kleiner der Abstand des Menüs */
  margin: 0;
  text-align: right;
}
div.menu ul li {
  font-size: 19.2px;
  display: inline; /* Menüpunkte nebeneinander und nicht untereinander */
  list-style-type: none; /* keine Punkte */
  border-left: 1px solid #d0efff; /* Trennungsstrich */
  padding: 0 .80px 0 .80px;
  font-weight: bold;
}
div.menu ul li a {
  color: #d0efff; 
  padding:1.6px 16px;
  border-radius:3.2px;
  text-decoration: none;
}


/* Spaltenlayout mit Navigation unten am Handy */
@media only screen and (max-width: 600px) {
div.menu ul {
  display:block; 
  background:transparent;     
  margin: 16px 0;
}


div.menu ul li{width:90%;margin: 5px 0;  border-left: 0; }   
div.menu ul li a{display:inline-block;width:100%; color: #d0efff; background:#2565AE; margin:5px 0; border-radius:10px;text-align:center;}


div.article, 				
div.nav {
	float:none;
	display: block;
	width:100%;
}


.fleft,.fright {		/*Damit die Bilder nicht zu klein werden, nehmen halbe Breite des Bildschirms ein :P*/
	width:50%;
}