/* ----------------------------------------------- */
/*            W3 styles Quantumwereld   	   */
/*            cvw 18-10-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;}

h3 {color: #0a69b7;}

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

.hidden {display: none;}

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


hr { 
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
} 

/* ------------------------------------------------------------*/
/* 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;}
#mySidebar a.active {background-color:#e6e6e6;color:#ffffff !important;}

#mySidenav {font-family:"Segoe UI",Verdana, sans-serif;font-size: 14px; background: #48c4ff; 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;}

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

/*------------------------------------------------------------ */
/*                Header                                      */
/*------------------------------------------------------------ */

#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;
}


/* 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;}


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

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


aside {
  float: left;
  width: 25%;
  margin: 0; 
  margin-right: 30px;
  padding: 12px;
  vertical-align: top;
  font-size: 11px;
}

article {
  float: left;
  width: 70%;
  padding: 12px;
  font-size: 16px;  
}

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

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

#uitleg {
  color: midnightblue;
  background: #d4f1ff;
  text-align: left;
  font-weight: bold;
  font-size: 14px;
  margin-top: 16px;
  margin-bottom: 16px;
}

aside #uitleg h3 {
  color: #0a69b7;
/*text-align: center;*/
  font-weight: bold;
  font-size: 16px;
  margin-bottom: 0px;
}

aside #valkuil {
border-collapse: collapse; width: 100%;
}

aside #valkuil h4 {
text-align: center; font-size: 1.5em; font-style:italic; color: white; background-color: Red ; padding: 3px 40px 2px 40px; border:1px solid black; margin-bottom: 0px;
}

aside #valkuil p {margin-top: 0px;
text-align: left; color: #555; background-color: white; padding:7px 3px 7px 7px; border:1px solid black;
}

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: 14px;
  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;
}

aside #begrippen {vertical-align:top; border-collapse: collapse; width: 100%;
}

aside #begrippen 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;
}

aside #begrippen div {text-align: left; font-size: 16px; color: MidnightBlue; background-color: #d4f1ff; padding:7px 7px 7px 10px; 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 ul.a {list-style-type:disc;}
article ol.b {list-style-type:lower-alpha;}
article ol.c {list-style-type:decimal;}
article ol.d {list-style-type:lower-roman;
}
div.img {display: inline-block; margin-bottom: 1em;}

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

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

/* 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;}

/* ------------------------------------------------------------ */
/*  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}

/* -------------------------------------------------------- */
/*                   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: 0em;outline: none;
  font-size: 12px; 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;}

/* ------------------------------------------------------------ */
/*          stylesheet Handreiking modellleren                  */
/* ------------------------------------------------------------ */

div.modelcontent 
     {border-left: 1px solid DodgerBlue;
}

button.modellinks {
     width: 50%;
     padding-left: 20px;
     text-align: left; 
}

p.bblue 
   {
   color:#0a6fc2;
   font-weight: bold;
   }

.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;}