* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
  
/* standards */

html {
    min-height: 101%; 
    overflow-y: scroll;
}
  
body {
    background-color: white;
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 1000px;
}
a {
    text-decoration: none;
    color: #0066CC;
    font-weight: bold;
}
a:hover {
    color: #FF3300;
}
h2 {
    margin-bottom: 0.4em;
}
h3 {
    margin-top: 0.83em;
    margin-bottom: 0.83em;
}	
h4 {
    margin-bottom: 0.3em;
}
p {
      margin-bottom: 0.83em;
}
ul,ol {
    display: block;
    padding-left: 20px;	
    margin-bottom: 0.83em;
}

video {
    width: 100%;
    max-width: 900px;
    height: auto;
}
  
/* Header/logo Title */
  
.sessionbar {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.8em;
    margin-top: 5px;
    padding: 1px;
    display: block;
    max-width:100%;
    white-space: nowrap;
   /* text-overflow: ellipsis; */
}
.header {
      font-family: Arial, Helvetica, sans-serif;
      padding:6px;
      height: 170px;
      width:100%;
      background-image: url('img/banner03.jpg');
      color: white;
}
.navbar {
    margin-top: 5px;
}
.navbar a {
    float: right;
    background-color: AliceBlue;
    font-size: 1.1em;
    padding: 8px 3px;
    margin-left: 5px;
    border-radius: 3px;
    border: 1px solid AliceBlue;
}
.navbar a:hover {
    background-color: #EFEFEF;
    color: #FF3300;
    box-shadow: 4px 8px 16px -4px rgba(0,0,0,0.2);
    cursor: pointer;
}
.navbardisa {
    float: right;
    background-color: White;
    font-size: 1.1em;
    font-weight: bold;
    color: Gray;
    padding: 8px 3px;
    margin-left: 5px;
    border-radius: 3px;
    border: 1px solid AliceBlue;
}
.lichtkrant {
    padding-top: 5px;
    top: 0;
}
  
  /* Column containers */
  
  .row,.menurow {  
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    width: 100%;
  }
  /* four equal menu columns */
  .menu {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    background-color: #333;
    color: #ddd;
    padding: 3px 20px 5px 20px;
  }
  .menu a {
      font-weight: normal;
      color: #ddd;
  }
  .menu a:hover {
      text-decoration:underline;
      color: white;
      cursor: pointer;
  }
  .menu ul {
      padding-left: 15px;
      margin: 0px;
      list-style-type: none;
  }
  
  .menutitel {
      margin-top: 2px;
      font-weight: bold;
  }
  .menuitem {
      margin-left: 10px;
  }
  
  /* Sidebar */
  
  .homeside {
    -ms-flex: 30%; /* IE10 */
    flex: 30%;
    padding: 1px 0px 10px 0px;
  }
  
.side {
      width: 100%;
      font-size: 0.9em;
      background-color: AliceBlue;
/*      border: 1px solid AliceBlue; */
      padding: 5px;
      margin-top: 5px;
      overflow: hidden;
}
.memo {
      width: 100%;
      font-size: 0.9em;
      padding: 5px;
      margin-top: 5px;
      background-color: AliceBlue;
}
  .side:hover {
      background-color: #EFEFEF;
      color: #FF3300;
      box-shadow: 4px 8px 16px -4px rgba(0,0,0,0.2);
      cursor: pointer;
  }
  .sidetxt {
      padding: 5px;
  }
  .sidegreen {
      background-color: forestgreen;
      color: white;
  }
  .sidered {
      background-color: red;
      color: black;
  }
  .sideorange {
      background-color: orange;
      color: black;
  }
  .sideyellow {
      background-color: yellow;
      color: black;
  }
