/**
* "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
* @revision $Revision: 470 $
* @lastmodified $Date: 2010-10-03 18:16:04 +0200 (So, 03 Okt 2010) $
*/
@media screen, projection
{
/**
* Form Defaults
*
* (en) visual form defaults
* (de) Festlegung genereller Einstellungen von Standard-Formularen
*/
input,
select { vertical-align:middle; }
select,
input,
textarea { color:#444; }
/* align checkboxes, radios, text inputs with their label */
/* by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; *vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }
/* hand cursor on clickable input elements */
label,
input[type=button],
input[type=submit],
button { cursor: pointer; }
/* make buttons play nice in IE
/* www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
.ie button { width: auto; overflow: visible; }
/*------------------------------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
* Form Field Message-/Hintbox
*---------------------------------------------------------------------------*/
.messagebox { z-index: 1000; }
.formbody .helpicon { display: none; }
/*------------------------------------------------------------------------------------------------------*/
/**
* 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; zoom:1; }
.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 .type-text:after,
.yform .type-select:after,
.yform .type-check:after,
.yform .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 .type-text,
.yform .type-select,
.yform .type-check,
.yform .type-button { display:block; margin:0.5em 0; padding:3px 0.5em; position:relative; zoom:1; }
.yform .type-button { 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 { cursor:pointer; overflow:visible;/* Fixes IE7 auto-padding bug */ width:auto; }
/* Styling of error-messages | Fehlermeldungen */
.yform .error { border:1px #a00 dashed; background:#faf4f4; padding:0.5em; }
.yform .error label { color:#000; font-weight:bold; }
.yform .error .message { color:#800; }
/* avoid jumping checkboxes & radiobuttons in IE8 */
.yform .type-check input:focus,
.yform .type-check input:hover,
.yform .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 .type-text input,
.full .type-text textarea { width:95.5%; margin-right: -3px; }
.full .type-select select { width:97.0%; margin-right: -3px; }
/*------------------------------------------------------------------------------------------------------*/
/**
* 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 .type-check input { margin-left:30%; }
.columnar .error .message { margin-left:30%; }
.columnar fieldset .type-button,
fieldset.columnar .type-button { padding-left:30%; }
.columnar .type-text input,
.columnar .type-text textarea { float:left; width:67.8%; margin-right: -3px; }
.columnar .type-select select { float:left; width:69.4%; margin-right: -3px; }
/*------------------------------------------------------------------------------------------------------*/
/**
* 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; }
}