/* 
Item: AJAX Form Pro
URL: http://www.ajaxformpro.com/
Layout: Basic In-Field Labels
*/

#{id}_wrap {
    {font_color} color: {{font_color}}; {/font_color}
    {font_family} font-family: {{font_family}}; {/font_family}
    {font_weight} font-weight: {{font_weight}}; {/font_weight}
    {font_style} font-style: {{font_style}}; {/font_style}
    {font_size} font-size: {{font_size}}px; {/font_size}
    {bg_color} background-color: {{bg_color}}; {/bg_color}
    position: relative;
    text-align: left;
    padding: 10px !important;
    border: 0px none !important;
}

#{id}_wrap h2 {
    {label_font_color} color: {{label_font_color}}; {/label_font_color}
    {font_family} font-family: {{font_family}}; {/font_family}
}

#{id}_wrap .afp_wrap { position: relative; margin: 0px 0 10px 0; }

#{id}_wrap .no_clear { clear:none; }
#{id}_wrap .small { float:left; width:auto; margin: 0 15px 0 0; }

#{id}_afp_note { display:none; margin: 0 0 5px 0; }

#{id}_wrap .afp_notification_ok, #{id}_wrap .afb_notification_ok {
    {note_ok_font_color} color: {{note_ok_font_color}}; {/note_ok_font_color}
    {note_ok_font_weight} font-weight: {{note_ok_font_weight}}; {/note_ok_font_weight}
    {note_ok_font_style} font-style: {{note_ok_font_style}}; {/note_ok_font_style}
    {note_ok_border_px} border: {{note_ok_border_px}}px solid {{note_ok_border_color}}; {/note_ok_border_px}

    line-height:19px;
    -moz-border-radius: 5px 5px 5px 5px;

    background: url("{afp_path_to_images}images/icon-button-ok.png") no-repeat scroll 14px 35% {{note_ok_bg_color}};

    height: auto;
    margin: 0 0 10px;
    padding: 8px 8px 8px 46px;
    text-align: left;

    {note_ok_border_radius}
        -webkit-border-radius: {{note_ok_border_radius}}px;
        -moz-border-radius: {{note_ok_border_radius}}px;
        border-radius: {{note_ok_border_radius}}px;
    {/note_ok_border_radius}
}

#{id}_wrap .afp_notification_error, #{id}_wrap .afb_notification_error {
    {note_error_font_color} color: {{note_error_font_color}}; {/note_error_font_color}
    {note_error_font_weight} font-weight: {{note_error_font_weight}}; {/note_error_font_weight}
    {note_error_font_style} font-style: {{note_error_font_style}}; {/note_error_font_style}
    {note_error_border_px} border: {{note_error_border_px}}px solid {{note_error_border_color}}; {/note_error_border_px}

    line-height: 19px;
    -moz-border-radius: 5px 5px 5px 5px;

    {note_error_bg_color} background-color: {{note_error_bg_color}}; {/note_error_bg_color}

    height: auto;
    margin: 0 0 10px;
    padding: 8px 0 8px 11px;
    text-align: left;

    {note_error_border_radius}
        -webkit-border-radius: {{note_error_border_radius}}px;
        -moz-border-radius: {{note_error_border_radius}}px;
        border-radius: {{note_error_border_radius}}px;
    {/note_error_border_radius}
}

#{id}_wrap .afp_debug { border:1px solid #BF3030 !important; padding: 5px !important; -moz-border-radius:4px !important; margin: 10px 0 10px 0 !important; }

#{id}_wrap .afp_hide { display:none; }

#{id}_wrap div.afp_clear { clear:both; margin:0; line-height:0; }

#{id}_afp_fields label.escts { width: auto !important; padding-left: 0px !important; margin: 8px 19px 8px 1px !important; text-align: right !important; float: none !important; }
#{id}_afp_fields .afp_labelfor { float: none !important; padding:0 0 0 5px !important; margin:0 !important; text-align: left !important; }

/* Label, Input, Textarea */
#{id}_afp_fields div.afp_wrap label.in_field {
    {label_in_field_color} color: {{label_in_field_color}}; {/label_in_field_color}
    margin: 9px 5px 5px 6px;
    {label_font_size} font-size: {{label_font_size}}px; {/label_font_size}
    {label_font_family} font-family: {{label_font_family}}; {/label_font_family}
    {label_font_weight} font-weight: {{label_font_weight}}; {/label_font_weight}
    position: absolute;
    clear: both;
}

