/* Column properties. This applies to a common style inside the form */ #docContainer .column { margin: 0px; padding: 0 5% 0 5%; } /* Common rule for the items (label and control)*/ #docContainer .fb-item { width: 100%; display:inline-block; zoom:1; *display:inline; } /* Common rules for the items padding*/ #docContainer .fb-item { padding:5px 4px 10px 4px; } /*Rules for the width of the item depending on the current mode used for width */ /*Normal mode classes*/ /* #docContainer .fb-item.fb-100-item-column{ width:99%; } */ #docContainer .fb-item.fb-100-item-column{ width:96%; } #docContainer .fb-item.fb-75-item-column{ width:72%; } #docContainer .fb-item.fb-66-item-column{ width:63%; } /* #docContainer .fb-item.fb-60-item-column{ width:57%; } */ #docContainer .fb-item.fb-60-item-column{ width:58%; } /* #docContainer .fb-item.fb-50-item-column{ width:49%; } */ #docContainer .fb-item.fb-50-item-column{ width:48%; } /* #docContainer .fb-item.fb-40-item-column{ width:37%; } */ #docContainer .fb-item.fb-40-item-column{ width:39%; } #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%; } */ #docContainer .fb-item.fb-20-item-column{ width:19%; } #docContainer .fb-item.fb-19-item-column{ width:20%; } /* Container for the scripts error reporting */ #fb_error_report { border: 1px solid #BF0000 !important; padding: 10px !important; margin: 10px !important; background-color: #fff; display:inline-block; width:90%; } /* Heading for the scripts error reporting */ #fb_error_report h4 { color:#BF0000; font-size: 16px; } /* 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: #444; } /* Theme CSS */ /* This rule will applied to the form container */ #docContainer { /*margin: 40px auto;*/ padding:0px 0px 0px 0px; width: 600px; /* font-family: Helvetica, Arial, Sans-serif; font-size:13px; color: #333; background-color: rgb(246,246,246); */ border: 1px solid rgb(193,193,193); -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28); -moz-box-shadow: 0 0 10px 0 rgba(0,0,0,0.28); box-shadow: 0 0 10px 0 rgba(0,0,0,0.28); -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; } #docContainer select { 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=url], #docContainer textarea, #docContainer input[type=file], #docContainer input[type=tel] { /* color: #666; font: normal 12px Helvetica, Arial, Sans-serif; */ border: 1px solid rgb(220,223,231); border-top-color: rgb(170,173,178); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; /* width:98%; */ width:100%; max-width:100%; } /*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=url], #docContainer input[type=tel], #docContainer textarea { /* padding: 7px 4px 7px 4px; */ } /* Rule for the dropdown container */ #docContainer .fb-dropdown {} /* Rule for the dropdown select */ #docContainer .fb-dropdown select { /* padding: 0px; */ /* background: white; font: normal 12px Helvetica, Arial, Sans-serif; */ /* width:92%; */ width:100%; max-width:100%; } #docContainer .fb-input-number {} #docContainer .fb-input-number input { /* color: rgb(69,69,69); font: normal 12px Helvetica, arial; */ border: 1px solid rgb(220,223,231); border-top-color: rgb(170,173,178); -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px;} /* Rule for labels aligned on the left */ .fb-leftlabel .fb-grouplabel { float:left; width:80%; */ 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-input-number, .fb-leftlabel .fb-radio, /* .fb-leftlabel .fb-checkbox, */ .fb-leftlabel .fb-input-date, .fb-leftlabel .fb-phone, .fb-leftlabel .fb-regex, .fb-leftlabel label.error, .fb-leftlabel .fb-hint { float:left; width:20%; } /* General rule for hints */ #docContainer.fb-leftlabel .fb-hint { margin-left: 30%; } /* 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%; } /* Rules for Validation styles */ #docContainer label.error { background-color:transparent; font-weight: normal; padding: 5px; display:block; clear:both; color: #BF0000; /* font: italic 12px Helvetica,sans-serif; */ /* font: italic 14px Helvetica,sans-serif; */ margin: 1px 0 0 0; } /* #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=url].error, #docContainer input[type=tel].error, #docContainer textarea.error, #docContainer select.error { } #docContainer .fb-fieldlabel { float: left; width: 80%; margin-top: 0px; } #docContainer input[type="radio"], #docContainer input[type="checkbox"] { float: left; } #docContainer .fb-side-by-side .fb-radio label .fb-fieldlabel,#docContainer .fb-side-by-side .fb-checkbox label .fb-fieldlabel { width: 100%; float: none; } .fb-side-by-side .fb-radio input[type="radio"], .fb-side-by-side .fb-checkbox input[type="checkbox"] {float: none;margin-right:3px;} #docContainer .fb-html a { color:#0066D6; text-decoration:underline; } #docContainer .fb-html a:hover { color:#CC3300 !important; text-decoration:underline; } #docContainer .fb-html a:focus { outline:thin dotted; outline:5px auto -webkit-focus-ring-color; outline-offset:-2px; } #docContainer .fb-html a:hover, #docContainer .fb-html a:active { outline:0; } #docContainer .fb-html a:visited { color:#5575A0; } #docContainer .fb-html ul, #docContainer .fb-html ol { padding:0; margin:15px 0 15px 25px; text-align:left; } #docContainer .fb-html ul { list-style:disc; } #docContainer .fb-html ol { list-style:decimal; } #docContainer .fb-html li { line-height:15px; padding:5px 0; vertical-align:middle;} #docContainer .fb-html blockquote { border-left:5px solid #ddd; margin:15px 0; padding:0 0 0 15px; text-align:left; } #docContainer .fb-html blockquote, #docContainer .fb-html blockquote p { font-size:14px; font-weight:300; line-height:20px; } #docContainer .fb-html blockquote small { display:block; font-size:12px; line-height:22px; color:#999; } #docContainer .fb-html blockquote small:before { content:'\2014 \00A0'; } #docContainer .fb-html blockquote:before, #docContainer .fb-html blockquote:after { content:""; } #docContainer .fb-html table { max-width:100%; border-collapse:collapse; border-spacing:0; } #docContainer .fb-html table { border:1px solid #ddd; margin:15px 0; width:100%; } #docContainer .fb-html table th, #docContainer .fb-html table td { border-top:1px solid #ddd; line-height:18px; padding:8px; text-align:left; } #docContainer .fb-html table th { font-weight:bold; vertical-align:bottom; } #docContainer .fb-html table td { vertical-align:top; } #docContainer .fb-html table thead:first-child tr th, #docContainer .fb-html table thead:first-child tr td { border-top:0; } #docContainer .fb-html table tbody tr:nth-child(odd) th, #docContainer .fb-html table tbody tr:nth-child(odd) td { background-color:#fbfbfb; }/** */ /* Additions for making themes responsive: From here to the end /*Responsive Addition*/ @media screen and (max-width: 768px) { #docContainer.fb-large .fb-item.fb-25-item-column, #docContainer.fb-large .fb-item.fb-20-item-column { width: 47%; } #docContainer .fb-item.fb-25-item-column, #docContainer .fb-item.fb-20-item-column { width: 47%; } #docContainer.fb-small .fb-item.fb-25-item-column, #docContainer.fb-small .fb-item.fb-20-item-column { width:45%; } } /*Responsive Addition*/ @media screen and (max-width:480px) { #docContainer.fb-large .fb-item.fb-75-item-column, #docContainer.fb-large .fb-item.fb-66-item-column, #docContainer.fb-large .fb-item.fb-50-item-column, #docContainer.fb-large .fb-item.fb-33-item-column, #docContainer.fb-large .fb-item.fb-25-item-column, #docContainer.fb-large .fb-item.fb-20-item-column, #docContainer .fb-item.fb-75-item-column, #docContainer .fb-item.fb-66-item-column, #docContainer .fb-item.fb-60-item-column, #docContainer .fb-item.fb-50-item-column, #docContainer .fb-item.fb-40-item-column, #docContainer .fb-item.fb-33-item-column, #docContainer .fb-item.fb-25-item-column, #docContainer .fb-item.fb-20-item-column, #docContainer.fb-small .fb-item.fb-75-item-column, #docContainer.fb-small .fb-item.fb-66-item-column, #docContainer.fb-small .fb-item.fb-50-item-column, #docContainer.fb-small .fb-item.fb-33-item-column, #docContainer.fb-small .fb-item.fb-25-item-column, #docContainer.fb-small .fb-item.fb-20-item-column { width: 100%; } } /*Responsive Addition*/ @media screen and (max-width: 768px) { .fb-rightlabel .fb-grouplabel { float:none; text-align:left; width:100%; } .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-input-number, .fb-rightlabel .fb-checkbox, .fb-rightlabel .fb-input-date, .fb-rightlabel label.error, .fb-rightlabel .fb-hint, .fb-rightlabel .fb-phone, .fb-rightlabel .fb-regex{ float:none; width:100%; } .fb-leftlabel .fb-grouplabel { float:none; width:100%; 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-input-number, .fb-leftlabel .fb-radio, .fb-leftlabel .fb-checkbox, .fb-leftlabel .fb-input-date, .fb-leftlabel label.error, .fb-leftlabel .fb-hint, .fb-leftlabel .fb-phone, .fb-leftlabel .fb-regex{ float:none; width:100%; } } /*Responsive Addition*/ @media screen and (max-width: 768px) { .fb-three-column .fb-radio label, .fb-three-column .fb-checkbox label { width: 47%; } } @media screen and (max-width: 480px){ .fb-two-column .fb-radio label, .fb-two-column .fb-checkbox label, .fb-three-column .fb-radio label, .fb-three-column .fb-checkbox label { width:100%; } } #docContainer { /* width: 90%; */ width: 100%; max-width: 800px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }