/***************************************************************************
*    IEstyle.css Stylesheet voor IE 4.x en hoger met minimale              * 
*    resolutie van 800*600 of beter                                        *
*  (C) Copyright 1999-2025 Johan van Soest design_(at)_vansoest_(dot)_it   * 
*    jan 2001 added dynamic IE5.x styles                                   *
*    jun 2002 removed italic from hover for easier reading                 *
*    jun 2013 Twitter and box style ==> renamed for WebHalla CMS           *
*    jan 2014 Highlight style                                              *
*    feb 2018 Bug in chrome 64 on android does not load body img ==> css   *
*    Apr 2020 added buzzword table style                                   *
*    Aug 2020 article tag style                                            *
*    May 2021 QRTooltip style                                              *
***************************************************************************/
html{
  scroll-behavior:smooth;
}

body  {
  font-size: 100%;
  font-family : Arial, Verdana, Helvetica, sans-serif;
	background : #ffffff;
	background-color : #ffffff;
  background-image: url("https://vansoest.it/images/backgrnd.gif");
}

h1  { font-size: 145%; }
h2  { font-size: 125%; }
h3  { font-size: 110%; }
h4  { font-size: 100%; }
h5  { font-size: 095%; }
h6  { font-size: 075%; }

A:visited {
  background : transparent;
  color      : black;
}
A:link {
  background : transparent;
  color      : blue;
}
A:hover {
  background : #ffa;
  color      : red;
}

A[href$=".doc"] ,a[href$=".docx"] {
  background: url(../Image/doc.png) no-repeat scroll left center;
  padding: 2px 0 2px 22px;
}
A[href$=".xls"] ,a[href$=".xlsx"] {
  background: url(../Image/xls.png) no-repeat scroll left center;
  padding: 2px 0 2px 22px;
}
A[href$=".pdf"] {
  background: url(../Image/pdf.png) no-repeat scroll left center;
  padding: 2px 0 2px 22px;
}
A[href^="http://"]:after, 
A[href^="https://"]:after {
  content: "";
  background: url(../Image/external.png) center right no-repeat;
  padding-right: 1em;
}

A[href*="//vansoest.it"]:after {
  content: '';
  margin: 0;
}

A.DontShow {
  background-image : none; 
  background     : none;
  color      : black;
  text-decoration  : none;
  padding      : 0;
}
.hotlist {
  background : #fff   ;
}
table.hotlist {
  height: 100%;
  width: 100%;
  border-width: 1px !important;
  border-spacing: 0px ;
  border-style: solid;
  border-color: blue;
  border-collapse: collapse;
}
table.hotlist tr:nth-child(even) {
  background : #ebf6f9;
}
table.hotlist th {
  border-width: 1px !important;
  padding: 0px;
  border-style: solid;
  border-color: #5582eb;
}
table.hotlist td {
  border-width: 1px !important;
  padding: 0px;
  border-style: solid;
  border-color: #5582eb;
  vertical-align: top;
}

table.normal {
  border-width: 1px !important;
  border-spacing: 0px ;
  border-style: solid;
  border-color: #5582eb;
  border-collapse: collapse;
}
table.normal th {
  border-width: 1px !important;
  padding: 0px;
  border-style: solid;
  border-color: #5582eb;
}
table.normal td {
  border-width: 1px !important;
  padding: 0px;
  border-style: solid;
  border-color: #5582eb;
  vertical-align: top;
}

table {
  font-size: 100%;
/*    table-layout:fixed; maakt alle tabellen snel maar wel beeld-vullend */
}

table.Page {
  height: 100%;
  width: 100%;
  border-width: 1px;
  border-spacing: 0px ;
  border-style: solid;
  border-color: #5582eb;
  border-collapse: collapse;
}
table.Page th {
  border-width: 1px;
  padding: 0px;
  border-style: solid;
  border-color: #5582eb;
}
table.Page td {
  border-width: 1px;
  padding: 0px;
  border-style: solid;
  border-color: #5582eb;
  vertical-align: top;
}
table.PageNew {
  height: 100%;
  width: 100%;
  border-width: 0px;
  border-spacing: 10px ;
  border-collapse: collapse;
}
table.PageNew th {
  border-width: 0px;
  padding: 5px;
}
table.PageNew td {
  border-width: 0px;
  padding: 5px;
  vertical-align: top;
}
table.Header {
  height: 100px;
  width: 100%;
  border-width: 1px;
  border-spacing: 0px;
  border-style: none;
  border-color: #5582eb;
  border-collapse: collapse;
}
table.HeaderInner {
  height: 80px;
  width: 100%;
  border-width: 1px;
  border-spacing: 0px;
  border-style: none;
  border-color: blue;
  border-collapse: collapse;
}
table.Header th {
  border-width: 1px;
  padding: 0px;
  border-style: none;
  border-color: blue;
}
table.Header td {
  border-width: 1px;
  padding: 0px;
  border-style: none;
  border-color: blue;
}
table.Menu {
  border-width: 1px;
  border-spacing: 0px;
  border-style: none;
  border-color: blue;
  border-collapse: collapse;
}
table.Menu th {
  border-width: 1px;
  padding: 0px;
  border-style: solid;
}
table.Menu td {
  border-width: 1px;
  padding: 0px;
  border-style: solid;
  vertical-align: middle;
  border-color: #5582eb;
}
.MenuOnHover {
  color: #0000FF;
  background-color: #00FFFF;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  border-color: #0000FF;
 }
