*{margin:0;padding:0;box-sizing:border-box}
body{background-color:#3D2020;color:#000;font-family:arial,helvetica,sans-serif;font-size:1em}
a{text-decoration:none;color:#ff0}
a:hover{text-decoration:none;color:#0f0}
p{color:#fff;margin-left:2em;font-style:italic;font-family:georgia,serif;font-size:1.1em;line-height:1.45em}
h1{margin-top:1em;color:#fff;font-family:"trebuchet ms",helvetica,sans-serif;font-size:2.4em;font-weight:bold;text-align:center}
h2{color:#fff;font-family:"trebuchet ms",helvetica,sans-serif;font-size:1.2em;font-weight:bolder;text-align:center}
h3{color:#fc3;font-size:1.2em;font-weight:bolder;font-variant:small-caps;margin-left:2em}
h4{color:#3f6;font-family:"trebuchet ms",helvetica,sans-serif;font-size:1.4em;font-weight:bolder;text-align:center}
h5{color:#f00;font-size:1.2em;text-decoration:none}
h6{color:#fc0;font-size:1em;text-decoration:none}
h6.kleurA{color:#9f9;font-size:1em;text-decoration:none}
h6.kleurB{color:#39f;font-size:1em;text-decoration:none}
p.voorbeeld{color:#fff;font-size:1.4em;text-align:center}
p.botjes{font-family:arial;font-size:1.2em;text-decoration:none;font-style:normal}

img{max-width:100%;height:auto}
#inhoudtekstvak img{max-width:100%!important;height:auto!important}

#websitevak{background-color:blue;margin:0 auto;width:100%;border-top:none}
#middenstuk{margin:0 auto;width:100%}

/* ===== BALK BOVEN ===== */
#balkboven{background-color:#fffeee;display:flex;align-items:center;justify-content:space-between;padding:1em;width:100%;gap:.6em}
#balkboven .balk{flex:1;min-width:0}
#balkboven .links,#balkboven .rechts{float:none;margin:0}
#balkboven .links{text-align:left}
#balkboven .midden{flex:1.4;text-align:center}
#balkboven .rechts{text-align:right}
#balkboven:after{content:" ";display:table;clear:both}
#balkboven a{width:auto;max-width:none;margin:0}
.logo{max-height:200px;width:auto;display:inline-block}

.support{text-align:right;font-size:1em}
.support-inner{display:inline-block;text-align:left}
.support ul{list-style-type:disc;list-style-position:inside;padding-left:0;margin:.3em 0 0 0}
.support li{margin:0;padding:0}

/* ===== MENU ===== */
#menu{background-color:#b22222;font-family:"trebuchet ms",helvetica,sans-serif;font-variant:small-caps;letter-spacing:.1em}
#menuknop{border-bottom:1px solid #fff;color:#fff;display:none;height:auto;font-size:1.1em;font-weight:bold;padding:.9em .6em .9em 1.2em;text-align:left;text-decoration:none;background-color:#b22222}
#menu-icoon{display:inline-block;width:22px;padding:0 .5em 0 0;position:relative}
#menu-icoon span{background-color:#fff;height:2px;margin-top:3px;width:100%;display:block}
#menu ul{list-style-type:none;margin:.05em auto}

#hoofdmenu{display:none;margin:0 auto;max-width:1200px;width:90%}
@media screen and (min-width:801px){#hoofdmenu{display:block!important}}

#hoofdmenu>li{display:inline-block;position:relative}
#hoofdmenu>li>a{background-color:transparent;color:#fff;display:block;font-size:1.4em;padding:.8em .4em .6em;font-weight:bold;text-align:left;text-decoration:none}
#hoofdmenu>li>a:hover{color:#ff0}

#hoofdmenu>li:hover ul{display:block;padding-top:5%;position:absolute;top:90%;z-index:2;text-align:center}
@media screen and (min-width:400px) and (max-width:800px){#hoofdmenu>li:hover ul{padding-top:0;position:absolute;top:0;left:30%}}
@media screen and (max-width:400px){#hoofdmenu>li:hover ul{padding-top:0;position:absolute;top:0;right:5%}}

.submenu>ul{display:none}
.submenu>ul>li>a{background-color:#390;border-top:1px solid lightgrey;color:#fff;display:block;font-size:1.2em;padding:1em .75em 1em .5em;text-align:left;text-decoration:none;width:14em}
@media screen and (max-width:800px){.submenu>ul>li>a{background-color:#390;border-bottom:1px solid lightgrey;border-top:0 none transparent;color:#fff;padding:.6em 1em;width:auto}}
.submenu>ul>li:first-child a{border-top:0 none transparent}
.submenu>ul>li>a:hover{background-color:#ff9;color:#003}

/* ===== LAYOUT ===== */
#hoofdvak{background-color:#3D2020;position:relative;z-index:1}
#hoofdvak:before{content:" ";width:80%;position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(to right,#00f,#1e90ff,#00f);z-index:-1}
#hoofdvak:after{clear:both;content:" ";display:table}

#tekstvak{background:linear-gradient(to right,#00f,#1e90ff,#00f);float:left;position:relative;left:0;width:80%;font-size:.95em;line-height:1.3em;margin-bottom:1em;padding-top:.25em;color:midnightblue}
#inhoudtekstvak{border-right:1px solid darkgrey;padding:1em;min-height:100vh}

#tekstvak ul,#tekstvak ol{font-size:.95em;line-height:1.3em;margin-bottom:1em;margin-left:2em}
#tekstvak ul li,#tekstvak ol li{left:2em;padding-right:2em;position:relative}

#extravak{float:left;position:relative;left:0;width:20%;background-color:#3D2020;z-index:2}
#inhoudextravak{margin:1em auto;padding:1em}
#inhoudextravak>h3{color:#fff;font-size:.7em;padding-bottom:.6em}
#inhoudextravak>p{color:#000;font-weight:bolder;font-size:.8em;padding:.2em .2em .6em}

/* ===== FOOTER ===== */
#balkbeneden{background-color:#fffeee;clear:both;width:100%}
#inhoudbalkbeneden{padding:2em 0;text-align:center;width:100%}
#inhoudbalkbeneden span{border-right:1px solid darkblue;color:#0039ff;display:inline-block;font-size:1.2em;margin-bottom:2em;padding:.2em 1.5em;white-space:nowrap}
#inhoudbalkbeneden span:nth-child(3){border-right:0 none transparent}
#inhoudbalkbeneden span a,#inhoudbalkbeneden a{color:#0039ff;text-decoration:none;font-size:1.4em}
#inhoudbalkbeneden a:hover{color:#ff8000;text-decoration:none}

/* ===== UTILS ===== */
.clearfix:before,.clearfix:after{clear:both;content:" ";display:table}
.links{float:left;margin:.2em .8em .6em 0}
.rechts{float:right;margin:.2em 0 .6em .8em}
.gecentreerd{display:block;margin:0 auto 1em}
.socialmedia{border:0 none;margin:.2em .8em}

li.server{color:#ccc;list-style:none}
@media screen and (max-width:800px){li.server{text-align:left}}
li.server.status{display:flex;align-items:center;gap:.5em}
li.server .label{color:#ccc}
li.server .online{color:#3f6;font-size:1.4em;font-weight:bolder}

/* ===== ITEMS/TABLES ===== */
@media screen and (min-width:800px){
  .items{display:flex;justify-content:center;gap:100px}
  table{border-collapse:collapse;margin-left:auto;margin-right:auto;width:99%}
}
@media screen and (max-width:799px){
  .items{display:flex;justify-content:center;gap:10px;flex-wrap:wrap}
  table{border-collapse:collapse;margin-left:auto;margin-right:auto;width:100%}
}
th,td{padding:10px 25px;text-align:left;font-family:"trebuchet ms",helvetica,sans-serif;font-size:1.2em;color:#0f0;width:150px;height:auto;border-radius:10px}

/* botjes tabel */
TABLE.tabelkleur{border-collapse:separate;border-spacing:2px}
TABLE.tabelkleur,TD.rij{border:solid 1px #999}
TD.rij{width:75px;color:#000;padding:2px;text-align:center}
TD.onderwerp{width:75px;height:30px;color:#000;padding:1px;text-align:center}
.rijL{background-color:#f00}
.rijkleur{background-color:aqua}
.tabelkleur{background-color:yellow}

.regels{color:#0f0;font-size:1.1em;text-align:left}
.commando{color:#ff0}
.naam{color:#0f0}

/* ===== PAKKET ===== */
.pakket{display:grid;grid-template-columns:repeat(3,300px);gap:20px;justify-content:center}
@media (max-width:1000px){.pakket{grid-template-columns:repeat(2,240px)}}
@media (max-width:700px){.pakket{grid-template-columns:1fr;max-width:340px;margin:0 auto}}

.pakket-grid{display:grid;grid-template-columns:repeat(3,175px);gap:4px;justify-content:start;align-items:start;margin:0;padding:0}
.pakket-kaart{display:block;text-decoration:none;background:transparent;border:0;padding:0}
.pakket-kaart img{width:100%;height:auto;display:block;border-radius:10px}
.pakket-kaart:hover img{transform:translateY(-2px);transition:transform .12s ease}

/* ===== WIDGETS BLOK ===== */
.widgets-2{display:flex;gap:8px;justify-content:center;align-items:flex-start;flex-wrap:nowrap}
.widget{flex:0 0 calc(50% - 4px);text-align:center}
.widget>img{width:100%;height:auto;display:block;padding:4px;border:1px solid grey;margin:4px auto}
.widget-titel{margin:.4em 0 .2em 0;text-align:center;margin-left:0}
.widget-list{list-style-position:inside;display:inline-block;text-align:left;margin:.2em 0 0 0;padding:0;color:#fff}
@media (max-width:700px){.widgets-2{flex-wrap:wrap}.widget{flex:0 0 100%}}

/* ===== RESPONSIVE FIXES ===== */
@media screen and (max-width:1400px){
  #tekstvak{width:76%}
  #extravak{width:24%}
  #hoofdvak:before{width:76%}
  .logo{max-height:170px}
}
@media screen and (max-width:1100px){
  #tekstvak{width:72%}
  #extravak{width:28%}
  #hoofdvak:before{width:72%}
  .logo{max-height:140px}
  .support{font-size:.9em}
}

@media screen and (max-width:800px){
  #menuknop{display:block!important}
  #hoofdmenu{width:100%}
  #hoofdmenu>li{display:block}
  #hoofdmenu>li>a{border-bottom:1px solid lightgrey;display:block;padding:.6em 1.5em;color:#fff}
  #hoofdmenu>li>a:hover{color:#3c0}

  #hoofdvak{background-color:#3D2020}
  #hoofdvak:before{display:none}
  #tekstvak{float:none;width:100%;margin-bottom:0}
  #inhoudtekstvak{border-right:none;min-height:auto}
  #extravak{float:none;width:100%;background-color:#3D2020}

  #tekstvak ul,#tekstvak ol{margin-left:1.2em}
  #tekstvak ul li,#tekstvak ol li{left:0;padding-right:0;position:static}

  #inhoudbalkbeneden span{border-bottom:1px dotted #fff;border-right:0 none transparent;display:block;font-size:.7em;margin-bottom:1em;padding:.5em 0;white-space:normal}
  #inhoudbalkbeneden span a,#inhoudbalkbeneden a{font-size:1.2em}
}

@media screen and (max-width:700px){
  #balkboven{flex-direction:column;align-items:center;gap:.5em;padding:.6em}
  #balkboven .links,#balkboven .midden,#balkboven .rechts{text-align:center}
  .logo{max-height:140px}
  .support{font-size:.85em;text-align:center}
  .support-inner{text-align:left}
  .pakket-grid{grid-template-columns:repeat(3,minmax(70px,1fr));justify-content:center;max-width:360px}

  h1{font-size:1.6em;margin-top:.6em}
  h2{font-size:1.05em}
}

@media screen and (max-width:400px){
  #hoofdmenu>li:hover ul{left:auto;right:5%}
}