/* ==================================================================
 - Stylesheet fuer die Darstellung der Formulare
Datei: jado_forms.css
Media: all

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

Inhalt:
CSS-Anweisungen f�r die Darstellung der Produkte der Website www.jado.com

Aufbau:
1. wrapperMainContent
	1.1 Inline-Elemente
	1.2 Block-Elemente
	1.3 Formular-Elemente
		1.3.1 Fieldset
		1.3.2 Legende
		1.3.3 Label
		1.3.4 Textinput
		1.3.5 Radios und Checkboxen
		1.3.6 Select
		1.3.7 Textarea
	1.4 Spezielle Formularbereiche
		1.4.1 Captcha
		1.4.2 Actionbereich mit Buttons
		1.4.3 Favorites Manager
	1.5 Spezielle Bereiche
		1.5.1 Scrollbare Contentbox
		1.5.2 Ebene mit Aktionen
		1.3.3 Farbiger Hintergrund f�r Formulargebiete
		1.3.4 Textbereich f�r Formular
2. wrapperSubContent
==================================================================== */
/* ======================================================

	=1. wrapperMainContent

========================================================= */
#wrapperMainContent {
	position: absolute;
	top: 0;
	left: 308px;
	overflow: hidden;

	width: 443px;
	height: 312px;
}

/* ======================================================
	=Zusatzklasse f�r #wrapperMainContent
	enth�lt die beiden punktierten Linie, die die
	Begrenzung des Scrollbaren Bereichs darstellen, aber
	nicht mitscrollen d�rfen. Es kommt sonst zu h�sslichen
	�berlappungen der Punkte.
========================================================= */
div.with_box_full_yscroll_box_actions {
	background: url(img/bg/wrapperMainContent/with_box_full_yscroll_box_actions.gif) no-repeat 10px 30px;
}

/* ======================================================
	=1.1 Inline-Elemente
========================================================= */
span.form_footnote {
	font-size: 9px;
	color: #8996a0;
}

/* ======================================================
	=1.2 Block-Elemente
========================================================= */
#wrapperMainContent h1 {
	font-size: 13px;

	margin: 7px 27px 10px 10px;
}

/* ======================================================
	=1.3 Formular-Elemente
========================================================= */
#wrapperMainContent form {
	clear: left;

	width: 393px;
	xxxbackground-color: lightblue;
}

/* === =1.3.1 Fieldset === */
#wrapperMainContent fieldset {
	color: #525658;

	width: 381px;
	border: 1px solid #d0d5d9;
	margin: 0 5px 0 4px;
}

* html #wrapperMainContent fieldset { display: inline; }

	#wrapperMainContent fieldset ol {
		list-style: none;

		width: 381px;
		margin: 5px 0;
	}

	* html #wrapperMainContent fieldset ol {padding: 0px;}

		#wrapperMainContent fieldset li {
			float: left;
			clear: left;

			width: 381px;
			margin-bottom: 8px;
		}

/* === =1.3.2Legende === */
#wrapperMainContent legend {
	font-size: 12px;
	font-weight: bold;

	padding-top: 4px;
}

* html #wrapperMainContent legend { margin-left: -7px; }
* +html #wrapperMainContent legend { margin-left: -7px; }

	#wrapperMainContent legend.error { color: #ff0000; }

/* === =1.3.3 Label === */
#wrapperMainContent label {
	display: block;
	float: left;

	font-size: 11px;
	font-weight: normal;
	color: #525658;

	width: 140px;
	padding-top: 3px;
	margin: 0 11px 0 0;

	cursor: pointer;
}

* html #wrapperMainContent label { margin-right: 4px; }

	#wrapperMainContent label.XL {
		width: 381px;
		padding: 3px 0 4px 0;
		margin: 0;
	}

	#wrapperMainContent label.error { color: #ff0000; }

/* === =1.3.4 Textinput === */
#wrapperMainContent input.input_text {
	font-size: 11px;
	color: #525658;

	background-color: #d0d5d9;
	padding: 1px 2px;
	border: 1px solid #ffffff;
}

	#wrapperMainContent input.M { width: 112px; }
	#wrapperMainContent input.L { width: 224px; }
	
	#wrapperMainContent input.input_file {width: 224px;}

	#wrapperMainContent input.error {
		background-color: #fed1d1;
		border-color: #ff0000;
	}

/* === =1.3.5 Radios und Checkboxen === */
#wrapperMainContent .radio_label_right,
#wrapperMainContent .checkbox_label_right {
	width: auto;
	padding: 0px 0 4px 0;
	margin-left: 5px;
	margin-right: 10px;
}

#wrapperMainContent input.checkbox_right,
#wrapperMainContent input.radio_right {
	float: left;

	width: 13px;
	height: 13px;
	background-color: #d0d5d9;
}