.MenuNoHover {
  color: #00FFFF;
  background-color: #0000FF;
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: bold;
  cursor: default;
  text-align: center;
  border-width: 1px;
  border-style: solid ;
  border-color: #5582eb;
}

table.None {
  border-width: 0px;
  border-spacing: 0px;
  border-style: none;
  border-color: transparent;
  border-collapse: collapse;
}
table.None th {
  border-width: 0px;
  padding: 0px;
  border-style: solid;
  border-color: transparent;
}
table.None td {
  border-width: 0px;
  padding: 0px;
  border-style: solid;
  border-color: transparent;
  vertical-align: top;
}
table.AtomTableHeaderAuthor {
  border-width: 0px;
  border-spacing: 0px;
  border-style: none;
  border-color: transparent;
  border-collapse: collapse;
}
table.AtomTableHeaderAuthor th {
  border-width: 0px;
  padding: 0px;
  border-style: solid;
  border-color: transparent;
}
table.AtomTableHeaderAuthor td {
  border-width: 0px;
  padding: 0px;
  border-style: solid;
  border-color: transparent;
  vertical-align: top;
}

table.AtomEntry {
  border-width: 0px;
  border-spacing: 0px;
  border-style: none;
  border-color: transparent;
  border-collapse: collapse;
}
table.AtomEntry th {
  border-width: 0px;
  padding: 0px;
  border-style: solid;
  border-color: transparent;
}
table.AtomEntry td {
  border-width: 0px;
  padding: 0px;
  border-style: solid;
  border-color: transparent;
  vertical-align: top;
}

.abbr {
  cursor: help;
  border-bottom: 1px dashed #000;
}
abbr {
  cursor: help;
  border-bottom: 1px dashed #000;
}
/* fix div problems */
.ClearFix::after {
  content: "";
  clear: both;
  display: table;
}
/* put images on one row */
.image-row {
  display: flex;
  gap: 20px;          /* space between images */
  align-items: flex-start;
  justify-content: center;
}

.image-box {
  text-align: center;
}

.image-box img {
  display: block;
  margin-bottom: 6px;
}

div.BoxRight {
  float: right;
  width: 255px;
  border: 2px solid #25587E;
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  background-color: #AFDCEC;
  padding: 7px;
  margin: 7px;
  font-size: 90%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}
div.BoxHotlistRight {
  float: right;
  width: 350px;
  border: 2px solid #25587E;
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  background-color: #AFDCEC;
  padding: 7px;
  margin: 7px;
  font-size: 90%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}

div.BoxTableCenter {
  float: right;
  width: 450px;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  background-color: #AFDCEC;
  padding: 7px;
  margin: 7px;
  font-size: 90%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}
div.BoxCode {
  border-style:groove;
  font-family: courier;
  background-color:#D8D8D8;
  width:95%;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  padding: 7px;
  margin: 7px;
  font-size: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}
div.BoxPSCode {
  border-style:groove;
  font-family: courier;
  background-color:DarkBlue;
  color:white;
  width:95%;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  padding: 7px;
  margin: 7px;
  font-size: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}

div.BoxRounded {
  border-style:groove;
  width:95%;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  padding: 7px;
  margin: 7px;
  font-size: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}

div.BoxComment{
  margin: 7px;
  padding: 7px;
  border-radius: 10px;
  border: 2px solid rgb(37, 88, 126);
  width: 95%;
  box-shadow: 4px 4px rgba(37,88,126,0.5);
  background-color: rgb(255, 255, 255);
  font-family: Arial, Verdana, Helvetica, sans-serif; 
  font-size: 90%;
  color:rgb(0, 0, 0);
}
div.BoxReaction{
  margin: 10px;
  padding: 7px;
  border-radius: 10px;
  border: 2px solid rgb(37, 88, 126);
  width: 95%;
  box-shadow: 4px 4px rgba(37,88,126,0.5);
  background-color: rgb(55, 55, 55);
  font-family: Arial, Verdana, Helvetica, sans-serif;
  font-style:italic;
  font-size: 90%;
  color:rgb(255, 255, 255);
} 
div.BoxEula{
  border-style:groove;
  font-family: Arial;
  background-color:light grey;
  width:95%;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  padding: 7px;
  margin: 7px;
  font-size: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}
