/**
* "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
/**
* 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
fieldset
border: 1px #ddd solid
background: #fafafa
margin: 0 0 1em 0
padding: 0.5em
legend
font-size: 125%
font-weight: normal
color: #000
label
color: #666
input, textarea, select, optgroup
font-family: Arial, Helvetica, sans-serif
.type-text
input, textarea
border: 1px solid #ddd
.type-select select
border: 1px solid #ddd
div
&.type-text input:focus, select:focus, textarea:focus, &.type-text input:hover, select:hover, textarea:hover, &.type-text input:active, select:active, textarea:active
border: 1px #a66 solid
background: #fff
.type-button input
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(#{$yaml_img_dir}/button_gray.png) top left repeat-x
padding: 5px 1em
&[type=reset]
color: #300
background: #661717 url(#{$yaml_img_dir}/button_red.png) top left repeat-x
&[type=submit]
color: #330
background: #5e5607 url(#{$yaml_img_dir}/button_yellow.png) top left repeat-x
&.reset
color: #300
background: #661717 url(#{$yaml_img_dir}/button_red.png) top left repeat-x
&.submit
color: #330
background: #5e5607 url(#{$yaml_img_dir}/button_yellow.png) top left repeat-x
div.type-button input
&:focus, &:hover, &: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
&.reset
&:focus, &:hover, &:active
background: #800
color: #fff
&.submit
&:focus, &:hover, &:active
background: #880
color: #fff
overflow: hidden
fieldset
overflow: hidden
label
display: block
cursor: pointer
legend
background: transparent
border: 0
padding: 0 0.5em
.message
display: block
margin-bottom: 0.5em
color: #666
input[type=hidden]
display: none !important
sup
color: #800
font-weight: bold
div
&.type-text, &.type-select, &.type-check
margin: 0.5em 0
padding: 3px 0.5em
position: relative
overflow: hidden
&.type-button
margin: 0.5em 0
padding: 3px 0.5em
position: relative
overflow: hidden
padding: 3px 0em
.type-text
input, textarea
display: block
position: relative
padding: 0.3em 0.3em
width: 58.5%
.type-select select
display: block
position: relative
padding: 0.3em 2px 0.3em 1px
width: 60%
cursor: pointer
optgroup
font-style: normal
font-weight: bold
.type-check
input
cursor: pointer
label
display: inline
.type-button input
cursor: pointer
overflow: visible
width: auto
div
&.error
border: 1px #a00 dashed
background: #faf4f4
padding: 0.5em
label
color: #000
font-weight: bold
.message
color: #800
&.type-check input
&:focus, &:hover, &:active
border: 0 none
/* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus
/* Styling of custom styled buttons | Gestaltung von individuell gestalteten Buttons
/* optional button styling for IE6 using classes
/* :hover and :focus status on buttons | Effekt zur Hervorhebung von Schaltern bei :hover oder :focus
/*------------------------------------------------------------------------------------------------------
/**
* 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
/* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox)
/* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben
/* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente
/* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite
/* Styling of buttons | Gestaltung von Buttons
/* Styling of error-messages | Fehlermeldungen
/* avoid jumping checkboxes & radiobuttons in IE8
/*------------------------------------------------------------------------------------------------------
/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels
.full div
&.type-text
input, textarea
width: 95.5%
margin-right: -3px
&.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, textarea
width: 95.5%
&.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, .type-select label
float: left
width: 30%
/* Can be fixed width too | Kann auch eine fixe Angabe sein
div
&.type-check input, &.error .message
margin-left: 30%
fieldset div.type-button
padding-left: 30%
/* Indent Checkbox fields to match label-width | Checkboxen um den gleichen Wert einrücken, wie die Breite der labels
fieldset.columnar div.type-button
padding-left: 30%
.columnar div
&.type-text
input, textarea
float: left
width: 67.8%
margin-right: -3px
&.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, textarea
width: 67.2%
&.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
zoom: 1
div
zoom: 1
*
zoom: 1
padding-top: 0
fieldset
padding: 0 5px
padding-top: 1em
legend
position: absolute
top: -0.5em
left: 0
fieldset
position: relative
overflow: visible
margin-top: 1.5em
zoom: 1
legend
padding: 0 5px
fieldset
padding-top: 1.5em
/**
* 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
/* IE5.x, IE6 & IE7
/* IE5.x & IE6
* html .yform
padding-top: 10px