/* === =1.3.6 Select === */
#wrapperMainContent select {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #525658;

	width: 230px;
	background-color: #d0d5d9;
	padding: 1px 2px;
	border: 1px solid #ffffff;
}

		#wrapperMainContent select option { padding: 2px 4px; }

/* === =1.3.7 Textarea === */
#wrapperMainContent textarea {
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 11px;
	color: #525658;

	width: 373px;
	height: 75px;
	background-color: #d0d5d9;
	padding: 1px 2px;
	border: 1px solid #ffffff;
}

	#wrapperMainContent textarea.error {
		background-color: #fed1d1;
		border-color: #ff0000;
	}


/* ======================================================
	=1.4 Spezielle Formularbereiche
========================================================= */
/* === =1.4.1 Captcha === */
#wrapperMainContent fieldset.captcha { padding-bottom: 20px; }

#wrapperMainContent fieldset.captcha img.captcha { float: left; }

#wrapperMainContent fieldset.captcha input.input_text { margin: 8px 0 0 20px; }

/* === =1.4.2 Actionbereich mit Buttons === */
#wrapperMainContent fieldset.box_actions {
	text-align: right;

	padding: 10px 0;
}

	#wrapperMainContent fieldset.box_actions input.input_submit {
		font-size: 0px;
		color: #525658;

		height: 14px;
		padding-left: 1px;
		cursor: pointer;
	}

	#wrapperMainContent fieldset.box_actions input.send_recommend {
		width: 169px;
		background: url(img/button/send_recommend.gif) no-repeat;
		padding-top: 12px; /*IE Bug*/
	}
		#wrapperMainContent fieldset.box_actions #sendRecommend_de,
		#wrapperMainContent fieldset.box_actions input.send_recommend.de {
						background: url(img/button/send_recommend_de.gif) no-repeat;
						padding-top: 12px;
		}
		#wrapperMainContent fieldset.box_actions #sendRecommend_fr,
		#wrapperMainContent fieldset.box_actions input.send_recommend.fr {
			background: url(img/button/send_recommend_fr.gif) no-repeat;
			padding-top: 12px;
		}
		#wrapperMainContent fieldset.box_actions #sendRecommend_nl,
		#wrapperMainContent fieldset.box_actions input.send_recommend.nl {
			background: url(img/button/send_recommend_nl.gif) no-repeat;
			padding-top: 12px;
		}
		
		#wrapperMainContent fieldset.box_actions input.send {
		  width: 106px;
		  background: url(img/button/send_recommend.gif) no-repeat;
	   	padding-top: 12px; /*IE Bug*/
  	}

  		#wrapperMainContent fieldset.box_actions #send_nl,
      #wrapperMainContent fieldset.box_actions input.send.nl {
		  	background: url(img/button/send_nl.gif) no-repeat;
	   		padding-top: 12px;
	   		margin-top: 15px;
  		}

  
	#wrapperMainContent fieldset.box_actions input.send_registration {
		width: 169px;
		background: url(img/button/send_registration.gif) no-repeat;
		padding-top: 12px;
	}
		#wrapperMainContent fieldset.box_actions #sendRegistration_de,
		#wrapperMainContent fieldset.box_actions input.send_registration.de {
			background: url(img/button/send_registration_de.gif) no-repeat;
			padding-top: 12px;
		}
		#wrapperMainContent fieldset.box_actions #sendRegistration_fr,
		#wrapperMainContent fieldset.box_actions input.send_registration.fr {
			background: url(img/button/send_registration_fr.gif) no-repeat;
			padding-top: 12px;
		}
		#wrapperMainContent fieldset.box_actions #sendRegistration_nl,
		#wrapperMainContent fieldset.box_actions input.send_registration.nl {
			background: url(img/button/send_registration_nl.gif) no-repeat;
			padding-top: 12px;
		}

		#wrapperMainContent fieldset.box_actions input.send_forum_unsubscribe {
				width: 169px;
				background: url(img/button/send_forum_unsubscribe_de.gif) no-repeat;
				padding-top: 12px;
		}
				#wrapperMainContent fieldset.box_actions #sendForumUnsubscribe_de,
				#wrapperMainContent fieldset.box_actions input.send_forum_unsubscribe.de {
						background: url(img/button/send_forum_unsubscribe_de.gif) no-repeat;
						padding-top: 12px;
				}


/* === =1.4.3 Favorites Manager === */
#wrapperMainContent select.favs_selector {
	width: 379px;
}

