﻿
/******************************************************************************
FORM STYLE
******************************************************************************/

@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/opensans-regular_0-webfont.eot');
    src: url('fonts/opensans-regular_0-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/opensans-regular_0-webfont.woff2') format('woff2'),
         url('fonts/opensans-regular_0-webfont.woff') format('woff'),
         url('fonts/opensans-regular_0-webfont.ttf') format('truetype'),
         url('fonts/opensans-regular_0-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}


/* Basic Reset */
input, textarea {font-family: 'EB Garamond', serif, 'Open Sans', sans-serif, Calibri, 'CalibriRegular', Arial; font-size:1em;  }
input, textarea    {resize:none; outline:none;  transition:all .6s ease;  -webkit-transition:all .6s ease; -moz-transition:all .6s ease; -o-transition:all .6s ease; -ms-transition:all .6s ease; }

/* General */
.mand { color:#e00000; }
.formclear { clear:both; width:99%; display:block; height:5px; padding:0px; margin:0px; }
.err { color:#ab8220; font-size:11px}
.formnote { font-size:80%;   color:#e00000; }
.form-box ul li > .fullspan {width:100%}

/* Form Structure */
.form-box ul     {  width:100%; padding:0px; margin:0; float:left; height:100%;
}
.form-box ul li  {list-style:none; margin:0 3% 1% 0; padding:0; display:inline-block; width:97%; vertical-align:text-top; color:#fff; font-size:16px; font-family:Open Sans,'open_sansregular'; }
.form-box ul li.fieldname { width:32%;  }
.form-box ul li.fieldarea { width:60%; }
.form-box ul li.captcha_fieldarea { width:34%;  }


/* Form Columns */
.form-box .formcol2 li { width:46%; height:100%;} 
.form-box .formcol2 > li.fullspan {width:97%; margin:0 3% 2% 0;}
.form-box .formcol3 li { width:29%;} 
.form-box .formcol4 li { width:21%;} 

/* Common Form Tags */
.form_input  { width:95%; padding:4px 2%; color:#333; outline:none; background-color:#d3d3d5; border:1px solid #afafb1; border-collapse:collapse; font-size:14px; font-family:Open Sans,'open_sansregular'; }
.form_input:hover, .form_input:focus {color:#000; background-color:#eee; box-shadow: 1px .5px 1px .5px #f0f0f0; border:1px solid #ccc;}

.form_dropdown { width:100%;  }

.radio-btn { width:50%; float:left;}
.radio-btn label { padding:0 10px; font-size:18px; }


ul.promfield li { list-style:none; padding:0; margin:0 0% 0% 0;  width:100%;  }
.promocode { width:67%; }
.promobtn         {width:28%; padding:5px 0; height:auto; border:none; background:#666; color:#fff;  font-size:16px;   text-transform:uppercase; cursor:pointer}
.promobtn:hover   {background:#000; color:#fff;}

.form_icon_cal {  position:relative; margin-left:-25px; margin-top:2px;}
.fileupload { width:96%; padding:3px 4px ;  }

.captcha_code {  width:80px; padding: 3px 2px; margin-left:10px; display:table-cell; vertical-align:middle; background-color:#d3d3d5; border:1px solid #afafb1;   }
.captcha_img { vertical-align:middle; float:left; }
.captcha_refresh {  width:5%;  display:table-cell; padding: 3% 2%; text-align:right; vertical-align:middle; }
.captcha_error { float:right; }

.form_captcha { width:70px; }
 
.qty { width:40px; margin:0 auto;   }

.form_submit         {width:auto; padding:5px 0px; border:1px solid #d5d5d5; background:#fff; color:#f5760d; font-size:16px; width:150px; text-transform:uppercase; cursor:pointer; font-family:Open Sans,'open_sansregular';}
.form_submit:hover   {color:#000;}

.eve-dt         {width:30%; float:left; border-right:none;}
.eve-dt:hover   {width:30%; float:left; border-right:none; background:#fcfcfc; box-shadow:none;}


.btn_shopbag         {width:100% auto; margin:10px 0px; font-size:22px; display:block; padding:0px; line-height:40px;   border:none; background:#e00000; color:#fff; text-decoration:none; text-align:center;    cursor:pointer}
.btn_shopbag:hover   {background:#000; color:#fff;}

.btn_wishlist         { width:100% auto; font-size:18px; display:block; border:1px solid #ccc; line-height:40px;  padding:0px;  background:#fff; color:#000; text-decoration:none; text-align:center;    cursor:pointer}
.btn_wishlist:hover   {background:#fff; color:#e00000;}

.btn_shopbag .icon_bag { background: url(../images/icon_bag.png) no-repeat right; padding-right:40px;     display:inline-block;   }
.btn_update .icon_bag { background: url(../images/icon_shopbag.png) no-repeat right; background-position: 0 0px; height:35px; vertical-align:middle;  display:inline-block; padding-left:35px;            }
.btn_update:hover .icon_bag {  background-position: 0 -35px; }

.btn_wishlist .icon_wish {  background: url(../images/icon_wishlist.png) no-repeat top right; background-position: 0 0px; height:35px; vertical-align:middle;  display:inline-block; padding-left:40px;           }
.btn_wishlist:hover .icon_wish { background: url(../images/icon_wishlist.png) no-repeat top right; background-position: 0 -35px;    }

.btn_update         { width:100% auto; margin:0 0 10px 0; font-size:18px; display:block; border:1px solid #ccc; line-height:40px;  padding:0px;  background:#eee; color:#000; text-decoration:none; text-align:center;    cursor:pointer}
.btn_update:hover   {background:#fff; color:#e00000;}


/******************************************************************************
FORM STYLE
******************************************************************************/





/*****************************************************************************************************************
MEDIA QUERIES
*****************************************************************************************************************/



@media only screen and ( min-width: 240px) and ( max-width: 480px) {

.form-box ul     { padding:0px; margin:0px;  }
.form-box ul li  {list-style:none; padding:0; margin:0 0% 1% 0; display:inline-block; width:100%; vertical-align:text-top; color:#333;  }

 

.form-box span.mand { color:#ab8220; }

.form-box li.formclear { clear:both; width:99%; display:block; height:0px; padding:0px; margin:0px; }

.form-box li.name {width:100%; padding:0px 0px 5px 0px; margin:0px; vertical-align:top; }
.form-box li.box  {float:left; line-height:15pt;}

.captcha_code {  width:100%; padding: 3px 2px; display:block; vertical-align:middle; clear:both;   }
.form_captcha { width:96%; }
.captcha_img {  width:auto; margin-right:10px;  display:inline-block; float:left;  vertical-align:middle;}
.captcha_refresh {  width:5%;  display:inline-block; padding: 3% 2%; text-align:right; vertical-align:middle; }

.form_dropdown       {width:100%; padding:4px 3px; outline:none;  font-family:'Robotoregular';}

.form-box li.fullspan1        {width:100%}
.form-box li.fullspan2        {width:100%}

.form-box hr { width:100%; margin:10px 0px 10px 0px; padding:0px 0px 0px 0px; clear:both; display:none;  }

/* Form Columns */
.form-box .formcol2 li { width:100%;} 
.form-box .formcol3 li { width:100%;} 
.form-box .formcol4 li { width:100%;} 

}


@media only screen and ( min-width: 240px) and ( max-width: 768px) {

.form-box ul li.fieldname { width:100%; }
.form-box ul li.fieldarea { width:100%; margin-bottom:20px; }
}

/*****************************************************************************************************************
QUANTITY TEXTBOX ARROWS
*****************************************************************************************************************/
.qty { width:40px; margin:0 auto;   }
.qty_wrap { position:relative;}
.qty_wrap .qty { position:relative;   }
.qty_up { display:inline-block; position:absolute; width:16px; height:16px; top:-3px; right:3px; }
.qty_down { display:inline-block; position:absolute; width:16px; height:16px; bottom:-3px; right:3px;    }

/*****************************************************************************************************************
QUANTITY TEXTBOX ARROWS
*****************************************************************************************************************/
