input, select, textarea { font-family:Arial, Helvetica, sans-serif; } 
input[type='submit']
{
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none; 
}
input[type=text]::-ms-clear {
    display: none;
}

input[type=password]::-ms-reveal {
    display: none;
}


.ar { display: block; text-align: right; }
.al { display: block; text-align: right; }
.ac { display: block; text-align: center; }
.acc { display: block; text-align: justify; }
.cl { clear: both; height: 0; line-height: 0; font-size: 0; text-indent: -4000px; }
.fr { float: right; display: inline; }
.fl { float: right; display: inline; }
.hidden { display: none; }
.notext { font-size: 0; line-height: 0; text-indent: -4000px; }
.shell { margin: 0 auto; width: 960px; }
 .hidden{ display: none;}
 textarea,  input { outline: none; }



#header { position:relative; z-index: 1; height:157px; background: url(images/header.jpg) no-repeat center 0;}

/************************** navigation *******************/

.demo-nav-frame { margin:0 auto 50px auto;  max-width:700px; padding:0 10px; position: relative; z-index: 2}
.demo-nav {background: #393939; border-radius: 4px; -webkit-border-radius:4px; text-align:center; position: relative; z-index: 1;}
.demo-nav {-webkit-box-shadow: 0px 3px 0px 0px #060606; box-shadow: 0px 3px 0px 0px #060606; height:40px; }
.demo-nav li.active{ background:#060606; border: solid 1px #060606; border-radius: 4px; -webkit-border-radius:4px;}
.demo-nav li.sfs{ background:#060606; border: solid 1px #060606; border-radius:4px 0 0 4px; -webkit-border-radius:4px 0 0 4px;   }
.demo-nav li.sfs {float: right;  margin:0; padding:10px 10px 10px; color:#bfbfbf; font-weight: bold;}
.demo-nav li.sfs {font-family: Arial, sans-serif; position: absolute; top:0; right:0; z-index: 1000;}
.demo-nav li.sfs {font-size:12px; line-height:20px;}
.demo-nav li {
    list-style: none outside none;
    padding: 5px;
    text-decoration: none;
    border: solid 1px #393939;
    display: inline-block;
    margin: 5px;
    position: relative;
}
.demo-nav li a {
    color: #fff;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    text-decoration: none;
}
.demo-nav li a:hover, .demo-nav li a.active {
    color:#f1d04f;
    text-decoration: none;
}

.demo-nav li ul{ position: absolute; top:34px; right: 0; z-index: 1000; background:#393939; border:solid 1px #393939;}
.demo-nav li ul{border-radius:0px 0 4px 4px; -webkit-border-radius:0 0 4px 4px; visibility: hidden;}
.demo-nav li li{ white-space: nowrap; text-align: right;  display: block; margin:0; padding:10px 20px;}
.demo-nav li li a{ display: block; padding: 2px 4px; border:solid 1px #393939; border-radius:4px; -webkit-border-radius:4px; }
.demo-nav li li a:hover{ background:#393939; border: solid 1px #393939; color:#f1d04f; }

/******************************* navigation end ****************************/

/************************ popup styles *********************************/
#popup{  position: absolute; top:70px; z-index: 1000; width:100%;}
#popup p.close-window{ 
    padding-bottom:15px; 
    display: block; 
    font-size: 14px; 
    text-align: center; 
    font-family:Arial, Helvetica, sans-serif;
}
#popup p.close-window a{ color:#2fb0d7; }
#popup a:hover.close{ text-decoration: underline}
#popup { position: relative;}

#black-screen{width:100%; background:#000; height:100%; position:fixed; top:0; right:0; z-index:10; opacity: 0.7; -moz-opacity: 0.7;}
#black-screen{filter:alpha(opacity=70); min-height: 100%; height: auto!important; height:100%;}

/***************************** end of popup styles *************************/


/************************** header bar styles ********************/


/************************ end of header bar styles *************/

/************** form container styles*********************/
.DA_holder{ width:80%; margin:16px 10%; padding:0;  display: inline-block;}

.DA_radio_holder, 
.DA_check_holder, 
.DA_select_holder{ position:relative;}

.DA_check_holder, .DA_radio_holder{ margin:16px 10%;}
.DA_radio_holder{ padding:0px 0 0 0;}
/************** end of form container styles*********************/

/********************* text fields frames styles **********************/



/****************** end of text fields styles *******************/

/********************* submit buttons styles *********************/

 .btnp input{ background:#393939; font-size: 20px; color:#fff; height:50px; line-height:50px; width:30%; }
 .btnp input{ cursor:pointer; text-shadow: #202020 0px 2px 0px; font-family: 'Bitter',Arial,  sans-serif;  }
 .btnp input{ webkit-box-shadow: 0px 3px 0px 0px #202020; box-shadow: 0px 3px 0px 0px #202020; }
 .btnp input{ -webkit-border-radius: 10px; border-radius: 10px;}
 .btnp input{ border:solid 1px #202020; text-align: center; margin:25px auto; display: block;}

 .btnp .blue{ background:#2fb0d7; webkit-box-shadow: 0px 3px 0px 0px #2188a7; box-shadow: 0px 3px 0px 0px #2188a7;}
 .btnp .blue{ border:solid 1px #2188a7; color:#fff; text-shadow: #2188a7 0px 2px 0px;}

 .btnp .red{ background:#e14f49; webkit-box-shadow: 0px 3px 0px 0px #b2332d; box-shadow: 0px 3px 0px 0px #b2332d; }
 .btnp .red{ border:solid 1px #b2332d; text-shadow: #b2332d 0px 2px 0px;}

 input[type="submit"]:hover{ background: #696969; webkit-box-shadow: 0px 3px 0px 0px #464646;  }
 input[type="submit"]:hover{ box-shadow: 0px 3px 0px 0px #464646; border:solid 1px #464646; }
 input[type="submit"]:hover{ text-shadow: #464646 0px 2px 0px;   }

 input.blue[type="submit"]:hover{ background: #2188a7; webkit-box-shadow: 0px 3px 0px 0px #15647c; }
 input.blue[type="submit"]:hover{ box-shadow: 0px 3px 0px 0px #15647c; border:solid 1px #2188a7; }
 input.blue[type="submit"]:hover{ text-shadow: #15647c 0px 2px 0px; }

 input.red[type="submit"]:hover{ background: #b2332d; webkit-box-shadow: 0px 3px 0px 0px #8f2722; }
 input.red[type="submit"]:hover{ box-shadow: 0px 3px 0px 0px #8f2722; border:solid 1px #8f2722;  }
 input.red[type="submit"]:hover{ text-shadow: #8f2722 0px 2px 0px; }

/********************** end of submit buttons styles *****************/

label.fl{ line-height:23px; margin-right:-10px; width:80%;}

/****************** check box and radio button styles **********************/

 .check-box{ float: right; display: inline;  }

 span.checkbox{ line-height:0px; padding:0; width:auto; float: right; display: inline; cursor:default; }
 span.checkbox{ margin:0px 8px 0 0;  width:auto; height:23px;}
 span.cust_checkbox_on{ }
 span.cust_checkbox .icon-ok{ float: right; display: inline;  line-height:20px;  color:#fff; height:20px; width:20px; }
 span.cust_checkbox .icon-ok{ border:solid 1px #ccc;}
 span.cust_checkbox_on .icon-ok{ color:#f27669;}
 .check{ float: right; display: inline; }

 span.radio {  line-height:0px; padding:0; width:auto; float: right; display: inline; cursor:default; }
 span.radio {  margin:0px 8px 0 0;    width:auto; height:21px; padding-bottom:6px}
 span.cust_checkbox .icon-circle{ float: right; display: inline;  line-height:22px; width:21px; height:21px; color:#fff;  }
 span.cust_checkbox .icon-circle{ border-radius:20px; -webkit-border-radius:20px;  border:solid 1px #ccc; }
 span.cust_radio_on .icon-circle{ color:#3abf9d; border:solid 1px #ccc; font-size: 17px; text-align: center; }

 .select_field{ border:0; visibility:hidden; font-size: 0; line-height:0; text-indent: -4000px; height:0!important; }
 .select_field{ padding:0; float: right;}
 @-moz-document url-prefix() {.radio-btn, .check-box { visibility:hidden;  width:0;}}
 
  .radio-btn,  .check-box{ border:0; font-size: 0; line-height:0; text-indent: -4000px; }
  .radio-btn,  .check-box{ height:0!important; padding:0; float: right; margin-right:-4000px }

/****************** end of check box and radio button styles **********************/

/******************** two fields on one row in vertical form view ****************/

 .DA_double{ width:37.5%!important; margin:16px 0; float:right; display: inline; }
 .DA_double span{ width:11%!important; }
 .DA_double .field{ width:85%!important; }
 .right_aligned{ padding:0 5% 0 10%!important;}

/******************** end of two fields on one row in vertical form view ****************/

/***************** labels styles *********************/

.DA_check_holder label, .DA_radio_holder label{ padding:0; }
 .DA_check_holder label.error{ bottom:-22px!important; }
 .DA_radio_holder label.error{ bottom:-22px!important; }


 .DA_radio_holder label.error, 
 .DA_check_holder label.error{ right:0; right:auto!important;}

.DA_radio_holder label.error em, 
.DA_check_holder label.error em{ right:5px; right:auto;}
 

 label{ font-size: 14px; color:#898989; display: block; font-family:Arial, Helvetica, sans-serif; font-weight: normal;}
 label{ padding-bottom:8px}
 label.valid{ display:none!important;}
 label.error{ height:21px; font-size: 12px; position:absolute;  bottom:-31px; right:0; z-index: 100; float: right;}
 label.error{ font-weight: normal;  }
 label.error{  background:#f27669; color:#fff; padding:0 5px; }
 label.error{ border:solid 1px #f27669; -webkit-border-radius: 4px; border-radius: 4px; line-height:21px; }
 label.error{ -webkit-box-shadow: 0px 1px 0px 0px #b65a44; box-shadow: 0px 1px 0px 0px #b65a44;}
 label.error:after{
	border: solid;
    border-color: #111 transparent;
    border-color: rgba(242,118,105,1) transparent;
    border-width: 0 7px 7px 7px;
    top: -7px;
    content: "";
    display: block;
    right: 12px;
    position: absolute;
    z-index: 99;
}
.DA_check_holder label.error:after, .DA_radio_holder label.error:after{
	border: solid;
    border-color: #111 transparent;
    border-color: rgba(242,118,105,1) transparent;
    border-width: 0 7px 7px 7px;
    top: -7px;
    content: "";
    display: block;
    right: auto;
    right:3px;
    position: absolute;
    z-index: 99;
}
 label.error em{ font-style: normal; width:0px; 
    height:0px; 
    border-right:7px solid transparent;  /* right arrow slant */
    border-right:7px solid transparent; /* right arrow slant */
    border-bottom:7px solid #f27669; /* bottom, add background color here */
    font-size:0px;
    line-height:0px;
    position:absolute;
    top:-7px;
    right:13px;
}

 .arrow {
	width:0px; 
	height:0px; 
	border-right:7px solid transparent;  /* right arrow slant */
	border-right:7px solid transparent; /* right arrow slant */
	border-bottom:7px solid #f27669; /* bottom, add background color here */
	font-size:0px;
	line-height:0px;
	position:absolute;
	top:-7px;
	right:13px;
}
/***************** end of labels styles *********************/

/****************** forgot password link style ***************/

 small.ac {  position:relative; z-index: 1; margin:-10px 0 10px 0; font-family: Arial, Helvetica, sans-serif; }
 small a{ font-size: 14px; color:#2fb0d7; position:relative; z-index: 1; margin:-10px 0 10px 0;}

/****************** forgot password link style ***************/

/****************************** select box custom styles ********************************/

 .sbHolder{
    height:25px; border:solid 1px #ccc; -webkit-border-radius: 3px; border-radius: 3px;
    padding:10px 0;
    font-family: Arial, sans-serif;
    font-size: 14px;
    font-weight: normal;
    position: relative;
    width: 100%;
}
 .sbHolder:focus .sbSelector{
    
}
 .sbSelector{
    display: block;
    height: 25px;
    right: 0;
    line-height: 25px;
    outline: none;
    overflow: hidden;
    position: absolute;
    text-indent: 16px;
    padding:10px 0text;
        decoration: none;
    top: 10px;
    width: 80%;
}
 .sbSelector:link, .sbSelector:visited, .sbSelector:hover{
    color: #c6c6c6;
    outline: none;
    text-decoration: none;
}
 .sbToggle{
    display: block;
    height: 30px;
    outline: none;
    position: absolute;
    right: 1%;
    top: 13px;
    width: 30px;
    font-size: 20px;
    color:#3abf9d;
    text-align: center;
}
 .sbToggle:hover{ text-decoration: none; }

 .sbToggleOpen:hover{ text-decoration: none; }
 .sbHolderDisabled{ background-color: #3C3C3C; border: solid 1px #515151; }

 .sbOptions{
    background-color: #fff;
    border:solid 1px #b0b0b0; -webkit-border-radius: 3px; border-radius: 3px;
    list-style: none;
    right: -1px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 60px!important;
    width: 100%!important;
    z-index: 1001;
    overflow-y: auto;
}
 .sbOptions li{ width:100%!important; }

 .sbOptions a{
    border-bottom: dotted 1px #515151;
    display: block;
    outline: none;
    width:97%;
    padding: 12px 0 12px 3%;
}
 .sbOptions a:link,  .sbOptions a:visited{
    color: #626262;
    text-decoration: none;
}
 .sbOptions a:hover,
 .sbOptions a:focus,
 .sbOptions a.sbFocus{
    color: #3abf9d;
}
 .sbOptions li.last a{ border-bottom: none; }

 .sbOptions .sbDisabled{
    border-bottom: dotted 1px #515151;
    color: #999;
    display: block;
    padding: 7px 0 7px 3px;
}
 .sbOptions .sbGroup{
    border-bottom: dotted 1px #515151;
    color: #EBB52D;
    display: block;
    font-weight: bold;
    padding: 7px 0 7px 3px;
}
 .sbOptions .sbSub{ padding-right: 17px; }

/****************************** end of select box custom styles ********************************/

/*************************************** HORIZONTAL FORM STYLE *****************************************/

 .horizontal{  width:83%; float: left; display: inline; margin:8px 5%;} //margin 17px 5%
 .horizontal label{ float: right; display: inline; width:25%; padding:0; line-height: 25px} //line-height: 45px
 .horizontal  label.fl{ width:80%; line-height: 23px; padding-bottom:8px; }
 .horizontal label.error{ display: block; float: none; width:auto; line-height: 22px; padding:0 5px;}
 .horizontal .DA_field_container{ float: right; display: inline; width:64%;}
 .horizontal  .DA_field_container span,  .horizontal  .textarea-frame span{ width:6.5%;}
 .horizontal .field{ width:91.5%;}
 .horizontal .sbHolder{ width:64%; float:right;}
 .horizontal .textarea-frame { width:64%; float: right; display: inline; }

/* -------------------------------  Media Query Max Width 320 ------------------------------- */

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

	 .field{ width:86%!important;}
     .DA_double .field{ width:86%!important;}
     .textarea-frame{ padding-top:4px;}
     .right_aligned{ padding:0!important;}
     .btnp input{ width:40%; height:40px; line-height:40px;}

     label.error{ font-size: 11px;  }
     label.fl{ font-size: 14px; margin-right:-15px;}
     label.error:after{ right:7px;}
     .DA_check_holder label.error:after{ right:auto;}
     .DA_radio_holder label.error:after{ right:auto;}

     h3{ font-size: 18px; line-height:25px;}
     span{width:10%;}
    
     .DA_double{ width:80%!important; padding:0; float: none; display: inline-block; margin:16px 10%;}
     .DA_double span{ width:10%!important;}

     .horizontal .field{ width:84%!important;}
     .horizontal .dbl-lbl{ line-height: 18px!important}
     .horizontal span{ width:12%!important;}
     .horizontal label{ width:25%; line-height: 36px}
     .horizontal .DA_field_container{ width:64%; padding:4px 0;}

    .DA_field_container {padding:4px 0!important;}
     .sbHolder { padding:4px 0!important;}
     .sbToggle{ width:23px; font-size: 16px; top:7px!important; right:4px!important;}
     .sbSelector{top:5px!important;}

     span.checkbox,  span.radio{ width:21%!important; }

    .demo-nav li.sfs{ display: none; float:none; position: static;}
    .demo-nav li ul{ right:auto; right:0;}
    .demo-nav li li{ margin:2px 0;}

    #popup{ top:20px;}
    
}

/* -------------------------------  Media Query Min Width 321 Max Width 640 ------------------------------- */

@media only screen and (min-width: 321px) and (max-width:640px){

     h3{ font-size: 20px;}
     span{ width:8%!important; }

     .field{ width:87%!important; }
     .btnp input{ height:45px; line-height: 45px; width:25%; }

    .DA_double{ width:80%!important; padding:0; float: none; display: block; margin:13px auto;}
     .DA_double span{ width:15%!important; }
     .DA_double .field{ width:77%!important; }
     .sbToggle{ width:23px;  right:2%!important;}

     label{ font-size: 15px; padding-bottom: 2px; }
     label.fl{ font-size: 14px; margin-right:-20px;}
     label.error{ font-size: 13px; line-height: 20px; height:20px; bottom:-28px; }

    
        
     .horizontal label{ font-size: 14px}
     .horizontal span{ width:12%!important;}
     .horizontal .field{ width:85%!important;}
     .horizontal .sbHolder{ width:64%!important; float:right;}

     span.checkbox,  span.radio{ width:15%!important; }
    
    .demo-nav li.sfs{ display: none; float:none; position: static; }
    .demo-nav li ul{ right:auto; right:0;}
    .demo-nav li li{ margin:2px 0;}

    #popup{ top:20px;}

}

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    /* Safari and Chrome */
     .horizontal .sbHolder {
     margin-top:-14px;
     position:relative;
    }

    /* Safari only override */
    ::i-block-chrome, .horizontal .sbHolder {
        margin-top:-14px;
        position:relative;
    }
}