/* * Site-CSS voor het theme goedkoopste-telefoonabonnementen. * * 1-op-1 overgenomen uit de enige stylesheet van de originele CMS Made Simple-site * (Design Manager, stylesheet id 2, naam "generic"). Bron opgeslagen als * _migration/raw/cmsms/stylesheet_generic.css. * * Enige wijziging t.o.v. de bron: het pad naar top.png is theme-relatief gemaakt. * Theme-eigen aanvullingen staan onderaan in een duidelijk gemarkeerd blok. */ /* GENERIC */ .lined { border-top: 1px solid black; margin-top: 15px; } .linedBottom { border-bottom: 1px solid black; margin-bottom: 15px; } html { height: 100%; margin: 0; padding: 0; } body { font-family: "Roboto", helvetica, arial, sans-serif; color: #666; font-size: 14px; margin: 0; padding: 0; } #wrapper { min-height: 100%; position: relative; } h1, h2, h3, h4, h5 { font-size: 22px; font-weight: 500; color: #1071b9; padding-top: 20px; margin-top: 10px; margin-bottom: 10px; line-height: 1.5; } a { color: #1071b9; } a:hover, a:active, a:visited { color: #0061a9; } .btn:hover, .btn:active, .btn:visited { color: #666; } .content-container { padding-top: 80px; padding-bottom: 160px; } table, th, td { border: 1px solid #666; padding: 8px; font-size: 14px; } @media (min-width: 768px) and (max-width: 991px) { .content-container { padding-bottom: 180px; } } @media (max-width: 767px) and (min-width: 423px) { .content-container { padding-bottom: 250px; } } @media (max-width: 422px) { .content-container { padding-bottom: 280px; } } div.divider.divider-dotted { margin-top: 20px; margin-bottom: 20px; height: 10px; border: 0; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKAQMAAAC3/F3+AAAABlBMVEX///+QkJApn3LQAAAAAnRSTlMAgJsrThgAAAAOSURBVHheYwCCUAdcJAAnnALqo5TBzAAAAABJRU5ErkJggg==") repeat-x center; } div.divider.divider-dotted:after { display: none; } /* END GENERIC */ /* NAVIGATION */ #header { height: 80px; background: white; -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); box-shadow: 0 0 4px rgba(0, 0, 0, 0.5); } .header .main-nav { margin-top: 15px; margin-left: 0px; } .header .main-nav .navbar-toggle { margin-right: 0; margin-top: 0; background: none; position: absolute; right: 10px; top: 10px; } .navbar-nav { z-index: 1200; margin: 0px 0px; } li.divider { padding: 15px 5px; margin-right: 15px; border-right: 1px solid #E0E0E0; padding-bottom: 35px; } .nav .divider:hover { border-bottom: 0px; } .logo-size { height: 70px; } .logo { display: block; margin-top: 0; margin-bottom: 0; float: left; padding-top: 10px; padding-right: 10px; } .navbar-toggle .icon-bar { height: 3px; margin-top: 6px; } .dropdown-menu li { border-bottom: 1px solid #f0f0f0; padding: 3px 0; margin: 0 5px; } .dropdown-menu p { padding: 2px 0; margin: 0 5px; margin-bottom: 10px; } .dropdown-menu li:hover { border-bottom: 2px solid #1071b9; } .dropdown-menu > .active > a, .dropdown-menu > .active > a:focus, .dropdown-menu > .active > a:hover { color: #777; text-decoration: none; background-color: #FFFFFF; } .nav li:hover { border-bottom: 1px solid #1071b9; } .nav li a { color: #1071b9; padding-top: 10px; padding-bottom: 10px; padding-left: 10px; padding-right: 10px; } .nav li a:active, nav li a:visited, .nav li a:hover { color: #1071b9; text-decoration: none; } .nav .open a, .nav .open a:hover { background-color: rgb(255, 255, 255, 0); } @media (min-width: 992px) { ul.nav li.dropdown:hover > ul.dropdown-menu { display: block; } .dropdown-menu { border-top: 2px solid #1071b9; left: auto; right: 0; } .scrollable-menu { min-width: 800px; left: 60%; right: auto; transform: translate(-60%, 0); border-top: 2px solid #1071b9; font-size: 0.9em} .nav-item:hover > .caretDiv:after { content: ""; display: block; width: 0; border-right: 6px solid transparent; border-bottom: 6px solid #1071b9; border-left: 6px solid transparent; position: absolute; top: 44px; right: 13px; } } @media (min-width: 992px) and (max-width: 1199px) { li .divider { margin-right: 0px; padding-left: 0px; padding-right: 0px; } .nav li a { padding-left: 5px; padding-right: 5px; } .nav li .scrollable-menu li a { padding-left: 0px; padding-right: 0px; } .scrollable-menu { left: 80%; transform: translate(-80%, 0); } .logo { padding-right: 0px; margin-top: 10px; } .header .main-nav { margin-left: 0px; } .logo-size { height: 45px; } .divider { margin-right: 5px !important; } } @media (max-width: 991px) { li.divider { padding: 0px; margin: 0px; border-top: 1px solid #E0E0E0; } .header .main-nav .navbar-toggle .icon-bar { background-color: #1071b9 !important; } .navmenu-default { -webkit-box-shadow: 10px 0 25px 1px rgba(51, 51, 51, 0.2); -moz-box-shadow: 10px 0 25px 1px rgba(51, 51, 51, 0.2); box-shadow: 10px 0 25px 1px rgba(51, 51, 51, 0.2); border-right: 1px solid #e0e0e0; background-color: white; max-width: 280px; } .nav li a { color: #666; } .nav li a:hover { color: #666; } .navbar-nav { float: none !important; margin-top: 7.5px; } .offcanvas-sm.in { display: block; } .offcanvas-sm { display: none; } .navmenu-fixed-left, .navbar-offcanvas.navmenu-fixed-left { left: 0; right: auto; border-width: 0 1px 0 0; } .navmenu-fixed-left, .navmenu-fixed-right, .navbar-offcanvas { position: fixed; z-index: 1030; top: 0; bottom: 0; overflow-y: auto; border-radius: 0; } .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none !important; } .navbar-nav { float: none !important; margin-top: 7.5px; } .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; -webkit-box-shadow: none; box-shadow: none; } .scrollable-menu p { margin-top: 10px; } .scrollable-menu > .col-md-4:nth-of-type(1) p { margin-top: 0px; } .scrollable-menu { margin-bottom: 10px; } } .dropdown-menu .menu-header-p { min-height: 55px; margin-bottom: 0px; } @media (max-width: 767px) { .dropdown-menu .menu-header-p { min-height: 0px; margin-bottom: 10px; } } .dropdown-menu .nav li a { padding: 0 10px; } .dropdown-menu .nav-item a { padding-left: 0px!important; } /* END NAVIGATION */ /* FOOTER */ .footer-copyright { border-top: 1px dotted #666666; padding-top: 20px; padding-bottom: 20px; background: #111111; } .footer-wrapper { padding-top: 20px; padding-bottom: 20px; background-color: #202020; } .footer-wrapper li { list-style-type: none; } .footer-wrapper li:before { content: "\f054"; font-family: FontAwesome; color: #1071b9; position: absolute; } .footer-wrapper li a { margin-left: 15px; color: #FFFFFF; } .footer { width: 100%; position: absolute; bottom: 0; left: 0; } .footer a { color: #F0F0F0; } .footer a:hover { color: #FCFCFC; text-decoration: underline; } /* END FOOTER */ /* NEWS SUMMARY VIEW */ .backgroundImg { background-position: top; height: 200px; background-size: contain; margin-top: 14px; background-repeat: no-repeat; } .newsitem-title a { color: #333; text-decoration: none; } .newsitem-title a:hover { color: #FFA500; } ul.blogitem-date { display: block; padding-top: 10px; padding-left: 0px; color: #999; font-weight: 400; font-size: 12px; text-transform: uppercase; } ul.blogitem-date > li { float: left; list-style: none; margin-left: -5px; padding-right: 20px; padding-left: 5px; } ul.blogitem-date > li > p { margin: 0px; margin-left: 5px; float: right; } /* END NEWS SUMMARY VIEW */ /* NEWS DETAIL VIEW */ .banner { width: 100%; background-position: top center; background-repeat: no-repeat; height: 355px; position: relative; background-size: cover; } .blog-title { color: #FFFFFF; font-size: 32px; line-height: 44px; font-weight: 200; background-color: rgba(0, 0, 0, 0.75); padding-left: 10px; padding-right: 10px; padding-top: 5px; padding-bottom: 5px; display: inline-block; margin-bottom: 0px; bottom: 35px; position: absolute; } ul.blog-date { background-color: #1071b9; color: #FFFFFF; font-size: 12px; font-weight: 300; padding-left: 10px; padding-right: 10px; padding-top: 1px; padding-bottom: 1px; display: inline-block; bottom: 2px; position: absolute; } ul.blog-date > li { display: inline-block; list-style: none; margin-left: -5px; padding-right: 20px; padding-left: 5px; } ul.blog-date a { color: #FFFFFF; } .blog-summary { margin-top: 15px; font-style: italic; font-size: 15px; margin-bottom: 10px; font-weight: 300; } #rowPrevNextBack div { display: inline-block; } #rowPrevNextBack { padding: 0 15px 0 15px; } /* END NEWS DETAIL VIEW */ /* BACK TO TOP PLUGIN */ a.back-to-top { display: none; width: 60px; height: 60px; text-indent: -9999px; position: fixed; z-index: 999; right: 20px; bottom: 80px; background: url("../images/top.png") no-repeat center 43%; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } /* END BACK TO TOP PLUGIN */ #iosPopUp { position: absolute; left: 0; right: 0; z-index: 9999999989; text-align: center; border-radius: 5px; background-color: rgb(119, 119, 119); margin-left: 15px; margin-right: 15px; padding-top: 10px; padding-bottom: 10px; margin-top: 70vh; color: white; } #iosPopUp::after { position: absolute; content: ''; height: 0px; width: 0px; left: 43%; bottom: -20px; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid rgb(119, 119, 119); z-index: 9999; } /* START Beste 5 sim only deals blok */ h5.lined { font-size: 12px; color: #999; width: 100%; text-align: center; border-bottom: 1px dotted #E0E0E0; line-height: 0.1em; margin: 20px 0px 20px; display: block; border-top: 0px; } .lined span { background: #FFFFFF; padding: 0 10px; color: #999; } #siderBlokNav { width: 100%; margin-bottom: 10px; } #siderBlokNav .nav-item.active { border-bottom: 2px solid #F49600; } #siderBlokNav li a { color: #444; } #siderBlokNav li { width: 50%; float: left; } .clear-both { clear: both; } #siderBlokNav .nav-item:hover { border-bottom: 2px solid #F49600; } div#tds-pci-1.tds-armor > div#sub-tds-pci-1.tds-armor > div.tds-armor .bfBZRT { max-width: 100% !important; } #metToestel { text-align: right; } /* END Beste 5 sim only deals blok */ /* START Vergelijk menu mobiel */ @media (max-width: 991px){ #header { height: 155px !important; } .content-container { margin-top: 80px !important; } /* De marges stonden op -20px om padding van de ouder te compenseren, maar #header heeft er geen (gemeten: 0). De balk werd zo 40px breder dan het venster en begon op x=-20, waardoor de pagina horizontaal schoof: 417 bij een venster van 375 en 807 bij 768. Zonder die marges valt de balk samen met de container; de grijze achtergrond loopt nog steeds van rand tot rand, want de ouder is zelf volledige breedte. */ #vergelijk-type-menu-nav { text-align: center; max-width: 100%; margin-left: 0; margin-right: 0; border-radius: 0px; background-color: #F3F3F3; } /* Bootstrap 3 zet white-space:nowrap op .btn. Een knop met een lange tekst ("Ga naar de zakelijke website van Odido (voorheen T-Mobile)") werd daardoor 402px breed en duwde de pagina open op een telefoon. Nieuwere Bootstrap-versies laten knoppen standaard afbreken; hier alleen onder 991px, zodat de knoppen op desktop hun huidige vorm houden. */ .content-container .btn, #content .btn, .gta_landing-template-default .btn { white-space: normal; max-width: 100%; } #vergelijk-type-menu .nav-item { width: 50%; display: block; float: left; padding-bottom: 3px; padding-top: 3px; padding-left: 10px; padding-right: 10px; font-size: 15px; } #vergelijk-type-menu .nav-item a:hover { background-color: #e2e2e2 !important; } #vergelijk-type-menu .nav-item-border-right { border-right: 1px solid #c3c3c3; border-radius: 0px; } #vergelijk-type-menu .nav-item-full-width { width: 100%; border-top: 1px solid #c3c3c3; border-bottom: 1px solid #c3c3c3; } #vergelijk-type-menu #vergelijk-type-menu-header { width: 100%; margin: 0px; font-weight: 600; padding-top: 8px; padding-bottom: 8px; } #vergelijk-type-menu-nav .navbar-nav { margin-left: 0px; margin-top: 0px; border-bottom: 1px solid #c3c3c3; } #vergelijk-type-menu li:hover { border-bottom: 0px; } } /* END Vergelijk menu mobiel */ /* Een vaste hoogte zonder breedtegrens: het T-Mobile-logo is breed van verhouding en werd op 70px hoogte 283px breed, in een kolom van 220px. Dat duwde de pagina op tablet 39px open. max-width alleen zou het logo uitrekken (de hoogte blijft immers vast); met object-fit blijft de verhouding intact en houden de logos hun uitlijning op één regel. */ .aanbiederIMG { height: 70px; max-width: 100%; object-fit: contain; object-position: left center; } .btn:hover, .btn:active, .btn:visited { color: white; } .text-center { text-align: center; } .zakelijk-table { width: 100%; border: 0px; margin-top: 15px; margin-bottom: 15px; } .zakelijk-table td { border: 0px; } h5.lined-top { margin-top: 0px; margin-bottom: 12px; } h5.lined-bottom { margin-top: 0px; margin-bottom: 0px; padding-top: 6px; } /* START KPN PROMO BLOK */ .img-wrapper-iphone-kpn-promo img { width: 100%; } .img-wrapper-iphone-kpn-promo-mobiel img { width: 100%; } .img-wrapper-iphone-kpn-promo-2-column img { width: 100%; margin-top: 50px; } .text-wrapper-kpn-promo img { float: right; margin-top: 40px; } .text-wrapper-kpn-promo h3 { font-size: 22px; padding: 0px; margin: 0px; margin-bottom: 15px; } .text-wrapper-kpn-promo .btn { width: 50%; } .kpnPromoBlok { background-color: aliceblue; border-radius: 10px; padding: 20px; margin-top: 20px; margin-bottom: 20px; margin-left: 0px; margin-right: 0px; } .text-wrapper-kpn-promo a { color: #666; } .text-wrapper-kpn-promo a:hover { text-decoration: none; } .text-wrapper-kpn-promo-mobiel a { color: #666; } .text-wrapper-kpn-promo-mobiel a:hover { text-decoration: none; } .text-wrapper-kpn-promo-mobiel img { float: right; margin-top: 40px; } .text-wrapper-kpn-promo-mobiel h3 { font-size: 18px; padding: 0px; margin: 0px; padding-bottom: 15px; } .text-wrapper-kpn-promo-mobiel .btn { width: 100%; } @media (min-width: 600px) { .text-wrapper-kpn-promo-mobiel h3 { font-size: 22px; } } @media (max-width: 767px) { .img-wrapper-iphone-kpn-promo img { width: 50%; display: block; margin: 0 auto; margin-bottom: 25px; } .img-wrapper-iphone-kpn-promo-2-column img { width: 50%; display: block; margin: 0 auto; margin-bottom: 25px; } .text-wrapper-kpn-promo img { float: none; display: block; margin: 0 auto; margin-top: 15px; margin-bottom: 15px; } .text-wrapper-kpn-promo h3 { font-size: 22px; padding: 0px; margin: 0px; } .text-wrapper-kpn-promo .btn { width: 100%; } .kpnPromoBlok { background-color: aliceblue; border-radius: 10px; padding: 20px; margin-left: 5px; margin-right: 5px; margin-top: 15px; margin-bottom: 15px; } } @media (min-width: 768px) and (max-width: 991px) { .img-wrapper-iphone-kpn-promo img { margin-top: 50px; } } @media (max-width: 460px) { .text-wrapper-kpn-promo-mobiel { width: 100%; } .img-wrapper-iphone-kpn-promo-mobiel { width: 100%; } .img-wrapper-iphone-kpn-promo-mobiel img { width: 50%; display: block; margin: 0 auto; margin-bottom: 25px; } } @media (min-width: 768px){ .img-wrapper-iphone-kpn-promo { width: 20%; } .text-wrapper-kpn-promo { width: 80%; } } /* END KPN PROMO BLOK */ /* KPN FEATURED HEADER */ .green-container { background-color: #009900; margin-top: 80px; margin-bottom: -80px; } .kpn-promo-blok { background-color: #009900; height: 120px; margin-left: 0; margin-right: 0; } .wrapper-brand-img-kpn-blok { height: 100%; padding-top: 10px; padding-bottom: 10px; width: 15%; margin-right: 10px; } .wrapper-brand-img-kpn-blok img { width: 100%; padding-top: 15px; } .wrapper-text-kpn-blok { padding: 0; } .wrapper-text-kpn-blok h3{ margin-top: 22px; margin-bottom: 5px; font-weight: 500; color: white; padding-top: 0px; font-size: 20px; } .wrapper-text-kpn-blok p { margin: 0; color: white; } .wrapper-button-kpn-blok { margin-top: 40px; } .btn-kpn-blok { background-color: white; border-color: white; } .btn-kpn-blok a { color: #009900; } .btn-kpn-blok a:hover { color: #0d7d00; } .wrapper-iphone-img-kpn-blok { float: right; height: 120px; } .wrapper-iphone-img-kpn-blok img { height: 100%; } @media (min-width: 1200px) { .btn-kpn-blok { width: 100%; } } @media (max-width: 1199px) { .wrapper-iphone-img-kpn-blok { float: left; margin-top: 9px; } .wrapper-text-kpn-blok h3 { margin-top: 10px; margin-bottom: 7px; font-size: 20px; } } @media (max-width: 991px) { .wrapper-iphone-img-kpn-blok { margin-top: 10px; } } @media (min-width: 768px) and (max-width: 991px) { .green-container { background-color: #009900; margin-top: 160px; margin-bottom: -160px; } .wrapper-brand-img-kpn-blok { width: 18%; margin-right: 20px; } .wrapper-text-kpn-blok { width: 40%; margin-top: 15px; } .btn-kpn-blok { padding-left: 6px; padding-right: 6px; } .wrapper-brand-img-kpn-blok img { padding-top: 22px; } } @media (max-width: 767px) { .green-container { background-color: #009900; margin-top: 160px; margin-bottom: -160px; } .wrapper-brand-img-kpn-blok { float: left; width: 20%; } .wrapper-text-kpn-blok { float: left; width: 100%; } .btn-kpn-blok { font-size: 11px; width: 100%; } .wrapper-text-kpn-blok h3 { font-size: 17px; } .wrapper-text-kpn-blok { margin: 0; text-align: center; } .wrapper-brand-img-kpn-blok { height: 95px; margin: 0; padding: 0; width: 30%; padding-left: 20px; padding-top: 5px; margin-bottom: 8px; } .wrapper-button-kpn-blok { float: left; margin: 0; width: 40%; margin-top: 30px; padding: 0; } .wrapper-iphone-img-kpn-blok { margin: 0; padding: 0; height: 95px; float: right; width: 20%; margin-top: 8px; } .wrapper-brand-img-kpn-blok img { padding-top: 15px; padding-right: 10px; } } @media (max-width: 500px) { .wrapper-button-kpn-blok { margin-left: 20px; } } @media (max-width: 422px) { .wrapper-iphone-img-kpn-blok{ width: 25% } .wrapper-button-kpn-blok{ padding-left: 20px; margin-left: 0px; } .wrapper-brand-img-kpn-blok{ padding-left: 0px; } } @media (max-width: 442px) { .green-container { margin-top: 185px; margin-bottom: -185px; } } /* END KPN FEATURED HEADER */ /* ========================================================================== THEME-AANVULLINGEN (niet in de bron aanwezig) 1. QUIRKS-MODE-COMPENSATIE -------------------------------------------------------------------------- De originele site levert HTML *zonder DOCTYPE* uit. Geverifieerd: geen van de 144 opgeslagen pagina's in _migration/raw/pages bevat een doctype; de ruwe bytes beginnen met ``. Chrome rendert het origineel dus in quirks mode. Daarin krijgt de viewporthoogte, waardoor `#wrapper { min-height: 100% }` uit de bron oplost naar de viewporthoogte en de absoluut gepositioneerde `.footer` onderaan het scherm blijft staan. WordPress levert een geldige DOCTYPE (standards mode). Daar lost een percentage-min-height alleen op als de bevattende box een bepaalde hoogte heeft. Onderstaande regel herstelt precies dat gedrag; alle waarden hierboven blijven 1-op-1 die van de bron. Bewijs: computed style op /qa-404-deze-pagina-bestaat-niet @414px -- origineel `body` 896px hoog (= viewporthoogte), lokaal zonder deze regel 669px, wat de -80px hoogteafwijking op 390/414/768px veroorzaakte. ========================================================================== */ html, body { height: 100%; } /* -------------------------------------------------------------------------- 1b. QUIRKS-MODE-COMPENSATIE - REDACTIONELE TABELLEN Zelfde oorzaak als 1, ander gevolg. In quirks mode erven tabelcellen de `line-height` van hun omgeving NIET; ze krijgen `line-height: normal`. In standards mode erven ze wel, en dat is bij ons Bootstraps `body { line-height: 20px }`. Met `font-size: 14px` en `padding: 8px` (regel 38, letterlijk uit de bron) geeft dat een rijhoogte van 37px waar de bron er 33px toont: over de vier rijen van de providertabel precies 16px, en alles eronder schoof mee. Gemeten, beide kanten in dezelfde run, op /telefoonabonnement/{lebara,simpel,simyo,youfone}-sim-only op 320/375/768/1280/1920px: bron `document.compatMode` = `BackCompat`, `td` line-height `normal`, rij 33px, tabel 133px; herbouw `CSS1Compat`, `td` `20px`, rij 37px, tabel 149px. Na deze regel is de sprong direct na de tabel in alle twintig gemeten cellen exact 16,00px kleiner. Meetgegevens: tools/qa/reports/editorial-table-{original,local-voor,local-na}.json, meetscript tools/qa/measure-editorial-table.js. AFBAKENING - de regel valt uitsluitend op tabellen ZONDER class, en dat zijn precies de redactionele tabellen uit de CMSMS-editor (``, de enige tabelmarkup in alle 144 opgeslagen bronpagina's, en alleen op die vier pagina's). Nagemeten over alle 57 pagina's uit tools/qa/urls.json: 4 tabellen zonder class en 296 met class, alle 296 `.gta-shops__table`. Alles wat wij zelf opmaken draagt dus een class en blijft buiten schot: - `.gta-shops__table` in de winkelpop-up (die zet bewust `border: 0` en houdt zijn eigen regelafstand uit het TDS-ontwerp); - `.zakelijk-table` uit de bronstylesheet (nergens gebruikt). Het doctype blijft staan; alleen dit ene overgeerfde verschil wordt teruggezet. Zie docs/RESPONSIVE_GAPS.md par. 22. -------------------------------------------------------------------------- */ table:not([class]) th, table:not([class]) td { line-height: normal; } /* ========================================================================== 2. TOEGANKELIJKHEID De originele site opent submenu's alleen op :hover, waardoor ze met het toetsenbord onbereikbaar zijn. ========================================================================== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: absolute; top: 6px; left: 6px; z-index: 100000; display: block; padding: 10px 15px; background: #FFFFFF; color: #1071b9; border: 2px solid #1071b9; border-radius: 4px; clip: auto; width: auto; height: auto; } .gta-nav a:focus, .navbar-toggle:focus, .footer a:focus { outline: 2px solid #1071b9; outline-offset: 2px; } @media (min-width: 992px) { /* Zelfde gedrag als de :hover-regel uit de bron, maar dan voor toetsenbord. */ ul.nav li.dropdown:focus-within > ul.dropdown-menu { display: block; } .nav-item:focus-within > .caretDiv:after { content: ""; display: block; width: 0; border-right: 6px solid transparent; border-bottom: 6px solid #1071b9; border-left: 6px solid transparent; position: absolute; top: 44px; right: 13px; } } @media (max-width: 991px) { .gta-nav a:focus { outline-offset: -2px; } }