/* CSS volgens W3.CSS 4.10 by Jacques Bodewes   */
/* tbv webpresentatie Zoutkamer Kampen 2019     */
/* -------------------------------------------- */

/* 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 : #000000; font-size : 13pt; font-weight : normal; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h3             { color : #ffffff; font-size : 13pt; font-weight : normal; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h4             { color : #000000; font-size : 11pt; font-weight : normal; background-color : transparent; text-decoration : none; font-family: Verdana, Arial, Helvetica, sans-serif;}

.afbeelding-home {float: left; border: 1px solid darkblue; border-radius: 10px; padding: 0px; margin: 10px 0px 15px 0px;}
.afbeelding-volvak  {width: 100%; border: 1px solid grey; border-radius: 10px; margin: 0px; padding: 0px; margin: 10px 0px 0px 0px;}


.facebook     {width: 100%; height: 500px; border:none; overflow:hidden; }

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

/* Donkergrijze topvak voor optionele info (tel + route) */
/*-------------------------------------------------------*/
.topregelflex { float: left; width: 100%; background-color: transparent; display: flex;}
.topregelflex > div {background-color: #333333;}
.topregel-l {float: left; width: 15%; background-color: transparent; padding: 0px; border-radius: 0px}
.topregel-m:after {content: ""; display: table; clear: both;}
.topregel-m {float: left; width: 70%; background-color: transparent;  text-align: right; font-size: 0.9em; line-height: 1.5; padding: 10px 0px 10px 0px}
.topregel-r {float: right; width: 15%; background-color: transparent;  padding: 0px; border-radius: 0px}
/* De kolommen -l en -r verdvallen op telefoon en tablet */
@media screen and (max-width: 1000px) { 
  .topregel-l, .topvenster-r {width: 0%; display: none}
  .topregel-m {width: 100%;}
}
/* opmaak navigatie voor optionele info */
a.topregellink:link     {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none; white-space: nowrap; padding: 0px 0px 0px 8px; }
a.topregellink:hover    {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none; white-space: nowrap; padding: 0px 0px 0px 8px; }
a.topregellink:visited  {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none; white-space: nowrap; padding: 0px 0px 0px 8px; }
a.topregellink:active   {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none; white-space: nowrap; padding: 0px 0px 0px 8px; }

/* Topvak van de website met afbeelding zoutbergen en kamer */
/*--------------------------------------------------------- */
.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%;}
}

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

