/* ----------------------------------------------- */
/*            W3 styles Relativiteit    	   */
/*            cvw 31-03-2019                       */
/* ----------------------------------------------- */

* {box-sizing: border-box;}

body{max-width:1600px;}

body,h1,h2,h3,h4,h5,h6 {font-family: "Raleway", sans-serif}

h1 {margin-left: auto; margin-right: auto;  width: 80%; text-align: center;font-size: 20px;}

h2 {margin-left:30px;color: #0a69b7;}

.center {
margin-left: auto;
  margin-right: auto;
  width: 80%;
 text-align: center;
}

.hidden {display: none;}

figcaption {padding-left:60px;text-align: left;}

/* ------------------------------------------------------------*/
/* https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp */
/* voorbeeld class "sidenav"                                   */
/*.w3-sidebar{height:100%;width:200px;background-color:#fff;   */
/* position:fixed!important;z-index:1;overflow:auto}           */
/*------------------------------------------------------------ */

#mySidebar {display: block;font-size: 14px; 
/*background: #48c4ff;*/
  background: #a6d4fa;
  width:260px;padding-left:20px;
}

#mySidebar a {display:block;text-decoration:none;}
#mySidenav a:hover {color:#000000;background-color:#cccccc;}
#mySidebar a.active {background-color:#0a69b7;color:#ffffff;}

#mySidenav {font-family:"Segoe UI",Verdana, sans-serif;font-size: 14px; 
/*background: #48c4ff;*/
  background: #a6d4fa;
  width:260px;left:0;
}
#mySidenav p {padding-left: 20px;}
#mySidenav h1 {font-weight: bold; color: MidNightBlue;font-size: 16px; padding:2px 1px 1px 2px;}
#mySidenav h2 {font-weight: bold; color: White;font-size: 14px; padding:2px 1px 1px 10px;}
#mySidenav a {display:block;text-decoration:none;}
#mySidenav a:hover {color:#000000;background-color:#cccccc;}
#mySidenav a.active {background-color:#0a69b7;color:#ffffff;}

/*------------------------------------------------------------ */
/*                Section                                      */
/*------------------------------------------------------------ */

section {font-size: 1.1em; padding-top:20px; padding-left:0px;padding-right: 20px; padding-bottom: 40px;vertical-align: top;}

section aside {
  float: left;
  width: 30%;
  margin: 0; 
  /*margin-right: 30px;*/
  padding: 7px;
  vertical-align: top;
  font-size: 11px;
}

/*section {
  margin: 0px 15px 0px 15px;
  padding-top: 30px;
  margin-bottom: 130px; 
  vertical-align: top; 
  color: #555;
/*border: 1px solid silver;*/
}*/

/* header {
  vertical-align: middle;
  background: #d4f1ff url(../Images/right.gif) left center no-repeat; 
  color: MidNightBlue;
  height: 42px;
}
*/

/*header {
  vertical-align: middle;
  height: 60px;
  padding-top: 20px;
  padding-bottom: 20px;
}*/


/*header h1 {
  text-align: center;
  font-size: 25px;
  font-weight: bold;
/*  padding-left: 220px;*/
/*  padding-bottom: 60px;*/
}*/ 

/*article {float:left; width: 75%; padding: 0px 12px; font-size: 14px;}*/  

/* Clear floats after the columns */
section:after {
    content: "";
    display: table;
    clear: both;
}

/*footer {
  float: left;
  margin: 0px 15px 15px;
  vertical-align: top;
  color: #555; 
  font-size: 11px;
}*/

/* ----------------------------------------------- */
/*            W3 styles buttons      	           */
/*  https://www.w3schools.com/css/css3_buttons.asp */         
/*              cvw 15-03-2019                       */
/* ----------------------------------------------- */

div.parcontent {margin-left: 40px;
     border-left: 2px solid #0a69b7;
}


button.parlinks {
  width: 12em;
  margin-top: 0.5em;
  color: midnightblue;
  background: #d4f1ff;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
}

button.parlinks_red {
  width: 12em;
  margin-top: 0.5em;
  color: red;
  background: #d4f1ff;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
}

button.parlinks a {text-decoration: none;}

button.parlinks_red a {text-decoration: none;}

button.hlinks {
  width:70%;
/*  float: left;*/
  margin-top: 0.5em;
  color: midnightblue;
  background: #d4f1ff;
  text-align: left;
  font-weight: bold;
  font-size: 16px;
}

button.hlinks a {text-decoration: none;}

article button.parlinks {
  width: 30%;
/*  float: left;*/
  margin-top: 0.5em;
  color: midnightblue;
  background: #d4f1ff;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
}

