BODY {
  Font-Family: Calibri, Arial;
  Font-Size: 18pt;
  color: #333333;
  text-align: justify;
  /*
  background-image: url("pics/background1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  */
  background-color: #CCCCCC;
}

A:LINK        {color: #0000FF; text-decoration: none}
A:VISITED     {color: #0000FF; text-decoration: none}
A:HOVER       {color: #000080; text-decoration: none}
A:ACTIVE      {color: #0000FF; text-decoration: none}

table {
  Font-Family: Calibri, Arial;
  Font-Size: 18pt;
color: #333333;
}

input[type=text] {
  //font-Family: Courier New;
  color: #0000FF; 
  background-color: #FFFFFF; 
  border: 0;
  margin: 0;
  padding: 2;
}


input[type=text]:focus {
  border-color:#333;
}


textarea {
  //font-Family: Courier New;
  Font-Size: 8pt;
  color: #0000FF; 
  background-color: #FFFFFF; 
  border: 0;
  margin: 0;
  padding: 5;
}


select {
  //font-Family: Courier New;
  color: #0000FF; 
  background-color: #FFFFFF; 
  border: 0;
  margin: 0;
  padding: 2;
}


button {
  color: #0000FF; 
  background-color:#AAAAAA;	
  padding:5px 5px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}



input[type=button] {
  color: #555555; 
  background-color:#AAAAAA;	
  padding:5px 15px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}


input[type=submit] {
  color: #555555; 
  background-color:#AAAAAA;	
  padding:5px 15px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}


input.datumIN {
  width: 110px;
  color: #0000FF;
  font-family: Courier New;
  text-align: right;
}


input.getalIN {
  width: 110px;
  color: #0000FF;
  font-family: Courier New;
  text-align: right;
}

input.getalRO {
  width: 110px;
  color: #000000;
  font-family: Courier New;
  text-align: right;
  background-color: #CCCCCC;
  border-width: 0px;
}

input:read-only { 
  pointer-events: none;
  tabindex: -1;
  background-color: #CCCCCC;
}


.tekstvakWeergave {
  width:  100%;
  height: 300px;
}

div.tekstvakPrint {     /* idem als textarea */
  font-Family: Courier New;
  color: #0000FF; 
  background-color: #FFFFFF; 
  border: 0;
  margin: 0;
  padding: 2;
}

.tekstvak {
  font-Family: Courier New;
  Font-Size: 12pt;
  color: #0000FF; 
  background-color: #FFFFFF; 
}

@media screen {
  .tekstvakPrint { display:none; }
}


@media print {
  div.container { background-color: #FFFFFF; }
  .tekstvakWeergave { display:none; }
  .nietprinten { display:none; }
}
/*bijv. <span class="nietprinten"><hr></span>*/





a.knop {
  color: #555555; 
  background-color:#AAAAAA;	
  padding:5px 15px; 
  margin: 3px 1px 3px 1px; 
  border:0 none;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  cursor:pointer;
}

a.knop2 {
  font-family: Calibri, Arial, Sans-serif;
  font-size:10pt; 
  background-color:#99CCFF;
  color: #333333;
  padding:2px 10px; 
  margin: 3px 1px 3px 1px; 
  border-width:1px;  
  border-style:solid;
  border-color: #AAAAAA;
  cursor:pointer;
}

a.knop2:hover {
  background-color:#B0C8E2;
}

/* de knop 'sluiten' X */
a.knopX {
  font-family: Calibri, Arial, Sans-serif;
  font-size:13pt; 
  color: #FFFFFF; 
  background-color:#FF5555;	
  padding: 0px 5px 0px 5px; 
  border:0 none;
  -webkit-border-radius: 5px;
  border-radius: 5px; 
  cursor:pointer;
}





/* initiele (responsive) instellingen */
div.container {
  background-color:#FFFFFF;
  width:  95%;
  border: 0;
  margin: 0px auto;
  opacity: 0.9;
}


/* instellingen voor schermen breder dan 600px */
@media screen and (min-width: 601px) { 
  div.container { width: 600px; }
  input[type=text] { font-size: 12pt; }
  textarea { font-size: 12pt; }
  select   { font-size: 12pt; }
}


/* instellingen voor schermen smaller dan 600px */
@media screen and (max-width: 600px) { 
  input[type=text] { font-size: 12pt; }
  textarea { font-size: 12pt; }
  select   { font-size: 12pt; }
  table    { font-size: 14pt; }
}

/* instellingen voor schermen smaller dan 450px */
@media screen and (max-width: 450px) { 
  input[type=text] { font-size: 10pt; }
  textarea { font-size: 10pt; }
  select   { font-size: 10pt; }
  table    { font-size: 12pt; }
}

/* instellingen voor schermen smaller dan 300px */
@media screen and (max-width: 300px) {
  div.container { width: 300px; } 
  input[type=text] { font-size: 10pt; }
  textarea { font-size: 10pt; }
  select   { font-size: 10pt; }
  table    { font-size: 10pt; }
}



/* instellingen voor schermen hoger dan 700px */
@media screen and (min-height: 701px) { 
  .tekstvakWeergave { height: 410px; }
}

/* instellingen voor schermen lager dan 700px */
@media screen and (max-height: 700px) { 
  .tekstvakWeergave { height: 310px; }
}

/* instellingen voor schermen lager dan 600px */
@media screen and (max-height: 600px) { 
  .tekstvakWeergave { height: 210px; }
}

/* instellingen voor schermen lager dan 500px */
@media screen and (max-height: 500px) { 
  .tekstvakWeergave { height: 110px; }
}