/*Stylesheet BuchungsFormulare Tabelle English For Kids® */
/* Feber 2021 fuer Responsive Formulare*/
@media screen {
#pageBuchungsFormular section h1 {font-size:1.5em; line-height:1.5; margin:0 0 1.5em 0;padding:0;}


#pageBuchungsFormular table,
table{ width: 88%; border-collapse: collapse;
  border: 1px solid black;  border-spacing:0;
  margin: 1.55em 0 0.5em 0;
  background-color: white;  color: black; font-size:1em; 
  box-sizing: border-box; }
  
 
/*	tbody#BookingDetails tr {background-color: #f5fffa;} */
caption {
  background-color: white;
  color: black;
  font-weight: bold;
  text-align: left;
  padding-left: 0px;
  padding-bottom: 1.5%}
tr{line-height: 2.25;}
tr.KursKommentar > th[colspan="7"] {height:2.5rem; vertical-align:middle;color:green;}
th{ width: 33%;  text-align:right;
  border-left: 1px solid black;  padding-right: 1em;}
tr#row2Header th { padding-left:.5rem;}

td { vertical-align: left;  color: black;
  padding-left: 0.5em;  font-size:1em;  text-align:left,}
/*.required {background-color: white; color: #c09;}magenta*/

.kurse th { width: auto; text-align: center;}
th.info { width:100%;
  background-color: white; color: black;
  font-weight: normal; text-align: left; line-height: 1.3;
  padding: 0.25em;}
th.info ul, ul.inline {display:inline;}
th.info ul li, .inline li{
  display: inline;  text-indent: 0; text-align: left;
  list-style-type: none;  padding:0;  margin:0;}

tr.Kursbeschreibung th {background-color: #999; text-align:left; padding-left:1em;/*#fff*/}
tr.KursKommentar th {background-color: #ECF1E7; font-size:90%; text-align:left; padding-left:1em; font-weight:normal; line-height:1.35;}

/*section h3 {font-size: 1em;	line-height: 1;	font-weight: bold; 	margin: 0;	padding: 0;}
section p {	line-height: 1.5;}
section ul + p {margin-top: 1.75em;	}
*/
@media only screen and (max-width: 480px) {
/*#pageBuchungsFormular section h1 {font-size:115%;}*/
table{ width: 91%; }
td.radiobut {width:25%; }
th[scope="row"]{width:35%;}
/*input[type="radio"]:first-of-type {margin-left:10%;}*/
}

/* Loesung von: http://css-tricks.com/
	Max width before this PARTICULAR table gets nasty	This query will take effect for any screen smaller than 760px and also iPads specifically. */
@media only screen and (max-width: 800px)
	/*(min-device-width: 768px) and (max-device-width: 802px)*/  {
	
		/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; }
		/*input, textfield {display:block; padding:0; margin:0;}
		textarea {width:90%;}	
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { position: absolute; top: -9999px; left: -9999px;}
		.header th{	width:100%;font-size:88%;
		background-image: url(../img/icons/finger.gif); background-repeat:no-repeat; background-position: 1.25%;
		text-indent:1.5%; text-align: left;	padding-left: 3em;  margin: 0;}
		tr#row2Header { position: absolute; top: -9999px; left: -9999px;}
		tr > th[colspan="7"] {text-align:left; margin-left:0;padding-left:1em;}
		tr {border: 1px solid #ccc; }
		td { /* Behave  like a "row" */	border: none; border-bottom: 1px solid #eee; 
			position: relative;	padding-left: 45%; }
		td:before { /* Now like a table header */ position: absolute;
			/* Top/left values mimic padding */	
			top: 0; left: 0; width: 40%; padding-right: 5px; white-space: nowrap; text-align:right; vertical-align:middle; border:none;}
		
		/*	Label the data	*/
		.kurse table tr th:nth-of-type(1):{content: "";}
		.kurse table tr td:nth-of-type(1):before { content: "Kurs "; }
		.kurse table tr td:nth-of-type(2):before { content: "Dauer"; }
		.kurse table td:nth-of-type(3):before { content: "Beginn"; }
		.kurse table td:nth-of-type(4):before { content: "Ende"; }
		.kurse table td:nth-of-type(5):before { content: "Auswahl"; }
		.kurse table td:nth-of-type(6):before { content: "Honorar"; }
		.kurse table td:nth-of-type(7):before { content: ""; }
}		
	/* Smartphones (portrait and landscape) ----------- */
	@media only screen and (min-device-width : 320px) and (max-device-width : 340px) {
		body { padding: 0; margin: 0; width: 320px; }
		table caption {width: 90%;}	
	}
		/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { width: 90%;}
	}
}