.blitzortung {
    margin-top: 5px;
    aspect-ratio: 3/5;
    width: 100%;
}
  
  /* Main column */
  .homemain {   
    -ms-flex: 70%; /* IE10 */
    flex: 70%;
    font-size:1.1em;
    padding: 1px 10px 10px 20px;
  }
  .regmain {
      width: 100%;
      font-size:1.1em;
      overflow-wrap: break-word;
      padding: 0px 50px 5px 50px;
  }
  .regmain img {
      max-width: 100%;
      height: auto;
  }
  
  /* tables */
  .tablewrapper {
      display: block;
      overflow-x: auto;
      white-space: nowrap;
      max-width: 100%;
  }
  table {
      font-size: 1em;
  }
  td {
    padding: 1px;
    vertical-align: top;
  }
  th {
      text-align:left;
  }
  .meteodata {
      font-size: 0.9em;
      text-align: right;
      border-collapse: separate;
      border-spacing: 2px 2px;
  }
  .meteodata thead, tfoot {
      font-weight:bold;
  }
  .meteodata td {
      background-color: AliceBlue;
      padding: 3px;
      text-align: right;
  }
  .swlist {
      font-size: 0.9em;
      width: 90%;
      margin-left: auto;
      margin-right: auto;
      padding: 2px;
  }
  .swlist td.lrij {
      text-align: right;
  }
  .swlist tr:nth-child(odd) {
      background-color:#E6E6E6;
  }
  .celltitel {
      display:block;
      font-size:1.1em;
      font-weight:bold;
  }
  
  /* buttons */
  
  .btnslotregel {
      margin-top:5px;
  }
  .btn {
      background-color: AliceBlue;
      border: 1px solid AliceBlue;
      border-radius: 3px;
      color: #0066CC;
      display: inline-block;
      font-weight:bold;
      min-width: 40px;
      margin-right: 5px;
      padding: 8px 6px;
  }
  .btn:hover {
      background-color: #EFEFEF;
      color: #FF3300;
      box-shadow: 4px 8px 16px -4px rgba(0,0,0,0.2);
      cursor: pointer;
  }
  .btndisa {
      border-radius: 3px;
      border: 1px solid AliceBlue;
      color: gray;
      display: inline-block;
      font-weight:bold;
      padding: 8px 6px;
      min-width: 40px;
      margin-right: 5px;
  }

  .btnneutral {
      color: black;
  }
  
  .btnnga {
    color: red;
  }
  
  /* Footer */
  
  .footer {
      width: 100%;
      padding: 5px;
      text-align: center;
  }
  .footertext{
      font-variant: small-caps;
      font-weight: bold;
  }
  
  /* forms */

input,textarea,select {
    font-size: 0.9em;
}
  textarea {
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding: 4px;
      width: 100%;
  }
  .formbox {
    display:table;
    width:100%;
  }
  .formboxe {
      margin-top: 12px;
      margin-bottom: 12px;
  }
  .formcell {
      display: table-cell;
      vertical-align:top;
      text-align:left;
      padding: 1px 2px 1px 2px;
  }
  .formleft {
    width: 18%;
    text-align:right;
  }
  .formright {
    width: 82%;
  }
  .flex-label {
    display: flex;
    background-color: aliceblue;
    padding: 3px;
    margin-bottom: 4px;
  }
  .flex-label:hover {
    background-color: #EFEFEF;
    color: #FF3300;
}
.labelantwoord {
    margin-right: 12px;
    flex-shrink: 0;
}

input[type=radio],input[type=checkbox] {
    margin-top: 4px;
    margin-right: 12px;
    flex-shrink: 0;
}
label {
   display: flex;
}
label:hover{
    color: #FF3300;
}
  
