/**
* Fomrilicious for Contao Open Source CMS
*
* Copyright (C) 2013-2014 eSalesMedia
*
* @package eSM_formilicious
* @link http://www.esales-media.de
* @license http://www.gnu.org/licenses/lgpl-3.0.html LGPL
*
* @author Benjamin Roth <benjamin@esales-media.de>
*/
/**
*
*/
input[type="text"],input[type="password"],input[type="date"],input[type="datetime"],input[type="email"],
input[type="number"],input[type="search"],input[type="tel"],input[type="time"],input[type="url"],textarea, select {
width:100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.widget input.captcha {
max-width: 4em;
}
/**
* Fieldset Styles
*/
.formbody {
display: grid;
grid-gap: 10px;
row-gap: 0.75em;
grid-template-columns: repeat(12, 1fr);
align-items: end;
}
.formbody > fieldset {
grid-column-start: 1;
grid-column: auto / span 12;
display: grid;
grid-gap: 10px;
row-gap: 0.75em;
grid-template-columns: repeat(12, 1fr);
align-items: end;
}
.formbody .widget.w10 { grid-column: auto / span 2; }
.formbody .widget.w11 { grid-column: auto / span 2; }
.formbody .widget.w15 { grid-column: auto / span 2; }
.formbody .widget.w16_5 { grid-column: auto / span 2; }
.formbody .widget.w20 { grid-column: auto / span 3; }
.formbody .widget.w22 { grid-column: auto / span 3; }
.formbody .widget.w25 { grid-column: auto / span 3; }
.formbody .widget.w30 { grid-column: auto / span 4; }
.formbody .widget.w33 { grid-column: auto / span 4; }
.formbody .widget.w35 { grid-column: auto / span 5; }
.formbody .widget.w40 { grid-column: auto / span 5; }
.formbody .widget.w44 { grid-column: auto / span 6; }
.formbody .widget.w45 { grid-column: auto / span 6; }
.formbody .widget.w50 { grid-column: auto / span 6; }
.formbody .widget.w55 { grid-column: auto / span 7; }
.formbody .widget.w60 { grid-column: auto / span 8; }
.formbody .widget.w65 { grid-column: auto / span 8; }
.formbody .widget.w66 { grid-column: auto / span 8; }
.formbody .widget.w70 { grid-column: auto / span 9; }
.formbody .widget.w75 { grid-column: auto / span 9; }
.formbody .widget.w80 { grid-column: auto / span 10; }
.formbody .widget.w85 { grid-column: auto / span 11; }
.formbody .widget.w90 { grid-column: auto / span 11; }
.formbody .widget.w95 { grid-column: auto / span 11; }
.formbody .widget.w100 { grid-column: auto / span 12; }
.formbody .widget.clr { grid-column-start: 1 }
@media screen and (max-width: 599px) {
.formbody .widget.w10,
.formbody .widget.w11,
.formbody .widget.w15,
.formbody .widget.w16_5,
.formbody .widget.w20,
.formbody .widget.w22,
.formbody .widget.w25,
.formbody .widget.w30,
.formbody .widget.w33,
.formbody .widget.w35,
.formbody .widget.w40,
.formbody .widget.w44,
.formbody .widget.w45,
.formbody .widget.w50,
.formbody .widget.w55,
.formbody .widget.w60,
.formbody .widget.w65,
.formbody .widget.w66,
.formbody .widget.w70,
.formbody .widget.w75,
.formbody .widget.w80,
.formbody .widget.w85,
.formbody .widget.w90,
.formbody .widget.w95,
.formbody .widget.w100 {
grid-column: auto / span 12;
grid-column-start: 1;
}
}
/*
.formbody > fieldset legend {
color: inherit;
font-size: 123%;
line-height: 2;
font-weight: normal;
border-bottom: inherit 3px solid;
margin-bottom: 1em;
}
.widget .radio_container legend,
.widget .checkbox_container legend {
color: inherit;
font-size: 100%;
font-weight: normal;
border-bottom: none;
display: block;
margin-bottom: 0.4em;
line-height: 1.5em;
}
.widget .checkbox_container label,
.widget .radio_container label {
font-weight: normal;
display: inline;
margin-bottom: 0;
}
.widget .checkbox_container > span,
.widget .radio_container > span {
display: block;
}
!**
* Headline Styles
*!
.widget.headline {
margin-top: 1em;
!*color: #d7ae6e;*!
font-size: 108%;
font-weight: bold;
min-height: 1.5em;
}
!**
* Widget Styles
*!
.widget {
padding: 0 10px;
margin-bottom: 0.5em;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
min-height: 4em;
float: left;
width: 100%;
}
.widget.cbx {
min-height: 1.5em;
height: 1.5em;
padding: 4px 10px;
}
.widget label {
display: block;
margin-bottom: 0.4em;
line-height: 1.5em;
}
!*.widget.error label {
color: #E23E15;
}*!
.widget.error input,
.widget.error select,
.widget.error textarea {
border-color: #E23E15;
}
.widget p.error {
font-size: 85%;
margin-top: -0.4em;
margin-bottom: 0.4em;
}
.widget.error .errortip {
background-color: rgb(226, 62, 21);
border-bottom-left-radius: 50%;
border-bottom-right-radius: 50%;
border-top-left-radius: 50%;
border-top-right-radius: 50%;
color: rgb(255, 255, 255);
cursor: help;
display: block;
float: right;
font-family: 'Open Sans', Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-variant: normal;
font-weight: normal;
height: 15px;
line-height: 13px;
margin-top: 3.25px;
text-align: center;
vertical-align: top;
width: 15px;
}
.submit_container {
!*padding-top: 1.9em;*!
min-height: 2.1em;
}
.widget.w10 { float: left; width: 10%; }
.widget.w11 { float: left; width: 11.111%; }
.widget.w15 { float: left; width: 15%; }
.widget.w16_5 { float: left; width: 16.6665%; }
.widget.w20 { float: left; width: 20%; }
.widget.w22 { float: left; width: 22.222%; }
.widget.w25 { float: left; width: 25%; }
.widget.w30 { float: left; width: 30%; }
.widget.w33 { float: left; width: 33.333%; }
.widget.w35 { float: left; width: 35%; }
.widget.w40 { float: left; width: 40%; }
.widget.w44 { float: left; width: 44.444%; }
.widget.w45 { float: left; width: 45%; }
.widget.w50 { float: left; width: 50%; }
.widget.w55 { float: left; width: 55%; }
.widget.w60 { float: left; width: 60%; }
.widget.w65 { float: left; width: 65%; }
.widget.w66 { float: left; width: 66.666%; }
.widget.w70 { float: left; width: 70%; }
.widget.w75 { float: left; width: 75%; }
.widget.w80 { float: left; width: 80%; }
.widget.w85 { float: left; width: 85%; }
.widget.w90 { float: left; width: 90%; }
.widget.w95 { float: left; width: 95%; }
.widget.w100 { float: left; width: 100%; }
.widget.clr,
.formbody > fieldset {
clear: left;
}
@media screen and (max-width: 43em) {
.widget.w10,
.widget.w11,
.widget.w15,
.widget.w16_5,
.widget.w20,
.widget.w22,
.widget.w25,
.widget.w30,
.widget.w33,
.widget.w35,
.widget.w40,
.widget.w44,
.widget.w45,
.widget.w50,
.widget.w55,
.widget.w60,
.widget.w65,
.widget.w66,
.widget.w70,
.widget.w75,
.widget.w80,
.widget.w85,
.widget.w90,
.widget.w95,
.widget.w100 { float: none; width: 100%; }
}
.widget.w10:before,
.widget.w10:after,
.widget.w11:before,
.widget.w11:after,
.widget.w15:before,
.widget.w15:after,
.widget.w16_5:before,
.widget.w16_5:after,
.widget.w20:before,
.widget.w20:after,
.widget.w22:before,
.widget.w22:after,
.widget.w25:before,
.widget.w25:after,
.widget.w30:before,
.widget.w30:after,
.widget.w33:before,
.widget.w33:after,
.widget.w35:before,
.widget.w35:after,
.widget.w40:before,
.widget.w40:after,
.widget.w44:before,
.widget.w44:after,
.widget.w45:before,
.widget.w45:after,
.widget.w50:before,
.widget.w50:after,
.widget.w55:before,
.widget.w55:after,
.widget.w60:before,
.widget.w60:after,
.widget.w65:before,
.widget.w65:after,
.widget.w66:before,
.widget.w66:after,
.widget.w70:before,
.widget.w70:after,
.widget.w75:before,
.widget.w75:after,
.widget.w80:before,
.widget.w80:after,
.widget.w85:before,
.widget.w85:after,
.widget.w90:before,
.widget.w90:after,
.widget.w95:before,
.widget.w95:after,
.widget.w100:before,
.widget.w100:after,
form:before,
form:after {
content: " "; !* 1 *!
display: table; !* 2 *!
}
.widget.w10:after,
.widget.w11:after,
.widget.w15:after,
.widget.w16_5:after,
.widget.w20:after,
.widget.w22:after,
.widget.w25:after,
.widget.w30:after,
.widget.w33:after,
.widget.w35:after,
.widget.w40:after,
.widget.w44:after,
.widget.w45:after,
.widget.w50:after,
.widget.w55:after,
.widget.w66:after,
.widget.w65:after,
.widget.w70:after,
.widget.w75:after,
.widget.w80:after,
.widget.w85:after,
.widget.w90:after,
.widget.w95:after,
.widget.w100:after,
form:after {
clear: both;
}
.widget.widget-split input[type="text"],
.widget.widget-split input[type="password"],
.widget.widget-split input[type="date"],
.widget.widget-split input[type="datetime"],
.widget.widget-split input[type="email"],
.widget.widget-split input[type="number"],
.widget.widget-split input[type="search"],
.widget.widget-split input[type="tel"],
.widget.widget-split input[type="time"],
.widget.widget-split input[type="url"],
.widget.widget-split textarea,
.widget.widget-split select
{
max-width: 50% !important;
min-width: 10% !important;
float: left;
margin-right: 10px;
display: inline;
}
.widget.widget-split.widget-split-3 input { max-width: 30% !important; }
.widget.widget-split.widget-split-3 input[type="submit"] { max-width: 70% !important; }
.widget.widget-split.widget-split-4 input { max-width: 40% !important; }
.widget.widget-split.widget-split-4 input[type="submit"] { max-width: 60% !important; }
.widget.widget-split.widget-split-5 input { max-width: 50% !important; }
.widget.widget-split.widget-split-5 input[type="submit"] { max-width: 50% !important; }
.widget.widget-split.widget-split-6 input { max-width: 60% !important; }
.widget.widget-split.widget-split-6 input[type="submit"] { max-width: 40% !important; }
.widget.widget-split.widget-split-7 input { max-width: 70% !important; }
.widget.widget-split.widget-split-7 input[type="submit"] { max-width: 30% !important; }
.widget.fl_right input[type="submit"],
.submit_container.fl_right .submit {
float: right;
}
.widget.lblp {
padding-top: 1.9em;
min-height: 2.1em;
}
.widget.autoh {
min-height: 0;
}
!**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*!
.widget,
form {
*zoom: 1;
}
*/