body .products .product.unavailable::after, body .categories .product.unavailable::after, body .products .category.unavailable::after, body .categories .category.unavailable::after { padding: 4px; top: 35px; right: -35px; } body .page-container { width: 97%; max-width: 1200px; min-height: 50em; margin: 0 auto; padding: 0 4px; } body .page-container .content-container { background-color: #fff; box-shadow: 0 1px 3px 0 #868686; min-height: 22rem; padding: 20px 40px; margin-bottom: 20px; color: #505450; } @media (max-width: 900px) { body .page-container .content-container { padding: 10px; } } body .widget-bnl-siteheader .become-member { margin-top: 45.5px; } body .event-details .reveal { text-decoration: none; } body .event .date-date { font-family: "TheMix", Arial, sans-serif; } body .message { border-radius: calc(var(--border-radius) * 0.5rem); } body .product-detail .product-card { border-radius: calc(var(--border-radius) * 0.6rem); } body .product-detail .product-card .product-image, body .product-detail .product-card .date-image { border-radius: calc(var(--border-radius) * 0.5rem) calc(var(--border-radius) * 0.5rem) 0 0; } body .product-detail .product-card .product-details table td .tag { border-radius: calc(var(--border-radius) * 0.2rem); } body .date-image a, body .date-image img { border-radius: calc(var(--border-radius) * 0.5rem); } body .date-content .highlighted, body .date-content .canceled { border-radius: calc(var(--border-radius) * 0.2rem); } body .date-content h3, body .date-content p { margin-bottom: calc(var(--border-radius) * 0.5rem); } body .date-content h4 { margin-bottom: calc(var(--border-radius) * 0.25rem); } body .date-details .tag { border-radius: calc(var(--border-radius) * 0.2rem); } /* Rules which must exist to set up a full-fledged site, but which aren't scoped to affect solely widgets (and aren't strictly necessary for externally embedded widgets), and so can't live in widget.css */ html { overflow-x: hidden; /* The absolutely positioned .plectrum in the footer, as well as an Opera bug with box-shadow, causes side-scrollers. We don't want side-scrollers! FIXME [Jb 13-10-2020] WAAS-4087: investigate if we can get rid of this somehow in the current world. */ float: left; /* Stretch around all the floated elements, so that the html-bg actually is bottom aligned to the window. Expected behaviour is unclear in the spec; see https://bugzilla.mozilla.org/show_bug.cgi?id=590491 */ width: 100%; /* Make this full-width to allow center aligning of the #container to keep working. */ font-size: 75%; /* Effective 12px */ background-color: #efefef; } body { margin: 0; font-family: Arial, sans-serif; font-size: 1.3417rem; } #bibliotheek-nl-page { width: 97%; max-width: 1200px; min-height: 50em; margin: 0 auto; padding: 0 4px; /* 4px padding to give room for the box-shadows and outlines, given that overflow is hidden */ } .bibliotheek-container { overflow: hidden; } /* landingpage layout*/ .biebwidget-double-column { float: left; min-width: 560px; width: 68%; } .biebwidget-double-column .biebwidget { margin-right: 3%; } .biebwidget-column { float: left; min-width: 280px; width: 32%; } .biebwidget-double-column .biebwidget-column { width: 50%; } .biebwidget-double-column .biebwidget-column .biebwidget { margin-right: 6%; } /*** Widget styling ***/ /* Widget frame styling */ /* A .standard biebwidget is a bordered widget as seen on the homepage or any subsequent page; 20px padding, 20px margin-bottom, box-shadow. A .bordered biebwidget is a .standard widget without padding; used for widgets with atypical spacing (drawing up to the border) like the tabbedbanner. A .basic biebwidget only has the 20px margin-bottom; used for widgets with a completely unique style, like the schatkamer. A biebwidget without one of the above classes doesn't get any container styling at all. Used for unique page-elements like the navigatiebalk. A .overflowing biebwidget draws content outside its container, so doesn't have the standard overflow: hidden which helps widgets not interfere with each other. */ .biebwidget > h2 { margin: 0; /* reset */ } .standard.biebwidget, .bordered.biebwidget, .basic.biebwidget { margin-bottom: 20px; } .standard.biebwidget, .bordered.biebwidget { background-color: #ffffff; -webkit-box-shadow: 0 1px 3px 0 #868686; box-shadow: 0 1px 3px 0 #868686; } .standard.biebwidget > { padding: 40px 40px; } @media only screen and (min-width: 0) and (max-width: 469px) { .standard.biebwidget > { padding: 20px 20px; } } .standard.biebwidget > h2 + { padding-top: 0; } .standard.expandable.biebwidget > h2.label + { padding-top: 40px; } .standard.biebwidget > h2, .bordered.biebwidget > h2, .standard.biebwidget > .biebwidget-content:first-child > h2:first-child, .bordered.biebwidget > .biebwidget-content:first-child > h2:first-child { padding: 10px 40px; } @media only screen and (min-width: 0) and (max-width: 469px) { .standard.biebwidget > h2, .bordered.biebwidget > h2, .standard.biebwidget > .biebwidget-content:first-child > h2:first-child, .bordered.biebwidget > .biebwidget-content:first-child > h2:first-child { padding: 10px 20px; } } .widget-columns .standard.biebwidget > { padding: 20px 20px; } .widget-columns .standard.biebwidget > h2 + { padding-top: 0; } .widget-columns .standard.biebwidget > h2, .widget-columns .bordered.biebwidget > h2, .widget-columns .standard.biebwidget > .biebwidget-content:first-child > h2:first-child, .widget-columns .bordered.biebwidget > .biebwidget-content:first-child > h2:first-child { padding: 10px 20px; } .standard.biebwidget > h2, .bordered.biebwidget > h2, .standard.biebwidget > .biebwidget-content:first-child > h2:first-child, .bordered.biebwidget > .biebwidget-content:first-child > h2:first-child { font-weight: normal; color: #ff7320; font-family: "TheMix", Arial, sans-serif; } .standard.biebwidget > h2, .standard.biebwidget > .biebwidget-content:first-child > h2:first-child { font-size: 1.725rem; } .bordered.biebwidget > h2, .bordered.biebwidget > .biebwidget-content:first-child > h2:first-child { font-size: 1.725rem; } h2 { font-family: "TheMix", Arial, sans-serif; } .overflowing.biebwidget > { overflow: visible; } .header { /* There are so many cases where we add absolutely positioned content relative to the .header (e.g. contrast gradients), that we opt to just always create a new stacking context. */ position: relative; margin-bottom: 20px; padding-top: 40px; padding-bottom: 40px; } .header.low { /* Non-low headers should set a larger padding-top for the .header or a margin-top for the h2. */ padding-bottom: 20px; } .header.inverted { background-color: #595959; color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); background-size: cover; background-position: left center; } .header.inverted.contrast_light::before, .header.inverted.contrast_heavy::before { content: ""; position: absolute; display: block; bottom: 0; left: 0; width: 42.5em; height: 100%; background-size: 100%; } .header.inverted.contrast_light::before { background-image: linear-gradient(to right, rgba(0, 0, 0,.3) 0%, rgba(0, 0, 0,0) 100%); } .header.inverted.contrast_heavy::before { background-image: linear-gradient(to right, rgba(0, 0, 0,.7) 0%, rgba(0, 0, 0,0) 100%); } .header.inverted.contrast_block { overflow: hidden; } .header.inverted.contrast_block h2, .header.inverted.contrast_block h3, .header.inverted.contrast_block p { float: left; clear: both; margin-bottom: 3px; padding: 5px 10px; background-color: rgba(0, 0, 0, 0.5); overflow-wrap: anywhere; /* The deprecated word-wrap: break-word; on most h2s appears to not take effect due to the float here? */ } .header.inverted.contrast_block h2 { padding-top: 3px; padding-bottom: 3px; } .header.inverted.contrast_block p > .button:only-child { margin-top: 0; margin-bottom: 0; } .header.inverted h2, .header.inverted .additional { color: inherit; } .header.inverted a:not(.button) { color: #ffffff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .header.inverted a:not(.button):hover, .header.inverted a:not(.button):focus { color: #ffffff; /* Given the colored background, we don't want to use a different color to differentiate this state. */ text-decoration: none; } .header.inverted .button.quaternary.back { color: #ffffff; background-color: transparent; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVQI12P4//8/AxLuAGFkgZn/IeAMiOMCYsAEgFgQJPgOKrAbJADSBRI0RpJYBVPJAFWxGyrxjuHfv3/IlqWBVAMAiq14Ui+nJNMAAAAASUVORK5CYII="); } .header.inverted .button.quaternary.back:hover, .header.inverted .button.quaternary.back:focus { text-decoration: none; color: #ffffff; background-color: transparent; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAHCAYAAADAp4fuAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAARElEQVQI12P4//8/AxLuAGFkgZn/IeAMiOMCYsAEgFgQJPgOKrAbJADSBRI0RpJYBVPJAFWxGyrxjuHfv3/IlqWBVAMAiq14Ui+nJNMAAAAASUVORK5CYII="); } .header > * { /* Position content within the .header by default as well, so absolutely positioned content won't obscure it, and at the same time create a stacking context for positioning representative images on .product pages. */ position: relative; z-index: 1; } .standard.biebwidget > .header { /* Existing .bordered.biebwidgets with a .header have many different behaviours and breakpoints, so have to do the equivalent in page-specific CSS. */ overflow: hidden; margin-top: -40px; margin-right: -40px; margin-left: -40px; padding-right: 40px; padding-left: 40px; } @media only screen and (min-width: 0) and (max-width: 469px) { .standard.biebwidget > .header { /* Line out with .InsideWidgetDecorations() as long as that doesn't violate @componentMinimumHorizontalSpace */ margin-top: -20px; margin-right: -20px; margin-left: -20px; padding-right: 20px; padding-left: 20px; } } .biebwidget > p.endorsement { margin: -5px 0 0 0; padding: 0 20px 20px 20px; text-align: right; color: #868686; font-size: 1.0542rem; } .biebwidget > p.endorsement > a { color: inherit; } .biebwidget > p.endorsement > a:hover, .biebwidget > p.endorsement > a:focus { color: #ff7320; } /* Generic widget styling */ { /* Basic prevention of this widget interfering with others; Also force clear floats. */ overflow: hidden; color: #39373a; } /* 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: "TheMix", 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, ul + p:not(.skiplinks), ol + p, p + .rich-items, p + .rich-list, p + .itemnav, p + .tagcloud { margin-top: 20px; } .sectioned .section { margin-top: 20px; } 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, .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: #39373a; text-decoration: underline; } a.button, .tabs a, .link-list a, .filter-block a, .delete-list a, .pagenav a, .metanav a, .metanav button { text-decoration: none; } a img { border: none; } a:hover, * a:hover, a:focus, * a:focus, button.link:hover, button.link:focus { text-decoration: underline; color: #ff7320; } .intro { font-size: 1.6771rem; } .intro + .rich-items, .intro + .rich-list { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left top; } ol > li > a:only-child, ul > li > a:only-child { /* This is too generic, requiring overrides for .richtext later in this file, and then that requires an override in tablinks and probably other places. Unfortunately this was carried over from WAAS1, so nearly impossible to determine what all depends on it. */ display: block; } /* 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.nav { float: left; width: 100%; } .biebwidget-content.detail .main-column-wrapper:not(.nav) h2, .biebwidget-content.detail .main-column-wrapper:not(.nav) h2 ~ p, .biebwidget-content.detail .main-column-wrapper:not(.nav) form::before, .biebwidget-content.detail .main-column-wrapper:not(.nav) .form-row, .biebwidget-content.detail .main-column-wrapper:not(.nav) .intro p, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext p:not(.viz):not(.accessiblebannertext):not(.grid-title), .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext ul:not(.grid-list):not(.sliding):not(.features), .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext .scrollablelist, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext ol, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext > h3, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext *:not(li) > h3, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext > h4, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext *:not(li) > h4, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext h5, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext h6, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext dl.meta, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext object, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext div.video, .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext .table table:not(.full), .biebwidget-content.detail .main-column-wrapper:not(.nav) .message { max-width: 765px; margin-right: auto; margin-left: auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .biebwidget-content.detail .main-column-wrapper:not(.nav) .richtext span.image { display: block; max-width: 765px; margin-right: auto; margin-left: auto; } .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%; padding-right: 40px; 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 .title { text-decoration: underline; } 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-top: -8px; 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: #ff7320; font-size: 5.75rem; text-indent: -2px; font-family: "TheMix", 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: "TheMix", 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: #101310; 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 { margin: 6px 0; 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; } .nav-column .link-list, .filter-block, .expanding-block { position: relative; padding-bottom: 10px; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left bottom; } .nav-column .link-list .link-list { padding-bottom: 0; } .filter-block.filter-block-with-more-button { padding-bottom: 2.833em; } .nav-column.filters.catalogus .filter-block > .link-list:last-of-type > li:first-of-type { margin-left: 15px; } .nav-column.filters.catalogus button.quaternary.more, .nav-column.filters.catalogus button.quaternary.less { padding-left: 15px; } .nav-column.filters.catalogus button.quaternary.more::before, .nav-column.filters.catalogus button.quaternary.less::before { content: none; } .nav-column.filters.catalogus .link-list button { padding-left: 15px; } .nav-column.filters.catalogus .link-list > li { margin-left: 15px; } .nav-column.filters.catalogus .link-list > li > .link-list > li { font-style: italic; } .nav-column.filters.catalogus .link-list > li:not(.expandable) > a { background: none; padding-left: 0; } .nav-column.filters.catalogus .link-list > li.expandable > a { padding-left: 15px; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-next.png"); } .nav-column.filters.catalogus .link-list > li.expandable > a:hover, .nav-column.filters.catalogus .link-list > li.expandable > a:focus { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-next-hover.png"); } .nav-column.filters.catalogus .link-list > li.expandable.selected > a { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/dropdown.png"); } .nav-column.filters.catalogus .link-list > li.expandable.selected > a:hover, .nav-column.filters.catalogus .link-list > li.expandable.selected > a:focus { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/dropdown-hover.png"); } .filter-block button, .expanding-block button { position: absolute; bottom: 0.833em; } .filter-block button.quaternary, .expanding-block button.quaternary { background-image: none; } .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: "+"; display: inline-block; margin-right: 0.45rem; } .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: "\2212"; display: inline-block; margin-right: 0.45rem; } .expanding-block button.quaternary { margin-bottom: -1em; } .filter-block .link-list, .expanding-block .link-list { padding: 0; background-image: none; } .nav-column .link-list:last-child { background-image: none; } ul.subnav { /* There'll be several unnecessary properties in here. Sadly that's the price of making them configurable. */ } ul.subnav a { display: block; padding-bottom: 2px; text-decoration: none; color: #39373a; } ul.subnav a:focus, ul.subnav a:hover { color: #ff7320; } ul.subnav > li { margin: 3px 0 2px 0; font-size: 1.15rem; } ul.subnav > li.current > a { color: #ff7320; } ul.subnav ul { margin-top: 2px; padding-top: 2px; padding-bottom: 1px; } ul.subnav ul a:focus, ul.subnav ul a:hover { color: #ff7320; } ul.subnav ul > li { margin: 2px 0 2px 0; font-size: 1.0542rem; } ul.subnav ul > li.current > a { color: #ffffff; } ul.subnav a { padding-left: 10px; } ul.subnav > li { padding-bottom: 2px; } ul.subnav > li.expanded { padding-bottom: 0; } ul.subnav > li:not(:last-child):not(.expanded) { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left bottom; } ul.subnav > li.current > a { background: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/link-item-hover.png") no-repeat left 5px; } ul.subnav ul { border-top: 1px solid #868686; border-bottom: 1px solid #868686; padding-left: 10px; } ul.subnav ul > li.current > a { background: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/link-item-hover.png") no-repeat left 5px; } ul.subnav ul > li.current > a { padding-top: 3px; border-radius: 4px; background-color: #ff7320; background-image: none; -webkit-box-shadow: 0 5px 4px -2px rgba(255, 255, 255, 0.2) inset, 0 8px 11px -6px rgba(255, 255, 255, 0.35) inset; box-shadow: 0 5px 4px -2px rgba(255, 255, 255, 0.2) inset, 0 8px 11px -6px rgba(255, 255, 255, 0.35) inset; } .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; } 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 { float: left; display: block; } dl.meta dt { width: 26%; clear: left; overflow: hidden; padding-right: 10px; padding-left: 10px; text-indent: -10px; text-overflow: ellipsis; color: #868686; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } dl.meta dd { min-width: 15em; max-width: 74%; } dl.meta dd audio { width: 450px; max-width: 100%; margin: 0; } dl.meta dd + dd { clear: left; margin-left: 26%; } dl.meta dt, dl.meta dd { margin: 6px 0; } dl.dense dt, dl.dense dd { margin: 2px 0; } dl.dense dd + dd { margin: 0 0 4px 26%; } dl.meta dd.dense + dd.dense { margin-top: 0; margin-bottom: 4px; } .main-column-wrapper.nav dl.meta dt { width: 34%; } .main-column-wrapper.nav dl.meta dd { max-width: 64%; } .main-column-wrapper.nav dl.meta dd + dd, .main-column-wrapper.nav dl.meta.dense dd + dd { margin-left: 34%; } dl.narrow { overflow: hidden; margin: 0 0 10px 0; padding: 0 0 3px 0; border-bottom: 1px solid #d0d0d0; } dl.narrow:last-child { margin-bottom: 0; border-bottom: 0; } dl.narrow dt { float: left; clear: both; width: 100%; padding: 6px 9em 6px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left top; } dl.narrow dt:first-child { padding-top: 0; background-image: none; } dl.narrow dd { float: right; width: 8em; /* The width cannot be set to a lower value because of the bigger fontsize of the DOK styling. */ margin-left: -8em; padding-top: 6px; padding-bottom: 6px; text-align: right; } dl.narrow dt:first-child + dd { padding-top: 0; } dl.narrow dd + dd { clear: right; padding-top: 0; padding-bottom: 6px; } p.additional, span.additional, .richtext.additional { font-weight: normal; color: #868686; } p.additional, span.additional, .richtext.additional { font-size: 1.15rem; } p.additional + p.additional { margin-top: 0; } p.additional + p.additional.separate { margin-top: 20px; } p.additional a:not(:hover):not(:focus), span.additional a:not(:hover):not(:focus) { color: inherit; } /** 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; } .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: "+"; display: inline-block; margin-right: 0.45rem; } .teaser + p.teasertoggler .button.less::before, .teaser + p.teasertoggler .button > .button.quaternary.open::before { content: "\2212"; display: inline-block; margin-right: 0.45rem; } .medium, li.medium { min-height: 20px; /* Background image dimensions: 20x20px */ padding-top: 3px; padding-left: 25px; background-position: 0 40%; background-repeat: no-repeat; display: inline-block; } li.medium { display: block; } /* NBC item type ('material') icons. */ .medium { /* Youth page type ('material') icons/materialtypes. */ } .medium.book, .medium.multivolumebook, .medium.unspecifiedbook { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/book.png"); } .medium.book.white, .medium.multivolumebook.white, .medium.unspecifiedbook.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/book-white.png"); } .medium.bigletterbook { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/largeprintbook.png"); } .medium.bigletterbook.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/largeprintbook-white.png"); } .medium.ebook { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/ebook.png"); } .medium.ebook.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/ebook-white.png"); } .medium.dyslexiabook { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/dyslexieboek.png"); } .medium.dyslexiabook.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/dyslexieboek-white.png"); } .medium.dwarsligger { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/dwarsligger.png"); } .medium.dwarsligger.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/dwarsligger-white.png"); } .medium.audiobook { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/audiobook.png"); } .medium.audiobook.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/audiobook-white.png"); } .medium.digitalaudiobook { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/digitalaudiobook.png"); } .medium.digitalaudiobook.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/digitalaudiobook-white.png"); } .medium.spokenbook, .medium.daisyrom, .medium.daisyaudiostream { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/spokenbook.png"); } .medium.spokenbook.white, .medium.daisyrom.white, .medium.daisyaudiostream.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/spokenbook-white.png"); } .medium.movie { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/video.png"); } .medium.movie.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/video-white.png"); } .medium.music, .medium.album, .medium.musicmovie, .medium.audio { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/album.png"); } .medium.music.white, .medium.album.white, .medium.musicmovie.white, .medium.audio.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/album-white.png"); } .medium.track { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/track.png"); } .medium.track.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/track-white.png"); } .medium.sheetmusic { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/sheetmusic.png"); } .medium.sheetmusic.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/sheetmusic-white.png"); } .medium.software { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/software.png"); } .medium.software.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/software-white.png"); } .medium.game { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/game.png"); } .medium.game.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/game-white.png"); } .medium.magazine, .medium.magazinearticle { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/magazine.png"); } .medium.magazine.white, .medium.magazinearticle.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/magazine-white.png"); } .medium.edumedia { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/edumedia.png"); } .medium.edumedia.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/edumedia-white.png"); } .medium.digitaalprentenboek { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/picturebook.png"); } .medium.digitaalprentenboek.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/picturebook-white.png"); } .medium.arrangements, .medium.documentationmap, .medium.letter, .medium.handwriting, .medium.unknown { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/arrangement.png"); } .medium.arrangements.white, .medium.documentationmap.white, .medium.letter.white, .medium.handwriting.white, .medium.unknown.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/arrangement-white.png"); } .medium.article, .medium.image { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/artikel.png"); } .medium.article.white, .medium.image.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/artikel-white.png"); } .medium.online-source { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/online-bron.png"); } .medium.online-source.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/online-bron-white.png"); } .medium.readinglist { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/icons/materialtypes/lezenvoordelijst.png"); } .medium.readinglist.white { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/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: 264px; } 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, .main-column .rich-items img.extrasmall, .main-column .rich-items img.extrasmall.cover, .main-column .rich-list .viz.extrasmall { 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; -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: 264px; 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-shadow: 0 0 1px rgba(0, 0, 0, 0.1); 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 { padding-bottom: 15px; } .enrichments-container .enrichment-item { min-height: 79px; padding-left: 150px; margin-top: 15px; 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.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/logo-uittrekselbank.png"); } .enrichments-container .review::before { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/logo-literom.png"); } .enrichments-container .delpher::before { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/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 #d0d0d0; } /* Widget library: rich-items and grid-items. */ .rich-items, .grid-items { margin-bottom: 10px; border-bottom: 1px solid #d0d0d0; } 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; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left top; } .rich-items > li:first-child, .rich-items.interactive[data-component="bw.ui.paginator"] > li:nth-child(3n+1) { padding-top: 0; background-image: none; } .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.3417rem; } .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; background-image: none; } .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; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left top; } .biebwidget-column .main-column .small.rich-items:not(.sliding) > li:first-child { background-image: none; } .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; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/bg-dotted.png"); background-repeat: repeat-x; background-position: left top; } .biebwidget-column .main-column .tiny.rich-items > li:first-child { background-image: none; } .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.8071em; 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.75em; } .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.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/feed-tiny.png"); background-position: left 63%; background-repeat: no-repeat; } p.totalresults, .main-column .tools { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #d0d0d0; } .main-column .tools { float: left; width: 100%; margin-top: -9px; } .main-column .tools > p.totalresults { float: left; margin-bottom: 0; padding-top: 9px; /* align to baseline with tools */ padding-bottom: 0; border-bottom: 0; } .main-column .tools .searchsorting { float: right; margin-left: 15px; } .main-column .tools .searchsorting label { vertical-align: bottom; } .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; } .biebwidget-content.widget-bnl-searchresults .main-column .search .tools .skiplinks .button, .biebwidget-content.widget-bnl-overview .main-column .agenda .tools .skiplinks .button { float: left; clear: left; margin-top: 9px; clip-path: inset(0 0 0 0); transition: clip-path 0.25s, margin-top 0.25s; } @media (min-width: 750.1px) { .biebwidget-content.widget-bnl-searchresults .main-column .search .tools .skiplinks .button:not(:focus), .biebwidget-content.widget-bnl-overview .main-column .agenda .tools .skiplinks .button:not(:focus) { height: 0; margin-top: -1em; margin-bottom: 0; border-top: 0; border-bottom: 0; padding-top: 0; padding-bottom: 0; outline: 0; overflow: hidden; clip-path: inset(100% 0 0 0); } } /* 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; padding-right: 20px; 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: 10px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAICAYAAADwdn+XAAAAIGNIUk0AAG2YAABzjgAA+swAAIT6AAB5gQAA/RMAADBtAAASKQ0eJk4AAAAJcEhZcwAACxMAAAsTAQCanBgAAABcSURBVCjPYwgICWAgAyvB2KRqDAXiVUD8H4hnEmsAyLZyIL4L1QjDIIOU8Gl0QbINhu9CDcPpBUEctu0G4jRsFiHbNhNN0zsg7kC2DZcB5cTahs8FHVAXKJEapQBcY5gn+xhLYQAAAABJRU5ErkJggg==") no-repeat 4px 0; } .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; } .intro img { max-width: 384px; max-height: 614px; } .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; } .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. */ } .maintext.richtext p + img, .richtext .maintext p + img { margin-top: 19px; /* Maintain the white-space between paragraphs as well. */ } .richtext ol > li > a:only-child, .richtext ul > li > a:only-child { display: inline; /* Can't trust that this really is the only child, and doesn't offer any benefit to keep it display: block anyway. */ } 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; } /* By default it's assumed that sliding is always done using margin-left. */ .sliding.interactive > li { transition-delay: 0.00001s; transition-duration: 0.3s; transition-property: margin-left; transition-timing-function: cubic-bezier(0.02, 0.01, 0.47, 1); /* Emulate jQuery 'swing'. */ } /* 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; } .sliding.rich-items.interactive > li { display: none; } .sliding.rich-items.interactive > li.current, .sliding.rich-items.interactive > li.current ~ li, .sliding.grid-items.interactive > li.current, .sliding.grid-items.interactive > li.current ~ li { display: block; } .sliding.grid-items.interactive > li.current ~ li.hidden { display: none; } .slidingnav { position: relative; transition-delay: 0.00001s; transition-duration: 0.3s; transition-property: height; } .slidingnav button.prev, .slidingnav button.next { position: absolute; top: 50px; z-index: 2; display: block; width: 18px; height: 26px; margin: 0 5px; border: 0; border-radius: 50%; padding: 10px 14px; text-indent: -9999em; cursor: pointer; background-repeat: no-repeat; background-color: rgba(255, 255, 255, 0.05); -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .slidingnav button.prev { left: 0; background-position: 45% center; /* Visually centered, even if actually slightly off-center. */ background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-prev-larger-glowy.png"); } .slidingnav button.prev:not(.passive):hover, .slidingnav button.prev:not(.passive):focus { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAYAAAC6nQw6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAACQ0lEQVR42mL8//8/AzUAQACxkKCWCYhVgFgRyj8PxK+BGOwSgAAi1iBmIA5gOL7Mm+H2EQWwiF3yeQYF4z1A1g6QYQABxEKkIYEMp9dGMdw6HAgXPbLQkoGRiYNB3vAqkPcIIICYiDLk1KoohsvbAxn+/maA41/fOBjuntAEyoMwA0AAsRA05OjiKIaLWwKxqvj9Hc4ECCAWvIYcmBXFcGYddkNY2H4w6HqchwY6A0AAseA0ZO/UKIaTK3Eb4lk1j0FKaw805hgAAogFqyE7+6MYji/FbYhvwzwGdbutsBgDCQMEEAuGIdu6oxiOLsRhCPsPhsCmeQyaTiBDtsMMAQGAAIIZxAhOJ1vaoxgOz8NtSGj7PAZtFwxDQAAggGAGyTJc3uEEDFzchkT0zGPQccNqCAgABBAsHWkynN+kidOQ6AnzgDG0DZchIAAQQEwE0/WfnxwMD85KAllc+NQDBBBM4jqDod91nIYdnBPIsLk1EhyOkPDEAAABBDPoMdDp+xjsU9bjNQwUjgwMntgMAwgg5oaGBhj7FjBt/GH4+ZWV4eE57OF1dY8ug7jKVyAGhdMdZCmAAEI2CCR5E69h//6y4DIMIICQDSLHsH9AkbsgYYAAwhYLf4F4PYNv9TKcYQaKyaUFScDYdAHyREFCAAGEKzqJM+zQXEMgC4QZAAIIX3kEMwwRa3gAQAARKmpxGwZK8ZC0B05/AAHESGR1BCn8QekIlpXQCn+AAGIkoV5jBGduaBmNXh0BBBAjtSpIgAADADfe0YvJ5XZzAAAAAElFTkSuQmCC"); background-color: rgba(255, 255, 255, 0.4); } .slidingnav button.prev.passive { position: absolute; left: -9999px; } .slidingnav button.next { right: 0; background-position: 55% center; background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-next-larger-glowy.png"); } .slidingnav button.next:not(.passive):hover, .slidingnav button.next:not(.passive):focus { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAaCAYAAAC6nQw6AAAACXBIWXMAAAsTAAALEwEAmpwYAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAACaklEQVR42mL8//8/AzUAQACxILEZgVgUiA2h/PtAfAeI/xFjEEAAsSAZ4sHw4KwLw6G5EINUbR4wWEZtBbI2APFfQgYBBBDMIFmGh+d9GI4sTGL4/58DLHLrMAMDC7sAg2kwyJL1hAwDCCCYQZoMd09oMvz6xoEie3l7IMN/oH6zMAZChgEEECKMfn9nYPjxGVPFmbWBDL9/MjBYx+I1DCCAYAadZ9D1OM9w/YAlw59fHBiqji8NBFvkkIbTMIAAYm5oaADR3xh4RZkYBKW/MtzYr8vw+wcLw9/fDCj48SWQ11kZlMz+ANXfBGKUdAMQQDCDQOAug4j8fwYhma8M1/ZgN+zRBU2Gn19ZGVQsMQwDCCBkgxjA6UZU8T+DsPxXhqu7dRn+/GRh+AfUg4wfnocYpmqNYhhAAKEbBDFMTOk/0MCvDFd2Qg0DBgkyfngWYpiaLdCZDDdAmgACiAlLBIBs2M6g47aVIaJnHgMj8w+Gv0DL0fGBWYEMl3c4gdMgEAAEEBOOZAExTNdjG0P0hHnAhPkDq6rzmzTBaRAIAAKICU9iBclxAbONJNB7HISyCEAA4TIIlC0CGDa3RjIcnBOIU7eh33UgCcIMAAHEhMMQT7D/8Rlin7Ie6PV9QNZjEBcggJhwGOLNsLQgCa8hvtXLoCUDOPoBAogJpyG4wgVhCEpWAQggJpTyiExDQAAggGAGiYILNTINAQGAAIIZZAguGck0BAQAAoiJYGFMhCEgABBAMIOug9MEegom0hAQAAggRmh1hFn4gwyGpBOiCn+AAGJEqtfQq6Pr0MRGVMUHEECM1KogAQIMANzuDAiYFZn2AAAAAElFTkSuQmCC"); background-color: rgba(255, 255, 255, 0.4); } .slidingnav button.next.passive { position: absolute; left: -9999px; } .slidingnav.large button.prev, .slidingnav.large button.next { width: 28px; /* This is smaller than the width the image in some brands, but the padding amply compensates for that. */ height: 46px; margin: 0 0.5%; padding: 10px 1.4%; } .slidingnav.large button.prev, .slidingnav.large button.prev.passive { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-prev-huge.png"); } .slidingnav.large button.next, .slidingnav.large button.next.passive { background-image: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-next-huge.png"); } .slidingnav.large button.prev:not(.passive):hover, .slidingnav.large button.prev:not(.passive):focus { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAqCAYAAACtMEtjAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVRYw2P4//8/AzXw4zSZ1N+F8pf+Fyv8BeKfvwrlD91LkfGDyVNsAS8bk/CnXLnZQMP/Y8Of8+QaKbaIh5VJ9GOu3AJclsDw8wzZMEosESPGEhD+U6RwiuaWQPFvelgCwj9JtuR9jtxCEi35D0yN+2luCSi5P0qTcaO1Jf+BSb+EqORNiSXAuKwnKsNSyxK8FlHTEpwWURgnXdjMpKolwHKtH1cIoXAU+FgkgIpXU9sSFIsU+VnEgYrX0sISuEXKAixi5FryJU9+HjF5EUwAI3ARuZYIcjDxE2XRw1SZVDJT13x+diZBYoswBmCVe4YMSxaBalZSCmQGoMZfJEb8WlDqJLV6AVn0mxSLXmXJTiWnsgQF3TlSg+51lmwvyRY9y5AlKzEAfdZMWtABiW/58ktpbRmY0BBiFQZaRlbRAwzGJqItgln2NU9+DTmWvciUrSTaIhBWE2QVIdcyYCOxhGiLaGkZVkFaWIbTq5RYBmxeZRBtEYWW/X2SLptGtEWUWgYuDEjpH1FiGTDO4knqH1Fg2a8bidLWJBWM5FoGbOTvJLm4J7ME+U5WR4yMsvE32V1LbWFWIWItI7trCcO6ImyCxFj2NlsunOLuv4EYm8D3fPnFuCwBxmcDVcYZYBjYXs/7W6RwEWj4DxAGprQDwDzkDZMHAJDRRl9rWAWLAAAAAElFTkSuQmCC"); background-color: transparent; } .slidingnav.large button.next:not(.passive):hover, .slidingnav.large button.next:not(.passive):focus { background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABoAAAAqCAYAAACtMEtjAAAABGdBTUEAALGOfPtRkwAAACBjSFJNAAB6JQAAgIMAAPn/AACA6QAAdTAAAOpgAAA6mAAAF2+SX8VGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAB+ElEQVRYw2P4//8/Awg/z5D1/l0of+B/scIPEP5bpHDxfY5cHkyeUgwmvubJNwAN/48Nf8+XX2wgxiZAsUVvs+XCcVkCw9/y5VfrirAJUmTRnyKFU4QsglmmLcwqRH7QFSv8JsYimGUaQqzC5Fr0nViLQBgYn2vIsYwBmNJ2kmIRzDI1QVYRkiy6kShtDdT8i9aWwfJQPFDzX1paBmc8y5BNpaVlKJwn6bJptLIMQ+BRmkwGqRYRYxlWQWCclVDbMpxepbZleCOQmpYRTJYvMmUrybUMuQQhKrO9zpJtIscy5LKR6CLkVZZsM5mWLSXJIkosAxUGJBf3wGDsJdWiX4Xy58iqxIA+m0qiZb9JtkSBj0Xic57cWhIt+kWSJbxsTMKfcuUWkRF0Z4i2hJ+dSRBoyXxyEsPDVBniEoMgBxP/lzz5eeRYAg4BYpM3uZaA4lJZgEWMKIuAivvJtUSRn0WcqCKIAktWg1InUYUquZYA2+sLeViZxIiqJoAR2EVNS7Ba9DFXrp7almBYRCtLUCyipSVwi4BxUkJLS8AWAZtXbuS05UixBNbI309rS2Ddlp+kWAKMywWkWkJyR4xcS0jqWlJiCdgiYCMxjEhLRCnu/gPLtUY89clsUM1KlXEGEL6XIuMHrHIPQRPHX2BqvPQ4TSaVWgMaAN3ORl/KimqYAAAAAElFTkSuQmCC"); background-color: transparent; } .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; } /* Used in the siteheader and footer */ ul.metanav { float: right; font-size: 1.2458rem; } ul.metanav > li { float: left; padding: 0 10px 2px 10px; border-left: 1px solid #496660; line-height: 11px; } ul.metanav > li:first-child { border-left: 0; } /* bw.ui.foldable ------------------------------------------------------ */ .toggler.interactive button { padding-left: 15px; cursor: pointer; background: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/nav-next.png") no-repeat 2px 60%; } .toggler.interactive.open button, .toggler.interactive.opening button { background: url("https://www.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/clientlibs/resources/dropdown.png") no-repeat 0 65%; } 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 + * { display: none; } .toggler.interactive.open + * { display: block; } /* 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 #d0d0d0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mapstatus { width: 100%; min-height: 2.5em; border: 1px solid #d0d0d0; 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.bibliotheeknoordwestveluwe.nl/etc.clientlibs/settings/wcm/designs/website/styles/bnl/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