<style>
/* Algemene setup*/

body
  {
    font-family: calibri, verdana, futura, "dejavu sans", arial, geneva, helvetica, sans ;
    font-weight: medium;
	background-color: #E1E1E1 ;
	font-size: 14px ;
	line-height: 18px ;
	border: none ;
  }

.toprule
	{
		width: 100.5%;
		border: none;
		margin-left: -4px ;
	}

.bottomrule
	{
		width: 100.5%;
		border: none;
		margin-left: -4px ;
	}

.pagetoprow
    {
		font-size: 22pt;
		font-weight: bold;
		color: white;
		text-align: center;
        vertical-align: middle;
		width: 100.5%;
		background-color: #E3843D;
	    height: 65px;
	}

.pagesecondrow
    {
		font-size: 22pt;
		font-weight: bold;
		color: white;
		text-align: center;
        vertical-align: middle;
		width: 100.5%;
		background-color: #99B899;
	    height: 65px;
	}

.pagebottomrow
    {
		font-size: 16pt;
        margin: 1.5em 0;
        line-height: 1.2em;
		font-weight: bold;
		color: white;
		text-align: center;
        vertical-align: middle;
		width: 100.5%;
		background-color: #E3843D;
	    height: 65px;
	}

table.phototable
    {
     /* border: 1px solid; */
        margin-left: auto;
        margin-right: auto;
    }

table.phototable > tbody > tr
    {
        align: center ;
    }

table.phototable > tbody > tr > td
    {
     /* border: 1px solid; border-color : red ;*/
        width: 250px;
    }

table.mhooj
    {
     /* border: 1px solid; */
        position:relative;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
		color: #E1E1E1;
		background-color: #99B899;
        border-color : #99B899;
    }

.photo
    {
		vertical-align: top;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 10px;
        padding-left: 10px;
	}

.whomhoojis
    {
		font-weight   : bold;
		color         : white;
		vertical-align: top;
        padding-top   : 10px;
        padding-bottom: 10px;
        padding-right : 10px;
        padding-left  : 10px;
	}

table.personwithissue  > tbody > tr > td
    {
     /* border: 1px solid; */
        align:center;
    }

img.bagger
    {
        /* width:300px; */
        width:100%;
    }

a, a:hover, a:active, a:visited
    {
        color          : white;
        text-decoration: none;
    }

.bullet
    {
        margin-left : 5px;
        margin-right: 5px;
        display     : inline ;
    }


/* the hovering-over-image text */

.hide {
    display: none;
    top:     0px;
    left:    0px;
    right:   0px;
    height:  0px;
}

.hovertext:hover + .hide {
    display : block;
    top     : -50px;
    position: relative;
    width   : 300px;
    overflow: visible ;
    z-index : 4 ; /* tekstbox over de caption */
}

.caption {
    position      : relative ;
    top           : 0px ;
	text-align    : center;
	font-size     : 16px;
	font-weight   : bold;
	color         : darkgray;
    width         : 90%;
    height        : 40px;
	border-radius : 20px;
	border-style  : solid;
	border-color  : darkgray;
	padding-top   : 10px;
	padding-bottom: 10px;
	padding-left  : 10px;
	padding-right : 10px;
}

/* handling image hover */

.wrapper {
  position: relative;
}

.hover-extrainfo {
    position        : absolute ;
    top             : 0px ;
	text-align      : left;
	font-size       : 16px;
	font-weight     : bold;
	color           : #E1E1E1;
    background-color: #E3843D;
    width           : 90%;
	border-radius   : 20px;
	border-style    : solid;
	border-color    : #E3843D;
/*  margin-top      : 100px;  */
/*  margin-left     : -100px; */
	padding-top     : 10px;
	padding-bottom  : 10px;
	padding-left    : 10px;
	padding-right   : 10px;
    z-index         : 4 ;                            /* textbox covering caption */
    opacity         : 0;
    transition      : opacity 1.2s, visibility 1.2s; /* transition effect */
}

.wrapper:hover .hover-extrainfo {
  visibility: visible;
  opacity: 1;
}

/* text animation of statements from person-with-issue */

/* older person */
.animate-p {
   display: block;
   /* height: 1.1cm */
   margin: 0;
   padding: 0;
   border: 0;
}

.animate-p:before {
  content: 'Ik zou graag met iemand praten';
   -webkit-animation-name: animate-p;
   -webkit-animation-duration: 35s;
   animation-name: animate-p;
   animation-duration: indefinite;
   animation-delay: 5s;
   animation-iteration-count: infinite;
}

@keyframes animate-p {
     5% { content: 'Ik zou graag met iemand praten'; }
    20% { content: 'Het is wel mooi geweest'; }
    40% { content: 'Wat moet ik nou'; }
    60% { content: 'Er komt nooit iemand langs';  }
    80% { content: 'Het is vandaag nog maar woensdag.'; }
   100% { content: 'Ik zou graag met iemand praten'; }
}

/* concerned child about father/mother  */
.animate-q {
   display: block;
}

