/* CSS Document */
/*###############################################
    CSS StyleSheet for Salsa 4
    Xform für CMS Salsa 4
    
    HAUPTFARBEN
    * Dunkelblau    -       #054BA1
    * Hellblau      -       #ecf6fc
    * Dunkelgruen   -       #4B7F27
    * Hellgruen     -       #93DD64
    * Grau          -       #666
    ZUSAETZLICHE FARBEN
    * Dunkelrot     -       #DF0000
    * Hellrot       -       #FFDFE0
    * Orange        -       #FFA200;
    * Hellorange    -       #fff9df;

    Copyright (C) 2010, Ralf Otte
    www.nt-o.de
###############################################*/

/***********************************************
>>> WRAPPER
***********************************************/
form {
    margin:auto;
}

.xform_std {
	font-family:sans-serif;
    font-size:0.8em;
	border:1px solid #054BA1;
padding: 3px;
    padding-bottom: 0.2em;
    margin-top: 1em;
}

.xform_std div.fieldwrap {
	margin:0 -1%;
	padding:0em 7px 0em 7px;

}

.xform_std fieldset {
background: grey;
padding: 3px;
	clear:both;
}

.xform_std label {
	float:left;
	display:table;
	width:1%;
	margin:0 1%;
}

.xform_std span.blockwrap {
	display:table-cell;
	width:1%;
}

/***********************************************
>>> LABELS
***********************************************/
.xform_std label.ganz {
	width:98%;
	display:block;
	padding-bottom:1em;
}

.xform_std label.dreiviertel {
	width:73%;
	display:block;
	padding-bottom:1em;
}

.xform_std label.zweidrittel {
	width:64.666%;
	display:block;
	padding-bottom:1em;
}

.xform_std label.halb {
	width:48%;
	display:block;
	padding-bottom:1em;
}

.xform_std label.drittel {
	width:31.333%;
	display:block;
	padding-bottom:1em;
}

.xform_std label.viertel {
	width:23%;
	display:block;
	padding-bottom:1em;
}

/***********************************************
>>> TYPO
***********************************************/
#xform .xform_std h3
{
	background:#054BA1;
	margin:0;
	padding:0.5em;
        color: lightgrey;
    font-variant:small-caps;
    font-size: 1.2em;
    font-weight: bold;
}
#xform .xform_std p  {
    padding: 6px;
    color: #666;
}
/***********************************************
>>> SPANS
***********************************************/
.xform_std .hint {
	color:#999;
	font-style:italic;
}
.xform_std .title {
	color:#054BA1;
    font-size: 0.8em;
	font-weight: bold;
}

/***********************************************
>>> FORMULARELEMENTE
***********************************************/
textarea {
    margin-top: 1em;
    margin-bottom: 1em;
    width: 99%;
}

.xform_std input,.xform_std select,.xform_std textarea {
	width:100%;
	display:block;
	border:1px solid #d0d6da;
	border-left:4px solid #054BA1;
	background:#ecf6fc;
	font-size:1.25em;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	-ms-box-sizing:border-box;
    margin-top: 3px;
	padding:6px 6px 6px 8px;
}

.xform_std input:focus,.xform_std select:focus,.xform_std textarea:focus
{
	border:1px solid #d0d6da;
	border-left:3px solid #4B7F27;
	background:#e0eadd;
}

/* >>> Spezielle Klassen für Selects
----------------------------------------------*/
.xform_std select {
	padding:5px 1px 5px 6px;
}

.xform_std input.select {
	display:block;
	float:left;
	margin:0;
}

.xform_std label.inputselect span.title {
	display:table;
	margin:0 0 0px;
}

/* >>> Button
----------------------------------------------*/
button {
width: 100%;
border: 1px solid #054BA1;
margin-top: 1em;
margin-bottom: 1em;
padding: 0.5em;
background:#ecf6fc;
color: #054BA1;
font-weight: bold;
}

button:hover {
border: 1px solid #4B7F27;
background:#e0eadd;
color: #4B7F27;
font-weight: bold;
cursor: pointer;
}

.xform_std label br
{
	margin:0 0 2px;
}

.xform_std label.wauto
{
	width:auto;
	margin-right:15px;
}

.xform_std label.radiocheck
{
	margin-bottom:10px;
}

.xform_std label.radiocheck span.blockwrap
{
	padding-right:0;
}

.xform_std label.wauto span.blockwrap
{
	display:inline;
}

.xform_std label.radiocheck span.title
{
	display:block;
	margin:0 0 0 20px;
	padding:0;
}
/***********************************************
>>> CSS FÜR EXTERNE JQUERYS
***********************************************/

/* >>> Zeichenzähler
----------------------------------------------*/
.originalTextareaInfo {
text-align:right;
font-size:12px;
color:#054BA1;
margin-top: -12px;
margin-bottom: 12px;
}

.warningTextareaInfo {
text-align:right;
font-size:12px;
color:#DF0000;
margin-top: -12px;
}