/* Donkergrijs vak voor de menustructuur  */
/* -------------------------------------- */
.navigatieflex {float: left; width: 100%; background-color: transparent; display: flex;}
.navigatieflex > div {background-color: #333333;}
.navigatiemenu {float: left; width: 100%; background-color: #333333; 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}
.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: #cccccc; border: solid 1px white;}
.navigatie a.active { color: white; background-color: #666666}
.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}
}

.waarbenikflex {float: left; width: 100%; background-color: cccccc; display: flex;}
.waarbenikflex > div {background-color: #cccccc;}
.waarbenikmenu {float: left; width: 100%; padding:  0px 0px 0px 10px; font-size: 11px; font-weight: normal;}

/* opmaak voor de basis waarbenik tructuur */
a.waarbenik:link     {font-size: 11px; color: #ffffff; text-align: left; text-decoration: none; font-weight: normal;}
a.waarbenik:hover    {font-size: 11px; color: #dddddd; text-align: left; text-decoration: none; font-weight: normal;}
a.waarbenik:visited  {font-size: 11px; color: #ffffff; text-align: left; text-decoration: none; font-weight: normal;}
a.waarbenik:active   {font-size: 11px; color: #ffffff; text-align: left; text-decoration: none; font-weight: normal;}

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

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

a.speciallink:link     {font-size: 1.0em; color: #000099; text-align: left; text-decoration: none;}
a.speciallink:hover    {font-size: 1.0em; color: #000033; text-align: left; text-decoration: none;}
a.speciallink:visited  {font-size: 1.0em; color: #000099; text-align: left; text-decoration: none;}
a.speciallink:active   {font-size: 1.0em; color: #000099; text-align: left; text-decoration: none;}

a.coronalink:link     {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none;}
a.coronalink:hover    {font-size: 1.0em; color: #aaffaa; text-align: left; text-decoration: none;}
a.coronalink:visited  {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none;}
a.coronalink:active   {font-size: 1.0em; color: #ffffff; text-align: left; text-decoration: none;}


/* enkelvak 100% basis */
/*---------------*/
.enkelvak {float: left; width: 100%; background-color: transparent; padding: 0px 10px 10px 10px}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  */
.coronavak_1 {float: left; width: 100%; background-color: #00ffff; padding: 0px 10px 10px 10px; font-size: 1.0em; color: #0000ff;}

/* ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^  */

/* dubbelvak50-50 50% - 50% */
.dubbelvak50-50flex {float: left; width: 100%; background-color: transparent; display: flex;}
.dubbelvak50-50flex > div {background-color: transparent;}
.dubbelvak50-50-1, .dubbelvak50-50-2 {float: left; width: 50%; background-image: url("vulwit.jpg"); background-repeat: repeat-y; background-position: left top; border: 1px solid tranparent; padding: 10px 10px 10px 10px}
@media screen and (max-width: 800px) { 
  .dubbelvak50-50-1, .dubbelvak50-50-2 {width: 100%; float: left;}
  .dubbelvak50-50flex {display: block}
}


/* vak4 4x25% */
.vak4flex {float: left; width: 100%; background-color: transparent; display: flex;}
.vak4flex > div {background-color: transparent;}
.vak4-1, .vak4-2, .vak4-3, .vak4-4 {float: left; width: 25%; background-image: url("vulwit.jpg"); background-repeat: repeat-y; background-position: left top; border: 1px solid tranparent; padding: 10px 10px 10px 10px}

@media screen and (max-width: 800px) { 
  .vak4-1, .vak4-2, .vak4-3, .vak4-4 {width: 100%; float: left;}
  .vak4flex {display: block}
}


/* dubbelvak33-66 33% - 66% */
/* ------------------------ */
.dubbelvak33-66flex {float: left; width: 100%; background-color: transparent; display: flex;}
.dubbelvak33-66flex > div {background-color: transparent;}
.dubbelvak33-66-1 {float: left; width: 33.3333%; background-image: url("vulwit.jpg"); background-repeat: repeat-y; background-position: left top; border: 1px solid lightgrey; padding: 25px 15px 25px 15px; } 
.dubbelvak33-66-2 {float: left; width: 66.6666%; background-image: url("vulwit.jpg"); background-repeat: repeat-y; background-position: left top; border: 1px solid lightgrey; padding: 25px 15px 25px 15px; }
@media screen and (max-width: 800px) { 
  .dubbelvak33-66-1, .dubbelvak33-66-2 {width: 100%; float: left;}
  .dubbelvak33-66flex {display: block}
}

/* tweeluikc 50/50%  is deze nog in gebruik? */
.tweeluikcflex {float: left; width: 100%; background-color: transparent; display: flex;}
.tweeluikcflex > div {background-color: transparent;}
.tweeluikc-1 {float: left; width: 50%; background-image: url("vulgry.jpg"); background-repeat: repeat-y; background-position: left top; text-align: center;} 
.tweeluikc-2 {float: left; width: 50%; background-image: url("vulgry.jpg"); background-repeat: repeat-y; background-position: left top; text-align: center;}
@media screen and (max-width: 800px) { 
  .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; background-image: url("vulwit.jpg"); background-repeat: repeat-y; background-position: left top; }
@media screen and (max-width: 800px) 
{ .triovak-1, .triovak-2, .triovak-3 {width: 100%; float: left;}
  .triovakflex {display: block}
}

/* Voetnoot pagina */
/*-------------------*/
/* de drie basiskolommen voor voetnoot  */
.voetflex { float: left; width: 100%; background-color: transparent; display: flex;}
.voetflex > div {background-color: transparent;}
.voetvenster-a, .voetvenster-c {float: left; width: 15%; background-image: url("vul-03.jpg"); background-repeat: repeat-y; background-position: left top; border-top: 1px solid white;}
.voetvenster-b:after {content: ""; display: table; clear: both;}
.voetvenster-b {float: left; width: 70%; background-image: url("vul-03.jpg"); background-repeat: repeat-y; background-position: left top; border-top: 1px solid white;}
@media screen and (max-width: 1300px) { 
  .voetvenster-a, .voetvenster-c {width: 10%; }
  .voetvenster-b    {width: 80%; }
}
@media screen and (max-width: 1150px) { 
  .voetvenster-a, .voetvenster-c {width: 5%; }
  .voetvenster-b    {width: 90%; }
}
@media screen and (max-width: 800px) { 
  .voetvenster-a, .voetvenster-c {width: 0%; display: none}
  .voetvenster-b    {width: 100%; }
}

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

.informatie         {font-size: 12px; color:#555555; text-align: center; line-height: 1.5;}
.triovakafbeelding  {width: 100%; border: 1px solid grey; border-radius: 10px; margin: 0px 0px 15px 0px;}
.aangesloten        {width: 100%}
.vul-f              {background-image: url("vul-f.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-d              {background-image: url("vul-d.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-b              {background-image: url("vul-b.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-9              {background-image: url("vul-9.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-7              {background-image: url("vul-7.jpg"); background-repeat: repeat-y; background-position: left top; color: black; line-height: 1.2; }
.vul-5              {background-image: url("vul-5.jpg"); background-repeat: repeat-y; background-position: left top; color: white; line-height: 1.2; }
.vul-3              {background-image: url("vul-3.jpg"); background-repeat: repeat-y; background-position: left top; color: white; line-height: 1.2; }
.vul-1              {background-image: url("vul-1.jpg"); background-repeat: repeat-y; background-position: left top; color: white; line-height: 1.2; }
.contentvoorblad    {text-align: justify; padding: 20px 40px 20px 40px; font-size: 1.2em; color: white; line-height: 1.8;}
.padding10          {padding: 10px 10px 10px 10px;}
.tekstwit           {color: white; line-height: 1.5;}
.tekstdonkergrijs   {color: #555555; line-height: 1.5;}
.tekstzwart         {color: black; line-height: 1.5; }
.tekstcentreer      {text-align: center;}
.tekst8px           {font-size: 8px;}

.rand10px           {border: 1px solid #666666; margin: 5px; padding: 0px }


/* -------------------------------------------- */
/* Formulier */
.form-container {float: left; width: 100%; padding: 0px 0px 0px 10px; background-color: #999999; margin-top: 10px; border: 1px solid; border-radius:10px}
h1.formulier    {color: #333333; font-size: 12pt; font-weight: bold; background-color: transparent; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h2.formulier    {color: #333333; font-size: 10pt; font-weight: bold; background-color: transparent; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h3.formulier    {color: #333333; font-size: 10pt; font-weight: normal; background-color: transparent; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}
h4.formulier    {color: #aa0000; font-size: 10pt; font-weight: normal; background-color: transparent; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}

.flex-form      {float: left; width: 100%; background-color: transparent; display: flex;}
.flex-form > div {background-color: transparent; }

.form-rij { content: ""; display: table; clear: both; }
.form-titel {float: left; width: 100%; background-color: transparent; margin-bottom: 0px; padding-left:0px;}
.form-invoer {float: left; width: 100%; background-color: transparent; margin-bottom: 15px}

h1.foutmelding {color: red; font-size: 12pt; font-weight: normal; background-color: transparent; text-decoration: none; font-family: Verdana, Arial, Helvetica, sans-serif;}

input[type=text], select, textarea {
    width: 95%;
    padding: 5px;
    border: 0px solid #cccccc;
    border-radius: 0px;
   resize: vertical;
}

a.slidelink:link     {font-size:12px; color: #000000; text-align: left; text-decoration: none;}
a.slidelink:hover    {font-size:12px; color: #555555; text-align: left; text-decoration: none;}
a.slidelink:visited  {font-size:12px; color: #000000; text-align: left; text-decoration: none;}
a.slidelink:active   {font-size:12px; color: #000000; text-align: left; text-decoration: none;}