/* Getting the new tags to behave */ 
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; } 
mark, rp, rt, ruby, summary, time{ display: inline } 
/* Fonts and such */
 
   

* {margin:0; padding:0;}
html, body{ background-color:#ffffff; font-family:"Lucinda Sans Unicode"; color:#3399cc;}
p{margin-left:2%;margin-right:2%;
font-family: "Lucinda Sans Unicode", Helvetica, Arial, Verdana;
background-color: #fff;
color: #3399cc;
text-decoration: none;
word-spacing: normal;
text-align: justify;
letter-spacing: 0;
line-height: 1.5em;
font-size: 1.2em;
-webkit-font-smoothing: antialiased; } 

 

 a:link{color:#3399cc;}a:visited{color:#3399cc;}a:active{color:#3399cc;}a:hover{color:#3399cc;}
li.a:link{color:#3399cc;}a:visited{color:#3399cc;}a:active{color:#3399cc;}a:hover{color:#3399cc;} 

/* classes */
#titel { color:#ff0000 !important; font-family:"Comic Sans MS"; font-size:90px; font-style:normal; text-align:center!important; line-height:1.5em;  position:absolute; top:1%; }
#ondertitel { color:#666666; font-family:"Courier","serif"; text-align:center; width:100%; }
#sidemenu {font-style:italic; position:relative;z-index:99;margin-left:75%;margin-right:5%;}
#midden 
{ position:relative; margin-left:17%; margin-right:29%; z-index:90;}
#navigatie
{ position:relative; margin-left:5%; margin-right:18%; z-index:95; text-align:center}
#footer
{ position:relative; left:0%;bottom:0%}
#archief { margin-left:15%; margin-right:20%;}
#pix { margin-left:auto; margin-right:auto; text-align:center; color:#666666; font-size:14px; font-style:italic;}
.overons { margin-left:5%!important; margin-right:5%!important;}
#verwijs { margin-left:25%; margin-right:35%;}



/* typography */ 
 h1{ font-size: 3.2em; font-weight: normal; } 
 h2{ font-size: 1.8em; font-weight: bold; text-align:center !important;} 
 h3{ font-size: 1.2em; font-weight: bold; } 
 h4{ font-size: 0.8em; font-weight: bold;  color:#cc9933; text-align:right !important}    
 h5{ font-size: 0.5em; font-weight: normal;}
 h6{ font-size: 0.3em; font-weight:normal; text-align:center;}
 h7{ font-size: 1.0em; font-weight: normal;}

div.c {text-align: right}
/* images */  
img.c19 {border:1px;width:502px;height:502px}
img.c18 {border:1px;width:177px;height:490px} 
img.c17 {border:1px;width:401px;height:600px}
img.c16 {border:1px;width:600px;height:425px}
img.c15 {border:1px;width:324px;height:432px}
img.c14 {border:1px;width:512px;height:341px} img.c13 {border:1px;width:285px;height:195px} img.c12 {border:1px;width:600px;height:540px} img.c11 {border:1px;width:432px;height:324px} img.c10 {border:1px;width:600px;height:402px} img.c9 {border:1px;width:544px;height:363px} img.c8 {border:1px;width:515px;height:309px} img.c7 {border:1px;width:330px;height:433px} img.c6 {border:1px;width:461px;height:346px} img.c5 {border:0px;width:120px;height:40px} p.c {color:#808080}
img.c3 {width:70px;height:111px;border:2px solid grey} img.c2 {border:0px;width:225px;height:800px} img.c1 {border:0px;width:100%;height:200px}

 
  
/* Reusable classes ============================================================ */ 

/* Left & Right alignment */ 
.left{ float: left; } 
.right{ float: right; } 

/* The inside class provides consistent padding. To be used often! */ 
.inside{ padding: 20px; } 

/* The fraction classes are useful for column lists */ 
.half, .third, .quarter, .fifth, .sixth{ width: 100%; } 
.half li, .third li, .quarter li, .fifth li, .sixth li{ float: left; } 
.half li{ padding-right: 5%; width: 45% } 
.third li{  padding-right: 5%; width: 28.3% } 
.quarter li{  padding-right: 5%; width: 20% } 
.fifth li{  padding-right: 5%; width: 15% } 

/* For when a <br /> just ain't enough */ 
.separator{ 
   clear: both; 
   float: left; 
   height: 1px; 
   width: 100%; } 

/* Basic Structure ============================================================= */ 
#wrap{ 
   margin: 0 auto; 
   position: relative; 
   width: 960px; } 

   /* Header */ 
   header{ 
       float: left; 
       width: 100%; 
	   font-size: 60px;
	   font-color: #c0c0c0;
	   font-family: Georgia;
	   } 
    
   /* Content */ 
   article{ 
       float:left; 
       width:75%;
	   display:inline;
	    z-index:90 } 
    
   /* Sidebar */ 
   aside{
      float:right;
	  display:inline;
	  width:25%;
	  position:relative;
	  top:1%;
      right:0;
      z-index:99;
	  clear:none;} 
    
        
   /* Footer */ 
   footer{ 
       float:left; 
       width:100%;  
	   display:inline;
	   clear:both;
	   } 
  	   
    


@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px) 
	{	
#wrap{ 
   margin: 0 auto; 
   position: relative; 
   width: 768px; } 

   /* Header */ 
   header{ 
       float: left; 
       width: 100%; } 
    
   /* Content */ 
   article{ 
       float: left; 
       width: 80%; } 
    
   /* Sidebar */ 
   aside{      
      float: right; 
       width: 15%; 
	   position:relative;
	   z-index:96;
	   top: 20px%;
	  clear:none;
 
}
	      
   /* Footer */ 
   footer{ 
       float: left; 
       width: 100%; } 
	   
 
	
	  		   
#ondertitel {
 color:#808080;
 font-family:"Courier","Verdana","serif";	
 font-size:150%;
 font-style:italic;
 text-align:center;
 line-height:1.5em;
 width:768px%;
 }

 
#sidemenu {
 display:none;
  }
 
#midden {
 margin-left:2%;
 margin-right:2%;
 text-align:center;
 z-index:99}
 

 
#pix {
 margin-left:auto;
 margin-right:auto;
 text-align:center;
 color:#918D8C;
 font-size:12px;
 font-style:italic;}
  }