/* ==================================================================
Stylesheet fuer die Formulare
Datei: ec_content_fp.css
Media: all

Datum: 17.09.2009
Autor:	Agentur Grintsch
Internet: www.grintsch.com

Inhalt:
Stylesheet fuer die Formulare

Aufbau:
1. Text Bereich (IECSS)
	1.1 Textelemente (IECSS)
		1.1.1 SpezialSPANs (IECSS)
		1.1.2 Validität (IECSS)
		1.1.3 Infoboxen (IECSS)
	1.2 Formularelemente (IECSS)
		1.2.1 Submit (IECSS)
		1.2.2 Text
		1.2.3 Select
		1.2.4 Label
		1.2.5 Radio-Button (IECSS)
		1.2.6 Checkbox (IECSS)
		1.2.7 Textarea

2. Spezielle Formularelemente
	2.1 Gewinnspiel
	2.4 Tooltipp (IECSS)

6. Step to ?
5. Warenkorb
	5.1 Kopf
==================================================================== */
/* ======================================================

	=1. Text Bereich (IECSS)
	
========================================================= */
#wContent.one_column #wContentText {
	float: left;
	
	width: 762px;
	background-color: #f6f6f6;
	padding: 0 0 10px;
}

	#wContentText div.box_form {
		clear: both;
		
		width: 675px;
		background-color: #fff;
		padding-left: 5px;
		margin: 0 10px 10px;
	}

	#wContent.one_column #wContentText div.box_form { width: 722px; }

#wContentText div.box_disclaim {
	float: left;
	padding: 15px 0;
	margin: 50px 0 0 15px;
	width: 690px;
	border-top: 1px solid #72737A;
}
/* ======================================================

	=1.1 Textelemente (IECSS)
	
========================================================= */
#wContentText div.box_form p { margin: 10px 0; }

#wContentText div.box_form h2 { padding-left: 0; }

#wContentText div.box_form ul {
	float: left;
	clear: both;
	
	list-style-type: none;
	
	width: 530px;
	margin: 5px 0 0;
}

	#wContentText div.box_form ul li {
		position: relative;
		float: left;
		clear: left;
		
		width: 530px;
		background-image: none;
		padding: 5px 0 5px;
		xxxborder-bottom: 1px solid #cacaca;
		margin-bottom: 0;
	}
	
	#wContentText div.box_form ul li.error {
		background-repeat: repeat-y;
		background-image: url(img/reste/form_li_error.gif); 
	}
	
#wContentText div.box_form a {
	color: #718DB4;
	text-decoration: underline;
}

#wContentText div.box_form a:hover,
#wContentText div.box_form a:focus,
#wContentText div.box_form a:active {
	text-decoration:none;
}

#wContentText div.box_disclaim p {
	font-size: 11px;
}

/* ======================================================
	=1.1.2 Validität (IECSS)
========================================================= */
#wContentText div.box_form li em.valid {
	display: block;
	float: right;
	
	width: 16px;
	height: 18px;
	background: url(img/form/icon/valid_16_fff.gif) no-repeat;
	margin-right: 5px;
}

#wContentText div.box_form li.error em.valid { background: url(img/form/icon/error_16.png) no-repeat 0 2px; }

/* ======================================================
	=1.1.3 Infoboxen (IECSS)
========================================================= */
#wContentText div.box_form div.box_info {
	min-height: 48px;
	background-repeat: no-repeat;
	background-position: 10px 0;
	padding-left: 48px;
	margin-top: 20px;
}

#wContentText div.box_form div.advice { background-image: url(img/form/icon/info_48_fff.gif); }

#wContentText div.box_form div.error {
	color: #e2001a;
	
	background-image: url(img/form/icon/error_48_fff.gif);
}

	#wContentText div.box_form div.box_info p { margin: 0 20px; }

/* ======================================================

	=1.2 Formularelemente (IECSS)
	
========================================================= */
#wContentText div.box_form fieldset,
#wContentText div.box_form div.pseudo_fieldset {
	float: left;
	clear: both;
	
	width: 530px;
	margin-bottom: 5px;
}

#wContentText div.box_form fieldset {
	position: relative;
	
	xxxpadding: 26px 0 0;
	padding: 5px 0 0;
}

/* ======================================================
	=1.2.1 Submit (IECSS)
========================================================= */
#wContentText input.submit {
	font-size: 11px;
	color: #505153;
	text-align: center;
	
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: 0 0;
	padding: 1px 0;
	
	cursor: pointer;
}

	#wContentText input.submit:hover { background-position: 0 -17px; }

	#wContentText fieldset.box_action input.submit {
		float: right;
		font-weight: bold;
		color: #004ebd;
		font-size: 14px;
		text-align: left;
		padding: 11px 10px 13px 30px;
		
		width: 200px;	
		background-image: url(img/form/button/grey.gif);
	}

	#wContentText fieldset.box_action input.submit:hover { background-position: 0 -48px; }

/* ======================================================
	=1.2.2 Text
========================================================= */
#wContentText input.text {
	float: left;
	
	font-size: 12px;
	
	width: 285px;
	background-color: #fff;
	padding: 3px 2px;
	border: 1px solid #b2b2b2;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	margin: 0 5px 0 0;
}