.animate-q:before {
  content: 'Je belt wel heel vaak...';
   -webkit-animation-name: animate-q;
   -webkit-animation-duration: 30s;
   animation-name: animate-q;
   animation-duration: indefinite;
   animation-delay: 5s;
   animation-iteration-count: infinite;
}

@keyframes animate-q {
     5% { content: 'Je belt wel heel vaak...';}
    20% { content: 'Ha, ha. Je hebt de koffie in de ijskast gezet.';}
    40% { content: 'Ben je op je pantoffels hier naar toe gekomen?';}
    60% { content: 'Je weet toch nog wel waar je vanmorgen bent geweest...';}
    80% { content: 'Waarom? Je bent vandaag toch jarig...';}
   100% { content: 'Je belt wel heel vaak...';}
}

/* troubledteen  */
.animate-r {
   display: block;
}

.animate-r:before {
  content: 'Wie ben ik? Wat wil ik?';
   -webkit-animation-name: animate-r;
   -webkit-animation-duration: 25s;
   animation-name: animate-r;
   animation-duration: indefinite;
   animation-delay: 5s;
   animation-iteration-count: infinite;
}

@keyframes animate-r {
     5% { content: 'Wie ben ik? Wat wil ik?';}
    20% { content: 'Heb ik nou de verkeerde studie gekozen...';}
    40% { content: 'Jullie luisteren toch niet...';}
    60% { content: 'Is dit het...';}
    80% { content: 'Lolbroek? Jullie moesten eens weten...';}
   100% { content: 'Wie ben ik? Wat wil ik?';}
}

/* unhappycouple  */
.animate-s {
   display: block;
}

.animate-s:before {
  content: 'Als jij nou verandert, dan...';
   -webkit-animation-name: animate-s;
   -webkit-animation-duration: 40s;
   animation-name: animate-s;
   animation-duration: indefinite;
   animation-delay: 5s;
   animation-iteration-count: infinite;
}

@keyframes animate-s {
     5% { content: 'Als jij nou verandert, dan...';}
    20% { content: 'Misschien moet ik er even tussenuit';}
    40% { content: 'Ik moet even met je praten...';}
    60% { content: 'Waarom snap jij dat nou niet...';}
    80% { content: 'Jij luistert ook nooit...';}
   100% { content: 'Als jij nou verandert, dan...';}
}

/* concerned parent */
.animate-t {
   display: block;
}

.animate-t:before {
  content: 'Wordt jij gepest op school...';
   -webkit-animation-name: animate-t;
   -webkit-animation-duration: 35s;
   animation-name: animate-t;
   animation-duration: indefinite;
   animation-delay: 5s;
   animation-iteration-count: infinite;
}

@keyframes animate-t {
     5% { content: 'Wordt jij gepest op school...';}
    20% { content: 'Waarom ga je zo vaak naar de wc...';}
    40% { content: 'Gebruik jij nou drugs...';}
    60% { content: 'Je gedraagt je raar de laatste tijd...';}
    80% { content: 'In welk algoritme zit jij...';}
   100% { content: 'Wordt jij gepest op school...';}
}

/* pensive person */
.animate-u {
   display: block;
}

.animate-u:before {
    content: 'Waarom ben ik zo somber...';
   -webkit-animation-name: animate-u;
   -webkit-animation-duration: 30s;
   animation-name: animate-u;
   animation-duration: indefinite;
   animation-delay: 5s;
   animation-iteration-count: infinite;
   animation-transition      : opacity 1.2s, visibility 1.2s; /* transition effect */
}

@keyframes animate-u {
     5% { content: 'Waarom ben ik zo somber...';}
    20% { content: 'Is dit nou een burn-out...';}
    40% { content: 'Ik ben zo moe...';}
    60% { content: 'Waarom vraagt iedereen hoe het met me gaat...';}
    80% { content: 'Ook dat nog...';}
   100% { content: 'Waarom ben ik zo somber...';}
}
</style>


<script src="jquery.js"></script>

<script>
function includeHTMLSnippet() {

    // Traverse the collection of all
    // HTML elements
    id = document.getElementsByTagName("*");
    for (i = 0; i < id.length; i++) {
        element = id[i];

        // Search for elements with
        // specific attributes
        file = element.getAttribute(
            "GFG-include-html-snippet");

        if (file) {

            // Create an HTTP request with
            // the attribute value as the
            // file name
            xmlRequest = new XMLHttpRequest();
            xmlRequest.onreadystatechange = function () {
                if (this.readyState == 4) {
                    if (this.status == 200) {
                        element.innerHTML = this.responseText;
                    }

                    if (this.status == 404) {
                        element.innerHTML = "Page not found.";
                    }

                    // Delete the attribute and
                    // call this function again.
                    element.removeAttribute(
                        "GFG-include-html-snippet");

                    includeHTMLSnippet();
                }
            }
            xmlRequest.open("GET", file, true);
            xmlRequest.send();
            return; // Exit function.
        }
    }
};
</script>