#prevtop {font-weight: bold; text-align: left; line-height: 15px; padding-top: 7px; padding-bottom: 7px; /*padding-right: 15px;*/ padding-left: 30px; background: url(../Images/left.gif); background-position: left center; background-repeat: no-repeat;}
      
#prevtop a {position: relative; top: 1px; font-size: 12px; text-decoration: none; margin-left: 50px;}

#nexttop {font-weight: bold; text-align: right;line-height: 15px;padding-top: 7px;padding-right: 30px;
  padding-bottom: 7px; background: url(../Images/right.gif);background-position: right center; 
  background-repeat: no-repeat;} 
           
#nexttop a {position: relative; top: 1px; font-size: 12px; text-decoration: none; margin-right: 50px;}

#titeltop {
  color: white; 
  font-weight: bold; 
  text-align: center; 
  line-height: 15px;
  padding-top: 7px;
padding-left: 7%;
/*padding-right: 20px;*/
  padding-bottom: 7px;
/*background: #48c4ff url(../Images/right.gif);*/ 
/*background: #0a69b7 url(../Images/right.gif);*/ 
  background-position: center; 
  background-repeat: no-repeat;
}


/* ------------------------------------------------------------ */
/*   stylesheet W3 alert buttons 24-03-2017                     */
/* ------------------------------------------------------------ */

.btn {
    height: 35px;     
    text-align: center;
    width: 120px;
    border: none;
    color: white;
/*  padding: 6px 28px;*/
    font-size: 14px;
    cursor: pointer;
}

