/** ----------------------------------------------------------
 *
 * This stylesheet includes both generic form styles and
 *    additional form styles for the User Defined Form Module.
 *
 ** ------------------------------------------------------- */


/* GENERIC FORMS
----------------------------------------------- */

form {
    max-width: 730px;
    margin:0 auto;
   /* width: 50%;*/
}
div.field {
 /*   margin: 10px 0 15px;*/
}
fieldset {
    border: 0;
    margin: 0;
    padding: 0;
}
form label {
    margin-bottom: 5px;
}
    form label.left {
        display: block;
        font-weight: normal;
    }
    form label.right {
        font-size: 12px;
        color: #888;
    }

form input.text,
form textarea,
form .textajaxuniquetext,   /* Not sure if this is used? */
form select {
    width: 100%;
   /* max-width: 400px;*/
    padding: 6px 5px;
    font-size: 14px;

    background-color: transparent;
    border: none;   
    border-bottom:1px solid #dad9d9;
}
    .ie7 form select { width: 400px; } /* fix for ie7's rendering of max-width property on select input */

form input.text:focus,
form textarea:focus,
form .textajaxuniquetext:focus,
form select:focus {
    outline:none;
    border-bottom:1px solid #909544;
}

form input.text:focus ~ label{color:#909544 !important;}

form input[disabled], form textarea[disabled] {
    background-color: #f7f7f7;
    border: 1px solid #dad9d9;
}



textarea {
    resize: vertical; /* forces text area to be resized vertically only */
}


/* Radio and Checkbox */
.field .checkbox:not(.field),
.field .radio:not(.field) {
    float: left;
    width: 13px;
    height: 13px;
    margin-right: 6px;
    margin-top: 5px;
    padding: 0;
}
    .checkbox label.right,
    .radio label.right {
        float: left;
    }


/* Messages */
form .message {
    background-color: #fef4ba;
    padding: 5px 10px;
    border: 1px solid #e8c805;
    border-radius: 3px;
}
    form .good {
        background-color: #ecf9d0;
        border-color: #8fbe00;
    }
    form .bad,
    form .required,
    form .error {
        background-color: #f9d0d0;
        border-color: #cf0000;
        color: #b80000;
    }


/* ACTIONS */
.Actions {
    margin-bottom: 20px;
}
    form a.btn, form button, input[type="submit"], input[type="reset"], .Actions .action {
       font-family:"Oswald", sans-serif; font-size:18px; 
        padding:10px 65px;
        text-transform:uppercase; color:#ffffff; background-color:#909544; /*border:1px solid #ffffff; border-radius:5px; */border:none;
    }
    form a.btn:hover, button:hover, input[type="submit"]:hover, .Actions .action:hover {
        background: #253849;
        color: #fff;
    }
    #form-contact input[type="submit"]{
        color:#253849; background-color:#ffcc69;margin:0 auto;
    }
    #form-contact input[type="submit"]:hover{
        color:#ffffff; background-color:#909544;
    }
    
    
    form .btn-toolbar input[type="submit"]{margin:0 auto;}
    #page-action a.btn{
        font-family:"Oswald", sans-serif; font-size:18px; 

        text-decoration:none;

    }

    form a.btn {
        line-height: 18px;
        margin-bottom: 10px;
    }
    form a.btn:after {                     /* creates arrow in button */
        content: '\2192';
        padding-left: 10px;
    }
    .ie7 input.action {
        width: 0;                     /* IE table-cell margin fix */
        overflow: visible;
    }
    input.action[class] {             /* IE ignores [class] */
        width: auto;                  /* cancel margin fix for other browsers */
    }

    .ie7 .Actions .action {
        float: left;
    }
    .Actions:after {
        color: #B94A48;
        display: inline-block;
        font-weight: normal;
        margin-top: 9px;
    }
    #MemberLoginForm_LoginForm .Actions:after {
        display: none;
    }


/* AREA SPECIFIC */
    /* LOGIN and FORGOT PASSWORD */
    #Remember {
        min-height: 20px;
    }
    #ForgotPassword {
        clear: left;
    }
    #MemberLoginForm_LostPasswordForm .Actions:after {
        display: none;
    }

    /* Search / Login */
    .header form .middleColumn {
        /* float: none;
        width: 100% !important; */
    }

    /*********** SPECIFIC FORM OVERRIDES  ***********************/
    
    .form-container form{
        margin:0 0 30px 0;
        padding:0px 0px; 
        background-color:#434343;
        border-right:4px solid #909544;
        border-left:4px solid #909544; 
        
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
    }
    
    .form-container label{font-family:"Oswald", sans-serif; font-size:17px; color:rgba(255,255,255, .4); margin-bottom:0px;  }
    .form-container .field{margin:0 30px 20px 30px;}
    .form-container #SupportGroup.field{margin:0;
       /*border-right:4px solid #909544;border-left:4px solid #909544;*/

    }

   .form-container input[type="submit"]{
       border:2px solid #ffffff;     
          -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;}    
   
   .form-container .fieldgroup-field{
        margin:0 0 20px 0;
   }
   .form-container input[type="text"], .form-container select, .form-container textarea{background-color:transparent; color:#ffffff;border:1px solid transparent; border-bottom:1px solid rgba(255,255,255, .7);
    
    }
