html {
font-size: 62.5% !important;
}
body {
font-size: 1.8rem !important;
}
/* Some resets */
ol,
ul,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote {
margin: 0;
padding: 0;
list-style: none;
}
h2 {
font-weight: normal;
font-size: 1.5333rem;
}
h3 {
font-weight: normal;
font-size: 1.5333rem;
}
h4 {
font-weight: normal;
font-size: 1.5333rem;
}
h5 {
font-weight: normal;
font-size: 1.5333rem;
}
h6 {
font-weight: normal;
font-size: 1.5333rem;
}
h3,
h4,
h5,
h6 {
font-family: "TheMixRegular", 'Trebuchet MS', Arial, sans-serif;
}
h3 {
line-height: 1.3;
color: #39373a;
}
li,
p,
dd,
dt {
line-height: 1.3;
}
.intro + .maintext,
.maintext + p,
.richtext + p,
.pagenav + p,
p.separate,
p + p,
ol + p,
p + .rich-items,
p + .rich-list,
p + .itemnav,
p + .tagcloud {
margin-top: 1.33rem;
}
.sectioned .section {
margin-top: 1.33rem;
}
h2 + .maintext,
.maintext:first-child {
margin-top: -2px;
/* Offset for the baseline of the first line of .maintext content being 2px lower than it'd be for non-.maintext content. */
}
.maintext h1,
.maintext h2,
.maintext h3,
.maintext h4,
.maintext h5,
.maintext h6 {
line-height: 1.3;
}
.main-column h2 + .maintext > h3:first-child {
margin-top: -4px;
/* More baseline offset to keep the first line of text lined out correctly. */
margin-bottom: 4px;
}
.richtext ul,
.richtext ol,
.richtext object,
.richtext object > p,
.richtext div.video {
margin-bottom: 12px;
}
.richtext li ul,
.richtext li ol {
margin-bottom: 0;
}
.richtext p + ul,
.richtext p + ol,
.richtext p + img,
.richtext p + img + p,
.richtext p + img + ul,
.richtext p + img + ol,
.richtext p + object,
.richtext p + object > p,
.richtext p + div.video,
.richtext p + h3,
.richtext p + h4,
.richtext p + h5,
.richtext p + h6,
.richtext p + dl.meta,
.richtext .intro + dl.meta,
.richtext object + dl.meta,
.richtext div.video + dl.meta,
.richtext dl.meta + p,
dl.meta + h3,
dl.meta + h4,
dl.meta + h5,
dl.meta + h6,
.openingtimes + h3,
.openingtimes + h4,
.openingtimes + h5,
.openingtimes + h6,
.richtext .maintext + h3,
.richtext .maintext + h4,
.richtext .maintext + h5,
.richtext .maintext + h6,
.richtext h4 + object,
.richtext h5 + object,
.richtext h4 + div.video,
.richtext h5 + div.video {
margin-top: 20px;
}
.richtext h3 + h4,
.richtext h4 + h5 {
margin-top: 5px;
}
.sectioned .title.section + .section > h4:first-child {
margin-top: -15px;
/* Offset the 20px of the .section to arrive at the 5px from above. */
}
.image img.standalone {
display: block;
}
/* list */
.richtext span.image ~ *:not(.plain) > li {
pointer-events: none;
}
.richtext span.image ~ *:not(.plain) > li a {
pointer-events: auto;
position: relative;
}
.richtext *:not(.plain) > li {
position: relative;
}
.richtext ul:not(.plain) > li:before,
.richtext ol:not(.plain) > li:before {
display: inline-block;
}
.richtext ul:not(.plain) > li {
left: 1.33rem;
margin-right: 1.33rem;
text-indent: -1.33rem;
}
.richtext ul:not(.plain) > li:before {
width: 1.33rem;
text-indent: 0;
content: "\2022";
vertical-align: -3px;
height: 15px;
font-size: 1.9167rem;
}
.richtext ol:not(.plain) {
counter-reset: list-count;
}
.richtext ol:not(.plain) > li {
left: 2.527rem;
margin-right: 2.527rem;
text-indent: -2.527rem;
}
.richtext ol:not(.plain) > li:before {
width: 2.527rem;
text-indent: 0;
content: counter(list-count) ".";
counter-increment: list-count;
}
.richtext ol:not(.plain) > li:nth-child(n)::before {
text-indent: 0.7315rem;
text-indent: 1ch;
}
.richtext ol:not(.plain) > li:nth-child(n+10)::before {
text-indent: 0;
}
.richtext ol:not(.plain) > li:nth-child(n+100)::before {
text-indent: -0.7315rem;
text-indent: -1ch;
}
.richtext *:not(.plain) > li > * {
text-indent: 0;
/* Don't let this inherited property do any damage. */
}
.richtext ol:not(.plain) {
margin-left: 5px;
}
a,
button.link {
color: inherit;
text-decoration: underline;
text-underline-offset: 2px;
}
a img {
border: none;
}
a.button,
.tabs a,
.link-list a,
.filter-block a,
.delete-list a,
.pagenav a,
.metanav a,
.metanav button,
a:hover,
* a:hover,
a:focus,
* a:focus,
button.link:hover,
button.link:focus {
text-decoration: none;
}
.intro {
font-size: 1.6771rem;
}
.intro + .rich-items,
.intro + .rich-list {
border-top: 1px solid #EDEDED;
}
/* Elements hidden while animating a foldable */
.closing + .filter-block button,
.opening + .filter-block button,
.closing + .expanding-block button,
.opening + .expanding-block button {
visibility: hidden;
}
/* Page layout styling------------------------------------------------------------*/
/* Two column page styling, order: 2-1 (vestiges of 2-1-3 removed, since they were completely unused) */
.main-column-wrapper {
padding-bottom: 40px;
}
.main-column-wrapper {
float: left;
width: 100%;
}
.errorpage.biebwidget .main-column-wrapper {
padding-bottom: 0;
}
.main-column-wrapper.nav .main-column {
margin: 0 0 0 255px;
}
.nav-column {
float: left;
width: 255px;
margin-left: -100%;
font-size: 1.15rem;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
h4.titlewrapper {
font-size: inherit;
}
h4.titlewrapper .title {
font-size: 1.6771rem;
}
a.distinctparts {
text-decoration: none;
}
a.distinctparts > span {
display: block;
}
a.distinctparts:hover .title,
a.distinctparts:focus .title {
text-decoration: none;
}
/*
OUTDATED Progression of title sizes:
- landingpage widget: 18px, 12px bold
- nav-column: 16px, 12px bold
- main-column detailpage: 24px, 16px, 13px bold
- main-column overviewpage: 24px, 13px bold
*/
.main-column h2 {
margin-bottom: 7px;
/* Creates an effective 15px gap to the next textual content. */
word-wrap: break-word;
/* Necessary given the huge font-sizes. FIXME [svl, 2022-12-12] WAAS-5054: Deprecated. */
color: #39373a;
font-size: 5.75rem;
line-height: 5.75rem;
text-indent: -2px;
font-family: "TheMixRegular", 'Trebuchet MS', Arial, sans-serif;
}
.main-column h2.long {
font-size: 4.025rem;
}
.nav-column h2 {
overflow: hidden;
margin-bottom: 1px;
padding-bottom: 10px;
text-overflow: ellipsis;
font-size: 1.6771rem;
font-family: "TheMixRegular", 'Trebuchet MS', Arial, sans-serif;
}
.nav-column > p:first-child {
margin-top: 32px;
/* Baseline on the same height as the content following the .main-column h2. (Assuming a .tools) */
}
.nav-column > p.additional:first-child {
margin-top: 33px;
/* Baseline on the same height as the content following the .main-column h2. (Assuming a .tools) */
}
.nav-column * + h2 {
margin-top: 40px;
/* Spacing for subsequent blocks. */
}
.nav-column *:first-child + h2 {
margin-top: 28px;
/* If there's just one element before the h2... */
}
.main-column h3 {
font-weight: normal;
font-size: 2.0125rem;
}
.rich-items h4 {
line-height: 1.3;
}
.main-column .rich-items h3 {
font-size: 1.6771rem;
}
.main-column h4 {
font-size: 1.6771rem;
}
.grid-items h3,
.grid-items h4 {
font-size: 1.3417rem;
}
.main-column h5 {
font-style: italic;
color: #39373a;
font-size: 1.2458rem;
}
.main-column .rich-items .content.calendar h3 {
margin-right: 130px;
/* Free up space for the .offset image. */
}
.main-column .rich-items .more h3 .button {
font-size: 1.3417rem;
}
.main-column .rich-items .more h4 .button {
font-family: Arial, sans-serif;
font-size: 1.3417rem;
}
.nav-column h3 {
margin-top: 11px;
/* Effective white-space: 15px. */
font-size: 1.3417rem;
}
.nav-column h3:first-child {
margin-top: 0;
}
.nav-column li {
word-wrap: break-word;
}
.nav-column img {
max-width: 220px;
}
.nav-column p {
margin-bottom: 15px;
}
/* END Page Styling ------------------------------------------------------------*/
.filter-block > .link-list:last-of-type > li:first-of-type,
.expanding-block > .link-list:last-of-type > li:first-of-type,
.expanding-block > .link-list:last-of-type > li:first-of-type,
.relatedlinks .link-list:last-of-type > li:first-of-type {
margin: 0;
}
.filter-block,
.expanding-block {
position: relative;
padding-bottom: 10px;
border-bottom: 1px solid #EDEDED;
}
.nav-column .link-list .link-list {
padding-bottom: 0;
}
.nav-column {
width: 280px;
float: none;
margin-left: unset;
}
.nav-column > * {
font-size: 1.3333rem;
line-height: 24px;
}
.nav-column > h3 {
padding: 12px;
}
.nav-column > h3:hover {
text-decoration: none;
color: inherit;
background-color: #EDEDED;
}
.nav-column > h3:hover .additional {
background-color: #39373a;
color: #ffffff;
}
.nav-column .delete-list {
margin: 0;
padding-bottom: 12px;
}
.nav-column .delete-list > li {
padding: 12px;
}
.nav-column h3 {
margin-top: unset;
border-top: 2px solid #EDEDED;
}
.nav-column h3.toggler.interactive {
font-family: Arial, sans-serif;
font-weight: 700;
}
.nav-column h3.toggler.interactive.open button::after {
mask-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/expand_less.svg");
}
.nav-column h3.toggler.interactive button::after {
mask-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/expand_more.svg");
}
.nav-column ol.link-list {
margin-top: unset;
padding-bottom: 0;
}
.nav-column ul.subnav li.current {
background-color: #fde5d0;
}
.nav-column ul.subnav li a {
padding: 12px;
line-height: 24px;
border-radius: 8px;
font-style: normal;
text-decoration: none;
background: inherit;
display: flex;
justify-content: flex-start;
column-gap: 8px;
border-radius: 0;
}
.nav-column ul.subnav li a.current {
background-color: #fde5d0;
}
.nav-column ul.subnav li a:hover {
text-decoration: none;
color: inherit;
background-color: #EDEDED;
}
.nav-column ul.subnav li a:hover .additional {
background-color: #39373a;
color: #ffffff;
}
.nav-column ul.subnav li.expanded.current {
background-color: inherit;
}
.nav-column ul.subnav li.expanded.current ul > li a {
padding-left: 24px;
}
.nav-column.filters {
padding-top: 0;
}
.nav-column.filters .link-list > li a {
border-radius: 0;
display: grid;
grid-auto-flow: column;
justify-content: space-between;
}
.nav-column.filters .link-list > li a .additional {
background-color: #EDEDED;
border-radius: 24px;
width: max-content;
height: max-content;
padding: 3px 8px;
min-width: 14px;
text-align: center;
}
.nav-column.filters .link-list > li a:hover .additional {
background-color: #39373a;
}
.nav-column.filters .link-list > li.expandable > a {
font-style: italic;
}
.nav-column.filters .link-list > li.expandable > a .additional {
font-style: normal;
}
.nav-column.filters .link-list > li > .link-list > li a {
padding-left: 24px;
}
.nav-column .link-list,
.nav-column .filter-block,
.nav-column .expanding-block {
background-image: unset;
}
.filter-block button.quaternary,
.expanding-block button.quaternary {
background-image: none;
font-weight: 700;
font-size: 1.3333rem;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 8px;
border-radius: 8px;
padding: 8px 16px;
border: 2px solid currentColor;
font-family: Arial, sans-serif;
line-height: 24px;
background-color: transparent;
border: none;
text-decoration: none;
padding: 10px 18px 10px 0;
border-radius: 0;
font-weight: 400;
padding: inherit;
text-decoration: underline;
padding: 12px;
}
.filter-block button.quaternary:hover,
.expanding-block button.quaternary:hover,
.filter-block button.quaternary:focus,
.expanding-block button.quaternary:focus {
color: #ffffff;
background-color: #474747;
}
.filter-block button.quaternary.loading:not(.back)::after,
.expanding-block button.quaternary.loading:not(.back)::after,
.filter-block button.quaternary.loading.back::before,
.expanding-block button.quaternary.loading.back::before {
height: 20px;
width: 20px;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M480-87.87q-80.63%200-152.14-30.86-71.51-30.85-124.89-84.24-53.39-53.38-84.24-124.89Q87.87-399.37%2087.87-480q0-81.39%2030.83-152.48%2030.83-71.09%2084.17-124.53t124.79-84.28q71.46-30.84%20152.03-30.84%2018.46%200%2030.14%2011.67%2011.67%2011.68%2011.67%2029.34t-11.67%2029.82q-11.68%2012.17-29.83%2012.17-128.48%200-218.81%2089.66-90.32%2089.66-90.32%20218.97%200%20129.3%2090.32%20219.47%2090.33%2090.16%20218.81%2090.16%20129.8%200%20219.47-90.32%2089.66-90.33%2089.66-218.81%200-18.15%2012.17-29.83%2012.16-11.67%2029.82-11.67t29.34%2011.67q11.67%2011.68%2011.67%2030.14%200%2080.57-30.85%20152.03-30.86%2071.46-84.24%20124.81-53.38%2053.35-124.5%2084.17Q561.42-87.87%20480-87.87Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-animation: 1500ms linear normal none infinite running spinner-loader;
animation: 1500ms linear normal none infinite running spinner-loader;
}
.filter-block button.quaternary:focus,
.expanding-block button.quaternary:focus,
.filter-block button.quaternary:focus-within,
.expanding-block button.quaternary:focus-within,
.filter-block button.quaternary:focus-visible,
.expanding-block button.quaternary:focus-visible {
outline: 2px solid #ff7320;
outline-offset: -2px;
color: inherit;
border-color: transparent;
background-color: white;
background-image: unset;
}
.filter-block button.quaternary:focus:after,
.expanding-block button.quaternary:focus:after,
.filter-block button.quaternary:focus-within:after,
.expanding-block button.quaternary:focus-within:after,
.filter-block button.quaternary:focus-visible:after,
.expanding-block button.quaternary:focus-visible:after {
background-color: currentColor;
}
.filter-block button.quaternary::after,
.expanding-block button.quaternary::after,
.filter-block button.quaternary::before,
.expanding-block button.quaternary::before {
width: 20px;
height: 24px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
flex-shrink: 0;
}
.filter-block button.quaternary::after,
.expanding-block button.quaternary::after {
content: '';
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M647-440H200q-17%200-28.5-11.5T160-480q0-17%2011.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11%2028-11.5t28%2011.5l264%20264q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L508-188q-11%2011-27.5%2011T452-188q-12-12-12-28.5t12-28.5l195-195Z%22%2F%3E%3C%2Fsvg%3E");
}
.filter-block button.quaternary::before,
.expanding-block button.quaternary::before {
content: unset;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m313-440%20196%20196q12%2012%2011.5%2028T508-188q-12%2011-28%2011.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l264-264q11-11%2027.5-11t28.5%2011q12%2012%2012%2028.5T508-715L313-520h447q17%200%2028.5%2011.5T800-480q0%2017-11.5%2028.5T760-440H313Z%22%2F%3E%3C%2Fsvg%3E");
}
.filter-block button.quaternary:hover,
.expanding-block button.quaternary:hover {
text-decoration: underline;
text-underline-offset: 9px;
text-decoration-thickness: 2px;
color: #39373a;
background-color: transparent;
}
.filter-block button.quaternary:focus,
.expanding-block button.quaternary:focus,
.filter-block button.quaternary:focus-within,
.expanding-block button.quaternary:focus-within,
.filter-block button.quaternary:focus-visible,
.expanding-block button.quaternary:focus-visible {
color: #39373a;
background-color: unset;
text-decoration: none;
}
.filter-block button.quaternary:hover,
.expanding-block button.quaternary:hover {
text-underline-offset: auto;
}
.filter-block button.quaternary::after,
.expanding-block button.quaternary::after {
content: unset;
}
.filter-block button.quaternary.hidden,
.expanding-block button.quaternary.hidden {
display: none;
}
.filter-block button.quaternary:hover,
.expanding-block button.quaternary:hover,
.filter-block button.quaternary:focus,
.expanding-block button.quaternary:focus {
background-image: none;
}
.filter-block button.quaternary.more::before,
.expanding-block button.quaternary.more::before,
.filter-block button.quaternary > .button.quaternary:not(.open)::before,
.expanding-block button.quaternary > .button.quaternary:not(.open)::before {
content: none;
}
.filter-block button.quaternary.less::before,
.expanding-block button.quaternary.less::before,
.filter-block button.quaternary > .button.quaternary.open::before,
.expanding-block button.quaternary > .button.quaternary.open::before {
content: none;
}
.expanding-block button.quaternary {
margin-bottom: -1em;
}
.filter-block .link-list,
.expanding-block .link-list {
padding: 0;
border-top: 0;
}
.nav-column .link-list:last-child {
border-top: 0;
}
.delete-list {
margin-bottom: 30px;
}
.delete-list > li {
margin: 6px 0 0 0;
}
.delete-list > li > a > img {
padding-right: 5px;
vertical-align: -3px;
}
.filters.nav-column .delete-list a:hover,
.filters.nav-column .delete-list a:focus {
color: #ee0000;
text-decoration: line-through;
}
.hidden {
display: none;
}
dl.meta {
margin: 0;
padding: 0;
display: grid;
grid-template-columns: minmax(min-content, 34%);
grid-column-gap: 10px;
grid-row-gap: 13px;
font-size: 1.3333rem;
}
dl.meta:after {
/* Can't use a simple overflow: hidden here, since that'd break the centering of the dl.meta in one-column pages with floated images right before. */
content: "";
display: block;
clear: both;
}
dl.meta dt,
dl.meta dd {
margin: 0;
padding: 0;
}
dl.meta dt {
grid-column: 1;
text-wrap: nowrap;
overflow: hidden;
color: #757575;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
dl.meta dd {
grid-column: 2;
}
dl.meta dd audio {
width: 450px;
max-width: 100%;
margin: 0;
}
dl.dense dt,
dl.dense dd {
margin: 2px 0;
}
dl.meta dd.dense + dd.dense {
margin-top: 0;
margin-bottom: 4px;
}
p.additional,
span.additional,
.richtext.additional {
font-weight: normal;
color: #757575;
}
p.additional,
span.additional,
.richtext.additional {
font-size: 1.15rem;
}
p.additional + p.additional {
margin-top: 0;
}
p.additional + p.additional.separate {
margin-top: 1.33rem;
}
/** Teaser for when titledetail description is long **/
.teaser {
position: relative;
max-height: 6.5em;
/* 5 lines at line-height 1.3 */
overflow: hidden;
margin-bottom: 3em;
/* Create space for the open button. */
transition-delay: 0.00001s;
transition-duration: 0.5s;
transition-property: max-height, margin-bottom;
}
.teaser::after {
position: absolute;
bottom: 0;
display: block;
content: "";
width: 100%;
height: 1.3em;
/* 1 line at line-height 1.3 */
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAXCAYAAADKmiUPAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn%2FAACA6QAAdTAAAOpgAAA6mAAAF2%2BSX8VGAAAACXBIWXMAAC4jAAAuIwF4pT92AAAAPElEQVQI10XMOQqAUBAE0Wcnbl9F8P43lTEbk6KhmlJVgjnYgye4gzXYWozGEZy9fow%2B7x1YgktVvcH0AbGsCBQP71GMAAAAAElFTkSuQmCC") repeat-x bottom center;
/* teaser-gradient.png */
background-size: 100% 100%;
transition-delay: 0.00001s;
transition-duration: 0.1s;
transition-property: bottom;
}
.teaser.expanded {
max-height: none;
margin-bottom: 0;
}
.teaser.expanded[data-closeable] {
margin-bottom: 3em;
}
.teaser.expanded::after {
bottom: -1.4em;
transition-delay: 0.00001s;
transition-duration: 0.1s;
transition-property: bottom;
}
.teaser + p.teasertoggler {
position: absolute;
margin-top: -3em;
/* 3x13px inside the 3x16px margin-bottom. */
}
.teaser + p.teasertoggler .button {
background-image: none;
font-weight: 700;
font-size: 1.3333rem;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 8px;
border-radius: 8px;
padding: 8px 16px;
border: 2px solid currentColor;
font-family: Arial, sans-serif;
line-height: 24px;
background-color: transparent;
border: none;
text-decoration: none;
padding: 10px 18px 10px 0;
border-radius: 0;
font-weight: 400;
padding: inherit;
text-decoration: underline;
padding: 12px;
}
.teaser + p.teasertoggler .button:hover,
.teaser + p.teasertoggler .button:focus {
color: #ffffff;
background-color: #474747;
}
.teaser + p.teasertoggler .button.loading:not(.back)::after,
.teaser + p.teasertoggler .button.loading.back::before {
height: 20px;
width: 20px;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M480-87.87q-80.63%200-152.14-30.86-71.51-30.85-124.89-84.24-53.39-53.38-84.24-124.89Q87.87-399.37%2087.87-480q0-81.39%2030.83-152.48%2030.83-71.09%2084.17-124.53t124.79-84.28q71.46-30.84%20152.03-30.84%2018.46%200%2030.14%2011.67%2011.67%2011.68%2011.67%2029.34t-11.67%2029.82q-11.68%2012.17-29.83%2012.17-128.48%200-218.81%2089.66-90.32%2089.66-90.32%20218.97%200%20129.3%2090.32%20219.47%2090.33%2090.16%20218.81%2090.16%20129.8%200%20219.47-90.32%2089.66-90.33%2089.66-218.81%200-18.15%2012.17-29.83%2012.16-11.67%2029.82-11.67t29.34%2011.67q11.67%2011.68%2011.67%2030.14%200%2080.57-30.85%20152.03-30.86%2071.46-84.24%20124.81-53.38%2053.35-124.5%2084.17Q561.42-87.87%20480-87.87Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-animation: 1500ms linear normal none infinite running spinner-loader;
animation: 1500ms linear normal none infinite running spinner-loader;
}
.teaser + p.teasertoggler .button:focus,
.teaser + p.teasertoggler .button:focus-within,
.teaser + p.teasertoggler .button:focus-visible {
outline: 2px solid #ff7320;
outline-offset: -2px;
color: inherit;
border-color: transparent;
background-color: white;
background-image: unset;
}
.teaser + p.teasertoggler .button:focus:after,
.teaser + p.teasertoggler .button:focus-within:after,
.teaser + p.teasertoggler .button:focus-visible:after {
background-color: currentColor;
}
.teaser + p.teasertoggler .button::after,
.teaser + p.teasertoggler .button::before {
width: 20px;
height: 24px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
flex-shrink: 0;
}
.teaser + p.teasertoggler .button::after {
content: '';
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M647-440H200q-17%200-28.5-11.5T160-480q0-17%2011.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11%2028-11.5t28%2011.5l264%20264q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L508-188q-11%2011-27.5%2011T452-188q-12-12-12-28.5t12-28.5l195-195Z%22%2F%3E%3C%2Fsvg%3E");
}
.teaser + p.teasertoggler .button::before {
content: unset;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m313-440%20196%20196q12%2012%2011.5%2028T508-188q-12%2011-28%2011.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l264-264q11-11%2027.5-11t28.5%2011q12%2012%2012%2028.5T508-715L313-520h447q17%200%2028.5%2011.5T800-480q0%2017-11.5%2028.5T760-440H313Z%22%2F%3E%3C%2Fsvg%3E");
}
.teaser + p.teasertoggler .button:hover {
text-decoration: underline;
text-underline-offset: 9px;
text-decoration-thickness: 2px;
color: #39373a;
background-color: transparent;
}
.teaser + p.teasertoggler .button:focus,
.teaser + p.teasertoggler .button:focus-within,
.teaser + p.teasertoggler .button:focus-visible {
color: #39373a;
background-color: unset;
text-decoration: none;
}
.teaser + p.teasertoggler .button:hover {
text-underline-offset: auto;
}
.teaser + p.teasertoggler .button::after {
content: unset;
}
.teaser + p.teasertoggler .button.hidden {
display: none;
}
.teaser + p.teasertoggler .button:hover,
.teaser + p.teasertoggler .button:focus {
background-image: none;
}
.teaser + p.teasertoggler .button.more::before,
.teaser + p.teasertoggler .button > .button.quaternary:not(.open)::before {
content: none;
}
.teaser + p.teasertoggler .button.less::before,
.teaser + p.teasertoggler .button > .button.quaternary.open::before {
content: none;
}
.medium,
li.medium {
padding-top: 3px;
display: inline-flex;
align-items: center;
column-gap: 5px;
}
.medium::before,
li.medium::before {
width: 20px;
height: 20px;
}
li.medium {
display: flex;
}
/* NBC item type ('material') icons. */
.medium {
/* Youth page type ('material') icons/materialtypes. */
}
.medium.book::before,
.medium.multivolumebook::before,
.medium.unspecifiedbook::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/book.png");
}
.medium.book.white::before,
.medium.multivolumebook.white::before,
.medium.unspecifiedbook.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/book-white.png");
}
.medium.bigletterbook::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/largeprintbook.png");
}
.medium.bigletterbook.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/largeprintbook-white.png");
}
.medium.ebook::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/ebook.png");
}
.medium.ebook.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/ebook-white.png");
}
.medium.dyslexiabook::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/dyslexieboek.png");
}
.medium.dyslexiabook.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/dyslexieboek-white.png");
}
.medium.dwarsligger::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/dwarsligger.png");
}
.medium.dwarsligger.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/dwarsligger-white.png");
}
.medium.audiobook::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/audiobook.png");
}
.medium.audiobook.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/audiobook-white.png");
}
.medium.digitalaudiobook::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/digitalaudiobook.png");
}
.medium.digitalaudiobook.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/digitalaudiobook-white.png");
}
.medium.spokenbook::before,
.medium.daisyrom::before,
.medium.daisyaudiostream::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/spokenbook.png");
}
.medium.spokenbook.white::before,
.medium.daisyrom.white::before,
.medium.daisyaudiostream.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/spokenbook-white.png");
}
.medium.movie::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/video.png");
}
.medium.movie.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/video-white.png");
}
.medium.music::before,
.medium.album::before,
.medium.musicmovie::before,
.medium.audio::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/album.png");
}
.medium.music.white::before,
.medium.album.white::before,
.medium.musicmovie.white::before,
.medium.audio.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/album-white.png");
}
.medium.track::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/track.png");
}
.medium.track.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/track-white.png");
}
.medium.sheetmusic::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/sheetmusic.png");
}
.medium.sheetmusic.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/sheetmusic-white.png");
}
.medium.software::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/software.png");
}
.medium.software.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/software-white.png");
}
.medium.game::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/game.png");
}
.medium.game.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/game-white.png");
}
.medium.magazine::before,
.medium.magazinearticle::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/magazine.png");
}
.medium.magazine.white::before,
.medium.magazinearticle.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/magazine-white.png");
}
.medium.edumedia::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/edumedia.png");
}
.medium.edumedia.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/edumedia-white.png");
}
.medium.digitaalprentenboek::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/picturebook.png");
}
.medium.digitaalprentenboek.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/picturebook-white.png");
}
.medium.arrangements::before,
.medium.documentationmap::before,
.medium.letter::before,
.medium.handwriting::before,
.medium.unknown::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/arrangement.png");
}
.medium.arrangements.white::before,
.medium.documentationmap.white::before,
.medium.letter.white::before,
.medium.handwriting.white::before,
.medium.unknown.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/arrangement-white.png");
}
.medium.article::before,
.medium.image::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/artikel.png");
}
.medium.article.white::before,
.medium.image.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/artikel-white.png");
}
.medium.online-source::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/online-bron.png");
}
.medium.online-source.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/online-bron-white.png");
}
.medium.readinglist::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/lezenvoordelijst.png");
}
.medium.readinglist.white::before {
content: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/icons/materialtypes/lezenvoordelijst-white.png");
}
/** Book covers **/
img.cover {
display: block;
margin-top: 3px;
-webkit-box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 3px 4px rgba(0, 0, 0, 0.2);
}
img.full.cover,
.main-column .rich-items img.full.cover,
.main-column .rich-list .viz.full {
max-width: 320px;
max-height: 512px;
}
img.small.cover,
.main-column .rich-items img.small.cover,
.main-column .rich-list .viz.small {
max-width: 200px;
max-height: 320px;
}
img.highlighted.cover,
.main-column .rich-items img.highlighted.cover,
.main-column .rich-list .viz.highlighted {
max-width: 180px;
max-height: 288px;
}
img.highgrid.cover,
.main-column .rich-items img.highgrid.cover,
.main-column .rich-list .viz.highgrid {
max-width: 165px;
max-height: 220px;
}
img.list-big.cover,
.main-column .rich-items img.list-big.cover,
.main-column .rich-list .viz.list-big {
max-width: 120px;
max-height: 192px;
}
img.highlighted-small.cover,
.main-column .rich-items img.highlighted-small.cover,
.main-column .rich-list .viz.highlighted-small {
max-width: 105px;
max-height: 168px;
}
img.narrowgrid.cover,
.main-column .rich-items img.narrowgrid.cover,
.main-column .rich-list .viz.narrowgrid {
max-width: 100px;
max-height: 160px;
}
.rich-items img.etalage,
.rich-list .viz.etalage,
img.etalage.cover,
.main-column .rich-items img.etalage.cover,
.main-column .rich-list .viz.etalage {
max-width: 80px;
max-height: 128px;
}
img.extrasmall.cover,
.list4 .rich-list img.extrasmall,
.main-column .rich-items img.extrasmall,
.main-column .rich-items img.extrasmall.cover,
.main-column .rich-list .viz.extrasmall,
.main-column .rich-list .content.extrasmall img {
max-width: 60px;
max-height: 96px;
}
img.list.cover,
.main-column .rich-items img.list.cover,
.main-column .rich-list .viz.list {
max-width: 40px;
max-height: 64px;
}
/* Cover placeholders */
.coverplaceholder {
display: block;
position: relative;
padding: 0.5em;
border: none;
border-radius: 12px;
-webkit-box-shadow: 0 3px 4px -3px rgba(0, 0, 0, 0.15), 0 3px 4px 3px rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 4px -3px rgba(0, 0, 0, 0.15), 0 3px 4px 3px rgba(0, 0, 0, 0.08);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.coverplaceholder.full {
width: 320px;
height: 512px;
font-size: 3.45rem;
}
.coverplaceholder.small {
/* "small", to keep it the same as content images */
width: 200px;
height: 320px;
font-size: 2.0125rem;
}
.coverplaceholder.highlighted {
width: 180px;
height: 288px;
font-size: 1.8208rem;
}
.coverplaceholder.highgrid {
width: 165px;
height: 220px;
font-size: 1.6292rem;
}
.coverplaceholder.list-big {
width: 120px;
height: 192px;
font-size: 1.2458rem;
}
.coverplaceholder.highlighted-small {
width: 105px;
height: 168px;
font-size: 1.15rem;
}
.coverplaceholder.narrowgrid {
width: 100px;
height: 160px;
font-size: 1.15rem;
}
.coverplaceholder.etalage {
width: 80px;
height: 128px;
font-size: 1.0542rem;
}
.coverplaceholder.extrasmall {
width: 60px;
height: 96px;
font-size: 0.9583rem;
}
.coverplaceholder.list {
width: 40px;
height: 64px;
letter-spacing: 1px;
line-height: 1.5;
font-size: 0.575rem;
/* Made more legible by the letter-spacing and line-height. */
}
/* Placeholders are portrait ('book') format, except for music/album/track, where they're square. */
.coverplaceholder.music.full,
.coverplaceholder.album.full,
.coverplaceholder.track.full {
height: 320px;
}
.coverplaceholder.music.small,
.coverplaceholder.album.small,
.coverplaceholder.track.small {
height: 200px;
}
.coverplaceholder.music.highlighted,
.coverplaceholder.album.highlighted,
.coverplaceholder.track.highlighted {
height: 180px;
}
.coverplaceholder.music.highgrid,
.coverplaceholder.album.highgrid,
.coverplaceholder.track.highgrid {
height: 165px;
}
.coverplaceholder.music.list-big,
.coverplaceholder.album.list-big,
.coverplaceholder.track.list-big {
height: 120px;
}
.coverplaceholder.music.highlighted-small,
.coverplaceholder.album.highlighted-small,
.coverplaceholder.track.highlighted-small {
height: 105px;
}
.coverplaceholder.music.narrowgrid,
.coverplaceholder.album.narrowgrid,
.coverplaceholder.track.narrowgrid {
height: 100px;
}
.coverplaceholder.music.etalage,
.coverplaceholder.album.etalage,
.coverplaceholder.track.etalage {
height: 80px;
}
.coverplaceholder.music.extrasmall,
.coverplaceholder.album.extrasmall,
.coverplaceholder.track.extrasmall {
height: 60px;
}
.coverplaceholder.music.list,
.coverplaceholder.album.list,
.coverplaceholder.track.list {
height: 40px;
}
.coverplaceholder,
.coverplaceholder.variant1 {
background-color: #8348ae;
}
.coverplaceholder.variant2 {
background-color: #dc0032;
}
.coverplaceholder.variant3 {
background-color: #005db9;
}
.coverplaceholder.variant4 {
background-color: #96460b;
}
.coverplaceholder.variant5 {
background-color: #b6be00;
}
.coverplaceholder:before {
display: block;
position: absolute;
top: 50%;
left: 5%;
overflow: hidden;
max-height: 95%;
width: 90%;
content: attr(data-title);
font-weight: bold;
text-align: center;
text-transform: uppercase;
text-overflow: ellipsis;
color: rgba(255, 255, 255, 0.8);
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
.enrichments-container .enrichment-item {
min-height: 79px;
padding-left: 150px;
margin-top: 40px;
position: relative;
}
.enrichments-container .enrichment-item::before {
content: "";
display: inline-block;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 135px;
}
.enrichments-container .extract::before {
background-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/logo-uittrekselbank.png");
}
.enrichments-container .review::before {
background-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/logo-literom.png");
}
.enrichments-container .delpher::before {
background-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/logo-delpher.svg");
}
.rich-highlight:not(:last-child) {
/* Used by list6; don't remove in WAAS-4806. */
margin-bottom: 10px;
padding-bottom: 10px;
border-bottom: 1px solid #EDEDED;
}
/* Widget library: rich-items and grid-items. */
.rich-items,
.grid-items {
margin-bottom: 10px;
border-bottom: 1px solid #EDEDED;
}
div.rich-items {
overflow: hidden;
}
.rich-items:last-child,
.grid-items:last-child {
margin-bottom: 0;
border-bottom: 0;
/* The solid line demarcates where the list ends and the next bit of content begins. If there's no next bit of content (within the widget), remove the line. Note: this does mean that next content (if it exists) should always be a sibling; otherwise exceptions will need to be invented to restore the line. */
}
.rich-items > li {
clear: both;
overflow: hidden;
padding: 10px 0;
border-top: 1px solid #EDEDED;
}
.rich-items > li:first-child,
.rich-items.interactive[data-component="bw.ui.paginator"] > li:nth-child(3n+1) {
padding-top: 0;
border-top: 0;
}
.rich-items img {
float: left;
max-width: 60px;
max-height: 96px;
margin: 4px 10px 5px 0;
}
.rich-items:last-child > li:last-child img {
margin-bottom: 0;
}
.rich-items img.offset {
float: right;
margin-right: 0;
margin-left: 10px;
}
.rich-items .content {
float: left;
width: 100%;
padding-left: 70px;
/* Default 10px padding next to a default 60px wide img.*/
line-height: 1.2;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Allow the 100% width to take padding into account. */
}
.rich-items .content dl.meta {
line-height: 1.31;
}
.rich-items > .content {
padding-bottom: 10px;
/* If this isn't a list, but just a single item. */
}
.rich-items:last-child > .content {
padding-bottom: 0;
/* But if there's nothing after the .rich-items, then the biebwidget will already provide the white-space. */
}
.rich-items .content.full {
padding-left: 340px;
/* 20px margin next to a .cover.full */
}
.rich-items .content.small {
padding-left: 220px;
/* 20px margin next to a .cover.small */
}
.main-column .rich-items .content.highlighted,
.rich-items .content.highlighted {
padding-left: 200px;
/* 20px margin next to a .cover.highlighted */
}
.main-column .rich-items .content.list-big,
.rich-items .content.list-big {
padding-left: 140px;
/* 20px margin next to a .cover.list-big */
}
.main-column .rich-items .content.highlighted-small,
.rich-items .content.highlighted-small {
padding-left: 125px;
/* 20px margin next to a .cover.highlighted-small */
}
.main-column .rich-items .content.etalage,
.rich-items .content.etalage {
padding-left: 100px;
/* 20px margin next to a .cover.etalage */
}
.main-column .rich-items .content.extrasmall {
padding-left: 80px;
/* 20px margin next to a .cover.extrasmall */
}
.rich-items .content.list {
padding-left: 60px;
/* 20px margin next to a .cover.list */
}
.rich-items .content.calendar {
padding-left: 5em;
/* em-based, since this is text. */
}
.main-column .rich-items .content.empty,
.rich-items .content.empty {
padding-left: 0;
}
.rich-items p.viz {
/* Slightly increase specificity to prevent JS-generated coverplaceholders from being matched. */
margin-left: -100%;
}
.rich-items .viz {
position: relative;
/* Keep the viz clickable when there's positioned content next to it. */
float: left;
}
.rich-items .viz.calendar {
margin-top: 2px;
}
.rich-items .viz a {
text-decoration: none;
}
.rich-items .viz a:focus > img:only-child,
.rich-items .viz a:focus > span.coverplaceholder {
/* Due to absolute positioning and overflow: hidden, focus on this link is rather un-intuitive, so let's make it a bit more obvious. */
-webkit-box-shadow: 2px 2px #ffffff, 5px 5px 3px #ff7320;
box-shadow: 2px 2px #ffffff, 5px 5px 3px #ff7320;
}
.rich-items .content.more {
position: relative;
padding-bottom: 2.5em;
}
.main-column .rich-items .content.more {
padding-bottom: 3em;
}
.rich-items .content.more h3 .button,
.rich-items .content.more h4 .button {
position: absolute;
bottom: 0;
display: block;
margin-bottom: 0;
padding-bottom: 0;
font-weight: normal;
font-family: Arial, sans-serif;
}
.rich-items .content.more h3 .button {
font-size: 1.3417rem;
}
.rich-items .content.more h4 .button {
font-size: 1.3417rem;
}
.main-column .rich-items .content.more h3 .button,
.main-column .rich-items .content.more h4 .button {
margin-bottom: 5px;
padding-bottom: 3px;
}
.main-column .rich-items .content.more h3 .button.tertiary,
.main-column .rich-items .content.more h4 .button.tertiary {
padding-bottom: 0;
}
.more .button {
font-family: Arial, sans-serif;
font-size: 1.5333rem;
}
.rich-items h3 > .creator {
display: block;
margin-bottom: -3px;
font-size: 1.15rem;
}
.rich-items h3 + p {
padding-top: 2px;
}
.rich-items .content .link-list > li {
float: left;
margin-right: 20px;
list-style: none;
}
.rich-items .content .link-list > li.medium {
padding-left: 22px;
text-indent: 0;
}
.main-column .rich-items,
.grid-items {
clear: left;
/* Clear the float of .tools, so that margins will collapse. */
margin-top: 13px;
margin-bottom: 20px;
}
.main-column .rich-items:last-child {
margin-bottom: 0;
}
.main-column .rich-items > li {
padding: 17px 0 12px 0;
}
.main-column .rich-items > li:first-child {
padding-top: 0;
}
.main-column .rich-items img {
max-width: 200px;
max-height: 320px;
margin: 4px 20px 10px 0;
}
.main-column .rich-items.tiny img.cover,
.main-column .rich-items.tiny img {
max-width: 60px;
max-height: 80px;
}
.main-column .rich-items.tiny .coverplaceholder.extrasmall {
max-width: 50px;
max-height: 80px;
font-size: 0.75rem;
}
.main-column .rich-items.small img {
max-width: 120px;
max-height: 192px;
}
.main-column .rich-items .viz img {
margin-bottom: 5px;
}
.main-column .rich-items .content {
padding-left: 220px;
}
.main-column .rich-items .content.calendar {
padding-left: 5em;
/* em-based, since this is text. */
}
.main-column .rich-items .content img.offset {
float: right;
margin-top: -1.083em;
margin-right: 0;
margin-left: 10px;
}
.main-column .rich-items .content .additional img.offset {
margin-top: -1.1818em;
}
.main-column .rich-items .content.more img.offset {
max-width: 120px;
max-height: 90px;
/* Purposefully limit this to low height. */
margin-bottom: 0;
}
.main-column .small.rich-items,
.main-column .tiny.rich-items {
overflow: hidden;
border-bottom: 0;
}
.main-column .small.rich-items > li,
.main-column .tiny.rich-items > li {
float: left;
clear: none;
width: 48%;
margin-left: 4%;
padding: 10px 0;
border-top: 0;
}
.main-column .tiny.rich-items > li {
width: 32%;
margin-left: 2%;
}
.main-column .small.rich-items > li:nth-of-type(2n+1),
.main-column .tiny.rich-items > li:nth-of-type(3n+1) {
clear: left;
margin-left: 0;
}
.main-column .small.rich-items .content:not(.calendar) {
padding-left: 140px;
}
.main-column .tiny.rich-items .content:not(.calendar) {
padding-left: 70px;
}
/* 'Responsive' styling for etalage within narrow columns on landingpage. */
.biebwidget-column .main-column .small.rich-items:not(.sliding) > li {
width: 100%;
margin-left: 0;
border-top: 1px solid #EDEDED;
}
.biebwidget-column .main-column .small.rich-items:not(.sliding) > li:first-child {
border-top: 0;
}
.biebwidget-column .main-column .small.rich-items:not(.sliding) > li:nth-of-type(2n+1) {
clear: none;
margin-left: 0;
}
.biebwidget-column .main-column .tiny.rich-items > li {
width: 100%;
margin-left: 0;
border-top: 1px solid #EDEDED;
}
.biebwidget-column .main-column .tiny.rich-items > li:first-child {
border-top: 0;
}
.biebwidget-column .main-column .tiny.rich-items > li:nth-of-type(3n+1),
.biebwidget-column .main-column .tiny.rich-items > li:nth-of-type(2n+1) {
clear: none;
margin-left: 0;
}
.biebwidget-double-column .main-column .tiny.rich-items > li {
width: 48%;
margin-left: 4%;
}
.biebwidget-double-column .main-column .tiny.rich-items > li:nth-of-type(3n+1) {
clear: none;
margin-left: 4%;
}
.biebwidget-double-column .main-column .tiny.rich-items > li:nth-of-type(2n+1) {
clear: left;
margin-left: 0;
}
/* .accompanying on content following a h2 or h3 guarantees placement close to the title, with an appropriate amount of white-space to follow. */
h3 + .accompanying {
margin-bottom: 5px;
}
.main-column h2 + .accompanying {
margin-top: -6px;
margin-bottom: 10px;
}
.main-column h2 + .accompanying + .accompanying,
.main-column h3 + .accompanying + .accompanying {
margin-top: -10px;
margin-bottom: 10px;
}
.main-column h3 + .accompanying {
margin-bottom: 10px;
}
.grid-items {
overflow: hidden;
}
.grid-items > li {
overflow: hidden;
float: left;
width: 200px;
/* This is a reasonable default width, which in a 2-column page shows 4-5 items per row. This can be increased/decreased on individual pages as necessary. */
height: 4.2062em;
margin: 0 15px 20px 0;
padding: 0 0 140px 0;
/* max-height of the image, plus 7px (for visually 10px) white-space underneath */
}
.grid-items.no-subitems > li {
height: 2.4063em;
}
.grid-items.high > li {
width: 165px;
padding-bottom: 199px;
}
.grid-items.narrow > li {
width: 100px;
}
.grid-items > li > h3,
.grid-items > li > h4 {
position: relative;
overflow: hidden;
height: 2.4em;
/* 2 lines */
margin-bottom: 0.25em;
padding: 140px 0 0.1em 0;
/* padding-top = max-height of the image, plus 7px (for visually 10px) white-space underneath; padding-bottom = 2px separation to the subtitle. */
line-height: 1.2;
text-align: center;
}
.grid-items.high > li > h3,
.grid-items.high > li > h4 {
padding-top: 199px;
}
.grid-items .imgwrapper {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
/* define the space available for the image */
height: 133px;
}
.grid-items.high .imgwrapper {
height: 192px;
}
.grid-items .imgwrapper > img,
.grid-items .imgwrapper > .coverplaceholder {
position: absolute;
right: 0;
bottom: 0;
/* line out at the baseline */
left: 0;
max-width: 100%;
max-height: 100%;
margin: 0 auto;
/* center horizontally, made possible by right: 0 + left: 0 */
}
.grid-items p.calendar {
position: absolute;
bottom: 0;
float: none;
width: 100%;
}
.grid-items p.calendar span {
padding-right: 0;
}
.grid-items p.calendar.period span.until.date-day {
background-position: 48% 0;
}
.grid-items > li > p {
overflow: hidden;
max-height: 2.4em;
/* 2 lines */
line-height: 1.2;
text-align: center;
}
a.feed {
padding-left: 15px;
background-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/feed-tiny.png");
background-position: left 63%;
background-repeat: no-repeat;
}
.main-column .tools {
float: left;
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 32px;
}
.main-column .tools > p.totalresults {
border-bottom: 0;
}
.main-column .tools .searchsorting {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
column-gap: 2rem;
}
.main-column .tools .searchsorting select {
font-size: 1.3rem;
width: min-content;
padding-right: 30px;
border-radius: 8px 0 0 8px;
appearance: none;
background-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/expand_more.svg");
background-repeat: no-repeat;
background-position: right 4px center;
background-size: 24px;
min-height: 24px;
padding-top: 2px;
padding-bottom: 2px;
}
.main-column .tools .searchsorting button[type="submit"] {
margin: 5px 0 5px 0;
color: #39373a;
font-weight: 700;
font-size: 1.3333rem;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
column-gap: 8px;
border-radius: 8px;
padding: 8px 16px;
border: 2px solid currentColor;
font-family: Arial, sans-serif;
line-height: 24px;
background-color: #ffffff;
border: 2px solid #39373a;
}
.main-column .tools .searchsorting button[type="submit"]:hover,
.main-column .tools .searchsorting button[type="submit"]:focus {
color: #ffffff;
background-color: #474747;
}
.main-column .tools .searchsorting button[type="submit"].loading:not(.back)::after,
.main-column .tools .searchsorting button[type="submit"].loading.back::before {
height: 20px;
width: 20px;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2220px%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2220px%22%20fill%3D%22%235f6368%22%3E%3Cpath%20d%3D%22M480-87.87q-80.63%200-152.14-30.86-71.51-30.85-124.89-84.24-53.39-53.38-84.24-124.89Q87.87-399.37%2087.87-480q0-81.39%2030.83-152.48%2030.83-71.09%2084.17-124.53t124.79-84.28q71.46-30.84%20152.03-30.84%2018.46%200%2030.14%2011.67%2011.67%2011.68%2011.67%2029.34t-11.67%2029.82q-11.68%2012.17-29.83%2012.17-128.48%200-218.81%2089.66-90.32%2089.66-90.32%20218.97%200%20129.3%2090.32%20219.47%2090.33%2090.16%20218.81%2090.16%20129.8%200%20219.47-90.32%2089.66-90.33%2089.66-218.81%200-18.15%2012.17-29.83%2012.16-11.67%2029.82-11.67t29.34%2011.67q11.67%2011.68%2011.67%2030.14%200%2080.57-30.85%20152.03-30.86%2071.46-84.24%20124.81-53.38%2053.35-124.5%2084.17Q561.42-87.87%20480-87.87Z%22%2F%3E%3C%2Fsvg%3E");
-webkit-animation: 1500ms linear normal none infinite running spinner-loader;
animation: 1500ms linear normal none infinite running spinner-loader;
}
.main-column .tools .searchsorting button[type="submit"]:focus,
.main-column .tools .searchsorting button[type="submit"]:focus-within,
.main-column .tools .searchsorting button[type="submit"]:focus-visible {
outline: 2px solid #ff7320;
outline-offset: -2px;
color: inherit;
border-color: transparent;
background-color: white;
background-image: unset;
}
.main-column .tools .searchsorting button[type="submit"]:focus:after,
.main-column .tools .searchsorting button[type="submit"]:focus-within:after,
.main-column .tools .searchsorting button[type="submit"]:focus-visible:after {
background-color: currentColor;
}
.main-column .tools .searchsorting button[type="submit"]::after,
.main-column .tools .searchsorting button[type="submit"]::before {
width: 20px;
height: 24px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
flex-shrink: 0;
}
.main-column .tools .searchsorting button[type="submit"]::after {
content: '';
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M647-440H200q-17%200-28.5-11.5T160-480q0-17%2011.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11%2028-11.5t28%2011.5l264%20264q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L508-188q-11%2011-27.5%2011T452-188q-12-12-12-28.5t12-28.5l195-195Z%22%2F%3E%3C%2Fsvg%3E");
}
.main-column .tools .searchsorting button[type="submit"]::before {
content: unset;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m313-440%20196%20196q12%2012%2011.5%2028T508-188q-12%2011-28%2011.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l264-264q11-11%2027.5-11t28.5%2011q12%2012%2012%2028.5T508-715L313-520h447q17%200%2028.5%2011.5T800-480q0%2017-11.5%2028.5T760-440H313Z%22%2F%3E%3C%2Fsvg%3E");
}
.main-column .tools .searchsorting button[type="submit"]:hover {
background-color: #EDEDED;
border-color: #39373a;
color: #39373a;
}
.main-column .tools .searchsorting button[type="submit"]:focus,
.main-column .tools .searchsorting button[type="submit"]:focus-within,
.main-column .tools .searchsorting button[type="submit"]:focus-visible {
background-color: #EDEDED;
}
.main-column .tools .searchsorting button[type="submit"].secondary.button {
margin-top: 0;
margin-left: -2rem;
height: 24px;
border-left: 0;
border-radius: 0 8px 8px 0;
padding: 2px 14px;
}
@media screen and (max-width: 768px) {
.main-column .tools .searchsorting button[type="submit"] {
font-size: 0rem;
column-gap: 0;
}
.main-column .tools .searchsorting button[type="submit"]::after {
margin-left: 0;
}
}
.main-column .tools .searchsorting label {
vertical-align: bottom;
padding-bottom: 0;
}
.main-column .tools .searchsorting .button.primary,
.main-column .tools .searchsorting .button.secondary {
margin-top: 3px;
margin-bottom: 0;
}
.main-column .tools .searchsorting select {
vertical-align: unset;
}
@media only screen and (min-width: 0) and (max-width: 750px) {
.biebwidget-content.widget-bnl-searchresults .main-column .search .tools p.totalresults,
.biebwidget-content.widget-bnl-overview .main-column .agenda .tools p.totalresults {
flex: 100%;
}
.biebwidget-content.widget-bnl-searchresults .main-column .search .tools form.searchsorting,
.biebwidget-content.widget-bnl-overview .main-column .agenda .tools form.searchsorting {
order: 10;
}
}
@media only screen and (min-width: 750.1px) {
.biebwidget-content.widget-bnl-searchresults .main-column .search .tools .skiplinks,
.biebwidget-content.widget-bnl-overview .main-column .agenda .tools .skiplinks {
display: none;
}
}
/* If there's content before the .totalresults / .tools line, give it a margin-top (visually equal to 15px),
so that minimal white-space between that content and this line is guaranteed (margin-collapsing will take care of it not adding up).
This unfortunately relies on the AEM-generated class .overview, and only works if that previous content is within a .sectioned div.
Note that we don't want to _always_ do this, since by itself we want this closer to the h2, with its baseline lined out with a sidebar title. */
.main-column h2 + .sectioned + .overview > .totalresults:first-child {
clear: both;
margin-top: 13px;
}
.main-column h2 + .sectioned + .overview > .tools:first-child {
clear: both;
margin-top: 4px;
}
.main-column .overview + .sectioned {
margin-top: 20px;
}
.main-column .tools + .categorized,
.main-column .tools + .mapcontainer {
clear: left;
}
.main-column .categorized {
overflow: auto;
}
.main-column .categorized h3 {
margin-bottom: 20px;
}
/* Widget library: common elements */
/* Calendar look */
p.calendar,
span.viz.calendar {
float: left;
line-height: 0.8;
}
p.calendar span,
span.viz.calendar span {
display: block;
margin-bottom: 4px;
font-weight: bold;
text-align: center;
}
p.calendar span.date-weekday,
span.viz.calendar span.date-weekday {
font-size: 1.9167rem;
}
p.calendar span.date-day,
span.viz.calendar span.date-day {
font-size: 2.6833rem;
}
p.calendar span.date-month,
span.viz.calendar span.date-month {
font-size: 1.9167rem;
}
p.calendar.period span.date-day,
span.viz.calendar.period span.date-day {
text-indent: -1px;
font-size: 1.9167rem;
}
p.calendar.period span.date-month,
span.viz.calendar.period span.date-month {
font-size: 1.4375rem;
}
p.calendar.period span.until,
span.viz.calendar.period span.until {
position: relative;
left: 10px;
}
p.calendar.period span.until.date-day,
span.viz.calendar.period span.until.date-day {
padding-top: 1rem;
}
p.calendar.period span.until.date-day::before,
span.viz.calendar.period span.until.date-day::before {
content: '/';
position: absolute;
left: 45%;
top: 0;
transform: rotate(-120deg);
font-size: 16px;
display: block;
}
.richtext p.calendar,
.richtext span.calendar {
margin-bottom: 8px;
}
/* A .struct title exists to create a correct document outline, but isn't wanted as visual output since that outline is obvious because of context. */
.struct {
position: absolute;
left: -9999px;
}
.richtext {
clear: both;
}
.richtext .constructed h3,
.richtext .constructed h4,
.richtext .constructed h5 {
/* With constructed richtext, we trust that offset images are sparse enough that it's safe not to clear: right. */
clear: left;
}
.richtext .intro + .maintext > .section:first-child > h3:first-child,
.richtext .intro + .maintext > .section:first-child > h4:first-child,
.richtext .intro + .maintext > .title.section:first-child + .section > h3:first-child,
.richtext .intro + .maintext > .title.section:first-child + .section > h4:first-child,
.richtext .intro + h3,
.richtext .intro + h4,
.richtext img.offset + p + h3,
.richtext img.offset + p + h4,
.richtext img.offset + p + h5 {
/* These last img + p + hx never happen anymore due to AEM sectioning. :/ */
clear: left;
}
.richtext h3,
.richtext h4,
.richtext h5 {
/* Is it safe enough to always clear left (rather than both) these? We'll have to try... */
clear: left;
}
.richtext .intro + img,
.richtext .intro + img + p,
.richtext .intro + object,
.richtext .intro + object + p,
.richtext .intro + div.video,
.richtext .intro + div.video + p {
clear: right;
}
.richtext img {
float: left;
clear: left;
max-width: 200px;
max-height: 320px;
margin: 3px 20px 10px 0;
border-radius: 16px;
}
.intro img {
max-width: 384px;
max-height: 614px;
}
.richtext img.offset {
float: right;
clear: right;
margin-right: 0;
margin-left: 3.657rem;
}
.richtext div.video {
display: block;
float: none;
clear: both;
width: 100%;
max-width: 640px;
max-height: 1024px;
margin-right: 0;
}
.richtext div.video.standalone.video-small {
max-width: 384px;
max-height: 614px;
}
.richtext div.video.standalone.video-large {
max-width: 100%;
max-height: 2048px;
}
.maintext.richtext img.offset {
float: right;
clear: right;
margin-right: 0;
margin-left: 3.657rem;
}
.maintext.richtext img {
margin-top: 5px;
/* Deal with the higher line-height. */
border-radius: 8px;
float: left;
clear: left;
margin-left: 0;
margin-right: 3.657rem;
}
.maintext.richtext p + img,
.richtext .maintext p + img {
margin-top: 19px;
/* Maintain the white-space between paragraphs as well. */
}
div.video .aspect-ratio {
position: relative;
width: 100%;
height: 0;
padding-bottom: 57%;
}
div.video .aspect-ratio.square {
padding-bottom: 100%;
}
div.video .aspect-ratio.threeQuarters {
padding-bottom: 75%;
}
div.video .aspect-ratio.widescreen {
padding-bottom: 56.25%;
}
div.video .aspect-ratio iframe {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
}
audio,
iframe {
width: 100%;
border: 0;
}
/* .sliding is the generic class for all items which should transition with a 'sliding' motion. */
.sliding.interactive {
position: relative;
overflow: hidden;
transition-delay: 0.00001s;
transition-duration: 0.3s;
transition-property: height;
}
/* Percentage-based layouts have larger items, so they should transition more slowly. */
.sliding.interactive[data-itemwidth] {
transition-duration: 0.7s;
}
/* Percentage-based layouts have larger items, so they should transition more slowly. */
.sliding.interactive[data-itemwidth] > li {
transition-duration: 0.7s;
}
.sliding.rich-items.interactive[data-itemwidth] > li {
position: absolute;
top: 0;
}
.main-column .sliding.small.rich-items.interactive > li {
clear: none;
margin-right: 2%;
margin-left: 0;
}
.main-column .sliding.small.rich-items.interactive > li.hidden {
display: none;
}
/* By setting the .animating class, a sliding item can also transition the 'left' property.
This extra class is desired, because in those cases you'll also want to be able to position items directly, to prepare them for animating. */
.sliding.interactive > li.animating {
transition-property: margin-left, left;
}
.slidingnav {
display: flex;
justify-content: flex-end;
align-items: flex-end;
position: relative;
gap: 40px;
}
.slidingnav button.prev,
.slidingnav button.next {
z-index: 2;
border-radius: 50%;
text-indent: -9999em;
cursor: pointer;
background-repeat: no-repeat;
top: unset !important;
background-color: #ffffff;
color: #39373a;
border: 2px solid #39373a;
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.slidingnav button.prev::after,
.slidingnav button.next::after {
content: '';
display: block;
vertical-align: middle;
width: 16px;
height: 16px;
background-color: #39373a;
mask-repeat: no-repeat;
mask-position: center;
}
.slidingnav button.prev:hover,
.slidingnav button.next:hover,
.slidingnav button.prev:not(.passive):hover,
.slidingnav button.next:not(.passive):hover {
background-color: #fde5d0;
}
.slidingnav button.prev.passive,
.slidingnav button.next.passive {
visibility: hidden;
}
.slidingnav button.prev::after {
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m313-440%20196%20196q12%2012%2011.5%2028T508-188q-12%2011-28%2011.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l264-264q11-11%2027.5-11t28.5%2011q12%2012%2012%2028.5T508-715L313-520h447q17%200%2028.5%2011.5T800-480q0%2017-11.5%2028.5T760-440H313Z%22%2F%3E%3C%2Fsvg%3E");
}
.slidingnav button.next::after {
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M647-440H200q-17%200-28.5-11.5T160-480q0-17%2011.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11%2028-11.5t28%2011.5l264%20264q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L508-188q-11%2011-27.5%2011T452-188q-12-12-12-28.5t12-28.5l195-195Z%22%2F%3E%3C%2Fsvg%3E");
}
.slidingnav + ul {
margin-top: 0;
}
.slideshow:hover .slidingnav button:not(.passive) {
background-color: rgba(255, 255, 255, 0.3);
}
.slidingindicators {
padding-top: 5px;
text-align: center;
}
.slidingindicators .dot {
display: inline-block;
width: 8px;
height: 8px;
margin: 1px 5px;
border-radius: 50%;
background-color: #999;
}
.slidingindicators .dot.current {
margin: 0 4px;
border: 1px solid #999;
background-color: #fff;
}
ul.rotatingitems.interactive {
position: relative;
height: 200px;
}
ul.slidingitems.interactive {
position: relative;
min-height: 100px;
}
ul.rotatingitems.interactive > li,
ul.slidingitems.interactive > li {
position: absolute;
top: 0;
width: 100%;
text-align: center;
}
ul.rotatingitems > li img {
width: auto;
/* Temporarily override "combo image" styling. */
display: inline;
/* idem */
max-width: 100%;
max-height: 200px;
}
/* bw.ui.foldable ------------------------------------------------------ */
.toggler.interactive button {
display: flex;
justify-content: space-between;
width: 100%;
row-gap: 8px;
}
.toggler.interactive button::after,
.toggler.interactive button::before {
width: 20px;
height: 24px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
flex-shrink: 0;
}
.toggler.interactive button::after {
content: '';
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M647-440H200q-17%200-28.5-11.5T160-480q0-17%2011.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11%2028-11.5t28%2011.5l264%20264q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L508-188q-11%2011-27.5%2011T452-188q-12-12-12-28.5t12-28.5l195-195Z%22%2F%3E%3C%2Fsvg%3E");
}
.toggler.interactive button::before {
content: unset;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m313-440%20196%20196q12%2012%2011.5%2028T508-188q-12%2011-28%2011.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l264-264q11-11%2027.5-11t28.5%2011q12%2012%2012%2028.5T508-715L313-520h447q17%200%2028.5%2011.5T800-480q0%2017-11.5%2028.5T760-440H313Z%22%2F%3E%3C%2Fsvg%3E");
}
.toggler.interactive button::after {
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13%207H11V11H7V13H11V17H13V13H17V11H13V7ZM12%202C6.49%202%202%206.49%202%2012C2%2017.51%206.49%2022%2012%2022C17.51%2022%2022%2017.51%2022%2012C22%206.49%2017.51%202%2012%202ZM12%2020C7.59%2020%204%2016.41%204%2012C4%207.59%207.59%204%2012%204C16.41%204%2020%207.59%2020%2012C20%2016.41%2016.41%2020%2012%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.toggler.interactive.open button,
.toggler.interactive.opening button {
display: flex;
justify-content: space-between;
width: 100%;
row-gap: 8px;
}
.toggler.interactive.open button::after,
.toggler.interactive.opening button::after,
.toggler.interactive.open button::before,
.toggler.interactive.opening button::before {
width: 20px;
height: 24px;
mask-size: contain;
mask-position: center;
mask-repeat: no-repeat;
background-color: currentColor;
flex-shrink: 0;
}
.toggler.interactive.open button::after,
.toggler.interactive.opening button::after {
content: '';
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22M647-440H200q-17%200-28.5-11.5T160-480q0-17%2011.5-28.5T200-520h447L451-716q-12-12-11.5-28t12.5-28q12-11%2028-11.5t28%2011.5l264%20264q6%206%208.5%2013t2.5%2015q0%208-2.5%2015t-8.5%2013L508-188q-11%2011-27.5%2011T452-188q-12-12-12-28.5t12-28.5l195-195Z%22%2F%3E%3C%2Fsvg%3E");
}
.toggler.interactive.open button::before,
.toggler.interactive.opening button::before {
content: unset;
mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20height%3D%2224%22%20viewBox%3D%220%20-960%20960%20960%22%20width%3D%2224%22%3E%3Cpath%20d%3D%22m313-440%20196%20196q12%2012%2011.5%2028T508-188q-12%2011-28%2011.5T452-188L188-452q-6-6-8.5-13t-2.5-15q0-8%202.5-15t8.5-13l264-264q11-11%2027.5-11t28.5%2011q12%2012%2012%2028.5T508-715L313-520h447q17%200%2028.5%2011.5T800-480q0%2017-11.5%2028.5T760-440H313Z%22%2F%3E%3C%2Fsvg%3E");
}
.toggler.interactive.open button::after,
.toggler.interactive.opening button::after {
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M13%207H11V11H7V13H11V17H13V13H17V11H13V7ZM12%202C6.49%202%202%206.49%202%2012C2%2017.51%206.49%2022%2012%2022C17.51%2022%2022%2017.51%2022%2012C22%206.49%2017.51%202%2012%202ZM12%2020C7.59%2020%204%2016.41%204%2012C4%207.59%207.59%204%2012%204C16.41%204%2020%207.59%2020%2012C20%2016.41%2016.41%2020%2012%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
.toggler.interactive.open button::after,
.toggler.interactive.opening button::after {
mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20d%3D%22M7%2011V13H17V11H7ZM12%202C6.48%202%202%206.48%202%2012C2%2017.52%206.48%2022%2012%2022C17.52%2022%2022%2017.52%2022%2012C22%206.48%2017.52%202%2012%202ZM12%2020C7.59%2020%204%2016.41%204%2012C4%207.59%207.59%204%2012%204C16.41%204%2020%207.59%2020%2012C20%2016.41%2016.41%2020%2012%2020Z%22%20fill%3D%22black%22%2F%3E%0A%3C%2Fsvg%3E%0A");
}
h3.toggler.interactive button {
background-position: 2px 50%;
}
h3.toggler.interactive.open button,
h3.toggler.interactive.opening button {
background-position: 0 55%;
}
.toggler.interactive button:focus {
color: #ff7320;
}
.toggler.interactive:not(.open):not(.opening):not(.closing) + * {
display: none;
}
.toggler.interactive.open + dl.meta,
.toggler.interactive.opening + dl.meta,
.toggler.interactive.closing + dl.meta {
display: grid !important;
}
/* Explicit definition of top margin in order to prevent stuttering behaviour while sliding down with jQuery */
.toggler + .link-list {
margin-top: 0;
}
.toggler.interactive + dl.meta {
margin-left: 20px;
}
.mapcontainer {
width: 100%;
height: 384px;
border: 1px solid #EDEDED;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.mapstatus {
width: 100%;
min-height: 2.5em;
border: 1px solid #EDEDED;
border-top: 0;
padding: 6px 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
p.mapstatus + .rich-items,
p.mapstatus + .rich-list {
margin-top: 0;
}
.mapstatus:empty {
border-color: transparent;
}
.mapcontainer.hidden + .mapstatus {
display: none;
}
.slidingitems li img {
display: block;
width: 100%;
}
.text-oneline {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
p.pdf-preview > a {
display: inline-block;
min-height: 21px;
padding-left: 40px;
background-image: url("https://www.biblioplus.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl-new/clientlibs/resources/widget/preview.png");
background-position: left center;
background-repeat: no-repeat;
}
/* Library: buttons ------------------------------------------------------------*/
.button {
/* Generic button */
display: inline-block;
/* Make it possible to add some margin above and below the button. */
}
button.button,
button.default,
button.link {
/* Don't use