/* LKO Theme Installer Signature: 20251008154632 */ /* LKO Theme: Requiem - Creation date: 251008154303 */ /* /**************************** Developer guidance *************************************************************/ /* AFTER CHANGING *always validate* on https://jigsaw.w3.org/css-validator/validator.html.en#validate_by_uri */ /* with URI https://xyz.lko2.nl/wb/layout/css/screen.css (replace 'xyz' by proper value) */ /* */ /* For understanding the sections about menus (@group menubar, @group submenu, @group topmenu), please, do */ /* consult the guides: 'How to use SM2_Menu.txt' about the WebsiteBaker module show_menu2), located in */ /* (..)LKO-Granny/Website/Website.Onderhoud/HowTo/, and the latest version of the LKO website architecture */ /* 'Beschrijving architectuur LKO-website 20xx.odt' in (..)LKO-Granny/Website/Website.Design/Architectuur en */ /* 'layout/20xx/ */ /* /**************************** Developer guidance *************************************************************/ /* ALGEMEEN */ /* @group fonts */ /* Import font style sheets in this style sheet ( @import must be at the top of this document, after any @charset declaration)*/ /* Font types 'Archivo Black' en Ópen Sans' als alternatieve fonts bekend maken */ @import url('https://fonts.googleapis.com/css?family=Archivo Black'); @import url('https://fonts.googleapis.com/css?family=Open Sans'); @font-face { font-family: 'LKO-base-font'; /* Font type abstraction 'LKO-base-font' */ src: local('Verdana'); /* src: url('/media/lko/fonts/calibrii.ttf'); */ font-weight: normal; font-style: normal; } @font-face { font-family: 'LKO-heading-font'; /* Font type abstraction 'LKO-heading-font' */ /* src: url('/media/lko/fonts/ariblk.ttf'); */ src: url('/media/lko/fonts/Swz721kr.ttf'); font-weight: normal; font-style: normal; } /* @end group fonts */ /*vv 1 vv*/ /* Set the color outside in case a restricted width applies */ html { background-color: #fcedb6 ; /* LKOpalette 0000 251008154303 Default bg */ } /* Restrict the body width on large screens */ body { margin: auto; /* max-width: max-content; */ } html, body {font-family: 'LKO-base-font' !important;} /* ?! Firefox Inspector says: ws.css still overrules, but not really !? */ body { color: #511b0f ; } /* LKOpalette 0010 251008154303 Default basefont */ h1, h2, h3 {font-family: 'LKO-heading-font' !important;} div.lko-zebra-table { max-width:100%; overflow-x:auto; width:80vw; } .lko-zebra-table table { border-collapse:collapse; border-spacing:0; border:1px solid #d8d8d8; /* LKOpalette 8020 251008154303 Table border */ margin: 10px 0px 10px 0px; width:90% } .lko-zebra-table th, .lko-zebra-table td { padding: 6px; } .lko-zebra-table tr:nth-child(even){ background-color: #fceca1; /* LKOpalette 8010 251008154303 Table even row bg */ } /* Specialization within 'card'-like section (e.g. Phoca Download) */ #phoca-dl-category-box .pd-category h3.pd-ctitle { padding-left: 1em; border-radius: 6px; background-color: #ffa142; /* LKOpalette 1011 251008154303 List Heading bg */ } .card-title a, .card-body a, .pd-filename a, .pd-subcategory a{ color: #acb20c; /* LKOpalette 6000 251008154303 Link default */ } .card-title a:hover, .card-body a:hover, .pd-filename a:hover, .pd-subcategory a:hover{ color: #ea7500; /* LKOpalette 6001 251008154303 Link highlighted default */ } :root { --lko-Kop-widget-margin-top: 50px; --lko-Kop-widget-base-size: 100px; --lko-Kop-miniwidget-base-size: 70px; } /*^^ 1 ^^*/ /*vv 2 vv*/ /* @group logo */ .lko-logo-image { /* 20230522 RENAMED */ /* float: right; */ margin-top: var(--lko-Kop-widget-margin-top); position: absolute; right: 0.5vw; height: calc( var(--lko-Kop-widget-base-size) + 20px ); max-width: fit-content; display: none; /* default: off */ z-index: 126; } .lko-logo-image-tablet-phone { /* 20230522 RENAMED */ float: right; margin-top: 25px; height: 5vw; max-height: 40px; display: block; /* default: on */ z-index: 1;position: relative; } div#sp-top1 { padding: 0 } div.mod-lko-marginless p { margin: 0; } /* Suppress margin in the embedding within

elements by the Sourcerer/editor automatic code editing /* The following two rules apply if and only if the content modules 'Kop.....' have been published, otherwise the complete row vanishes! */ @media screen and (max-width: 992px){ div#sp-top1 { display: none;} /* Control display content module 'Kopcentrum' */ div#sp-top3 { display: none;} /* Control display content module 'Kopzijkanten' */ } @media screen and (min-width: 992px) { :root { --lko-mod-Kop-display-ctrl: block; } /* Display control of content modules 'Kop.....': 'none'=suppress; 'block'=enable */ div#sp-top1 { display: var(--lko-mod-Kop-display-ctrl);} div#sp-top3 { display: var(--lko-mod-Kop-display-ctrl);} .lko-logo-image { /* 20230522 RENAMED */ display: block; /* switch ON the big logo */ } .lko-logo-image-tablet-phone { /* 20230522 RENAMED */ display: none; /* switch OFF the small logo */ } } /* End group logo */ /*^^ 2 ^^*/ /*vv 4 vv*/ /* SNELKNOP */ /* @group qckxs */ .lko-qckxs { /* 20230522 RENAMED */ height: 100%; width: 0; position: fixed; top: 0; left: 0; background-color: #61271b; /* LKOpalette 7012 251008154303 QckXs bg */ overflow-x: hidden; transition: 0.5s; padding-top: 60px; /* push list with links down under (absolute positioned) closebtn mark */ } #LKOOverlay { z-index: 124; } #LKOQckxsBtnImage { height: calc( var(--lko-Kop-widget-base-size) + 1px ); /* constrained image height */ } #LKOQckxsTopBtnImage { height: calc( var(--lko-Kop-miniwidget-base-size) - 5px ); /* constrained image height */ } #LKOQckxsButton { z-index: 124; /* lift the Quick Access button just above the beheer group banner level */ cursor: pointer; position: absolute; left: 0; /* at least required on iPad2 to evade strange positioning */ top: 0; margin-top: calc( var(--lko-Kop-widget-margin-top) - 10px); } #LKOQckxsTopButton { z-index: 124; /* lift the Quick Access button just above the beheer group banner level */ /* cursor: none; replaced with cursor pointer for Joomla version website */ cursor: pointer; position: absolute; left: 0; /* at least required on iPad2 to evade strange positioning */ top: 0; /* margin-top: 0px; */ margin-left: 42%; } #LKOQckxsMenuList { z-index: 125; /* lift the Quick Access menu list 1 level above topmenubar */ } .lko-qckxs ul { list-style-type: none; } /* 20230522 RENAMED */ .lko-qckxs a { /* 20230522 RENAMED */ padding: 8px 8px 8px 32px; text-decoration: none; font-size: 24px; line-height: 2; color: #ce5f27; /* LKOpalette 7000 251008154303 QckXs Menu basefont */ display: block; transition: 0.3s; } .lko-qckxs a:hover { /* 20230522 RENAMED */ color: #fcedb6; /* LKOpalette 7001 251008154303 QckXs Menu highlighted basefont */ } .lko-qckxs .closebtn { /* 20230522 RENAMED */ position: absolute; top: 0; right: 20px; font-size: 32px; color: #f0ebc3; /* LKOpalette MenuButton basefont */ } .lko-qckxs-topbtn, #LKOQckxsTopButton { /* Default: invisible */ visibility: hidden; display: none; } /****************************************************************************************************/ @media screen and (max-width: 992px) { /* Menu layout turning point * NOTE: must correspond to the width settings for the Phone-menu modus */ #LKOQckxsButton { /****************************************************************************************************/ visibility: hidden; display: none; } .lko-qckxs-topbtn, #LKOQckxsTopButton { visibility: visible; display: inline-block; } } /* @end group qckxs */ /*^^ 4 ^^*/ /*vv 8 vv*/ /* HEADER */ .lko-header-achtergrond { /* 20230522 RENAMED */ background-color: #61271b; /* LKOpalette 1010 251008154303 Header bg */ } .lko-header-container { display: flex; background-color: #61271b; /* LKOpalette 1010 251008154303 Header bg */ /*min-height: 140px; /* Place holder wanneer LKOheader-center-images niets bevat; */ /* Als je deze disabled, EN klas 'LKOheader-center-images' op display=none zet, */ /* schuift de rij sp-top3 met plaatjes omhoog in de header */ } .lko-flex-item-left { /* 20230522 RENAMED */ padding: 10px 10px 10px 0px; /* min-width: 150px; /* Zet een minimum breedte als spacing */ /* flex: 10%;/* Reserve some space right to the center item */ flex: 1%; /* Provide almost full width for center item */ } .lko-flex-item-center { /* 20230522 RENAMED */ /* padding: 0 10px 10px 10px; /* 20230726 REMOVED */ /* min-width: 150px; /* Zet een minimum breedte als spacing */ /* 20230712 REMOVED */ } .lko-flex-item-right { /* 20230522 RENAMED */ padding: 0 10px 10px 10px; /* min-width: 150px; /* Zet een minimum breedte als spacing */ /* flex: 10%;/* Reserve some space right to the center item */ flex: 1%; /* Provide almost full width for center item */ } .lko-header-center-images { /* 20230522 RENAMED */ display: flex; /* Als je deze op 'none' zet EN property 'min-height' in klas 'LKOheader-container */ overflow: clip; /* uit zet, dan schuift de rij sp-top3 met plaatjes omhoog in de header */ } /***************************************************************************************************/ @media screen and (max-width: 992px) { /* Header layout turning point * NOTE: must correspond to the width settings of tablet-phone modus */ /* 20230522 RENAMED */ .lko-header-center-images { /***************************************************************************************************/ display: none; } } /*^^ 8 ^^*/ /*vv 5 vv*/ /* @group animation */ /* Read more about the next animation settings: * * The presentation 'Banner_animation.odp' on the 'IT-beheer' share under * {…}LKO-Granny/Website/Website.Onderhoud/HowTo/HowTo_on_special_effects_in_banner/ */ :root { --lko-animation-duration: 5s; /* This value determines the total duration of the animation */ /* IMPORTANT: This value must equal te refresh time in the setTimeout() function in PHP code */ } .lko-b_fading { /* Class introduced for fading animation */ /* 20230522 RENAMED */ -webkit-animation-name: lko-b_fading; -webkit-animation-duration: var(--lko-animation-duration); animation-name: lko-b_fading; animation-duration: var(--lko-animation-duration); animation-direction: alternate; /* Fading in and, reverse, fading out */ animation-iteration-count: 2; /* Two fadings apply here: in and out */ } @-webkit-keyframes lko-b_fading { /* 20230522 RENAMED */ 0% {opacity: 0} 30% {opacity: 1} /* The percentage value determines the relative end point of the animations fade in */ 100% {opacity: 1} } @keyframes lko-b_fading { /* 20230522 RENAMED */ 0% {opacity: 0} 30% {opacity: 1} /* The percentage value determines the relative end point of the animations fade in */ 100% {opacity: 1} } .lko-halo { /* Class introduced for star pulsing animation */ /* 20230522 RENAMED */ /* background:transparent url(../gfx/StarreHalo.svg) no-repeat 6% 55%; */ z-index: 7; } .lko-pulse { /* Class introduced for star pulsing animation */ /* 20230522 RENAMED */ /* background:transparent url(../gfx/StarreStralen.svg) no-repeat 6% 55%; */ z-index: 6; -webkit-animation-name: pulse; -webkit-animation-duration: 6s; animation-name: pulse; animation-duration: 6s; animation-direction: alternate; animation-iteration-count: infinite; } .lko-pulse, .lko-halo { /* 20230522 RENAMED */ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; } @-webkit-keyframes lko-pulse { /* 20230522 RENAMED */ 0% {opacity: 0.4} 80% {opacity: 0.4} 100% {opacity: 1} } @keyframes lko-pulse { /* 20230522 RENAMED */ 0% {opacity: 0.4} 80% {opacity: 0.4} 100% {opacity: 1} } /* @subgroup Twinkle Twinkle Little Star */ /* ============================================================================================== This copyright notice must be kept untouched in the stylesheet at all times. The original version of this stylesheet and the associated (x)html is available at http://www.script-tutorials.com/night-sky-with-twinkling-stars/ Copyright (c) Script Tutorials. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. ================================================================================================= */ @keyframes lko-move-b_mask { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-webkit-keyframes lko-move-b_mask { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-moz-keyframes lko-move-b_mask { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:-10000px 5000px;} } @-ms-keyframes lko-move-b_mask { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:-10000px 5000px;} } @keyframes lko-move-b_topping { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:10000px 0;} } @-webkit-keyframes lko-move-b_topping { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:10000px 0;} } @-moz-keyframes lko-move-b_topping { /* 20230522 RENAMED */ from {background-position:0 0;} to {background-position:10000px 0;} } @-ms-keyframes lko-move-b_topping { /* 20230522 RENAMED */ from {background-position: 0;} to {background-position:10000px 0;} } .lko-b_canvas, .lko-b_masking, .lko-b_topping { /* 20230522 RENAMED */ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; } .lko-b_canvas { /* 20230522 RENAMED */ background:#fcedb6; /* LKOpalette 0000 251008154303 Default bg */ /*background:#fcedb6 url(../gfx/some_picture.png) repeat top center; /* LKOpalette 0000 251008154303 Default bg */ background-size: cover; z-index:0; } .lko-b_masking{ /* 20230522 RENAMED */ background:transparent url(../gfx/twinkling.svg) repeat top center; z-index:1; -moz-animation:lko-move-b_mask 400s linear infinite; /* 20230522 RENAMED */ -ms-animation:lko-move-b_mask 400s linear infinite; /* 20230522 RENAMED */ -o-animation:lko-move-b_mask 400s linear infinite; /* 20230522 RENAMED */ -webkit-animation:lko-move-b_mask 400s linear infinite; /* 20230522 RENAMED */ animation:lko-move-b_mask 400s linear infinite; /* 20230522 RENAMED */ } .lko-b_topping{ /* 20230522 RENAMED */ background:transparent url(../gfx/clouds.png) repeat top center; z-index:3; -moz-animation:lko-move-b_topping 400s linear infinite; /* 20230522 RENAMED */ -ms-animation:lko-move-b_topping 400s linear infinite; /* 20230522 RENAMED */ -o-animation:lko-move-b_topping 400s linear infinite; /* 20230522 RENAMED */ -webkit-animation:lko-move-b_topping 400s linear infinite; /* 20230522 RENAMED */ animation:lko-move-b_topping 400s linear infinite; /* 20230522 RENAMED */ } /* @end subgroup Twinkle Twinkle Little Star */ /* @end group animation */ /*^^ 5 ^^*/ /*vv 6 vv*/ /* AKTIEKNOPPEN */ /* Generic button settings: overrules the 'btn-primary' class Helix Ultimate bootstrap.min.css */ /* See alslo: https://www.w3schools.com/bootstrap/bootstrap_buttons.asp */ :root { --lko-button-border-radius: 0.5rem; /* FIXED */ --lko-button-border-width: 0.3rem; /* FIXED */ --lko-button-border-color: black; /* FIXED */ --lko-button-border-lghthi-color: #eee; /* FIXED */ --lko-button-border-lghtdm-color: #ccc; /* FIXED */ --lko-button-border-shadow-color: #888; /* FIXED */ } button { border-radius: var(--lko-button-border-radius); /* FIXED */ border-width: var(--lko-button-border-width); /* FIXED */ border-left-color: var(--lko-button-border-lghtdm-color); /* FIXED */ border-top-color: var(--lko-button-border-lghthi-color); /* FIXED */ border-right-color: var(--lko-button-border-shadow-color); /* FIXED */ border-bottom-color: var(--lko-button-border-shadow-color); /* FIXED */ } .btn-primary { /* Next settings overrule the '.btn'-class definitions from bootstrap for these elements */ background-color:#61271b ; /*!important; /* LKOpalette 7013 251008154303 Link button default bg */ color:#fcedb6 ; /*!important; /* LKOpalette 7003 251008154303 Link button default basefont */ border-width: var(--lko-button-border-width); /* FIXED */ border-radius: var(--lko-button-border-radius); /* FIXED */ border-left-color: var(--lko-button-border-lghtdm-color); /* FIXED */ border-top-color: var(--lko-button-border-lghthi-color); /* FIXED */ border-right-color: var(--lko-button-border-shadow-color); /* FIXED */ border-bottom-color: var(--lko-button-border-shadow-color); /* FIXED */ box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); font-family: 'LKO-default-font', 'Arial', sans-serif !important; } .btn-primary:hover { background-color:#453030; /* !important; /* LKOpalette 7014 251008154303 Link button default hover bg */ color: #fcedb6 ; /*!important; /* LKOpalette 7004 251008154303 Link button default hover basefont */ border-left-color: var(--lko-button-border-lghtdm-color); /* FIXED */ border-top-color: var(--lko-button-border-lghthi-color); /* FIXED */ border-right-color: var(--lko-button-border-shadow-color); /* FIXED */ border-bottom-color: var(--lko-button-border-shadow-color); /* FIXED */ } /* Next button types are in use on the download pages */ .btn-success { background-color: #61271b; /* LKOpalette 7017 251008154303 Link button bestel bg */ color: #fcedb6; /* LKOpalette 7007 251008154303 Link button bestel basefont */ border-width: var(--lko-button-border-width); /* FIXED */ border-radius: var(--lko-button-border-radius); /* FIXED */ border-left-color: var(--lko-button-border-lghtdm-color); /* FIXED */ border-top-color: var(--lko-button-border-lghthi-color); /* FIXED */ border-right-color: var(--lko-button-border-shadow-color); /* FIXED */ border-bottom-color: var(--lko-button-border-shadow-color); /* FIXED */ box-shadow: 1px 2px 4px rgba(0, 0, 0, .5); font-family: 'LKO-default-font', 'Arial', sans-serif !important; } .btn-success:hover { background-color: #453030; /* LKOpalette 7018 251008154303 Link button bestel hover bg */ color: #fcedb6; /* LKOpalette 7008 251008154303 Link button bestel hover basefont */ border-left-color: var(--lko-button-border-lghtdm-color); /* FIXED */ border-top-color: var(--lko-button-border-lghthi-color); /* FIXED */ border-right-color: var(--lko-button-border-shadow-color); /* FIXED */ border-bottom-color: var(--lko-button-border-shadow-color); /* FIXED */ } /* Visform submit button layout overrule */ div.visBtnCon>input{ padding: 2px 12px 2px 12px; border-radius: var(--lko-button-border-radius); border-width: var(--lko-button-border-width); border-left-color: var(--lko-button-border-lghtdm-color); border-top-color: var(--lko-button-border-lghthi-color); border-right-color: var(--lko-button-border-lghtshadow-color); border-bottom-color: var(--lko-button-border-lghtshadow-color); } /* Specialized lko-buttons */ .lko-button-default { /* 20230522 RENAMED */ background-color:#f0ebc3; /* LKOpalette Link button default bg#ffeb91 */ color:#fcedb6; /* LKOpalette 7003 251008154303 Link button default basefont */ } .lko-button-default:hover { /* 20230522 RENAMED */ background-color:#453030; /* LKOpalette 7014 251008154303 Link button default hover bg */ color: #fcedb6; /* LKOpalette 7004 251008154303 Link button default hover basefont */ } .lko-button-order{ /* 20230522 RENAMED */ background-color: #61271b; /* LKOpalette 7017 251008154303 Link button bestel bg */ color: #fcedb6; /* LKOpalette 7007 251008154303 Link button bestel basefont */ } .lko-button-order:hover{ /* 20230522 RENAMED */ background-color: #453030; /* LKOpalette 7018 251008154303 Link button bestel hover bg */ color: #fcedb6; /* LKOpalette 7008 251008154303 Link button bestel hover basefont */ } .lko-button-info{ /* 20230522 RENAMED */ background-color: #61271b; /* LKOpalette 7015 251008154303 Link button info bg */ color: #fcedb6; /* LKOpalette 7005 251008154303 Link button info basefont */ } .lko-button-info:hover{ /* 20230522 RENAMED */ background-color: #aa4821; /* LKOpalette 7016 251008154303 Link button info hover bg */ color: #fcedb6; /* LKOpalette 7006 251008154303 Link button info hover basefont */ } .lko-button-enroll { /* 20230522 RENAMED */ background-color:#61271b; /* LKOpalette 7019 251008154303 Link button aanmeld bg */ color:#fcedb6; /* LKOpalette 7009 251008154303 Link button aanmeld basefont */ } .lko-button-enroll:hover { /* 20230522 RENAMED */ background-color:#453030; /* LKOpalette 701A 251008154303 Link button aanmeld hover bg */ color: #fcedb6; /* LKOpalette 700A 251008154303 Link button aanmeld hover basefont */ } /*^^ 6 ^^*/ /*vv 7 vv*/ /* HELIX UTLIMATE TEMPLATE: burger-icon, #offcanvas-toggler */ .burger-icon { margin-left: 25px; } .burger-icon>span { /* NOTE: this class also applies to the animated opened menu's cancel button! */ background-color: #f0ebc3; /* LKOpalette MenuButton basefont */ /* effectivily sets the font color! */ /* width: 25px; /* set by template */ /* 20230603 REMOVED */ /* background-color: #468c68; /* LKOpalette 5011 230719161516 Menubutton bg */ /* template used! */ /* 20230603 REMOVED */ } body.ltr #offcanvas-toggler.offcanvas-toggler-left { float:none; } /* LINK: */ /* Article links in general */ /* .blog-featured a en .blog-featured a:hover toegevoegd ten behoeve van de links in linkerkolom van de homepage en concertagenda */ .article-details a, .article-introtext a, .mod-articlesnews a, .mod-custom a, .blog-featured a { color: #acb20c; /* LKOpalette 6000 251008154303 Link default */ /* text-decoration is a shorthand for: * * text-decoration-line (required) : none | underline | overline | line-through * text-decoration-color : hex color value | HTML color name | rgb(r,g,b) | rgba (r,g,b,a) * text-decoration-style : none | solid | wavy | dashed | double * text-decoration-thickness : auto | from-font | {length-value} | {percentage-value} */ /* 20251008 ter omzeiling van contrastproblemen een gestippelde onderstreping toegevoegd met * * een hoogstwaarschijnlijk meestal contrasterende kleur van de 'standout' achtergrond */ /* text-decoration: underline #acb20c dotted from-font; /* LKOpalette 6000 251008154303 Link default */ /* text-decoration: underline #aa4821; /* LKOpalette A010 251008154303 Standout bg */ /* text-decoration: underline #acb20c dotted from-font; /* LKOpalette 6002 251008154303 Link emphasized */ } .article-details a:hover, .article-introtext a:hover, .mod-articlesnews a:hover, .mod-custom a:hover, .blog-featured a:hover { color: #ea7500; /* LKOpalette 6001 251008154303 Link highlighted default */ text-decoration: none #ea7500 ; /* LKOpalette 6001 251008154303 Link highlighted default */ } /* Extra link coloring added for LKO Nieuws subheading */ .article-list .article .article-header h1 a, .article-list .article .article-header h2 a { color: #acb20c; /* LKOpalette 6000 251008154303 Link default */ } .article-list .article .article-header h1 a, .article-list .article .article-header h2 a:hover { color: #ea7500; /* LKOpalette 6001 251008154303 Link highlighted default */ text-decoration: none #ea7500 ; /* LKOpalette 6001 251008154303 Link highlighted default */ } /* Footer links in general */ #sp-footer a { color: #fcedb6; /* LKOpalette 6004 251008154303 Link footer */ } #sp-footer a:hover { color: #ffffff; /* LKOpalette 6005 251008154303 Link highlighted footer */ } /* Menu item links in general */ .menu a { /*02012024 THIJS OVERRULING DISABLED color: #ffffff!important; /* LKOpalette 5004 251008154303 MenuList basefont */ color: #ffffff; /* LKOpalette 5004 251008154303 MenuList basefont */ } .menu a:hover { color: #d2c79f!important; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } /*^^ 7 ^^*/ /*vv 9 vv*/ /* BODY */ #sp-main-body { background-color: #fcedb6; /* LKOpalette 0000 251008154303 Default bg*/ } /* BODY 2 */ #sp-main-body-2 { background-color: #fcedb6; /* LKOpalette 0000 251008154303 Default bg*/ } /* FOOTER */ #sp-footer, #sp-bottom { background: #61271b; /* LKOpalette 3010 251008154303 Footer bg */ color: #fcedb6; /* LKOpalette 3000 251008154303 Footer basefont*/ } /* KOLOMMEN THUIS */ .article-list .article { margin-bottom: 30px; padding: 0; border: 0px solid #f5f5f5; /* FIXED */ border-radius: 3px; } div.lko-thuispagina-midden { /* 20230522 RENAMED */ /* background-color: #ffe46d33; /* LKOpalette B010 251008154303 Shy bg */ /* WRONG USE OF lko-shy color */ margin-top: 10px; /* 20231221 SUPPRESSED BY THYS TO FAVOR THE USE OF lko-shy INSTEAD */ margin-bottom: 10px; padding-bottom: 1em; border-radius: 0.3em; /* color: #511b0f; /* LKOpalette 0010 251008154303 Default basefont */ /* WRONG USE IN COMBINATION WITH lko-shy color */ /* padding: 10px 20px 20px 20px; */ /* 20231221 SUPPRESSED BY THYS TO FAVOR THE USE OF lko-shy INSTEAD */ } div.lko-thuispagina-rechts { /* 20230522 RENAMED */ /* padding: 20px 0 !important; */ /* the padding of class 'sp-module' with id=#sp-right must be overruled */ /* 20231221 SUPPRESSED BY THYS TO FAVOR THE USE OF lko-shy INSTEAD */ margin-top: 0.6em !important; /* /* 20231221 ADDED BY THYS TO FAVOR THE USE OF lko-shy INSTEAD */ } /*^^ 9 ^^*/ /*vv 3 vv*/ /* SCROLLKNOPPEN */ /* @group goto buttons: scroll control */ #LKOgotoTopBtn, #LKOgotoBotBtn { /* 20230522 RENAMED */ display: none; /* Hidden by default */ position: fixed; /* Fixed/sticky position */ font-size: max( 2vw, 2vh ); /* Increase font size according to the height in portrait view */ right: -4.1em; /* Displace the button beyond the righthand side of the viewport, showing the symbol only; best working value in practice */ z-index: 99; /* Set goto top button level: Make sure it does not overlap */ /* border-color: #fafffa; /* LKOpalette 7021 230712161710 Goto button border */ /* 20230625 REMOVED */ outline: none; /* Remove outline */ background-color: #ffe46d; /* LKOpalette 701B 251008154303 Goto button bg */ color: #61271b; /* LKOpalette 700B 251008154303 Goto button basefont */ opacity: 0.8; /* Transparent .. Opaque [0 .. 1] */ cursor: pointer; /* Add a mouse pointer on hover */ padding-top: 0.5em; /* Some padding */ padding-right: 1em; /* Some padding */ padding-bottom:0.5em; /* Some padding */ padding-left: 0.5em; /* Some padding */ border-radius: 0.7em; /* Rounded corners */ } #LKOgotoTopBtn { /* 20230522 RENAMED */ top: 30vh; /* Place the button just above the middle of the page */ } #LKOgotoBotBtn { /* 20230522 RENAMED */ top: 50vh; /* Place the button just beneath the middle of the page */ } #LKOgotoTopBtn:hover, #LKOgotoBotBtn:hover { /* 20230522 RENAMED */ background-color: #61271b; /* LKOpalette 701C 251008154303 Goto button hover bg */ color: #fcedb6; /* LKOpalette 700C 251008154303 Goto button hover basefont */ right: -10px; } /* @end goto buttons: scroll control */ /*^^ 3 ^^*/ /*vv 11 vv*/ /* ZIJMENU */ #sp-left .sp-module ul>li, #sp-right .sp-module ul>li { display: block; border-bottom: 0px; /* font-family: 'LKO-default-font', 'Arial', sans-serif; /* 20230603 REMOVED */ font-size: 16px; font-weight: 700; /* text-decoration: none; /* 20230603 REMOVED */ } #sp-left .sp-module ul>li>a, #sp-right .sp-module ul>li>a { display: block; /* line-height: 36px; /* 20230603 REMOVED */ padding: 2px 0; } #sp-left .sp-module, #sp-right .sp-module { margin-top: 50px; border: 0px solid #f3f3f3; /* FIXED */ padding: 30px; border-radius: 3px; } #sp-left .sp-module ul>li:hover { color: #d2c79f; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } #sp-left .sp-module ul>li.active>a { color: #ce5f27; /* LKOpalette 5006 251008154303 MenuList current path basefont */ } #LKOzijmenu a:hover { /* 20230522 RENAMED */ color: #d2c79f; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } /* HOOFDMENU */ .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span, .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { font-family: 'LKO-default-font', 'Arial', sans-serif; font-size: 16px; font-weight: 700; text-decoration: none; color: #ffffff; /* LKOpalette 5004 251008154303 MenuList basefont */ } .sp-megamenu-parent>li.active>a { color: #ce5f27; /* LKOpalette 5006 251008154303 MenuList current path basefont */ font-weight: 700; } .sp-megamenu-parent>li:hover>a { color: #d2c79f; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } .sp-megamenu-parent>li.active:hover>a { color: #d2c79f; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: #61271b; /* LKOpalette 5013 251008154303 MenuList bg */ } .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a{ color: #ffffff; /* LKOpalette 5004 251008154303 MenuList basefont */ } .sp-megamenu-parent .sp-dropdown li.sp-menu-item>a:hover { color: #d2c79f; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active>a { color: #ce5f27; /* LKOpalette 5006 251008154303 MenuList current path basefont */ } .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active:hover>a { color: #ce5f27; /* LKOpalette 5006 251008154303 MenuList current path basefont */ } /* OFF-CANVAS MENU */ .offcanvas-menu { background-color: #61271b; /* LKOpalette 5013 251008154303 MenuList bg */ color: #ffffff; /* LKOpalette 5004 251008154303 MenuList basefont */ } .offcanvas-menu .offcanvas-inner ul.menu > li a, .offcanvas-menu .offcanvas-inner ul.menu > li span { color: #ffffff; /* LKOpalette 5004 251008154303 MenuList basefont */ } .offcanvas-menu .offcanvas-inner ul.menu>li a:hover, .offcanvas-menu .offcanvas-inner ul.menu>li span:hover { color: #d2c79f; /* LKOpalette 5005 251008154303 MenuList highlighted basefont */ } .offcanvas-menu .offcanvas-inner ul.menu li.active a { color: #ce5f27; /* LKOpalette 5006 251008154303 MenuList current path basefont */ } li.active > a { /* Color all menuitems on the 'current path' at once */ color: #ce5f27; /* LKOpalette 5006 251008154303 MenuList current path basefont */ } /* Next settings are required to overwrite the Helix template settings */ .offcanvas-menu .offcanvas-inner ul.menu > li li a, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler { color: #f0ebc3; /* LKOpalette MenuButton basefont */ } /* Next settings are required to overwrite the Helix template settings */ .offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > a:hover { opacity: 1; } .sp-megamenu-parent { /* justify-content: center; /* 20230603 REMOVED */ float: none; /*align-items: center; /* 20230603 REMOVED */ text-align: center; } nav.sp-megamenu-wrapper.d-flex { display: block !important; /* This is a patch to neutrilize an overrule in class d-flex from Shaper Helix Ultimate bootstrap.min.css text-align: center; margin: 0; */ } .container-fluid, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { width: 100%; padding-right: 0; padding-left: 0; margin-right: auto; margin-left: auto; margin-top: 10px; } #sp-left .sp-module, #sp-right .sp-module { margin-top: 50px; border: 0px solid #f3f3f3; /* FIXED */ padding: 0; border-radius: 3px; } /*^^ 11 ^^*/ /*vv 10 vv*/ /* DIV FORMAT CLASSES */ div.lko-placeholder { /* This div class claims the same spacing as lko-shy, lko-standout and lko-billboard. Introduced to be able to line up parallel placement in middle and right column on the home page */ padding: 20px; } div.lko-shy { /* 20230522 RENAMED */ background-color: #ffe46d33; /* LKOpalette B010 251008154303 Shy bg */ margin-top: 10px; margin-bottom: 10px; padding-bottom: 1em; border-radius: 0.3em; color: #ce5f27; /* LKOpalette B000 251008154303 Shy basefont */ padding: 20px; } div.lko-standout { /* 20230522 RENAMED */ background-color: #aa4821; /* LKOpalette A010 251008154303 Standout bg */ color: #fcedb6; /* LKOpalette A000 251008154303 Standout basefont */ padding: 20px; box-shadow: 2px 4px 8px rgba(0, 0, 0, .5); border-radius: 0.3em; } div.lko-billboard { /* 20230522 RENAMED */ background-color: #61271b; /* LKOpalette 9010 251008154303 Billboard bg*/ color: #ffffff; /* LKOpalette 9000 251008154303 Billboard basefont */ padding: 20px; box-shadow: 2px 4px 8px rgba(0, 0, 0, .5); border-radius: 0.3em; } q, blockquote { font-size: 14px; /* font-weight: bold; */ font-style: italic; color: #511b0f; /* LKOpalette 2005 251008154303 Quote basefont */ margin: 10px 0 5px; } /*^^ 10 ^^*/ a[href$="categories"]{ display: none;} /* Suppress PhocaDownload 'Category' button at top of the tree */ .eventlist { border-color: rgba(0,0,0,0); /* Make JEvents table borders for class "eventlist" transparent */ color: #511b0f; /* LKOpalette 2001 251008154303 Body basefont */ } @media screen and (max-width: 992px) { /* Login form overrule of fixed value 220px in order to get proper button position on smartphones */ .form-horizontal .controls { margin-left: 30vw; } } /* Suppress the 'featured' badge on the special articles */ span.badge.bg-danger.featured-article-badge { display: none; }