@font-face {
  font-family: 'Michroma';
  src: local('Michroma'),
    url('michroma.woff2') format('woff2'),
    url('michroma.woff') format('woff'),
    url('michroma.ttf') format('ttf');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

html, body {
  display: block;
  height: 100%;
  width: 100%;
  max-height: 100%;
  overflow: auto;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 0;
  font-size: 13px;
}

.blok {
	display: block;
}

html, body, div, header, nav, footer, img, .blok {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background-color: #e7e7e7;
  background-image: linear-gradient(to top, #e7e7e7 0%, #f8f8f8 100%);
  overflow: auto;
  font-family: Verdana, Geneva, Arial, sans-serif;
  letter-spacing: 0.02em;
}

div.nojavascript {
  top: 66px;
  width: 66%;
  height: 22px;
  line-height: 22px;
  margin: 0px 0px 0px 16%;
  display: block;
  position: absolute;
  border: 1px solid red;
  z-index: 5;
  text-align: center;
  background-color: #ffffff;
}

.wrapper {
  margin: 0 auto;
  width: 970px;
}

.kop {
  top: 0;
  left: 0;
  right: 0;
  height: 59px;
  background-image: linear-gradient(to top, #f0f0f0 0%, #f8f8f8 100%);
  border-bottom: 4px solid #d2d2d2;
  box-shadow: 0 0 10px rgba(0, 0, 0, .2);
  position: relative;
  z-index: 2;
}

.kop .wrapper {
  display: flex;
}

.navigatie {
  margin: 7px auto 0px auto;
  padding-left: 35px;
  height: 44px;
  flex-grow: 0;
}

.navigatie ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  z-index: 10;
}
.navigatie a {
  font-family: "Michroma";
  line-height: 44px;
  font-size: 24px;
  text-decoration: none;
  padding: 0 10px;
  color: #999;
}
.navigatie .hoofdknop {
  position: relative;
  display: block;
  height: 44px;
  width: 367px;
  border: 1px solid #bbb;
  border-radius: 10px;
  line-height: 43px;
  background-image: linear-gradient(to top, #eee 0%, #fafafa 100%);
  box-shadow: 2px 2px 4px rgba(0,0,0,.1);
  padding: 0 2px 0 18px;
}
.navigatie:hover .hoofdknop {
  background-image: linear-gradient(to top, white 0%, #eee 100%);
  box-shadow: inset 2px 2px 4px rgba(0,0,0,.1);
}

.navigatie .submenu {
  display: block;
  position: absolute;
  width: 367px;
  margin: 0px 0px 0px 8px;
  border-left: 1px solid #afafaf;
  border-right: 1px solid #afafaf;
  border-bottom: 1px solid #afafaf;
  background-color: #fbfbfb;
  background-image: none;
  overflow: hidden;
  display: none;
  border-radius: 0;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  box-shadow: 4px 4px 8px rgba(0,0,0,.1);
}

.navigatie .submenu a {
	display: block;
  height:46px; width:379px;
  border: 0px;
  margin: 0px;
  padding: 0px;
  margin-left: -7px;
  background-color: #fff;
  z-index: 100;
  font-size: 24px;
  padding: 0 16px;
  text-decoration: none;
}
.navigatie .submenu a:hover {
  background-color: #f0f0f0;
  background-image: linear-gradient(to top, #e7e7e7 0%, #f3f3f3 100%);
}

.navigatie ul:hover ul {
	display: block;
}

.navigatie a img {
  border: 0px;
  padding: 0px;
  margin: 0px;
  text-decoration: none;
}

.titel {
  flex-grow: 1;
	line-height: 59px;
	text-align: center;
  font-family: 'Michroma';
  font-size: 24px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #999;
}

.logo {
  flex-grow: 0;
  width: 59px;
}

.logo a {
  display: block;
  width: 59px;
  height: 59px;
  padding: 0px;
  margin: 0px;
  background-image: url("img/bussum.svg");
  background-size: 46px;
  background-repeat: no-repeat;
  background-position: 50%;
  filter: grayscale(100%) contrast(25%) brightness(160%);
  transition: filter 600ms ease;
}

.logo a:hover {
  filter: none;
  transition: filter 200ms ease;
}

.pagina {
  display: block;
  padding-top: 1px;
  padding-bottom: 1px;
  font-size: 13px;
  margin: 0px auto;
  max-width: 970px;
  background-color: #eaeaea;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  position: relative;
  z-index: 1;
}

.pagina.miranda {
  background-image: url("img/miranda.jpg");
  background-size: cover; 
  background-position: 0px 0px;
  background-repeat: no-repeat;
}

.content {
	position: relative;
  margin: 35px;
  border: 4px solid #d2d2d2;
  border-radius: 12px;
  background-image: linear-gradient(to top, #fff6 0%, #fffc 100%);
  box-shadow: 4px 4px 8px #0002;
}

.content h1 {
  display: block;
  color: #666;
  text-align: center;
  margin: 0px;
  padding: 0px;
  font-weight: normal;
  line-height: 1.5em;
  font-size: 20px;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
}

.content p {
  margin: 0px 20px 20px 20px;
}

.content a {
  color: #4F769C;
  text-decoration: none;
}
.content li { /* sitemap */
  margin-top: 5px;
}

.content a:hover {text-decoration: underline;}

div.foutmelding {
  background-color: #eee;
  color: red;
}

div.wit {
  background-color: white;
  background-image: none;
}

.boek {
	position: relative;
  background-image: linear-gradient(-45deg, #ddd 0%, white 100%);
  background-size: 50% 100%;
  display: flex;
  min-width: 670px;
}

.bladzijde {
  width: 450px;
  display: flex;
  flex-direction: column;
  position: relative;
}

.boekfoto {
	flex-grow: 0;
	max-width: calc(100% - 25px);
  padding: 5px;
  background-color: #fff;
  border: 1px solid #666;
  margin: 20px auto;
}

.bladzijde p {
	flex-grow: 1;
	max-width: calc(100% - 25px);
  font-family: arial, geneva, sans-serif;
}
.bladzijdenr {
	flex-grow: 0;
  padding: 0px;
  height: 25px;
  text-align: center;
  font-size: 24px;
  letter-spacing: 0.1em;
  color: #999;
}

a#pagina_terug {
	flex-grow: 0;
  height: 83px;
  line-height: 83px;
  text-align: center;
  text-decoration: none;
  background-image: url("img/page_left.jpg");
  background-repeat: no-repeat;
  background-position: left bottom;
  font-size: 13px;
  opacity: 0.5;
}
a#pagina_terug:hover { opacity: 1.0; }

a#pagina_verder {
  flex-grow: 0;
  text-align: right;
  height: 83px;
  line-height: 83px;
  text-align: center;
  text-decoration: none;
  background-image: url("img/page_right.jpg");
  background-repeat: no-repeat;
  background-position: right bottom;
  font-size: 13px;
  padding: 0px;
  opacity: 0.5;
}
a#pagina_verder:hover { opacity: 1.0; }

.voet {
  display: block;
  max-width: 970px;
  margin: 30px auto;
  box-shadow: inset 1px 1px 6px #0001;
  background: #00000007;
  text-align: right;
  color: #777;
  border: 1px solid #0001;
  border-radius: 12px;
}
.voet:before {
  content: "Beeld van Bussum";
	display: block;
	float: left;
	margin-left: 30px;
	text-align: left;
	line-height: 60px;
	font-size: 24px;
  font-family: 'Michroma';
  text-transform: uppercase;
  letter-spacing: -0.01em;
	color: #bbb;
}

.voet p {
  display: block;
  position: relative;
  right: 10px;
  line-height: 1.3em;
  margin: 5px 0;
}

.voet p span {display: block;}
.voet p span,
.voet p span a {color: #aaa;}

.voet a {
  text-decoration: none;
  color: #888;
}

.voet a:hover {
  color: #4F769C !important;
  text-decoration: underline;
}

/*===[ Page specific ]===*/
.voorpagina {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-evenly;
	padding-bottom: 35px;
}

.voorpagina .link {
	position: relative;
  display: block;
  height: 193px;
  width: 370px;
  margin-top: 35px;
  padding: 0px;
  background-size: 100%;
  background-position: center;
  border: 1px solid #777;
  border-radius: 12px;
  box-shadow: 4px 4px 8px #0004;
  overflow: hidden;
  transition: background-size 400ms ease;
}

.voorpagina .link .label {
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 32px;
  line-height: 30px;
  font-size: 22px;
  font-family: "Michroma";
  text-align: center;
  background-color: #0004;
  color: white;
  text-shadow: 0 0 2px #000, 0 2px 2px #0009;
  transition: transform 400ms ease;
}

.voorpagina .link:hover {
  background-size: 120%;
  transition: background-size 2s ease;
}

.voorpagina .link:hover .label {
  transform: translateY(35px);
  transition: transform 2s ease;
}

.voorpagina .historische_collectie {
	background-image: url('img/historische_collectie.jpg');	
}
.voorpagina .sportcollectie {
	background-image: url('img/sportcollectie.jpg');
}
.voorpagina .eerste_wandeling_1960 {
	background-image: url('img/eerste_wandeling_60.jpg');
}
.voorpagina .tweede_wandeling_1960 {
	background-image: url('img/tweede_wandeling_60.jpg');
}

form#zoek_historisch {}

form p {
  display: block;
  margin: 15px 0px !important;
  text-align: center;
  padding: 0px 0px 5px 0px !important;
  border-bottom: 1px dotted #ddd;
} /* zoekformulier */

input.submit {margin-right: 100px;} /* Zoekknop */
input.radio {margin-left: 20px;}

/*zoekresultaten*/
table {
  margin: 20px auto;
  border: 0px solid #eee;
  border-collapse: collapse;
}

.bottom {
  background-color: #eee;
}

thead th {
  background-color: #ddd;
  text-align: center;
  vertical-align: top;
  padding: 2px 3px;
  width: 134px;
  font-weight: bold;
}

thead td {
  width: 333px;
  background-color: #ddd;
  text-align: left;
  padding: 2px 3px;
  font-weight: bold;
}

tfoot td {
  background-color: #ddd;
  text-align: center;
  padding: 2px 3px;
}

tbody th {
  text-align: center;
}

tbody td {
  vertical-align: middle;
  padding: 2px 3px;
  height: 48px;
}

tbody a {
  display: block;
  width: 134px;
  padding: 3px;
  text-align: center;
}

tbody a:hover {
  background-color: #4F769C;
}

tbody img { /* thumbnails */
  display: block;
  background-color: #fff;
  padding: 3px;
  border: 1px solid #666;
  margin: 0px auto;
}

div#straat {
	float: right;
  display: block;
  width: 300px;
  background-color: #f3f3f3;
  border-bottom: 1px solid #ddd;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  margin: 10px 0px 10px 10px;
}

div#straat img { /* kaart */
  border: 1px solid #999;
  margin: 10px;
}

div#straat p {
  margin: 0px 10px 10px 10px;
  color: #666;
}

img#foto {
  margin: 10px 20px;
  background-color: #fff;
  padding: 5px;
  border: 1px solid #666;
}

a#foto_terug {
	float: right;
  display: block;
  font-size: 12px;
  height: 30px;
  width: 80px;
  text-align: center;
  margin: 0px 0px 0px -80px;
  padding: 0px;
  line-height: 30px;
  text-decoration: none;
  font-weight: normal;
  color: #333;
}

a#foto_terug:hover {
  text-decoration: underline;
  background-color: #fbfbfb;
  color: #4F769C;
}

/*--- contactformulier ---*/
form#contact {
  display: block;
  width: 450px;
  margin: 0px 0px 0px 225px;
  padding: 0px;
}

form#contact fieldset {
  border: 1px solid #aaa;
}
form#contact legend {
  font-weight: bold;
  color: #aaa;
  margin-bottom: 5px;
}
form#contact label {
  margin-top: 5px;
  font-weight: bold;
  color: #666;
}
form#contact label,
form#contact textarea,
form#contact input {
  display: block;
  margin-left: 70px;
  margin-bottom: 0px;
}
form#contact input.submit {
  margin: 5px 0px 10px 70px;
}

ul.sitemap {
  list-style-type: none;
}

p.nieuws {
  padding: 15px 5px 3px 5px;
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  font-size: 14px;
}

p.nieuws span {
  font-weight: normal;
}