#wrapperMainContent fieldset.box_actions input.load_favorites {
	width: 169px;
	background: url(img/button/favorites_load.gif) no-repeat;
	float: right;
}
	#wrapperMainContent fieldset.box_actions input.load_favorites.de,
	#wrapperMainContent fieldset.box_actions #submitLoad_de { background: url(img/button/favorites_load_de.gif) no-repeat; }

	#wrapperMainContent fieldset.box_actions input.load_favorites.fr,
	#wrapperMainContent fieldset.box_actions #submitLoad_fr { background: url(img/button/favorites_load_fr.gif) no-repeat; }

	#wrapperMainContent fieldset.box_actions input.load_favorites.nl,
	#wrapperMainContent fieldset.box_actions #submitLoad_nl { background: url(img/button/favorites_load_nl.gif) no-repeat; }

#wrapperMainContent fieldset.box_actions input.delete_favorites {
	width: 169px;
	background: url(img/button/favorites_delete.gif) no-repeat;
	float: left;
}
	#wrapperMainContent fieldset.box_actions input.delete_favorites.de,
	#wrapperMainContent fieldset.box_actions #submitDel_de  { background: url(img/button/favorites_delete_de.gif) no-repeat; }

	#wrapperMainContent fieldset.box_actions input.delete_favorites.fr,
	#wrapperMainContent fieldset.box_actions #submitDel_fr  { background: url(img/button/favorites_delete_fr.gif) no-repeat; }

	#wrapperMainContent fieldset.box_actions input.delete_favorites.nl,
	#wrapperMainContent fieldset.box_actions #submitDel_nl  { background: url(img/button/favorites_delete_nl.gif) no-repeat; }

#wrapperMainContent fieldset.box_actions input.save_favorites {
	width: 169px;
	background: url(img/button/favorites_save.gif) no-repeat;
}
	#wrapperMainContent fieldset.box_actions input.save_favorites.de,
	#wrapperMainContent fieldset.box_actions #submitSave_de  { background: url(img/button/favorites_save_de.gif) no-repeat; }

	#wrapperMainContent fieldset.box_actions input.save_favorites.fr,
	#wrapperMainContent fieldset.box_actions #submitSave_fr  { background: url(img/button/favorites_save_fr.gif) no-repeat; }

	#wrapperMainContent fieldset.box_actions input.save_favorites.nl,
	#wrapperMainContent fieldset.box_actions #submitSave_nl  { background: url(img/button/favorites_save_nl.gif) no-repeat; }


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

	=1.5 Spezielle Bereiche

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

	=1.5.1 Scrollbare Contentbox,
			volle Breite und vertikaler Scrollbalken

========================================================= */
/* === Scrollbereich === */
#wrapperMainContent div.box_full_yscroll {
	overflow: auto;
	overflow-x: hidden;

	height: 252px;
	margin: 0 7px 0 10px;
	xxxbackground-color: lightgreen;
}

* html #wrapperMainContent div.box_full_yscroll { overflow-y: scroll; }

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

	=1.5.2 Ebene mit Aktionen

========================================================= */
#wrapperMainContent div.box_actions {
	position: absolute;
	top: 293px;
	left: 10px;

	width: 430px;
}

	#wrapperMainContent div.box_actions a.link_get_product,
	#wrapperMainContent div.box_actions a.link_back {
		display: block;
		float: left;

		font-size: 9px;
		color: #9da8b0;
		text-decoration: none;
		text-transform: uppercase;

		width: 190px;
		height: 12px;
		background: url(img/action_icon/link_get_product.gif) no-repeat;
		padding: 2px 15px 0 5px;
	}

			* html #wrapperMainContent div.box_actions a.link_get_product,
			* html #wrapperMainContent div.box_actions a.link_back {
				width: 210px;
				margin-left: 2px;
			}


	#wrapperMainContent div.box_actions a.link_back {
		background-image: url(img/action_icon/link_back.gif);
		margin-left: 5px;
	}


/* ======================================================
	=1.3.3 Farbiger Hintergrund f�r Formulargebiete
	(sonst kann flexcroll nicht eingesetzt werden)
========================================================= */
#wrapperMainContent div.wrapper_form {
	width: 393px;
	min-height: 252px;
	background-color: #d0d5d9;
	padding-top: 1px;
	margin: 2px 0 0 5px;
}

* html #wrapperMainContent div.wrapper_form { height: 252px; }

/* ======================================================
	=1.3.4 Textbereich f�r Formular
========================================================= */
#wrapperMainContent div.box_form_text {
	width: auto;
	margin: 5px 0;
}

		#wrapperMainContent div.box_form_text p {
			width: 370px;
			margin-right: 5px;
			margin-left: 5px;
		}

#wrapperMainContent div.error {
	font-size: 12px;
	color: #FF0000;

	min-height: 37px;
	background: url(img/icon/error_L.gif) no-repeat;
	padding-left: 47px;
}

* html #wrapperMainContent div.error { height: 37px; }


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

	=2. wrapperSubContent

========================================================= */
#wrapperSubContent {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;

	width: 308px;
	height: 312px;
	background: url(img/bg/wrapperSubContent/wrapperSubContent.gif) repeat-y 302px 0;
}