/*
  Theme Name: Het Klokhuis Over Kindermishandeling
  Theme URI: http://html5blank.com
  Description: Based on HTML5 Blank WordPress Theme
  Version: 1.5
  Author: Parkers / Edgar Vijgeboom / Todd Motto (@toddmotto) - Aangepast voor Wordpress Mu door NTR Nieuwe Media
  Author URI: http://www.studioparkers.nl
  Tags: Blank, HTML5, CSS3
  
  License: MIT
  License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    $MAIN
\*------------------------------------*/

@font-face {
  font-family: 'Conv_HelveticaRoundedLTStd-Black';
  src: url('../fonts/HelveticaRoundedLTStd-Black.eot');
  src: local('☺'), url('../fonts/HelveticaRoundedLTStd-Black.woff') format('woff'), url('../fonts/HelveticaRoundedLTStd-Black.ttf') format('truetype'), url('../fonts/HelveticaRoundedLTStd-Black.svg') format('svg');
 
}

@font-face {
  font-family: 'Conv_HelveticaRoundedLTStd-Bd';
  src: url('../fonts/helveticaroundedltstdbd.eot');
  src: local('☺'), url('../fonts/helveticaroundedltstdbd.woff') format('woff'), url('../fonts/helveticaroundedltstdbd.ttf') format('truetype'), url('../fonts/helveticaroundedltstdbd.svg') format('svg');
 }

@font-face {
  font-family: 'Conv_HelveticaRoundedLTStd-BdCn';
  src: url('../fonts/HelveticaRoundedLTStd-BdCn.eot');
  src: local('☺'), url('../fonts/HelveticaRoundedLTStd-BdCn.woff') format('woff'), url('../fonts/HelveticaRoundedLTStd-BdCn.ttf') format('truetype'), url('../fonts/HelveticaRoundedLTStd-BdCn.svg') format('svg');
 }


*,
*:after,
*:before {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
  -moz-font-smoothing:antialiased;
  -o-font-smoothing:antialiased;
  font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

.clear {
  clear:both;
  display:block;
}
img {
  vertical-align:bottom;
}

a:hover, a:active { outline: 0; }

input:focus {
  outline: 2px solid var(--c-blue);
  outline-offset: 2px;
  border:1px solid var(--c-blue);
}


/*------------------------------------*\
    $MISC
\*------------------------------------*/

::selection {
  background:var(--c-blue);
  color:var(--c-white);
  text-shadow:none;
}
::-webkit-selection {
  background:var(--c-blue);
  color:var(--c-white);
  text-shadow:none;
}
::-moz-selection {
  background:var(--c-blue);
  color:var(--c-white);
  text-shadow:none;
}
   
/*------------------------------------*\
    $WORDPRESS CORE
\*------------------------------------*/
   
.alignnone {
  margin:5px 20px 20px 0;
}
.aligncenter,
div.aligncenter {
  display:block;
  margin:5px auto 5px auto;
}
.alignright {
  float:right;
  margin:5px 0 20px 20px;
}
.alignleft {
  float:left;
  margin:5px 20px 20px 0;
}
.aligncenter {
  display:block;
  margin:5px auto 5px auto;
}
a img.alignright {
  float:right;
  margin:5px 0 20px 20px;
}
a img.alignnone {
  margin:5px 20px 20px 0;
}
a img.alignleft {
  float:left;
  margin:5px 20px 20px 0;
}
a img.aligncenter {
  display:block;
  margin-left:auto;
  margin-right:auto;
}
.sticky {
  
}
.bypostauthor {
  
}

/* ================================ +
               STANDAARDS
+  ================================ */

:root {
  /* Brand */
  --c-pink:         #e20353;
  --c-orange:       #ffa31a;
  --c-teal:         #00cc99;
  --c-teal-dark:    #219696;
  --c-blue:         #04a4cc;
  --c-blue-dark:    #098bc2;

  /* Links */
  --c-link:         #52aad3;
  --c-link-hover:   #3b87aa;
  --c-link-body:    #0067a0; /* 5.8:1 on white — passes WCAG AA */

  /* Text */
  --c-text:         #272d30;
  --c-text-dark:    #333333;
  --c-text-mid:     #606c76;

  /* Surfaces */
  --c-white:        #ffffff;
  --c-gray:         #d6dfe0;
  --c-gray-blue:    #758995;
  --c-blue-pale:    #aed7ea;
  --c-blue-light:   #6bb5d7;
}

/* start RESET DEFAULT styles */
*{ 
  margin:         0;
  padding:        0; 
  border:         0;
  -moz-box-sizing:      border-box; 
  -webkit-box-sizing:   border-box; 
  box-sizing:           border-box;
}

/* focus outline restored below */

* html li {
  height:             1%;
  }
  
img { 
  border:             0px; 
  } 

ul {
  list-style:         none;
  overflow:           hidden;
  xpadding:            0
  }

a {
  text-decoration:    none;
  color:              var(--c-link);
  color:              var(--c-link-hover);
 }

a:hover {
  text-decoration:    underline;
 }

a:visited {
  color:              #463b9f;
  text-decoration:    none;
 }

.clear {
  clear:              both;
 }

.float_left {
  float:              left;
 }

.float_right {
  float:              right;
  }

.hidden {
  display:            none;
}
/* end RESET DEFAULT styles */



/* ================================ +
             ALL DEVICES
+  ================================ */

body {
  font-family:      arial, verdana, sans-serif;
  color:            var(--c-text);
  font-size:        1em;  /*16px*/
  line-height:      1.357em;  /*22px*/
  background:      var(--c-white) url('../images/bg_vervolg.jpg') no-repeat 50% 0;
  @media only screen and (max-width: 1024px) {
      background:      var(--c-white) url('../images/bg_vervolg.jpg') no-repeat -115px 0;
  }
}
#wrapper {
  position:         relative;
  width:             1000px;
  margin:            0 auto;
  text-align:        left;
  }
  
section#content { /* heeft responsive style*/
  width:                1110px;
}
  
footer {
  width:                100%;
  height:               150px;
  margin-top:           70px;
  padding-top:          20px;
  background:           var(--c-white) url('../images/bg_footer.jpg') repeat-x;
  overflow:             hidden;
}

