body, ul, li, p {margin: 0;padding: 0;}
body {margin: 0;font-family: verdana, sans-serif;font-size: 1em;line-height: 1.5em;background-color: #FFF;color: #555;}
h1 {font-size:1.5em;font-weight: bold;color: #CAD301;line-height: 1.2em;}
.container h1 {margin: 0 0 0.5em 0;letter-spacing: 1px;font-weight: normal;}
h2 {font-size: 1.2em;color: #00bbe4;margin-top:1.5em;font-weight: 100;letter-spacing: 1px;}
section h2 {border-bottom: 2px solid #CAD301;padding: 5px 0;text-align: left;color: black;}
h3 {font-weight: bold;font-size: inherit;margin-bottom: 1em;}
h1:first-child, h2:first-child, h3:first-child {margin-top: 0px;}
.container p, .container ul {margin-bottom: 1em;}
a {color: inherit;text-decoration: none;}
main a {text-decoration: underline;}
a:hover {text-decoration: underline;}
a {color:#00bbe4; text-decoration: underline;}

.container li ul {margin: 0px;}
.container ul {padding-left: 1.2em;}

/* HEADER */
header {padding: 20px 20px 0 20px;display: grid;grid-template-columns: 1fr 4fr;}
header img {height: auto;width: 100%;}
header h1 {padding: 0 0 10px 0;letter-spacing: 1px;text-align: right;font-weight: normal;font-size: 1.5em;color: #CAD301;}
@media (max-width: 768px) {
    header {grid-template-columns: 1fr;}
    header img {max-width: 200px;}
    header h1 {padding: 0;margin: 0;text-align: left;font-size: 1.2em;letter-spacing: 0px;}
}

/* NAVIGATION BAR BELOW HEADER */
nav.top {padding: 5px 20px;border-top: 1px solid #DDD;border-bottom: 1px solid #DDD;text-align: right;}
nav.top a {padding: 0 0 0 10px;text-decoration: none;letter-spacing: 1px;font-size: 1em;}
nav.top li:last-child a {padding-right: 0px;}
@media (max-width: 768px) {
    nav.top {display:grid;margin: 0;padding: 5px 0;text-align:right;}
    nav.top a {letter-spacing: 0px;}
}
@media (max-width: 768px) {
    header {padding-bottom: 10px;}
    nav.top {padding: 5px 10px;}
}

/* NAVIGATION BAR LEFT - ARTICLE NAVIGATION */
.container nav p, .container nav li {margin: 0px;padding: 0 0 5px 0px}
.container nav ul {list-style-type: none; padding: 0px;}
.container nav li {text-decoration: none;}
.container nav li a {text-decoration: none;}
.container nav li a:hover {text-decoration: underline;}

/* GRID LAYOUT 
    Header, container en footer zijn allemaal losse gridstructuren.
    Op termijn nog responsive maken. De nav en side in de container 
    moeten een minimale breedte krijgen waarbij ze op een klein scherm 
    boven elkaar worden getoond. */
.container {display: grid;grid-template-columns: 1fr;grid-gap: 10px;padding: 10px;}
.container nav {display: none;}
.container nav, main, side, .footer {padding: 10px;}

/* responsive design container */
/* Groter dan een mobiele telefoon (zoals ipad)*/
@media (min-width: 320px){ 
    .summary .container {grid-template-columns: 1fr;}
}
/* Groter dan een ipad (laptop met klein scherm)*/
@media (min-width: 481px){
}
/* Groter dan een laptop met klein scherm */
@media (min-width: 769px) {
    .container {grid-template-columns: 1fr 3fr 1fr;}
    .summary .container {grid-template-columns: 1fr 1fr 1fr;}
    .contact .container {grid-template-columns: 1fr 1fr;}
    .container nav {display:block}    
}
/* Groter dan een laptop met groot scherm */
@media (min-width: 1025px) {
    .summary .container {grid-template-columns: 1fr 1fr 1fr 1fr;}
}

/* SECTION layout */
.container section {padding: 10px;overflow: hidden;}
.container section ul {margin:0px;}
.container section ul h2 {margin-top: 0px;}
section img {width: 100%;}
.container section a {color:#555; text-decoration: none;}
.container section a:hover {text-decoration: underline;}
    
/* Different layout homepage */
#home {margin: 0px; padding: 20px 0 0 0;display: block;background-image: url(../media/grotefotostrand.png);background-size: cover;background-repeat: no-repeat;}
#home h1 {letter-spacing: 1px;color: #00bbe4;margin: 0 0 20px 30px;}
#home #klachten {display: none;}
#home #klachten {margin: 0px 25% 10px 30px;}
#home #klachten ul{letter-spacing: 1px;color: #555;column-count: 3;}
#home #klachten ul a {color: #555; text-decoration: none;}
#home #klachten a:hover {color: #00bbe4;}
#home li {list-style-type: none;margin: 0 0 5px 0;}
#home .call-to-action {background-color: rgb(0, 187, 228, .3);padding: 10px 10px 10px 30px;box-shadow: 5px #000;}
#home .call-to-action a {display: block;}
#home h2 {margin: 0px 0px 1em 0px;color: #000;font-size: 1em;}
#home p {margin: 0px;}
@media (max-width: 320px){
    #home #klachten ul{column-count: 1;}
}
@media (max-width:845px){
    #home #klachten ul{column-count: 2;}
}
@media (max-width:1070px) {
    #home {background-image: url(../media/kleinefoto.png);}
    #home #klachten {margin: 0px 30px 10px 30px;}    
    #home ul {padding-right: 20px;}
}

/* responsive design header homepage */
/* Groter dan een mobiele telefoon (zoals ipad)*/
@media (min-width: 320px){ 
}
/* Groter dan een ipad (laptop met klein scherm)*/
@media (min-width: 481px){
    #home #klachten{display: block;}
}
/* Groter dan een laptop met klein scherm */
@media (min-width: 769px) {
}
/* Groter dan een laptop met groot scherm */
@media (min-width: 1025px) {
}
    
/* Lay out forms (meetinstrumenten) */

.container form p, #uitkomst p {
    font-weight: bold;
}

.container form input {
    margin-right: 1em;
}

#uitkomst {
    background-color: #EEE;
    border: 1px solid #DDD;
    margin: 1em 0;
    padding: 0.5em;
}

/* Contact formulier */

#contactform input[type=text]{width: 95%; border: 1px solid #DDD; padding: 10px;margin-bottom:0.5em;}
#contactform div {display: flex;}
#contactform div label {width:200px;}

/* FOOTER */
footer {background-color: #333;color: #FFF;}
footer ul {padding: 0px;}
footer ul li {list-style-type: none;}
footer a {text-decoration: none;}
.footer {display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 10px;}
@media (max-width: 768px) {.footer {grid-template-columns: 1fr;}}

/* pictures with additional description in text */

figure {
    border: 1px solid #DDD;
    padding: 10px;
    text-align: center;
    margin: 10px auto 10px 0px;
    width: 250px;
}

figure.largewidth {max-width: none; margin: 10px 0;}
figure.largewidth img {max-width: none;width: 100%;}

@media (min-width: 769px){ 
figure.largewidth {max-width: none; margin: 10px 0;}
figure.largewidth img {max-width: none;width: 70%;}
}

figure.fullwidth {
    max-width: none;
    margin: 10px 0;
}

figure img {
    max-width: 250px;
}

figure.fullwidth img {
    max-width: none;
    width: 100%;
}

figure figcaption {
    font-style: italic;
    font-size: 0.9em;
    background-color: #EEE;
    padding: 2px;
}

div.grid {
    display: grid;
    grid-gap: 10px;
    grid-template-columns: 1fr 1fr;
}

picture {
    border: 1px solid grey;
    padding:10px;
}

.source {
    font-style: italic;
}

/* Table forms */

table {
    font-size: 0.9em;
    border-collapse: collapse;
    width: 100%;
}
th, td {
    font-weight: normal;
    vertical-align: top;
    text-align: left;
    border: 1px solid grey;
    padding: 3px;
    min-width: 20%;
}

td {
    text-align: center;
}

/* Table layout for printable intake form */

.intake table {
    margin-bottom: 2em;
    border: none;
}

.intake td, .intake th {
    padding: 5px 0 0 5px;
    border: none;
    text-align: left;
}

.intake td, .intake th {
    width: 50%;
}

.intake input[type=text]{
    border:none;
    border-bottom: 1px dotted black;
    width: 100%;
}

.intake input[type=checkbox], .intake input[type=radio]{
    margin: 0 1em;
}

.intake th.h2 {
    padding: 5px;
    background-color: #EEE;
    font-weight: bold;
    border-top: #FFF solid 2em;
}