/*############################################################*/
/*                                                            */
/*             STYLESHEET DR. WEB UMFRAGE FORMULAR            */
/*                                                            */
/*############################################################*/

/*
Autor:     Sebastian Dubbel
Website:   www.thedublab.de
E-Mail:    mail@thedublab.de

Anmerkung: Formular skaliert nicht bei Vergrößerung des Schrfitgrades (keine zugängliche Lösung).
           Da eine maximal Breite des Formulars in Pixeln vorgegeben, der Einsatz des Formulars unklar 
		   und der zugrunde liegende HTML Code nicht optimal war, habe ich das gesamte Layout 
		   pixelbasiert umgesetzt.

Browser:   Formular funktioniert in
		     Internet Explorer (Win) >= 5.x 
		     Firefox >= 0.x
		     Opera >= 8
		     Mozilla >= 1.5
			 Netscape >= 8
			 Safari (Funktion nicht eingeschränkt, Darstellung jedoch mit Safari UI-Elementen)
*/

/*############################################################*/
/*#                  LAYOUT BLOCK ELEMENTE                   #*/
/*############################################################*/

/* Außen- und Innenabstände aller Elemente zurücksetzen */
* {
	margin: 0;
	padding: 0;
}

body {
	margin-top: 50px;
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #fff;
	background: #4d4d4f;
}

/*############################################################*/
/*#                        FORMULARE                         #*/
/*############################################################*/

form#Newsletter-Anmeldung {
	margin: 0 auto;
	text-align: left;
	width: 303px;
	height: 220px;
	padding: 30px 0 35px 0;
	background: url(bilder/formular_hintergrund.jpg) no-repeat;
}

/* Rahmen des Fieldsets ausschalten */
form#Newsletter-Anmeldung fieldset {
	border: solid 0 #193f5c; /* Farbe für Opera, da border:none und border:0 bei fieldsets nicht unterstützt wird */
}

form#Newsletter-Anmeldung legend {
	padding-left: 15px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: bold;
}

/* Labels als Block Element darstellen, damit nachfolgende Formular Elemente umgebrochen werden */
form#Newsletter-Anmeldung label {
	display: block;
	margin: 0 45px;
	padding-top: 15px;
}

/* Formatierung für Textfelder */
form#Newsletter-Anmeldung input#Name,
form#Newsletter-Anmeldung input#email {
	width: 204px;
	padding: 3px;
	color: #fff;
	background: #18344a url(bilder/textfeld_hintergrund.gif) repeat-x;
	border: solid 1px #fff;
}

/* Formatierung für Fokussierung der Textfelder */
form#Newsletter-Anmeldung input#Name:focus,
form#Newsletter-Anmeldung input#email:focus {
	background: #194465 url(bilder/textfeld_hintergrund.gif) 0 -77px repeat-x;
}

/* Image Replacement für Absenden Button */
/* Funktioniert nicht in Safari -> dort Anzeige des normalen UI Buttons - Breite wird übernommen */
form#Newsletter-Anmeldung input#abschicken {
	width: 205px;
	height: 65px;
	margin: 30px 0 0 50px;
	padding-top: 65px;
	background: transparent url(bilder/btn_absenden.jpg) 0px 0px no-repeat;
	border: solid 0 #193f5c;
	color: #193f5c;
	overflow: hidden;
	cursor: pointer;
	cursor: hand; /* Handcursor für IE 5.x */
	outline-style: none; /* gestrichelte Umrandung beim Klicken deaktivieren, da unschön */
}

/* Für alle nicht IE Browser Höhe zurücksetzen */
form#Newsletter-Anmeldung>input#abschicken {
  height: 0px;
}

form#Newsletter-Anmeldung input#abschicken:hover,
form#Newsletter-Anmeldung input#abschicken:active {
	background-position: 0px -65px;
}