#footer_content {
  position:             relative;
  width:                1000px;
  height:               130px;
  margin:               0 auto;
  color:                var(--c-white);
  background:           url('../images/bg_sprite.png') no-repeat 0 -500px;
}

#footer_content li a.ntr{
  display:              block;
  width:                45px;
  height:               20px;
  background:           url('../images/spritesheet.png') no-repeat -954px -350px;
}

#footer_content ul{
  position:             absolute;
  top:                  90px;
  left:                 20px;
  width:                595px;
  height:               40px;
  margin:               0;
  padding:              0;
}

#footer_content li{
  font-size:            0.8em;
  float:                left;
}

#footer_content li a{
  color:                var(--c-white);
}


/* ================================ +
              HOME
+  ================================ */

body.home {
  background:      var(--c-white) url('../images/bg_home.jpg') no-repeat 50% 0;
  @media only screen and (max-width: 1024px) {
    background:      var(--c-white) url('../images/bg_home.jpg') no-repeat -115px 0;
  }
}
  
a.logo {
  display:            block;
  width:              110px;
  height:             103px;
  position:           absolute;
  top:                0;
  left:               10px;
  background:         url('../images/spritesheet.png') no-repeat 0 -607px;
  outline:            none;
}
a.logo:hover {
  background:         url('../images/spritesheet.png') no-repeat 0 -717px;
} 

.over_titel {
  display:            block;
  width:              375px;
  height:             75px;
  position:           absolute;
  top:                5px;
  left:               120px;
} 

.intro {
  width:              300px;
  float:               left;
  margin-left:        120px;
}

.intro p{
  font-size:          0.9em;
  line-height:        1.5em;
  margin-top:         5px;
}

#video {
  position:           relative;
  width:              530px;
  float:              left;
  margin:             0 0 0 45px;
  z-index:            100;
}

.home .playlist {
  width:              100%;
  height:             156px;
  margin-top:         30px;
  padding:            8px 0 0 20px;
  background-color:   var(--c-text-dark);
}

.home .play-list-item {
  width:              155px;
  height:             80px;
  float:              left;
  margin-right:       10px;
}

.home a.play-list-item {
  width:              134px;
  height:             85px;
  float:              left;
  margin-left:        8px;
  margin-bottom:	  4px;
  border:             2px solid var(--c-teal-dark);
}
.home a.play-list-item:hover {
  border:             2px solid white;
}


.home .play-list-item h4 a{
  display:            block;
  width:              145px;
  float:              left;
  color:               var(--c-teal);
  font-size:           1.06em; /*14px inherit 13*/
  font-weight:         normal;
  font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
  line-height:          1.2em;
  padding:              0;
  margin-left:       8px;
}

.home .play-list-item h4 {
  display:            block;
  width:              75px;
  float:              left;
  padding:          0;
  margin:               0;
}

.home #cliptitel {
  width:              530px;
  height:             55px;
  margin:             -205px 0 0 0px;
  padding:            5px 0 0 30px;
  background-color:   var(--c-text-dark);
}

.home #cliptitel h4{
  font-size:          1.05em;
  color:              var(--c-gray);
}


/*
a.btn_vorige {
  display:            block;
  width:              45px;
  height:             45px;
  float:              left;
  margin:             15px 12px 0 10px;
  background:         url('../images/spritesheet.png') no-repeat -400px -300px; 
}
a.btn_vorige:hover {
  background:         url('../images/spritesheet.png') no-repeat -400px -350px; 
}

a.btn_volgende {
  display:            block;
  width:              45px;
  height:             45px;
  float:              left;
  margin:             12px 0 0 0;
  background:         url('../images/spritesheet.png') no-repeat -460px -300px; 
}
a.btn_volgende:hover {
  background:         url('../images/spritesheet.png') no-repeat -460px -350px; 
}*/


.home .vertellers {
  position:           absolute;
  top:                600px;
  left:               100px;
  width:              440px;
  height:             400px;
  background:         url('../images/bg_sprite.png') no-repeat 0 0;
}


.home .vertellers a.persoon{
  position:           absolute;
  width:              140px;
  height:             135px;
}

.home .vertellers a.achmed{
  top:                55px;
  left:               40px;
  background:         url('../images/spritesheet_vertellers.png') no-repeat -180px -490px;
}
.home .vertellers a.achmed:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -180px -625px;
}

.home .vertellers a.kim{
  top:                55px;
  left:               185px;
  background:         url('../images/spritesheet_vertellers.png') no-repeat -680px -490px;
}
.home .vertellers a.kim:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -680px -625px;
}

.home .vertellers a.racquelle{
  top:                205px;
  left:               30px;
  background:         url('../images/spritesheet_vertellers.png') no-repeat 0px -490px;
}
.home .vertellers a.racquelle:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat 0px -625px;
}

.home .vertellers a.nicky{
  top:                205px;
  left:               170px;
  background:         url('../images/spritesheet_vertellers.png') no-repeat -350px -490px;
}
.home .vertellers a.nicky:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -350px -625px;
}

.home .vertellers a.coen{
  top:                205px;
  left:               310px;
  background:         url('../images/spritesheet_vertellers.png') no-repeat -520px -490px;
}
.home .vertellers a.coen:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -520px -625px;
}


.titel_afleveringen {
 width:             200px;
 height:            40px;
 margin-bottom:     20px;
 background:         url('../images/spritesheet.png') no-repeat -720px -350px; 
}

.aankondiging {
  margin:           0 0 0 0px;
}

.titel_bekijkook {
 width:             380px;
 height:            45px;
 margin-top:        5px;
 background:         url('../images/bg_sprite.png') no-repeat -470px 0; 
}

.related_content {
 width:             365px;
 position:           relative;
 float:              left;
 margin:            0 0 0 60px;
}

body.home .related {
  position:           relative;
  width:              330px;
  float:              right;
  margin:             70px 210px 0 0;
}

.related {
  width:              330px;
  margin:             0 0 0 10px;
  padding-top:        10px;
}

.related ul{
  width:              330px;
  margin:             20px 0 0 0;
  padding:            0;
}

.related .aankondiging > a,
.related > a {
  display:            block;
  color:              inherit;
  text-decoration:    none;
}

.related ul li{
  width:              170px;
  float:              left;
}

.related ul li a:hover{
  text-decoration:    none;
}

