/*Stylesheet fuer die Formulare von English For Kids® */ /*erstellt ab 14.10.2005 auf der Basis von Codesnippets aus dem CSS Kochbuch Verlag: O'Reilly' modifiziert ab 5. April 2007 fuer Layout Ver6.0 */ @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: 95%; border-collapse: collapse; border: 1px solid black; border-spacing:0; background-color: white; color: black; font-size:1em; -webkit-box-sizing: border-box;-moz-box-sizing: border-box; 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;} th{ width: 33%; text-align:right; border-left: 1px solid black; padding-right: 1em;} td { vertical-align: left; color: black; padding-left: 0.5em; font-size:1em; text-align:left,} /*.required {background-color: white; color: #c09;}magenta*/ #header-1 th, .header-1 th, .header th{ width:100%; background-image: url(../img/icons/finger.gif); background-repeat:no-repeat; background-position: 34%; text-indent:34%; text-align: left; text-transform: uppercase; font-size: 0.9em; color: blue; background-color: white; border: 1px solid black; padding: 0 0 0 3.5em; margin: 0; } .header-1 th, #header-1 th { background-image: none; text-indent:32%; margin:0;padding:0; color:black; background-color:#ebf7e4;} .header-sub th{ width:100%; text-align: left; text-indent:34%; text-transform: uppercase; font-size: 0.9em; color: blue; background-color: white; border: 1px solid black;} .Anbot{ background-color: #909090; color: black; border-top: 1px solid black; border-left:1px solid black; text-align: right;} .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;} th.schulstufe{ width:15em; color:black; font-weight:normal; text-align: left; padding-left:1em;} 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%;} 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;} .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%;} } }