/* Google maps */
  
  #map-search { width: 80%; }
  #map-canvas {
      top: 3px;
      bottom: 0px;
      left: 0;
      right: 0;
      height: 300px;
      width: 80%;
  }
  #map-output {
      margin-bottom: 2px;
      width: 80%;
      margin-top: 5px;
      font-size: 0.9em;
  }
  
  /* misc */
  
 .alert {
      color: red;
      font-weight: bold;
 }
   .btnline {
      text-align: center;
      margin-top: 22px;
      margin-bottom: 16px;
  }
  .center {
      text-align: center;
  }
  .confirm {
      font-weight: bold;
      color: forestgreen;
  }
  .error {
      font-weight: bold;
      color: #FF3300;
  }
  .guidancekop {
      font-weight: bold;
  }
  .info {
      color: #0000FF;
      font-weight: bold;
  }
  .smallprint {
      font-size: 0.9em;
  }
  .spacer {
      margin-top: 1em;
      margin-bottom: 1em;
  }
  .teamcontainer {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      margin: auto;
      position: relative;
  }
  .teampaneel {
      position: relative;
      height: 210px;
      width: 160px;
      margin: 5px 10px 5px 0px;
      border: 1px solid silver;
  }
  .teampaneel span {
      font-size: 0.8em;
      font-weight: bold;
      position: absolute;
      text-align:center;
    top: 88%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  
  /* meldingstatus */
  
  .alsontvangen {
      color: #333333;
      font-weight: bold;
  }
  .inonderzoek {
      color: Orange;
      font-weight: bold;
  }
  .bevestigd {
      color: Green;
      font-weight: bold;
  }
  .nietbevestigd {
      color: Red;
      font-weight: bold;
  }
  .geweigerd {
      color: DarkRed;
      font-weight: bold;
  }
  
  /* std items */
  
  .itm {
      display: block;
      font-size: 0.9em;
      font-weight:normal;
      color: #0066CC;
      background-color: AliceBlue;
      border: 1px solid AliceBlue;
      padding: 0px 5px 0px 5px;
      margin: 0px 0px 10px 0px;
      overflow: hidden;
  }
  .itm:hover {
  /*	border: 1px solid #FF3300; */
  /*	color: #FF3300; */
      background-color: #EFEFEF;
      color: #FF3300;
      box-shadow: 4px 8px 16px -4px rgba(0,0,0,0.2);
      cursor: pointer;
      cursor: pointer;
  }
  .itmcredit {
      color: black;
      font-size:0.9em;
  }
  .itm img {
      width: 100%;
      border: none;
  }
  .itmlink {
      text-decoration: none;
  }
  .itmteaser {
      color: black;
  }
  .itmteaserrechts {
      color: black;
      margin-left: 129px;
  }
  .itmtitel {
      display: block;
      font-size:1.1em;
      font-weight:bold;
  }
  .itmthumb {
      float: left;
      margin-top: 5px;
      width: 122px;
  }

/* lichtkrant */

.marquee {
    width: 100%;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
}

.marquee span {
    display: inline-block;
    padding-left: 100%;
    text-indent: 0;
    animation: marquee 40s linear infinite;
}

/* Make it move */
@keyframes marquee {
    0%   { transform: translate(0, 0); }
    100% { transform: translate(-100%, 0); }
}

/* Beeldenbank */

.bbmain {
    width: 100%;
    padding: 5px;
    margin-bottom: 15px;
}
.bbrowofitems {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
.bbitem {
    font-size: 80%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    flex: 0;
    min-width: 244px;
    min-height: 244px;
}
.bbitemkb {
    min-height: 0;
}
.bbitemnew {
    background-color: lightgray;
}
.bbthumb {
	border: 2px solid #333;
    align-self: center;
}
.bbthumb:hover {
    border-color: red;
}

/* Responsive layout */
  
  @media screen and (max-width: 700px) {
    .row {   
      flex-direction: column;
    }
    .regmain {
      padding: 5px 10px 5px 10px;
    }
    .regmain img {
      height: auto;
    }
    .formcell {
      display: block;
      text-align: left;
      width: 100%;
    }
  }
  @media screen and (max-width: 500px) {
    .menutitel {
        font-size: 1.3em;
    }
    .menu a {
        font-size: 1.2em;
    }
    .itmthumb {
      width: 100%;
      max-width: 500px;
    }
    .itmteaserrechts {
      margin-left: 0px;
    }
  }
  @media screen and (max-width: 400px) {
    .menurow {   
      flex-direction: column;
    }
  }