.related ul li.img{
  width:              136px;
  height:             80px;
  margin-right:       10px;
}

.related ul li.img a{
  display:            block;
  width:              130px;
  height:             80px;
}

/* related-video thumbnails are sourced at their original 620x349 size
   (unlike the homepage's pre-cropped 130x80 aflevering images), so the
   box needs to be enforced here rather than relying on the file itself */
.related ul li.img img{
  display:            block;
  width:              130px;
  height:             80px;
  object-fit:         cover;
}

.related ul:hover{
  background-color:   #cbe2e5;
}

.related .aankondiging > a:focus-visible,
.related > a:focus-visible {
  outline:            3px solid var(--c-pink);
  outline-offset:     2px;
}

.related .aankondiging > a:focus-visible ul,
.related > a:focus-visible ul {
  background-color:   #cbe2e5;
}

.related ul li h3{
  display:            inline;
  padding-right:      5px;
}

.bg_related {
 background:         url('../images/bg_bekijk.gif') repeat-y 0 0; 
}

.related_foot {
 width:             365px;
 height:            45px;
 background:         url('../images/bg_sprite.png') no-repeat -470px -75px; 
}

section.more {
 width:             345px;
 background-color:  #129ac3;
 color:             var(--c-white);
 margin:            0 0 30px 8px;
 padding-left:      20px;
}

section.more h2{
 color:             var(--c-white);
 padding-top:       10px;
 margin:            0 0 5px 0;
}

section.more ul{
 width:             310px;
 margin:            10px 0 0 0;
}

/*
section.more ul{
 width:             345px;
 margin:            10px 0 0 5px;
 list-style-position:inside;
 list-style-type:circle;
 overflow:  visible;
}*/

section.more ul li{
  margin-top:       7px;
  padding-left:     25px;
}

section.more ul li.pijl1{ background: url('../images/spritesheet.png') no-repeat -1040px 3px;}
section.more ul li.pijl2{ background: url('../images/spritesheet.png') no-repeat -1040px -47px;}
section.more ul li.pijl3{ background: url('../images/spritesheet.png') no-repeat -1040px -94px;}

section.more ul li a{
 color:             var(--c-white);
 font-size:           1em; /*16px */
 font-weight:         normal;
 font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
}
  
/* ================================ +
              VERVOLG
+  ================================ */

#video-big {
  position:           relative;
  width:              850px;
  height:             400px;
  margin:             18px 0 0 0;
  overflow:           hidden;
}

#video-big #cliptitel {
  width:              405px;
  height:             85px;
  margin:             -6px 0 0 49px;
  padding:            3px 0 0 18px;
  background:         url('../images/bg_sprite.png') no-repeat -14px -428px;
}

#video-big #cliptitel h4{
  margin-top: 3px;
  font-size:          1.05em;
  color:              var(--c-gray);
}

.videoholder,
#videoplayer_wrapper {
  width:              620px;
  height:             349px;
  float:              left;
}

body.home .videoholder,
body.home #videoplayer_wrapper  {
  width:              530px;
  height:             298px;
  float:              none;
}

.videoholder img:hover,
.videoholder_doen img:hover {
  cursor:             pointer;
}

#video-big .playlist {
  width:              230px;
  height:             auto;
  float:              right;
  margin-top:         0;
  padding:            0px 0px 65px 0px;
  background:         url('../images/bg_playlist.png') no-repeat bottom left;
}


#video-big .play-list-item {
  width:              215px;
  height:             75px;
  margin:             10px 0 4px 10px;
  clear:              both;
}

#video-big .play-list-item img{
  width:              100px;
/*  height:             70px; */
  height:             auto;
  float:              left;
  margin:             0 10px 0 0;
  border:             2px solid var(--c-teal);
}

#video-big .play-list-item:hover img {
  border:             2px solid var(--c-white);
}

#video-big a.play-list-item {
  width:              100px;
  height:             70px;
  float:              left;
  margin:             0 10px 0 0;
}

#video-big .play-list-item h4 a{
  color:               var(--c-teal);
  font-size:          1.04em; /*14px inherit 13*/
  font-weight:         normal;
  font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
  line-height:          1.2em;
  padding:              0;
  margin:               0;
  word-wrap:            break-word;
}

#video-big .play-list-item h4 {
  padding:          0;
  margin:           0;
}

article.intro {
  width:              450px;
  float:              left;
  margin:             0 0 0 190px;
}

article.intro h1{
  margin:             10px 0 0 0;
}

article.intro h2,
article.intro h3{
  margin:             15px 0 10px 0;
}

article.intro h2 a,
article.intro h3 a{
  color:              var(--c-link);
}

article.intro h3{
  font-size:        1.4em;
}

article.intro h4{
  display:            inline;
  margin:             10px 0 0 0;
  background-color:   var(--c-blue-light);
  padding:            3px 4px;
  color:              var(--c-white);
  font-size:          1.1em;
}

article.intro p{
  margin:             10px 0 20px 0;
}

article.intro ul{
  list-style:         outside;
  list-style-image:   url('../images/ul-puntjes.gif');
  margin:             5px 0 20px 20px;
  overflow:           visible;
}

article.intro ul li{
  margin:           0 0 4px 10px;
  line-height:      1.2em;
  font-size:        0.9em;
}

article.intro ol{
  list-style:         outside;
  list-style-image:   url('../images/ol-pijltjes.gif');
  margin:             5px 0 20px 20px;
  overflow:         visible;
}

article.intro ol li{
  margin:           0 0 4px 10px;
  line-height:      1.2em;
  font-size:        0.9em;
}

article.intro ol li a{
  color:            var(--c-link);
  color:            var(--c-link-hover);
}

body.waarom-gebeurt-het  {
  background:      var(--c-white) url('../images/bg_vervolg_zondersubnav.jpg') no-repeat 50% 0;
  @media only screen and (max-width: 1024px) {
    background:      var(--c-white) url('../images/bg_vervolg_zondersubnav.jpg') no-repeat -115px 0;
  }
}




/* ================================ +
              VERTELLERS
+  ================================ */

body.single-vertellers  {
  background:      var(--c-white) url('../images/bg_vertellers.jpg') no-repeat 50% 0;
  @media only screen and (max-width: 1024px) {
    background:      var(--c-white) url('../images/bg_vertellers.jpg') no-repeat -115px 0;
  }
}