#{id}_afp_fields div.afp_wrap label.security_code {
    {label_in_field_color} color: {{label_in_field_color}}; {/label_in_field_color}
    display: inline;
    margin: 9px 2px 0 5px;
    font-weight: normal;
    position: absolute;
}


#{id}_afp_fields label.afp_labelfor {
    {label_font_color} color: {{label_font_color}}; {/label_font_color}
    display: inline-block;
    {label_font_weight} font-weight:{{label_font_weight}}; {/label_font_weight}
    position: none !important;
    float: none !important;
    padding: 0 0 0 5px !important;
    margin: 0 !important;
    text-align: left !important;
}

#{id}_afp_fields div.afp_wrap { line-height:11px !important; padding: 1px 0 1px 0px; }

#{id}_afp_fields div.parent { margin: 0 0 10px 0; clear:left; }

#{id}_afp_fields div.escts { line-height: 12px; padding: 10px 0 10px 0 !important; margin: 0 !important; min-height:17px; }

#{id}_afp_fields label.escts {
    {label_font_color} color: {{label_font_color}}; {/label_font_color}
    {label_font_weight} font-weight:{{label_font_weight}} !important; {/label_font_weight}
    width: auto !important;
    padding-left: 0px !important;
    margin: 0px 17px 5px 5px !important;
    text-align: right !important;
}

/* Input, Textarea, Select */
#{id}_afp_fields input.text, textarea, select {
    {input_font_color} color: {{input_font_color}}; {/input_font_color}
    {input_bg_color} background-color: {{input_bg_color}}; {/input_bg_color}
    {input_border_px} border: {{input_border_px}}px solid {{input_border_color}}; {/input_border_px}
    margin: 1px 5px 5px 0;
    padding: 5px;
    {input_font_size} font-size: {{input_font_size}}px; {/input_font_size}
    {input_font_family} font-family: {{input_font_family}}; {/input_font_family}
    {input_font_weight} font-weight: {{input_font_weight}}; {/input_font_weight}
    {input_font_style} font-style: {{input_font_style}}; {/input_font_style}

    {input_border_radius}
        -webkit-border-radius: {{input_border_radius}}px;
        -moz-border-radius: {{input_border_radius}}px;
        border-radius: {{input_border_radius}}px;
    {/input_border_radius}
}

#{id}_afp_fields input.text, select { width: auto; float: none; }
#{id}_afp_fields select { min-height: 27px; }
#{id}_afp_fields textarea { max-width: 300px; width: auto; height:80px; padding: 5px; }

#{id}_afp_fields input.larger, #{id}_afp_fields select.larger { width:177px; }

/* Checkbox */
#{id}_afp_fields input.chck { cursor: pointer; top: 0 !important; clear:both;  margin: 3px 1px 0 0 !important; padding: 2px !important; }
#{id}_afp_fields input.rad { clear: both; cursor: pointer; margin: 3px 1px 0 0 !important; padding: 2px !important; }

{input_border_px}
    #{id}_afp_fields input.afp_error,
    #{id}_afp_fields input.afp_chck_error,
    #{id}_afp_fields input.afp_rad_error {
        border: {{input_border_px}}px solid {{input_border_error_color}} !important;
    }

    #{id}_afp_fields input.afp_ok,
    #{id}_afp_fields select.afp_ok,
    #{id}_afp_fields textarea.afp_ok {
        border: {input_border_px}px solid {{input_border_ok_color}} !important;
    }
{/input_border_px}

#{id}_afp_fields div.afp_error {
    {label_font_family} font-family: {{label_font_family}}; {/label_font_family}
    {error_font_weight} font-weight: {{error_font_weight}}; {/error_font_weight}
    {error_font_style} font-style: {{error_font_style}}; {/error_font_style}
    {error_font_size} font-size: {{error_font_size}}px !important; {/error_font_size}
    {error_font_color} color: {{error_font_color}} !important; {/error_font_color}
    margin: 0px 0px 9px 0px !important;
    width: auto;
    text-align: left !important;
    padding: 0px !important;
    clear: both !important;
}

/* Checkboxes */
#{id}_afp_fields ul.afp_checkboxes_area { display:block; list-style:none outside none; margin:5px 0 5px; padding:0; }
#{id}_afp_fields ul.afp_checkboxes_area li { list-style-type: none; margin: 3px 0 3px 0; padding: 6px 0 0 5px; }

