/*
 cw == commonwidget. These definitions are for the deployed guestbook/formular widgets.
 This file gets loaded with Common.Widget and Common.loadCss(). See forms.xsl or guestbook_list.xsl
 In beng-res, there is a css file called " src/res/widgets/css/config.css" where this defs
 came from.
*/

.cw_error_msg {
	border			: 2px solid #F00000;
	background-color: #FFFFFF;
	color			: #F00000;
	padding			: 2px;
	margin-bottom	: 10px;
}

.cw_error {
	color: #FF0000;
	text-shadow: 1px 1px #FFFFFF;	
	/* needed for mobile checkboxes */
	visibility      : visible !important;
}

.cw_hr {
	border-bottom-width	: 1px;
	border-bottom-style	: solid;
	margin				: 5px 0 5px 0;
	width				: 100%;
}

div.formWidget {
	display: block !important;
}

div.formWidget ul {
    list-style: none;
    padding: 0;                    
    margin: 0;
    overflow-x: visible;
}
div.formWidget ul li {
    padding: 0.3em 0;
    margin: 0;
    width:100%;
    float:left;
}
div.formWidget li > div {
    float: left;
}


div.formWidget div.formWidgetField {
	margin-top			: 1em;
	margin-bottom		: 1em;
	clear				: both;
}

div.formWidget li div.formWidgetHeading {
	width				: 100%;
	border-bottom		: 1px solid;
	border-color		: inherit;
}

div.formWidget div.formWidgetLabel {
	display				: inline-block;
	width				: 38%;
}

div.formWidget div.formWidgetInput {
	float				: left;
	width				: 62%;
}

div.formWidget input.formWidgetTextInput,
div.formWidget select.formWidgetSelect,
div.formWidget div.formWidgetTextarea {
	width				: 100%;
}

div.formWidget div.formWidgetInput textarea{
	font				: inherit;
}

div.formWidget div.formWidgetTextarea textarea {
	font				: inherit;
	width				: 100%;
	height				: 7em;
	/* max-height=14em because jQuery mobile resizes textareas to a wrong height */
	max-height          : 14em;
}

.formWidget form.submitted *:invalid,
.formWidget .visited:invalid {
	border: 1px solid rgba(255,0,0,0.65) !important;
	outline: none; /* (PBT: #11455) No outline, we have border already */
}

.formWidget input[type=checkbox]{
	float: left;	
}

/* disable firefox's red boxes on required fields */
.formWidget textarea:-moz-submit-invalid,
.formWidget select:-moz-submit-invalid,
.formWidget input:-moz-submit-invalid,
.formWidget textarea:-moz-ui-invalid,
.formWidget select:-moz-ui-invalid,
.formWidget input:-moz-ui-invalid {
  box-shadow: none;
}

.formWidget .formWidgetLabel input[type=checkbox]{
	float: none;
	vertical-align: middle;
}

.formWidget .formWidgetLabel label {
	vertical-align: middle;
}

.formWidget .cw_link {
	float: left;
	padding-left: 5px;
	max-width: 600px;
}

.device-mobile .formWidget .cw_link {
	float: none;
	padding-left: 0;
}

div.formWidget label.formWidgetLabel.formWidgetTextareaLabel {
	vertical-align		: top;
}

div.formWidget input.formWidgetNumberInput {
	width				: 60px;
}

div.formWidget input.formWidgetDateInput {
	width				: 150px;
}

.cm-pixel-medium div.formWidget div.formWidgetLabel,
.cm-pixel-small div.formWidget div.formWidgetLabel, 
.cm-pixel-medium div.formWidget div.formWidgetInput,
.cm-pixel-small div.formWidget div.formWidgetInput 
{
    width: 100%;
}

@media screen and (max-width: 600px) {
    div.formWidget div.formWidgetLabel {
        width: 100%;
    }
    div.formWidget div.formWidgetInput {
        width: 100%;
    }
}

body.device-mobile .cw_select {
    font-size: inherit;
}

.cm_box_sizing {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

textarea.cw_input {
    font-family: Arial,Tahoma,Verdana,sans-serif;
    font-size: 12px;
    resize: vertical;   /* allow vertical resize only */
}

.formWidget .w_body_table .w_td_label:last-of-type .formWidgetInput {
	width: 100%;
	display: table;
}

.formWidget .w_body_table .w_td_label:last-of-type .formWidgetInput > * {
	display: table-cell;
}
.formWidget .w_body_table .w_td_label:last-of-type .formWidgetInput > *:first-child {
	text-align: left;	
}
.formWidget .w_body_table .w_td_label:last-of-type .formWidgetInput > *:last-child {
	text-align: right;
}

.formWidget .w_body_table .w_td_label.cm4all-form-checkbox  > .formWidgetLabel {
	width: 100%;
	display: table;
}

.formWidget .w_body_table .w_td_label.cm4all-form-checkbox  > .formWidgetLabel > * {
	display: table-cell;
}

.formWidget .w_body_table .w_td_label.cm4all-form-checkbox  > .formWidgetLabel > span {
	width: 100%;
}

.formWidget .w_body_table .w_td_label.cm4all-form-checkbox > .formWidgetLabel > input[type=checkbox] {
	margin-right: 1em;
}

#ui-datepicker-div {
	z-index: 100 !important;
}

/* ---------- responsive guestbook/formular/blog table (toi) ---------- */

.w_gb_form_table {                            /* guestbook table */
    width: 100%;                              /* responsive table width */
}

td>.cw_input,td>.cw_select,                   /* formular inputs */
td>.w_gb_form_input,td>div>.w_gb_form_input { /* guestbook inputs */
    margin-bottom: 6px;
    box-sizing: border-box;                   /* prevent clipping of the input's border */
}

td>div>textarea.w_gb_form_input {             /* guestbook textarea */
    font-family: Arial,Tahoma,Verdana,sans-serif;
    font-size: 12px;
    resize: vertical;                         /* allow vertical resize only */
}