#col_left {
  width:            650px;
  float:            left;
  font-size:        0.875em;
  line-height:      1.4em;
}

#verteller {
  width:            650px;
  height:           230px;
  margin:           0 0 0 40px;
  background:       url('../images/bg_lightbox_vlakjes.png') no-repeat -10px -280px;
}

#verteller h1{
  margin:           0 0 0 190px;
}

#verteller h2{
  width:            350px;
  float:            left;
  font-size:        1.7em;
  line-height:      1.2em;
  margin:           15px 0 0 0;
}

.portraits {
  width:            225px;
  height:           235px;
  float:            left;
  margin:           0 30px 0 0;
}

.portraits.achmed {
  background:         url('../images/spritesheet_vertellers.png') no-repeat -245px 0;
}
.portraits.racquelle {
  background:         url('../images/spritesheet_vertellers.png') no-repeat 0 0px;
}
.portraits.kim {
  background:         url('../images/spritesheet_vertellers.png') no-repeat 0 -245px;
}
.portraits.nicky {
  background:         url('../images/spritesheet_vertellers.png') no-repeat -480px 0;
}
.portraits.coen {
  background:         url('../images/spritesheet_vertellers.png') no-repeat -730px 0;
}

body.single-vertellers #col_left ul{
  list-style:       outside;
  list-style-image: url('../images/ol-pijltjes.gif');
  margin:           0 0 20px 30px;
  overflow:         visible;
}

body.single-vertellers #col_left ul li{
  font-size:        1em;
  line-height:      1.4em;
  margin:           10px 0 0 0;
}

body.single-vertellers #col_left ul li em{
  font-style:       normal;
  display:none;
  }          

body.single-vertellers #col_left ul li strong {
  font-family:      "Conv_HelveticaRoundedLTStd-BdCn";
  font-size:         1.6em;
  color:             var(--c-blue-dark);
  font-weight:       normal;
  line-height:       1.3em;
}

body.single-vertellers .intro p{
  font-size:         1em;
}


body.single-vertellers .related_content {
    float: left;
    margin: 40px 0 0 50px;
    position: relative;
    width: 365px;
}

body.single-vertellers .related_content .vertellers {
  width:              325px;
  height:             350px;
  padding:            60px 0 0 25px;
  background:         url('../images/bg_sprite.png') no-repeat -470px -140px;
}

.related_content .vertellers {
  width:              345px;
  height:             350px;
  padding:            50px 0 0 25px;
  margin-left:        7px;
  background:         url('../images/bg_sprite.png') no-repeat -470px -150px;
}

.related_content .vertellers a.persoon{
  float:              left;
  width:              140px;
  height:             130px;
  margin-bottom:      10px;
}

.related_content .vertellers a.achmed{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -180px -490px;
}
.related_content .vertellers a.achmed:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -180px -625px;
}
.related_content .vertellers a.kim{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -680px -490px;
}
.related_content .vertellers a.kim:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -680px -625px;
}
.related_content .vertellers a.nicky{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -350px -490px;
}
.related_content .vertellers a.nicky:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat -350px -625px;
}
.related_content .vertellers a.coen{
   background:         url('../images/spritesheet_vertellers.png') no-repeat -520px -490px;
}
.related_content .vertellers a.coen:hover{
   background:         url('../images/spritesheet_vertellers.png') no-repeat -520px -625px;
}
.related_content .vertellers a.racquelle{
  background:         url('../images/spritesheet_vertellers.png') no-repeat 0px -490px;
}
.related_content .vertellers a.racquelle:hover{
  background:         url('../images/spritesheet_vertellers.png') no-repeat 0px -625px;
}


/* ================================ +
              VOLWASSENEN
+  ================================ */

body.page-template-volwassenen-php {
  background:      var(--c-white) url('../images/bg_volwassen.jpg') no-repeat 50% 0;
  @media only screen and (max-width: 1024px) {
    background:      var(--c-white) url('../images/bg_volwassen.jpg') no-repeat -115px 0;
  }
}

section.more-volwassen {
 width:             345px;
 min-height:        220px;
 color:             var(--c-white);
 margin:            0 0 40px 8px;
 padding:           30px 0 0 40px;
 background:         url('../images/bg_lightbox_vlakjes.png') no-repeat -665px 0;
}

section.more-volwassen h2{
 color:             var(--c-white);
 padding-top:       10px;
 margin:            0 0 5px 0;
}

section.more-volwassen ul{
 width:             310px;
 margin:            10px 0 0 0;
}

section.more-volwassen ul li{
  margin-top:       7px;
  padding-left:     25px;
}

section.more-volwassen ul li.pijl1{ background: url('../images/spritesheet.png') no-repeat -1040px 3px;}
section.more-volwassen ul li.pijl2{ background: url('../images/spritesheet.png') no-repeat -1040px -47px;}
section.more-volwassen ul li.pijl3{ background: url('../images/spritesheet.png') no-repeat -1040px -94px;}

section.more-volwassen ul li a{
 color:             var(--c-white);
 font-size:           1em; /*16px */
 font-weight:         normal;
 font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
}

/* ================================ +
              TEKST TEMP
+  ================================ */

body.page-template-text-php {
  background:      var(--c-white) url('../images/bg_tekst.jpg') no-repeat 50% 0;
  @media only screen and (max-width: 1024px) {
    background:      var(--c-white) url('../images/bg_tekst.jpg') no-repeat -115px 0;
  }
}

article.tekst {
  width:              450px;
  float:              left;
  margin:             5px 0 0 10px;
}

body.page-template-text-php .related_content {
  width:              260px;
  margin:             0 0 0 60px;
  padding-top:        130px;
  float:              left;
}


article.tekst h1{
  margin:             20px 0 0 0;
}

article.tekst h2,
article.tekst h3{
  margin:             15px 0 10px 0;
}

article.tekst h2 a,
article.tekst h3 a{
  color:              var(--c-link);
}

article.tekst h3{
  font-size:        1.4em;
  padding-top:      20px;
}

article.tekst h4{
  display:            inline;
  margin:             10px 0 0 0;
  background-color:   var(--c-blue-light);
  padding:            3px 4px;
  color:              var(--c-white);
  font-size:          1.1em;
}

