/* colors used: #000, #999, #666, #333, #ccc, #fff, #11568b, #0080c0, #a9d3e8 */

.searchuniversal	{ color: #333; font-weight: bold; background-color: #A9D3E8; border-color: #0080c0; border-style: dotted /*dashed*/; border-width: 1px 0 1px 0; }
.searchspeccaption	{ color: #333; font-weight: bold; padding: 0 0 0 13em; }

form			{ width: auto; margin: 0; padding: 0; border-width: 0; }
input, select, .selectauto	{ color: #333; font-size: 95%; }
input.hid {visibility: hidden; display: none; }

.display		{ width: 18em; height: auto; line-height: 120%; text-decoration: none;float: left; vertical-align: middle; display: inline;} 
.dispMode		{ width: 25em; } 

/* input			{ width: 30em; } */
select			{ width: 30em; }
.selectauto		{ width: auto; }
.selectmin		{ width: 8em; }
textarea		{ }

/*[1]*/
label, .label1, .label2, input, select, .display
				{ height: auto; line-height: 120%; text-decoration: none; }
label, .label1, input, select, .display
				{ float: left; vertical-align: middle; display: inline; /*display: block;*/ }
input, select, textarea 
				{ margin: 0; padding: 0; border: solid 1px #ccc; }
form br 		{ clear: left; /* das floating der labels und inputs aufheben */} 

/*[2]*/
label, .label1, .label2, .searchspeccaption	{ color: #333; font-size: 100%; font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif; font-weight: normal; line-height:  1.7em; }
label 			{ text-align: right; width: 10em; margin: 0; padding: 0; border-width: 0; }
.label1			{ text-align: left; width: auto; margin: 0; padding: 0; border-width: 0; }
.label2			{ text-align: left; /*width: 90%;*/ margin: 0; padding: 0 0 0 13em; border-top: 1px dotted /*dashed*/ #0080c0; border-right-width: 0; border-bottom-width: 0; border-left-width: 0; }
input#text		{ color: #333; font-size: 100%; line-height: 120%; margin: 0; padding: 3px; }
#returntosearch {text-align: right; }

#submitform		{ margin: 0; padding: 0; border-width: 0; }
a.submit:link, a.submit:visited, a.submit:active, a.submit:hover,
a.submitautowidth:link, a.submitautowidth:visited, a.submitautowidth:active, a.submitautowidth:hover
			{ font-size: 95%; font-weight: bold; text-align: center; letter-spacing: 1px; float: left; margin: 0.3em 1em 0.3em; padding: 1px 0.5em; border-style: solid; border-width: 1px; }
/* Version bis 2010-12:
			{ font-size: 95%; font-weight: bold; letter-spacing: 1px; float: left; margin: 0 2px 0 0; padding: 1px 0.5em; border-style: solid; border-width: 1px; } */
a.submit:link, a.submitautowidth:link
			{ color: #fff; text-decoration: none; background-color: #11568b; border-color: #11568b; }
a.submit:visited, a.submitautowidth:visited
			{ color: #fff; text-decoration: none; background-color: #11568b; border-color: #11568b; }
a.submit:hover, a.submitautowidth:hover, .submitclick
			{ color: #11568b; text-decoration: none; background-color: #fff; border-color: #11568b; }
a.submit:active, a.submitautowidth:active
			{ color: #fff; text-decoration: none; background-color: #11568b; border-color: #11568b; }
a.submit:link, a.submit:visited, a.submit:active, a.submit:hover
			{ width: 5em; }
a.submitautowidth:link, a.submitautowidth:visited, a.submitautowidth:active, a.submitautowidth:hover
			{ width: auto; }

/* .submit {white-space:nowrap;} uebernommen aus css_rswb/formstyles.css */

/* 
http://www.style-sheets.de/guide/formulare/formulare_per_css_layouten
... der optimale Code ... besteht lediglich aus den Formularelementen und ihren Bezeichnern. 
Nicht nur die W3C-Richtlinien zur Barrierefreiheit gebieten das Benutzen von <label>-Tags um die Beschreibungen, deren Benutzung verbessert auch die Struktur des Codes und bietet Vorteile beim Einsatz von CSS.
Gegenueber einer Tabellen-Loesung spart man einiges an Code, was die Seite wieder ein bisschen schneller Laden laesst und die Traffic-Kosten verringert.
Den Formularelementen muss sowohl das name, wie auch das id-Attribut mitgegeben werden. Das erste wird gebraucht, damit ueberhaupt Werte durch das Formular an den Server uebermittelt werden. 
Das zweite ist notwendig, um die Labels an ihre Formularfelder zu binden (so wird z.B. durch einen Klick auf den Label-Text das Formularfeld ausgewaehlt). 
Durch die feste ID koennen aber auch einzelne Felder spaeter individuell gestaltet werden. Mit Hilfe eines ID-Selektors koennte man z.B. dem eMail-Feld einen roten Hintergrund geben um es hervorzuheben.
Um aber Benutzern nicht CSS-Faehigen Browsern wie z.B. alten Netscape-Versionen oder PDAs nicht heilloses durcheinander zu praesentieren, muessen am Ende einer Formular-Zeile Zeilenumbrueche eingefuegt werden. 
So erhaelt man sich die Abwaertskompatibilitaet. Diese <br>-Tags machen an dieser Stelle aber auch strukturell Sinn (im Gegensatz zu Ihrem Missbrauch als Absatz-Abstandhalter). 
Ausserdem spielen sie spaeter fuer das CSS eine wichtige Rolle.
Wichtiger Hinweis: Der Beispiel-HTML-Code hier ist XHTML-Code. Er benutzt die /> Endung bei kurzen Tags um sie abzuschliessen. 
Wenn man diesen Code in einem HTML4-Dokument benutzen will, sollte man diese Schraegstriche entfernen.

Nun zum layouten...
Das wichtigste hier ist es, die mittlere "Linie" herzustellen, an der sich sowohl der Label-Text als auch die Textfelder etc. ausrichten. 
Das erreicht man nur, indem man diesen Elementen eine feste Breite zuweist. Dies tuen wir im folgenden Beispiel, moeglich wird es durch die Benutzung der Eigenschaft display: block;. 
[1]
Die letzte Regel ist noetig, damit der Submit-Button nicht auf die gleiche Breite gestreckt wird wie die Textfelder. 
Die ideale Loesung fr diesen Selektor waere input[type="submit"], was automatisch alle Submitbuttons auswaehlt. 
Der Internet Explorer unterstuetzt dies jedoch noch nicht, daher muss ein Kompromiss eingegangen werden und dem Button eine eindeutige ID vergeben werden.
Die Abstaende wurden in em definiert, damit sie sich in Relation zur Schriftgroesse verhalten. Vergroessert man die Schrift, vergroessern sich auch die Abstaende entsprechend.

Jetzt wird noch ein wenig Abstand zwischen den Labels und den Feldern eingefuegt sowie der Text der Labels rechts ausgerichtet. 
[2]
*/