1 /** Formulare *****************************************************************/
12 border-top-style: dashed;
13 border-color: @normal;
14 border-width: .0625em;
15 margin: .625em 0; /** 10px 0 */
16 background-color: transparent;
19 /** Text im Formular */
24 .form .radiobutton > legend.f,
25 .form .checkbox > legend.f,
26 .form .textarea > label.f {
28 font-size: 87.5%; /** 14px */
29 line-height: 1.5em; /** 21px */
31 margin: .428571429em 0; /** 6px 0 */
34 /** Aufzählungen im Formular */
43 .form .textarea > label.f.info,
44 .form .radiobutton > legend.f.info,
45 .form .checkbox > legend.f.info,
46 .form .textarea > label.f.info {
48 font-size: 81.25%; /** 13px */
49 line-height: 1.230769231em; /** 16px */
52 padding: 0 0 0 1.538461538em; /** 0 0 0 20px */
53 background-image: url(../../img/em.png);
54 background-repeat: no-repeat;
55 background-position: 0 1px;
56 margin-top: .461538462em; /** 6px */
57 margin-bottom: .461538462em; /** 6px */
60 display: inline-block;
65 font-size: 137.5%; /** 22px */
66 letter-spacing: .0454545em; /** 1px */
68 padding: 0 0 .454545455em; /** 0 0 10px */
69 border-bottom: .090909091em solid @normal; /** 2px */
70 margin: .272727273em 0 .909090909em 0; /** 6px 0 20px 0 */
73 font-size: 100%; /** 16px */
74 letter-spacing: .0625em; /** 1px */
75 text-transform: uppercase;
76 line-height: 1.625em; /** 26px */
77 padding: 0 0 0 .125em; /** 0 0 0 2px */
78 border-bottom: .0625em solid @normal; /** 1px */
79 margin: 1.875em 0 .25em 0; /** 30px 0 4px 0 */
82 /** border-bottom: 1px dashed @normal; */
86 margin: -1.785714286em 0 0 0; /** -25px 0 0 0 zu 14px */
88 .form p.required > strong.r {
93 margin-right: 1em; /** 14px */
96 .form p.required > strong.symbol {
97 font-size: 128.5714286%; /** 18px zu 14px */
98 margin-right: .555555em; /** 10px */
99 padding-top: .1666666em; /** 3px */
100 right: -773.11em; /** Anpassung wegen abweichender Schriftgröße nötig: 994em * 14px / 18px */
105 /** Fehler-Hinweise */
112 font-size: 87.5%; /** 14px */
113 line-height: 1.214285714em; /** 17px */
114 padding: .571428571em; /** 8px */
116 background-color: @fehler;
117 margin: .857142857em 0 0 0; /** 12px 0 0 0 */
119 span.f.error > span.e {
121 width: .857142857em; /** 12px */
122 height: .428571429em; /** 6px */
123 background-image: url(../../img/arrow-red.gif);
124 text-indent: -9999em;
126 top: -.428571429em; /** -6px */
127 left: 2.142857143em; /** 30px */
129 span.f.error > strong.e {
130 text-transform: uppercase;
133 /** Input, Select und Dateiupload mit Label */
138 margin-bottom: .75em; /** 12px */
142 margin-right: 10em; /** 160px */
145 margin-right: 9em; /** 144px */
156 .form .text > label.f,
157 .form .textarea > label.f,
158 .form .select > label.f,
159 .form .file > label.f,
160 .form .captcha > span.f {
163 font-size: 87.5%; /** 14px */
164 line-height: 1.214285714em; /** 17px */
165 padding: .571428571em 0 .571428571em 0; /** 8px 0 8px 0 */
168 .form .file > label.f {
169 padding-top: .285714286em; /** 4px */
170 padding-bottom: .285714286em; /** 4px */
172 .form .captcha > span.f {
175 .form .required > label.f {
176 padding-left: 1em; /** 14px */
178 .form .required > label.f > .required {
181 font-size: 128.5714286%; /** 18px zu 14px */
184 top: .611111111em; /** 11px */
187 .form .file > label.f > .required {
188 top: .5em; /** 7px */
190 .form .text > input.f,
191 .form .select > select.f,
192 .form .file > input.f {
197 font-size: 81.25%; /** 13px */
198 border: .076923077em solid @normal; /** 1px */
200 background-color: @sehrhell;
202 .form .text > input.f {
203 line-height: 1.307692308em; /** 17px */
204 padding: .538461538em; /** 7px */
205 right: -12.307692308em; /** -160px */
207 .form .select > select.f {
208 line-height: 1.230769231em; /** 16px */
209 padding: .461538462em .538461538em; /** 6px 7px */
210 right: -11.076923077em; /** -144px */
212 .form .file > input.f {
213 margin-left: 11.076923077em; /** 144px */
215 .form .captcha > img.f {
217 margin-top: -.9375em; /** 15px */
218 width: 7.5em; /** 120px */
219 height: 3.75em; /** 60px */
221 .form .text > input.f:focus,
222 .form .select > select.f:focus,
223 .form .text > input.f:active,
224 .form .select > select.f:active {
225 background-color: transparent;
227 .form .text > p.f.info,
228 .form .select > p.f.info,
229 .form .file > p.f.info {
231 left: 11.076923077em; /** 144px */
233 .form .text > span.f.error,
234 .form .select > span.f.error,
235 .form .file > span.f.error {
237 margin: .857142857em 0 0 10.285714286em; /** 12px 0 0 144px zu 14(!)px*/
243 margin: 0 .6875em .75em .6875em; /** 0px 11px 12px 11px */
245 .form .textarea > label.f {
246 margin: .615384615em -.846153846em; /** 8px -11px */
248 .form .textarea > textarea.f,
249 .form .textarea > div.textarea {
251 border: .076923077em solid @normal; /** 1px */
253 background-color: @sehrhell;
254 padding: .769230769em; /** 10px */
256 left: -.846153846em; /** -11px */
258 .form .textarea > div.textarea {
260 font-size: 87.5%; /** 14px */
262 .form .textarea > textarea.f:focus,
263 .form .textarea > textarea.f:active {
264 background-color: transparent;
266 .form .textarea > span.f.error {
267 margin: .714285714em -.785714286em 0 -.785714286em; /** 10px -11px 0 -11px */
270 /** Radiobuttons und Checkboxen */
271 .form .radiobutton > legend.f.info,
272 .form .checkbox > legend.f.info {
273 padding: .230769231em 0 0 1.538461538em; /** 3px 0 0 20px zu 13px*/
274 background-position: 0 .230769231em; /** 0 3px */
277 .form .radiobutton > .col2,
278 .form .checkbox > .col2 {
283 .form .radiobutton > .col2.left,
284 .form .checkbox > .col2.left {
288 .form .radiobutton > .col2.right,
289 .form .checkbox > .col2.right {
294 .form .radiobutton > .f,
295 .form .checkbox > .f,
296 .form .radiobutton > .col2 > .f,
297 .form .checkbox > .col2 > .f {
300 .form div.checkbox > label.f,
301 .form .radiobutton > .f > label.f,
302 .form .checkbox > .f > label.f,
303 .form .radiobutton > .col2 > .f > label.f,
304 .form .checkbox > .col2 > .f > label.f {
306 font-size: 87.5%; /** 14px */
307 line-height: 1.285714286em; /** 18px */
309 margin: .571428571em 0 .571428571em 1.428571429em; /** 8px 0 8px 20px */
311 .form div.checkbox > input.f,
312 .form .radiobutton > .f > input.f,
313 .form .checkbox > .f > input.f,
314 .form .radiobutton > .col2 > .f > input.f,
315 .form .checkbox > .col2 > .f > input.f {
317 margin: .285714286em 0; /** 4px 0 */
319 .form div.checkbox > input.error,
320 .form .radiobutton > .f > input.error,
321 .form .checkbox > .f > input.error {
322 /** Wäre möglich -- konnte aber keine CSS-Eigenschaft finden, die sich rot färben ließ: der Firefox hat alles ignoriert! */
324 .form div.checkbox:hover > label.f,
325 .form .radiobutton > .f:hover > label.f,
326 .form .checkbox > .f:hover > label.f,
327 .form div.checkbox:focus > label.f,
328 .form .radiobutton > .f:focus > label.f,
329 .form .checkbox > .f:focus > label.f,
330 .form div.checkbox:active > label.f,
331 .form .radiobutton > .f:active > label.f,
332 .form .checkbox > .f:active > label.f,
333 .form .radiobutton > .col2 > .f:hover > label.f,
334 .form .checkbox > .col2 > .f:hover > label.f,
335 .form .radiobutton > .col2 > .f:focus > label.f,
336 .form .checkbox > .col2 > .f:focus > label.f,
337 .form .radiobutton > .col2 > .f:active > label.f,
338 .form .checkbox > .col2 > .f:active > label.f {
342 /** Sondereinstellungen für Fehler-Hervorhebungen */
343 .form .text > input.error,
344 .form .textarea > textarea.error,
345 .form .select > select.error,
346 .form .file > input.error {
349 border-color: @fehler;
350 background-color: @fehlerhell;
354 /** Absende-Buttons */
359 list-style-type: none;
364 display: inline-block;
370 margin-bottom: .75em; /** 12px */
372 .form .submit > input.f,
375 display: inline-block;
376 font-family: 'PT Sans', Helvetica, Arial, sans-serif;
377 font-size: 81.25%; /** 13px */
378 letter-spacing: .076923077em; /** 1px */
381 height: 1.923076923em; /** 25px */
384 background-color: @normal;
387 .form .submit > input.f,
391 margin: 0 0 0 .615384615em; /** 0 0 0 8px */
396 .form .submit > input.left,
397 .form .submit > a.left,
400 margin: 0 .923076923em 0 0; /** 0 12px 0 0 */
402 .form .submit > input.right,
403 .form .submit > a.right,
406 margin: 0 0 0 .923076923em; /** 0 0 0 12px */
408 .form .submit > input.f:hover,
409 .form .submit > a.f:hover,
411 .form .submit > input.f:focus,
412 .form .submit > a.f:focus,
414 .form .submit > a.f:active,
415 .form .submit > input.f:active,
417 background-color: @dunkel;
418 text-decoration: none;