.voorbeeld {background-color: #4CAF50;} /* Green */
.voorbeeld:hover {background-color: #46a049;}

.coach {background-color: #2196F3;} /* Blue */
.coach:hover {background: #0b7dda;}

.noot {background-color: #ffff00; color: black;} /* Yellow */ 
/* .noot {background-color: #e7e7e7; color: black;} /* Gray */*/ 
.noot:hover {background: #ddd;}

/*
.warning {background-color: #ff9800;} /* Orange */
.warning:hover {background: #e68a00;}

.danger {background-color: #f44336;} /* Red */ 
.danger:hover {background: #da190b;}

/* ---------------------------------------------------*/
/*                 W3 Popup      	              */
/*  https://www.w3schools.com/howto/howto_js_popup.asp*/         
/*              cvw 09-04-2019                        */
/* -------------------------------------------------- */
/* Popup container - can be anything you want */
.popup {
  position: relative;
/*display: inline-block;*/
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* The actual popup */
.popup .popuptext {
  visibility: hidden;
  width: 80%;
  background-color: #fff;
  color:#555;
/*text-align: center;*/
  border-radius: 6px;
  padding: 8px 0px;
/*position: relative;
  z-index: 1;
  bottom: 110%;
  left: 50%;
  margin-left: -300px;*/
}
/* Toggle this class - hide and show the popup */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;} 
  to {opacity: 1;}
}

@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}


/* -------------------------------------------------- */
/*                  Samenvatting*                      /
/* -------------------------------------------------- */
.samenvatting_kop_blue {display: block;
  border: 1px solid blue;
  padding-top: 0em;
  padding-bottom: 0em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  }


.samenvatting_kop_blue h2 {color: white;
  font-size: ;
  font-style: italic;
  line-height: 1em;
  text-align: center;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
}


.samenvatting_blue {
display: block;
 background: #d4f1ff;
  border: 1px solid blue;
 /*font-size: 1em;*/
  text-align: justify;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.2em;
  padding-right: 2em;
  margin-left: auto;
  margin-right: auto;
}

.samenvatting_kop_orange {
  /*width:100%;*/ 
  display: block;
  background: #e68a00;
  color: #fff;
  font-size: 1.2em;
  font-style: italic;
  line-height: 1.2em;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  border: 1px solid Orange;
  margin-left: auto;
  margin-right: auto;
}


.samenvatting_orange {
display: block;
  background: #ffd699;
 /*font-size: 1em;*/
  text-align: justify;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  border: 1px solid Orange;
  margin-left: auto;
  margin-right: auto;
}

/* -------------------------------------------------- */
/*                  footers                           */
/* -------------------------------------------------- */

/*Internetlink*/

footer.internetlink {margin-left: 40px;}

footer.internetlink h3 {font-size: 14px; font-weight: bold;}

article.internetlink {
background-color: #FFFFA3;
} 

/*Addendum*/

footer.addendum {margin-left: 40px;}

footer.addendum h3 {font-size: 14px; font-weight: bold;}

article.addendum {background-color: #E6FF9B;
  /*font-family: Verdana, Seravek, Sans-Serif;*/
  line-height: 1.2em !important;
  /*border-top: 2px dashed green;
  border-bottom: 2px dashed green;*/

}

/* Quiz  */

footer.quiz {margin-left: 40px;}

footer.quiz h3 {font-size: 14px;font-weight: bold;}

/*.quiz button {width: 250px;text-align: left;}*/


/* Opgave  */

footer.opgave {margin-left: 40px;}

footer.opgave h3 {font-size: 14px;font-weight: bold;}

article.opgave {margin-left: 40px; border-left: 2px solid #e68a00;}

.opgave button {width: 350px;text-align: left;}


/* Copyright */

.copyright button {width: 16em; text-align:center; font-size: 14px;}

footer.copyright {
  float: left;
  margin: 0px 15px 15px;
  /*vertical-align: top;*/
  color: #555; 
  font-size: 11px;
}

.collapsible.copyright {width:60px; text-align: center;
  margin-top: 0.5em;outline: none;
  font-size: 14px; cursor: pointer;}

/* ----------------------------------------------------- */
/*                    Highlights                         */
* ------------------------------------------------------ */


.mark {
display: block;
  background-color: white;
  border-left: 1px solid red;
  padding-left: 0.4em;
 margin-right: auto;}



.highlight_kop {width:90%;
  background: red;
  color: white;
  font-family: Verdana, Seravek, Sans-Serif;
  font-size: 1em;
  font-style: italic;
  line-height: 1.2em;
  text-align: center;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  border: 1px solid red;
 /*margin-left: -18px;*/ margin-left: auto;
  margin-right: auto;}


.highlight {
width: 90%;
 font-size: 1em;
  text-align: justify;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1.2em;
  padding-right: 1.2em;
  border: 1px solid red;
 /*margin-left: -18px;*/ margin-left: auto;
 margin-right: auto;
}



/* -------------------------------------------------------- */
/*                   W3 Collapsible                         */
/*  https://www.w3schools.com/howto/howto_js_collapsible.asp*/
/*                    cvw 09-04-2019                        */
/* -------------------------------------------------------- */

/* Style the button that is used to open and close the collapsible content */
.collapsible {width:250px; text-align: left; margin-top: 0.5em;outline: none;
  font-size: 16px; cursor: pointer;}

.collapsible.samenvatting_kop_orange {width: 100%; /*width:250px;*/text-align: left;
  margin-top: 0.5em;outline: none; text-align: center; font-size: 16px; cursor: pointer;}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .collapsible:hover {/*background-color: #555; background-color:#dfe5e8;*/ background-color: #d2eafd;}

/* Style the collapsible content. Note: hidden by default */
.content {padding-right: 15px; padding-left: 15px; display: none; overflow: hidden;}

/* -------------------------------------------------------- */

#uitleg {color: midnightblue; background: #d4f1ff; text-align: left; font-size: 16px;font-weight: bold;/*margin-right:40px;*/}

article #uitleg {
  color: #13b3ff;
  background: #d4f1ff; 
  padding: 15px;  
  padding-bottom: 5px; 
  vertical-align: top;
  font-size: 14px;
  text-align: left;
  font-weight: normal;
}

article #uitleg h3 {
  margin: 0;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 0px; 
  border-bottom: 0;
  color: midnightblue;
}

article #formule {
  color: MidnightBlue; 
  background-color: #d4f1ff;
  width: 100%;
  padding:15px 15px 15px 15px;
}

article #formule h3 {
  color:#4daaf6; 
  padding-bottom: 7px; 
}

article #voorbeeld {border-collapse: collapse; width: 100%;}

article #voorbeeld header {text-align: center; font-size: 1.5em; font-style:italic; color: white; background-color: MidnightBlue ; padding-top:16px; border:1px solid black;
}

article #voorbeeld div {width: 100%; text-align: left; color: MidnightBlue; background-color:#d4f1ff; padding:10px 10px 10px 20px; border:1px solid black;
}


article #samenvatting {vertical-align:top; border-collapse: collapse; width: 100%;
}

article #samenvatting header {text-align: center; font-size: 1.5em; font-weight: bold;font-style:italic; color: white; background-color: MidnightBlue ; padding-top:16px; border:1px solid black;
}

article #samenvatting div {text-align: left; color: MidnightBlue; background-color: #d4f1ff; padding:10px 10px 10px 20px; border:1px solid black;
}

article #greenbox {
  color: #fff;
  background: #339933; 
  padding: 15px; 
  padding-bottom: 5px; 
  vertical-align: top;
  font-size: 14px;
  text-align: left;
  font-weight: normal;
}

