﻿@charset "UTF-8";
/**
 * "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.2.1
 * @revision        $Revision: 455 $
 * @lastmodified    $Date: 2010-01-01 17:33:05 +0100 (Fr, 01. Jan 2010) $
 */

@media screen, projection {

/**
 * ---------------------------------------------------------------------------------------------------- #
 *
 *  Festlegung des optischen Erscheinungsbildes
 *  
 *  @section yaml_forms_visual_styling
 */

.yform fieldset {
	margin-bottom: 24px;
    border-bottom: 1px solid #eaeaea;
    padding-bottom: 16px;
}

.yform legend {
    overflow: hidden;
}

.yform legend span {
	display: block;
	margin-bottom: 30px;
	font-weight: 700;
}

.yform label {
    padding: 2px 0;
    font-weight: 700;
}

/* Proportionale Fonts für alle Form-Elemente */
.yform input,
.yform textarea,
.yform select, 
.yform optgroup {
    font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
    line-height: 15px;
}

.yform .type-text input,
.yform .type-text textarea,
.yform .type-select select {
    border: 1px solid #bcbcbc;
	padding: 2px 4px;
    background-color: #fff;
}

/* Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
.yform .type-text input:hover,
.yform div select:hover,
.yform div textarea:hover {
    border: 1px solid #999;
}

.yform .type-text input:focus,
.yform div select:focus,
.yform div textarea:focus,
.yform .type-text input:active,
.yform div select:active,
.yform div textarea:active {
    background: #dbe4ed;
}

.yform .type-check .checkbox,
.yform .type-check .radio {
	margin: 0 5px 0 0;
}

.yform .type-check input {
    width: 15px;
    height: 15px;
	vertical-align: middle;
}

.yform .type-check label {
	width: auto;
	vertical-align: middle;
	font-weight: 400;
}

.yform .type-check div {
	margin-bottom: 16px;
}

.yform .type-text,
.yform .type-select,
.yform .type-check,
.yform .type-button {
	position: relative;
	overflow: hidden;
	margin-bottom: 8px;
}

.yform .type-button {
	border-top: 1px solid #eaeaea;
	padding-top: 16px;
}


/**
 * ---------------------------------------------------------------------------------------------------- #
 *
 * Vertical-Forms - technical base (standard)
 *
 * |-------------------------------|
 * | fieldset                      |
 * |-------------------------------|
 * |   label                       |
 * |   input / select / textarea   |
 * |-------------------------------|
 * | /fieldset                     |
 * |-------------------------------|
 *
 * Formulargestaltung, bei der sowohl label als auch input/select/textarea mit display:block; gestaltet werden
 *
 */

/* Allgemeine Formatierung des Formulars */
.yform { overflow: hidden; }
.yform fieldset { overflow: hidden; }
.yform label { display: block; cursor: pointer; }

/* Versteckte Felder wirklich verstecken (sonst ggf. hässliche Lücken im Firefox) */
.yform input[type=hidden] { display: none !important; }

.yform .type-select select optgroup {
    font-style: normal;
    font-weight: 700;
}

.yform .type-check input { cursor: pointer; }
.yform .type-check label { display: inline; }

/* Gestaltung von Buttons */
.yform .type-button input {
    overflow: visible;  /* Fixes IE7 auto-padding bug */
    cursor: pointer;
}

/* Vermeidung von springenden Checkboxen & Radiobuttons im IE8 */
.yform div.type-check input:focus,
.yform div.type-check input:hover,
.yform div.type-check input:active { border: 0 none; }


/**
 * ---------------------------------------------------------------------------------------------------- #
 *
 * Columnar forms display - technical base (optional)
 *
 * |-------------------------------------------|
 * | fieldset                                  |
 * |-------------------------------------------|
 * |                                           |
 * |   label   |   input / select / textarea   |
 * |                                           |
 * |-------------------------------------------|
 * | /fieldset                                 |
 * |-------------------------------------------|
 *
 * Formulargestaltung, bei der die label-Elemente nach links fließen
 *
 */

/* Spalten-Darstellung */
.columnar .type-text label,
.columnar .type-select label {
    float: left;
    width: 180px;
}

.columnar div.type-text input,
.columnar div.type-text textarea { float: left; width: 190px; }
.columnar div.type-select select { float: left; width: 200px; }


/**
 * ---------------------------------------------------------------------------------------------------- #
 *
 * Fehlermeldungen
 * 
 * @section error_handling
 */
 
.yform div.error input,
.yform div.error select,
.yform div.error textarea {
    border: 3px solid #ab1717;
}

.yform .type-text.error input:hover,
.yform div.error select:hover,
.yform div.error textarea:hover {
    border: 3px solid #cc0000;
}

.yform .type-text.error input:focus,
.yform div.error select:focus,
.yform div.error textarea:focus,
.yform .type-text.error input:active,
.yform div.error select:active,
.yform div.error textarea:active {
    border: 3px solid #cc0000;
}

.yform div.error .text {
    width: 186px;
}

.yform .type-check.error label {
    color: #ab1717;
}

.yform .error_box {
    padding: 16px;
    background-color: #dbe4ed;
}

.yform .error_box li {
    margin-bottom: 16px;
}

.yform .error_box label {
    display: inline-block;
    color: #ab1717;
}

.yform .error_box span {
    color: #333;
}

.yform .error_box .main {
    width: 128px;
    color: #ab1717;
}

}