@charset "UTF-8";

/* Basisversion mit 960 Pixel */
* { 
  margin: 0;
  padding: 0;
  border: 0;
}

#wrapper {
   margin: 5px auto;
   width: 960px;

}

header {
   color: #0B0B61;
   background: linear-gradient(to bottom, #EFF8FB 0%, #CEE3F6 100%);
   border-left: #A9BCF5 1px solid;
   border-right: #A9BCF5 1px solid;
   border-bottom: red 1px solid;   
   border-radius: 0.5em 0.5em 0em 0em;
   padding: 1%;
   text-align:center;
   width: 98%;
   
}
footer {
   background: linear-gradient(to bottom, #EFF8FB 0%, #CEE3F6 100%);
   border-radius: 0em 0em 0.5em 0.5em;
   border-left: #A9BCF5 1px solid;
   border-right: #A9BCF5 1px solid;
   border-bottom: #A9BCF5 1px solid; 
   padding: 1%;
   margin-top: 1%;
   width: 98%;
   text-align: center;
}

#mainnav {
   float: left;
   margin-top: 5px;
   padding: 2% 2%;
   width: 15%;
   background: linear-gradient(to left, #EFF8FB 0%, #CEE3F6 100%);
   border-radius: 0.5em 0em 0em 0.5em;
   border-left: #A9BCF5 1px solid;
   border-bottom: #A9BCF5 1px solid;   
}

#sidebar {
   float: right;
   margin-top: 5px;
   padding: 2% 2%;
   width: 20%;
   font-size: 0.9em;
   background: linear-gradient(to right, #EFF8FB 0%, #CEE3F6 100%);
   border-radius: 0em 0.5em 0.5em 0em;
   border-right: #A9BCF5 1px solid;
   border-bottom: #A9BCF5 1px solid   
}

main {
  float: left;
  padding: 0 2%;
  margin-top: 5px;
  width: 52%;
  background-color: #CEE3F6;
}

article ul li {
	  margin-left: 0.6em;

}

.frage {/*Liste mit Fragezeichen statt button*/
	  list-style-image: url("../pic/fragebttn.gif");
	  list-style-position: inside;
}

.material {/*Liste mit Buch statt button*/
	  list-style-image: url("../pic/buch_offen.gif");
	  list-style-position: inside;	
}

.inside {/*Liste mit eingerückten buttons*/
	list-style-position: inside;
}

.verweise {/*Liste mit linksymbol*/
		list-style-image: url("../pic/link.gif");
		list-style-position: inside;
}

.ohne {/*Liste ihne button*/
		list-style:none;
}

.clear { clear: both; }

 article img { /* Bild im Artikel formatieren */
    float: left;
    margin: 0 10px 10px 0;
    border: 3px solid black;
 }
 
 article {
   padding: 2%;
   margin-bottom: 5px;
   width: 97%;
   background-color: #EFF8FB;
   border-radius: 0.5em;
}

nav ul li {
  list-style: none;
  margin-left: 0.6em;
  margin-top: 0.4em;
}

aside ul {
  margin: 0.5em 0 0.5em 1.6em;
}

h1 {
	font-size: 1.4em;
	text-shadow: 2px 2px 1px gray;
}

h2 {
	font-size: 1.2em;
	font-style: italic;
}
h3 {font-size: 1em;
	font-style: bold;
}


#up {
	position: fixed;
	bottom: 20px;
	right: 20px;
	padding: 0px;
	border: blue 1px solid;
	border-radius: 100%;
}


/* Eine Version für 768 Pixel (beispielsweise Tablet im Hochformat) */

@media only screen and (max-width: 768px) {
  #wrapper {
    width: 98%;
  }
  
  #mainnav {
    padding: 1%;
    text-align:center;
    width: 98%;
    background-color: #dedfbd;
  } 
  
  nav ul {
    margin-left: 0;
    padding-left: 0;
    display: inline;
  }
    
  nav ul li {
    margin-left: 0;
    padding: 3px 10px;
    border-left: 1px solid #000;
    list-style: none;
    display: inline;
  }
  
  nav h3 {
    margin: 0 10px 0 0;
    display: inline;
  }
 
  #sidebar {
    float: left;
    margin-top: 5px;
    padding: 2% 2%;
    width: 29%;
  }
  
  main {
    float: right;
    padding:  2% 2%;
    margin: 0;
    width: 62%;
  }

  article {
    width: 98%;
  }
  
}

/* Eine Version für 480 Pixel (beispielsweise Smartphones) */   

@media only screen and (max-width: 480px) { 

  #wrapper {
    margin: 5px auto;
    width: 97%;
  }

    
  nav ul li {
    border: 0;
    display: block;
  }
  
nav ul li:nth-child(odd) {
  background-color: #EFF8FB;
}
   
  nav h3 {  display: block; }
   
   #sidebar {
     padding: 1%;
     width: 98%;
     background-color: #CEE3F6;
     margin: 0 0 5px 0;
   }
    
   main {
     width: 98%;
   }  
}