article.tekst p{
/* margin:             0px 0 0px 0; */
  margin:			  10px 0 20px 0;
}

article.tekst ul{
  list-style:         outside;
  list-style-image:   url('../images/ul-puntjes.gif');
  margin:             5px 0 20px 20px;
  overflow:           visible;
}

article.tekst ul li{
  margin:           0 0 4px 10px;
  line-height:      1.2em;
  font-size:        0.9em;
}

article.tekst ol{
  list-style:         outside;
  list-style-image:   url('../images/ol-pijltjes.gif');
  margin:             5px 0 20px 20px;
  overflow:         visible;
}

article.tekst ol li{
  margin:           0 0 4px 10px;
  line-height:      1.3em;
  font-size:        1em;
}

article.tekst ol li a{
  color:            var(--c-link);
  color:            var(--c-link-hover);
}



section.more-tekst h2{
 color:             var(--c-white);
 padding-top:       10px;
 margin:            0 0 5px 0;
}

section.more-tekst ul{
 width:             210px;
 margin:            10px 0 0 0;
}

section.more-tekst ul li{
  margin-top:       7px;
  padding-left:     25px;
}

section.more-tekst ul li.pijl1{ background: url('../images/spritesheet.png') no-repeat -1040px 3px;}
section.more-tekst ul li.pijl2{ background: url('../images/spritesheet.png') no-repeat -1040px -47px;}
section.more-tekst ul li.pijl3{ background: url('../images/spritesheet.png') no-repeat -1040px -94px;}

section.more-tekst ul li a{
 color:             var(--c-white);
 font-size:           1em; /*16px */
 font-weight:         normal;
 font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
}


/* ================================ +
              LIGHTBOX
+  ================================ */

.lbLink {
    display: block;
}

.lb:target {
    display: block;
    height: 100%;
}

#doen_lb_bg {
    display:         none;
    position:        fixed;
    width:           100%;
    height:          100%;
    top:             0;
    left:            0;
    background:      none repeat scroll 0 0 rgba(0, 0, 0, 0.9);
    z-index:         998;
}

.lb {
    display:         none;
    position:        absolute;
    width:           100%;
    height:          100%;
    top:             0;
    left:            0;
    z-index:         999;
}

#lb_content {
    display:         block;
    width:          995px;
    min-height:      1320px;
    margin:         0 auto;
    background:     url('../images/bg_lightbox.gif') no-repeat 0 0; 
}

#lb_content.pos {
  margin-top:     -25px;
}

a.sluiten {
  display:        block;
  margin:         40px 0 0 950px;
  width:          55px;
  height:         55px;
  background:     url('../images/spritesheet.png') no-repeat -950px -400px; 
}
a.sluiten:hover {
  background:     url('../images/spritesheet.png') no-repeat -950px -460px; 
}


/* ================================ +
            DOEN in lightbox
+  ================================ */

#doen_progress {
  width:          970px;
  margin:         40px auto 0 auto;
  padding:        0 0 20px 5px;
  background:     url('../images/bg_lightbox_vlakjes.png') no-repeat right bottom; 
}

#lb_content .titel {
  width:          90px;
  height:         90px;
  float:          left; 
}

#lb_content .doenblokje {
  min-width:    23%;
  float:        left;
  padding:      10px 10px 0 10px;
  margin:       10px 0 0 5px;
  font-family:  'Conv_HelveticaRoundedLTStd-BdCn', verdana;
  font-size:     1.0em;
  color:        var(--c-white);
  background-color: var(--c-link);
}

#lb_content .doenblokje_active {
  min-width:    205px;
  float:        left;
  padding:      10px 10px 0 10px;
  margin-left:  5px;
  font-family:  'Conv_HelveticaRoundedLTStd-BdCn', verdana;
  font-size:     1.0em;
  color:        var(--c-link);
  background-color: var(--c-white);
}

#lb_content .doenblokje_active h3{
  color:        #ed1f77;
}

#lb_content .doenblokje h3{
  color:        var(--c-white);
  font-size:     1.3em;
}


.doenblokje ul{
  margin:       3px 0 15px 15px;
  float:        left;
  overflow:     visible;
}

.doenblokje ul li,
.doenblokje_active ul li{
  display:       block;
  margin:       0px 0 4px 0;
  height:         30px;
}

.doenblokje ul li .pijl{
  width:          25px;
  height:         30px;
  margin-left:    10px;
  float:          left;
  background: url('../images/spritesheet.png') no-repeat -1040px 3px;
}

.doenblokje_active ul li a,
.doenblokje ul li a{
  display:       inline;
  width:         auto;
  padding:       3px 13px;
  font-size:     1.15em;
  font-family:  arial,'Conv_HelveticaRoundedLTStd-Bd', verdana;
  font-weight:   bold;
  background-color: var(--c-blue-pale);
  color:          var(--c-gray-blue);
  text-decoration:  none;
  border-radius:  3px;
  float:          left;
}
.doenblokje ul li.hidden {
  display:        none;
}

.doenblokje_active ul li a:hover,
.doenblokje ul li a:hover,
.doenblokje ul li a.active{
  color:          var(--c-white);
  background-color: var(--c-pink); /*pink*/
  xbackground-color: var(--c-orange); /*geel*/
  xbackground-color: var(--c-text-mid); /*grijs*/
}

.doenblokje ul li.anders{
  display:       block;
  margin:       27px 0 15px 0;
}

#doen_resultaat {
  width:      1000px;
  margin:     0 0 0 10px;
  padding:    40px 0 30px 0;
  background-color:   var(--c-white);
}

#doen_resultaat h1{
  width:            440px;
  font-family:      'Conv_HelveticaRoundedLTStd-Bd';
  color:            var(--c-text-mid);
  font-size:        2.6em; /*42px */
  font-weight:      normal;
  line-height:      1.1em;
  margin:           0 0 10px 40px;
}

#doen_resultaat p{
  width:            420px;
  margin:           20px 20px 15px 40px;
}

#doen_resultaat h2.videotitle{
  width:             400px;
  margin:            0 0 15px 40px;
  color:             var(--c-orange);
}

#doen_resultaat .video{
  width:            530px;
  height:           298px;
  background-color: var(--c-text-dark);
  margin:           10px 10px 10px 10px;
}