#{id}_afp_fields div.afp_checkboxes_area_col { display: block; float: left; {label_font_family} font-family: {{label_font_family}}; {/label_font_family} {label_font_weight} font-weight: {{label_font_weight}}; {/label_font_weight} {label_font_style} font-style: {{label_font_style}}; {/label_font_style} {label_font_size} font-size: {{label_font_size}}px; {/label_font_size} }
#{id}_afp_fields div.afp_checkboxes_area_col ul { float: none; list-style:none outside none; margin:5px 0 5px; display: block; padding: 0 25px 0 0; }
#{id}_afp_fields div.afp_checkboxes_area_col ul li { list-style-type: none; margin: 3px 0 3px 0; padding: 6px 0 0 5px; }

/* Radios */
#{id}_afp_fields ul.afp_radios_area { display:block; list-style:none outside none; margin:5px 0 5px; padding:0; }
#{id}_afp_fields ul.afp_radios_area li { list-style-type: none; margin: 3px 0 3px 0; padding: 6px 0 0 5px; }

#{id}_afp_fields div.afp_radios_area_col { display: block; float: left; {label_font_family} font-family: {{label_font_family}}; {/label_font_family} {label_font_weight} font-weight: {{label_font_weight}}; {/label_font_weight} {label_font_style} font-style: {{label_font_style}}; {/label_font_style} {label_font_size} font-size: {{label_font_size}}px; {/label_font_size} }
#{id}_afp_fields div.afp_radios_area_col ul { float: none; list-style:none outside none; margin:5px 0 5px; display: block; padding: 0 25px 0 0; }
#{id}_afp_fields div.afp_radios_area_col ul li { list-style-type: none; margin: 3px 0 3px 0; padding: 6px 0 0 5px; }

#{id}_afp_fields .fieldTitle { {label_font_color} color: {{label_font_color}} !important; {/label_font_color} {label_font_weight} font-weight: {{label_font_weight}}; {/label_font_weight} {label_font_style} font-style: {{label_font_style}}; {/label_font_style} }

#{id}_wrap div.afp_spacer { margin-top: 3px; margin-bottom: 5px; }

/* br */
#{id}_afp_fields br { clear: left !important; margin: -5px !important; padding:0 !important; }

#{id}_afp_fields div.afp_clear { clear:both !important; }

/* The icon used to reload the CATPCHA */
img#{id}_afp_icon_refresh { margin: 0 0 7px 0 !important; display: inline; }

#{id}_afp_main_sec_div { margin: 0 0 7px 0; }

#{id}_afp_sec_div_two { clear: both; display: none; margin: 0; }

#{id}_afp_captcha { border: 1px solid {{input_border_color}} !important; margin:15px 0 0; {input_border_radius} -moz-border-radius: {{input_border_radius}}px; {/input_border_radius} }

#{id}_afp_captcha_div { float:left !important; margin: -11px 0 0 !important; position: relative !important; top: 0 !important; left: 0 !important; display: block !important; }

#{id}_afp_captcha_refresh { display:none; }

#{id}_afp_input_box_div { float:left !important; }

/* CAPTCHA Verified */
#{id}_afp_verified { float: left !important; margin: 0 0 10px 0; padding: 0; {verified_text_color} color: {{verified_text_color}} !important; {/verified_text_color} min-height: 16px !important; }
#{id}_afp_verified img { margin-bottom: .25em; vertical-align: middle; display: inline; }
#{id}_afp_verified .ok { margin: 0px !important; }

/* reCAPTCHA */
#recaptcha_{id}_output { clear: both; }

/* A CAPTCHA DIV */
#{id}_afp_sec_div { float: left !important; }

#{id}_afp_ajax_loading { height:16px; margin: 16px 0 21px -4px; padding: 0 0 0 29px; display: none; float:left; width:auto; background: transparent url('{{afp_url_path_to_images}}icon-ajax-loader.gif') no-repeat scroll 8px 66%; }

/* Highlight Rows */
{row_hi_bg_color}
    #{id}_afp_fields .afp_highlighted { background-color: {{row_hi_bg_color}} !important; }
{/row_hi_bg_color}

#{id}_promote_afp_link { clear:both; margin: 10px 0; }
#{id}_promote_afp_link a { font-size: 80%; {font_color} color: {{font_color}}; {/font_color} }

/* Style for DatePicker */
.ui-widget { font-size: 13px !important; }
.ui-datepicker { font-size:13px !important; z-index: 99999 !important; }

iframe.afp {
    border:none; overflow:auto;
}

