@if $ym-base-forms == true {
	/**
	* @section Form Module
	*/

	/** Vertical-Forms - technical base (standard)
	*
	* |-------------------------------|
	* | form                          |
	* |-------------------------------|
	* |   label                       |
	* |   input / select / textarea   |
	* |-------------------------------|
	* | /form                         |
	* |-------------------------------|
	*
	* (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
	*/

	.ym-form,
	.ym-form fieldset { overflow:hidden; }

	.ym-form {
		div { position:relative; }

		label,
		.ym-label,
		.ym-message {
			position:relative;
			line-height: 1.5;
			display:block; //important for Safari
		}

		.ym-message {
			clear: both;
		}

		.ym-fbox-check label {
			display:inline;
		}

		input,
		textarea { cursor:text; }

		.ym-fbox-check input,
		input[type="image"],
		input[type="radio"],
		input[type="checkbox"],
		select,
		label {
			cursor:pointer;
		}

		// small adjustments for Internet Explorer - all versions
		textarea {
			overflow: auto;
		}

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

		// styling containing DIV elements
		// Gestaltung der kapselnden DIV-Elemente
		.ym-fbox:before,
		.ym-fbox-text:before,
		.ym-fbox-select:before,
		.ym-fbox-check:before,
		.ym-fbox-button:before {
			content:"";
			display:table;
		}

		.ym-fbox:after,
		.ym-fbox-text:after,
		.ym-fbox-select:after,
		.ym-fbox-check:after,
		.ym-fbox-button:after {
			clear:both;
			content:".";
			display:block;
			font-size:0;
			height:0;
			visibility:hidden;
		}

		// avoid jumping checkboxes & radiobuttons in IE8
		.ym-fbox-check input:focus,
		.ym-fbox-check input:hover,
		.ym-fbox-check input:active,
		input[type="radio"]:focus,
		input[type="radio"]:hover,
		input[type="radio"]:active,
		input[type="checkbox"]:focus,
		input[type="checkbox"]:hover,
		input[type="checkbox"]:active {
			border:0 none;
		}

		// styling standard form elements with 'almost' equal flexible width
		// Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite

		// default form element width
		input,
		textarea,
		select {
			display:block;
			position:relative;
			@include ym-box-sizing(border-box);
			width:70%;
		}

		// overrule width settings for inline form elements ...
		.ym-fbox-check input,
		input[type="radio"],
		input[type="checkbox"] {
			display: inline;
			margin-left: 0;
			margin-right: 0.5ex;
			width: auto;
			height: auto;
		}

		input[type="image"] {
			border: 0;
			display: inline;
			height: auto;
			margin: 0;
			padding: 0;
			width: auto;
		}

		label,
		.ym-label {
			@include ym-box-sizing(border-box);
		}

		// styling buttons
		.ym-fbox-button {
			input {
				display: inline;
				overflow:visible;  // Fixes IE7 auto-padding bug
				width:auto;
			}
		}

		.ym-inline {
			display: inline-block;
			float: none; // reset columnar floating ...
			margin-right: 0; // reset rounding tolerance ...
			width: auto;
			vertical-align: baseline;
		}
	}

	/* default form wrapper width */
	.ym-fbox-wrap {
		display: table;
		table-layout: fixed;
		width: 70%;

		input,
		textarea,
		select {
			width: 100%;
		}

		input[type="image"] {
			width: auto;
		}

		input[type="radio"],
		input[type="checkbox"] {
			display: inline;
			width: auto;
			margin-left: 0;
			margin-right: 0.5ex;
		}

		label,
		.ym-label {
			display: inline;
		}
	}

	.ym-full {
		input,
		textarea,
		select {
			width:100%;
		}
		.ym-fbox-wrap {
			width: 100%;
		}
	}

	/**
	*  Columnar forms display - technical base (optional)
	*
	*  |-------------------------------------------|
	*  | form                                      |
	*  |-------------------------------------------|
	*  |                                           |
	*  |   label   |   input / select / textarea   |
	*  |                                           |
	*  |-------------------------------------------|
	*  | /form                                     |
	*  |-------------------------------------------|
	*
	*  (en) Styling of forms where label floats left of form-elements
	*  (de) Formulargestaltung, bei der die label-Elemente nach links fließen
	*/

	.ym-columnar {
		// Columnar display
		// Spalten-Darstellung

		input,
		textarea,
		select {
			float:left;
			margin-right: -3px;
		}

		label,
		.ym-label {
			display:inline;
			float:left;
			width:30%; // Can be fixed width too | Kann auch eine fixe Angabe sein
			z-index: 1;
		}

		// Indent Checkbox fields to match label-width
		// Checkboxen um den gleichen Wert einrücken, wie die Breite der labels
		.ym-fbox-check input,
		.ym-message {
			margin-left:30%;
		}

		// reset indention for wrapped form elements ...
		.ym-fbox-wrap {
			margin-left: 30%;
			margin-right: -3px;

			.ym-message {
				margin-left: 0%;
			}

			label {
				float:none;
				width:auto;
				z-index: 1;
				margin-left: 0;
			}

			input {
				margin-left: 0;
				position:relative;
			}
		}

		.ym-fbox-check {
			position:relative;

			label,
			.ym-label {
				padding-top: 0;
			}

			input {
				top: 3px;
			}
		}

		.ym-fbox-button {
			input {
				float:none;
				margin-right: 1em;
			}
		}
	}

	.ym-fbox-wrap + .ym-fbox-wrap {
		margin-top: 0.5em;
	}

	/* global and local columnar settings for button alignment */
	.ym-columnar fieldset .ym-fbox-button,
	fieldset.ym-columnar .ym-fbox-button {
		padding-left:30%;
	}
}