#doen_resultaat .meerweten {
  width:            350px;
  margin:           0 0 0 40px;
  padding:          30px 0 0 0;
  background: url('../images/bg_lightbox_vlakjes.png') no-repeat 0 0;
}

#doen_resultaat .meerweten ul{
  width:            400px;
  color:            var(--c-blue-dark);
  list-style:       outside;
  list-style-image: url('../images/ol-pijltjes.gif');
  margin:           0 0 20px 60px;
  overflow:         visible;
}

#doen_resultaat .meerweten a{
  color:            var(--c-blue-dark);
  line-height:      1.8em;
  font-size:        1.2em;
  font-family:      'Conv_HelveticaRoundedLTStd-BdCn';
}

#doen_resultaat .quotes {
  width:                455px;
  float:                right;
  padding:              55px 15px 40px 50px;
  margin:               10px 0 0 0;
  background:           url('../images/bg_lightbox_quotes.png') no-repeat 0 0;
}

#doen_resultaat .quotes h2{
  width:             350px;
  font-family:      "Conv_HelveticaRoundedLTStd-Bd";
  font-size:        0.938em;
  color:            var(--c-text-mid);
  margin:           25px 0 0 0;
}

#doen_resultaat .quotes h2 strong{
  font-weight:      normal;
  font-size:        1.28em;
  color:            var(--c-orange);
}

#doen_resultaat .quotes ul {
  margin-left:          -10px;
}


#doen_resultaat .quotes ul li{
  width:                380px;
  color:                var(--c-blue-dark);
  padding:              5px 0 10px 32px;
  margin:               0 0 0 0;
  font-family:          "Conv_HelveticaRoundedLTStd-Bd";
  font-style:           italic;
  font-size:            1.1em;
  font-weight:          normal;
  background:           url('../images/spritesheet.png') no-repeat -1033px -134px;
}



/* ================================ +
              FONTS & LINKS
+  ================================ */

h1 {
  font-family:      'Conv_HelveticaRoundedLTStd-BdCn';
  color:                var(--c-text-dark);
  font-size:            2.5em; /*12px */
  font-weight:          normal;
  line-height:          1.8em;
}

h2 {
  font-family:      "Conv_HelveticaRoundedLTStd-BdCn";
  font-size:         1.25em;
  color:             var(--c-text);
  font-weight:        normal;
  line-height:          1.3em;
}

h3 {
  color:               var(--c-text);
  font-size:           1.1em; /*18px */
  font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
  font-weight:          normal;
  margin-bottom:        7px;
}

h4 {
  color:               var(--c-teal-dark);
  font-size:           0.938em; /*15px */
  font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
  font-weight:         normal;
  line-height:          1.2em;
}


h5 {
  display:              block;
  color:               var(--c-teal-dark);
  font-size:           1.2em; /*15px */
  font-family:        'Conv_HelveticaRoundedLTStd-BdCn';
  font-weight:         normal;
  line-height:          1.1em;
  margin:               30px 0 0 0;
}

.geel {  color: var(--c-orange);}
.rood {  color: var(--c-pink);}  
.groen {  color: var(--c-teal-dark);}






/* ================================ +
               MENU & HEAD
+  ================================ */

header {
  width:           1000px;
  height:          240px;     
}

header nav ul{
  width:           705px;
  height:          115px;
  margin:          100px 0 0 0;
  float:          left;
  padding:         0;
  overflow:        visible;
}

header nav ul li{
    float:        left;
    padding:         0;
}

header nav ul li a{
    display:      block;
    width:        232px;
    height:       120px;
    text-indent:   -5000px;
}

header nav ul li.menu-item-46 a{background: url('../images/spritesheet.png') no-repeat 0 -314px;}

header nav ul li.menu-item-46 a:hover,
header nav ul li.menu-item-46.current-menu-item a,
header nav ul li.menu-item-46.current-menu-ancestor a {
  background: url('../images/spritesheet.png') no-repeat 0 -450px;
}

header nav ul li.menu-item-45  a{ background:  url('../images/spritesheet.png') no-repeat -235px -308px;}

header nav ul li.menu-item-45  a:hover,
header nav ul li.menu-item-45.current-menu-item a,
header nav ul li.menu-item-45.current-menu-ancestor a { 
  background: url('../images/spritesheet.png') no-repeat -235px -445px;
}

header nav ul li.menu-item-44  a{ width: 236px; background: url('../images/spritesheet.png') no-repeat -474px -302px;}

header nav ul li.menu-item-44  a:hover,
header nav ul li.menu-item-44.current-menu-item a,
header nav ul li.menu-item-44.current-menu-ancestor a { 
  background: url('../images/spritesheet.png') no-repeat -474px -440px;
}

nav ul.sub-menu {
  position:absolute;
}

body.home nav ul{
  width:           705px;
  height:          138px;
  margin:          82px 0 0 0;
  float:          left;
  padding:        0;
  overflow:       visible;
}

body.home nav ul li{
    float:        left;
}

body.home nav ul li a{
    display:      block;
    width:        232px;
    height:       138px;
    text-indent:   -5000px
}

body.home nav ul li.menu-item-46 a {background: url('../images/spritesheet.png') no-repeat 0 0;}
body.home nav ul li.menu-item-46 a:hover{background: url('../images/spritesheet.png') no-repeat 0 -135px;}

body.home nav ul li.menu-item-45 a{ background:  url('../images/spritesheet.png') no-repeat -235px 0;}
body.home nav ul li.menu-item-45 a:hover{ background: url('../images/spritesheet.png') no-repeat -235px -135px;}

body.home nav ul li.menu-item-44 a{ width: 236px; background: url('../images/spritesheet.png') no-repeat -474px 0;}
body.home nav ul li.menu-item-44 a:hover{ background: url('../images/spritesheet.png') no-repeat -474px -135px;}


body.home nav ul.sub-menu {
  display:          none;
}

#menu-hoofdmenu-1 li {
  display:        none;
}

#menu-hoofdmenu-1 li.current-menu-item,
#menu-hoofdmenu-1 li.current-menu-parent,
#menu-hoofdmenu-1  li.current-menu-item  ul.sub-menu li,
#menu-hoofdmenu-1  li.current-menu-parent ul.sub-menu li  {
  display:        block;
}

