/*!
 * Author: Duncrow GmbH
 * Web: http://www.duncrow.com
 * Copyright 2015 Duncrow
 */

/* ================================
	form general
=================================*/
input,
textarea,
select { font-family: 'Open Sans', sans-serif; border:none; color:#3188b6; font-weight:300; }

form .widget { margin-bottom:20px; position:relative; overflow: hidden; }
form .widget-captcha { padding-left:30%; }
form .submit_container { text-align:right; }

/* ================================
	label, legend, fieldset
=================================*/
form .widget label,
form .widget legend { color:#3188b6; float:left; width:30%; padding:.2em .4em 0 0; box-sizing:border-box; -moz-box-sizing:border-box; }
form .widget.input-first label { padding-right:0; padding-left:.2em; }
form .widget legend,
form .widget-captcha label { position:absolute; left:0; top:0; }
form .widget-captcha label { word-break: break-all; }
form .widget fieldset { border:none; padding:.4em 0 0 30%; position:relative; }

/* ================================
	msgs (error, explanation)
=================================*/
form .widget-explanation { margin-bottom:0; font-size:14px !important; margin-left:30%; }
form .widget-explanation p { margin-bottom:10px; }
form p.error { color:#cc2d00; clear:both; font-size:.9em; }
form .widget p.error { margin:0 0 0 30%; padding-top:.3em; }
form .widget.no-inline p.error { margin-left:0; }
form .widget-captcha p.error { margin-left:0; }

/* ================================
	input,textareas,select
=================================*/
form textarea,
form input.text,
form input.captcha,
form .select-wrapper { background:#e2ecf1; background-clip:padding-box; font-size:1em; line-height:normal; height:34px; width:70%; padding:.3em 1em; float:left; border:1px solid #91bfd6; border-radius:5px; box-sizing:border-box; -moz-box-sizing:border-box; }
form .widget.no-inline > textarea,
form .widget.no-inline > input.text,
form .widget.no-inline > .select-wrapper { float:none; width:100%; }
form input.captcha { max-width:100px; margin-right:15px; }
form .select-wrapper { position:relative; }
form .widget-captcha .captcha_text { margin:.2em 0 0 0; max-width:300px; display:inline-block; }
form textarea { height:6em; line-height:1.6em; }

form textarea.error,
form input.text.error,
form input.captcha.error,
form .widget.error > .select-wrapper { border-color:#fd7142 !important; background:#fff2ee; }

form textarea:focus,
form input.text:focus,
form .select-wrapper.focus { border-color:#91bfd6; background:#fff; outline:none; }
form select:focus { outline:none; }

form .select-wrapper:before { content:'\f0d7'; color:#3188b6; font-family:'icomoon', sans-serif; display:block; position:absolute; top:50%; right:10px; margin-top:-10px; width:16px; height:20px; }
form .select-wrapper select { background:transparent; position:absolute; top:0; left:0; padding:0 1em; width:100%; height:100%; appearance:none; -webkit-appearance:none; -moz-appearance:none; }
form .select-wrapper select::-ms-expand { display:none; }

.ce_comments form input.text, 
.ce_comments form input.captcha, 
.ce_comments form .select-wrapper { position:relative; margin-bottom: 40px; }
.ce_comments form input.captcha {max-width:100px;margin-right:15px;}
.ce_comments form .widget-captcha .captcha_text { margin:.2em 0 0 0; max-width:300px; display:inline-block; }
.ce_comments form .widget-captcha { padding-left: 30%; display: inline-block;margin-top: 20px; }
.ce_comments form .widget-captcha label { position:relative; }
.ce_comments form textarea { height:6em; line-height:1.6em; }

/* ADDITIONAL COLORS */
form input.text.greenfield,
.select-wrapper.greenfield { background:#EBF7CF; border:1px solid #95BF30; }

/* ================================
	Checkbox, Radio
=================================*/
form .widget-checkbox fieldset > span,
form .widget-radio fieldset > span { display:block; margin:0 1.5em 5px 0; min-height:1.2em; position:relative; }
form .widget-radio fieldset > span { display:inline-block; }
form .widget.no-inline fieldset > span { display:block; }

form input[type=checkbox],
form input[type=radio] { position:absolute; opacity:0;}
form input[type=checkbox] + label,
form input[type=radio] + label { float:none; display:inline-block; cursor:pointer; position:relative; width:auto; padding:0 0 0 2.3em; margin:0 1.5em 0 0; min-height:1.2em; line-height:1.2em; }
form input[type=checkbox] + label:before,
form input[type=radio] + label:before { content:''; background-repeat: no-repeat; background-image:url(/files/themes/vcoe_v2/img/form.jpg); display:block; position:absolute; top:2px; left:0; width:16px; height:16px;}
form input[type=checkbox] + label:before {background-position: -20px -50px;}
form input[type=radio] + label:before { border-radius:14px;background-position: -20px -15px; }
form input[type=checkbox]:checked + label:before{background-position: -73px -50px;}
form input[type=radio]:checked + label:before {background-position: -73px -15px; }
form input[type=checkbox]:focus + label:before,
form input[type=radio]:focus + label:before { box-shadow:0 0 5px rgb(49,136,182); }

form input[type=checkbox] + label.empty,
form input[type=radio] + label.empty { margin-right:0; padding-left:1.2em; }

/* ================================
	button
=================================*/
form input[type=submit],
form button { border:none; cursor:pointer; -webkit-appearance:none; }

form button.submit { display:inline-block; padding:10px 15px; font-size:14px; font-weight:normal; line-height:1.1em; text-align:center; text-decoration:none; color:#fff; background:#3188b6; box-sizing:border-box; -moz-box-sizing:border-box; border-radius:5px; font-weight: bold;
    text-transform: uppercase; }

/* ================================
	subcolumns
=================================*/
form .ym-grid > div { padding-left:0; padding-right:0; }
form .ym-grid .ym-gbox,
form .ym-grid .ym-gbox-left,
form .ym-grid .ym-gbox-right { padding-left:0; padding-right:0; }

form .ym-grid > .col_1 { padding:.2em .4em 0 0; }
form .ym-grid > .col_2 { padding-right:.4em; }
form .ym-grid > .col_3 { padding-left:.4em; }

form .ym-grid > .col_1 label { display:block; margin-bottom:20px; }
form .ym-grid .widget label { display:none; }
form .ym-grid .widget p.error { margin-left:0; }
form .ym-grid textarea,
form .ym-grid input.text,
form .ym-grid .select-wrapper { width:100%; }

/* ================================
	ie8 hack
=================================*/
.ie8 form input[type=checkbox],
.ie8 form input[type=radio] { display:inline; margin-top:7px; }
.ie8 form input[type=checkbox] + label,
.ie8 form input[type=radio] + label { padding-left:1em; }
.ie8 form input[type=checkbox] + label:before,
.ie8 form input[type=checkbox] + label:after,
.ie8 form input[type=radio] + label:before,
.ie8 form input[type=radio] + label:after { display:none; }


.ce_survey form .widget.no-inline .select-wrapper,
.ce_survey form .widget.no-inline > input.text[size] { float:none; width: auto; }
.ce_survey form .select-wrapper { display: inline-block; padding: 0; }
.ce_survey form .select-wrapper select { position: relative; padding-right: 2em; }


/* ================================
	max-width 1199px Screen
=================================*/
@media (max-width: 1199px) {

	/* forms in colsets */
	.ym-grid form .ym-grid > .col_1 { display:none; }
	.ym-grid form .ym-grid .widget label { display:block; }
	.ym-grid form .ym-grid > * { width:100%; float:none; padding-left:0 !important; padding-right:0 !important; margin:0 0 20px 0;  }

	.ym-grid form .widget label,
	.ym-grid form .widget legend { width:100%; position:static; margin-bottom:5px; float:none; display:block; }
	
	.ym-grid form .widget fieldset,
	.ym-grid form .widget-captcha { padding-left:0; }

	.ym-grid form textarea,
	.ym-grid form input.text,
	.ym-grid form .select-wrapper { width:100%; float:none; }

	.ym-grid form .widget-explanation,
	.ym-grid form .widget p.error { margin-left:0; }

}

/* ================================
	max-width 649px Screen
=================================*/
@media (max-width: 649px) {
	
	form .ym-grid > .col_1 { display:none; }
	form .ym-grid .widget label { display:block; }
	form .ym-grid > * { width:100%; float:none; padding-left:0 !important; padding-right:0 !important; margin:0 0 20px 0;  }
	
	form .widget label,
	form .widget legend { width:100%; position:static; margin-bottom:5px; float:none; display:block; }
	
	form .widget fieldset,
	form .widget-captcha { padding-left:0; }
	
	form textarea,
	form input.text,
	form .select-wrapper { width:100%; float:none; }
	
	form .widget-explanation,
	form .widget p.error { margin-left:0; }
	
}