BODY {
	font-family: Arial; 
	color: rgb(0,0,0);
	background-color: #575757;
	margin: 0px;
	padding: 0px;
	scroll-margin-right: 20px;
}

h1 {font-size: 3em;}

A:link { color: rgb(157,0,83) }
A:visited { color: rgb(193,0,43) }
A:hover { color: rgb(120,0,40) }

#kalenderbody {
	background-color: #F5F5AA;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 5px;
	margin-left: 5px;
}

#subbody {
	background-color: #F5F5AA;
	margin: 5px;
}
	
* {
  box-sizing: border-box;
}

.header {padding: 10px;
  text-align: center;
  background: #575757;
  color: white;
  background-image: url("images/topbar.png");
  width: 100%;
  background-repeat: repeat-x;
  background-attachment: scroll;
}

.inhoud {background-color: #F5F5AA;
}

/* Style the top navigation bar */
.navbar {
  display: flex;
  background-color: #575757;
}

/* Style the navigation bar links */
.navbar a {
  color: white;
  padding: 11px 20px;
  text-decoration: none;
  text-align: center;
}

/* Change color on hover */
.navbar a:hover {
  background-color: #72b223;
  color: black;
}

/* verdwijnend menu in grote layout */
/* (komt te voorschijn in smartphone-view) */
.kleinmenu {
	display: none;
}

/* Smallere marges voor kalender */
.kalender {
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 0px;
	margin-left: 0px;
}

.kolommen {
	background-color: #575757;
	margin: 10px;
	display: flex;
	flex-wrap: nowrap;
	margin: 0px;
}

/* header: link blijft wit */
a.welkom:link {color: white}
a.welkom:visited {color: white}
a.welkom:hover {color: rgb(120,0,40)}
	
.welkoml {margin: 0px;}
/* Column container */
.row {  
  display: flex;
  flex-wrap: nowrap;
  margin: 0px;
}


	

/* Create two unequal columns that sit next to each other */
/* Sidebar/left column */
.side {
  flex: 1 0 175px;
  background-color: #F5F5AA;
  padding: 7px;
  border: 10px solid #575757;
}

/* Main column */
.main {
  flex: 5 1 75%;
  background-color: #F5F5AA;
  padding: 7px;
  flex-shrink: 0;
  border-top: 10px solid #575757;
  border-right: 10px solid #575757;
  border-bottom: 10px solid #575757;
}

/* Header titel */
.headtitel {
  flex: 100%;
}

/* Header fotootjes */
.topfotootjes {
  display: flex;
  flex-wrap: nowrap;
  flex-basis: auto;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  gap: 10px;
}

.toppicture {
	height: 60px;
}

.topfoto {
	align-self: center;
	height: 60px;
}

/* experimenteel: auto adjust hoogte iframe */
.gh-fit {}
.gh-fullwidth {width: 100%;}

/* Footer */
.footer {
  padding: 20px;
  text-align: center;
  background: #ddd;
}

/* Table */
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 10px;
}


/* Responsive layout - als screen is less than 700px wide, geen aparte kolom voor kalender maar extra entry in keuzemenu */
@media screen and (max-width: 700px) {
  .row, .navbar, .kolommen {flex-direction: column;}
  .side {display: none;}
  .kleinmenu {display: block;}
  .main {flex-basis: 600px;
	border-right: none;}
  .header {padding: 0px;}
  .topfotootjes {flex-wrap: wrap;}
  .welkoml {margin: 10px;}
}
@media screen and (max-width: 343px) {
  .topfotootjes {gap: 5px;}
}