#menu-hoofdmenu-1  li.current-menu-item ul.sub-menu,
#menu-hoofdmenu-1  li.current-menu-parent ul.sub-menu {
  position:     static;
  float:        none;
  margin: 0
}


section#nav_ouders {
  display:        block;
  width:          198px;
  margin:         0px 0px 45px 90px;
  font-family:    'Conv_HelveticaRoundedLTStd-BdCn';
  font-size:      1.2em;
  color:          var(--c-teal);
  text-align:     right;
}

section#nav_ouders a{
  color:          var(--c-text);
  line-height:    0.6em;
}

section#nav_ouders a:hover{
  color:          var(--c-teal);
}

section#nav_ouders a.verdana{
  display:        block;
  margin:         5px 0 20px 0;
  font-family:    arial, verdana;
  font-size:      0.7em;
  color:          var(--c-teal);
}

section#doen {
  width:            290px;
  height:           210px;
  margin-top:       2px;
  float:            left;
  background:        url('../images/spritesheet.png') no-repeat -730px 60px;
}

a.btn_mezelf {
 display:           block;
 width:             130px;
 height:            60px;
 float:             left;
 margin:            42px 0 0 20px;
 background:        url('../images/spritesheet.png') no-repeat -740px -175px;
}
  
a.btn_mezelf:hover {
 background:        url('../images/spritesheet.png') no-repeat -740px -240px;
}

a.btn_ander {
 display:           block;
 width:             130px;
 height:            60px;
 float:             left;
 margin-top:        46px;
 background:        url('../images/spritesheet.png') no-repeat -880px -175px;
}
a.btn_ander:hover {
 background:        url('../images/spritesheet.png') no-repeat -880px -240px;
}

nav#subnav ul{
  width:           auto;
  padding-top:     5px;
  margin:          5px 10px 0 10px;
  float:          left;
  overflow:        visible;
  /* bg_volwassen.jpg/bg_tekst.jpg have a decorative graphic starting
     around y=580 that a long submenu (voor-scholen has 11 items) can
     run into; an opaque background stops it bleeding through instead
     of trying to out-position it. */
  /* background-color:   var(--c-white); */
}

nav#subnav ul li {
    margin:       0 0 3px 0;
}

nav#subnav ul li a{
    display:      inline-block;
    font-family:  'Conv_HelveticaRoundedLTStd-BdCn';
    font-size:     1.25em;
    color:        var(--c-text);
    padding:      2px 10px;
}

nav#subnav ul li a:hover,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-299 ul.sub-menu li a:hover,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-315 ul.sub-menu li a:hover,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-299 ul.sub-menu li.current-menu-item > a,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-315 ul.sub-menu li.current-menu-item > a,
#menu-hoofdmenu-1 li.current-menu-item > a,
#menu-hoofdmenu-1 li.current-menu-parent > a[aria-current="page"] {
    color:              var(--c-white);
    text-decoration:    none;
    background-color:   var(--c-pink);
    border-radius:      2px;
    box-shadow: 2px 2px 3px var(--c-text-dark);
    -moz-box-shadow: 2px 2px 3px var(--c-text-dark);
    -webkit-box-shadow: 2px 2px 3px var(--c-text-dark);
}

nav#subnav.volwassen,
nav#subnav.volwassen.text {
  width:              215px;
  padding-top:        0px;
  margin:             0 0 0 15px;
  float:              left;
}

nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-299 a,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-315 a{
  font-size:          2em;
  color:              var(--c-text);
  border-radius:      0px;
  box-shadow: 0px 0px 0px var(--c-white);
  -moz-box-shadow: 0px 0px 0px var(--c-white);
  -webkit-box-shadow: 2px 2px 3px var(--c-white);
}

nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-299 a:hover,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-315 a:hover {
  background:     none;
  box-shadow:     none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  cursor: default         
}

nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-299 ul.sub-menu li a,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-315 ul.sub-menu li a {
  font-size:      1.2em;
  
}

nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-299 ul.sub-menu a:hover,
nav#subnav.volwassen ul#menu-hoofdmenu-1 li.menu-item-315 ul.sub-menu a:hover{
  font-size:      1.2em;
  cursor:         pointer  
}



/* =========  VERTELLERS ========== */

#col_left {
  width:            610px;
}

#verteller {
  width:            610px;
}

#verteller h1{
  margin:           0 0 0 170px;
}


.portraits {
  margin:           0 20px 0 0;
}

body.single-vertellers .related_content {
    margin: 40px 0 0 25px;
}


@media only screen and (min-width: 320px) {

}
@media only screen and (min-width: 480px) {

}
@media only screen and (min-width: 768px) {

}
@media only screen and (min-width: 1024px) {

}
@media only screen and (min-width: 1140px) {

}
@media only screen and (min-width: 1280px) {

}
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
     only screen and (min-resolution: 144dpi) {

}

#video .iframeplayer, #video-big .iframeplayer {
  background-color: var(--c-text-dark);
}

/* Suppress the browser's own default focus outline on the iframe itself —
   the wrapper ring below (:has(iframe:focus-within)) is the single
   intended focus indicator. */
.iframeplayer:focus {
  outline: none;
}


/*------------------------------------*\
    $PRINT
\*------------------------------------*/

@media print {
  * {
    background:transparent !important;
    color:#000 !important;
    box-shadow:none !important;
    text-shadow:none !important;
  }
  a,
  a:visited {
    text-decoration:underline;
  }
  a[href]:after {
    content:" (" attr(href) ")";
  }
  abbr[title]:after {
    content:" (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content:"";
  }
  pre,blockquote {
    border:1px solid #999;
    page-break-inside:avoid;
  }
  thead {
    display:table-header-group;
  }
  tr,img {
    page-break-inside:avoid;
  }
  img {
    max-width:100% !important;
  }
  @page {
    margin:0.5cm;
  }
  p,
  h2,
  h3 {
    orphans:3;
    widows:3;
  }
  h2,
  h3 {
    page-break-after:avoid;
  }
}

/* ================================ +
         A11Y ADDITIONS
+  ================================ */