article #opdracht {color: black; background-color: MistyRose;}


article ol.a {list-style-type:lower-alpha;}
article ol.b {list-style-type:decimal;}
article ol.c {list-style-type:lower-roman;}
article ul.d {list-style-type:disc;}

div.img {display: inline-block; margin-bottom: 1em;}

div.img p {margin-bottom: 1em; margin-top: 1em; font-style: italic;}

/* ------------------------------------------------------------ */
/*  color theme-blue generated by 				*/	
/*  https://www.w3schools.com/w3css/w3css_color_generator.asp 	*/
/*  09-02-2019                     				*/
/* ------------------------------------------------------------ */

.w3-theme-l5 {color:#000 !important; background-color:#f2f9fe !important}
.w3-theme-l4 {color:#000 !important; background-color:#d2eafd !important}
.w3-theme-l3 {color:#000 !important; background-color:#a6d4fa !important}
.w3-theme-l2 {color:#000 !important; background-color:#79bff8 !important}
.w3-theme-l1 {color:#fff !important; background-color:#4daaf6 !important}
.w3-theme-d1 {color:#fff !important; background-color:#0c87eb !important}
.w3-theme-d2 {color:#fff !important; background-color:#0b78d1 !important}
.w3-theme-d3 {color:#fff !important; background-color:#0a69b7 !important}
.w3-theme-d4 {color:#fff !important; background-color:#085a9d !important}
.w3-theme-d5 {color:#fff !important; background-color:#074b83 !important}

.w3-theme-light {color:#000 !important; background-color:#f2f9fe !important}
.w3-theme-dark {color:#fff !important; background-color:#074b83 !important}
.w3-theme-action {color:#fff !important; background-color:#074b83 !important}

.w3-theme {color:#fff !important; background-color:#2196f3 !important}
.w3-text-theme {color:#2196f3 !important}
.w3-border-theme {border-color:#2196f3 !important}

.w3-hover-theme:hover {color:#fff !important; background-color:#2196f3 !important}
.w3-hover-text-theme:hover {color:#2196f3 !important}
.w3-hover-border-theme:hover {border-color:#2196f3 !important}

/* ------------------------------------------------------------ */
/*  color theme-orange generated by 				*/	
/*  https://www.w3schools.com/w3css/w3css_color_generator.asp 	*/
/*  16-08-2019                     				*/
/* ------------------------------------------------------------ */

.w3-theme_orange-l5 {color:#000 !important; background-color:#fff9f0 !important}
.w3-theme_orange-l4 {color:#000 !important; background-color:#ffebcc !important}
.w3-theme_orange-l3 {color:#000 !important; background-color:#ffd699 !important}
.w3-theme_orange-l2 {color:#000 !important; background-color:#ffc266 !important}
.w3-theme_orange-l1 {color:#000 !important; background-color:#ffad33 !important}
.w3-theme_orange-d1 {color:#fff !important; background-color:#e68a00 !important}
.w3-theme_orange-d2 {color:#fff !important; background-color:#cc7a00 !important}
.w3-theme_orange-d3 {color:#fff !important; background-color:#b36b00 !important}
.w3-theme_orange-d4 {color:#fff !important; background-color:#995c00 !important}
.w3-theme_orange-d5 {color:#fff !important; background-color:#804d00 !important}

.w3-theme_orange-light {color:#000 !important; background-color:#fff9f0 !important}
.w3-theme_orange-dark {color:#fff !important; background-color:#804d00 !important}
.w3-theme_orange-action {color:#fff !important; background-color:#804d00 !important}

.w3-theme_orange {color:#000 !important; background-color:#ff9800 !important}
.w3-text-theme_orange {color:#ff9800 !important}
.w3-border-theme_orange {border-color:#ff9800 !important}

.w3-hover-theme_orange:hover {color:#000 !important; background-color:#ff9800 !important}
.w3-hover-text-theme_orange:hover {color:#ff9800 !important}
.w3-hover-border-theme_orange:hover {border-color:#ff9800 !important}

/* ------------------------------------------------------------ */
/*                 Math ML styles                               */
/* ------------------------------------------------------------ */

math, math[mode="inline"] {
  display: inline;
  font-family: CMSY10, CMEX10, Symbol, Times;
  font-style: normal;font-size: 130%;
}
math[mode="display"] {
  display: block;
  text-align: center;
  font-family: CMSY10, CMEX10, Symbol, Times;
  font-style: normal; font-size: 150%;
  margin-left: auto;
  margin-right: auto;
}
math *.[mathsize="small"] {
  font-size: 80%
}
math *.[mathsize="big"] {
  font-size:  125%
}