.form-container .btn-toolbar{ padding:0 0 30px 0}
    .form-header{
        background-color:#909544; 
       background-repeat:no-repeat;
       background-position:15px 16px;
        padding:20px 30px 20px 60px; color:#ffffff;
        -webkit-border-top-left-radius: 8px;
        -webkit-border-top-right-radius: 8px;
        -moz-border-radius-topleft: 8px;
        -moz-border-radius-topright: 8px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        font-family:"Oswald", sans-serif; font-size:20px;text-transform:uppercase;
        font-weight:normal;
        margin:0 0 30px 0;
    }

/* USER DEFINED USER FORM MODULE STYLES
----------------------------------------------- */

/*Generic and mixed*/
.FormHeading {
    clear: both;
    padding-top: 15px;
}
form .date .middleColumn input {
    /*background: transparent url(../images/icons/your_icon_here.png) no-repeat scroll 90px 5px;*/
    width: 114px;
}
.Actions input.resetformaction,
.Actions input.action-minor {                  /* Clear button */
    float: left;
    background-color: #888;
}
.Actions input.resetformaction:hover,
.Actions input.action-minor:hover {            /* Clear button */
    background-color: #aaa;
}

/* Labels */
.checkbox label.right {
    font-size: 13px;                            /* reset to default */
    color: #333;                                /* reset to default */
}
form .requiredField label.left:after { /* pseudo element adds an asterisk to a required fields label */
    color: #B94A48;
    content: "*";
    font-size: 14px;
    font-weight: normal;
    padding-left: 3px;
}

/* Radio / Checkbox */
form .checkboxset ul,
form .optionset ul {
    margin: 0;
}
    form .checkboxset li,
    form .optionset li {
        margin-bottom: 5px;
        list-style-type:none;
    }
    form div.checkbox:after { /* clearfix */
        content: ".";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
    form .checkbox .checkbox { clear: both; }

/* Messages */
span.message {
    margin: 10px 0;
    display: block;
    max-width: 390px;
    clear: left;
}
div.holder-required {               /* This class needs to be changed - is used for both input and div */
    /* background-color: #f9d0d0;
    border: 1px solid #cf0000;
    padding: 10px;
    margin-left: -11px; */
}
form input.holder-required, form select.holder-required {        /* This class needs to be changed - is used for both input and div */
    border: 1px solid #cf0000;
}

/* Error messages */
input:invalid,
textarea:invalid {
    /*border-radius: 1px;
    -moz-box-shadow: 0px 0px 5px red;
    -webkit-box-shadow: 0px 0px 5px red;
    box-shadow: 0px 0px 5px red;*/
}
.no-boxshadow input:invalid,
.no-boxshadow textarea:invalid {
    background-color: #f0dddd
}

/* To test - potentially not needed? */
.ss-uploadfield-item-info button{
    margin-top: 4px !important;
    float: left;
}
form .creditCardField input,
form input.currency,
form input.numeric {
    width: 50px;
}
form #DMYDate-month,
form #DMYDate-day {
    width: 25px
}

