/* Reset styles of the form */ #docContainer div, #docContainer span, #docContainer applet, #docContainer object, #docContainer iframe, #docContainer h1, #docContainer h2, #docContainer h3, #docContainer h4, #docContainer h5, #docContainer h6, #docContainer p, #docContainer blockquote, #docContainer pre, #docContainer a, #docContainer abbr, #docContainer acronym, #docContainer address, #docContainer big, #docContainer cite, #docContainer code, #docContainer del, #docContainer dfn, #docContainer em, #docContainer img, #docContainer ins, #docContainer kbd, #docContainer q, #docContainer s, #docContainer samp, #docContainer small, #docContainer strike, #docContainer strong, #docContainer sub, #docContainer sup, #docContainer tt, #docContainer var, #docContainer b, #docContainer u, #docContainer i, #docContainer center, #docContainer dl, #docContainer dt, #docContainer dd, #docContainer ol, #docContainer ul, #docContainer li, #docContainer fieldset, #docContainer form, #docContainer label, #docContainer legend, #docContainer table, #docContainer caption, #docContainer tbody, #docContainer tfoot, #docContainer thead, #docContainer tr, #docContainer th, #docContainer td, #docContainer article, #docContainer aside, #docContainer canvas, #docContainer details, #docContainer embed, #docContainer figure, #docContainer figcaption, #docContainer footer, #docContainer header, #docContainer hgroup, #docContainer menu, #docContainer nav, #docContainer output, #docContainer ruby, #docContainer section, #docContainer summary, #docContainer time, #docContainer mark, #docContainer audio, #docContainer video { margin: 0; padding: 0; border: 0; vertical-align: top; } /* HTML5 display-role reset for older browsers */ #docContainer article, #docContainer aside, #docContainer details, #docContainer figcaption, #docContainer figure, #docContainer footer, #docContainer header, #docContainer hgroup, #docContainer menu, #docContainer nav, #docContainer section { display: block; } #docContainer ol, #docContainer ul { list-style: none; } #docContainer blockquote, #docContainer q { quotes: none; } #docContainer blockquote:before, #docContainer blockquote:after, #docContainer q:before, #docContainer q:after { content: ''; content: none; } #docContainer table { border-collapse: collapse; border-spacing: 0; } /*Hiding/showing hints.*/ ..hidden_hint { display:none !important; } input:focus + .fb-hint, select:focus + .fb-hint, textarea:focus + .fb-hint { display:inline-block !important; } /* Hiddes the spinning buttons in webkit*/ input[type="date"]::-webkit-outer-spin-button, input[type="date"]::-webkit-inner-spin-button { display: none; } /* Placeholder colors */ .placeholder { color:#AD7C3A !important; } #docContainer ::-webkit-input-placeholder { color:#AD7C3A !important; } #docContainer :-moz-placeholder { color:#AD7C3A !important; } /* Style to force the submit button to not be standard */ .non-standard{ -webkit-appearance: none; font-size:17px; padding:0px; color: rgb(0,0,0); background-color: rgb(192,192,192); border: 2px solid rgb(50,50,50); } /* Container for the scripts error reporting */ #fb_error_report { border: 1px solid #000 !important; padding: 10px !important; margin: 10px !important; background-color: #c60513; display:inline-block; width:80%; } /* Heading for the scripts error reporting */ #fb_error_report h4 { color:#fff; } /* Container for the scripts error elements */ #fb_error_report ul { list-style-type: disc; padding:20px; } /* Scripts error elements */ #fb_error_report ul li { color:white; } /* Theme CSS */ /* This rule will applied to the form container */ #docContainer { margin: 30px auto; padding: 0px 0px 0px 0px; width: 640px; font-size: 16px; font-family: 'Lekton',sans-serif; color: #4A4500; background: url('../images/fb_bg.png') repeat; } #docContainer #fb-form-header1 { height:65px; background: url('../images/fb_header.png') no-repeat; padding-top: 20px; padding-left: 20px; } /* Special rule to modify the selector by a new one that can be used in both for Mac and Windows. Must be used with !important*/ #docContainer .selected-object { } /* Column properties. This applies to a common style inside the form in fb-large mode*/ #docContainer.fb-large .column { margin: 0px; padding: 0 9% 0 9%; } /* Column properties. This applies to a common style inside the form */ #docContainer .column { margin: 0px; padding-left: 8%; padding-right: 8%; } /* Column properties. This applies to a common style inside the form in fb-small mode*/ #docContainer.fb-small .column { margin: 0px; padding: 0 0 0 7%; } /* Common rule for the items (label and control)*/ #docContainer .fb-item { width: 97%; display:inline-block; zoom:1; *display:inline; } /* Common rules for the items padding*/ #docContainer.fb-large .fb-item { padding:6px 5px 20px 5px; } #docContainer .fb-item { padding:5px 5px 15px 5px; } #docContainer.fb-small .fb-item { padding:4px 3px 10px 3px; } /* Common rules for the submit button container padding*/ #docContainer.fb-large #fb-submit-button-div { padding: 6px 5px 20px 5px; } #docContainer #fb-submit-button-div { padding: 5px 5px 15px 5px; } #docContainer.fb-small #fb-submit-button-div { padding: 4px 1px 10px 1px; } /*Rules for the width of the item depending on the current mode used for width */ /*fb-large mode classes*/ #docContainer.fb-large .fb-item.fb-100-item-column{ width:100%; } #docContainer.fb-large .fb-item.fb-75-item-column{ width:73%; } #docContainer.fb-large .fb-item.fb-66-item-column{ width:64%; } #docContainer.fb-large .fb-item.fb-50-item-column{ width:48%; } #docContainer.fb-large .fb-item.fb-33-item-column{ width:31%; } #docContainer.fb-large .fb-item.fb-25-item-column{ width:23%; } #docContainer.fb-large .fb-item.fb-20-item-column{ width:18%; } /*Normal mode classes*/ #docContainer .fb-item.fb-100-item-column{ width:99%; } #docContainer .fb-item.fb-75-item-column{ width:72%; } #docContainer .fb-item.fb-66-item-column{ width:63%; } #docContainer .fb-item.fb-50-item-column{ width:47%; } #docContainer .fb-item.fb-33-item-column{ width:30%; } #docContainer .fb-item.fb-25-item-column{ width:22%; } #docContainer .fb-item.fb-20-item-column{ width:17%; } /*fb-small mode classes*/ #docContainer.fb-small .fb-item.fb-100-item-column{ width:100%; } #docContainer.fb-small .fb-item.fb-75-item-column{ width:70%; } #docContainer.fb-small .fb-item.fb-66-item-column{ width:61%; } #docContainer.fb-small .fb-item.fb-50-item-column{ width:45%; } #docContainer.fb-small .fb-item.fb-33-item-column{ width:27%; } #docContainer.fb-small .fb-item.fb-25-item-column{ width:20%; padding-left: 4px; padding-right: 4px;} #docContainer.fb-small .fb-item.fb-20-item-column{ width:15%;} /*Form Elements. This rule is common to all elements (inputs/selects) in fb-large Mode*/ #docContainer.fb-large input[type=text], #docContainer.fb-large input[type=password], #docContainer.fb-large input[type=email], #docContainer.fb-large input[type=number], #docContainer.fb-large input[type=date], #docContainer.fb-large input[type=tel], #docContainer.fb-large input[type=url], #docContainer.fb-large textarea, #docContainer.fb-large select, #docContainer.fb-large input[type=file] { color: #333; font: normal 12px 'Lekton',sans-serif; border-top: 1px solid #4a4500; border-bottom: 1px solid #fff; border-left: none; border-right: none; width:99%; max-width:100%; } /*Form Elements. This rule is common to all elements (inputs/selects)*/ #docContainer input[type=text], #docContainer input[type=password], #docContainer input[type=email], #docContainer input[type=number], #docContainer input[type=date], #docContainer input[type=tel], #docContainer input[type=url], #docContainer textarea, #docContainer select, #docContainer input[type=file] { color: #333; font: normal 12px 'Lekton',sans-serif; border-top: 1px solid #4a4500; border-bottom: 1px solid #fff; border-left: none; border-right: none; width:98%; max-width:100%; } /*Form Elements. This rule is common to all elements (inputs/selects) in fb-small Mode*/ #docContainer.fb-small input[type=text], #docContainer.fb-small input[type=password], #docContainer.fb-small input[type=email], #docContainer.fb-small input[type=number], #docContainer.fb-small input[type=date], #docContainer.fb-small input[type=tel], #docContainer.fb-small input[type=url], #docContainer.fb-small textarea, #docContainer.fb-small select, #docContainer.fb-small input[type=file] { color: #333; font: normal 12px 'Lekton',sans-serif; border-top: 1px solid #4a4500; border-bottom: 1px solid #fff; border-left: none; border-right: none; width:92%; max-width:100%; } #docContainer input[type=file], #docContainer.fb-small input[type=file], #docContainer.fb-large input[type=file] { border:none; } /*Form Elements. This rule is common to all inputs boxes in fb-large Mode*/ #docContainer.fb-large input[type=text], #docContainer.fb-large input[type=password], #docContainer.fb-large input[type=email], #docContainer.fb-large input[type=number], #docContainer.fb-large input[type=date], #docContainer.fb-large input[type=tel], #docContainer.fb-large input[type=url], #docContainer.fb-large textarea { padding: 9px 6px 9px 6px; } /*Form Elements. This rule is common to all inputs boxes*/ #docContainer input[type=text], #docContainer input[type=password], #docContainer input[type=email], #docContainer input[type=number], #docContainer input[type=date], #docContainer input[type=tel], #docContainer input[type=url], #docContainer textarea { padding: 4px; } /*Form Elements. This rule is common to all inputs boxes in fb-small Mode*/ #docContainer.fb-small input[type=text], #docContainer.fb-small input[type=password], #docContainer.fb-small input[type=email], #docContainer.fb-small input[type=number], #docContainer.fb-small input[type=date], #docContainer.fb-small input[type=tel], #docContainer.fb-small input[type=url], #docContainer.fb-small textarea { padding: 4px 1px 4px 1px; } /* Rule for the title container */ #docContainer .fb-header { margin: 20px 0 5px 0; padding: 20px 0 0px 0; color:#000; } #docContainer .fb-input-number {} #docContainer .fb-input-number input {color: #333; background: #9a9b64;} /* Rule for the title */ #docContainer .fb-header h2 { font-family:'Lekton',sans-serif; font-size: 25px; font-weight: 700; padding-top: 0px; color: #B03605;text-shadow: 0 1px 0 rgba(0,0,255,0.2); text-transform: uppercase;} /* Rule for the static text container*/ #docContainer .fb-static-text { margin: 20px 0 10px 0px; color: #333; } /* Rule for the static text */ #docContainer .fb-static-text p {font-family: 'Lekton'; font-size: 14px;} /* Rule for Submit button container */ #docContainer #fb-submit-button-div { padding-bottom: 20px !important;background-image: url('../images/fb_bg.png'); background-repeat: repeat; background-position: top;} /* Rule for Submit button */ #fb-submit-button { color: #E5E4A3; font-family: 'Lekton',sans-serif; font-size: 16px; text-transform: uppercase; padding: 3px 0 0px 0; border: none; width: 75px; height: 26px; text-shadow: 0 1px 0 rgba(0,0,0,0.2); cursor: pointer; background: url('../images/btn_submit.png') no-repeat; margin-right:90px !important; margin-left:80px !important; } #fb-submit-button:hover { background: url('../images/btn_submit_hov.png') no-repeat; color: #9A9B64; } /* Rule for captcha container */ #fb-captcha_control { text-align: center; padding: 30px 0 30px 0 !important; } /* Rule to be able to control the position of the captcha when generated */ #fb-captcha_control > div { display:inline-block; } /* Rule for captcha input */ #fb-captcha_control input { padding: 2px 0 !important; } /* Rule for captcha internal */ #recaptcha_table { background-color: rgb(255,255,255); } /* Rule for the hints */ #docContainer .fb-hint { color: #666; font-size: 0.8em; margin: 4px 0px 3px 0; display: inline-block; } /* Rule for the text area container */ #docContainer .fb-textarea {} /* Rule for the text area box */ #docContainer .fb-textarea textarea { height: 140px; background: #9a9b64; } } /* Rule for the checkbox container */ #docContainer .fb-checkbox { padding: 0 0 0 2px; color: #333;} /* Rule for the checkbox inputs */ #docContainer .fb-checkbox input { padding: 0 0 0 2px;display:inline-block; } /* Rule for the radio buttons container */ #docContainer .fb-radio { padding: 5px 0 0 2px; color: #333;} /* Rule for the radio buttons inputs */ #docContainer .fb-radio input { padding: 0 0 0 2px;display:inline-block; } /* Rule for the labels of checkboxes and radios */ #docContainer .fb-fieldlabel { display: inline; margin-left: 5px; font-size: 0.8em; } #docContainer .fb-radio label, #docContainer .fb-checkbox label { margin-bottom:7px; } /* Rule for the input-boxes container */ #docContainer .fb-input-box {margin-bottom: 5px;} /* Rule for the input-boxes */ #docContainer .fb-input-box input {background: #9a9b64;} /* Rule for the dropdown container */ #docContainer .fb-dropdown {} /* Rule for the dropdown select */ #docContainer .fb-dropdown select {} /* Rule for the listbox container */ #docContainer .fb-listbox {} /* Rule for the listbox select */ #docContainer .fb-listbox select {background: #9a9b64;} /* Rule for the listbox select option (selected element) */ #docContainer .fb-listbox select option { padding: 3px 9px;} /* Rule for the file upload container */ #docContainer .fb-button {} /* Rule for the file upload input */ #docContainer .fb-button input { color: #B03605; font-family: 'Lekton' width: 100%;} /* Rule for the date container */ #docContainer .fb-input-date {} /* Rule for the date input */ #docContainer .fb-input-date input { background: #9a9b64;} /* Rule for the phone input */ #docContainer .fb-phone input { background: #9a9b64;} /* Rule for the regex input */ #docContainer .fb-regex input { background: #9a9b64;} /* Rule for the section break container */ #docContainer .fb-sectionbreak { } /* Rule for the section break hr */ #docContainer .fb-sectionbreak hr {border:none; border-top:1px solid; } /* Rule for the labels */ #docContainer .fb-grouplabel { margin-bottom:6px; clear: both; padding-right: 5px; } #docContainer .fb-grouplabel label { font-weight: normal; } /* Rule for labels aligned right */ .fb-rightlabel .fb-grouplabel { float:left; text-align:right; width:30%; } /* Rule for items aligned right */ .fb-rightlabel .fb-input-box, .fb-rightlabel .fb-dropdown, .fb-rightlabel .fb-listbox, .fb-rightlabel .fb-button, .fb-rightlabel .fb-textarea, .fb-rightlabel .fb-radio, .fb-rightlabel .fb-checkbox, .fb-rightlabel .fb-input-date, .fb-rightlabel .fb-phone, .fb-rightlabel .fb-regex, .fb-rightlabel .fb-input-number, .fb-rightlabel label.error, .fb-rightlabel .fb-hint { float:left; width:65%; } /* General rule for hints */ #docContainer.fb-rightlabel .fb-hint { margin-left: 32%; } /* Specific rule for input elements */ #docContainer.fb-rightlabel .fb-input-box .fb-hint, #docContainer.fb-rightlabel .fb-button .fb-hint, #docContainer.fb-rightlabel .fb-textarea .fb-hint, #docContainer.fb-rightlabel .fb-input-number .fb-hint, #docContainer.fb-rightlabel .fb-input-date .fb-hint, #docContainer.fb-rightlabel .fb-phone .fb-hint, #docContainer.fb-rightlabel .fb-regex .fb-hint { margin-left: 0px; width:100%; } /* Rule for labels aligned on the left */ .fb-leftlabel .fb-grouplabel { float:left; width:30%; text-align:left; } .fb-leftlabel .fb-input-box, .fb-leftlabel .fb-dropdown, .fb-leftlabel .fb-listbox, .fb-leftlabel .fb-button, .fb-leftlabel .fb-textarea, .fb-leftlabel .fb-radio, .fb-leftlabel .fb-checkbox, .fb-leftlabel .fb-input-date, .fb-leftlabel .fb-phone, .fb-leftlabel .fb-regex, .fb-leftlabel .fb-input-number, .fb-leftlabel label.error, .fb-leftlabel .fb-hint { float:left; width:65%; } /* General rule for hints */ #docContainer.fb-leftlabel .fb-hint { margin-left: 32%; } /* Specific rule for input elements */ #docContainer.fb-leftlabel .fb-input-box .fb-hint, #docContainer.fb-leftlabel .fb-button .fb-hint, #docContainer.fb-leftlabel .fb-textarea .fb-hint, #docContainer.fb-leftlabel .fb-input-number .fb-hint, #docContainer.fb-leftlabel .fb-input-date .fb-hint, #docContainer.fb-leftlabel .fb-phone .fb-hint, #docContainer.fb-leftlabel .fb-regex .fb-hint { margin-left: 0px; width:100%; } /* Rule for labels aligned on top */ .fb-toplabel .fb-grouplabel {width: 95%; } .fb-toplabel .fb-input-box, .fb-toplabel .fb-dropdown, .fb-toplabel .fb-listbox, .fb-toplabel .fb-button, .fb-toplabel .fb-textarea, .fb-toplabel .fb-radio, .fb-toplabel .fb-checkbox, .fb-toplabel .fb-input-date, .fb-toplabel .fb-phone, .fb-toplabel .fb-regex, .fb-toplabel .fb-input-number, .fb-toplabel .fb-hint, .fb-toplabel label.error { margin: 9px 0 0 0; float:none; width:95%; } #docContainer input::-webkit-input-placeholder, isindex::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #e5e4a3; } /* Rules checkboxes/radios columns */ .fb-one-column .fb-radio label, .fb-one-column .fb-checkbox label { display:inline-block; width:100%; } .fb-two-column .fb-radio label, .fb-two-column .fb-checkbox label { display:inline-block; float:left; width:47%; } .fb-three-column .fb-radio label, .fb-three-column .fb-checkbox label { display:inline; float:left; width:33%; } .fb-side-by-side .fb-radio label, .fb-side-by-side .fb-checkbox label { display:inline-block; float:left; } #docContainer .fb-side-by-side .fb-radio label .fb-fieldlabel,#docContainer .fb-side-by-side .fb-checkbox label .fb-fieldlabel{ margin-left: 0px; margin-right: 10px; } /* Rules for submit button alignments */ #docContainer .fb-item-alignment-left { padding-left:10px; text-align:left; } #docContainer .fb-item-alignment-center { text-align:center; } #docContainer .fb-item-alignment-right { padding-right:10px; text-align:right; } /* Rules for container header alignments */ #docContainer .fb-header.fb-item-alignment-left {} #docContainer .fb-header.fb-item-alignment-center {} #docContainer .fb-header.fb-item-alignment-right {} /* Rules for element header alignments */ #docContainer .fb-header.fb-item-alignment-left h2 {} #docContainer .fb-header.fb-item-alignment-center h2 {} #docContainer .fb-header.fb-item-alignment-right h2 {} /* Rules for container static text alignments */ #docContainer .fb-static-text.fb-item-alignment-left {} #docContainer .fb-static-text.fb-item-alignment-center {} #docContainer .fb-static-text.fb-item-alignment-right {} /* Rules for element static text alignments */ #docContainer .fb-static-text.fb-item-alignment-left p {} #docContainer .fb-static-text.fb-item-alignment-center p {} #docContainer .fb-static-text.fb-item-alignment-right p {} /* Rules for container submit alignments */ #docContainer #fb-submit-button-div.fb-item-alignment-left {} #docContainer #fb-submit-button-div.fb-item-alignment-center {} #docContainer #fb-submit-button-div.fb-item-alignment-right {} /* Rules for element submit alignments */ #docContainer #fb-submit-button-div.fb-item-alignment-left input {} #docContainer #fb-submit-button-div.fb-item-alignment-center input {} #docContainer #fb-submit-button-div.fb-item-alignment-right input {} /* Rules for Validation styles */ #docContainer label.error { background-color:#F3E6E6; border-color: #924949; border-style: solid solid solid solid; font-weight: normal; border-width: 2px; padding: 5px; display:block; clear:both; color: rgb(237,32,32); font: italic 12px Georgia,serif; margin: 10px 0 0 0; width: 100%; } #docContainer input[type=text].error, #docContainer input[type=password].error, #docContainer input[type=email].error, #docContainer input[type=number].error, #docContainer input[type=date].error, #docContainer input[type=tel].error, #docContainer input[type=url].error, #docContainer textarea.error, #docContainer select.error { border: 1px solid rgb(237,32,32) !important; }