/* THIS IS THE DEFAULT STYLING AND POSITIONING CSS FOR IPHORM. TO CHANGE THE DESIGN PLEASE USE AN IPHORM THEME CSS. THANKS :)
* Author: ThemeCatcher.net
* Author URI: http://www.themecatcher.net/
*/
/*******************************************************************************************************************************************
IMPORTANT: If you update the iPhorm plugin this file will also be updated. Thus if you make changes in here you will lose them!
We strongly recommend you make your own theme by duplicating one of our theme folders and renaming it. This way you will not lose anything.
********************************************************************************************************************************************/
/* Clearfix code */
.iphorm-clearfix:before,
.iphorm-clearfix:after {
content: "\0020";
display: block;
height: 0;
overflow: hidden;
}
.iphorm-clearfix:after {clear: both;}
.iphorm-clearfix {zoom: 1;} /* IE < 8 */
/*Cross browser fixes*/
.iphorm-inner input[type="checkbox"], input[type="radio"] {
vertical-align: middle;
}
.iphorm-inner label {
vertical-align: middle;
display: inline-block;
min-height: 20px;
}
.iphorm-inner button::-moz-focus-inner {border: 0;}
:focus, .iphorm-inner a:focus{outline: 0}/* removes gray dotted outline */
.iphorm-inner input.middle:focus, .iphorm-inner select.middle:focus, .iphorm-inner textarea.middle:focus {outline-width: 0;}
.iphorm-inner input:focus, .iphorm-inner select:focus, .iphorm-inner textarea:focus {outline: none;}
.iphorm-inner textarea {overflow: auto} /* IE7 fix */
.iphorm-inner button, .iphorm-innerinput{ /* IE7 extra spacing fix */
width: auto;
overflow: visible
}
.iphorm-inner button{border: 1px outset #ccc} /* optional - IE7 fix */
/*Main Wrappers*/
.iphorm-inner .iphorm-elements {
margin: 0;
padding: 0;
}
.iphorm-element-spacer {
padding-bottom: 10px;
}
/*Hidden*/
.iphorm-hidden {
display: none
}
/*Required*/
.iphorm-element-wrap label span.iphorm-required {
color: #cc0101;
font-size: 10px;
}
/*Default input, selects and textareas*/
.iphorm-elements .iphorm-element-wrap-text input,
.iphorm-elements .iphorm-element-wrap-captcha input,
.iphorm-elements .iphorm-element-wrap-password input,
.iphorm-elements .iphorm-element-wrap select,
.iphorm-elements .iphorm-element-wrap textarea {
margin: 0;
margin-bottom: 3px;
color: #999;
border: solid 1px #CCC;
padding: 2px;
min-width: 10px;
max-width: 100%;
}
.iphorm-elements .iphorm-element-wrap-text input:hover,
.iphorm-elements .iphorm-element-wrap-captcha input:hover,
.iphorm-elements .iphorm-element-wrap-password input:hover,
.iphorm-elements .iphorm-element-wrap select:hover,
.iphorm-elements .iphorm-element-wrap textarea:hover,
.iphorm-elements .iphorm-element-wrap-text input:active,
.iphorm-elements .iphorm-element-wrap-captcha input:active,
.iphorm-elements .iphorm-element-wrap-password input:active,
.iphorm-elements .iphorm-element-wrap select:active,
.iphorm-elements .iphorm-element-wrap textarea:active,
.iphorm-elements .iphorm-element-wrap-text input:focus,
.iphorm-elements .iphorm-element-wrap-captcha input:focus,
.iphorm-elements .iphorm-element-wrap-password input:focus,
.iphorm-elements .iphorm-element-wrap select:focus,
.iphorm-elements .iphorm-element-wrap textarea:focus
{color: #000;}
/* Default Label*/
.iphorm-element-wrap > label {
font-weight: bold;
padding: 0 0 4px 0;
display: inline-block;
}
/*File uploads*/
.iphom-upload-progress-wrap {
display: none;
background: #eee;
border: 1px solid #ddd;
padding: 5px;
margin: 0 5px 5px 0;
line-height: 14px;
}
.iphorm-upload-progress-bar-wrap {
background: #eee;
border: 1px solid #ccc;
padding: 1px;
}
.iphorm-upload-progress-bar {
width: 0;
height: 10px;
background: #7ec100;
}
.iphorm-upload-info {
padding-top: 3px;
}
.iphorm-upload-info > div {
float: left;
display: inline-block;
padding: 0 10px;
font-size: 11px;
line-height: 15px;
}
.iphorm-upload-error {
display: none;
padding: 3px;
background: #F3CAC7;
}
.iphorm-upload-info > div:first-child {
padding-left: 2px;
}
.iphorm-file-queue {
display: none;
padding-bottom: 5px;
}
.iphorm-upload-queue-file {
float: left;
display: inline-block;
background: #eee;
border: 1px solid #ddd;
padding: 5px;
margin: 0 5px 5px 0;
position: relative;
overflow: hidden;
}
.iphorm-upload-queue-filename {
float: left;
max-width: 200px;
overflow: hidden;
white-space: nowrap;
margin-right: 20px;
}
.iphorm-upload-queue-remove {
font-size: 10px;
font-weight: bold;
color: #000;
cursor: pointer;
position: absolute;
right: 0;
top: 50%;
margin: -8px 4px 0 0;
height: 17px;
width: 17px;
line-height: 17px;
text-align: center;
display: block;
}
.iphorm-upload-queue-success {
font-size: 10px;
font-weight: bold;
color: #000;
position: absolute;
right: 0;
top: 50%;
margin: -8px 4px 0 0;
height: 17px;
width: 17px;
line-height: 17px;
text-indent: -99999px;
background: url(../images/file-upload-tick.png) no-repeat center center;
display: block;
}
/*File browse button*/
.iphorm-swfupload {
position: relative;
margin-bottom: 8px;
display: none;
}
.iphorm-swfupload object.swfupload {
position: absolute;
left: 0;
bottom: 0;
}
/*add styles to your button*/
.iphorm-swfupload-browse {
background: #EEE;
border: solid 1px #DDD;
text-align: center;
min-width: 80px;
min-height: 20px;
line-height: 20px;
padding: 1px 10px;
display: inline-block;
cursor: pointer;
float: left;
position: relative;
}
/*add styles to add another button*/
.iphorm-add-another-upload {
margin-top: 5px;
}
.iphorm-add-another-upload span.iphorm-add-another-upload-button {
background: #EEE;
border: solid 1px #DDD;
text-align: center;
cursor: pointer;
padding: 4px 10px;
margin: 3px 0;
float: left;
line-height: 1;
}
.iphorm-add-another-upload span.iphorm-add-another-upload-button:hover {
background: #ddd;
}
/*Element Description*/
.iphorm-element-wrap p.iphorm-description,
#content .iphorm-element-wrap p.iphorm-description {
margin: 0;
font-size: 11px;
}
.iphorm-element-wrap p.iphorm-description {
padding-bottom: 0;
font-size: 11px;
font-style: italic;
}
/*Headings*/
h3.iphorm-title {
font-size: 22px;
font-weight: bold;
margin: 0;
padding-bottom: 8px;
}
/*Form Description*/
p.iphorm-description {
font-size: 12px;
color: #666;
margin: 0;
padding-bottom: 20px;
}
/*Check box and radio buttons*/
.iphorm-input-checkbox-ul, .iphorm-input-radio-ul {
margin: 0;
padding: 0;
}
.iphorm-input-checkbox-ul .iphorm-input-checkbox-li,
.iphorm-input-radio-ul .iphorm-input-radio-li {
margin: 0;
padding: 0;
height: 25px;
height: auto;
min-height: 25px;
}
.iphorm-input-checkbox-ul .iphorm-input-checkbox-li label,
.iphorm-input-radio-ul .iphorm-input-radio-li label {
position: relative;
}
.iphorm-elements .iphorm-element-wrap .iphorm-input-checkbox-ul .iphorm-input-checkbox-li input,
.iphorm-elements .iphorm-element-wrap .iphorm-input-radio-ul .iphorm-input-radio-li input {
border: none;
}
.iphorm-input-checkbox-li label,
.iphorm-input-radio-li label { line-height: 23px; }
/*Radio and checkboxes inline option*/
.iphorm-options-inline > .iphorm-input-checkbox-li,
.iphorm-options-inline > .iphorm-input-radio-li {
display: inline;
padding: 0 15px 5px 0;
float: left;
}
.iphorm-options-inline .iphorm-input-checkbox-li label,
.iphorm-options-inline .iphorm-input-radio-li label {white-space: nowrap;}
/*Captcha*/
.iphorm-captcha-image-wrap {
position: relative;
}
.ifb-captcha-image-inner {
position: relative;
float: left;
background: #fff url(../images/captcha-refresh-icon.png) no-repeat center center;
cursor: pointer;
}
.ifb-captcha-image-inner img {
max-width: 100%;
display: block;
}
/*Groups*/
.iphorm-group-title-description-wrap {
margin-bottom: 10px;
}
.iphorm-group-title {
font-size: 17px;
font-weight: bold;
margin: 0;
padding-bottom: 5px;
}
p.iphorm-group-description {
font-size: 13px;
color: #666;
margin: 0;
padding-bottom: 0;
}
.iphorm-group-style-bordered > .iphorm-group-elements {
border: solid 1px #CCC;
padding: 10px 10px 0;
}
.iphorm-group-row {
padding: 0;
}
.iphorm-group-row > .iphorm-element-wrap,
.iphorm-group-row > .iphorm-group-wrap {
display: inline-block;
float: left;
padding: 0;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row-1cols > .iphorm-element-wrap,
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row-1cols > .iphorm-group-wrap {
width: 100%;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row-2cols > .iphorm-element-wrap,
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row-2cols > .iphorm-group-wrap {
width: 49.9%;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row-3cols > .iphorm-element-wrap,
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row-3cols > .iphorm-group-wrap {
width: 33.3%;
}
.iphorm-group-alignment-proportional .iphorm-group-row-4cols > .iphorm-element-wrap,
.iphorm-group-alignment-proportional .iphorm-group-row-4cols > .iphorm-group-wrap {
width: 25%;
}
.iphorm-group-alignment-proportional .iphorm-group-row-5cols > .iphorm-element-wrap,
.iphorm-group-alignment-proportional .iphorm-group-row-5cols > .iphorm-group-wrap {
width: 20%;
}
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap,
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-group-wrap {
float: left;
width: auto;
}
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-group-alignment-proportional {
width: 100%;
clear: both;
}
/*Default Spacing in groups*/
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap .iphorm-element-spacer {
padding: 0 10px 10px 0;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap.last-child .iphorm-element-spacer,
.iphorm-group-alignment-proportional > .iphorm-group-elements > .iphorm-group-row.iphorm-group-row-1cols > .iphorm-element-wrap .iphorm-element-spacer,
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap.last-child .iphorm-element-spacer,
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row.iphorm-group-row-1cols > .iphorm-element-wrap .iphorm-element-spacer {
padding: 0 0 10px 0;
}
/*Left Spacing in groups*/
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-element-wrap .iphorm-element-spacer {
padding: 0 10px 10px 0;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap > .iphorm-group-elements {
margin-right: 10px;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap.last-child > .iphorm-group-elements,
.iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-row-1cols > .iphorm-group-wrap > .iphorm-group-elements {
margin-right: 0;
}
.iphorm-group-alignment-proportional > .iphorm-group-elements .iphorm-group-wrap.last-child {
margin-right: -10px;
min-width: 1px;
}
.iphorm-group-style-bordered.iphorm-group-wrap {
margin-bottom: 15px;
}
.iphorm-group-wrap > .iphorm-group-elements .iphorm-group-row .iphorm-group-style-bordered.iphorm-group-wrap {
margin-bottom: 0;
}
.iphorm-group-style-plain.iphorm-group-wrap {
margin: 0;
}
.iphorm-group-wrap .iphorm-group-row > .iphorm-group-style-plain.iphorm-group-wrap {
margin: 0;
}
.iphorm-group-wrap .iphorm-group-row > .iphorm-group-style-bordered.iphorm-group-wrap {
padding: 0 0 10px 0;
float: left;
}
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-group-style-bordered.iphorm-group-wrap {
margin-right: 10px;
}
.iphorm-group-alignment-left > .iphorm-group-elements > .iphorm-group-row > .iphorm-group-style-bordered.iphorm-group-wrap.last-child {
margin-right: 0;
}
.iphorm-group-wrap .iphorm-group-row.iphorm-group-row-1cols > .iphorm-group-style-bordered.iphorm-group-wrap {
padding: 0 0 10px 0;
float: none;
clear: both;
}
/*LABEL / INPUT POSITION OPTIONS*/
/*label above*/
.iphorm-labels-above > .iphorm-element-spacer > label {
position: relative;
padding-bottom: 8px;
}
/*label left*/
.iphorm-labels-left > .iphorm-element-spacer > label {
width: 150px;
position: relative;
float: left;
padding-bottom: 10px;
}
/*label inside (text, textarea, email, password)*/
.iphorm-element-wrap-text.iphorm-labels-inside > .iphorm-element-spacer > label,
.iphorm-element-wrap-textarea.iphorm-labels-inside > .iphorm-element-spacer > label,
.iphorm-element-wrap-password.iphorm-labels-inside > .iphorm-element-spacer > label,
.iphorm-element-wrap-captcha.iphorm-labels-inside > .iphorm-element-spacer > label {
padding: 0;
line-height: 16px;
margin-left: 5px;
margin-top: 3px;
color: #999;
position: absolute;
z-index: 1;
}
/*input above*/
.iphorm-labels-above.iphorm-element-wrap .iphorm-input-outer-wrap {
padding-top: 5px;
}
/*input left*/
.iphorm-labels-left.iphorm-element-wrap .iphorm-input-outer-wrap,
.iphorm-labels-left.iphorm-element-wrap .iphorm-input-wrap,
.iphorm-labels-left.iphorm-element-wrap .iphorm-captcha-image-wrap {
margin-left: 150px;
padding-left: 10px;
}
.iphorm-labels-left.iphorm-element-wrap .iphorm-input-outer-wrap > .iphorm-input-wrap {
margin-left: 0 !important;
padding-left: 0;
}
/*input inside*/
.iphorm-element-wrap.iphorm-labels-inside .iphorm-element-spacer {
position: relative;
}
/*input inside (text, textarea, email, password)*/
.iphorm-input-wrap-text.iphorm-labels-inside > .iphorm-element-spacer > input,
.iphorm-input-wrap-textarea.iphorm-labels-inside > .iphorm-element-spacer > input,
.iphorm-input-wrap-email.iphorm-labels-inside > .iphorm-element-spacer > input,
.iphorm-input-wrap-password.iphorm-labels-inside > .iphorm-element-spacer > input,
.iphorm-input-wrap-captcha.iphorm-labels-inside > .iphorm-element-spacer > input {
margin-top: 0;
}
/*Submit button*/
.iphorm-submit-wrap {margin: 10px 0}
.iphorm-submit-input-wrap {
float: left;
}
.iphorm-submit-wrap button {
border: none;
background: none;
text-align: center;
width: auto;
overflow: visible;
white-space: nowrap;
padding: 0;
margin: 0;
height: auto;
line-height: auto;
cursor: pointer;
margin-right: 5px;
}
.iphorm-submit-wrap button span, button em {
display: block;
height: 27px;
line-height: 27px;
margin: 0;
color: #000;
cursor: pointer;
}
.iphorm-submit-wrap button span {
padding-left: 20px;
background: #EEE;
border: solid 1px #DDD;
}
.iphorm-submit-wrap button em {
font-style: normal;
padding-right: 20px;
background: #EEE;
}
.iphorm-submit-wrap button:hover em {
background: #ddd;
}
.iphorm-submit-wrap button:active em {
background: #ccc;
}
.iphorm-submit-wrap button:hover span {
background: #ddd;
}
.iphorm-submit-wrap button:active span {
background: #ccc;
}
/*Loading the submit*/
.iphorm-loading-wrap {
display: none;
float: left;
height: 20px;
line-height: 20px;
text-align: center;
padding-top: 5px;
}
.iphorm-loading-wrap .iphorm-loading {
font-style: italic;
text-indent: -9999px;
display: block;
min-width: 30px;
background: transparent url(../images/default-loading.gif) no-repeat center center;
}
/*Errors*/
.iphorm-errors {
display: none;
}
.iphorm-errors-list {
margin: 0;
padding: 3px 0 6px 0;
}
.iphorm-errors-list > .iphorm-error {
padding: 3px 10px 3px 25px;
margin: 0;
line-height: 16px;
background: #F3CAC7 url(../images/error.png) no-repeat 3px center;
color: #000;
font-size: 12px;
font-weight: normal;
display: inline-block;
border: 1px solid #fa8b83;
float: left;
}
.iphorm-labels-left > .iphorm-element-spacer > .iphorm-errors-wrap {margin-left: 150px;}
.iphorm-labels-left > .iphorm-element-spacer > .iphorm-errors-wrap .iphorm-errors-list > .iphorm-error {margin-left: 10px !important;}
.iphorm-labels-above > .iphorm-element-spacer > .iphorm-errors-wrap .iphorm-errors-list .iphorm-error,
.iphorm-labels-inside > .iphorm-element-spacer > .iphorm-errors-wrap .iphorm-errors-list .iphorm-error
{margin-left: 0 !important;}
/*File upload errors*/
.iphorm-queue-errors {
display: none;
}
.iphorm-queue-errors {
margin: 0;
padding: 0 0 10px 0;
}
.iphorm-queue-errors-list > .iphorm-queue-error {
padding: 3px 10px 3px 25px;
margin: 0;
line-height: 16px;
background: #F3CAC7 url(../images/error.png) no-repeat 3px center;
color: #000;
font-size: 12px;
font-weight: normal;
display: inline-block;
border: 1px solid #fa8b83;
float: left;
}
/*Success message*/
.iphorm-success-message {
background: #cef4a9 url(../images/success.png) no-repeat 14px center;
padding: 8px 20px 8px 45px;
line-height: 18px;
margin: 10px 0;
border: 1px solid #80bb48;
font-weight: normal;
color: #000;
}
/*iPhorm referal link*/
.iphorm-referral-link a {
text-decoration: none;
color: #0F83CA;
}
.iphorm-referral-link a:hover {
color: #292929;
}
/*Datepicker*/
.iphorm-input-wrap-date-select-wrap {
float: left;
}
.iphorm-datepicker-icon {
display: none; /* Set to inline-block in JS */
height: 24px;
width: 24px;
background: url(../images/date-picker.png) no-repeat left center;
cursor: pointer;
float: left;
margin: 2px 0 0 2px;
}
/*This can't be namespaced*/
.ui-datepicker {
z-index: 25000 !important;
}
/*Fixes for consistent browsing*/
.iphorm-input-wrap .selector select {margin: 0!important; width: auto!important; height: 30px;}
.iphorm-input-wrap .iphorm-element-file-inner input[type="file"] {text-shadow: none !important;}
*:first-child+html .iphorm-input-wrap select {background: transparent !important; color:#000 !important;}
*:first-child+html .iphorm-input-wrap select option {background: #fff !important; color:#000 !important;}
.iphorm-input-radio-li input[type="radio"] {background: transparent !important; border: none transparent !important;}
.iphorm-input-checkbox-li input[type="checkbox"] {background: transparent !important; border: none transparent !important;}
/*Hide FOUC*/
.iphorm-js .iphorm-input-wrap-file {
display: none;
}
/*Tooltip icons*/
.iphorm-tooltip-icon {
width: 15px;
height: 15px;
background: url(../images/help-icon.png) no-repeat right bottom;
display: inline-block;
cursor: pointer;
}
.iphorm-element-wrap-text.iphorm-labels-inside > .iphorm-element-spacer > label .iphorm-tooltip-icon,
.iphorm-element-wrap-textarea.iphorm-labels-inside > .iphorm-element-spacer > label .iphorm-tooltip-icon,
.iphorm-element-wrap-password.iphorm-labels-inside > .iphorm-element-spacer > label .iphorm-tooltip-icon,
.iphorm-element-wrap-captcha.iphorm-labels-inside > .iphorm-element-spacer > label .iphorm-tooltip-icon {
position: absolute;
right: -20px;
top: 0;
}
.iphorm-tooltip-icon-content {
display: none;
}
/*Conditional logic*/
.iphorm-js .iphorm-has-logic {
visibility: hidden;
}
/*Fancybox*/
#fancybox-content .iphorm-inner {
padding: 15px;
}
#fancybox-content .iphorm-edit-form-wrap {
display: none;
}
/*User defind widths don't work in IE7 - reverts back to auto*/
*:first-child+html .selector > span {width: auto !important;}
*:first-child+html .selector > select {width: auto !important;}