/*Stylesheet f?r die Formulare von English For Kids® */
/*erstellt ab 14.10.2005 mod: ab 5. April 2007 > Ver6. mod: 20.3.2014 > RWD */
@media screen {
#pageBuchungsFormular section h1 {font-size:1.5em; line-height:1.5; margin:0 0 1.5em 0;padding:0;}
#pageBuchungsFormular .content { width: 100%;}
#pageBuchungsFormular table,
table{ width: 100%; border-collapse: collapse;
  border: 1px solid black;  border-spacing:0;
  background-color: white;  color: black; font-size:1em; 
  box-sizing: border-box; }

tr, th, td {line-height: 2.5; vertical-align: middle;}
tr:nth-of-type(odd) { background: #eee; }
th{ width: 45%; text-align:right; font-weight:normal;  border-left: 1px solid black;  padding-right: 1em;}
td { vertical-align: left; text-align:left; color: black;  padding-left: 0.5em;  font-size:1em;  }
.required, th .required  { background-color: inherit; color: #c09;}/*magenta*/
p.required { background-color: inherit; color: #c09; }
 h3.required, h3 .required { background-color: inherit; color: #c09 !important;}
.header th{
 background-image: url(../img/icons/finger.gif); background-repeat:no-repeat;
  background-position: 3%;  background-color: white;
  width:100%;
  text-align: left;
  text-indent:4%;
  text-transform: uppercase;
  font-size: 90%; line-height:1.75;
  color: blue;
  border: 1px solid black;
  padding-left: 2.5em;
  margin: 0;
  }
.header-sub th{
  width:100%;
  text-align: left;
  text-indent:4%;
  text-transform: uppercase;
  font-size: 90%;
  color: blue;
  background-color: white;
  border: 1px solid black;
}
form {overflow: hidden;}
textarea {  color:blue;  font-size: 1.5em; position:relative; left:0; width:80%; height:auto;}
input[type="text"] {width:80%;}
input[type="tel"], input[type="date"], input[type="email"], td[select name="Aufmerksam"] {width:80%;}
input[name="txtPLZ"] {width:25%; min-width: 25%;}
input[name="captcha_input"],input[name="txtOrtBuchung"] {width:40%; min-width: 40%;}
 img.captcha {width: 15em;} 
@media only screen and (max-width: 480px) {
#pageBuchungsFormular section h1 {font-size:115%;}
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: 760px)
	/*(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;}
		.header-1 th, #header-1 th {text-indent:2%;}
		tr#row2Header { position: absolute; top: -9999px; left: -9999px;}
		tr>td[colspan="8"] {text-align:left; margin-left:0;padding-left:1em;}
		tr.Anbot th[colspan="3"] {text-align:left; margin-left:0;padding-left:1em; width: 100%;font-weight:normal;}
		tr {border: 1px solid #ccc; }
		
		td { /* Behave  like a "row" */	border: none; border-bottom: 1px solid #eee; 
			position: relative;	padding-left: 45%; }
		
		th.info {border: none; 	position: relative; width: 95%;margin: 0 0 0 0.08%; padding: 0 0 0.25 0.75em;}
		#BookingData td, #BookingData th {border:none;}
		#BookingData tr.required > th,
		#BookingData tr.info th, tr > th {width: 30%; text-align:right; }
		#BookingData td {width: 65%; position: relative; left: 35%; margin-bottom:-2.5em; top:-2.5em; margin-left:0; padding-left:1em;}
	    td.radiobut, td#Aufmerksam  {width: 65%; position: relative; left: 35%; margin-bottom:-2.5em; top:-2.5em; margin-left:0; padding-left:1em;}
		td.txtArea {width: 65%; position: relative; left: 35%; margin-bottom:-2.5em; top:-2.75em; margin-left:0; padding-left:1em;}
		/*
		#BookingDetails tr td:nth-of-type(1){font-weight:bold; color: maroon; padding:0.75em 0 0 0.5em; line-height:1;}	
		#BookingDetails tr td:nth-of-type(2){margin-top: -0.55em; line-height:1.55;}
		#BookingDetails tr {border:none;}
		*/
		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 : 480px) {
		body { padding: 0; margin: 0; width: 320px; }
		table caption {width: 80%;}	*/
	}
		/* iPads (portrait and landscape) ----------- */
	@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
		body { width: 90%;}
	}
/*
.sport {
  border-left: 1px solid black;
  font-style:normal;
}
.merchand {
  font-weight: normal;
  background-color: white;
  color: #3cb371; /* gruen 
  text-align:right;
  border-top: 1px solid gray;
  border-left:1px solid black;
}
.Anbot{
  background-color: #909090;
  color: white;
  border-top: 1px solid black;
  border-left:1px solid black;
  text-align: right;
}
.AnbotDetails {
  background-color: white;
  color: black;
  border-left: 2em;
  width: 50px;
}
.kurse th {
    width: auto;
    text-align: center;
}

caption {
  background-color: white;
  color: black;
  font-weight: bold;
  text-align: left;
  padding-left: 0px;
  padding-bottom: 8px;
}
tbl li {
	margin-bottom: 8px;
}
tbl ul {
	background-color: white;
	color: black;
	text-indent: 0;
	text-align: left;
	list-style-type: square;
  padding: 0;
  margin: 5px 5px 5px 25px;
}
.inline li{
  display: inline;
  text-indent: 0;
  text-align: left;
  list-style-type: none;
  padding:0;
  margin:0;
}
th.info {
  width:600px;
  background-color: white;
  color: black;
  font-weight: normal;
  text-align: left;
  line-height: 1.3;
  padding: 0px 0px 5px 15px;
}
*/