.afp_attachment_area { clear:both; width: auto; border-radius: 5px; float: left; margin: 0 0 10px; padding: 0; }

.afp_attach_ok { background-color: #F5F9FD; line-height:19px; -moz-border-radius: 5px; background-color: #F5F9FD; height: auto; margin: 0 0 10px; padding: 8px 0 8px 46px; text-align: left; margin-bottom: 15px; margin-left: auto; margin-right: auto; width: 100%; }
.afp_attach_error { background-color: #FDF4F5; {error_font_color} color: {{error_font_color}}; {/error_font_color} line-height:19px; -moz-border-radius: 5px; background-color: #FDF4F5; height:auto; margin:0 0 10px; padding: 6px 0 0px 0px; text-align:left; margin-bottom: 15px; margin-left: auto; margin-right: auto; width: 100%; }
     
.afp_files_attached_area { -moz-border-radius: 5px; width: 95%; margin: 0 auto; padding:0px; }
.afp_files_attached_area td { padding:5px; }

{row_hi_bg_color}
    .afp_files_attached_area tr:hover { background: {{row_hi_bg_color}}; }
{/row_hi_bg_color}

.afp_attach_zone { width: 100%; margin: 0 auto; padding:10px 0; border:1px solid {{input_border_color}}; }
.afp_attach_file { background: url("{{afp_url_path_to_images}}icon-attach.png") no-repeat scroll 0 44% transparent; padding: 0 0 0 21px; }

.afp_attach_notes ul {
    padding-left: 10px;
    margin-top: 0;
    list-style-type: none;
    line-height: 20px;
}

.afp_attach_notes ul li {
    margin-bottom: 10px;
}

/* simple css-based tooltip */
.{id}_tooltip {
    {input_bg_color} background-color: {{input_bg_color}}; {/input_bg_color}
    {input_border_px} border: {{input_border_px}}px solid {{input_border_color}}; {/input_border_px}
    padding: 10px 15px;
    width: 200px;
    display: none;
    text-align: left;
    z-index: 2000;
}

/***** [Start] RESPONSIVE FORMS ******/
/* iPhone 4 portrait */
@media only screen and (max-width: 340px) {
    #{id}_wrap { width: 310px !important; margin: 0; pading: 8px !important; }

    #{id}_afp_fields input.text,
    #{id}_afp_fields input[type='text'],
    #{id}_afp_fields input[type='password'],
    #{id}_afp_fields textarea,
    #{id}_afp_fields select {
        width: 300px !important;
    }

    #{id}_wrap .afp_notification_ok, #{id}_wrap .afb_notification_ok,
    #{id}_wrap .afp_notification_error, #{id}_wrap .afb_notification_error {
        width: inherit;
        max-width: 310px;
    }

    #{id}_afp_fields div.afp_radios_area_col ul {
        padding: 0px 5px 0px 0px;
    }

    #{id}_afp_fields div.afp_radios_area_col ul li { height: auto; margin: 0 0 10px 0; width: 144px; }
    #{id}_afp_fields div.afp_checkboxes_area_col ul li { height: auto; margin: 0 0 10px 0; width: 144px; }
}

/* iPhone 4 Landscape */
    @media only screen and (min-width: 341px) and (max-width: 480px) {
        #{id}_wrap { width: 93% !important; margin: 0; pading: 8px !important; }

        #{id}_afp_fields input.text,
        #{id}_afp_fields input[type='text'],
        #{id}_afp_fields input[type='password'],
        #{id}_afp_fields textarea,
        #{id}_afp_fields select {
        max-width: 100% !important;
        width: 95% !important;
    }

    #{id}_wrap .afp_notification_ok, #{id}_wrap .afb_notification_ok,
    #{id}_wrap .afp_notification_error, #{id}_wrap .afb_notification_error {
        width: inherit;
        max-width: 100%;
    }

    #{id}_afp_fields div.afp_radios_area_col ul {
        padding: 0px 5px 0px 0px;
    }

    #{id}_afp_fields div.afp_radios_area_col ul li {
        height: auto;
        margin: 0 0 10px 0;
        min-width: 155px;
        max-width: 180px;
    }

    #{id}_afp_fields div.afp_checkboxes_area_col ul li {
        height: auto;
        margin: 0 0 10px 0;
        min-width: 155px;
        max-width: 180px;
    }
}

/* Other Devices */
@media only screen and (min-width: 481px) {
    #{id}_wrap {
        width: auto !important;
    }
}
/***** [End] RESPONSIVE FORMS ******/