/**
 * "Yet Another Multicolumn Layout" - (X)HTML/CSS Framework
 *
 * (en) CSS-component for creating vertical forms
 * (de) CSS-Baustein zur Erstellung von Formularen mit untereinander angeordneten Elementen
 *
 * @note            Many thanks to Ansgar Hein (http://www.anatom5.de) for contribution
 *
 * @copyright       Copyright 2005-2010, Dirk Jesse
 * @license         CC-A 2.0 (http://creativecommons.org/licenses/by/2.0/),
 *                  YAML-C (http://www.yaml.de/en/license/license-conditions.html)
 * @link            http://www.yaml.de
 * @package         yaml
 * @version         3.3
 */

@media screen, projection
{
	/**
	*  YAML Forms - visual styling
	*
	*  (en) visual form styling area
	*  (de) Festlegung des optischen Erscheinungsbildes
	*/

	.yform {
		background:#f4f4f4;
		border:1px #ddd solid;
		margin:0 0 1em 0;
		padding:10px
	}
	.yform fieldset {
		border:1px #ddd solid;
		background:#fafafa;
		margin:0 0 1em 0;
		padding: 0.5em
	}
	.yform legend {
		font-size:125%;
		font-weight:normal;
		color:#000
	}
	.yform label {
		color:#666
	}
	.yform input,
	.yform textarea,
	.yform select,
	.yform optgroup {
		font-family:Arial, Helvetica, sans-serif /* proportional fonts for all form elements */
	}
	.yform .type-text input,
	.yform .type-text textarea,
	.yform .type-select select {
		border:1px solid #ddd
	}

	/* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
	.yform div.type-text input:focus,
	.yform div select:focus,
	.yform div textarea:focus,
	.yform div.type-text input:hover,
	.yform div select:hover,
	.yform div textarea:hover,
	.yform div.type-text input:active,
	.yform div select:active,
	.yform div textarea:active {
		border:1px #a66 solid;
		background:#fff
	}

	/* Styling of custom styled buttons | Gestaltung von individuell gestalteten Buttons */
	/** Achtung, .yform #submit **/
	.yform .type-button input, .yform #submit {
		border-top:1px #ddd solid;
		border-left:1px #ddd solid;
		border-right:1px #444 solid;
		border-bottom:1px #444 solid;
		color:#000;
		background:#454545 url(../../images/button_gray.png) top left repeat-x;
		padding:5px 1em
	}
	.yform .type-button input[type=reset]  { color:#300; background:#661717 url(../../images/button_red.png) top left repeat-x }
	.yform .type-button input[type=submit], .yform #submit { color:#330; background:#5e5607 url(../../images/button_yellow.png) top left repeat-x }

	/* optional button styling for IE6 using classes */
	.yform .type-button input.reset { color:#300; background:#661717 url(../../images/button_red.png) top left repeat-x }
	.yform .type-button input.submit { color:#330; background:#5e5607 url(../../images/button_yellow.png) top left repeat-x }

	/* :hover and :focus status on buttons | Effekt zur Hervorhebung von Schaltern bei :hover oder :focus */
	.yform div.type-button input:focus,
	.yform div.type-button input:hover,
	.yform div.type-button input:active {
		border-top:1px #444 solid;
		border-left:1px #444 solid;
		border-right:1px #ddd solid;
		border-bottom:1px #ddd solid;
		color:#fff;
		background:#555
	}
	.yform div.type-button input.reset:focus,
	.yform div.type-button input.reset:hover,
	.yform div.type-button input.reset:active {
		background:#800;
		color:#fff
	}
	.yform div.type-button input.submit:focus,
	.yform div.type-button input.submit:hover,
	.yform div.type-button input.submit:active,
	.yform #submit:focus, .yform #submit:hover, .yform #submit:active {
		background:#880;
		color:#fff
	}

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Vertical-Forms - technical base (standard)
	*
	* |-------------------------------|
	* | fieldset                      |
	* |-------------------------------|
	* |   label                       |
	* |   input / select / textarea   |
	* |-------------------------------|
	* | /fieldset                     |
	* |-------------------------------|
	*
	* (en) Styling of forms where both label and input/select/textarea are styled with display:block;
	* (de) Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display:block; gestaltet werden
	*
	* WARNING:This part contains several IE-stability-fixes. Don't edit this part if you are not sure, what you're doing!
	*/

	/* General form styling  | Allgemeine Formatierung des Formulars */
	.yform { overflow:hidden }
	.yform fieldset { display:block }
	.yform label { display:block;cursor:pointer }
	.yform legend { background:transparent; border:0; padding:0 0.5em }
	.yform .message { display:block; margin-bottom:0.5em; color:#666 }

	/* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
	.yform input[type=hidden] { display:none !important }

	/* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
	.yform sup { color:#800; font-weight:bold }

	/* per row float clearing | zeilenweises Float-Clearing */
	fieldset:after,
	.yform div.type-text:after,
	.yform div.type-select:after,
	.yform div.type-check:after,
	.yform div.type-button:after {
		clear:both;
		content:".";
		display:block;
		font-size:0;
		height:0;
		visibility:hidden
	}
	/* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
	.yform div.type-text,
	.yform div.type-select,
	.yform div.type-check,
	.yform div.type-button,
	.yform p.form-submit {
		display:block;
		margin:0.5em 0;
		padding:3px 0.5em;
		position:relative
	}
	.yform div.type-button, .yform p.form-submit  {
		padding:3px 0em
	}
	/* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
	.yform .type-text input,
	.yform .type-text textarea {
		display:block;
		position:relative;
		padding:0.3em 0.3em;
		width:58.5%
	}
	.yform .type-select select {
		display:block;
		position:relative;
		padding:0.3em 2px 0.3em 1px;
		width:60%;
		cursor:pointer
	}
	.yform .type-select select optgroup {
		font-style:normal;
		font-weight:bold
	}
	.yform .type-check input { cursor:pointer }
	.yform .type-check label { display:inline }
	/* Styling of buttons | Gestaltung von Buttons */
	.yform .type-button input, .yform p.form-submit input {
		cursor:pointer;
		overflow:visible;  /* Fixes IE7 auto-padding bug */
		width:auto
	}
	/* Styling of error-messages | Fehlermeldungen */
	.yform div.error {
		border:1px #a00 dashed;
		background:#faf4f4;
		padding:0.5em
	}
	.yform div.error label { color:#000; font-weight:bold }
	.yform div.error .message { color:#800 }
	/* avoid jumping checkboxes & radiobuttons in IE8 */
	.yform div.type-check input:focus,
	.yform div.type-check input:hover,
	.yform div.type-check input:active { border:0 none }

	/*------------------------------------------------------------------------------------------------------*/

	/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
	.full div.type-text input,
	.full div.type-text textarea { width:95.5%; margin-right: -3px }
	.full div.type-select select { width:97.0%; margin-right: -3px }
	/* width adjustments for IE 5.x & IE6 | Breitenanpassung für Internet Explorer 5.x und 6.0 */
	* html .full div.type-text input,
	* html .full div.type-text textarea { width:95.5% }
	* html .full div.type-select select { width:97.0% }

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Columnar forms display - technical base (optional)
	*
	* |-------------------------------------------|
	* | fieldset                                  |
	* |-------------------------------------------|
	* |                                           |
	* |   label   |   input / select / textarea   |
	* |                                           |
	* |-------------------------------------------|
	* | /fieldset                                 |
	* |-------------------------------------------|
	*
	* (en) Styling of forms where label floats left of form-elements
	* (de) Formulargestaltung, bei der die label-Elemente nach links fließen
	*
	* WARNING:This part contains several IE-stability-fixes. Don't edit this part if you are not sure, what you're doing!
	*/

	/* Columnar display | Spalten-Darstellung */
	.columnar .type-text label,
	.columnar .type-select label {
		float:left;
		width:30% /* Can be fixed width too | Kann auch eine fixe Angabe sein */
	}
	/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels */
	.columnar div.type-check input { margin-left:30% }
	.columnar div.error .message { margin-left:30% }
	.columnar fieldset div.type-button,
	fieldset.columnar div.type-button { padding-left:30% }
	.columnar div.type-text input,
	.columnar div.type-text textarea { float:left; width:67.8%; margin-right: -3px }
	.columnar div.type-select select { float:left; width:69.4%; margin-right: -3px }
	/* width adjustments for IE 5.x & IE6 | Breitenanpassung für Internet Explorer 5.x und 6.0 */
	* html .columnar div.type-text input,
	* html .columnar div.type-text textarea { width:67.2% }
	* html .columnar div.type-select select { width:68.8% }

	/*------------------------------------------------------------------------------------------------------*/

	/**
	* Global fixes for YAML's form construction set
	*
	* @workaround
	* @affected IE 5.x/Win, IE6, IE7
	* @css-for IE 5.x/Win, IE6, IE7
	* @valid no
	*/
	.yform,
	.yform div,
	.yform div * { zoom:1 }

	/**
	* Forms Fieldset/Legend-Bug in IE
	* @see http://www.mattheerema.com/web-design/2006/04/getting-fieldset-backgrounds-and-legends-to-behave-in-ie/
	*
	* @workaround
	* @affected IE 5.x/Win, IE6, IE7, IE8
	* @css-for IE 5.x/Win, IE6, IE7, IE8
	* @valid no
	*/

	/* all IE */
	.yform { padding-top:0\9 }
	.yform fieldset { padding:0 5px\9; padding-top:1em\9 }
	.yform legend { position:absolute\9; top:-.5em\9; *left:0\9 }
	.yform fieldset { position:relative\9; overflow:visible\9;  margin-top:1.5em\9; zoom:1 }
	/* IE5.x, IE6 & IE7 */
	.yform legend { *padding:0 5px }
	.yform fieldset { *padding-top:1.5em }
	/* IE5.x & IE6 */
	* html .yform { padding-top:10px }
}