body {
	font: .81em/150% Arial, Helvetica, sans-serif;
	color: #000;
}
pre { font-size:1.1em; margin:0}
table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
thead { display:table-header-group }
tfoot { display:table-footer-group }
#pagewrap {width: 95%; margin: 2%;	}
#naamwedstrijd{width:130px; background-color: Beige}
#editactie{font-size: 0.9em}
#formInstellingen{width: 97%}
#formDeelnemers{width: 97%}
#formInvoerfinishvolgorde{width:97%}
#editmaxraces{width:35px}
#editaantalgroepen{width:30px}
#editmaxdeelnemers{width:35px}
#editmaxgroep{width:35px}
#editstrafpunten{width:35px}
#editaantalracesperaftrek{width:20px}
#editaantalaftrek{width:35px}
#titelKlassement{font-size: 1em; font-weight: bold}
#tabelKlassement{border: 1px solid blue}
#titelFinishVolgorde{font-size:1em; font-weight:bold}


.progkop{color:#fff; background-color: teal; width:100%;}
.tekstinstellingen{text-align: right}
.inputs{width:35px; text-align: center}
.kopregel{ color: white; background-color: teal}
.koprace{border: 1px solid black; color:white; background-color: teal; cursor:pointer} 
.koprace:hover{background-color: #000}
.zeilnrdeeln{border: 1px solid CadetBlue; cursor:pointer; padding-left:2px; padding-right:2px; color:teal; font-weight:bold; font-size:0.9em} 
.zeilnrdeeln:hover{background-color: #ddd}
.racecel{text-align: center}
.tijdcel{text-align:center; width:55px; background-color:#efe}
.tijdsduurcel{text-align:center; width:50px; background-color:#efe; font-weight:bold; }
.startbutton{background-color:#f99}
.punten{text-align: center; border-right: 1px solid gray; font-weight:bold}
.klassementcel{text-align: center; background-color: #eee; min-width:21px}
.celzeilnr{text-align: center; font-weight:bold}
.plaats{background-color: #eee}
.zeilnr{width: 30px; text-align:center}
.naam{width: 140px}
.invoerfout{background-color:#fbb}
.invoergoed{background-color:white}
.cursorpointer{cursor:pointer}
.image{vertical-align: middle; cursor:pointer}
.links{text-align:left}
.centreren{text-align:center}
.randlinks{border-left: 1px solid black}
.randrechts{border-right: 1px solid black}
.randonder{border-bottom: 1px solid black}
.randondergrijs{border-top: 1px solid lightgray}
.randlinksgrijs{border-left: 1px solid lightgray}
.randrechtsgrijs{border-right: 1px solid lightgray}
.highlighted{background-color:LightYellow}
.toets{color: white; background-color:teal; font-size:1.1em; height:35px; width:30px; text-align: center;   cursor: pointer}
.toetsfunc{color: white; background-color:maroon; font-size:1.1em; font-weight:bold; height:26px; width:30px; text-align: center;  cursor: pointer}
.finishnr{color:gray; background-color: LightGray; text-align: center}
.finishcel{color:teal; background-color: white; text-align: center}
.dsq{color:red}
.displaycol{width:5px} 
.straf {background-color:LightPink; color:red}


/* Create 2 equal columns that floats next to each other */
.column {
  float: left;
  width: 48%;
  padding: 20px;
}

#formInstellingen {
	background: #eee;
	padding: 10px 10px;
	margin: 5px 0px;
	font: 18px/120% Arial, Helvetica, sans-serif;
	font-size: 90%;
	/* rounded corner */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	/* box shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

#formDeelnemers {
	background: #eee;
	padding: 10px 10px;
	margin: 5px 0px;
	font: 18px/120% Arial, Helvetica, sans-serif;
	font-size: 90%;
	/* rounded corner */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	/* box shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

#formInvoerfinishvolgorde {
	background: #eee;
	padding: 10px 10px;
	margin: 5px 0px;
	font: 18px/120% Arial, Helvetica, sans-serif;
	font-size: 90%;
	/* rounded corner */
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	/* box shadow */
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
	box-shadow: 0 1px 3px rgba(0,0,0,.4);
}

#overlay {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0, 0.7);
  z-index: 2;
  cursor: pointer;
}

#overlaytext{
  position: absolute;
  top: 50%;
  left: 50%;
  width:80%;
  max-width: 430px;
  font-size: 20px;
  line-height: 1.2;
  text-align: center;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}

#btnAfdrukken{
	position: absolute;
	top: 93%;
	left: 45%;
}
	
#overlaybtnSluiten{
  position: absolute;
  top: 0;
  left: 97%;
  font-size: 20px;
  line-height: 1.5;
  text-align:right;
  color: white;
}

#overlayAfdruk {
  position: fixed;
  display: none;
  width: 99%;
  height: auto;
  top: 0;
  left: 1%;
  right: 0;
  bottom: 0;
  background-color: white; 
  cursor: pointer;
  overflow: auto;
}

#overlayAfdrukText{
  position: absolute;
  font-size: 1em;
  line-height: 1.2;
  text-align: left;
  color: black;
}

#btnAfdrukAfdrukken{
	position: absolute;
	top: 93%;
	left: 45%;
}
	
#overlayAfdrukBtnSluiten{
  position: absolute;
  top: 0;
  left: 97%;
  font-size: 20px;
  line-height: 1.5;
  text-align:right;
  color: lightgray;
  z-index: 1;
}

