/*
 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 {
	border			: 2px solid #F00000;
	padding			: 0 2px 0 2px;
	
	/* 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 ul {
    list-style: none;
    padding: 0;                    
    margin: 0;
    overflow-x: visible;
}
div.formWidget ul li {
    clear: both;
    padding: 0.3em 0;
    margin: 0;
    overflow: hidden;
}
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.formWidgetTextarea textarea {
	font				: inherit;
	width				: 100%;
	height				: 7em;
	/* max-height=14em because jQuery mobile resizes textareas to a wrong height */
	max-height          : 14em;
}

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

.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;
}

@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;
}