/**---- Preivew CSS--------**/ .ufbl-preview-title { background-color: white; width: 200px; margin: 20 auto; box-shadow: 0 0 2px #222; height: 70px; padding: 20px 0; font-weight: bold; } .ufbl-form-preview-wrap{ width:60%; margin:50px auto; background:white; padding:40px; } .ufbl-preview-title-wrap { height: 80px; text-align: center; } .ufbl-preview-note { text-align: center; margin-top: 38px; } .ufbl-form-preview-wrap .ufbl-form-wrapper { margin: 20px auto; } /**---- Preivew CSS--------**/ /**---- Default Template ---**/ .ufbl-form-loader { background-image: url('../images/ajax-loader.gif'); height: 32px; width: 32px; display: inline-block; background-repeat: no-repeat; background-position: center; text-align: center; margin-bottom: -8px; } .ufbl-default-template .ufbl-error-message { margin-top: 20px; border: 2px solid rgba(255, 0, 0, 0.89); color: rgba(255, 0, 0, 0.89); padding: 10px 10px; } .ufbl-default-template .ufbl-error { color: rgba(255, 0, 0, 0.89); margin-top: 10px; text-align: right; } .ufbl-form-wrapper.ufbl-default-template { padding:20px; box-shadow: 0 0 2px; margin-top:20px; } .ufbl-default-template .ufbl-form-field-wrap { margin-bottom: 10px; padding-bottom: 10px; } .ufbl-default-template .ufbl-form-field > label { display: block; margin-bottom: 5px; vertical-align: top; margin-left: 15px; } .ufbl-default-template .ufbl-form-field >label>input[type="checkbox"],.ufbl-form-field >label>input[type="radio"] { margin-right: 5px; outline:none; } .ufbl-default-template .ufbl-form-field-wrap >label { margin-bottom: 5px; display: block; font-weight: 600; } .ufbl-default-template .ufbl-form-title { text-align: center; font-size: 20px; padding: 10px 0; margin-bottom: 40px; font-weight: bold; } .ufbl-front-form input[type="text"] { width: 30%; } .ufbl-front-form input[type="email"], .ufbl-front-form input[type="password"] { width: 40%; } .ufbl-default-template .ufbl-form-message.ufbl-success-message { color: green; border: 2px solid; padding: 10px; } .ufbl-default-template input.ufbl-math-captcha-ans { width: 23% !important; } .ufbl-default-template .ufbl-sub-field-wrap { margin-left: 10px; } .ufbl-default-template .ufbl-sub-field-wrap label { margin-left: 10px; } .ufbl-default-template .ufbl-form-field .ufbl-form-reset { border-radius: 0; padding: 13px 25px; } /**---- Default Template ---**/ .ufbl-template-1 .ufbl-form-reset:focus, .ufbl-template-2 .ufbl-form-reset:focus, .ufbl-template-3 .ufbl-form-reset:focus, .ufbl-template-4 .ufbl-form-reset:focus, .ufbl-template-5 .ufbl-form-reset:focus { background-color: transparent !important; color:#434a54 !important; } .ufbl-template-1 .ufbl-form-submit:focus, .ufbl-template-2 .ufbl-form-submit:focus, .ufbl-template-3 .ufbl-form-submit:focus, .ufbl-template-4 .ufbl-form-submit:focus { background-color: #74baf5 !important; color:#fff !important; } .ufbl-template-5 .ufbl-form-submit:focus { background-color: #146782 !important; color:#fff !important; } .ufbl-template-1 .ufbl-number-field:focus, .ufbl-template-2 .ufbl-number-field:focus, .ufbl-template-3 .ufbl-number-field:focus, .ufbl-template-4 .ufbl-number-field:focus, .ufbl-template-5 .ufbl-number-field:focus { outline:none !important; } /**-------- Template 1------ */ .ufbl-form-wrapper.ufbl-template-1 { background-color: #fff; padding:40px 30px; -webkit-box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); } .ufbl-template-1 .ufbl-form-title { margin-bottom: 40px; font-size:22px; color:#3979a9; text-transform:uppercase; } .ufbl-template-1 .ufbl-form-field-wrap{ margin-bottom:20px; } .ufbl-template-1 .ufbl-form-field-wrap > label{ display:inline-block; width:135px; font-size:16px; color:#000; vertical-align:top; } .ufbl-template-1 .ufbl-form-field { display: inline-block; width: 74.6%; } .ufbl-template-1 .ufbl-form-field input[type="text"], .ufbl-template-1 .ufbl-form-field input[type="email"],.ufbl-template-1 .ufbl-form-field input[type="password"],.ufbl-template-1 .ufbl-form-field textarea,.ufbl-template-1 .ufbl-form-field input[type="reset"]{ border-radius:4px; border-color:#aab2bd; padding:4px 8px; background-color: transparent; font-size:16px; } .ufbl-template-1 input[type="checkbox"], input[type="radio"] button, select, textarea{ outline:none !important; } .ufbl-template-1 .ufbl-form-checkbox{ margin-right:5px; } .ufbl-template-1 .ufbl-form-textfield:focus{ -webkit-box-shadow: 0 0 1px 1px #67D5EB; box-shadow: 0 0 1px 1px #67D5EB; } .ufbl-template-1 #your-hobbies > label { vertical-align: top !important; } .ufbl-template-1 .your-hobbies .ufbl-form-field > label { display: block; margin-bottom: 10px; } .ufbl-template-1 *::-moz-placeholder { color: rgba(51, 51, 51, 0.7); font-family: "Noto Sans",sans-serif; opacity: 1; font-size: 14px; } .ufbl-template-1 select.ufbl-required, .ufbl-template-1 .ufbl-form-field select,.ufbl-template-1 .ufbl-form-field .ufbl-number-field { border: 1px solid #aab2bd; border-radius:4px; width:50%; padding:5px; font-size:16px; cursor:pointer; height:35px; background: transparent; } .ufbl-template-1 .ufbl-email-field{ font-size:16px; box-shadow: none; padding:8px; } .ufbl-template-1 .ufbl-form-field-wrap > label { margin-top:7px; } .ufbl-template-1 .ufbl-math-captcha-wrap { display: inline-block; } .ufbl-template-1 .ufbl-form-submit { background-color: #74baf5; border-radius:4px; margin-left:135px; font-size:15px; text-transform:none; } .ufbl-template-1 .ufbl-form-submit:hover { background-color: #52a2e5; } .ufbl-template-1 .ufbl-form-reset { background-color: rgba(0, 0, 0, 0); border: 1px solid #aab2bd !important; color: #434a54; font-size: 15px; padding: 11px 20px !important; text-transform: none; } .ufbl-template-1 .ufbl-form-reset:hover { background-color: #52a2e5 !important; color:#fff !important; } .ufbl-template-1 .ufbl-error { color: #ff0000; font-size: 13px; font-style: italic; margin-top: 5px; text-align: right; } .ufbl-template-1 .ufbl-math-captcha-ans { border: 1px solid #aab2bd; border-radius: 4px; height: 35px; margin-top: 3px; width: 176px; font-size:15px; } .ufbl-template-1 input.ufbl-form-radio{ display:none; } .ufbl-template-1 input[type=radio] + label{ background: rgba(0, 0, 0, 0) url("../images/uncheck-radio.png") no-repeat scroll left center; cursor: pointer; display: block; font-size: 16px; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-1 input[type=radio]:checked + label{ background: rgba(0, 0, 0, 0) url("../images/checked-radio.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-1 .ufbl-form-checkbox { display:none; } .ufbl-template-1 input[type=checkbox]:checked + label { background: rgba(0, 0, 0, 0) url("../images/check-box-checked.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 5px 0 0 35px; vertical-align: top; } .ufbl-template-1 input[type=checkbox] + label { background: rgba(0, 0, 0, 0) url("../images/check-box.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 5px 0 0 35px; vertical-align: top; font-size:16px; } .ufbl-template-1 .ufbl-form-field .ufbl-email-field { background: #f7f7f7 url("../images/mail.png") no-repeat scroll right 10px center / 20px auto; height:35px; } .ufbl-template-1 .ufbl-form-message.ufbl-success-message{ border: 1px solid #aab2bd; border-radius: 4px; font-size: 15px; padding: 5px 10px; } .ufbl-template-1 .ufbl-form-message.ufbl-error-message { border: 1px solid #ff0000; border-radius: 4px; color: #ff0000; font-size: 15px; padding: 5px 10px; } /**-------- dropdown ------ */ .ufbl-template-1 .sbSelector{ line-height:34px !important; } .ufbl-template-1 .sbSelector:link, .sbSelector:visited, .sbSelector:hover { color: #434a54 !important; } .ufbl-template-1 .entry-content a, .ufbl-template-1 .entry-summary a, .ufbl-template-1 .page-content a, .ufbl-template-1 .comment-content a, .pingback .comment-body > a { border: none !important; } .ufbl-template-1 .ufbl-form-field .sbHolder { background-color: #ffffff; border-radius: 4px; font-size: 14px; width: 50% !important; border: 1px solid #aab2bd !important; height:35px; } .ufbl-template-1 .sbOptions { background-color: #ffffff !important; border: 1px solid #aab2bd; border-radius: 0 0 4px 4px; color: #000000 !important; top: 31px !important; width: 101% !important; } .ufbl-template-1 .sbOptions a:link, .ufbl-template-1 .sbOptions a:visited { color:#999999 !important; } .ufbl-template-1 .sbOptions a:hover, .ufbl-template-1 .sbOptions a:focus, .ufbl-template-1 .sbOptions a.sbFocus { background-color: #74baf5; color:#fff !important; } .ufbl-template-1 .sbOptions{ max-height:inherit !important; } .ufbl-template-1 .sbOptions li { padding: 0 !important; border-bottom:1px solid #aab2bd; } .ufbl-template-1 .sbOptions li:last-child{ border-bottom: none; } .ufbl-template-1 .sbToggle { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; } .ufbl-template-1.sbToggle:hover, .ufbl-template-1 .sbToggle:focus { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; outline:none; } /**-------- Template 1 end ------ */ /**-------- Template 2 ------ */ .ufbl-form-wrapper.ufbl-template-2 { background-color: #fff; padding:40px 30px; -webkit-box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); } .ufbl-template-2 .ufbl-form-title { margin-bottom: 40px; font-size:22px; color:#3979a9; text-transform:uppercase; } .ufbl-template-2 .ufbl-form-field-wrap{ margin-bottom:20px; } .ufbl-template-2 .ufbl-form-field-wrap > label{ display:inline-block; width:135px; font-size:16px; color:#000; vertical-align:top; margin-top:7px; } .ufbl-template-2 .ufbl-form-field { display: inline-block; width: 74.6%; } .ufbl-template-2 input[type="text"], .ufbl-template-2 input[type="email"], .ufbl-template-2 input[type="url"],.ufbl-template-2 input[type="password"],.ufbl-template-2 input[type="search"],.ufbl-template-2 textarea{ border-color:#aab2bd; background-color: transparent; padding:4px 8px; font-size:16px; } .ufbl-template-2 input[type="checkbox"], input[type="radio"] button, select, textarea{ outline:none !important; } .ufbl-template-2 .ufbl-form-checkbox{ margin-right:5px; } .ufbl-template-2 .ufbl-form-textfield:focus{ -webkit-box-shadow: 0 0 1px 1px #67D5EB; box-shadow: 0 0 1px 1px #67D5EB; } .ufbl-template-2 #your-hobbies > label { vertical-align: top !important; } .ufbl-template-2 .your-hobbies .ufbl-form-field > label { display: block; margin-bottom: 10px; } .ufbl-template-2 *::-moz-placeholder { color: rgba(51, 51, 51, 0.7); font-family: "Noto Sans",sans-serif; opacity: 1; font-size: 14px; } .ufbl-template-2 select.ufbl-required, .ufbl-template-2 .ufbl-form-field select,.ufbl-template-2 .ufbl-form-field .ufbl-number-field { border: 1px solid #aab2bd; width:50%; padding:5px; font-size:16px; cursor:pointer; height:35px; background:transparent; } .ufbl-template-2 .ufbl-email-field{ font-size:16px; box-shadow: none; padding:8px; } .ufbl-template-2 #asdfasdf > label { margin-top:7px; } .ufbl-template-2 .ufbl-form-submit { background-color: #74baf5; margin-left:135px; font-size:15px; text-transform:none; } .ufbl-template-2 .ufbl-form-submit:hover { background-color: #52a2e5; } .ufbl-template-2 .ufbl-form-submit:focus { color: #fff; } .ufbl-template-2 .ufbl-form-reset { background-color: rgba(0, 0, 0, 0); border: 1px solid #aab2bd !important; border-radius: 0 !important; color: #434a54; font-size: 15px; padding: 11px 20px !important; text-transform: none; } .ufbl-template-2 .ufbl-form-reset:hover { background-color: #52a2e5; color:#fff; } .ufbl-template-2 .ufbl-form-reset:focus{ color:#fff; } .ufbl-template-2 .ufbl-error { color: #ff0000; font-size: 13px; margin-top:5px; text-align:right; font-style:italic; } .ufbl-template-2 .ufbl-math-captcha-ans { border:1px solid #aab2bd; margin-top: 3px; width:176px; height:35px; font-size:15px; } .ufbl-template-2 input.ufbl-form-radio{ display:none; } .ufbl-template-2 input[type=radio] + label{ background: rgba(0, 0, 0, 0) url("../images/uncheck-radio.png") no-repeat scroll left center; cursor: pointer; display: block; font-size: 16px; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-2 input[type=radio]:checked + label{ background: rgba(0, 0, 0, 0) url("../images/checked-radio.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-2 .ufbl-form-checkbox { display:none; } .ufbl-template-2 input[type=checkbox]:checked + label { background: rgba(0, 0, 0, 0) url("../images/check-box-checked.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 5px 0 0 35px; vertical-align: top; } .ufbl-template-2 input[type=checkbox] + label { background: rgba(0, 0, 0, 0) url("../images/check-box.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 5px 0 0 35px; vertical-align: top; font-size:16px; } .ufbl-template-2 .ufbl-email-field { background: #f7f7f7 url("../images/mail.png") no-repeat scroll right 10px center / 20px auto; height: 35px; } .ufbl-template-2 .ufbl-form-message.ufbl-success-message{ border: 1px solid #aab2bd; font-size: 15px; padding: 5px 10px; } .ufbl-template-2 .ufbl-form-message.ufbl-error-message { border: 1px solid #ff0000; color: #ff0000; font-size: 15px; padding: 5px 10px; } /**-------- dropdown ------ */ .ufbl-template-2 .sbSelector{ line-height:34px !important; } .ufbl-template-2 .sbSelector:link, .sbSelector:visited, .sbSelector:hover { color: #434a54 !important; } .ufbl-template-2 .entry-content a, .ufbl-template-2 .entry-summary a, .ufbl-template-2 .page-content a, .ufbl-template-2 .comment-content a, .ufbl-template-2 .pingback .comment-body > a { border: none !important; } /*.entry-content a, .entry-summary a, .page-content a, .comment-content a, .pingback .comment-body > a { border-bottom:none !important; }*/ .ufbl-form-field a { border-bottom: none !important; } .ufbl-template-2 .ufbl-form-field .sbHolder { background-color: #ffffff; font-size: 14px; width: 50% !important; border: 1px solid #aab2bd !important; height:35px; } .ufbl-template-2 .sbOptions { background-color: #ffffff !important; border: 1px solid #aab2bd; color: #000000 !important; top: 33px !important; width: 101% !important; } .ufbl-template-2 .sbOptions a:link, .ufbl-template-2 .sbOptions a:visited { color:#999999 !important; } .ufbl-template-2 .sbOptions a:hover, .ufbl-template-2 .sbOptions a:focus, .ufbl-template-2 .sbOptions a.sbFocus { background-color: #74baf5; color:#fff !important; } .ufbl-template-2 .sbOptions{ max-height:inherit !important; } .ufbl-template-2 .sbOptions li { padding: 0 !important; border-bottom:1px solid #aab2bd; } .ufbl-template-2 .sbOptions li:last-child{ border-bottom: none; } .ufbl-template-2 .sbToggle { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; } .ufbl-template-2.sbToggle:hover, .ufbl-template-2 .sbToggle:focus { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; outline:none; } /**-------- Template 2 end ------ */ /**-------- Template 3 ------ */ .ufbl-form-wrapper.ufbl-template-3 { background-color: #fff; padding:40px 30px; -webkit-box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); } .ufbl-template-3 .ufbl-form-title { margin-bottom: 40px; font-size:22px; color:#3979a9; text-transform:uppercase; } .ufbl-template-3 .ufbl-form-field-wrap{ margin-bottom:20px; } .ufbl-template-3 .ufbl-form-field-wrap > label{ display:inline-block; width:135px; font-size:16px; color:#000; vertical-align:top; margin-top:7px; } .ufbl-template-3 .ufbl-form-field { display: inline-block; width: 74.6%; } .ufbl-template-3 .ufbl-form-field input[type="text"], .ufbl-template-3 .ufbl-form-field input[type="email"],.ufbl-template-3 .ufbl-form-field input[type="password"],.ufbl-template-3 .ufbl-form-field textarea,.ufbl-template-3 .ufbl-form-field input[type="reset"] { border: 3px solid #74baf5; padding:4px 8px; background-color:transparent; font-size:16px; } .ufbl-template-3 .ufbl-form-field .ufbl-form-reset:hover{ background:#52a2e5; border-color:#52a2e5; } .ufbl-template-3 input[type="checkbox"], input[type="radio"] button, select, textarea{ outline:none !important; } .ufbl-template-3 .ufbl-form-checkbox{ margin-right:5px; } .ufbl-template-3 .ufbl-required:focus{ -webkit-box-shadow: 0 0 1px 1px #67D5EB; box-shadow: 0 0 1px 1px #67D5EB; } .ufbl-template-3 #your-hobbies > label { vertical-align: top !important; } .ufbl-template-3 .your-hobbies .ufbl-form-field > label { display: block; margin-bottom: 10px; } .ufbl-template-3 *::-moz-placeholder { color: rgba(51, 51, 51, 0.7); font-family: "Noto Sans",sans-serif; opacity: 1; font-size: 14px; } .ufbl-template-3 select.ufbl-required, .ufbl-template-3 .ufbl-form-field select,.ufbl-template-3 .ufbl-form-field .ufbl-number-field { border: 3px solid #74baf5; width:50%; padding:5px; font-size:14px; cursor:pointer; height:38px; background:transparent; } .ufbl-template-3 .ufbl-email-field{ font-size:14px; box-shadow: none; padding:8px; } .ufbl-template-3 #asdfasdf > label { margin-top:7px; } .ufbl-template-3 .ufbl-form-submit { background-color: #74baf5; } .ufbl-template-3 .ufbl-form-submit:hover { background-color: #52a2e5; } .ufbl-template-3 .ufbl-form-submit:focus { color: #fff; } .ufbl-template-3 .ufbl-form-reset { border:3px solid #74baf5 !important; background-color:transparent; color:#434a54; padding:9px 20px !important; border-radius:0 !important; text-transform: none; } .ufbl-template-3 .ufbl-form-reset:hover { background-color: #52a2e5; border-color:#52a2e5 !important; color:#fff; } .ufbl-template-3 .ufbl-form-reset:focus{ color:#fff; } .ufbl-template-3 .ufbl-form-field .ufbl-form-submit { font-size: 15px; margin-left: 135px; text-transform: none; } .ufbl-template-3 .ufbl-error { color: #ff0000; font-size: 13px; margin-top:5px; text-align:right; font-style:italic; } .ufbl-template-3 .ufbl-math-captcha-ans { border: 3px solid #74baf5; margin-top: 3px; width: 154px; height:38px; padding:2px 6px; } .ufbl-template-3 input.ufbl-form-radio{ display:none; } .ufbl-template-3 input[type=radio] + label{ background: rgba(0, 0, 0, 0) url("../images/uncheck-radio-bold-border.png") no-repeat scroll left center; cursor: pointer; display: block; font-size: 16px; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-3 input[type=radio]:checked + label{ background: rgba(0, 0, 0, 0) url("../images/checked-radio-bold-border.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-3 .ufbl-form-checkbox { display:none; } .ufbl-template-3 input[type=checkbox]:checked + label { background: rgba(0, 0, 0, 0) url("../images/check-box-checked-bold-border.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 4px 0 0 35px; vertical-align: top; } .ufbl-template-3 input[type=checkbox] + label { background: rgba(0, 0, 0, 0) url("../images/check-box-bod-border.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 4px 0 0 35px; vertical-align: top; font-size:16px; } .ufbl-template-3 .ufbl-email-field{ background: #f7f7f7 url("../images/mail.png") no-repeat scroll right 10px center / 20px auto; height:40px; } .ufbl-template-3 .ufbl-form-message.ufbl-success-message{ border: 3px solid #74baf5; font-size: 15px; padding: 5px 10px; } .ufbl-template-3 .ufbl-form-message.ufbl-error-message { border: 3px solid #ff0000; color: #ff0000; font-size: 15px; padding: 5px 10px; } /**-------- dropdown ------ */ .ufbl-template-3 .sbSelector{ line-height:35px !important; } .ufbl-template-3 .sbSelector:link, .sbSelector:visited, .sbSelector:hover { color: #434a54 !important; } .ufbl-template-3 .entry-content a, .ufbl-template-3 .entry-summary a, .ufbl-template-3 .page-content a, .ufbl-template-3 .comment-content a, .ufbl-template-3 .pingback .comment-body > a { border: none !important; } .ufbl-template-3 .ufbl-form-field .sbHolder { background-color: #ffffff; font-size: 14px; width: 50% !important; border: 3px solid #74baf5 !important; height:40px; } .ufbl-template-3 .sbOptions { background-color: #ffffff !important; border: 3px solid #74baf5; color: #000000 !important; margin-left: -2px; top: 29px !important; width: 103% !important; } .ufbl-template-3 .sbOptions a:link, .ufbl-template-3 .sbOptions a:visited { color:#999999 !important; } .ufbl-template-3 .sbOptions a:hover, .ufbl-template-3 .sbOptions a:focus, .ufbl-template-3 .sbOptions a.sbFocus { background-color: #74baf5; color:#fff !important; } .ufbl-template-3 .sbOptions{ max-height:inherit !important; } .ufbl-template-3 .sbOptions li { padding: 0 !important; border-bottom:3px solid #74baf5; } .ufbl-template-3 .sbOptions li:last-child{ border-bottom: none; } .ufbl-template-3 .sbToggle { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; } .ufbl-template-3.sbToggle:hover, .ufbl-template-2 .sbToggle:focus { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; outline:none; } /**-------- Template 3 end ------ */ /**-------- Template 4 ------ */ .ufbl-form-wrapper.ufbl-template-4 { background-color: #fff; padding:40px 30px; -webkit-box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); } .ufbl-template-4 .ufbl-form-title { margin-bottom: 40px; font-size:22px; color:#3979a9; text-transform:uppercase; } .ufbl-template-4 .ufbl-form-field-wrap{ margin-bottom:20px; } .ufbl-template-4 .ufbl-form-field-wrap > label{ display:inline-block; width:135px; font-size:16px; color:#000; vertical-align:top; margin-top:7px; } .ufbl-template-4 .ufbl-form-field { display: inline-block; width: 74.6%; } .ufbl-template-4 input[type="text"],.ufbl-template-4 input[type="email"],.ufbl-template-4 input[type="url"],.ufbl-template-4 input[type="password"],.ufbl-template-4 input[type="search"],.ufbl-template-4 textarea { border:transparent; border-bottom: 2px solid #74baf5; padding: 4px 8px; background-color: transparent; font-size:16px; } .ufbl-template-4 textarea{ outline: 1px solid #74baf5 !important; border-bottom: 2px solid #74baf5; background-color:transparent; font-size:16px; } .ufbl-template-4 input[type="checkbox"], input[type="radio"] button, select, textarea{ outline:none !important; } .ufbl-template-4 .ufbl-form-checkbox{ margin-right:5px; } .ufbl-template-4 .ufbl-email-field:focus,.ufbl-template-4 input[type="text"]:focus,.ufbl-template-4 input[type="number"]:focus,.ufbl-template-4 input[type="url"]:focus,.ufbl-template-4 input[type="password"]:focus,.ufbl-template-4 input[type="search"]:focus,.ufbl-template-4 textarea:focus{ -webkit-box-shadow: 0 0 1px 1px #67D5EB; box-shadow: 0 0 1px 1px #67D5EB; } .ufbl-template-4 #your-hobbies > label { vertical-align: top !important; } .ufbl-template-4 .your-hobbies .ufbl-form-field > label { display: block; margin-bottom: 10px; } .ufbl-template-4 input::-moz-placeholder, .ufbl-template-4 input::-webkit-input-placeholder { color: rgba(51, 51, 51, 0.7)!important; opacity: 1; font-size: 15px !important; } .ufbl-template-4 select.ufbl-required, .ufbl-template-4 .ufbl-form-field select,.ufbl-template-4 .ufbl-form-field .ufbl-number-field { border:transparent; border-bottom: 2px solid #74baf5; width:50%; padding:5px; cursor:pointer; height:38px; background-color: transparent; } .ufbl-template-4 .ufbl-email-field{ box-shadow: none; padding:8px; } .ufbl-template-4 .ufbl-form-submit { background-color: #74baf5; } .ufbl-template-4 .ufbl-form-submit:hover { background-color: #52a2e5; } .ufbl-template-4 .ufbl-form-submit:focus { color: #fff; } .ufbl-template-4 .ufbl-form-reset { background-color: rgba(0, 0, 0, 0); border: 2px solid #74baf5 !important; border-radius: 0 !important; color: #434a54; font-size: 15px; padding: 10px 20px !important; text-transform: none; } .ufbl-template-4 .ufbl-form-reset:hover { background-color: #52a2e5; border-color:#52a2e5; color:#fff; } .ufbl-template-4 .ufbl-form-reset:focus{ color:#fff; } .ufbl-template-4 .ufbl-form-field .ufbl-form-submit { font-size: 15px; margin-left: 135px; text-transform: none; } .ufbl-template-4 .ufbl-error { color: #ff0000; font-size: 13px; margin-top:5px; text-align:right; font-style:italic; } .ufbl-template-4 .ufbl-math-captcha-ans { border:transparent; border-bottom: 2px solid #74baf5; background-color:transparent; margin-top: 3px; width: 154px; height:38px; padding:2px 6px; } .ufbl-template-4 input.ufbl-form-radio{ display:none; } .ufbl-template-4 input[type=radio] + label{ background: rgba(0, 0, 0, 0) url("../images/uncheck-radio-bold-border.png") no-repeat scroll left center; cursor: pointer; display: block; font-size: 16px; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-4 input[type=radio]:checked + label{ background: rgba(0, 0, 0, 0) url("../images/checked-radio-bold-border.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-4 .ufbl-form-checkbox { display:none; } .ufbl-template-4 input[type=checkbox]:checked + label { background: rgba(0, 0, 0, 0) url("../images/check-box-checked-bold-border.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 4px 0 0 35px; vertical-align: top; } .ufbl-template-4 input[type=checkbox] + label { background: rgba(0, 0, 0, 0) url("../images/check-box-bod-border.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 4px 0 0 35px; vertical-align: top; font-size:16px; } .ufbl-template-4 .ufbl-email-field { background: url("../images/mail.png") no-repeat scroll right 10px center / 20px auto; height:40px; } .ufbl-template-4 .ufbl-form-message.ufbl-success-message{ border: 2px solid #74baf5; font-size: 15px; padding: 5px 10px; } .ufbl-template-4 .ufbl-form-message.ufbl-error-message { border: 2px solid #ff0000; color: #ff0000; font-size: 15px; padding: 5px 10px; } /**-------- dropdown ------ */ .ufbl-template-4 .sbSelector{ line-height:30px !important; } .ufbl-template-4 .sbSelector:link, .sbSelector:visited, .sbSelector:hover { color: #434a54 !important; } .ufbl-template-4 .entry-content a, .ufbl-template-4 .entry-summary a, .ufbl-template-4 .page-content a, .ufbl-template-4 .comment-content a, .ufbl-template-4 .pingback .comment-body > a { border: none !important; } .ufbl-template-4 .ufbl-form-field .sbHolder { background-color: #ffffff; font-size: 14px; width: 50% !important; border: transparent; border-bottom: 2px solid #74baf5 !important; height:35px; } .ufbl-template-4 .sbOptions { background-color: #ffffff !important; border:transparent; color: #000000 !important; margin-left: -2px; top: 35px !important; width: 103% !important; } .ufbl-template-4 .sbOptions a:link, .ufbl-template-4 .sbOptions a:visited { color:#999999 !important; } .ufbl-template-4 .sbOptions a:hover, .ufbl-template-4 .sbOptions a:focus, .ufbl-template-4 .sbOptions a.sbFocus { background-color: transparent; color:#74baf5 !important; } .ufbl-template-4 .sbOptions{ max-height:inherit !important; } .ufbl-template-4 .sbOptions li { padding: 0 !important; border-bottom:2px solid #74baf5; } .ufbl-template-4 .sbToggle { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; } .ufbl-template-4.sbToggle:hover, .ufbl-template-4 .sbToggle:focus { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; outline:none; } /**-------- Template 4 end ------ */ /**-------- Template 5 ------ */ .ufbl-form-wrapper.ufbl-template-5 { background-color: #fff; padding:40px 30px; -webkit-box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); box-shadow: 0 3px 8px 3px rgba(0,0,0,0.4); } .ufbl-template-5 .ufbl-form-title { margin-bottom: 40px; font-size:22px; color:#3979a9; text-transform:uppercase; } .ufbl-template-5 .ufbl-form-field-wrap{ margin-bottom:20px; } .ufbl-template-5 .ufbl-form-field-wrap > label{ display:inline-block; width:135px; font-size:16px; color:#000; vertical-align:top; margin-top:7px; } .ufbl-template-5 .ufbl-form-field { display: inline-block; width: 74.6%; } .ufbl-template-5 input[type="text"],.ufbl-template-5 input[type="email"],.ufbl-template-5 input[type="url"],.ufbl-template-5 input[type="password"],.ufbl-template-5 input[type="search"]{ border:transparent; padding: 4px 8px; background-color: #146782; color: #fff; font-size:16px; height:35px; } .ufbl-template-5 textarea{ border:transparent; padding: 4px 8px; background-color: #146782; color: #fff; font-size:16px; } .ufbl-template-5 input[type="checkbox"], input[type="radio"] button, select, textarea{ outline:none !important; } .ufbl-template-5 .ufbl-form-checkbox{ margin-right:5px; } .ufbl-template-5 .ufbl-email-field:focus,.ufbl-template-5 input[type="text"]:focus,.ufbl-template-5 input[type="number"]:focus,.ufbl-template-5 input[type="url"]:focus,.ufbl-template-5 input[type="password"]:focus,.ufbl-template-5 input[type="search"]:focus{ -webkit-box-shadow: 0 0 1px 1px #67D5EB; box-shadow: 0 0 1px 1px #67D5EB; } .ufbl-template-5 textarea:focus{ -webkit-box-shadow: 0 0 1px 1px #67D5EB; box-shadow: 0 0 1px 1px #67D5EB; background-color:#146782 !important; color:#fff !important; } .ufbl-template-5 #your-hobbies > label { vertical-align: top !important; } .ufbl-template-5 .your-hobbies .ufbl-form-field > label { display: block; margin-bottom: 10px; } .ufbl-template-5 input::-moz-placeholder, .ufbl-template-5 textarea::-moz-placeholder /*mozila*/ { color: #fff; opacity: 1; font-size: 14px; } .ufbl-template-5 input::-webkit-input-placeholder,.ufbl-template-5 textarea.ufbl-form-textarea::-webkit-input-placeholder /*chrome*/{ color: #fff; opacity: 1; font-size: 14px; } .ufbl-template-5 select.ufbl-required, .ufbl-template-5 .ufbl-form-field select,.ufbl-template-5 .ufbl-form-field .ufbl-number-field { border:transparent; width:50%; padding:5px; font-size:16px; height:38px; background-color: #146782; color:#fff; } .ufbl-template-5 .ufbl-email-field{ font-size:14px; box-shadow: none; padding:8px; } .ufbl-template-5 .ufbl-form-submit { background-color: #146782; } .ufbl-template-5 .ufbl-form-submit:hover { background-color: #0b7ea4; } .ufbl-template-5 .ufbl-form-submit:focus { color: #fff; } .ufbl-template-5 .ufbl-form-reset { background-color: rgba(0, 0, 0, 0); border: 2px solid #146782 !important; border-radius: 0 !important; color: #434a54; font-size: 15px; padding: 10px 20px !important; text-transform: none; } .ufbl-template-5 .ufbl-form-reset:hover { background-color: #0b7ea4; border-color:#0b7ea4 !important; color:#fff; } .ufbl-template-5 .ufbl-form-reset:focus{ color:#fff; } .ufbl-template-5 .ufbl-form-field .ufbl-form-submit { font-size: 15px; margin-left: 135px; text-transform: none; } .ufbl-template-5 .ufbl-error { color: #ff0000; font-size: 13px; margin-top:5px; text-align:right; font-style:italic; } .ufbl-template-5 .ufbl-math-captcha-ans { border:transparent; border-bottom: 2px solid #74baf5; background-color:transparent; margin-top: 3px; width: 154px; height:38px; padding:2px 6px; font-size:15px; } .ufbl-template-5 input.ufbl-form-radio{ display:none; } .ufbl-template-5 input[type=radio] + label{ background: rgba(0, 0, 0, 0) url("../images/uncheck-radio-5.png") no-repeat scroll left center; cursor: pointer; display: block; font-size: 16px; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-5 input[type=radio]:checked + label{ background: rgba(0, 0, 0, 0) url("../images/checked-radio-5.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 3px 0 0 35px; vertical-align: top; } .ufbl-template-5 .ufbl-form-checkbox { display:none; } .ufbl-template-5 input[type=checkbox]:checked + label { background: rgba(0, 0, 0, 0) url("../images/check-box-checked-5.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 4px 0 0 35px; vertical-align: top; } .ufbl-template-5 input[type=checkbox] + label { background: rgba(0, 0, 0, 0) url("../images/check-box-5.png") no-repeat scroll left center; cursor: pointer; display: block; height: 34px; margin-bottom: 8px; padding: 4px 0 0 35px; vertical-align: top; font-size:16px; } .ufbl-template-5 .ufbl-email-field { background: url("../images/mail-white.png") no-repeat scroll right 10px center / 20px auto; height:40px; } .ufbl-template-5 .ufbl-form-message.ufbl-success-message{ border: 2px solid #146782; font-size: 15px; padding: 5px 10px; } .ufbl-template-5 .ufbl-form-message.ufbl-error-message { border: 2px solid #ff0000; color: #ff0000; font-size: 15px; padding: 5px 10px; } /**-------- dropdown ------ */ .ufbl-template-5 .sbSelector{ line-height:30px !important; } .ufbl-template-5 .sbSelector:link, .sbSelector:visited, .sbSelector:hover { color: #fff !important; } .ufbl-template-5 .entry-content a, .ufbl-template-5 .entry-summary a, .ufbl-template-5 .page-content a, .ufbl-template-5 .comment-content a, .ufbl-template-5 .pingback .comment-body > a { border: none !important; } .ufbl-template-5 .ufbl-form-field .sbHolder { background-color: #146782; font-size: 14px; width: 50% !important; border: transparent; height:35px; } .ufbl-template-5 .sbOptions { background-color: #f5f5f5 !important; border:transparent; color: #000000 !important; margin-left: 1px; top: 35px !important; width: 100% !important; } .ufbl-template-5 .sbOptions a:link, .ufbl-template-5 .sbOptions a:visited { color:#000 !important; } .ufbl-template-5 .sbOptions a:hover, .ufbl-template-5 .sbOptions a:focus, .ufbl-template-5 .sbOptions a.sbFocus { background-color: #146782; color:#fff !important; } .ufbl-template-5 .sbOptions{ max-height:inherit !important; } .ufbl-template-5 .sbOptions li { padding: 0 !important; border-bottom:2px solid #fff; } .ufbl-template-5 .sbToggle { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle-5.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; border-left: 1px solid #c6e3eb; top:3px !important; width:46px !important; } .ufbl-template-5.sbToggle:hover, .ufbl-template-5 .sbToggle:focus { background-attachment: scroll !important; background-clip: border-box !important; background-color: rgba(0, 0, 0, 0) !important; background-image: url("../images/option-angle-5-hover.png") !important; background-origin: padding-box !important; background-position: right 15px center; background-repeat: no-repeat !important; background-size: auto auto !important; outline:none; } /**-------- Template 5 end ------ */ /**-------- Responsive css ------ */ @media only screen and (max-width: 1300px) { /**-------- template 1 ------ */ .ufbl-template-1 .ufbl-form-field, .ufbl-template-2 .ufbl-form-field, .ufbl-template-3 .ufbl-form-field, .ufbl-template-4 .ufbl-form-field ,.ufbl-template-5 .ufbl-form-field { width: 72%; } } @media only screen and (max-width: 1200px) { /**-------- template 1 ------ */ .ufbl-template-1 .ufbl-form-field, .ufbl-template-2 .ufbl-form-field, .ufbl-template-3 .ufbl-form-field, .ufbl-template-4 .ufbl-form-field , .ufbl-template-5 .ufbl-form-field { width: 67%; } .ufbl-template-1 .ufbl-form-submit, .ufbl-template-2 .ufbl-form-submit, .ufbl-template-3 .ufbl-form-field .ufbl-form-submit, .ufbl-template-4 .ufbl-form-field .ufbl-form-submit, .ufbl-template-5 .ufbl-form-field .ufbl-form-submit { margin-left: 0; } } @media only screen and (max-width: 1024px) { /**-------- template 1 ------ */ .ufbl-template-1 .ufbl-form-field,.ufbl-template-2 .ufbl-form-field, .ufbl-template-3 .ufbl-form-field, .ufbl-template-4 .ufbl-form-field, .ufbl-template-5 .ufbl-form-field { width: 100%; } .ufbl-template-1 .ufbl-form-field-wrap > label, .ufbl-template-2 .ufbl-form-field-wrap > label, .ufbl-template-3 .ufbl-form-field-wrap > label, .ufbl-template-4 .ufbl-form-field-wrap > label, .ufbl-template-3 .ufbl-form-field-wrap > label, .ufbl-template-5 .ufbl-form-field-wrap > label { margin-top: 7px; } } @media only screen and (max-width: 955px) { /**-------- template 1 ------ */ .ufbl-template-1 .ufbl-form-field, .ufbl-template-2 .ufbl-form-field, .ufbl-template-3 .ufbl-form-field, .ufbl-template-4 .ufbl-form-field, .ufbl-template-5 .ufbl-form-field { width: 71%; } } @media only screen and (max-width: 800px) { /**-------- template 1 ------ */ .ufbl-template-1 .ufbl-form-field, .ufbl-template-2 .ufbl-form-field, .ufbl-template-3 .ufbl-form-field, .ufbl-template-4 .ufbl-form-field, .ufbl-template-5 .ufbl-form-field { width: 100%; } .ufbl-template-1 .ufbl-form-field-wrap > label, .ufbl-template-2 .ufbl-form-field-wrap > label, .ufbl-template-3 .ufbl-form-field-wrap > label, .ufbl-template-4 .ufbl-form-field-wrap > label, .ufbl-template-5 .ufbl-form-field-wrap > label { width: 100%; } } @media only screen and (max-width: 640px) { /**-------- template 1 ------ */ .ufbl-template-1 .ufbl-form-submit, .ufbl-template-2 .ufbl-form-submit, .ufbl-template-3 .ufbl-form-submit, .ufbl-template-4 .ufbl-form-submit, .ufbl-template-5 .ufbl-form-submit { margin-bottom: 10px; margin-left: 0; } } .ufbl-form-textarea { width: 100%; } .ufbl-multiple-dropdown { height: auto !important; }