/*
Laatste wijziging Hein 29-06-2018
Responsief maken via media queries
*/
* {
    margin:0; padding:0;
  }
body {
    font-family: 'Comic Sans MS', Calibri;
    font-size:1em;
    background: #59334A url('background.png');
    overflow:hidden;
  }
  a:link{
    color: black;
    text-decoration: none;
  }
  a:visited{
    color: black;
    text-decoration: none;
  }
  a:hover{
    color: purple;
    text-decoration: underline;
  }
  li ul li a:hover{
    color: red;
    text-decoration: underline;
  }
  a.inpage:link{
    color: black;
    text-decoration:underline;
  }
  a.inpage:hover{
    color: blue;
    text-decoration: non;
  }
  a:active{
    color: purple;
    text-decoration: underline;
  }
  #li{
    margin-left: 6px;
    padding-left: 6px;;
  } 
.upperpanel{
    position: absolute;
    top: 0px;
    left: 3.65em; /**/
    margin-top:0.3em;
    background-color: #F7D15F;
    width:89%;
    height:10.5em;
    overflow:hidden;
    /* border-width:4; border-style:solid; border-color:green; /**/
}
@media only screen and (min-device-width:480px) {
    .upperpanel {
        height: 10 em; /*10em; */
        /* border-width:4; border-style:solid; border-color:green; /**/
    }
}
.logo1{
    position: absolute;
    top: 0px;
    left: 0px; /**/
    /* border-style:solid; border-width:0; border-color: red; /**/
    /* margin: 0px 0px; /**/
}
.button{
    height:1.2em;
    font-size:1em;
    color: pink;
    text-align: left;
    /* line-height:1.6em;  /**/
    margin-left: 0px;
    padding: 0.2em 0 0 1em; /**/
    background-color: #F4622C;
    /* border-width:0; border-style:solid; border-color:#F7D15F; /**/
    float: left;
    /*white-space: nowrap; /**/
    opacity:1;
}
@media only screen and (min-device-width:480px)
{
    button{
        font-size:2em;
    }
}
.outer{ /* SMARTPHONES*/
    display:block; /*position:relative;/**/
    margin-left: 0; margin-right: 0;
    font-size:1.2em;
    height:100%;
    width:100%;
    overflow:hidden;
    text-align:left;
    background-color: #F7D15F;
    border-style:solid; border-width:0; border-color:red;
}
@media only screen and (min-device-width:480px)
{
    .outer{
        height:90%;
        width:90%;
        border-style:solid; border-width:0; border-color:red;
        margin-left:auto; margin-right: auto;
    }
}
.upperbar{  /* SMARTPHONES*/
    /*visibility: hidden; */
    position:absolute;
    font-size:2em;
    top:3.6em;
    /*width: 100%;
    margin-left: auto;margin-right: auto; /**/
    height: 4em;/**/
    background-color:#F4622C; /**/
    overflow: visible;
    /* border-width:4;  border-style:solid; border-color: blue;  /**/
}
@media only screen and (min-device-width:480px)
{
    .upperbar{
        visibility: visible;
        top:6em;
        font-size:1.2em;
        height: 3em;/**/
        background-color: #F4622C; /**/
        /* border-width:0;  border-style:solid; border-color: blue;  /**/
    }
}
.splitline { /* SMARTPHONES */
    visibility: visible;
  }

@media only screen and (min-device-width:480px) {
    .splitline {   /* PC'S */
        visibility: hidden;
    }
}
.content_{ /* SMARTPHONES */
      /* display:block; /*position:relative;/**/
      /* font-family: 'Calibri Light','Comic Sans MS', Calibri; */
    position: fixed; /**/
    top:5em; /* 7.6em; */
    width:100%;
    height:100%;
    font-size:2.8em;
    padding:.5em;
    padding-top:6em;
    margin-left:0; margin-right: 0;
    overflow-y: auto;
    background-color: #F7D15F;
    /*border-width:1; border-style:solid; border-color: green;  /**/
  }
  @media only screen and (min-device-width:480px)
  {
      .content_  { /* PC'S */
          /*display:inline-block; /* */
          position: fixed; /**/
          top:10.6em; /* 7.6em; */
          font-size:1em;
          padding-top:1em;
          padding-left: 3em;
          height: 80%;
          width: 82%;
          margin-left:auto; margin-right: auto;
          /*overflow-scrolling: hide; /*vertical; /**/
          /*max-width:511px;*/
          /* height:30em; /**/
          /*border-width:2; border-style:solid; border-color: purple;  /**/
      }
  }
/*.content_{
  position:relative;
  margin-left: auto;margin-right: auto;
  height:62%;
  width:82%;
  padding:2em;
  background-color: #F7D15F;
  border-width:0 0 30 0; border-style:solid; border-color: #F4622C;
  overflow-x:hide;overflow-y: scroll;
  font-size:1em;
}/**/
  .textcolumn{ /* SMARTPHONES */
    display:inline-block;
    margin-left: 0.5em;margin-right: 0.5em;
    line-height:1.5em;
    height:100%;
    width:90%;
      padding-top: 1em;
    background-color: #F7D15F;
    border-width:0; border-style:solid; border-color: #F4622C;  /*  */
    overflow-x:hide;overflow-y: hide;
  }
  @media only screen and (min-device-width:480px)
  {
      .textcolumn{
          top:18.2em;
          line-height:1.5em;
          width:70%;
          border-width:0; border-style:solid; border-color: #F4622C;  /**/
      }
  }

  ul{
  	margin-left:1.15em;
  }
  ol{
  	margin-left:1.15em;
  }
  .photo {
    display:inline-block;
    /*top:.2em;
    left:3.5em;/**/
    padding: 1em 0 1em 0;
      /*border-width:1; border-style:solid; border-color: blue;  /**/
  }
.ondertitel {
    position:relative;
    left: 0em;
    width:80%;
    font-family:'Papyrus', Calibri;
    font-size:1em;
    font-weight:normal;
    font-style: italic;
}
@media only screen and (min-device-width:480px) {
    .ondertitel {
        position: relative;
        left: 0em;
        width: 80%;
        font-family: 'Papyrus', Calibri;
        font-size: 1em;
        font-weight: bold;
        font-style: normal;
    }
}
.poem1 {
    display:inline-block;
    padding-left:0.2em;
    font-size:0.6em;
    width:14em;
    font-family: 'Papyrus', "Lucida Sans", Calibri;
    font-weight:normal;
    font-style:italic;
    /* border-width:1; border-style:solid; border-color: #F4622C;  /**/
}
@media only screen and (min-device-width:480px) {
    .poem1 {
        font-size:1em;
        padding-left: 1.5em;
        width: 17em;
        font-weight: bold;
        font-style:normal;
        /* border-width:1; border-style:solid; border-color: #F4622C;  /**/
    }
}
  .center{
      text-align: center;
  }
  .openregel{
    line-height: 0.6em;
  }
  .dunneregel{
      line-height: 0.3em;
  }
  .kop1{
    font-family: Pristina,Tahoma;
    color:#CA1519;
  }
.poem2 {
    display:inline-block;
    left: 6em;
    width:21em;
    font-family:'Papyrus', Calibri;
    font-size:1em;
    font-weight:normal;
    text-align:center;
  }
@media only screen and (min-device-width:480px) {
    .poem2 {
        font-weight: bold;
        /* border-width:1; border-style:solid; border-color: #F4622C;  /**/
    }
}
.heading {
    display:inline-block;
    width:100%;
    heigth: 3em;
    font-family:'Papyrus', Calibri;
    font-size:2em;
    font-weight:normal;
    text-align:center;
    border-width:3; border-style:solid; border-color: #F4622C;  /**/
}
@media only screen and (min-device-width:480px) {
    .heading {
        font-weight: bold;
        /* border-width:1; border-style:solid; border-color: #F4622C;  /**/
    }
}
  .clearfloat{
    clear: both;
  }