#wContentText input.text:focus { border-color: #003a8f; }

	#wContentText input.with_prefix { width: 270px; }

	#wContentText input.XS_S { width: 25px; }
	#wContentText input.XS_M { width: 30px; }

	#wContentText input.XS_L { width: 50px; }
	#wContentText input.L_XS { width: 224px; }

	#wContentText input.S_M { width: 75px; }
	#wContentText input.M_S { width: 199px; }

#wContentText li.error input.text { border-color: #e2001a; }

	#wContentText input.captcha {
		width: 161px;
		margin: 0 6px 0 204px;
	}

/* ======================================================
	=1.2.3 Select
========================================================= */
#wContentText select {
	float: left;
	
	font-size: 12px;
	
	background-color: #fff;
	border: 1px solid #b2b2b2;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	margin: 0 5px 0 0;
}

#wContentText select option {
	padding: 2px 15px 2px 0;
}

#wContentText select:focus { border-color: #004EBD; }

#wContentText li.error select { border-color: #e2001a; }

	#wContentText select.S_M { width: 75px; }

/* ======================================================
	=1.2.4 Label
========================================================= */
#wContentText label,
#wContentText span.pseudo_label {
	position: relative;
	display: block;
	float: left;
	
	font-size: 12px;
	font-weight: bold;
	color: #004EBD;
	
	width: 195px;
	padding: 3px 0 0 5px;
	margin-right: 5px;
	
	cursor: pointer;
}

	#wContentText label img,
	#wContentText span.pseudo_label img { margin: 0; }
	
	#wContentText label em,
	#wContentText span.pseudo_label em { color: #e2001a; }

#wContentText span.pseudo_label.include {
	width: 175px;
	background: url(img/form/icon/tick_blue_16.gif) no-repeat 5px 0;
	padding-left: 25px;
}

#wContentText label.captcha {
	width: 510px;
	margin: 5px 0 10px;
}

#wContentText label.check {
	font-size: 11px;
	color: #72737A;
	width: 400px;
}

/* ======================================================
	=1.2.5 Radio-Button (IECSS)
========================================================= */
#wContentText input.radio {
	float: left;
	
	margin: 3px 4px 0 1px;
}

/* ======================================================
	=1.2.6 Checkbox (IECSS)
========================================================= */
#wContentText input.check {
	display: block;
	float: left;
	
	margin: 4px 5px 0 0;
}

/* ======================================================
	=1.2.7 Textarea
========================================================= */
#wContentText textarea {
	float: left;
	
	font-family: Arial,Helvetica,Tahoma,Myriad,sans-serif;
	font-size: 12px;
	
	width: 285px;
	height: 150px;
	background-color: #fff;
	padding: 1px 2px;
	border: 1px solid #b2b2b2;
	border-right: 1px solid #e7e7e7;
	border-bottom: 1px solid #e7e7e7;
	margin: 0 5px 0 0;	
}

#wContentText textarea.full {
	width: 485px;
	margin-left: 5px;
}

#wContentText textarea:focus { border-color: #003a8f; }

/* ======================================================
	=2.1 Gewinnspiel
========================================================= */
#wContentText div.box_question {
	width: 690px;
	border-width: 1px 0px;
	border-style: solid;
	border-color: #72737A;
	margin-left: 15px;
	padding-bottom: 25px;
}

#wContentText div.box_question h2 {
	color: #e2001a;
	font-size: 24px;
	line-height: 26px;
	padding-bottom: 0;
	padding-left: 0;
}

#wContentText div.box_question h3 {
	color: #004ebd;
	font-size: 24px;
	line-height: 26px;
	padding-top: 5px;
	padding-left: 0;
}

#wContentText div.box_question ul li {
	float: left;
	
	margin: 3px 4px 0 1px;
	background: none;
}

#wContentText div.box_question input.radio {
	float: left;
	
	margin: 3px 4px 0 1px;
}

#wContentText div.box_question label {
	float: right;
	font-size: 24px;
	width: 120px;
	margin: 0 4px 0 1px;
	padding-top: 0;
}

/* ======================================================
	=2.4 Tooltipp (IECSS)
========================================================= */
#wContentText div.tooltip {
	visibility: hidden;
	position: absolute;
	top: 0;
	left: 540px;		
	
	width: 170px;
	background: url(img/form/box_form/tooltip.png) no-repeat 0 5px;
	padding-left: 12px;
}

#wContentText li.error div.tooltip { background: url(img/form/box_form/errortip.png) no-repeat 0 5px; }

#wContentText li:hover div.tooltip { visibility: visible; }

	#wContentText div.tooltip em { color: #e2001a; }

	#wContentText div.tooltip span {
		display: block;
		
		background-color: #fff;
		border: 1px solid #003a8f;
	}
	
	#wContentText li.error div.tooltip span { border-color: #e2001a; }
	
		#wContentText div.tooltip span.title {
			font-size: 12px;
			font-weight: bold;
			color: #003a8f;
			
			padding: 5px 5px 3px;
			border-bottom: 0;
		}
		
		#wContentText li.error div.tooltip span.title { color: #e2001a; }
		
		#wContentText div.tooltip span.text {
			font-size: 11px;
			font-weight: normal;
			color: #505153;
			
			padding: 0 5px 5px;
			border-top: 0;
		}