/* CSS volgens W3.CSS 4.10 by Jacques Bodewes   */
/* tbv webpresentatie Sinterklaas in Kampen 2022*/
/* -------------------------------------------- */

/* Body */
body    {
  padding: 0px 0px 0px 0px; 
  margin: 0px 0px 0px 0px; 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
  font-size: 1.0em;
  color: #555555;
  background-color: white; 
}
@media screen and (max-width: 260px) { 
  body{max-width: 260px}
}

h1             { color : #000000; font-size : 16pt; font-weight : normal; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h2             { color : #630460; font-size : 13pt; font-weight : bold; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h3             { color : #ffffff; font-size : 13pt; font-weight : bold; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h4             { color : #000000; font-size : 4pt; font-weight : normal; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}

*{box-sizing: border-box;}
.sitecontainer      { float: left; width: 100%; background-color: transparent;}

/* Topvak van de website met logo en naam */
.topvensterflex { float: left; width: 100%; background-color: transparent; display: flex;}
.topvensterflex > div {background-color: transparent;}
.topvenster-l {float: left; width: 15%; padding: 0px;  background-repeat: repeat-y; background-position: right top; border-radius: 0px}
.topvenster-m:after {content: ""; display: table; clear: both;}
.topvenster-m {float: left; width: 70%;  }
.topvenster-r {float: right; width: 15%; padding: 0px; background-repeat: repeat-y; background-position: left top; border-radius: 0px}
/* de kolommen -l & -r vervallen op telefoon en tablet      */
@media screen and (max-width:1000px) { 
  .topvenster-l, .topvenster-r {width: 0%; display: none}
  .topvenster-m {width: 100%;}
}

/* Titelvak Logo-Titel-Tijden */
.toptitelflex { float: left; width: 100%; background-color: transparent; display: flex;}
.toptitelflex > div {background-color: #ffffff;}
.toptitel-l {float: left; width: 13%; background-color: transparent; padding: 0px; border-radius: 0px}
.toptitel-m:after {content: ""; display: table; clear: both;}
.toptitel-m {float: left; width: 59%; background-color: transparent;  padding: 0px; border-radius: 0px}
.toptitel-r {float: left; width: 28%; background-color: transparent;  padding: 0px; border-radius: 0px}
/* De kolommen -l en -r verdvallen op telefoon en tablet */
@media screen and (max-width: 1000px) { 
  .toptitel-l {width: 0%; display: none}
  .toptitel-m, .toptitel-r {width: 100%; float: left}
  .toptitelflex {display: block}
}

/* Content vak voor de gehele website */
/* ---------------------------------- */
/* kolom -b is voor de werkelijke content van de website                         */
/* de beide zijkolommen -a & -c worden kleiner en vervallen voor telefoon/tablet */
.contentflex { float: left; width: 100%; background-color: transparent; display: flex;}
.contentflex > div {background-color: transparent;}
.contentcontainer-a {float: left; width: 15%; background-image: url("vulcontainerli.jpg"); background-repeat: repeat-y; background-position: right top; }
.contentcontainer-b:after {content: ""; display: table; clear: both;}
.contentcontainer-b {float: left; width: 70%; background-image: url("content-top.jpg"); background-repeat: repeat-x; background-position: left top; }
.contentcontainer-c {float: right; width: 15%; background-image: url("vulcontainerre.jpg"); background-repeat: repeat-y; background-position: left top; }
@media screen and (max-width: 1300px) { 
  .contentcontainer-a, .contentcontainer-c {width:   10%; }
  .contentcontainer-b {width: 80%; }
}
@media screen and (max-width: 1150px) { 
  .contentcontainer-a, .contentcontainer-c {width:   5%; }
  .contentcontainer-b {width: 90%; }
}
@media screen and (max-width: 1000px) { 
  .contentcontainer-a, .contentcontainer-c {width:   0%; display: none}
  .contentcontainer-b {width: 100%; }
}

/* Paars vak voor de menustructuur  */
/* -------------------------------------- */
.navigatieflex {float: left; width: 100%; background-color: #ffffff; display: flex;}
.navigatieflex > div {background-color: #630460; border-radius: 10px}
.navigatiemenu {float: left; width: 100%; background-color: #630460; margin:  0px 0px  0px 0px;}
@media screen and (max-width: 1000px) { 
  .navigatiemenu{width: 100%;}
}
/* opmaak voor de basis menustructuur */
.navigatie {list-style-type: none; margin: 10px 0px 10px 0px; padding: 0; overflow: hidden; border: 0px ;background-color: transparent; float: left; color: yellow}
.navigatie a { display: block; color: white; text-align: center; padding: 2px 7px 2px 7px ; text-decoration: none; font-size: 1.0em;border: solid 1px transparent; }
.navigatie a:hover:not(.active) { color: white; border: solid 1px white; border-radius: 6px;}
.navigatie a.active { color: #ff0000; background-color: transparent}
.navigatie li {
    display: inline-block; /* list blijft naast elkaar */
}
@media screen and (max-width: 1000px) { 
  .navigatie {font-size: 1.0em}
}
@media screen and (max-width: 1000px) { 
  .navigatie {float: left; margin: 0px 0px 0px 0px;}
  .navigatie li { display: block;  line-height: 1.8; font-size: 1.2em; text-align: center}
}

.linkactief             {color:#fddc00; }
.aanbieding             {color:white; }

/* Paars vak voor de submenustructuur  */
/* -------------------------------------- */
.navigatiesubflex {float: left; width: 100%; background-color: #ffffff; display: flex;}
.navigatiesubflex > div {background-color: #fddc00; border-radius: 10px}
.navigatiesubmenu {float: left; width: 100%; background-color: #fddc00; margin:  0px 0px  0px 0px;}
@media screen and (max-width: 1000px) { 
  .navigatiesubmenu{width: 100%;}
}
/* opmaak voor de basis submenustructuur */
.navigatiesub {list-style-type: none; margin: 3px 0px 1px 0px; padding: 0; overflow: hidden; border: 0px ;background-color: transparent; float: left; color: yellow}
.navigatiesub a { display: block; color: #630460; text-align: center; padding: 2px 3px 2px 3px ; text-decoration: none; font-size: 0.9em;border: solid 1px transparent; }
.navigatiesub a:hover:not(.active) { color: white; border: solid 1px white; border-radius: 6px;}
.navigatiesub a.active { color: #630460; background-color: transparent}
.navigatiesub li {
    display: inline-block; /* list blijft naast elkaar */
}
@media screen and (max-width: 1000px) { 
  .navigatiesub {font-size: 1.0em}
}
@media screen and (max-width: 1000px) { 
  .navigatiesub {float: left; margin: 0px 0px 0px 0px;}
  .navigatiesub li { display: block;  line-height: 1.8; font-size: 1.2em; text-align: center}
}

a.contentlink:link     {font-size: 1.0em; color: #00cc00; text-align: left; text-decoration: none;}
a.contentlink:hover    {font-size: 1.0em; color: #00cc00; text-align: left; text-decoration: none;}
a.contentlink:visited  {font-size: 1.0em; color: #00cc00; text-align: left; text-decoration: none;}
a.contentlink:active   {font-size: 1.0em; color: #00cc00; text-align: left; text-decoration: none;}

a.speciallink:link     {font-size: 1.0em; color: #00cc00; text-align: right; text-decoration: none; margin: 0px 10px 10px 0px;}
a.speciallink:hover    {font-size: 1.0em; color: #00cc00; text-align: right; text-decoration: none; margin: 0px 10px 10px 0px;}
a.speciallink:visited  {font-size: 1.0em; color: #00cc00; text-align: right; text-decoration: none; margin: 0px 10px 10px 0px;}
a.speciallink:active   {font-size: 1.0em; color: #00cc00; text-align: right; text-decoration: none; margin: 0px 10px 10px 0px;}

/* enkelvak 100% basis */
/*---------------*/
.enkelvak             {float: left; width: 100%; background-color: transparent; padding: 0px 10px 10px 10px}
.enkelvakrand         {float: left; width: 100%; background-color: transparent; border: 1px; padding: 0px 10px 10px 10px}
.mededelingvak        {float: left; width: 100%; background-color: red; border: 1px; border-radius: 10px; padding: 0px 10px 10px 10px; color: white;}

/* tweeluikc 50/50%  */
.tweeluikcflex {float: left; width: 100%; background-color: transparent; display: flex;}
.tweeluikcflex > div {background-color: transparent;}
.tweeluikc-1 {float: left; width: 50%; background-color: transparent; } 
.tweeluikc-2 {float: left; width: 50%; background-color: transparent; }
@media screen and (max-width: 1000px) { 
  .tweeluikc-1, .tweeluikc-2 {width: 100%; float: left;}
  .tweeluikcflex {display: block}
}

/* triovak 33% -33% -33% */
/* --------------------- */
.triovakflex {float: left; width: 100%; background-color: transparent; display: flex;}
.triovakflex > div {background-color: transparent;}
.triovak-1, .triovak-2, .triovak-3  {float: left; width: 33.3333%; padding: 5px 5px 5px 5px;  }
@media screen and (max-width: 800px) 
{ .triovak-1, .triovak-2, .triovak-3 {width: 100%; float: left;}
  .triovakflex {display: block}
}

/* tweeluikc openingstijden */
.opening {float: left; width: 100%; background-color: transparent; display: flex;}
.opening > div {background-color: transparent;}
.opening-1          {float: left; width: 50%; text-align: right; }
.opening-2          {float: left; width: 50%; text-align: left; padding: 0px 0px 0px 5px; }

.prijs {float: left; width: 100%; background-color: transparent; display: flex;}
.prijs > div {background-color: transparent;}
.prijs-1            {float: left; width: 70%; text-align: left; }
.prijs-2            {float: left; width: 30%; text-align: right; padding: 0px 0px 0px 5px; }

.triovakafbeelding  {width: 100%; border: 1px solid grey; border-radius: 10px; margin: 0px 0px 15px 0px;}
.vul-f              {background-image: url("vul-f.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-r              {background-image: url("vul-rood.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-paars          {background-image: url("vul-paars.jpg"); background-repeat: repeat-y; background-position: left top; color: white; line-height: 1.2; }
.tekstcentreer      {text-align: center;}
.tekst10px          {font-size: 10px;}

.border10           {border-radius: 10px; border: 1px solid #630460; }
/* .rand10px           {border: 1px solid #630460; margin: 5px; padding: 0px } */

.img_centreer         {
  display: block;
  margin-left: 22%;
  margin-right: 22%;
  width: 56%;
}
.gebruikt-container   {position: relative; width: 100%; text-align: left; color: white;}
.gebruikt-afbeelding  {border-radius: 10px; display: block; transition: .5s ease; border: 1px solid #630460; }

a.leesmeerlink:link      {font-size: 0.9em; color: #e21b06; text-align: left; text-decoration: none; border: 1px solid; border-color: #e21b06; border-radius: 5px; padding: 2px 8px 2px 8px}
a.leesmeerlink:hover     {font-size: 0.9em; color: #e21b06; text-align: left; text-decoration: none; border: 1px solid; border-color: #e21b06; border-radius: 5px; padding: 2px 8px 2px 8px}
a.leesmeerlink:visited   {font-size: 0.9em; color: #e21b06; text-align: left; text-decoration: none; border: 1px solid; border-color: #e21b06; border-radius: 5px; padding: 2px 8px 2px 8px}
a.leesmeerlink:active    {font-size: 0.9em; color: #e21b06; text-align: left; text-decoration: none; border: 1px solid; border-color: #e21b06; border-radius: 5px; padding: 2px 8px 2px 8px}

a.refreshlink:link      {font-size: 0.9em; color: #00aa00; text-align: left; text-decoration: none; border: 1px solid; border-color: #00aa00; border-radius: 5px; padding: 2px 8px 2px 8px}
a.refreshlink:hover     {font-size: 0.9em; color: #00aa00; text-align: left; text-decoration: none; border: 1px solid; border-color: #00aa00; border-radius: 5px; padding: 2px 8px 2px 8px}
a.refreshlink:visited   {font-size: 0.9em; color: #00aa00; text-align: left; text-decoration: none; border: 1px solid; border-color: #00aa00; border-radius: 5px; padding: 2px 8px 2px 8px}
a.refreshlink:active    {font-size: 0.9em; color: #00aa00; text-align: left; text-decoration: none; border: 1px solid; border-color: #00aa00; border-radius: 5px; padding: 2px 8px 2px 8px}

a.resetlink:link      {font-size: 0.9em; color: #aa0000; text-align: left; text-decoration: none; border: 1px solid; border-color: #aa0000; border-radius: 5px; padding: 2px 8px 2px 8px}
a.resetlink:hover     {font-size: 0.9em; color: #aa0000; text-align: left; text-decoration: none; border: 1px solid; border-color: #aa0000; border-radius: 5px; padding: 2px 8px 2px 8px}
a.resetlink:visited   {font-size: 0.9em; color: #aa0000; text-align: left; text-decoration: none; border: 1px solid; border-color: #aa0000; border-radius: 5px; padding: 2px 8px 2px 8px}
a.resetlink:active    {font-size: 0.9em; color: #aa0000; text-align: left; text-decoration: none; border: 1px solid; border-color: #aa0000; border-radius: 5px; padding: 2px 8px 2px 8px}