.section-band label{color:#ffffff;}
.section-band input, .section-band textarea, .section-band form input.text {background-color:transparent; color: #ffffff; border:1px solid #ffffff;  }
form .btn-toolbar{margin:30px auto 0 auto; text-align:center; }


.HomePage #Form_ContactForm .field{width:100%; margin:0 0 10px 0; display:inline-block;}
.HomePage #Form_ContactForm label{color:#ffffff; width:30%; float:left;}
/*#Form_ContactForm input, #Form_ContactForm textarea{ float:left;background-color:#fff; color:#333; padding:5px 5px;}*/
#Form_ContactForm textarea{color:#ffffff;}
.HomePage #Form_ContactForm textarea{height:100px;}

/*#Form_ContactForm .action{ background-color:#00689f; color:#ffffff; float:right; width:40%; font-size:18px;padding:10px 15px;
transition:color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out; text-align:center;}
#Form_ContactForm .action:hover{background-color:#cc171a;}*/
#Form_ContactForm .btn-toolbar{margin:10px auto 0 auto !important;}


.HomePage #Form_ContactForm #SupportGroup{display:none;}

.form-container .fieldgroup-field{max-width:90%;}
#form-contact{width:100%; background-color:#253849; padding:45px 0;  background-image:url('../images/logo-vac-rev.png'); background-repeat:no-repeat; background-position: bottom 30px right 30px; text-align:center;}
#form-contact h2{color:#ffffff; font-size:36px; font-weight:300; text-transform:inherit;}
#form-contact p{color:#ffffff;}

#form-contact form{margin:30px auto;}
#form-contact .field label{display:none;}
#form-contact .field input, #form-contact .field select{font-size:14px; color:#ffffff;}

#form-contact .fieldgroup .fieldgroup-field, #Form_ContactForm .CompositeField .fieldgroup-field{float:left; margin:0 0px ; padding:0 20px 0 10px; width:48%;}
.form-container .fieldgroup{display:inline-block; width:100%; /*margin:0 10px 15px 10px;*/ }
#SupportGroup, #Form_ContactForm #SupportGroup.CompositeField .fieldgroup-field ,#Form_ContactForm #SupportGroup .fieldgroup {width:100%;padding:0;}
#Form_ContactForm #SupportGroup .fieldgroup { margin:0; }
#SupportGroup .fieldgroup-field{max-width:100%;}
#form-contact .fieldgroup input, #form-contact .fieldgroup select{width:100%;} 
#form-contact .fieldgroup{width:100%;  margin:0 0 10px 0; display:inline-block;}
#form-contact textarea{width:93.5%;float:left; margin-left:10px !important;}
#form-contact #CityStatePostal{margin:0 !important;}
#Form_ContactForm_StatePostal_Holder.field{margin:0 30px 20px 0; }
/*CityStatePostal .fieldgroup{margin:0 !important;}*/
.field-half{width:48%; float:left;}
.field-half.last {float:right;}
.field-half select{width:100%;}

.form-container input[placeholder]{content:'';}

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #fff;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #fff;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #fff;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #fff;
}
::-ms-input-placeholder { /* Microsoft Edge */
   color:    #fff;
}

::placeholder { /* Most modern browsers support this now. */
   color:    #fff;
}


form input.text:focus::-webkit-input-placeholder ,
form textarea:focus::-webkit-input-placeholder ,
form .textajaxuniquetext:-webkit-input-placeholder ,
form select:focus::-webkit-input-placeholder  {
color: #909544;
}
form input.text:focus::-moz-placeholder ,
form textarea:focus::-moz-placeholder ,
form .textajaxuniquetext:focus::-moz-placeholder ,
form select:focus::-moz-placeholder  {
color: #909544;
}
form input.text:focus::-ms-input-placeholder  ,
form textarea:focus::-ms-input-placeholder  ,
form .textajaxuniquetext::-ms-input-placeholder  ,
form select:focus::-ms-input-placeholder   {
color: #909544;
}

form select option{background: #fff; color:#000}

select{
    -webkit-appearance: none; 
   -moz-appearance: none;
   appearance: none;   
   /* background-color:#273d7e;*/

    
    background-image:url('../images/icon-arrow-down.png'), linear-gradient(right,transparent  35px, transparent 35px, transparent 100%) ;
    background-image:url('../images/icon-arrow-down.png'), -webkit-linear-gradient(right, transparent 35px,transparent 35px, transparent 100%);
    background-image:url('../images/icon-arrow-down.png'), -moz-linear-gradient(right,transparent 35px,transparent 35px, transparent 100%);
    background-image:url('../images/icon-arrow-down.png'), -ms-linear-gradient(right,transparent  35px,transparent 35px,transparent 100%);
    background-image:url('../images/icon-arrow-down.png'), -o-linear-gradient(right,transparent  35px,transparent 35px, transparent 100%);
    background-position:top 8px right 7px,top left;
    background-repeat:no-repeat,no-repeat;
}

select:focus{
    background-image:url('../images/icon-arrow-down-active.png');
}

/* Responsive form styles
----------------------------------------------- */

@media only screen and (max-width: 767px) {

    /* To test - potentially not needed? */
	.header form .middleColumn {
	    float: none;
	    width: 100% !important;
	}
	form label.left,
	#MemberLoginForm_LoginForm label {
	    margin-bottom: 8px
	}
   
        #form-contact{
            padding:45px 0 90px;
            background-position: bottom 30px center;
        }
        #form-contact .fieldgroup{
            margin:0px 0 0px 0;
        }
    
        #form-contact .fieldgroup .fieldgroup-field, #Form_ContactForm .CompositeField .fieldgroup-field{
            width:100%;
            margin:0 0 0px 0;
        }
        .HomePage #Form_ContactForm .field{
            margin:0 0 0px 0;
        }
        
   #form-contact .fieldgroup .fieldgroup-field{margin:0 0 15px 0;}
   #directory .phone{width:100%; clear:both;}
   .form-container .fieldgroup{display:inherit;}
   .FormPage .form-container .field  {margin:0 0 20px 10px;}
   .FormPage .form-container .field.textarea{margin:0 0 20px 20px ; width:85%;}
   /*.FormPage .form-container .fieldgroup-field .field{margin:0 0 20px 10px; width:90%;}*/
   .FormPage .form-container .fieldgroup-field .field.CompositeField  {margin:0px !important; }
   .FormPage #form-contact .fieldgroup .fieldgroup-field,.FormPage #Form_ContactForm .CompositeField .fieldgroup-field{margin:0 0 15px 0; }
}

@media only screen and (max-width: 900px) {
    form {
        max-width: 100%;
    }
}

@media only screen and (min-width: 700px) {

}