div.MyComment{
  color:rgb(0, 0, 255);
}
div.NoShow{
  display:none;
}
div.HorScroll{
  background-color: lightblue;
  border: 1px solid #5582EB;
  height: 1180px;
  width: 1200px;
  overflow-x: scroll;
  scroll-behavior:smooth;
}
p.HorScroll{
  width: 20000px;
  margin: 10px;
}

.indented {
  padding-left: 30pt;
}
.twitter-style {
  position:relative;
  zoom: 1; 
  FONT-FAMILY: "lucida grande", lucida, tahoma, helvetica, arial, sans-serif; 
  FONT-SIZE: 10px;
  /*	width:100px; */
  border-style:solid;
  border-color:blue;
  border-width:1px;
}
img.floatRight { 
  float: right; 
  margin: 0px; 
}
img.floatLeft { 
  float: left; 
  margin: 0px; 
}
font.highlight {
  background-color: Yellow;
  color: Black;
  font-weight: bold;
}
*  from poorsql.com a syntax highlighter for (T)SQL
.SQLCode {
  font-size: 95%;
  font-weight: bold;
  font-family: monospace;;
  white-space: pre;
  -o-tab-size: 4;
  -moz-tab-size: 4;
  -webkit-tab-size: 4;
}
.SQLComment {
  color: #00AA00;
}
.SQLString {
  color: #AA0000;
}
.SQLFunction {
  color: #AA00AA;
}
.SQLKeyword {
  color: #0000AA;
}
.SQLOperator {
  color: #777777;
}
.SQLErrorHighlight {
  background-color: #FFFF00;
}
.BingMapsCSSPushpin div {
  color: Black !important;
}
.PageBreakHere {
  page-break-before: always;
}
.WHHandOver { 
  cursor: pointer; 
} 
.WHExandable {
  display: none;
} 
@viewport{
  zoom: 1.0;
  width: extend-to-zoom;
}

/*
The following styles are required for slide shows
*/

#slides {
  position: relative;
  height: 368px;
  width: 644px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
}

.slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 1;

  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
}

.showing {
  opacity: 1;
  z-index: 2;
}

div.SlideTextRounded {
  border-style:groove;
  width:630px;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  padding: 7px;
  margin: 0px;
  font-size: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}
div.SlideTextRoundedPrint {
  border-style:groove;
  background-color:white;
  margin-left: auto ;
  margin-right: auto ;
  border: 2px solid #25587E;
  padding: 7px;
  margin: 0px;
  font-size: 100%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(37, 88, 126, 0.5);
}
.NewPage  { 
  page-break-after: always;
  break-before: always;
}
@media print {
  #footer {
  display: block; 
  position: fixed; 
  bottom: 0;
  } 
}

.Buzzword {
  background : #fff   ;
}
table.Buzzword  {
  border-width: 1px !important;
  border-spacing: 0px ;
  border-style: solid;
  border-color: blue;
  border-collapse: collapse;
}
table.Buzzword tr:nth-child(even) {
  background : #ebf6f9;
}
table.Buzzword th {
  border-width: 1px !important;
  padding: 0px;
  border-style: solid;
  border-color: blue;
}
table.Buzzword td {
  border-width: 1px !important;
  padding: 0px;
  border-style: solid;
  border-color: blue;
  vertical-align: top;
}

.CSSButton {
  background-color: #5582eb; 
  border: groove;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-width: 5px;
  border-radius: 12px;
}

.BuzzwordInput {
  background-color: #5582eb; 
  border: groove;
  color: white;
  padding: 20px;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  font-size: 24px;
  margin: 4px 2px;
  cursor: pointer;
  border-width: 5px;
  border-radius: 12px;
}

.Buzzwords {
  font-family: "DejaVu Sans Mono","Consolas",monospace;
  font-size: 24pt;
  text-align: center;
  padding: 1px 12px 1px 12px; 
  margin: 1em 0;
  color: #20ff20;
  display: inline-block;
  border-width: 5px;
  border-radius: 12px;
}

.Article_Meta_Author {
  font-size: 080%;
}

.Article_Meta_Published {
  font-size: 080%;
  display: inline-block;
}

.Article_Meta_LastUpdate {
  font-size: 080%;
  display: inline-block;
}

/* Added for the QR-code generation javascript in a tooltip.  */

.QRtooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted #5582eb;*/
}

.QRtooltip .QRtooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: #5582eb;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 5px;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -60px;
}

.QRtooltip .QRtooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #5582eb transparent;
}

.QRtooltip:hover .QRtooltiptext {
  visibility: visible;
}
.Warning{
  margin-left: 5% ;
  margin-right: 5% ;
  align-items: center;
  justify-content: center;
  border: 2px solid #25587E;
  font-family:  Arial, Verdana, Helvetica, sans-serif;
  background-color: orange;
  padding: 7px;
  margin: 7px;
  font-size: 90%;
  border-radius: 10px;
  box-shadow: 4px 4px rgba(0, 0, 0, 0.5);
  width: 70%;
}