/**
* "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
{
/**
* YAML Forms - visual styling
*
* (en) visual form styling area
* (de) Festlegung des optischen Erscheinungsbildes
*/
.yform {
/*margin:0 0 1em 0;
padding:10px;*/
padding: 0;
}
.yform fieldset {
margin:0 0 1em 0;
padding:0.5em;
}
.yform .type-button input {
padding:5px 1em;
}
/*------------------------------------------------------------------------------------------------------*/
/**
* 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 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; }
/* 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; }
/* 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;
height:15px;
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 {
display:block;
margin:0.5em 0;
position:relative;
zoom:1;
}
.type-check div {
float:left;
margin-top: 10px;
margin-right: 38px;
}
.type-check div label{
color: #4d4d4d;
font-size: 11px;
line-height: 15px;
margin: 0;
padding: 0;
}
.bigLetter{
color: #b12349;
font-size: 17px;
font-weight:bold;
margin-right: 5px;
}
.yform div.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-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 div.error {
padding:0.5em;
}
/* 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 */
color: #4d4d4d;
font-size: 9px;
line-height: 15px;
margin: 0;
padding: 0;
}
/* 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:0px; text-align:center; }
.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: 195px;
margin-right: -3px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 1px 1px #d6d6d6;
-webkit-box-shadow: 1px 1px #d6d6d6;
box-shadow: 1px 1px #d6d6d6;
height: 10px;
background: -moz-linear-gradient(center top , #FFFFFF, #EEEEEE 1px, #FFFFFF 20px);
background: -webkit-linear-gradient(#EEEEEE,#FFFFFF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FBFBFB', endColorstr='#FFFFFF');
}
.formBlock {
float:left;
margin-right: 20px;
}
.formBlock.last{
margin-right: 0;
}
.formBlock.first input{
width: 282px!important;
}
#street {
height: 72px;
}
.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; }
}