/* * * This contact form uses the namespace _cform_ * * All declarations use "body>div.border>div.content" to be as precisely named as possible,* without having to specify the container (div.frame / div.left / ...). * That way,the styles are not overwritten by the screen.css or *custom*.css,* but still flexible enough to be deployed in any container. * * CUSTOMISING * Customise the form by changing the css in the section "COLOURS AND STYLES" * Usually,the secion "BASE" should not require any changes * */ /**************************************************************** * BASE * Usually it shouldn't be necessary to change anything here... ****************************************************************/ body>div.border>div.content ._cform_container,body>div.border>div.content ._cform_container *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}body>div.border>div.content ._cform_container{margin:2em 0 2em;position:relative}body>div.border>div.content h1 + ._cform_container,body>div.border>div.content h2 + ._cform_container,body>div.border>div.content h3 + ._cform_container,body>div.border>div.content h4 + ._cform_container,body>div.border>div.content h5 + ._cform_container,body>div.border>div.content h6 + ._cform_container{margin:0 0 2em}body>div.border>div.content ._cform_container ._cform_container_inner{}body>div.border>div.content ._cform_container>form{display:block;padding:0;margin:0;border:none}body>div.border>div.content ._cform_container p._cform_infotext_required{font-size:90%;line-height:1;font-style:italic}body>div.border>div.content ._cform_container ._cform_fields{margin:32px -4px 0;/* compensating for the padding on the left and right side of its children */ max-width:100%;display:-ms-flexbox;display:-moz-box;display:-webkit-flex;display:flex;-o-flex-direction:row;-ms-flex-direction:row;-moz-flex-direction:row;-webkit-flex-direction:row;flex-direction:row;-webkit-align-items:flex-start;align-items:flex-start;-moz-justify-content:flex-start;-webkit-justify-content:flex-start;justify-content:flex-start;-moz-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap}body>div.border>div.content ._cform_container ._cform_field_wrapper{padding:4px 4px 1.5em;position:relative;max-width:100%;-moz-flex-grow:0;-webkit-flex-grow:0;flex-grow:0;-moz-flex-shrink:0;-webkit-flex-shrink:0;flex-shrink:0}body>div.border>div.content ._cform_container ._cform_field_wrapper._cform_field_full{-moz-flex-basis:100%;-webkit-flex-basis:100%;flex-basis:100%}body>div.border>div.content ._cform_container ._cform_field_wrapper._cform_field_half{-moz-flex-basis:50%;-webkit-flex-basis:50%;flex-basis:50%}body>div.border>div.content ._cform_container ._cform_field_wrapper._cform_send{margin:32px 0 0}body>div.border>div.content ._cform_container p._cform_inputlabel,body>div.border>div.content ._cform_container label._cform_inputlabel{margin:0;padding:0;line-height:1.45}body>div.border>div.content ._cform_container p._cform_inputlabel span._cform_inputlabel_small,body>div.border>div.content ._cform_container label._cform_inputlabel span._cform_inputlabel_small{font-size:75%}body>div.border>div.content ._cform_container p._cform_inputlabel_small,body>div.border>div.content ._cform_container label._cform_inputlabel_small{margin:0;padding:0;line-height:1.45;font-size:75%}body>div.border>div.content ._cform_container input,body>div.border>div.content ._cform_container textarea,body>div.border>div.content ._cform_container select{margin:0;padding:2px 4px;line-height:1.45;border-width:1px;border-style:solid}body>div.border>div.content ._cform_container input._cform_initially_hidden,body>div.border>div.content ._cform_container textarea._cform_initially_hidden,body>div.border>div.content ._cform_container select._cform_initially_hidden{display:none}body>div.border>div.content ._cform_container input._cform_next_hidden_visible_on_check:checked ~ input._cform_initially_hidden,body>div.border>div.content ._cform_container input._cform_next_hidden_visible_on_check:checked ~ textarea._cform_initially_hidden,body>div.border>div.content ._cform_container input._cform_next_hidden_visible_on_check:checked ~ select._cform_initially_hidden{display:block}body>div.border>div.content ._cform_container input,body>div.border>div.content ._cform_container textarea{width:100%}body>div.border>div.content ._cform_container ._cform_input_text{}body>div.border>div.content ._cform_container ._cform_input_group_item{padding:0 0 0 8px;border-left-width:1px;border-left-style:solid}body>div.border>div.content ._cform_container ._cform_input_textarea{max-width:100%;min-width:100%;min-height:11.6em;/* line-height (1.45) * number of lines that should be visible initially */}body>div.border>div.content ._cform_container ._cform_input_checkbox{width:auto;display:inline;line-height:1.45;vertical-align:middle;margin:0 8px 0 0}body>div.border>div.content ._cform_container ._cform_input_radio{width:auto;display:inline;line-height:1.45;vertical-align:middle;margin:0 8px 0 0}body>div.border>div.content ._cform_container ._cform_label{cursor:pointer;margin:0;padding:0;font-weight:300}body>div.border>div.content ._cform_container ._cform_label._cform_label_checkbox{display:inline;line-height:1.45;vertical-align:middle}body>div.border>div.content ._cform_container ._cform_label._cform_label_radio{display:inline;line-height:1.45;vertical-align:middle}body>div.border>div.content ._cform_container ._cform_error{font-weight:bold}body>div.border>div.content ._cform_container ._cform_error._cform_data_error{position:absolute;margin:0;font-size:75%;line-height:1;bottom:.9em}body>div.border>div.content ._cform_container ._cform_main_error{}body>div.border>div.content ._cform_container ._cform_button{cursor:pointer;display:inline-block;margin:0 8px 0 0;padding:8px;line-height:1;border-width:1px;border-style:solid;width:auto;moz-transform:perspective(1px) translateZ(0);-webkit-transform:perspective(1px) translateZ(0);transform:perspective(1px) translateZ(0);-o-transition:-moz-box-shadow 300ms ease,-webkit-box-shadow 300ms ease,box-shadow 300ms ease;-moz-transition:-moz-box-shadow 300ms ease,-webkit-box-shadow 300ms ease,box-shadow 300ms ease;-webkit-transition:-moz-box-shadow 300ms ease,-webkit-box-shadow 300ms ease,box-shadow 300ms ease;transition:-moz-box-shadow 300ms ease,-webkit-box-shadow 300ms ease,box-shadow 300ms ease}body>div.border>div.content ._cform_container input._cform_button._cform_button_submit{width:auto}/*************** * Landing-Page ***************/ body>div.border>div.content ._cform_sent_container{display:block;padding:10px 20px}body>div.border>div.content ._cform_sent_container p._cform_before_message,body>div.border>div.content ._cform_sent_container p._cform_before_wishes{margin-bottom:5px}body>div.border>div.content ._cform_sent_container ul._cfrom_wishes{margin-top:0}body>div.border>div.content ._cform_sent_container p._cform_message{white-space:pre-wrap;margin:0;padding:10px 20px}/**************************************************************** * COLOURS AND STYLES * Adjust these rules for branding ****************************************************************/ body>div.border>div.content ._cform_container{/* * MAX-WIDTH,MARGIN * Set the max size/width for the container,and its margin */ /*max-width:750px;*/ margin:0}/* body>div.border>div.content ._cform_container p._cform_inputlabel,body>div.border>div.content ._cform_container ._cform_label{!* * COLOR * Set the color for field labels and texts *! color:#000}*/ body>div.border>div.content ._cform_container input,body>div.border>div.content ._cform_container textarea,body>div.border>div.content ._cform_container select,body>div.border>div.content ._cform_container option{/* * FONT-FAMILY,FONT-WEIGHT,FONT-SIZE,COLOR * The font-family has to be declared for input tags,since some browsers * ignore wildcard or inherited declarations. * So if you use a custom font,declare it here,otherwise remove this ruleset * or turn the font-family-rule into a comment. */ font-family:'Source Sans Pro',sans-serif;font-weight:300;font-size:100%;color:#000}body>div.border>div.content ._cform_container input{/* * MAX-WIDTH * Change max-width of input-fields */ max-width:300px}body>div.border>div.content ._cform_container input,body>div.border>div.content ._cform_container textarea,body>div.border>div.content ._cform_container select,body>div.border>div.content ._cform_container ._cform_input_group_item{/* * BORDER-COLOR * The colour of the border of input,textarea,and select fields */ border-color:#2f2b31}body>div.border>div.content ._cform_container textarea{/* * FONT-FAMILY * If you wish a different font for the textarea,declare it here. */ font-family:monospace}body>div.border>div.content ._cform_container p._cform_inputlabel,body>div.border>div.content ._cform_container label._cform_inputlabel{font-weight:400}body>div.border>div.content ._cform_container p._cform_inputlabel span._cform_inputlabel_small,body>div.border>div.content ._cform_container label._cform_inputlabel span._cform_inputlabel_small{font-weight:300}body>div.border>div.content ._cform_container ._cform_error{/* * COLOR * All errors,not just errors for missing form entries */ color:#FF512D}body>div.border>div.content ._cform_container ._cform_button{/* * COLOR,BORDER-COLOR,BACKGROUND-COLOR * All buttons */ color:#ffffff;border-width:0;background-image:-webkit-gradient(linear,left top,left bottom,from(#534948),to(#1f1e26));background-image:-webkit-linear-gradient(top,#534948,#1f1e26);background-image:-moz-linear-gradient(top,#534948,#1f1e26);background-image:-ms-linear-gradient(top,#534948,#1f1e26);background-image:-o-linear-gradient(top,#534948,#1f1e26);background-image:linear-gradient(top,#534948,#1f1e26);-moz-box-shadow:2px 2px 2px rgba(0,0,0,0.6),0 0 2px rgba(0,0,0,0) inset;-webkit-box-shadow:2px 2px 2px rgba(0,0,0,0.6),0 0 2px rgba(0,0,0,0) inset;box-shadow:2px 2px 2px rgba(0,0,0,0.6),0 0 2px rgba(0,0,0,0) inset}body>div.border>div.content ._cform_container ._cform_button:hover{/* * COLOR,BORDER-COLOR,BACKGROUND-COLOR * All buttons,when hovered upon */ color:#ffffff;background-image:-webkit-gradient(linear,left top,left bottom,from(#dad7b8),to(#a89d6c));background-image:-webkit-linear-gradient(top,#dad7b8,#a89d6c);background-image:-moz-linear-gradient(top,#dad7b8,#a89d6c);background-image:-ms-linear-gradient(top,#dad7b8,#a89d6c);background-image:-o-linear-gradient(top,#dad7b8,#a89d6c);background-image:linear-gradient(top,#dad7b8,#a89d6c);-moz-box-shadow:0 0 2px rgba(0,0,0,0),2px 2px 2px rgba(0,0,0,0.6) inset;-webkit-box-shadow:0 0 2px rgba(0,0,0,0),2px 2px 2px rgba(0,0,0,0.6) inset;box-shadow:0 0 2px rgba(0,0,0,0),2px 2px 2px rgba(0,0,0,0.6) inset}/*************** * Landing-Page ***************/ body>div.border>div.content ._cform_sent_container{/* * COLOR,BACKGROUND-COLOR * The container of the quoted e-mail on the landing page */ background-color:#dddddd;border:1px solid #333333}body>div.border>div.content ._cform_sent_container p._cform_message{/* * COLOR,BACKGROUND-COLOR * The box around the message within the the quoted e-mail on the landing page */ background-color:#cbcbcb;border:1px solid #333333}