/* ================================================================================ ===== CSS STYLES FOR ===== ===== SCHOOLWEBSITE.NU SKIN ===== ================================================================================ */ /* sexy content off */ .sc-content-block-menu{display:none !important;} #Wrapper .sc-menu {display:none !important;} .dnnEditState #Wrapper .sc-menu {display:block !important;} /* nieuwe dnn */ /* #ControlBar_ControlPanel:before { position:absolute; left:5px; top:5px; width:46px; height:46px; z-index:99; content:" "; background:transparent url(images/logoW2W_w.png) no-repeat center center; background-size:auto 75%; animation:w2w_pop 3s normal 0s 1; } @keyframes w2w_pop{0%,75%{transform:scale(0);}100%{transform:scale(1);}} */ #ControlNav { margin-left:60px!important; } #ControlNav:before { position:absolute; left:5px; top:4px; width:46px; height:46px; z-index:99; content:" "; background:transparent url(images/logoW2W_w.png) no-repeat center center; background-size:auto 65%; animation:w2w_pop 1.5s normal 0s 1; } @keyframes w2w_pop{0%,50%{transform:scale(0);}100%{transform:scale(1);}} .dnnFormItem textarea { font-family:Courier; } /* ---------------------- klikbaar op logo via css3? http://stackoverflow.com/questions/3859101/what-does-ahref-do-in-css ---------------------- */ /* oude dnn #ControlBar_conrolbar_logo{display:none!important;} #ControlBar .ServiceIcon{height:100%;background:transparent url(images/logoW2W_w.png) no-repeat center center;background-size:auto 65%;animation:w2w_pop 3s normal 0s 1;} @keyframes w2w_pop{0%,75%{transform:scale(0);}100%{transform:scale(1);}} */ /* ================================================================================ GENERAL SETTINGS ================================================================================ */ @font-face { font-family: "Ionicons"; src: url("fonts/Ionicons_2_0_1/ionicons.eot"); src: url("fonts/Ionicons_2_0_1/ionicons.eot#iefix") format("embedded-opentype"), url("fonts/Ionicons_2_0_1/ionicons.ttf") format("truetype"), url("fonts/Ionicons_2_0_1/ionicons.woff") format("woff"), url("fonts/Ionicons_2_0_1/ionicons.svg#Ionicons") format("svg"); font-weight:normal; font-style:normal; } html { margin:0px; padding:0px; overflow-y:scroll; /* Altijd een scrollbalk afdwingen i.v.m. verspringingen */ } .noScroll { position:fixed; width:100%; } body { text-align:left; } #Body { } /* Achtergrondkleuren + afbeeldingen hier */ #Form { } /* om hoogte op minimaal 100% te zetten, mag wel groter */ /* HEADINGS */ H1, H2, H3, H4, H5 { font-family: 'Armata', sans-serif; letter-spacing:normal; font-weight:400; color:#312a74; } H1 {font-size:50px; margin-top:0px; color:#019cdb; } H2 {font-size:26x; color:#ec594d; } H3 {font-size:20px; color:#019cdb; } H4 {font-size:18px; color:#ec594d; } H5 {font-size:16px; } .isWS2 #Breadcrumb, .isWS2 #Breadcrumb a, .isWS2 #Breadcrumb a.SkinObject:before, .isWS2.isSeq H1, .isWS2.isSeq H2 { color:#ff9d24; } .isWS2.isSeq H3 { color:#df413e; } .isWS3 #Breadcrumb, .isWS3 #Breadcrumb a, .isWS3 #Breadcrumb a.SkinObject:before, .isWS3.isSeq H1, .isWS3.isSeq H3 { color:#5ba52e; } .isWS3.isSeq H2 { color:#ff9d24; } .isWS4 #Breadcrumb, .isWS4 #Breadcrumb a, .isWS4 #Breadcrumb a.SkinObject:before, .isWS4.isSeq H1, .isWS4.isSeq H3 { color:#66b245; } .isWS4.isSeq H2 { color:#ffaf3a; } /* LINKS */ a:link, a:visited {text-decoration:none!important; } a:hover, a:active { text-decoration:none!important;} /* zelfde pubmods - seq - opmaak.css */ .isSeq a, .isSeq a:link, .isSeq a:visited {text-decoration:none!important; transition:color 0.25s ease; color:#019cdb; } .isSeq a:hover, .isSeq a:active { color:#e81117; text-decoration:none!important;} /* zelfde pubmods - seq - opmaak.css */ /* TABLES */ table {font-size:inherit;} /* om de lettergrootte in de editor gelijk te zetten */ table tr {} table tr th {} table tr td { vertical-align:top;} /* DNN SPECIFIC */ .Head, .SubHead, .SubSubHead, .Normal, .NormalTextBox, .NormalRed, .NormalBold, .CommandButton { font-family: inherit; color:inherit; line-height:inherit; font-size:inherit; } .Head { font-size:15px;} /* style for module titles */ .SubHead {font-size:14px;} /* style of item titles on edit and admin pages */ .SubSubHead { font-size:13px;} /* module title style used instead of Head for compact rendering by QuickLinks and Signin modules */ .NormalBold { font-weight:bold;} .CommandButton {} /* text style for buttons and link buttons used in the portal admin pages */ A.CommandButton:link {} /* hyperlink style for buttons and link buttons used in the portal admin pages */ A.CommandButton:visited {} A.CommandButton:hover {} A.CommandButton:active {} .StandardButton {} /* button style for standard HTML buttons */ /* COMMON ISSUES */ img {border:0px;} /* geen standaard rand bij afbeeldingen wanneer er gelinkt wordt */ input[type=submit], input[type=button] {} input[type=submit]:hover, input[type=button]:hover {} .Theme_Responsive_Default input[type="text"]::-webkit-input-placeholder { color:#000!important; } .Theme_Responsive_Default textarea::-webkit-input-placeholder { color:#000!important; } /* * { transition:background-color 0.3s ease; -webkit-transition:background-color 0.3s ease;} */ #homeRij1 *, #homeRij2 * { transition:background-color 0.3s ease; } #Menu { transition:background-color 0.1s ease; } /* DNN tab fix*/ ul.dnnAdminTabNav { height:auto !important} html > body > form #ControlBar_ControlPanel { z-index:1202 !important} /* Clearfix */ .clear{clear:both; display:block; height:0; overflow:hidden; visibility:hidden; width:0;} .clearfix:after{clear:both; content:'.'; display:block; font-size:0; height:0; line-height:0; visibility:hidden; width:0;} * html .clearfix,:first-child+html .clearfix{zoom:1;} body, .Content, .Normal { font-family: 'Open Sans', serif; font-weight:400; font-size:16px; line-height:1.5; color:#13235b; } .isHome .Normal { color:#fff; } .isHome h1 { font-size:40px; color:#fff; } .isHome h2 { font-size:25px; color:#fff; } .isHome h3 { color:#fff; } p { margin:0; } /* ================================================================================ TEXT STYLING ================================================================================ */ .KNOP { display:inline-block; color:#fff; padding:6px 15px; font-weight:400; height:auto; min-height:22px; line-height:22px; border:none; cursor:pointer; margin:15px 0; background:#ffffff; border-radius:10px; font-family: 'Open Sans', serif; font-size:18px; transition:all 0.05s ease!important; } .KNOP:hover {text-decoration:none; } /* ================================================================================ DNN KNOPPEN DETAIL AGENDA / CONTACT FORMULIER ================================================================================ */ #Wrapper input.CommandButton, #Wrapper .DetailCommands a.CommandButton, #Wrapper a.dnnPrimaryAction, #Wrapper a.dnnSecondaryAction { border:none; color:#ffffff; box-shadow:none; border-radius:6px; } #Wrapper input.CommandButton:hover, #Wrapper .DetailCommands a.CommandButton:hover, #Wrapper a.dnnPrimaryAction:hover, #Wrapper a.dnnSecondaryAction:hover { box-shadow:0px 0px 0px 3px rgba(255,255,255,.3) inset; } #Wrapper.isWS0 input.CommandButton, #Wrapper.isWS0 .DetailCommands a.CommandButton, #Wrapper.isWS0 a.dnnPrimaryAction, #Wrapper.isWS0 a.dnnSecondaryAction { background:#ec594d!important; } #Wrapper.isWS1 input.CommandButton, #Wrapper.isWS1 .DetailCommands a.CommandButton, #Wrapper.isWS1 a.dnnPrimaryAction, #Wrapper.isWS1 a.dnnSecondaryAction { background:#ec594d!important; } #Wrapper.isWS2 input.CommandButton, #Wrapper.isWS2 .DetailCommands a.CommandButton, #Wrapper.isWS2 a.dnnPrimaryAction, #Wrapper.isWS2 a.dnnSecondaryAction { background:#ff9d24!important; } #Wrapper.isWS3 input.CommandButton, #Wrapper.isWS3 .DetailCommands a.CommandButton, #Wrapper.isWS3 a.dnnPrimaryAction, #Wrapper.isWS3 a.dnnSecondaryAction { background:#ff9d24!important; } #Wrapper.isWS4 input.CommandButton, #Wrapper.isWS4 .DetailCommands a.CommandButton, #Wrapper.isWS4 a.dnnPrimaryAction, #Wrapper.isWS4 a.dnnSecondaryAction { background:#ffaf3a!important; } #Wrapper.isWS5 input.CommandButton, #Wrapper.isWS5 .DetailCommands a.CommandButton, #Wrapper.isWS5 a.dnnPrimaryAction, #Wrapper.isWS5 a.dnnSecondaryAction { background:#ec594d!important; } /* ================================================================================ MAIN LAYOUT ================================================================================ */ .ControlPanel { } #Wrapper { background-color:#ffffff; text-align:left;} .InnerWrapper { margin:0px auto;max-width:980px; position:relative;} .isHome.UserMode0 #seqMainInner { } .isHome.UserMode1 #seqMainInner, .isHome.UserMode2 #seqMainInner { background:#f0f0f0; } /* HEADER SECTION */ #HeaderB {min-height:145px; background:#fff;} #HeadMobHorzSplit { width:100%; height:4px; margin-bottom:0px; background:#019cdb; } .isWS2 #HeadMobHorzSplit { background:#ff9d24; } .isWS3 #HeadMobHorzSplit { background:#ff9d24; } .isWS4 #HeadMobHorzSplit { background:#66b245; } /* .mobZoekAan.mobMenuFlashUit ~.mobMenuAan #HeadMobZoek #MobielZoeken, */ .mobZoekAan.mobMenuAan #HeadMobZoek #MobielZoeken { box-shadow:0px -4px 0px 0px #019cdb inset; /* als #HeadMobHorzSplit */ } #Logo { position:absolute; top:16px; left:0px; z-index:11; width:562px; height:104px; background:none no-repeat 0px 0px; } .isWS0 #Logo { background-image:url(images/logo_ElezierObadja.png); } .isWS1 #Logo { background-image:url(images/logo_Eliezier.png); } .isWS2 #Logo { background-image:url(images/logo_Obadja4.png); } .isWS3 #Logo { background-image:url(images/logo_Obadja3.png); } .isWS4 #Logo { background-image:url(images/logo_ObadjaDC.png); } .isWS5 #Logo { background-image:url(images/Logo_ObadjaUrk.png); } .fontIonicons { font-family: "Ionicons"; font-size:32px; } #MobileMenuTrigger { /* position:absolute; right:0px; top:0; */ height:50px; width:50px; line-height:50px; z-index:980; overflow:hidden; font-family: "Ionicons"; font-size:32px; vertical-align:middle; text-align:center; color:#fff; display:none; cursor:pointer; } #GoHomeTrigger { /* position:absolute; left:0; top:0; */ height:50px; width:50px; line-height:50px; z-index:980; overflow:hidden; font-family: "Ionicons"; font-size:32px; vertical-align:middle; text-align:center; color:#fff; display:none; cursor:pointer; } /* SEARCH */ #Search { position:absolute; right:0; top:0; height:50px; width:50px; z-index:1050; overflow:hidden; transition:width 0.2s ease; -webkit-transition:width 0.2s ease; } #Search.active { width:240px;} #Search #dnn_dnnSEARCH_ClassicSearch { white-space:nowrap; position:relative; display:block; height:50px;} #Search .SkinObject{font-family: "Ionicons"; font-size:32px; vertical-align:middle; height:50px; width:50px; color:#fff !important; display:block; text-align:center;position:absolute; right:0; top:0;} #Search .SkinObject:hover { text-decoration:none !important} #Search #dnn_dnnSEARCH_ClassicSearch .searchInputContainer{ position:absolute !important; right:55px; top:0; padding:10px 0 10px 10px} #Search .NormalTextBox { -webkit-appearance:none; height:30px; border:0; padding:0 10px; width:160px} #Search .NormalTextBox:focus { outline:none} /* SEARCH PREVIEW NOOIT TONEN */ #Search .searchSkinObjectPreview, #Search .searchInputContainer a.dnnSearchBoxClearText, #MobielZoeken .searchSkinObjectPreview, #MobielZoeken .searchInputContainer a.dnnSearchBoxClearText { display:none !important; } /* PANES SECTION */ /* belangerijk voor rondjes.... home */ #Content { z-index: 1; display: block; min-height: 550px; position: relative; } #Content .Container { } #Content .GoogleMapsPane .Container { } .SubTab #Content .Container { xxxmargin-bottom:20px;} /* ========== VLAKKEN ========== */ .one-half, .one-third, .two-third, .isSeq #SubMenu, .isSeq #seqMainCMS { float:left; box-sizing:border-box; -webkit-box-sizing:border-box; } .isHome .two-third { width:645px; margin-right:40px;} .isHome .one-third { width:295px; margin-right:0px;} .isSeq #SubMenu { width:330px; } .isSeq #seqMainCMS { width:635px; padding-top: 22px;} .EQHeight, .EQHeight2 { min-height:0;} .webSlogan { color:#fff; font-family: 'Finger Paint', cursive; font-size:35px; min-height:55px; /* margin-bottom: 10px; geen meldingen, dan vallen de rondjes erg fout */ margin-top: 20px; } /* ================================================================================ PANES SPECIFIEKE STYLING ================================================================================ */ #homeIntro .Container { margin-top:40px; position:relative; z-index:1; /* voor rondjes bg */ } .row3 {padding:45px 0;} .SchoolFilmPane, .NieuwsBriefPane, .TwitterPane {padding:25px 0 0 0;} /* ================================================================================ OPMAAK HEADER ================================================================================ */ /* 4X LINKS (VIER KLEUREN) */ #HeaderA { min-height:32px; background:#fff; box-shadow:0px -2px 0px 0px #d9ecf7 inset; } #TopLinks { text-align:right; } #TopLinks a { text-transform:uppercase; margin-left:25px; line-height:30px; font-family: 'Armata', sans-serif; font-weight:bold; font-size:14px; white-space:nowrap; } #TopLinksNR0 { margin-left:0px; } #TopLinksNR0 { color:#606060; } #TopLinksNR1 { color:#1a9cdc; } #TopLinksNR2 { color:#ec594d; } #TopLinksNR3 { color:#64b243; } #TopLinksNR4 { color:#ffaf38; } #TopLinks a:hover { color:#1d1d1b; } /* ================================================================================ PANES ================================================================================ */ .WideWrapper { display:block; clear:both; padding:35px 0px 35px 0px; } .FullPane { xxxmargin-right:5px; xxxmargin-left:50px; } .siteNotResp.siteLeftMenu #seqMainCMS.two-third /* HEEFT LEFT MENU BAR ... */ { margin-left:50px; } /* ================================================================================ OPMAAK HOME ================================================================================ */ #homeRij1 { background:#dbf5fd; } .isHome h2 { height: 30px; line-height: 30px; font-family: 'Bree Serif', serif; font-size: 32px; margin-bottom:10px; margin-top:0px; } /* -- onder-blok -- */ .blokOnder { width:inherit; display:block; height:40px; border-radius:0px 0px 30px 0px; } .blokOnder span { color:#fff; font-family: 'Bree Serif', serif; font-size: 16px; line-height:40px; margin-left:22px; text-transform: uppercase; } a.blokOnder:hover, a.blokOnder:active { background:#e30613!important; text-decoration:none!important; } #dnn_homeRij1Vlak1 .blokOnder { background:#a43d94; } #dnn_homeRij1Vlak2 .blokOnder { background:#f8b326; } #dnn_homeRij1Vlak3 .blokOnder { background:#ed6ca6; } #dnn_homeRij2Vlak1 .blokOnder { background:#26ac68; } #dnn_homeRij2Vlak2 .blokOnder { background:#504a89; } #dnn_homeRij2Vlak3 .blokOnder { background:#26b28e; } /* ================================================================================ FOOTER ================================================================================ */ #Footer { background:#f0f0f0; } #Footer #Logo2 { background-color:#fff; position:absolute; top:0; left:0; max-width:155px; padding:20px 10px; margin-bottom:20px; z-index:911; border-style:solid; border-width:1px; } #Footer #Logo2 a { display:block} #Footer #Logo2 a img { max-width:70%; display:block; margin:0 15%; } #Footer .FooterPane {margin:0 230px; padding-top:13px; color:inherit} #Footer .FooterPane a:link, #Footer .FooterPane a:visited, #Footer .FooterPane a:active {color: inherit} /* xxx #Footer .SocialMediaIcons {position:absolute; top:0; right:0; z-index:911; max-width:230px} */ /* LOGIN */ #Login { display:block; position:absolute; height:5px; width:5px; overflow:visible; transform:translate(10px,10px); } #Login a.LoginKey { font-family: "Ionicons"; font-size:18px; opacity:0; transition:opacity 0.3s ease; -webkit-transition:opacity 0.3s ease; margin:0 10px 0 0; border-width:2px; border-style:solid; font-size:18px; border-radius:50%; line-height:27px; text-align:center; width:27px; height:27px; display:inline-block; vertical-align:top; zoom:1; *display:inline; background-color:#e30613; color:#fff; border-color:#e30613; box-shadow: 0px 3px 5px rgba(0,0,0,.25); border-radius: 8px 8px 8px 0px; /* < customized line */ } #Login a.LoginKey:hover { text-decoration:none; opacity:1;} /* --- alleen bij multiple images --- #FootImg { width:100%; height:73px; position:absolute; bottom:0px; left:0px; background:url(images/bg_blue_o75.png) repeat 0px 0px; filter:contrast(200%) brightness(150%); background-blend-mode: screen; } */ #Foot { min-height:160px; text-align:right; line-height:20px; background: rgba(0,134,199,.81); /* filter:contrast(150%) brightness(125%); on self */ /* -webkit-mask-composite: xor; /* on multiple images applied !!! */ xxbackground-blend-mode: color-dodge; xxbackground-blend-mode: screen; color:#fff; box-shadow:0px 10px 10px 0px #eee; } .isWS2 #Foot { background: rgba(234,130,127,.81); } .isWS3 #Foot { background: rgba(147,196,117,.81); } /* .isWS4 #Foot { background: rgba(255,175,58,.89); } /* ORG */ /* .isWS4 #Foot { background: rgba(230,154,33,.85); } /* DARKER */ .isWS4 #Foot { background: rgba(243,165,46,.88); } /* */ .isWS5 #Foot { background: rgba(149,25,129,.88); } /* STICKY FOOTER */ body, html ,#Form { height:100%; } /* #Wrapper.isSeq { min-height:100%; position:relative; } .isSeq #Content { padding-bottom: 170px; } .isSeq #Foot { position:absolute; width:100%; display:block; bottom: 0px; } */ #Wrapper{ xxxxmin-height:100%; position:relative; } #Content { padding-bottom: 0px; } /* #Content zit achter #Wrapper, CMS ?! gemist??? */ #Foot { position:absolute; width:100%; display:block; margin-top: -160px; z-index:1; } #FootBalk { min-height: 160px; } /* nodig bij seq */ #footLogo { margin-top:17px; width:407px; height:115px; display:inline-block; float:left; overflow:visible; background:transparent url(images/logo_foot.png) no-repeat center bottom; margin-right:23px; } #Foot #tegSM_9 { margin-top:30px;} #footAdres { margin-top:28px; width:375px; display:inline-block; float:right; overflow:visible; font-family: 'Open Sans', serif; font-weight:300; color:#fff; font-size:24px; line-height:35px; /* heb geen PSD tekst hiervan */ text-align:left; } /* ================== TILES DNN-RETURN ================== */ .pubReturnLink a.smTile { color:#fff; text-align:center; width:100px; line-height:50px; margin-right:15px; } .pubReturnLink a.smTile:hover, .pubReturnLink a.smTile:active { background:#e30613; } /* ================== TILES / FIXED CONTROLS ================== */ #fixTiles { position: fixed; z-index: 700; top: 50%; /* margin-top: -55px; > js hoogte blok 50% */ display:none; /* js onload */ /* left: 0; */ right: 5px; transform:translate(80px,0px); transition:transform 0.33s ease 1.5s; } #fixTiles.fixTiles_posLeft { right:auto; left:5px; transform:translate(-80px,0px); } #fixTiles.fixTiles_posTop { top:70px; /* js : top geen % dan margin-top niet aanpassen, deze is precies fixed */ } #fixTiles a.smTile { margin-left:0px; clear:both; margin-bottom:10px; } #fixTiles.show { transform:translate(0px,0px); display:block; } /* =============== TEGEL EFFECT ============= */ a.smTile { width:50px; height:50px; display:inline-block; float:left; margin-left:10px; /* multiple */ } a.smTile .smTile_ico { font-family: "Ionicons"; color:#ffffff; text-align:center; line-height:50px; width:50px; height:50px; display:inline-block; float:left; position:relative; font-size:30px!important; /* defailt */ } a.smTile.smT_FB .smTile_ico { font-size:34px!important; } a.smTile.smT_TW .smTile_ico { font-size:32px!important; } a.smTile.smT_GP .smTile_ico { font-size:34px!important; } a.smTile.smT_LI .smTile_ico { font-size:38px!important; } a.smTile.smT_IG .smTile_ico { font-size:38px!important; } a.smTile.smT_ADM .smTile_ico { font-size:32px!important; } #tegFix3 .smTile_ico { } /* nieuws */ #tegFix4 .smTile_ico { font-size:29px!important; } /* agenda */ #tegFix5 .smTile_ico { font-size:45px!important; } /* contact */ #tegFix6 .smTile_ico { font-size:43px!important; } /* foto's */ /* opmaaken voor tiles voor deze site ... */ a.smTile.smT_site, a.smTile.smT_site .smTile_Expand { border-radius:10px 10px 10px 0px; } a.smTile.smT_site .smTile_ico { font-size:34px!important; } .smT_site, .smT_site .smTile_fx { background:#941b81; } .smT_site, .smT_site .smTile_fx { background:#312a74; } .smT_FB, .smT_FB .smTile_fx { background:#4c75ba; } .smT_TW, .smT_TW .smTile_fx { background:#00acee; } .smT_GP, .smT_GP .smTile_fx { background:#e41319; } .smT_LI, .smT_LI .smTile_fx { background:#0177b5; } .smT_IG, .smT_IG .smTile_fx { background:#947e5f; } .smT_ADM, .smT_ADM .smTile_fx { /* w2w = background:#f58f31; */ background:#e30613; } #tegFix1, #tegFix1 .smTile_fx { background:#941b81; } /* homepage */ /* #tegFix2, #tegFix2 .smTile_fx { background:#941b81; } /* zoeken */ #tegSM_9 { margin-right:30px; } #tegSM_9, #tegSM_9 .smTile_Expand { border-radius:10px; } /* .smT_FB.smTileVerloop .smTile_ico_knop, .smT_FB.smTileVerloop .smTile_fx { box-shadow:0px -25px 15px -5px rgba(0,0,0,.33) inset; } .smT_TW.smTileVerloop .smTile_ico_knop, .smT_TW.smTileVerloop .smTile_fx { box-shadow:0px 15px 10px -5px rgba(255,255,255,.5) inset; } .smT_GP.smTileVerloop .smTile_ico_knop, .smT_GP.smTileVerloop .smTile_fx { background:linear-gradient(170deg, #eb6a52, #e41319, #cf3e29); } .smT_IG.smTileVerloop .smTile_ico_knop, .smT_IG.smTileVerloop .smTile_fx { box-shadow:0px 10px 10px 0px rgba(101,79,65,.5) inset; } .smT_LI.smTileVerloop .smTile_ico_knop, .smT_LI.smTileVerloop .smTile_fx { box-shadow:0px 20px 10px -5px rgba(134,188,213,.75) inset; } */ .smTile_Expand .smTile_fx { width:inherit; height:inherit; transition: all .2s ease; } .smTile_txt { font-family:"Open Sans", sans-serif; font-weight:700; font-size:15px; line-height:50px; color:#ffffff; text-align:right; height:inherit; float:left; width:175px; /* "Volg ons op Facebook" */ } .smTile_Expand { z-index:9999; position:relative; height:inherit; text-align:left; visibility:hidden; overflow:hidden; top:-50px; width: 225px; /* _txt +50 */ } .smTile_txt { text-align:center; } /* .smT_site .smTile_Expand { width:280px; } .smT_site .smTile_txt { width:240px; } */ .smT_FB .smTile_Expand { xxwidth:230px; } .smT_FB .smTile_txt { xxwidth:190px; } .smT_TW .smTile_Expand { width:220px; } .smT_TW .smTile_txt { width:180px; } .smT_IG .smTile_Expand { width:240px; } .smT_IG .smTile_txt { width:200px; } .smT_GP .smTile_Expand { width:220px; } .smT_GP .smTile_txt { width:180px; } .smT_ADM .smTile_Expand { width:170px; } .smT_ADM .smTile_txt { width:130px; } .smTileW150 .smTile_Expand { width:180px!important; } .smTileW150 .smTile_txt { width:150px!important; } .smTileW160 .smTile_Expand { width:190px!important; } .smTileW160 .smTile_txt { width:160px!important; } .smTileW170 .smTile_Expand { width:200px!important; } .smTileW170 .smTile_txt { width:170px!important; } .smTileW180 .smTile_Expand { width:210px!important; } .smTileW180 .smTile_txt { width:180px!important; } .smTileW190 .smTile_Expand { width:220px!important; } .smTileW190 .smTile_txt { width:190px!important; } .smTileW200 .smTile_Expand { width:230px!important; } .smTileW200 .smTile_txt { width:200px!important; } .smTileW210 .smTile_Expand { width:240px!important; } .smTileW210 .smTile_txt { width:210px!important; } .smTileW220 .smTile_Expand { width:250px!important; } .smTileW220 .smTile_txt { width:220px!important; } .smTileW230 .smTile_Expand { width:260px!important; } .smTileW230 .smTile_txt { width:230px!important; } .smTileW240 .smTile_Expand { width:270px!important; } .smTileW240 .smTile_txt { width:240px!important; } .smTileW250 .smTile_Expand { width:280px!important; } .smTileW250 .smTile_txt { width:250px!important; } .smTileW260 .smTile_Expand { width:290px!important; } .smTileW260 .smTile_txt { width:260px!important; } .smTileW270 .smTile_Expand { width:300px!important; } .smTileW270 .smTile_txt { width:270px!important; } a.smTile .smTile_Expand .smTile_ico { position:absolute; float:none; position:absolute; right:5px; } a.smTile:hover div, a.smTile:active div {visibility:visible; } a.smTile:hover .smTile_Expand .smTile_fx, a.smTile:active .smTile_Expand .smTile_fx { transform: translate(0px,0)!important; } a.smTile.TEASE div{visibility:visible; } a.smTile.TEASE .smTile_Expand .smTile_fx { transform: translate(0px,0)!important; } /* --- Right expand --- */ .smTile_expR .smTile_Expand .smTile_fx { transform: translate(-175px,0); } /* als _txt, neg */ /* --- Left expand --- */ /* tile verdwijnt */ a.smTile.smTile_expL .smTile_Expand .smTile_ico { right:0px; xxdisplay:none!important; } a.smTile.smTile_expL .smTile_Expand .smTile_fx { xxmargin-left:35px!important; } a.smTile.smTile_expL .smTile_Expand .smTile_txt { xxxwidth:inherit!important; } a.smTile.smTile_expL .smTile_Expand { margin-left:20px; } a.smTile.smTile_expL .smTile_Expand { xxleft:-175px; } /* als _txt */ a.smTile.smTile_expL .smTile_Expand .smTile_fx { xxtransform: translate(175px,0); } /* als _txt */ /* a.smTile.smTile_expL.smT_GP .smTile_Expand { left:-170px; } */ a.smTile.smTileW150.smTile_expL .smTile_Expand { left:-150px; } a.smTile.smTileW150.smTile_expL .smTile_Expand .smTile_fx { transform: translate(150px,0); } a.smTile.smTileW160.smTile_expL .smTile_Expand { left:-160px; } a.smTile.smTileW160.smTile_expL .smTile_Expand .smTile_fx { transform: translate(160px,0); } a.smTile.smTileW170.smTile_expL .smTile_Expand { left:-170px; } a.smTile.smTileW170.smTile_expL .smTile_Expand .smTile_fx { transform: translate(170px,0); } a.smTile.smTileW180.smTile_expL .smTile_Expand { left:-180px; } a.smTile.smTileW180.smTile_expL .smTile_Expand .smTile_fx { transform: translate(180px,0); } a.smTile.smTileW190.smTile_expL .smTile_Expand { left:-190px; } a.smTile.smTileW190.smTile_expL .smTile_Expand .smTile_fx { transform: translate(190px,0); } a.smTile.smTileW200.smTile_expL .smTile_Expand { left:-200px; } a.smTile.smTileW200.smTile_expL .smTile_Expand .smTile_fx { transform: translate(200px,0); } a.smTile.smTileW210.smTile_expL .smTile_Expand { left:-210px; } a.smTile.smTileW210.smTile_expL .smTile_Expand .smTile_fx { transform: translate(210px,0); } a.smTile.smTileW220.smTile_expL .smTile_Expand { left:-220px; } a.smTile.smTileW220.smTile_expL .smTile_Expand .smTile_fx { transform: translate(220px,0); } a.smTile.smTileW230.smTile_expL .smTile_Expand { left:-230px; } a.smTile.smTileW230.smTile_expL .smTile_Expand .smTile_fx { transform: translate(230px,0); } a.smTile.smTileW240.smTile_expL .smTile_Expand { left:-240px; } a.smTile.smTileW240.smTile_expL .smTile_Expand .smTile_fx { transform: translate(240px,0); } a.smTile.smTileW250.smTile_expL .smTile_Expand { left:-250px; } a.smTile.smTileW250.smTile_expL .smTile_Expand .smTile_fx { transform: translate(250px,0); } a.smTile.smTileW260.smTile_expL .smTile_Expand { left:-260px; } a.smTile.smTileW260.smTile_expL .smTile_Expand .smTile_fx { transform: translate(260px,0); } a.smTile.smTileW270.smTile_expL .smTile_Expand { left:-270px; } a.smTile.smTileW270.smTile_expL .smTile_Expand .smTile_fx { transform: translate(270px,0); } /* --- Center expand --- */ a.smTile.smTile_expC:hover .smTile_Expand .smTile_fx, a.smTile.smTile_expC:active .smTile_Expand .smTile_fx { transform: scaleX(1); } a.smTile.smTile_expC .smTile_Expand { left:-88px; } /* als _txt , 50% */ a.smTile.smTile_expC .smTile_Expand .smTile_fx { transform: scaleX(0); transition: all .2s linear; } a.smTile.smTile_expC .smTile_txt { float:right; text-align:left; } a.smTile.smTile_expC .smTile_fx .smTile_ico { float:right; } /* --- Top expand --- */ .smTile_expT .smTile_Expand { transform: rotate(-90deg); transform-origin:25px 25px; /* 50px van blok */ } .smTile_expT .smTile_Expand .smTile_fx { transform: translate(-175px,0); /* ????? */ } /* als _txt, neg */ /* --- Top/schuin 30deg expand --- */ .smTile_expTS .smTile_Expand { top:-65px; left:-5px; box-shadow:-5px 5px 10px 0px rgba(0,0,0,.3); transform: rotate(-30deg); transform-origin:25px 25px; /* 50px van blok */ } .smTile_expTS .smTile_Expand .smTile_fx { transition: transform .15s ease; transform:scale(.25); } /* als _txt, neg */ /* --- Top/schuin 15deg expand --- */ .smTile_expTSS .smTile_Expand { top:-70px; box-shadow:-5px 5px 10px 0px rgba(0,0,0,.3); transform: rotate(-15deg); transform-origin:25px 25px; /* 50px van blok */ } .smTile_expTSS .smTile_Expand .smTile_fx { transition: transform .15s ease; transform:scale(.25); } /* als _txt, neg */ /* --- Bottom/schuin expand --- */ .smTile_expBS .smTile_Expand { top:40px; left:-157px; box-shadow:-5px 5px 10px 0px rgba(0,0,0,.3); transform: rotate(-30deg); transform-origin:25px 25px; /* 50px van blok */ } .smTile_expBS .smTile_Expand .smTile_fx { transition: transform .15s ease; transform:scale(.25); } /* als _txt, neg */ /* --- Schuin expand algemeen EFFECT, knop donkerder --- */ /* TODO alg via spec klas > hover knop donkerder [2] ook hover over vlak */ a.smTile.smTile_expTS:hover .smTile_ico_knop, a.smTile.smTile_expTS:active .smTile_ico_knop, a.smTile.smTile_expBS:hover .smTile_ico_knop, a.smTile.smTile_expBS:active .smTile_ico_knop { box-shadow:0px -50px 0px 0px rgba(0,0,0,.25) inset; } a.smTile.smT_ADM:hover, a.smTile.smT_ADM:active { } a.smTile.smT_ADM:hover .smTile_ico_knop, a.smTile.smT_ADM:active .smTile_ico_knop { box-shadow:none; background:#c51a1b; border-radius:10px; } .smTile_Expand .smTile_fx { } /* ============= DISALE TILES =============== via js functie "disableTegels_zelfdeLink()" herkend dat ie zelfde link heeft, dan disablen of evt zelf via js/aspx toevoegen */ a.smTileDis { background:rgba(128,128,128,.67)!important; } a.smTileDis .smTile_fx { background:#707070!important; } a.smTileDis .smTile_Expand { display:none!important; } /* ==== HAMB MENU FOOTER, ICON FACEBOOK MET EFFECT ==== */ #MobileMenuFB { display:inline-block; margin-top:5px; margin-left:5px; width:40px; height:40px; line-height:40px; font-size: 30px; color:#fff; text-align:center; width:auto; transform:translate(-175px,0); transition:transform 0.33s ease; } #MobileMenuFB1 { font-size: 15px; font-weight: bold; padding-left:10px; margin:0px -10px 0px 0px; vertical-align:top; width:170px; display:inline-block; visibility:hidden; } #MobileMenuFB2 { width:40px; height:40px; line-height:40px; font-size: 30px; display:inline-block; font-family: "Ionicons"; background: #4c75ba; } #MobileMenuFB:hover { transform:translate(0px,0); background: #4c75ba; padding-right:3px; margin-right:10px; } /* marg: geen hover aan/uit bij transistion */ #MobileMenuFB:hover #MobileMenuFB1 { visibility:inherit; margin-right:-19px; } /* "F" dichtbij tekst */ #MobileMenuFB:hover #MobileMenuFB2 { background:transparent;} #dnn_ctr37940_ViewLoader_lblMessage { font-family:'Bree Serif', serif; color:#fff; padding:20px; line-height:60px; } /*SocialMedia*/ /* .SocialMediaIconsPane{ display:inline-block; vertical-align:top} .SocialMediaIcons {padding-top:10px; color:#fff;} .SocialMediaIcons .SocialMediaIcon {font-family: "Ionicons"; margin:0 10px 0 0;border-width:2px; border-style:solid; font-size:18px; background-color:#fff; border-radius:50%; line-height:27px; text-align:center; width:27px; height:27px; display:inline-block; vertical-align:top; zoom:1; *display:inline; } .SocialMediaIcons .SocialMediaIcon[title="facebook"] { font-size:24px; line-height:29px;} .SocialMediaIcons .SocialMediaIcon:hover { text-decoration:none; color: inherit; border-color: currentColor} */ /* ================================================================================ MENU'S ================================================================================ */ #MenuHolder { /* background:rgba(0,90,180,.75); */ background-color: rgba(0,134,199,.81); width:100%; z-index: 9; } .isHome #MenuHolder { position: absolute; } /* over banner */ .isWS2 #MenuHolder { background-color: rgba(223,65,61,.85); } .isWS3 #MenuHolder { background-color: rgba(91,165,46,.85); } .isWS4 #MenuHolder { background-color: rgba(255,175,55,.85); } .isWS5 #MenuHolder { background-color: rgba(149,25,129,.85); } /* .isSeq #MenuHolder{ background:rgba(0,134,199,.81); } */ /* #Menu * { transition:none; } .RadPanelBar_MainMenu * { transition:none; } */ #Menu { z-index:1001; /* padding-top:75px; float:right; */ width:100%; } #Menu { display:inline-block; vertical-align:top;zoom:1; *display:inline; background:transparent!important; } /* =================== RADMENU =================== */ /* === Root Items === */ .RadMenu_MainMenu { z-index: 910 !important; background-color:transparent!important; } .RadMenu_MainMenu .rmRootGroup .rmItem { margin: 0px; padding: 0px; } .RadMenu_MainMenu .rmRootGroup .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; text-decoration: none} .RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText { margin: 0px; padding:0; text-align:center; display: block; white-space: nowrap; background-color:transparent; color:#fff; text-transform:lowercase; height:50px; line-height:50px; overflow:hidden; padding:0px 30px 0px 0px; font-family: 'Armata', sans-serif;font-size:20px; } .RadMenu_MainMenu { float:left; } .RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText:hover, .RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText:active { background-color:transparent!important; } .RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText:hover { color:#ffbb56; } .isWS4 .RadMenu_MainMenu .rmRootGroup .rmItem .rmLink .rmText:hover { color:rgb(223,65,61); } .RadMenu_MainMenu .rmRootGroup .rmItem .rmSelected .rmText { background-color: transparent!important; } /* === Sub Items === */ .RadMenu_MainMenu .rmSlide { margin-top:15px; } .RadMenu_MainMenu .rmSlide .rmSlide { margin-top:0px; margin-left:5px; margin-right:5px; } .RadMenu_MainMenu .rmGroup { border-radius:15px; background: rgba(0,134,199,.81)!important; } .isWS2 .RadMenu_MainMenu .rmGroup { background: rgba(223,65,61,.85)!important; } .isWS3 .RadMenu_MainMenu .rmGroup { background: rgba(91,165,46,.85)!important; } .isWS4 .RadMenu_MainMenu .rmGroup { background: rgba(255,175,55,.85)!important; } .isWS5 .RadMenu_MainMenu .rmGroup { background: rgba(149,25,129,.85)!important; } .RadMenu_MainMenu .rmGroup .rmItem { margin: 0px; padding: 0px; } .RadMenu_MainMenu .rmGroup .rmItem .rmLink { margin: 0px; padding: 0px; cursor:pointer; text-decoration: none} .RadMenu_MainMenu .rmGroup .rmItem .rmLink .rmText { margin: 0px; padding:0 25px 0px 14px; display: block; white-space: nowrap; min-width:130px; background:transparent!important; line-height:32px; height:auto; min-height:32px; width:auto; text-align:left; } .RadMenu_MainMenu .rmGroup .rmItem.rmFirst > .rmLink { padding-top:10px; } .RadMenu_MainMenu .rmGroup .rmItem.rmLast > .rmLink { padding-bottom:10px; } /* Selected State */ .RadMenu_MainMenu .rmGroup .rmItem .rmSelected .rmText { } /* Hover State */ .RadMenu_MainMenu .rmGroup .rmItem .rmLink .rmText:hover { color:#ffbb56; } .isWS4 .RadMenu_MainMenu .rmGroup .rmItem .rmLink .rmText:hover { color:rgb(223,65,61); } /* ================================================================================================================== RADPANELBAR (SEQ PAGES) ================================================================================================================== */ .RadPanelBar_MainMenu { z-index:910 !important; padding:15px 0px!important; border:0px!important; border-radius:12px; background:#64b243; } #dnn_LeftNarrowPane #icr_sidebar { display:block; } /* .sb_categorieslist naar .pm_block */ #dnn_LeftNarrowPane .pm_block ul.pm_block_normallist, .RadPanelBar_MainMenu .rpRootGroup { margin:0px !important; padding:0px !important; border:0px !important; } .RadPanelBar_MainMenu .rpRootGroup .rpItem { margin:0px !important; padding:0px !important; border:0px !important; } #dnn_LeftNarrowPane .pm_block ul.pm_block_normallist li, .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink { margin:0px !important; padding:0px !important; border:0px !important; cursor:pointer; } .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut { margin:0px !important; padding:0px !important; border:0px !important; display:block;} #dnn_LeftNarrowPane .pm_block ul.pm_block_normallist a, .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut .rpText { margin:0px !important; border:0px !important; display:block; white-space:normal; font-size:17px; min-height:18px; font-family: 'Armata', sans-serif; font-size: 20px; color:#fff!important; letter-spacing: normal !important; text-transform:lowercase!important; line-height:22px; padding:5px 10px 5px 15px!important; /* same lineheight as topmenu dropdown 35px.. measurement in PS */ background-color:transparent!important; } .RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut .rpText { background-color:#f0b60b!important; } /* -------- background on selected/hover -------- */ .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpSelected .rpOut .rpText { xxxbackground-color:#eeca58!important; background-color:rgba(255,255,255,.15)!important; } .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut .rpText:hover, .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpLink .rpOut .rpText:active, #dnn_LeftNarrowPane .pm_block ul.pm_block_normallist li a:hover, #dnn_LeftNarrowPane .pm_block ul.pm_block_normallist li a:active { text-decoration:none !important; color:#ec5a4f!important; } .RadPanelBar_MainMenu .rpRootGroup .rpItem .rpSelected .rpOut .rpText { text-decoration:none !important; } /* -------- subitems stylen -------- */ .RadPanelBar_MainMenu .rpGroup { margin:0px !important; padding:0px !important; border:0px !important; } .RadPanelBar_MainMenu .rpGroup .rpItem { margin:0px !important; padding:0px 0px 0px 0px !important; border:0px !important; } .RadPanelBar_MainMenu .rpGroup .rpItem .rpLink { margin:0px !important; padding:0px !important; border:0px !important; cursor:pointer; } .RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut { margin:0px !important; padding:0px !important; border:0px !important; display:block;} .RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut .rpText { margin:0px !important; border:0px !important; display:block; white-space: normal; padding:10px 10px!important; } .RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut .rpText:before { content:"\f10a"; font-family: "Ionicons"; font-size: 17px; color:#fff; margin:0px 10px 0px 5px; position: relative; top:1px; } .RadPanelBar_MainMenu .rpGroup .rpItem .rpLink .rpOut .rpText:hover { text-decoration:none !important;} .RadPanelBar_MainMenu .rpGroup .rpItem .rpSelected .rpOut .rpText { } /* -------- kleuren -------- */ .isWS23 .RadPanelBar_MainMenu { background:#ff9d24; } /* ================================================================================ SCROLL 2 TOP ================================================================================ */ #back-to-top { background-color:#1a9cdc; border-radius: 50%; } #back-to-top, .touch-device #back-to-top:hover { bottom:15px; right:10px; display:none; height:45px; position:fixed; text-shadow:none; -webkit-transition:all .2s ease; transition:all .2s ease; width:45px; z-index:980; line-height:45px; text-align:center; font-family: "Ionicons"; font-size:28px;; color:#fff; box-shadow:0px 0px 0px 4px rgba(255,255,255,.35); } #back-to-top:hover { text-decoration:none; background:#ec594d; } /* ================================================================================ SocialShare ================================================================================ */ .SocialShare { float:right; margin:15px 0} .SocialShare .SocialShareLabel { float:left; line-height:32px;} .SocialShare:after{ content: ""; display:block; clear:both;} .SocialShare [class^="SS_"] {cursor:pointer; display: block; width: 32px; height: 32px; font-size: 26px; text-align:center; line-height: 32px; margin: 0 0 0 10px; float: left; position: relative;} .SocialShare [class^="SS_"]:before { font-family: 'Ionicons'; color: #fff; display:block; content: ""; width: 100%; height: 100%; border-width:1px; border-style:solid } .SocialShare [class^="SS_"]:hover:before { background-color:#fff !important} .SocialShare .SS_FaceBook { } .SocialShare .SS_FaceBook:before { content: "\f231";} .SocialShare .SS_Google { } .SocialShare .SS_Google:before { content: "\f235";} .SocialShare .SS_LinkedIn {} .SocialShare .SS_LinkedIn:before { content: "\f239";} .SocialShare .SS_Twitter { } .SocialShare .SS_Twitter:before { content: "\f243";} /* ================================================================================ PUBLICATIE MODULE ================================================================================ */ /* ARTICLE LIST */ .pubControls { padding-bottom:10px } .pubArticleList{} .pubArticleList .pubItem {padding-bottom:20px;} .pubArticleList .pubItem .pubThumbNail { height:120px;} .pubArticleList .pubItem .pubLink { font-size:22px; font-family:"Open Sans", sans-serif; font-weight:700; } .pubArticleList .pubItem .pubMetaData { font-size:12px; padding-bottom:5px; color:#333;} .pubArticleList .pubItem .pubReturnLink { float:left} /* ARTICLE DETAILS */ .pubArticleDetails {} .pubArticleDetails h1 { font-size:50px; } .pubArticleDetails .pubMetaData { color:#333; font-size:12px; padding-bottom:5px;} .pubArticleDetails .pubContent { margin-bottom:10px;} .pubArticleDetails .pubReturnLink { overflow:hidden;} .pubArticleDetails .pubReturnLink a { float:right;} /* ARTICLE VIEWER */ .pubBannerWrapper{} .pubBannerWrapper .pubItem{ height:425px; height:42vh; width:100%; background-repeat:no-repeat; background-size:cover; background-position:center center; } .pubBannerWrapper .pubItem .pubTitle, .pubBannerWrapper .pubItem .pubSummary { display:none;} .pubArticleHomeViewer {} .pubArticleHomeViewer h1 { color:#fff; text-align:center; padding:0 0 45px 0} .pubArticleHomeViewer .pubItem {} .pubArticleHomeViewer .pubItem.pubItemNumber4 { margin-right:0;} .pubArticleHomeViewer .pubItem .pubThumbnail { height:140px; background-position:center center; background-repeat:no-repeat; background-size:cover} .pubArticleHomeViewer .pubItem .pubTitle { /* font-size:22px; color:#fff; font-family: 'Open Sans', sans-serif; font-weight:700; line-height:1.25 */ } .pubArticleHomeViewer .pubItem .pubSummary { color:#fff; padding:0 0 20px 0;} #MeerNieuws { display:none} /* COMMENT VIEWER */ .pubCommentViewer .pubItem {} .pubCommentViewer .pubItem .pubMetaData {font-size:11px; color:#999;} /* SIDEBAR */ .pmsb_wrap { } .pmsb_wrap .pm_block.sb_searchinputbox { display:none} .pmsb_wrap .pm_block .pm_block_header { font-size:25px; font-weight:400; font-family: 'Bree Serif', serif; color:#0dad99; } .pmsb_wrap .pm_block ul { } .pmsb_wrap .pm_block ul li { } .pmsb_wrap .pm_block ul li a, .pmsb_wrap .pm_block ul li span { } .pmsb_wrap .navBlockItemLink, #linkBack { color:#444 !important} /* ================================================================================ MEDEWERKERS LIJST ================================================================================ */ .Medewerkerslijst { } .MedewerkerFilters { margin: 20px 0; padding: 15px; box-sizing: border-box; background-color: #ffaf3a; border-radius: 10px;} .MedewerkerFilterItem { display: flex; justify-content: space-between; } .MedewerkerFilterItemLabel { width: 15%; font-weight: 600;} .MedewerkerFilterItemInput { width: 85%;} .MedewerkerFilterItemInput select {width:100%; display:block;height:24px; margin-bottom:10px; color: #444; background-color: #ffefd7; border: 1px solid #dc9226;} .MedewerkerFilterItemInput input {width:100%; display:block;height:24px; margin-bottom:0px; box-sizing:border-box; padding:0 5px; color: #444; background-color: #ffefd7; border: 1px solid #dc9226;} .Medewerkerslijst .MedewerkerItems {} .Medewerkerslijst .MedewerkerItem{} .MedewerkerCard { display: flex; justify-content: space-between; align-items: center; margin: 0 0 20px 0;padding: 15px; border-radius: 10px; border: 1px solid #f5f5f5; background-color: rgba(255,255,255,0.8);} .MedewerkerCardImage { width: 140px; } .MedewerkerCardImage span { display: block; width: 100px; height: 100px; border: 2px solid #ec5a4e; border-radius: 50%; background-size: cover; background-image: url(images/teammember.jpg);} .MedewerkerCardImage.NoImage span { background-image: url(images/teammember.jpg) !important;} .MedewerkerCardContent { width: calc(100% - 140px); font-size: 14px; } .MedewerkerCardContent > div { display: flex; justify-content: space-between;} .MedewerkerCardContent > div > span { /*display: block;*/ width: calc(100% - 110px); } .MedewerkerCardContent > div > span:first-of-type { width: 110px; font-weight: 600; color: #019cdb;} .MedewerkerCardContent > div > span span{ /*display: block; */} .MedewerkerCardContent > div > span span + span:before{ content: ", "; /*display: block; */} .MedewerkersEditTable { width: 100%; font-size: 14px;} .MedewerkersEditTable tr:first-child {background-color:#aaa; color:#fff} .MedewerkersEditTable tr td {border-bottom:1px solid #aaa; padding:5px} /* ================================================================================ flickity ================================================================================ */ .flickity-enabled { position: relative;} .flickity-enabled:focus { outline: none;} .flickity-viewport { overflow: hidden; position: relative; height: 100%;} .flickity-slider { position: absolute; width: 100%; height: 100%;} /* draggable */ .flickity-enabled.is-draggable { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} .flickity-enabled.is-draggable .flickity-viewport { cursor: move; cursor: -webkit-grab; cursor: grab;} .flickity-enabled.is-draggable .flickity-viewport.is-pointer-down { cursor: -webkit-grabbing; cursor: grabbing;} /* ---- page dots ---- */ .flickity-page-dots { position: absolute; width: 100%; bottom: 25px; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1;} .flickity-rtl .flickity-page-dots { direction: rtl;} .flickity-page-dots .dot { display: inline-block; width: 10px; height: 10px; margin: 0 6px; background: #fff; border-radius: 50%; cursor: pointer; border:2px solid #fff;} .flickity-page-dots .dot.is-selected { } /* ================================================================================ TWitterModule ================================================================================ */ .TweetItemList .TweetItem { overflow:hidden} .TweetItemList .TweetItem .TwitterImage { max-width:30%; float:left;} .TweetItemList .TweetItem .TwitterText { max-width:60%; float:right; word-break:normal} .DnnModule ul.TweetItemList { max-width:100% !important} /* ================================================================================ Google MAps ================================================================================ */ #map-canvas {height:400px; height:40vh;} #map-canvas .gmnoprint { display:none} .google-maps {background:url(images/googlemaps.jpg); background-repeat:no-repeat; background-size:cover; background-position: center center;} /* ================================================================================ Events Module ================================================================================ */ td.EventNextPrev + td { letter-spacing:normal; font-weight:400; font-size:36px!important; color:#019cdb; text-shadow:none!important; padding:10px 0px;} .isSeq .ModDNNEventsC .EvtDateControls { padding-bottom: 0px; } .isSeq .ThemeDefault .Event { border:none!important; border-color:transparent!important; background-color:transparent!important; } .isSeq .ThemeDefault .EventOtherMonthDay { background-color:rgba(0,0,0,.075)!important; } .DetailEventDetails1 .EventDetailsText {padding-bottom:15px;} .DetailEventDetails1 ~ .DetailCommands li { color:#fff;} .DetailEventDetails1 ~ .DetailCommands li > a { text-shadow:none; box-shadow:none; xxxbackground:none; border-radius:0; display:inline-block; color: inherit !important; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; margin:15px 0} .DetailEventDetails1 ~ .DetailCommands li > a:hover { background-color:#fff;} .DetailEventDetails1 ~ .DetailCommands li > a[title="Printen"] { display:none} .ModDNNEventsC .ListDataGrid, .ModDNNEventsC .ListDataGrid td, .ModDNNEventsC .ListDataGrid tr, .ModDNNEventsC .ListDataGrid td.ListDescription {border:0 !important; background-color:transparent !important} .ModDNNEventsC .EvtDateControls {padding-bottom:20px;} .ModDNNEventsC .EventItem {padding-bottom:30px; font-family: 'Open Sans', sans-serif; } .ModDNNEventsC .EventItem .EventTitle { border:0 !important; background-image:none; text-align:left; background-color:transparent !important; height:auto !important; font-size:22px !important; } .ModDNNEventsC .EventItem .EventTitle a {font-family: 'Open Sans', sans-serif;} .ModDNNEventsC .EventItem .EventDate { font-weight:700; text-transform:uppercase} /* ================================================================================ FOTO Module ================================================================================ */ .ModSimpleGalleryC {} .view{ border-collapse:collapse; padding:0; width:100%} .view .album-item { padding:10px 4px; text-align:left !important} .view .album-item >img { height:auto !important; width:100% !important; border:0 !important} .View { border-collapse:collapse; padding:0; width:100%} .View .photo-frame { text-align:left; width:100%; padding:0;border-collapse:collapse; } .View .photo-frame ~ span { text-align:center; display:block; padding-bottom:10px;} .View .photo-frame .mid--x,.View .photo-frame .midx-- { width:0; display:none} .View .photo-frame td[valign="top"] { width:100%;} .View .photo-frame td a { display:block; padding-left:4px;} .View .photo-frame td a img { border:0 !important; height:auto !important; width:100% !important} /* ================================================================================ NieuwsBrieven Module ================================================================================ */ .NewsletterSubscription{} .NewsletterSubscription .SubScriptionInput input{ width:100%; border: 1px solid #c9c9c9; background:#ffffff; border-radius:3px; padding:8px; box-sizing:border-box; -webkit-box-sizing: border-box; } .NewsletterSubscription .SubscriptionActions {} /* ================================================================================ Formulieren Module ================================================================================ */ .DnnModule-EngageSurvey {} .DnnModule-EngageSurvey .survey-listing{} .DnnModule-EngageSurvey .survey-listing ul.sl-repeater {border-width:1px; border:0;} .DnnModule-EngageSurvey .survey-listing ul.sl-repeater li { background:none;border:0; border-bottom-width:1px; border-top-style:solid; padding:15px 0; } .DnnModule-EngageSurvey .survey-listing ul.sl-repeater li span.sl-repeater-data { width:auto !important} .DnnModule-EngageSurvey .survey-listing ul.sl-repeater li span.sl-repeater-data .sl-title { font-size:22px; font-family: 'Open Sans', sans-serif; } .DnnModule-EngageSurvey .survey-title { font-size:22px; font-family: 'Open Sans', sans-serif; padding-top:30px;} .DnnModule-EngageSurvey .section-wrap {} .DnnModule-EngageSurvey .section-wrap .question { font-weight:400;} .DnnModule-EngageSurvey .section-wrap input[type="text"]{ display:block; width:75%; max-width:450px; margin-bottom:5px; border:1px solid #c9c9c9; padding:8px; box-shadow:0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1); color:#333; border-radius:3px;} .DnnModule-EngageSurvey .section-wrap select {display:block; width:75%; max-width:250px; margin-bottom:18px; border:1px solid #c9c9c9; padding:8px; box-shadow:0px 1px 0px 0px rgba(255, 255, 255, 0.8), inset 0px 1px 2px 0px rgba(0, 0, 0, 0.1); color:#333; border-radius:3px;} .DnnModule-EngageSurvey input[type="submit"]{color:#fff; margin:25px 15px 0 0; text-shadow:none; box-shadow:none; background:none; border-radius:0; display:inline-block; color: fff; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; } .DnnModule-EngageSurvey input[type="submit"]:hover {background-color:#fff;} ul.sl-repeater li span.sl-repeater-actions { clear:both; padding-top:20px;} /* ================================================================================ Contact Module ================================================================================ */ .ModLesscherContactFormC .dnnFormItem input[type="submit"]{text-shadow:none; box-shadow:none; background:none; border-radius:0; display:inline-block; color: fff; padding:0 15px; font-weight:700; height:32px; line-height:33px; border-width:1px; border-style:solid; cursor:pointer; text-transform:uppercase; margin:15px 0} .ModLesscherContactFormC .dnnFormItem input[type="submit"]:hover {background-color:#fff;} /* ================================================================================ SEARCH RESULTS ================================================================================ */ .dnnSearchResultPanel { display:none} .dnnSearchResultAdvancedTip { display:none} .dnnSearchBox_advanced { display:none} .dnnSearchResultItem-Link { display:none;} .dnnSearchBoxPanel .dnnSearchBox { margin-left:0; margin-right:0; width:auto !important;} #dnnSearchResult_dnnSearchBox_input { position:relative; width:auto !important; background-color:transparent} .dnnSearchBox > a.dnnSearchButton { right:7px !important;} .dnnSearchBox > a.dnnSearchBoxClearText { right:35px !important; top:5px;} .pubArticleViewer.Search .pubItem { padding:15px 0;} /* ================================================================================ CONTAINER LAYOUT'S ================================================================================ */ .Container {} .ContainerHeader { } .ContainerContent {} .ContainerContent .ModDNNHTMLC img{ max-width:100%} .ContainerFooter {} /*fonts*/ .Font1{font-family: 'Open Sans', sans-serif; } .Font2{font-family: 'Lily Script One', cursive; } /* =================================================================================================== =================================================================================================== HEADMOB2016 - HAMB MENU 2016 CUSTOMIZE =================================================================================================== =================================================================================================== */ /* 1 - LOGO ROW 2 - TILES ROW 3 - SEARCH ROW 4 - MENU ROW 9 - OPMAAK */ /* ###################################################################### */ /* ####################### ALL ROWS - ALGEMEEN ####################### */ /* ###################################################################### */ .isMob { display:none; } .isNotMob { } /* rsp fe. <980px : switch */ /* ############################################################### */ /* ####################### 1 - LOGO ROW ####################### */ /* ############################################################### */ #HeadMobLogo { } #HeadMobLogo.mobHeadShown #LogoMob { transform:scale(1); } #HeadMobLogo.mobHeadAway #LogoMob { transform:scale(.9); } #LogoMob { height:104px;background:none no-repeat center center; padding:20px 0px; max-width:90%; background-size:100% auto; margin:0px auto; position:relative; } .isWS0 #LogoMob { background-image:url(images/logo_ElezierObadja.png); width:562px; } .isWS1 #LogoMob { background-image:url(images/logo_Eliezier.png); width:401px;} .isWS2 #LogoMob { background-image:url(images/logo_Obadja4.png); width:400px;} .isWS3 #LogoMob { background-image:url(images/logo_Obadja3.png); width:403px;} .isWS4 #LogoMob { background-image:url(images/logo_ObadjaDC.png); width:404px;} .isWS5 #LogoMob { background-image:url(images/logo_ElezierObadja.png); width:562px; } #LogoMob { transition: all 0.6s; } /* ################################################################ */ /* ####################### 2 - TILES ROW ####################### */ /* ################################################################ */ #HeadMobTiles { min-height:80px; text-align:center; background:#ffffff url(images/46.jpg) 33% 60% no-repeat; } #HeadMobTiles .InnerWrapper { min-height:inherit; background:rgba(0,134,199,.81);} .isWS2 #HeadMobTiles .InnerWrapper { background: rgba(223,65,61,.85); } .isWS3 #HeadMobTiles .InnerWrapper { background: rgba(91,165,46,.85); } .isWS4 #HeadMobTiles .InnerWrapper { background: rgba(255,175,55,.85); } #HeadMobTiles div { word-spacing:5px; } /* #MobileMenuTrigger, #MobileMenu, */ #HeadMobTiles .HeadMobBut { margin-top:15px; width:50px; height:50px; display:inline-block!important; float:none!important; line-height: 50px; z-index: 980; overflow: hidden; font-family: "Ionicons"; font-size: 32px; vertical-align: bottom; text-align: center; color: #fff; cursor:pointer; } #HeadMobTiles .HeadMobBut:hover, #HeadMobTiles .HeadMobBut.klikaan { background:#ec5a4f; box-shadow:none!important; } .isWS2 #HeadMobTiles .HeadMobBut:hover, .isWS2 #HeadMobTiles .HeadMobBut.klikaan { background:#ff9d24; /* Rood > geel */ } #HeadMobTiles .HeadMobBut.klikaan { transform:scale(.95); transition:transform-scale 0.2s ease; /* conform: js > function mobBarKlik() */ } #HeadMobTiles .HeadMobBut.klikuit { } #HeadMobTiles .HeadMobBut { xxwidth:120px; } #HeadMobTiles .HeadMobBut span { font-family:'Open Sans'; font-size:20px; color:#fff; line-height:45px; margin-left:10px; margin-right:5px; font-weight: bold; display:none;} #HeadMobTiles .HeadMobBut { background:#019cdb; xxbackground:#daedf8; xxxbackground:#312a74;} .isWS2 #HeadMobTiles .HeadMobBut { background:#df413d; box-shadow:0px 0px 0px 50px rgba(0,0,0,.15) inset; } .isWS3 #HeadMobTiles .HeadMobBut { background:#5ba52e; box-shadow:0px 0px 0px 50px rgba(0,0,0,.15) inset; } .isWS4 #HeadMobTiles .HeadMobBut { background:#ffaf38; box-shadow:0px 0px 0px 50px rgba(0,0,0,.15) inset; } #HeadMobTiles .HeadMobBut:hover, #HeadMobTiles .HeadMobBut:active { xxxbox-shadow:0px 0px 0px 2px #1d1d1b inset; } /* ################################################################# */ /* ####################### 3 - SEARCH ROW ####################### */ /* ################################################################# */ /*
*/ #Body.mobZoekAan { } #HeadMobZoek { overflow:hidden; xdisplay:none; display:block; } #MobielZoeken { min-height:85px; padding:25px 0px 35px 0px; transition:margin .2s ease; margin-top:-175px; /* SUX ! TODO */ color:#330000; background: #daedf8; /* STYLING */ } #MobielZoekenHolder a:hover, #MobielZoekenHolder a:active { background:#ec5a4f; } #MobielZoekenHolder .searchInputContainer { display: initial !important; margin: initial!important; position: initial!important; width:100%!important; /* < IE */ } #MobielZoekenHolder { display:block; max-width:480px; margin:0px auto; } #MobielZoekenHolder, #dnn_mobZkVeld_txtSearch { font-size:0; word-spacing:0; /* hide   */ } #dnn_mobZkVeld_cmdSearch, a.knopZOEK { margin-top:12px; display:inline-block; /* font-family: "Ionicons"; font-size:32px; html:  */ background:#019cdb; font-size:20px; color: #fff; vertical-align:middle; cursor:pointer; font-weight:bold; text-align:center; width:30px; height:40px; line-height:40px; width:25%; color:#fff!important; xxposition:absolute; /* NEE */ margin-left:2px; margin-right:2%; float:right; width: 130px; } a.knopZOEK { margin-left:-135px; } #dnn_mobZkVeld_txtSearch { width:92%; padding-left:2%; padding-right:2%; margin-left:2%; margin-right:2%; box-shadow:0px 0px 0px 2px #019cdb; background: #ffffff; border:none; outline: none; line-height:34px; min-height:34px; font-size: 18px; font-weight:600; } #dnn_mobZkVeld_txtSearch:after { clear:both; } /* ---- FONT/COLOR DESIGN ---- */ #dnn_mobZkVeld_txtSearch { color:#312a74; } /* show searchbox */ .focusOpZoek #dnn_mobZkVeld_txtSearch { color:#ec594d; } /* show searchbox */ #dnn_mobZkVeld_txtSearch:focus:not(:empty) { xcolor:transparent!important; xxbox-shadow:0px 0px 0px 2px #ec594d; } /* editing searchbox, keyboard shown */ #dnn_mobZkVeld_txtSearch:empty:focus { xxcolor:ec594d!important; } .focusOpZoek #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #ec594d; color:ec594d!important; } .focusOpZoek #dnn_mobZkVeld_txtSearch::-webkit-input-placeholder { color:transparent!important; } .focusOpZoek #dnn_mobZkVeld_txtSearch::-ms-input-placeholder { color:transparent!important; } .focusOpZoek #dnn_mobZkVeld_txtSearch::-moz-input-placeholder { color:transparent!important; } /* placeholder searchbox "Zoeken..." f.e. */ ::-webkit-input-placeholder { color:#019cdb!important; } ::-ms-input-placeholder { color:#019cdb!important;} ::-moz-input-placeholder { color:#019cdb!important; opacity:1; } #MobielZoekenInputTrigger { font-weight:bold; } #MobileMenu #MobielZoekenInput { color:#fff!important; font-size:15px; font-weight:bold; background:#26b28e; } #MobileMenu #MobielZoekenInput:not(:empty), #MobileMenu #MobielZoekenInput:focus { background:#fff!important; } /* ############################################################### */ /* ####################### 4 - MENU ROW ####################### */ /* ############################################################### */ #HeadMobMenu { overflow:hidden; } /* ======================= 4.1 menu row vlak ======================= */ #MobileMenu { width:100%; background:transparent; margin:0px auto 0px auto; max-width:480px; overflow:hidden; display:inherit; } #MobileMenu #MobiNav /* > ul */ { display:inherit; transition:margin .2s ease; } #MobileMenu.active { margin-top:0%; display:block; height:100%;} /* on/off */ #MobileMenu.active #MobiNav { display:inherit; } /* ======================= 4.2 menu opmaak ======================= */ #MobileMenu ul {list-style:none;} #MobileMenu #MobiNav > li { xxxborder-bottom:1px solid rgba(255,255,255,0.3);} #MobileMenu #MobiNav > li.haschild { overflow:hidden; } #MobileMenu #MobiNav li { position:relative; display:block; width:100%; min-height:30px; line-height:30px; box-sizing:border-box; -webkit-box-sizing:border-box; padding:10px 0 10px 10px; } #MobileMenu #MobiNav li.haschild { padding:10px 0 10px 10px; overflow:hidden; } #MobileMenu #MobiNav div.hamnode { /* -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; */ text-decoration:none !important; display:inline-block; position:absolute; z-index:1000; font-family: "Ionicons"; font-size: 24px; text-align:center; color:#fff; transition:all 0.25s ease; height: 30px; line-height: 30px; width: 30px; top: 7px; right:7px; border:none; margin-top:0px; /* < border weg */ cursor:pointer!important; } #MobileMenu #MobiNav .hamnode { } #MobileMenu #MobiNav .hamnode:hover, #MobileMenu #MobiNav .hamnode:active { xxbackground: #ec5a4f!important; xxbackground: rgba(255,255,255,.5)!important; xxbox-shadow: 0px 0px 0px 2px #ffffff inset, 0px 0px 5px 2px rgba(255,255,255,1) } #MobileMenu #MobiNav .nonode:hover, #MobileMenu #MobiNav .nonode:active /* GEEN NODE evt wel blokje IS WEG*/ { background:#ec5a4f!important; } #MobileMenu #MobiNav .subLevel { display:none; margin: 0px; } #MobileMenu #MobiNav li.haschild .hamnode:after { content:"\f104"; } #MobileMenu #MobiNav li.haschild.active > .hamnode { transform: scaleY(-1); } #MobileMenu #MobiNav li a {-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: transparent; overflow:hidden; text-overflow:ellipsis; color: inherit !important; position:relative; display:inline; width:auto; /* z-index:900; */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;} #MobileMenu #MobiNav li.haschild.active > .subLevel { display:block; } #MobileMenu #MobiNav div.haminspring { float: left; display: inline-block; position: relative; } #MobileMenu #MobiNav div.hamblok { max-width:calc(100% - 100px); display: inline-block; position: relative; } /* ---- #MOBILEMENU MET FOOTER ---- */ #MobileMenu { xxxpadding-bottom:20px; } #MobileMenuFooter { height:50px; position: absolute; bottom:50px; /* = #MobileMenu nav */ width:100%; background:#941b81; } /* ======================= 4.9 opmaak menu opmaak ======================= */ /* ####################### 9 - OPMAAK ############################################### */ /* ---- BASIS #MOBILEMENU ---- */ .isMob { background:#fff; } /* breedte vlak */ #MobielZoeken, #MobileNav, #MobileMenuFooter { width:inherit; max-width:inherit; } #MobielZoekenInput { appearance:none; -webkit-appearance:none; height:32px; padding: 0px 10px; border:0; border-radius:0;} #MobielZoekenInputTrigger {font-family: "Ionicons"; font-size:32px; color: inherit; display:inline-block; vertical-align:middle; padding:0 10px; cursor:pointer} #MobileMenu #MobileNav { position:relative; } #MobileMenu #MobileMenuHeader { line-height:50px; } #MobileMenuTrigger { background:#af54a1;} #wegMobileMenu #MobiNav .item .hamlink { } /* mrg! */ #wegMobileMenu #MobiNav .item .hamlink.hassublvl { width:calc( 100% - 60px); } /* blokje + margin blokje R */ /* #MobileMenu.active #MobileNav */ /* .mobMenuAan #MobileNav */ #MobileMenu.active #MobileNav { overflow-y:auto; } #wegMobileMenu ul ul { margin-left:0px; } #MobileMenu #MobielZoeken .MobielZoekenIntroTxt { padding-left:20px; } /* uitlijnen op tekst-items van menu */ #MobileMenu #MobielZoeken .MobielZoekenIntroTxt { padding-right:10px; vertical-align: middle; } /* ------------------------- PIJLTJE DOWN BIJ HOOFDKNOP ------------------------- */ #MobileMenu #MobiNav li .subLevel { padding-top:15px; padding-bottom:15px; } #MobileMenu #MobiNav li li .subLevel { padding-top:0px; padding-bottom:0px; } #MobileMenu #MobiNav li li .subLevel .subLevel { padding-bottom:0px; } #MobileMenu #MobiNav li .subLevel:before { position:absolute; left:50%; top:33px; width:40px; height:40px; z-index:99; margin-left:-20px; font-family: 'Ionicons'; color: #a00; display:block; content: ""; text-align:center; font-size:60px; content: "\f35f"; } #MobileMenu #MobiNav li li .subLevel:before { display:none; } #MobileMenu #MobiNav li .subLevel:before { } #MobileMenu #MobiNav li .subLevel > .item { } #MobileMenu #MobiNav li .subLevel > .item { transform-origin:center center; animation:hammenu_pop .2s normal 0s 1; } @keyframes hammenu_pop {0% {transform:scaleY(0);} 100%{transform:scaleY(1);}} #MobileMenu #MobiNav .item , #MobileMenu #MobiNav .item.haschild { padding:0px 0px; margin:0px 0px 5px 0px; } #MobileMenu #MobiNav .item .item , #MobileMenu #MobiNav .item .item.haschild { margin:0px 0px; } #MobileMenu #MobiNav .hamitem { padding:6px 0px; } /* colo balk */ #MobileMenu #MobiNav li .subLevel:before { color:#daedf8; } /* same color dit is pijltje down*/ #MobileMenu #MobiNav .subLevel .hamitem { padding:4px 0px; } /* #MobileMenu #MobiNav .item .item, #MobileMenu #MobiNav .item .item.haschild { padding:0px!important; margin:0px; } */ #MobileMenu #MobiNav .item .hamlink { margin:0px; /* width: calc( 100% - 70px); !!! */ padding: 3px 5px; /* witruimt vanw border empty bij + en - */ } #MobileMenu #MobiNav .subLevel .item .hamlink { margin:-3px 0px; } #MobileMenu #MobiNav li .disabled .hamtxt { color:#888!important; text-decoration:none!important; } #MobileMenu #MobiNav li .breadcrumb .hamtxt { } #MobileMenu #MobiNav li .hamtxt {} #MobileMenu #MobiNav > .item { border-bottom:2px solid transparent; } #MobileMenu #MobiNav > .item.last { border-bottom:none; } /* -- #MobileMenu #MobiNav li .selected .hamtxt:after { display:inline-flex; content:" "; margin-left:10px; transform:translate(0px,-5px); width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 12px solid #ec5a4f; } #MobileMenu #MobiNav li a.hamlink.selected:hover .hamtxt:after, #MobileMenu #MobiNav li a.hamlink.selected:active .hamtxt:after { border-left-color: #ffffff; } */ /* ------------ AANPASSEN DESIGN ----------- */ #MobileMenu #MobiNav { color: inherit; font-size:16px; margin:-200% 2% 0px 2%; /* margin-top is fallback > js berekend later : 2% is uitlijnen zoekbox*/ padding:20px 0px 20px 0px; /* wit ruimt boven/onder menu lijst */ /* SCROLL MEE BACKGROUND */ } #MobileMenu #MobiNav > li { border-bottom:none; } #MobileMenu #MobiNav li .hamlink { /* margin:5px; /* width: calc( 100% - 70px); !!! */ } #MobileMenu #MobiNav li .hamtxt { border-radius:5px; padding-top:2px; padding-bottom:2px; padding-left:10px; padding-right:10px; display:inline-block; width: auto; line-height:1.5; } /* ---------- OPMAAK MENU ------------- */ /* #MobileMenu nav { padding:0px; } */ #MobiNav .item { margin:10px 0px; } #MobiNav .item .item { margin:0px; } #MobileMenu #MobiNav li.haschild > .subLevel { padding-left:0px; } #MobileMenu .haminspring {} #MobileMenu ul ul .haminspring:after { display:block; float:left; width:auto; height:18px; font-family: "Ionicons"; line-height:30px; color:inherit; font-size: 24px; font-weight:bold; margin-top:1px; margin-left:15px; margin-right: -5px; min-width: 10px; letter-spacing:4px; color:#312a74; } /* ronde streep */ /* SPATIES #MobileMenu ul ul .haminspring:after { content:"\00a0\00a0\00a0"; } #MobileMenu ul ul ul .haminspring:after { content:"\00a0\00a0\00a0\00a0\00a0"; } #MobileMenu ul ul ul ul .haminspring:after { content:"\00a0\00a0\00a0\00a0\00a0\00a0\00a0"; } */ /* #MobileMenu ul ul ul .haminspring:after { content:"\f125"; } #MobileMenu ul ul ul ul .haminspring:after { content:"\f125\f125"; } #MobileMenu ul ul ul ul ul .haminspring:after { content:"\f125\f125\f125"; } #MobileMenu ul ul ul ul ul ul .haminspring:after { content:"\f125\f125\f125\f125"; } #MobileMenu ul ul ul ul ul ul ul .haminspring:after { content:"\f125\f125\f125\f125\f125"; } #MobileMenu ul ul ul ul ul ul ul ul .haminspring:after { content:"\f125\f125\f125\f125\f125\f125"; } */ #MobileMenu ul ul ul .haminspring:after { content:"\f363"; } #MobileMenu ul ul ul ul .haminspring:after { content:"\f363\f363"; } #MobileMenu ul ul ul ul ul .haminspring:after { content:"\f363\f363\f363"; } #MobileMenu ul ul ul ul ul ul .haminspring:after { content:"\f363\f363\f363\f363"; } #MobileMenu ul ul ul ul ul ul ul .haminspring:after { content:"\f363\f363\f363\f363\f363"; } #MobileMenu ul ul ul ul ul ul ul ul .haminspring:after { content:"\f363\f363\f363\f363\f363\f363"; } /* #MobileMenu ul ul ul ul .haminspring:after { content:"\f208\00a0\f208\00a0\f208"; } */ #MobileMenu #MobiNav li.haschild.active >.GetSubLevel { /* xxxbackground-color:#009e4d; /* KNOP [+] / [-] */ } #MobileMenu #MobiNav li.haschild .GetSubLevel { border-color:transparent; background:#f7a703; color:#ffffff!important; /* heel licht geel / blauw */ xxxborder-radius:7px 0px 7px 0px; /* huisstijl */ xxxmargin-left:0px; } #MobileMenu #MobiNav > li.haschild { } #MobiNav .active .active .active { } /* #MobiNav .active .active .active .active { background:transparent; } in welk nivo achtergrond kleur niet donkerder maken */ #MobiNav .item a.hamlink { text-decoration:none!important; text-align:left; width:calc( 100% - 50px); /* extra veel witruimte, scroll over +/- knoppen rechts... en lange teksten... */ } #MobiNav .hamitem a.hamlink .hamtxt /* --- ROOT ITEM --- */ { font-size: 18px; font-weight: bold; color:#312a74!important; } #MobiNav .subLevel .hamitem a.hamlink .hamtxt /* --- SUB ITEMS --- */ { font-size: 15px; } #MobiNav .item a.hamlink.breadcrumb .hamtxt { /* color:#ec5a4f!important; */ } /* ------------------------- SELECTED ANDERE KLEUR ------------------------- */ #MobiNav .item a.hamlink.selected .hamtxt { /* background:#f8e8e9; */ xxtext-decoration:underline!important; } #MobileMenu .item a.hamlink.selected .haminspring:after { /* color:#f8e8e9; */ } #MobiNav .itemPPsplit { min-height:10px!important; } /* ------------------------- ACTIVE-ON-KLIK ------------------------- */ #MobiNav .item a.hamlink:active .hamtxt { background:#312a74!important; } /* ------------------------- HOVER ------------------------- */ #MobMenuClose:hover, #MobMenuClose:active, #MobZoekClose:hover, #MobZoekClose:active, a.GetSubLevel:hover, a.GetSubLevel:active { background-color: #ec5a4f!important; } #MobiNav .item a.hamlink:hover .hamtxt, #MobiNav .item a.hamlink:active .hamtxt { color:#ffffff!important; background: #131d49!important; } #MobiNav #hamID8077 a.hamlink:hover .hamtxt, #MobiNav #hamID8077 a.hamlink:active .hamtxt { background:#ffffff!important; color: #131d49!important; } #MobileMenu .item a.hamlink:hover .haminspring:after, #MobileMenu .item a.hamlink:active .haminspring:after { color:#ec5a4f; } #MobiNav .item.itemPP a.hamlink:hover .hamtxt, #MobiNav .item.itemPP a.hamlink:active .hamtxt { color:#131d49!important; background:rgba(0,0,0,.25)!important; } #MobileMenu #MobiNav .hamnode { xxxbackground:rgba(0,0,0,.33)!important; xxbox-shadow:0px 0px 0px 2px #ffffff inset;} /* ===== PORTAL ===== */ /* light */ .isWS0 #MobielZoeken, #hamSLID8077 .hamitem, .XXXisWS0 #MobileMenu #MobiNav .hamitem { background:#d9ecf7; background:#e8eef2; } /* dark */ .mobZoekAan.mobMenuAan .isWS0 #HeadMobZoek #MobielZoeken { box-shadow: 0px -4px 0px 0px #1a9cdc inset; } .isWS0 #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #1a9cdc; } .isWS0 #dnn_mobZkVeld_cmdSearch, .isWS0 a.knopZOEK { background:#1a9cdc!important; } .isWS0 #MobileMenu ul ul .haminspring:after { xxxcolor:#1a9cdc; } /* ===== ELEZIERSCHOOL ===== */ /* light */ .isWS1 #MobielZoeken, #hamSLID8371 .hamitem, .XXXisWS1 #MobileMenu #MobiNav .hamitem { background:#ddf0fa; } /* dark */ .mobZoekAan.mobMenuAan .isWS1 #HeadMobZoek #MobielZoeken { box-shadow: 0px -4px 0px 0px #ec594d inset; } .isWS1 #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #ec594d; } .isWS1 #dnn_mobZkVeld_cmdSearch, .isWS1 a.knopZOEK { background:#ec594d!important; } .isWS1 #MobileMenu ul ul .haminspring:after { xxxcolor:#ec594d; } /* ===== CLUSTER 4 ===== */ /* light */ .isWS2 #MobielZoeken, #hamSLID8384 .hamitem, .XXXisWS2 #MobileMenu #MobiNav .hamitem { background:#fbe3e3; } /* dark */ .mobZoekAan.mobMenuAan .isWS2 #HeadMobZoek #MobielZoeken { box-shadow: 0px -4px 0px 0px #ff9d24 inset; } .isWS2 #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #ff9d24; } .isWS2 #dnn_mobZkVeld_cmdSearch, .isWS2 a.knopZOEK { background:#ff9d24!important; } .isWS2 #MobileMenu ul ul .haminspring:after { xxxcolor:#ff9d24; } /* ===== CLUSTER 3 ===== */ /* light */ .isWS3 #MobielZoeken, #hamSLID8397 .hamitem, .XXXisWS3 #MobileMenu #MobiNav .hamitem { background:#e7f2e0; } /* dark */ .mobZoekAan.mobMenuAan .isWS3 #HeadMobZoek #MobielZoeken { box-shadow: 0px -4px 0px 0px #ff9d24 inset; } .isWS3 #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #ff9d24; } .isWS3 #dnn_mobZkVeld_cmdSearch, .isWS3 a.knopZOEK { background:#ff9d24!important; } .isWS3 #MobileMenu ul ul .haminspring:after { xxxcolor:#ffad48; } /* ===== DIENSTENCENTRUM ===== */ /* light */ .isWS4 #MobielZoeken, #hamSLID8410 .hamitem, .isWS4 #MobileMenu #MobiNav .hamitem { background:#ffda72; } /* dark */ .mobZoekAan.mobMenuAan .isWS4 #HeadMobZoek #MobielZoeken { box-shadow: 0px -4px 0px 0px #66b245 inset; } .isWS4 #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #66b245; } .isWS4 #dnn_mobZkVeld_cmdSearch, .isWS4 a.knopZOEK { background:#66b245!important; } .isWS4 #MobileMenu ul ul .haminspring:after { xxxcolor:#66b245; } /* ===== URK ===== */ /* light */ .isWS5 #MobielZoeken, #hamSLID8371 .hamitem, .XXXisWS5 #MobileMenu #MobiNav .hamitem { background:#ddf0fa; } /* dark */ .mobZoekAan.mobMenuAan .isWS5 #HeadMobZoek #MobielZoeken { box-shadow: 0px -4px 0px 0px #ec594d inset; } .isWS5 #dnn_mobZkVeld_txtSearch { box-shadow:0px 0px 0px 2px #ec594d; } .isWS5 #dnn_mobZkVeld_cmdSearch, .isWS5 a.knopZOEK { background:#ec594d!important; } .isWS5 #MobileMenu ul ul .haminspring:after { xxxcolor:#ec594d; } /* --------------------------------------------------------------------------------------------------------------------------- .isWS1 #MobielZoeken, .isWS1 #MobileMenu #MobiNav .hamitem */ /* @@@ PORTAL @@@ */ #MobileMenu #MobiNav #hamID8077, #hamPID8077 .hamnode, #MobileMenu #MobiNav #hamID8077 .hamitem { background:#131d49; } #MobileMenu #MobiNav #hamSLID8077.subLevel:before { color:#131d49; } #MobileMenu #MobiNav #hamSLID8077 .item a.hamlink.selected .hamtxt { color:#0068a5!important } /* active page */ /* @@@ ELEZIERSCHOOL @@@ */ #MobileMenu #MobiNav #hamPID8372 { display:none; } #MobileMenu #MobiNav #hamID8371, #hamPID8371 .hamnode, #MobileMenu #MobiNav #hamID8371 .hamitem { background:#1a9cdc; } #MobileMenu #MobiNav #hamSLID8371.subLevel:before { color:#1a9cdc; } #MobileMenu #MobiNav #hamSLID8371 .item a.hamlink.selected .hamtxt { color:#1a9cdc!important } /* active page */ /* @@@ CLUSTER 4 @@@ */ #MobileMenu #MobiNav #hamPID8385 { display:none; } #MobileMenu #MobiNav #hamID8384, #hamPID8384 .hamnode , #MobileMenu #MobiNav #hamID8384 .hamitem { background:#ec594d; } #MobileMenu #MobiNav #hamSLID8384.subLevel:before { color:#ec594d; } #MobileMenu #MobiNav #hamSLID8384 .item a.hamlink.selected .hamtxt { color:#ec594d!important } /* active page */ /* @@@ CLUSTER 3 @@@ */ #MobileMenu #MobiNav #hamPID8398 { display:none; } #MobileMenu #MobiNav #hamID8397, #hamSLID8397 .hamnode, #MobileMenu #MobiNav #hamID8397 .hamitem { background:#64b243; } #MobileMenu #MobiNav #hamSLID8397.subLevel:before { color:#64b243; } #MobileMenu #MobiNav #hamSLID8397 .item a.hamlink.selected .hamtxt { color:#64b243!important } /* active page */ /* @@@ DIENSTENCENTRUM @@@ */ #MobileMenu #MobiNav #hamPID8411 { display:none; } #MobileMenu #MobiNav #hamID8410, #hamSLID8410 .hamnode, #MobileMenu #MobiNav #hamIDhamID8410 .hamitem { background:#ffaf38; } #MobileMenu #MobiNav #hamSLID8410.subLevel:before { color:#ffaf38; } #MobileMenu #MobiNav #hamSLID8410 .item a.hamlink.selected .hamtxt { color:#b97300!important } /* active page */ /* @@@ WEBRED @@@ */ #MobileMenu #MobiNav #hamID8084, #hamID8084 .hamnode, #MobileMenu #MobiNav #hamID8084 .hamitem { background:#b0b0b0; } #MobileMenu #MobiNav #hamSLID8084.subLevel:before { color:#b0b0b0; } #hamSLID8084 .hamitem { background: #f2f2f3!important;} #MobileMenu #MobiNav #hamSLID8084 .item a.hamlink.selected .hamtxt { color:#808080!important } /* active page */ /* @@@ OBADJASCHOOL URK @@@ */ #MobileMenu #MobiNav #hamPID23243 { display:none; } #MobileMenu #MobiNav #hamID23241, #hamPID23241 .hamnode, #MobileMenu #MobiNav #hamID23241 .hamitem { background:#1a9cdc; } #MobileMenu #MobiNav #hamSLID23241.subLevel:before { color:#1a9cdc; } #MobileMenu #MobiNav #hamSLID23241 .item a.hamlink.selected .hamtxt { color:#1a9cdc!important } #MobileMenu #MobiNav #hamID8077 .hamtxt, #MobileMenu #MobiNav #hamID8371 .hamtxt, #MobileMenu #MobiNav #hamID8384 .hamtxt, #MobileMenu #MobiNav #hamID8397 .hamtxt, #MobileMenu #MobiNav #hamID8410 .hamtxt, #MobileMenu #MobiNav #hamID8084 .hamtxt, #MobileMenu #MobiNav #hamID23241 .hamtxt { color:#ffffff!important; text-decoration:none; } #MobileMenu #MobiNav #hamID8077 .hamtxt:hover { color:#131d49!important; } /* =================================================================================================== =================================================================================================== BIG ZOEK DESKTOP =================================================================================================== =================================================================================================== */ /* ================== BIG ZOEK (DESKTOP) ================== */ #bigZoek { position:absolute; display:inline-block; z-index:10; width:325px; right:0px; top:50px; /* background:#941b81; border-bottom:10px solid #af54a1; xxborder-bottom:10px solid #00a58f; */ height:45px;/* uitlijning binnen popup menu blokken */ xxxtext-align:center; font-family: 'Bree Serif', serif; font-size: 40px; color:#000; /* holder etc... */ background:transparent; } #bigZoek { } #Zoeken { } #ZoekenHolder { border-radius: 12px; overflow:visible; width:325px; position:absolute; top:0px; right:0px; height:45px; background:#d9ecee; } #Zoeken {} #ZoekenInput { appearance:none; -webkit-appearance:none; height:32px; padding: 0px 10px; border:0; border-radius:0;} #ZoekenInput { color:#fff!important; font-weight:bold; background:#eee; height: 32px; height: 52px; /* + 30px */ } /*( #dnn_zkVeld_txtSearch::-webkit-input-placeholder, #dnn_zkVeld_txtSearch::input-placeholder, #dnn_zkVeld_txtSearch::placeholder, #dnn_zkVeld_txtSearch:-moz-placeholder, #dnn_zkVeld_txtSearch::-moz-placeholder, #dnn_zkVeld_txtSearch:-ms-input-placeholder { color:#ff0000!important; opacity:0!important; } */ #dnn_zkVeld_txtSearch { background:transparent; margin-top:4px; margin-left:5%; width:102%; border:none; outline: none; line-height:36px; min-height:36px; font-size:20px; color:#1a9cdc; font-family: 'Armata', sans-serif; letter-spacing: bold; } #dnn_zkVeld_txtSearch[placeholder] { font-weight:bold; color:#1a9cdc; text-transform:lowercase; } #dnn_zkVeld_txtSearch::-webkit-input-placeholder { font-weight:bold; color:#1a9cdc; text-transform:lowercase;} #dnn_zkVeld_txtSearch::-moz-placeholder { font-weight:bold; color:#1a9cdc; text-transform:lowercase;} #dnn_zkVeld_txtSearch:-ms-input-placeholder { font-weight:bold; color:#1a9cdc; text-transform:lowercase;} */ #dnn_zkVeld_txtSearch[placeholder]:empty { font-weight:normal!important; color:#1a9cdc; text-transform:none; } #dnn_zkVeld_txtSearch::-webkit-input-placeholder:empty { font-weight:normal!important; color:#1a9cdc; text-transform:none;} #dnn_zkVeld_txtSearch::-moz-placeholder:empty { font-weight:normal!important; color:#1a9cdc; text-transform:none; } #dnn_zkVeld_txtSearch:-ms-input-placeholder:empty {font-weight:normal!important; color:#1a9cdc; text-transform:none; } #dnn_zkVeld_cmdSearch { font-family: "Ionicons"; font-size:35px; display:inline-block; cursor:pointer; position:absolute; vertical-align:middle; cursor:pointer; font-weight:bold; text-align:center; width:30px; height:30px; line-height:30px; top:8px; right:10px; color:#1a9cdc; } .focusOpZoek #dnn_zkVeld_cmdSearch:hover { transform:scale(1.1); } /* via js: */ .focusOpZoek #ZoekenHolder { box-shadow:0px 0px 0px 2px #1a9cdc; } /* ~~~~~~~~ROOD~~~~~~~*/ .isWS2 #ZoekenHolder { background:#f9d9d8; } .focusOpZoek .isWS2 #ZoekenHolder { box-shadow:0px 0px 0px 2px #df413d; } .isWS2 #dnn_zkVeld_cmdSearch { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch[placeholder]:empty { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch::-webkit-input-placeholder:empty { color:#df413d!important;} .isWS2 #dnn_zkVeld_txtSearch::-moz-placeholder:empty { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch:-ms-input-placeholder:empty { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch[placeholder] { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch::-webkit-input-placeholder { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch::-moz-placeholder { color:#df413d!important; } .isWS2 #dnn_zkVeld_txtSearch:-ms-input-placeholder { color:#df413d!important; } /* ~~~~~~~~GROEN~~~~~~~*/ .isWS3 #ZoekenHolder { background:#deedd5; } .focusOpZoek .isWS3 #ZoekenHolder { box-shadow:0px 0px 0px 2px #5ba52e; } .isWS3 #dnn_zkVeld_cmdSearch { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch[placeholder]:empty { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch::-webkit-input-placeholder:empty { color:#5ba52e!important;} .isWS3 #dnn_zkVeld_txtSearch::-moz-placeholder:empty { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch:-ms-input-placeholder:empty { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch[placeholder] { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch::-webkit-input-placeholder { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch::-moz-placeholder { color:#5ba52e!important; } .isWS3 #dnn_zkVeld_txtSearch:-ms-input-placeholder { color:#5ba52e!important; } /* ~~~~~~~~GEEL~~~~~~~*/ .isWS4 #ZoekenHolder { background:#f4f4f4; } .focusOpZoek .isWS4 #ZoekenHolder { box-shadow:0px 0px 0px 2px #ffaf38; } .isWS4 #dnn_zkVeld_cmdSearch { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch[placeholder]:empty { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch::-webkit-input-placeholder:empty { color:#ffaf38!important;} .isWS4 #dnn_zkVeld_txtSearch::-moz-placeholder:empty { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch:-ms-input-placeholder:empty { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch[placeholder] { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch::-webkit-input-placeholder { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch::-moz-placeholder { color:#ffaf38!important; } .isWS4 #dnn_zkVeld_txtSearch:-ms-input-placeholder { color:#ffaf38!important; } /* ~~~~~~~~PAARS~~~~~~~*/ .isWS5 #ZoekenHolder { background:#d7a7d0; } .focusOpZoek .isWS5 #ZoekenHolder { box-shadow:0px 0px 0px 2px #951981; } .isWS5 #dnn_zkVeld_cmdSearch { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch[placeholder]:empty { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch::-webkit-input-placeholder:empty { color:#951981!important;} .isWS5 #dnn_zkVeld_txtSearch::-moz-placeholder:empty { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch:-ms-input-placeholder:empty { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch[placeholder] { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch::-webkit-input-placeholder { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch::-moz-placeholder { color:#951981!important; } .isWS5 #dnn_zkVeld_txtSearch:-ms-input-placeholder { color:#951981!important; } #MobileMenu #MobiNav #itemP1, #MobileMenu #MobiNav #itemP2, #MobileMenu #MobiNav #itemP3, #MobileMenu #MobiNav #itemP4, #MobileMenu #MobiNav #itemP5 { background:transparent; border-radius:8px; } #MobileMenu #MobiNav #itemP1 { background:#606060; } #MobileMenu #MobiNav #itemP2 { background:#1a9cdc; } #MobileMenu #MobiNav #itemP3 { background:#ec594d; } #MobileMenu #MobiNav #itemP4 { background:#64b243; } #MobileMenu #MobiNav #itemP5 { background:#ffaf38; } #MobileMenu #MobiNav #itemP1 .hamtxt, #MobileMenu #MobiNav #itemP2 .hamtxt, #MobileMenu #MobiNav #itemP3 .hamtxt, #MobileMenu #MobiNav #itemP4 .hamtxt, #MobileMenu #MobiNav #itemP5 .hamtxt { color:#fff!important; } #MobileMenu #MobiNav .itemPP .hamitem { padding:3px 0px!important; } .searchInputContainer a.dnnSearchBoxClearText, .searchSkinObjectPreview { display:none!important; } /* SEARCH PREVIEW NOOIT TONEN */ #Search .searchSkinObjectPreview, #Search .searchInputContainer a.dnnSearchBoxClearText, #MobielZoeken .searchSkinObjectPreview, #MobielZoeken .searchInputContainer a.dnnSearchBoxClearText { display:none !important; } .rijAangeslotenBij .aangLogoBerseba, .rijAangeslotenBij .aangLogo44, .rijAangeslotenBij .aangLogoSVO, .rijAangeslotenBij .aangLogoDVC, .rijAangeslotenBij .aangLogoAgathos, .rijAangeslotenBij .aangLogoJFSG, .rijAangeslotenBij .aangLogoADULLAM, .rijAangeslotenBij .aangLogoNouwels, .rijAangeslotenBij .aangLogoZWL {width:50% !important;} #Menu { position:relative; z-index:960; isolation:isolate; padding:0; } .DesktopMenu .RadMenu_MainMenu .rmHorizontal{white-space: nowrap; position:relative; display: flex;} .DesktopMenu .RadMenu_MainMenu ul, .DesktopMenu .RadMenu_MainMenu li { margin:0px; padding:0px; list-style:none;} /* !!!!!!!!!! Fake RadMenu */ /* --ROOT-- */ .DesktopMenu .rmHorizontal .rmSlide {display:block !important; box-sizing:border-box; z-index:111; top:100%; left:0; overflow:hidden; height:0; position: absolute; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmLast > .rmSlide {left:auto; right:0} .DesktopMenu .rmHorizontal .rmGroup {opacity:0; transition:opacity 0.3s ease, transform 0.3s ease; transform:translate(0,-10px); } .DesktopMenu .rmHorizontal .rmItem {margin: 0px; padding: 0px; position: relative; clear: none; } .DesktopMenu .rmHorizontal .rmItem .rmLink { cursor: pointer; text-decoration: none; display:block; margin: 0px; padding: 0px; } .DesktopMenu .rmHorizontal .rmItem .rmLink .rmText{margin: 0px; padding:0; text-align:center; display: block; white-space: nowrap; background-color:transparent; color:#fff; text-transform:lowercase; height:50px; line-height:50px; overflow:hidden; padding:0px 30px 0px 0px; font-family: 'Armata', sans-serif;font-size:20px;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmItem.rmFirst{} .DesktopMenu .rmHorizontal .rmItem.rmLast {} .DesktopMenu .rmHorizontal .rmItem.rmOnly {} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText {color:#ffbb56; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText {color:#ffbb56; } .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#ffbb56; } /*--SUB--*/ .DesktopMenu .rmHorizontal .rmLevel0 .rmGroup {transform:translate(-20px, 0px); } .DesktopMenu .rmHorizontal .rmItem .rmSlide{margin:0; padding:0;} .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide { overflow:visible; height:auto; transform:translate(0px, 0px); padding:0px; border-radius:15px;} .DesktopMenu .rmHorizontal .rmItem:hover > .rmSlide > .rmGroup {opacity:1; transform:translate(0px, 0px);} .DesktopMenu .rmHorizontal .rmSlide .rmItem:hover .rmSlide {left:100%; top:0;} .DesktopMenu .rmHorizontal .rmGroup .rmItem {width:100%; margin:0;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink {margin:0; padding:0; width:100%; display:block;} .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ argin: 0px; padding:0 25px 0px 14px; display: block; white-space: nowrap; min-width:130px; background: rgba(0,134,199,.81) !important; line-height:32px; height:auto; min-height:32px; width:auto; text-align:left; width:100%; display:block;} /*first,last,only*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst {} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmFirst > .rmLink > .rmText{border-radius:15px 15px 0px 0px; padding-top:10px; margin-top:15px;} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmLast > .rmLink > .rmText{border-radius:0px 0px 15px 15px ; padding-bottom:10px;} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmOnly > .rmLink > .rmText{border-radius:15px; padding-top:10px; padding-bottom:10px; margin-top:15px;} /*expanded,hover,selected,breadcrumb*/ .DesktopMenu .rmHorizontal .rmGroup .rmItem:has(.rmSlide:hover) > .rmLink > .rmText {} .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText {color:#ffbb56} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText {color:#ffbb56} .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb > .rmLink > .rmText {color:#ffbb56} .isWS2 .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText { background: rgba(223,65,61,.85)!important; } .isWS3 .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText{ background: rgba(91,165,46,.85)!important; } .isWS4 .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText { background: rgba(255,175,55,.85)!important; } .isWS5 .DesktopMenu .rmHorizontal .rmGroup .rmItem .rmLink .rmText { background: rgba(149,25,129,.85)!important; } .isWS4 .DesktopMenu .rmHorizontal.rmRootGroup .rmItem:hover > .rmLink .rmText, .isWS4 .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmSelected > .rmLink > .rmText, .isWS4 .DesktopMenu .rmHorizontal.rmRootGroup > .rmItem.rmBreadcrumb > .rmLink > .rmText, .isWS4 .DesktopMenu .rmHorizontal .rmGroup .rmItem:hover > .rmLink .rmText, .isWS4 .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmSelected > .rmLink > .rmText, .isWS4 .DesktopMenu .rmHorizontal .rmGroup .rmItem.rmBreadcrumb > .rmLink > .rmText {color:rgb(223,65,61) !important} /* !!!!!!!!!! Fake Panelbar / submenu */ .DesktopMenu ul.rmRootGroup.rmVertical {width:100%; position: relative; z-index: 100; margin-top:25px; width:275px; } .DesktopMenu .rmVertical .rmSlide {position:static} .DesktopMenu .rmVertical .rmGroup{transform:translateY(0px); transform:translateX(0px);} .DesktopMenu .RadMenu ul.rmRootGroup{ background-color:transparent; border:0;} .DesktopMenu .rmVertical .rmItem {padding:0px 0; width:100%; display:block; box-sizing:border-box;} .DesktopMenu .rmVertical .rmItem .rmLink{width:100%; display:block; box-sizing:border-box;} .DesktopMenu .rmVertical .rmItem .rmLink .rmText{ margin:0px !important; border:0px !important; display:block; white-space:normal; font-size:17px; min-height:18px; font-family: 'Armata', sans-serif; font-size: 20px; color:#fff!important; letter-spacing: normal !important; text-transform:lowercase!important; line-height:22px; padding:5px 10px 5px 15px!important; background-color:#64b243 !important; width:100%; display:block; box-sizing:border-box; height:auto; text-align:left; } .DesktopMenu .rmVertical .rmSlide {display:none !important; margin:0;} .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide {display:block !important; height:auto; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmSlide > .rmGroup {opacity:1} .DesktopMenu .rmVertical > .rmItem.rmFirst >.rmLink > .rmText{padding-top:20px !important; border-radius:15px 15px 0px 0px; } .DesktopMenu .rmVertical > .rmItem.rmLast >.rmLink > .rmText{padding-bottom:20px !important; border-radius:0px 0px 15px 15px ; } /*sub*/ .DesktopMenu .rmVertical .rmSlide {padding:0; margin:0;} .DesktopMenu .rmVertical .rmSlide .rmItem {} .DesktopMenu .rmVertical .rmSlide .rmItem .rmLink{ padding:0;} .DesktopMenu .rmVertical .rmSlide .rmItem .rmLink .rmText{background-color:#f0b60b !important;} .DesktopMenu .rmVertical .rmSlide .rmItem .rmLink .rmText:before{content:"\f10a"; font-family: "Ionicons"; font-size: 17px; color:#fff; margin:0px 10px 0px 5px; position: relative; top:1px;} /*expanded,hover,selected,breadcrumb */ .DesktopMenu .rmVertical .rmItem .rmLink:hover { text-decoration:none !important} .DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText { color:#ec5a4f!important; background-color:#7bbd5f !important;} .DesktopMenu .rmVertical .rmItem:hover > .rmLink > .rmText { color:#ec5a4f!important; background-color:#64b243 !important; } .DesktopMenu .rmVertical .rmSlide .rmItem:hover > .rmLink > .rmText { color:#ec5a4f!important; background-color:#f0b60b !important; } .DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText { color:#ec5a4f!important; background-color:#7bbd5f !important; } .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmLink > .rmText { color:#fff!important; background-color:#7bbd5f !important; } .isWS23 .DesktopMenu .rmVertical .rmItem .rmLink .rmText{background-color:#ff9d24 !important} .isWS23 .DesktopMenu .rmVertical .rmItem:has(.rmSlide:hover) > .rmLink > .rmText , .isWS23 .DesktopMenu .rmVertical .rmItem .rmSelected > .rmLink > .rmText, .isWS23 .DesktopMenu .rmVertical .rmItem.rmBreadcrumb > .rmLink > .rmText { background-color:#ffac45 !important; } /* ================================================================================ MEDIA QUERIES ================================================================================ */ @media only screen and (max-width: 1150px) { #decoHome2_holder { left:-100px!important; } } /* ------ HAMB ------ */ @media only screen and (max-width: 980px) { .isMob { display:block; } .isNotMob { display:none; } .rspFW { float:left!important; clear:both!important; margin-left:20px!important; margin-right:40px!important; } .rspC{ float:none!important; clear:both!important; display:block!important; margin-left:auto!important; margin-right:auto!important; } #HeaderA { display:none; } /* TopLinks */ .RadMenu, .RadPanelBar,#SubMenu{display:none;} #MobileMenuTrigger {display:block;} #dnn_ContentPane { margin-left:30px!important; } /* .isSeq .two-third {width:80%; width:calc(100%-60px); } */ #Header #MobileMenuTrigger {left:52px;} #GoHomeTrigger { display:block; background:#af54a1; } /* === opmaak rondjes === */ .dVV, .dVV1 { display:none!important; } /* hele blokken weg... overflows hidden .dVV1 = single blok weg */ /* === home intro === */ .isHome .two-third { width:80%!important; } #dnn_homeVlakMelding { padding-top:10px; } .isHome .two-third , #dnn_homeVlakMelding { margin-left:10%!important; margin-right:10%!important; } /* === home nieuws === */ #newsA_hold { width:90%!important; } /* === home foto's === */ #homeFotos h2 { padding-left:0px!important; margin-left:20px; } #dnn_homeVlakFotoOvz { padding:0px!important; width:90%!important; margin-left:20px!important; margin-right:0px!important; } #homeFotos .PhotoWrapper { width: 33%!important; } /* === home news === */ #rijC34 .InnerWrapper { display:block!important; } #newsA, #newsB { width: 100%!important; } .decoH div { width: 64px!important; height: 64px!important; } .KNOPVLAK div { padding:10px 0px 10px 20px!important; font-size: 27px!important; line-height: 40px!important; } /* === verwijzing naar vier scholen, bij portal, nu 2x2x ipv 4x1 === */ #rijSchoolOvz .InnerWrapper { max-width:630px; } /* net te ver van elkaar */ #rijSchoolOvz .InnerWrapper .clear{} #rijSchoolOvz .blok25p { width: 50%!important; } #rijSchoolOvz .locWrap { width:273px; margin:0px auto; position:relative; } /* centreren blokken */ #locC, #locD {} /* === aang. bij === */ .rijAangeslotenBij { margin-left: 20px!important; margin-right: 40px!important; } .rijAangeslotenBij .aangIntro { width:100%!important; height:30px!important; margin-bottom:20px; } .rijAangeslotenBij .aangSplit { margin-left: 40px!important; margin-right: 30px!important; } .rijAangeslotenBij .aangSplit{display:none !important;} /* === foot === */ #Foot { margin-top:0px; padding-bottom:40px; } /* === seq === */ .isSeq #BigBanner, #SeqBread { display:none; } .isSeq #seqMainCMS { width:auto; padding-top: 40px; } .isSeq #Content { padding-bottom: 0px!important; } #seqMainCMS #dnn_ContentPane { margin-right:30px!important; } } @media only screen and (max-width: 768px) { .InnerWrapper { xxxmax-width:480px; } #Search, #Footer #Logo2, #Login, .flickity-page-dots, #Breadcrumb, #icrPager, .pubControls {display:none;} /* .one-half, .one-third, .two-third, .one-fourth, .three-fourth, .one-fifth, .two-fifth, .three-fifth, .four-fifth, .one-sixth, .five-sixth {float:none; margin-right:0; width:100%;} */ /*Header*/ #Header .InnerWrapper{ xxxmax-width:none;} #Logo { /* transform-origin:center 0px; transform:scale(.8); */ left:67%; } #BigBanner { xxxheight:250px!important; xxxbackground-size:auto 115%!important; } #BigBannerPre { xxxdisplay:block!important; } #w2wmadeHFCM { display:none; } /*aanpassinge Paddings en Fonts*/ h1 { font-size:30px; padding:0;} h2 { font-size:26px; } #Breadcrumb, #dnn_ContentPane { margin-left:15px!important; } .isSeq .two-third {width:80%; width:calc(100%-30px); } .pubArticleHomeViewer h1 {padding:0 0 10px 0} .pubArticleHomeViewer .pubItem { padding:0 0 20px 0} .pubArticleHomeViewer .pubItem .pubSummary { padding:0;} .pubArticleHomeViewer .pubItem .pubTitle { padding:20px 0 10px 0} .SubTab .row1 {padding-top:75px;} .row3 {padding:10px 0 0 0} .SchoolFilmPane, .NieuwsBriefPane, .TwitterPane {padding:0} #Content .Container {margin-bottom:25px;} /*events*/ .ModDNNEventsC .ThemeMinimalExtropy .EventItem {padding-bottom:15px;} .ThemeDefault .EventDay .EventDayScroll > div > a { padding:0 !important; width:23px !important; text-indent:30px; position:relative} .ThemeDefault .EventDay .EventDayScroll > div > a:before { content:"\f14a"; color:#fff !important; width:23px; height:23px; line-height:23px; text-align:center; position:absolute; left:0; top:0; text-indent:0; font-family: 'Ionicons'; font-size:19px; } /*LightBox Aanpassingen voor PhotoModule*/ #jquery-lightbox {} #jquery-lightbox #lightbox-container-image-box { width:auto !important; height:100% !important; min-height:150px; } #jquery-lightbox #lightbox-container-image-box #lightbox-image { width:100% !important; } #jquery-lightbox #lightbox-container-image-data-box { width:100% !important} #jquery-lightbox #lightbox-container-image-details-currentNumber { display:none !important;} #jquery-lightbox #lightbox-container-image-details-nav{ display:none !important;} /*ContactFormulier */ .ModLesscherContactFormC {} .ModLesscherContactFormC .dnnFormItem{} .ModLesscherContactFormC .dnnFormItem .dnnLabel { width:100%; text-align:left; padding:0 !important; margin:0 !important} .ModLesscherContactFormC .dnnFormItem .dnnLabel + input[type="text"] { width:100% !important; padding:8px 0 !important; max-width:none !important } .ModLesscherContactFormC .dnnFormItem .dnnLabel + textarea { width:100% !important; padding:8px 0 !important; max-width:none !important } .ModLesscherContactFormC .dnnFormItem .dnnLabel + img[id*="captchaImage"] { width:100% !important;} /*footer */ #Footer .FooterPane {margin:0; padding-top:13px; display: block; text-align:center} /* xxx #Footer .SocialMediaIcons {position: relative; top:auto; right:auto; display: block; max-width:100%; padding:15px 0; text-align:center} */ } @media only screen and (max-width: 560px) { #MobileAdminTrigger.HeadMobBut { display:none!important; } /* admin webred niet op mobieltjes... Vincent @20160811 */ /* === home intro === */ .isHome .two-third { width:90%!important; } .isHome .two-third , #dnn_homeVlakMelding { margin-left:5%!important; margin-right:5%!important; } /* === verwijzing naar vier scholen, bij portal, nu 2x2x ipv 4x1 === */ #rijSchoolOvz .blok25p { width: 100%!important; } #locB { margin-top:20px!important; } /* net als C,D */ /* verklein seq big visual bottom > 50% */ .isSeq #Content { background-size: 700px 215px!important; } .isSeq .InnerWrapper.SubPanesWrapper { padding-bottom: 205px!important; } #Breadcrumb { display:none; } #dnn_ContentPane { margin-left:10px!important; } .isSeq .two-third { width:90%; width:calc(100%-20px); } .rijAangeslotenBij .aangLogoBerseba, .rijAangeslotenBij .aangLogoDVC,.rijAangeslotenBij .aangLogoSVO,.rijAangeslotenBij .aangLogoAgathos, .rijAangeslotenBij .aangLogoJFSG, .rijAangeslotenBij .aangLogoNouwels, .rijAangeslotenBij .aangLogoZWL, #Foot .rijAangeslotenBij > a {width:100% !important;margin:0px auto 15px auto!important; } /* bestuur is div */ } @media only screen and (max-width: 540px) { .pubArticleHomeViewer .pubItem .pubContent { max-width: 250px!important; } } @media only screen and (max-width: 485px) { .decoH div { width: 48px!important; height: 48px!important; } .pubArticleHomeViewer .pubItem .pubContent { max-width: 220px!important; } #fixTiles.show { display:none!important; } #footLogo { height:115px!important; width:90%!important; background-size:100% auto; } #footAdres { width:90%!important; font-size: 18px!important; line-height:1.5!important; } } @media only screen and (max-width: 450px){ .pubArticleHomeViewer .pubItem .pubContent { max-width: 170px!important; } /*Header #Header #MobileMenuTrigger {right:0px;} */ #BigBanner { background-size:auto 115%!important; } /* tekst header leesbaar houden .... */ @media only screen and (max-width: 420px){ .rijAangeslotenBij .aangSplit { display:none!important; } .rijAangeslotenBij .aangLogoBerseba, .rijAangeslotenBij .aangLogoDVC, .rijAangeslotenBij .aangLogoSVO,.rijAangeslotenBij .aangLogoAgathos, .rijAangeslotenBij .aangLogoJFSG, .rijAangeslotenBij .aangLogoNouwels, .rijAangeslotenBij .aangLogoZWL, #Foot .rijAangeslotenBij > a { clear:both!important; float:none!important; display:block!important; margin:0px auto 10px auto!important; } .rijAangeslotenBij .aangLogoBerseba {xxmargin-top:30px!important; } } @media only screen and (max-width: 400px){ #footLogo { height:95px!important; } }