/* Skip link */
.skip-link,
.skip-link:visited {
  position: absolute;
  top: -100%;
  left: 0;
  background: var(--c-pink);
  color: var(--c-white);
  padding: 8px 16px;
  font-family: arial, verdana, sans-serif;
  font-size: 1em;
  z-index: 9999;
  text-decoration: none;
}
.skip-link:focus {
  top: 0;
}
/* Firefox draws its own thin dotted default focus ring on links, which can
   still show up alongside a custom outline. Redeclaring the outline scoped
   directly to .skip-link (instead of relying on the generic :focus-visible
   reset elsewhere) keeps this the only visible focus indicator. */
.skip-link:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Restore focus outlines for keyboard users */
:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Voor scholen/ouders have no sprite — hide from header nav (accessible via #nav_ouders and subnav) */
header nav ul li.menu-item-299,
header nav ul li.menu-item-315 {
  display: none;
}

/* Logo — the logo sits at top:0 with nothing above it, so an outline (which
   needs space outside the box) has nowhere to render on that side; it also
   extends into .over_titel's adjacent box on the right, which paints over
   it since neither has a z-index. An inset box-shadow avoids both: it
   stays entirely within the logo's own box. outline: none suppresses
   Firefox's own default dotted focus ring on links, which otherwise still
   renders alongside a custom box-shadow (box-shadow doesn't replace it the
   way an author-specified outline normally does). */
a.logo:focus-visible {
  box-shadow: inset 0 0 0 3px var(--c-pink);
  outline: none;
}

/* Nav ouders links (voor ouders, voor scholen, klokhuis website) */
section#nav_ouders a:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Header nav — focus ring around the sprite, no visual change to the image */
header nav ul li a:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Subnav links are plain text — only need the outline */
nav#subnav ul li a:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Verteller portrait icons — sprite images, same treatment as header nav sprites */
.home .vertellers a.persoon:focus-visible,
.related_content .vertellers a.persoon:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 4px;
}

/* Playlist items: one indicator on the container when image OR title link is focused */
.home .play-list-item:has(:focus-visible),
#video-big .play-list-item:has(:focus-visible) {
  outline: 3px solid var(--c-pink);
  outline-offset: 3px;
}
.home .play-list-item a:focus-visible,
#video-big .play-list-item a:focus-visible {
  outline: none;
}

/* Video iframe — the NTR player always has focusable controls, so keyboard
   focus delegates straight into the nested cross-origin document. Neither
   iframe:focus-visible nor a wrapper :has(iframe:focus-within) reliably
   fires on real Tab navigation for this in Firefox or Chrome (confirmed:
   forcing the state in devtools renders fine, real tabbing does not), so
   focus is tracked in JS instead (main.js). An outline on the iframe
   itself gets clipped by #video-big's own overflow: hidden (used to
   contain its floated/positioned children — relaxing that on focus
   reflows them and pushes the page layout down); an inset box-shadow on
   the iframe avoids that, but gets painted underneath the framed page's
   own rendered content since it composites as a separate surface. So
   main.js inserts a plain sibling div sized/positioned to match the
   iframe exactly and stacked on top of it — a normal element has none
   of those issues. */
.iframe-focus-ring {
  z-index: 1;
}
.iframe-focus-ring.iframe-focused {
  box-shadow: inset 0 0 0 3px var(--c-pink);
}

/* Screen reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Decision tree buttons (were <a href="#">, now proper <button>) */
.btn_mezelf,
.btn_ander {
  border: none;
  cursor: pointer;
  background-color: transparent;
}
.btn_mezelf {
  display: block;
  width: 130px;
  height: 60px;
  float: left;
  margin: 42px 0 0 20px;
  background: url('../images/spritesheet.png') no-repeat -740px -175px;
}
.btn_mezelf:hover,
.btn_mezelf:focus-visible {
  background: url('../images/spritesheet.png') no-repeat -740px -240px;
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}
.btn_ander {
  display: block;
  width: 130px;
  height: 60px;
  float: left;
  margin-top: 46px;
  background: url('../images/spritesheet.png') no-repeat -880px -175px;
}
.btn_ander:hover,
.btn_ander:focus-visible {
  background: url('../images/spritesheet.png') no-repeat -880px -240px;
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Decision tree dialog */
#doen_lb {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 999;
  overflow-y: auto;
}
#doen_lb[hidden] { display: none; }
#doen_lb_bg {
  display: block;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 998;
}
#doen_lb_bg[hidden] { display: none; }

/* Sluiten button */
.sluiten {
  display: block;
  margin: 40px 0 0 950px;
  width: 55px;
  height: 55px;
  background: url('../images/spritesheet.png') no-repeat -950px -400px;
  border: none;
  cursor: pointer;
  background-color: transparent;
}
.sluiten:hover,
.sluiten:focus-visible {
  background: url('../images/spritesheet.png') no-repeat -950px -460px;
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
}

/* Keuze buttons in decision tree */
.doenblokje ul li button.keuze {
  display: inline;
  width: auto;
  padding: 3px 13px;
  font-size: 1.15em;
  font-family: arial, 'Conv_HelveticaRoundedLTStd-Bd', verdana;
  font-weight: bold;
  background-color: var(--c-blue-pale);
  color: var(--c-gray-blue);
  text-decoration: none;
  border: none;
  border-radius: 3px;
  float: left;
  cursor: pointer;
}
.doenblokje ul li button.keuze:hover,
.doenblokje ul li button.keuze:focus-visible,
.doenblokje ul li button.keuze.active {
  color: var(--c-white);
  background-color: var(--c-pink);
  outline: 3px solid var(--c-text-dark);
  outline-offset: 2px;
}

/* Hidden utility using HTML hidden attribute */
[hidden] { display: none !important; }

/* Footer links — dark indicator because bg_footer.jpg has similar tone to --c-pink */
footer a:focus-visible {
  outline: 3px solid var(--c-text);
  outline-offset: 2px;
}

/* Body text links — accessible contrast (5.8:1 on white) + underline for non-colour distinction */
article.intro a,
article.tekst a {
  color: var(--c-link-body);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
article.intro a:visited,
article.tekst a:visited {
  color: #463b9f;
}
article.intro a:hover,
article.tekst a:hover {
  color: var(--c-link-body);
  text-decoration-thickness: 2px;
}
article.intro a:focus-visible,
article.tekst a:focus-visible {
  outline: 3px solid var(--c-pink);
  outline-offset: 2px;
  border-radius: 2px;
}