#overlayToetsenbord {
  cursor: pointer; /* nodig voor iOS touchmove */
  border: 1px solid gray;
  position: absolute; /*fixed; /*absolute; */
  display: none;
  width: 150px;
  height: 50%;
  bottom: 0%;
  padding:4px 1px 0px 1px;
  background-color: LightYellow ; 
}

#overlayToetsenbordBtnSluiten{
  position: absolute;
  top: -2%;
  left: 90%;
  font-size: 20px;
  line-height: 1.5;
  text-align:right;
  color: black;
  cursor: pointer;
}

#overlayDialog
{ position: fixed;
  overflow-y: auto;
  overflow-x:auto;
  display: none;
  width: 94%;
  height: 100%;
  top: 0%;
  left: 3%;
  right: 0%;
  bottom: 0;
  background-color: #eee;
  color:black;
  z-index: 2;
  cursor: pointer;
  text-align: center;
}

#overlayMsgDialog
{ position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  right: 0%;
  bottom: 0%;
  background-color: white;
  color:black;
  z-index: 1;
  cursor: pointer;
  text-align: center;
}

#inhoudMsgDialog
{	position:absolute;
	width:70%;
	max-width: 430px;
	height:140px;
	top: 40%;
	left: 50%;
	text-align: center;
	vertical-align: middle;
	background-color: white;
	border: 3px solid Teal;
	color:black;
	z-index:1;
	cursor:pointer;
	transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
}

@media all {
.page-break { display: none; }
}

@media print {
.page-break { display: block; page-break-after: auto; }
table { page-break-inside:auto }
tr    { page-break-inside:avoid; page-break-after:auto }
/* thead { display:table-header-group } */
/* tfoot { display:table-footer-group } */
}

@media screen {
	.column { width: 100%}
	#formInstellingen{font-size: 1em}
	#formInvoerfinishvolgorde{font-size: 1em}
	#formDeelnemers{font-size: 1em}
}

@media screen and (max-width: 730px) {
	.column { width: 100%}
	#formInstellingen{font-size: 0.9em}
	#formInvoerfinishvolgorde{font-size: 0.9em}
	#formDeelnemers{font-size: 0.9em}
	#btnDeelnemers{font-size: 0.9em}
	#btnKlassement{font-size: 0.9em}
	#lijstwedstrijden{font-size: 0.8em}
	#btnwedstrijdtoevoegen{font-size: 0.8em}
	#naamwedstrijd{font-size:0.9em}
	#overlaytext{line-height: 1.1}
}

@media screen and (max-width: 639px) {
	.column { width: 100%}
	#formInstellingen{font-size: 0.8em}
	#formInvoerfinishvolgorde{font-size: 0.8em}
	#formDeelnemers{font-size: 0.8em}
	#btnDeelnemers{font-size: 0.9em}
	#btnKlassement{font-size: 0.9em}
	#lijstwedstrijden{font-size: 0.9em}
	#btnwedstrijdtoevoegen{font-size: 0.8em}
	#naamwedstrijd{font-size:0.9em}
	#overlaytext{line-height: 1.1}
}

@media screen and (max-width: 420px) {
	#lijstwedstrijden{ width: 130px }
}