@charset "utf-8";
/*
* LHG MEMBER WEBSITE v1.0
* Support by: www.onesolution.com.hk
* Last updated: 2014-11-19
* Last remark:
*/
/* CSS CONTENT LIST =====================
1. Import
2. Basic Styles
3. General Setting
4. Header
5. Main Slider
6. Home New arrivals
7. Home Hot
8. FLAGS & TABS
9. BUTTONS
10. PAGE NAV
11. Form
12. Footer
13. Back to top
--------------------
14. Product List
15. Product Details
16. Member Section
17. Checkout
18. Redeem
--------------------
19. Massage Box
20. 404
CSS CONTENT LIST ===================== */
/* Import
================================================== */
@import url('reset.css');
@import url('gird.css');
@import url('navegation.css');
@import url('form.css');
@import url('slider.css');
/* Basic Styles
================================================== */
::-moz-selection {
color: #2b505e;
background: #aae0fe;
}
::selection {
color: #2b505e;
background: #aae0fe;
}
body {
font-size: 16px;
font-weight: normal;
color: #383838;
overflow: visible;
background: #FFF;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html:lang(en) body {
font-family: 'Open Sans', sans-serif, 'Microsoft JhengHei';
}
html:lang(tc) body {
font-family: 'Microsoft JhengHei', sans-serif;
}
html:lang(sc) body {
font-family: 'Microsoft JhengHei', sans-serif;
}
/* ===== Framework ===== */
#wrapper {
position: relative;
}
.content_wrapper {
position: relative;
width: 100%;
margin: auto;
}
a:active, a:hover {
outline: 0;
}
a {
color: #1a3363;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
color: inherit;
outline: 0;
text-decoration: none;
}
/* ===== Typography ===== */
a:hover {
color: #0081c9;
}
h1 {
font-size: 32px;
font-weight: 700;
color: #002e6c;
line-height: 50px;
}
h2 {
font-size: 32px;
font-weight: 600;
color: #002e6c;
text-align: center;
line-height: 60px;
margin-bottom: 20px;
}
h2.main_tit {
background: url(../images/bg_main_tit_3x.png) no-repeat center bottom;
background-size: 270px 18px;
padding-bottom: 6px;
}
h3 {
font-size: 21px;
font-weight: normal;
line-height: 60px;
border-bottom: 1px solid #CACACA;
margin-bottom: 20px;
text-align: left;
}
h4 {
font-size: 24px;
font-weight: 600;
}
h5 {
font-size: 18px;
font-weight: bold;
margin: 12px auto;
}
h6 {
font-size: 18px;
font-weight: 600;
}
/* ===== Misc ===== */
.fl {
float: left;
}
.fr {
float: right;
}
.tl {
text-align: left;
}
.tr {
text-align: right;
}
.tc {
text-align: center;
}
.hide {
display: none !important;
}
.no_border {
border: none !important;
}
.nobg {
background: none !important;
}
.wtbg {
background: #fff !important;
}
.bubg {
background: #002e6c !important;
color: #fff;
}
.trd {
color: #cf3918 !important;
}
.tbu {
color: #002e6c !important;
}
.tsbu {
color: #0081c9 !important;
}
.tsbu b {
font-weight: 600;
}
.tbk {
color: #383838 !important;
}
.tul {
text-decoration: underline;
}
.pd_0 {
padding: 0 !important;
}
.pr_30p {
padding-right: 30px;
}
.mt_20p {
margin-top: 20px;
}
.mt_0p {
margin-top: 0px !important;
}
.mt_50p {
margin-top: 50px;
}
.mt_40p {
margin-top: 40px;
}
.mb_0 {
margin-bottom: 0px !important;
}
/* text color */
/* General Setting
================================================== */
.highlight {
background: #e6f6fa;
}
.separator {
position: relative;
display: block;
height: 1px;
width: 100%;
margin: 20px auto;
border-bottom: 1px solid #CACACA;
}
small {
font-size: 12px;
line-height: 15px;
}
hr {
width: 100%;
background-color: #666;
border: 0;
border-top: 1px solid #666;
border-bottom: 1px solid white;
}
.separator_line {
position: relative;
height: 1px;
border: 0;
background: #ccc;
margin: 20px 0;
clear: both;
}
/* .screen setting */
.screenW {
background: rgba(255, 255, 255, 0);
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 990;
transition: all 500ms linear;
}
.screenW.active {
background: rgba(255, 255, 255, 0.7);
}
.screen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
-webkit-perspective: 2000;
perspective: 2000;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.screen .inner {
position: absolute;
left: 100%;
width: 100%;
height: 100%;
-webkit-transform: rotateX(0) rotateY(90deg) translateZ(0);
transform: rotateX(0) rotateY(90deg) translateZ(0);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: all 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.screen .inner.active {
-webkit-transform: rotateX(0) rotateY(0deg) translateZ(0);
transform: rotateX(0) rotateY(0deg) translateZ(0);
left: 0;
}
.screen .inner.active.out {
-webkit-transform: rotateX(0) rotateY(-90deg) translateZ(0);
transform: rotateX(0) rotateY(-90deg) translateZ(0);
left: -100%;
transition: all 800ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
}
/* Header
================================================== */
#header {
background: #fff;
position: relative;
display: block;
height: 118px;
width: 100%;
vertical-align: middle;
border-bottom: 1px solid #b2b2b4;
z-index: 999;
}
/* TOP BAR */
#top_bar {
position: relative;
display: block;
padding: 0;
margin: 0 auto;
height: 36px;
line-height: 36px;
font-size: 12px;
width: 100%;
color: #fff;
text-align: center;
background: #1a3363;
border-bottom: 1px solid #b0b0b2;
z-index: 9979;
}
#top_bar p{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* running text */
.marquee {
position: absolute;
top: 0;
left: 0;
}
.marquee_list {
display: block;
width: 420px;
height: 36px;
line-height: 36px;
}
.marquee_list li {
display: inline-block;
text-align: left;
margin-right: 12px;
}
.marquee_list li:not(:last-child):before {
content: "◆";
padding: 0 5px 0 0;
}
.marquee_list p,
.marquee_list div {
display: inline;
}
/* tier0 */
.tier0 {
position: absolute;
display: block;
top: 0;
right: 0;
height: 36px;
max-width: 460px;
background-color: #1a3363;
}
.nav_section {
position: relative;
z-index: 997;
}
.nav_section li {
position: relative;
display: inline-block;
text-align: left;
height: 36px;
line-height: 36px;
border-right: 1px solid #7685a1;
padding: 0 16px;
cursor: pointer;
}
.nav_section li:hover {
background: url(../images/bg_top_bar_active.png) repeat-x 0 0;
}
.nav_section li:first-child {
border-left: 1px solid #7685a1;
margin-right: -3px;
}
.nav_section li:last-child {
margin-left: -3px;
}
.nav_section li a:hover {
color: #fff;
}
.facet_icn {
position: relative;
display: inline-block;
height: 22px;
width: auto;
top: 6px;
right: 2px;
}
.facet_label {
text-transform: uppercase;
}
/* dropdown */
.log_dropdown,
.lang_dropdown {
position: absolute;
display: none;
background: #1a3363;
border: 1px solid #7685a1;
text-align: center;
}
.log_dropdown {
right: -1px;
width: 280px;
}
.log_ass_hlep {
position: absolute;
display: none;
bottom: -1px;
right: 0;
height: 1px;
width: 94px;
background: #1a3363;
border-top: 1px solid #1a3363;
z-index: 998;
}
.afterlogin .log_ass_hlep {
width: 100%;
}
.lang_dropdown {
left: -1px;
border-top: none;
}
/* afterlogin */
.log_dropdown .mb_points_box {
color: #fff;
text-align: center;
font-size: 16px;
margin-bottom: -10px;
line-height: 25px;
}
.log_dropdown .mb_points_box .display_value {
font-size: 24px;;
}
.dropdown_mb_menu {
position: relative;
display: block;
text-align: left;
}
.dropdown_mb_menu .mb_main_menu li {
display: block;
border: none;
margin-bottom: 10px;
}
/* TOP BAR LOGIN */
.login_container {
position: relative;
display: block;
margin: 15px 15px 15px 15px;
}
.login_container h5 {
margin-bottom: 0;
}
.login_container .btn_sq {
width: 180px;
padding: 0;
}
.btn_sq.bu_btn.fb_btn,
.login_container .bu_btn,
.login_form .bu_btn {
background-color: #3b5998;
-webkit-box-shadow: 0px 2px 0px 0px #627aad;
-moz-box-shadow: 0px 2px 0px 0px #627aad;
box-shadow: 0px 2px 0px 0px #627aad;
}
.btn_sq.bu_btn.fb_btn small,
.login_container .bu_btn small,
.login_form .bu_btn small {
font-size: 12px;
}
.btn_sq.bu_btn.fb_btn small:before,
.login_container .bu_btn small:before,
.login_form .bu_btn small:before {
content: ' ';
display: inline-block;
position: relative;
width: 18px;
height: 18px;
background-size: 18px 18px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-image: url('../images/icn_fb_login_2x.png');
top: 4px;
left: -2px;
}
.ie .btn_sq.bu_btn.fb_btn small:before,
.ie .login_container .bu_btn small:before,
.ie .login_form .bu_btn small:before {
background-image: url('../images/icn_fb_login.png');
}
/* top logo */
#logo {
position: relative;
display: block;
width: 220px;
height: auto;
margin: 0;
}
#logo img {
width: 100%;
height: auto;
}
#main_menu {
position: relative;
display: inline-block;
width: 850px;
height: 100px;
}
/* Main Slider
================================================== */
#main_slider {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
max-width: 1310px;
max-height: 400px;
background: #fff;
margin-bottom: 50px;
}
#main_slide img {
width: 100%;
height: auto;
}
#main_slider .slides li {
margin: 0 auto;
width: 100%;
display: block;
}
#main_slider .slides li a {
}
#main_slider .slides li img {
width: 100%;
height: auto;
}
/* Home New arrivals
================================================== */
.new_pdt_block {
position: relative;
display: block;
margin: 10px auto 30px auto;
width: 100%;
max-width: 1310px;
max-height: 400px;
}
.new_pdt_block ul{
list-style: none;
}
.new_pdt_list .item {
position: relative;
margin: 5px 10px;
}
.new_pdt_list .item img.before,
.new_pdt_list .item img.after {
position: absolute;
top: 0;
width: 15px;
height: 100%;
z-index: 820;
}
.new_pdt_list .item .before {
left: -12px;
}
.new_pdt_list .item .after {
right: -12px;
}
.new_pdt_list .item img {
display: block;
/*width: 100%;
height: auto;*/
margin:0 auto;
}
.new_pdt_list .item a img {
position: relative;
z-index: 830;
}
/* Home HOT
================================================== */
.hot_pdt_block {
position: relative;
width: 100%;
max-width: 1280px;
margin: 10px auto 30px auto;
}
.hot_pdt_block .main_tit {
margin: 0px 0 30px 0;
}
/* video */
.hot_pdt_block .vedio_box {
position: relative;
display: block;
width: 650px;
height: 570px;
margin: 5px 5px 5px 10px;
cursor: pointer;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.vedio_box h4 {
position: absolute;
display: block;
width: 100%;
top: 86%;
text-align: center;
}
.vedio_box .icn_video,
.vedio_box .btn_play {
position: absolute;
display: inline-block;
text-align: center;
height: 80px;
margin: -40px auto 0 auto;
}
.vedio_box .btn_play {
top: 50%;
width: 100%;
}
.vedio_box .btn_play img {
display: inline-block;
text-align: center;
}
.vedio_box .icn_video {
top: 78%;
width: 100%;
}
.vedio_box .icn_video img {
display: inline-block;
text-align: center;
}
/* sp */
.hot_pdt_block .sp_box {
position: relative;
display: block;
width: 600px;
height: 280px;
margin: 5px 10px 5px 5px;
background-repeat: no-repeat;
background-position: center;
}
.sp_box .desc {
position: relative;
display: block;
width: 180px;
height: 280px;
background: #dddcda;
}
.sp_box .desc h4 {
display: block;
text-align: center;
margin: 5px auto;
line-height: 28px;
}
.sp_box .desc .sub_tit {
display: block;
text-align: center;
margin: 5px auto;
font-size: 16px;
line-height: 20px;
}
.sp_box .desc .btn_sq {
position: absolute;
display: block;
bottom: 10px;
width: 100px;
padding: 0;
margin: 10px 40px;
}
.sp_box .desc img {
display: block;
margin: 10px auto;
}
.sp_box .sp_banner {
width: 420px;
height: 280px;
}
/* FLAGS & TABS
================================================== */
/* flage horizontal */
.gen_flag_h {
position: relative;
display: inline-block;
height: 20px;
padding: 0;
top: 8px;
}
.gen_flag_h .flag_bf,
.gen_flag_h .flag_af {
position: relative;
display: inline-block;
height: 20px;
width: auto;
top: -8px;
vertical-align: middle;
}
.gen_flag_h .flag_bf {
margin-right: -4px;
}
.gen_flag_h .flag_md {
position: relative;
display: inline-block;
height: 20px;
padding: 0 6px 0 2px;
line-height: 20px;
top: -8px;
font-size: 14px;
margin-right: -4px;
font-weight: 700;
vertical-align: middle;
}
/* flag vector */
.gen_flag_v {
position: absolute;
display: inline-block;
height: 20px;
line-height: 20px;
padding: 0;
font-size: 14px;
top: -12px;
right: 5px;
}
.gen_flag_v .flag_md {
text-align: center;
padding: 0 8px;
color: #fff !important;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
.gen_flag_v .flag_af {
position: relative;
display: block;
margin: 0 auto;
width: 20px;
height: auto;
bottom: 3px;
}
.flag_yl b {
background: #e2d526;
color: #1a3363;
}
.flag_grn b {
background: #a7b738;
color: #1a3363;
}
/* BUTTONS
================================================== */
/* button style */
.btn, .btn_sq {
vertical-align: middle;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.btn {
display: inline-block;
position: relative;
outline: none;
border: none;
margin: 20px auto 10px auto;
height: 30px;
padding: 0 20px;
line-height: 30px;
text-align: center;
font-size: 16px;
font-weight: 700;
letter-spacing: 1;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.btn_sq {
display: inline-block;
position: relative;
outline: none;
border: none;
margin: 10px auto 10px auto;
height: 30px;
padding: 0 20px;
line-height: 30px;
text-align: center;
font-size: 16px;
font-weight: 700;
letter-spacing: 1;
}
.btn.large_btn {
height: 42px;
line-height: 42px;
}
.btn.large_btn img {
position: relative;
display: inline-block;
height: 33px;
width: auto;
margin-top: -5px;
top: 10px;
}
/* SAMPLE BUTTON */
.sample_btn {
display: inline-block;
position: relative;
outline: none;
border: none;
margin: 0 auto;
height: 26px;
padding: 0 5px;
line-height: 26px;
text-align: center;
font-size: 14px;
font-weight: 400;
letter-spacing: 1;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
/* Sample Large button */
.sample_btn.large_btn {
display: block;
height: 65px;
width: auto;
line-height: 65px;
font-size: 18px;
font-weight: 700;
}
/* fix img in button */
.img_btn {
}
.img_btn img {
position: relative;
height: 26px;
width: auto;
top: 3px;
margin-left: -15px;
margin-bottom: -4px;
}
/* buttons color */
.grn_btn {
background: #a5b538;
color: #fff;
-webkit-box-shadow: 0px 2px 0px 0px rgba(125, 135, 42, 1);
-moz-box-shadow: 0px 2px 0px 0px rgba(125, 135, 42, 1);
box-shadow: 0px 2px 0px 0px rgba(125, 135, 42, 1);
}
/*
.grn_btn:hover {
top: 1px;
color: #fff;
-webkit-box-shadow: 0px 1px 0px 0px rgba(125, 135, 42, 1);
-moz-box-shadow: 0px 1px 0px 0px rgba(125, 135, 42, 1);
box-shadow: 0px 1px 0px 0px rgba(125, 135, 42, 1);
}
*/
.wt_btn {
background: #ebebee;
color: #1a3363;
-webkit-box-shadow: 0px 2px 0px 0px rgba(189, 188, 186, 1);
-moz-box-shadow: 0px 2px 0px 0px rgba(189, 188, 186, 1);
box-shadow: 0px 2px 0px 0px rgba(189, 188, 186, 1);
}
.wt_btn:hover {
top: 1px;
color: #057db2 !important;
-webkit-box-shadow: 0px 1px 0px 0px rgba(189, 188, 186, 1);
-moz-box-shadow: 0px 1px 0px 0px rgba(189, 188, 186, 1);
box-shadow: 0px 1px 0px 0px rgba(189, 188, 186, 1);
}
.bu_btn {
background: #1a3363;
color: #fff;
-webkit-box-shadow: 0px 2px 0px 0px rgba(13, 26, 50, 1);
-moz-box-shadow: 0px 2px 0px 0px rgba(13, 26, 50, 1);
box-shadow: 0px 2px 0px 0px rgba(13, 26, 50, 1);
}
.bu_btn:hover {
top: 1px;
color: #fff;
-webkit-box-shadow: 0px 1px 0px 0px rgba(13, 26, 50, 1);
-moz-box-shadow: 0px 1px 0px 0px rgba(13, 26, 50, 1);
box-shadow: 0px 1px 0px 0px rgba(13, 26, 50, 1);
}
.gary_btn {
background: #ededf0;
border: 1px solid #ccc;
color: #999;
}
.gary_btn:hover {
color: #999;
}
.wtbd_btn {
background: #fff;
border: 1px solid #ccc;
color: #808080;
}
.wtbd_btn:hover {
color: #0081c9;
}
/* PAGE NAV
================================================== */
.page_nav {
position: relative;
margin: 30px auto 30px auto;
}
.pages {
display: block;
position: relative;
right: 2px;
margin-bottom: 6px;
clear: both;
height: 30px;
line-height: 30px;
text-align: center
}
.pages li {
display: inline;
background: #fff;
padding: 2px 6px;
font-size: 12px;
color: #9B9B9B;
cursor: pointer;
border: 1px solid #ccc;
}
.pages li:hover, .pages li.pgCurrent {
color: #057db2 !important;
text-decoration: underline;
}
.pages li.pgEmpty {
color: #D1D1D1 !important;
}
/* FORM
================================================== */
.general_form {
position: relative;
display: block;
vertical-align: top;
}
.general_form dl {
position: relative;
display: block;
}
.general_form dt, .general_form dd {
display: inline-block;
}
.general_form dt {
text-align: right;
}
.general_form dd {
}
.general_form label {
font-size: 14px;
text-align: right;
font-weight: 600;
line-height: 32px;
}
.general_form label.required:before {
content: "*";
position: relative;
display: inline-block;
top: 0;
padding-right: 3px;
font-size: 18px;
color: #cf3918;
}
.general_form input[type=text],
.general_form input[type=password],
.general_form textarea
{
display: inline-block;
height: 14px;
width: 360px;
padding: 8px 10px;
margin-bottom: 10px;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
/* dropdwon selector */
.general_form .selector {
position: relative;
display: inline-block;
height: 14px;
width: 360px;
padding: 8px 10px;
margin-right: 15px;
cursor: pointer;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
.general_form .selector.small {
width: 80px;
}
.general_form .selector i.fa {
position: absolute;
right: 15px;
font-size: 18px;
color: #666;
}
.general_form .selector ul {
position: absolute !important;
display: none;
left: -1px;
top: 27px;
width: 360px;
max-height: 320px;
overflow: auto;
padding: 4px 10px;
position: relative;
color: #9b9b9b;
background: #fff;
border: 1px solid #ccc;
border-top: none;
z-index: 660;
}
.general_form .selector.small ul {
width: 80px;
}
.general_form .selector ul li {
display: block;
text-align: center;
padding: 6px 10px;
cursor: pointer;
background: url(../images/bg_dot_line_wt.png) repeat-x left bottom;
}
.general_form .selector li:hover {
color: #057db2;
}
.general_form .selector li.selected {
color: #fff;
background-color: #1a3363;
}
.general_form .selector li:last-child {
background-image: none;
}
/* TABLES
================================================== */
.general_table {
position: relative;
display: block;
font-size: 14px;
font-weight: 400;
color: #535e5b;
}
.general_table .row {
position: relative;
display: block;
height: 60px;
line-height: 60px;
border-bottom: 1px solid #ccc;
}
.general_table .row:last-child {
border-bottom: none;
}
.general_table .row:hover {
background: #f2f5e1;
}
.general_table .row .column {
display: block;
height: 60px;
float: left;
}
.general_table .row.thead {
font-weight: 700;
}
.general_table .row.thead:hover {
background: #e6f6fa;
}
.general_table .row .cl_1-2 {
width: 2%;
}
.general_table .row .cl_1 {
width: 5%;
}
.general_table .row .cl_2 {
width: 10%;
}
.general_table .row .cl_3 {
width: 15%;
}
.general_table .row .cl_4 {
width: 20%;
}
.general_table .row .cl_5 {
width: 25%;
}
.general_table .row .cl_6 {
width: 30%;
}
.general_table .row .cl_7 {
width: 35%;
}
.general_table .row .cl_8 {
width: 40%;
}
.general_table .row .cl_9 {
width: 45%;
}
.general_table .row .cl_10 {
width: 50%;
}
.general_table .row .cl_11 {
width: 55%;
}
.general_table .row .cl_12 {
width: 60%;
}
.general_table .row .cl_13 {
width: 65%;
}
.general_table .row .cl_14 {
width: 70%;
}
.general_table .row .cl_15 {
width: 75%;
}
.general_table .row .cl_16 {
width: 80%;
}
/* MY COUPON
================================================== */
.coupon_list {
}
.coupon_list .row {
line-height: 20px;
height: auto;
padding: 20px 0;
}
.coupon_list .row p {
line-height: 20px;
}
.coupon_list .row .column {
height: auto;
vertical-align: middle;
}
/* Footer
================================================== */
#footer {
position: relative;
display: block;
width: 100%;
margin: 60px auto 0 auto;
background: #1a3363;
color: #fff;
border-top: 1px solid #b0b0b2;
}
#footer .box_1-3 {
display: block;
position: relative;
float: left;
width: 420px;
height: 180px;
margin: 40px auto;
}
#footer h3 {
line-height: 26px;
font-weight: 700;
border: none;
text-align: center;
text-transform: uppercase;
margin-bottom: 0px;
}
/* help */
.help_block {
border-right: 1px solid #7685a1;
padding: 10px 12px 10px 0;
}
.help_block img.fl {
position: relative;
width: 140px;
height: 160px;
margin: 10px 0 0 60px;
}
.help_list {
position: relative;
display: block;
width: 160px;
line-height: 30px;
}
.help_list li {
display: block;
text-align: center;
}
.help_list li a {
font-size: 16px;
}
/* social */
.social_block {
border-right: 1px solid #7685a1;
padding: 10px 12px 10px 12px;
}
.social_list {
display: inline-block;
width: 100%;
text-align: center;
margin-top: 10px;
}
.social_list a {
display: inline-block;
text-align: center;
margin: 5px;
}
.social_list img {
width: 50px;
height: 50px;
}
/* QR */
.qr_bock {
padding: 10px 0 10px 12px;
}
.qr_bock img {
display: block;
width: 300px;
height: 120px;
margin: auto;
margin-top: 20px;
}
/* copyright */
.copyright_block {
position: relative;
width: 100%;
margin: 0 auto;
font-size: 12px;
font-weight: 600;
border-top: 1px solid #7685a1;
}
.copyright {
position: relative;
}
.copyright .footer_logo img {
width: 164px;
height: 60px;
}
.copyright p {
padding: 14px 0 0 10px;
line-height: 18px;
}
.copyright_block .footer_menu {
position: relative;
display: inline-block;
margin-top: 14px;
}
.footer_menu li {
display: inline-block;
text-align: right;
padding: 0 10px 0 10px;
border-right: 1px solid #7685a1;
}
.footer_menu li:last-child {
border-right: none;
padding-right: 0;
}
/* Back to top
================================================== */
#back-to-top, .touch-device #back-to-top:hover {
position: fixed;
display: none;
border-radius: 2px;
height: 40px;
width: 40px;
line-height: 36px;
bottom: 40px;
right: 40px;
text-shadow: none;
text-decoration: none;
text-align: center;
cursor: pointer;
color: #fff;
border: 1px solid #fff;
background-color: #002e6c;
opacity: 0.8;
-moz-opacity: 0.8;
-khtml-opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
z-index: 20000;
}
/* PRODUCT LIST
================================================== */
/* LEFT NAV ================== */
.left_nav_block {
position: relative;
display: block;
width: 300px;
background: #1a3363;
margin: 40px 50px 40px 0;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
/* header */
.left_nav_header {
position: relative;
padding: 10px;
border-bottom: 1px solid #ccc;
}
.left_nav_header h4 {
/*margin-bottom: 6px;*/
}
.filter_tit {
display: block;
height: 32px;
line-height: 32px;
font-size: 16px;
text-transform: uppercase;
}
.filter_tit a {
text-decoration: underline;
}
.filter_menu {
position: relative;
margin: 5px auto 0 auto;
}
.filter_menu ul {
}
.filter_menu ul li {
position: relative;
display: block;
background: #fff;
color: #1a3363;
font-size: 14px;
padding: 10px;
margin-bottom: 10px;
font-weight: 600;
cursor: pointer;
}
.filter_menu ul li a {
display: block;
}
.filter_menu ul li a:after {
content: "\f00d";
position: absolute;
display: inline-block;
right: 10px;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.filter_menu ul li:hover a, .filter_menu ul li a:hover,
.filter_menu ul li:hover a:after {
color: #0081c9;
}
/* for mob */
.screen .filter_menu {
width: 260px;
padding: 10px;
margin: 140px auto 0 auto;
background: #1a3363;
border-bottom: 1px solid #7685a1;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
border-radius: 4px 4px 0 0;
}
.screen .filter_menu .fr {
float: none;
color: #fff;
display: block;
margin: 10px auto 20px auto;
text-align: center;
text-decoration: underline;
}
/* categories */
.categories {
position: relative;
padding: 10px;
}
.categories h3 {
line-height: 40px;
text-align: left;
border: none;
margin-bottom: 10px;
}
.left_nav_block h3.mob {
display: none;
}
/* for mob */
.screen .categories {
width: 240px;
padding: 10px 20px;
margin: 0 auto;
background: #1a3363;
color: #fff;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
border-radius: 0 0 4px 4px;
}
/* RIGHT CONTENT ================== */
.pdt_gridwall {
position: relative;
display: block;
/* width: 920px;
margin: 40px 40px 40px auto;*/
width: 1310px;
margin: 40px auto;
}
/* grid wall options */
.option_control {
position: relative;
display: block;
width: 100%;
padding: 10px 0;
cursor: pointer;
z-index: 960;
}
.option_control .option {
position: relative;
display: inline-block;
border: 1px solid #ccc;
height: 32px;
line-height: 32px;
padding: 0 20px;
margin-right: 10px;
cursor: pointer;
}
.option_control .option.sort {
width: 180px;
}
.option_control .label {
color: #4d4d4d;
font-weight: 600;
}
.option_display {
color: #9b9b9b;
padding: 0 10px;
}
.option_display a {
color: #9b9b9b;
}
.option_display a:hover, .option_display a.active {
color: #057db2;
}
.option_list {
position: absolute;
display: none;
left: -21px;
top: -1px;
width: 220px;
padding: 0 0;
position: relative;
color: #9b9b9b;
background: #fff;
border: 1px solid #ccc;
border-top: none;
}
.option_list li {
display: block;
text-align: center;
padding: 6px 10px;
cursor: pointer;
background: url(../images/bg_dot_line_wt.png) repeat-x left bottom;
}
.option_list li:hover {
color: #057db2;
}
.option_list li.selected {
color: #fff;
background-color: #1a3363;
}
.option_list li:last-child {
background-image: none;
}
/* grid wall items */
.gridwall {
position: relative;
}
.grid_pdt_list {
position: relative;
display: block;
margin: 10px auto;
}
.grid_item_box {
position: relative;
display: block;
float: left;
/*width: 280px;*/
width: 305px;
/*height: 380px;*/
height: 325px;
margin: 10px;
background: #fff;
cursor: pointer;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.grid_item_box:hover {
background: #ededf0;
}
.also_like_grid_item_box {
position: relative;
display: block;
float: left;
width: 280px;
height: 380px;
margin: 10px;
background: #fff;
cursor: pointer;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.also_like_grid_item_box:hover {
background: #ededf0;
}
.also_like_grid_item_box {
position: relative;
display: block;
float: left;
width: 280px;
height: 380px;
margin: 10px;
background: #fff;
cursor: pointer;
-moz-transition: all 0.1s ease-in-out;
-webkit-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.also_like_grid_item_box:hover {
background: #ededf0;
}
.grid_item_class {
position: relative;
margin: 10px auto 0 auto;
color: #999;
font-size: 16px;
text-align: center;
}
.grid_item_class:after {
content: " ";
position: relative;
display: inline-block;
top: -8px;
width: 30px;
height: 1px;
border-bottom: 2px solid #999;
}
.grid_item_img {
width: 260px;
height: 190px;
overflow: hidden;
margin: 0 auto 10px auto;
}
.grid_item_img img {
width: 260px;
height: 190px;
}
.grid_item_info {
line-height: 1.6
}
.grid_item_info h6 {
color: #10386a;
text-align: center;
margin: 0 10px 10px 10px;
line-height: 22px;
}
.grid_item_box:hover h6 {
color: #057db2;
}
.also_like_grid_item_box:hover h6 {
color: #057db2;
}
.also_like_grid_item_box:hover h6 {
color: #057db2;
}
.grid_item_info p {
display: inline-block;
text-align: center;
width: 100%;
margin-bottom: 5px;
}
.grid_item_info .item_price {
text-align: center;
font-size: 20px;
color: #383838;
font-weight: 700;
}
.grid_item_info .item_price-original {
text-align: center;
font-size: 14px;
color: #383838;
font-weight: 600;
text-decoration: line-through;
}
.grid_item_info .btn {
font-size: 12px;
padding: 0 10px;
}
.grid_item_info .btn img {
position: relative;
display: inline-block;
top: 5px;
width: 20px;
height: 20px;
}
.grid_item_info .gary_btn {
background: #9b9b9b;
border: none;
color: #fff;
min-width: 100px;
}
/* product labels */
.flag .flag_cric {
display: block;
position: absolute;
width: 60px;
height: 60px;
top: -15px;
right: -15px;
z-index: 800;
}
.flag.new .flag_cric {
right: inherit;
left: -15px;
}
/* PRODUCT DETAILS
================================================== */
.pdt_dtl_block {
position: relative;
padding: 30px 0;
}
/* img & socila */
.pdt_img_box,
.info_box {
position: relative;
display: block;
background: #fff;
border-bottom: 1px solid #ccc;
}
/* Large image */
.pdt_img_box {
width: 490px;
height: 630px;
margin: 0 40px 0 0;
padding: 15px;
/* overflow: hidden; */
}
.display_img {
display: block;
width: 490px;
height: 390px;
margin: 0 auto 30px auto;
overflow: hidden;
position: relative;
}
.display_img img {
width: 100%;
height: auto;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
/* Carousel List */
.pdt_img_carousel {
position: relative;
}
.pdt_img_list {
position: relative;
display: block;
margin: 10px auto 10px auto;
max-width: 450px;
height: 100px;
}
.pdt_img_list .item {
position: relative;
width: 120px;
height: 90px;
margin: 5px 0 5px 15px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.pdt_img_list .item.active {
border: 3px solid #bfbebc;
}
.pdt_img_list .item img {
width: 100%;
height: auto;
max-width: 120px;
max-height: 90px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.pdt_img_carousel .pdt_img_list .owl-controls .owl-buttons div {
position: absolute;
display: inline-block;
top: 0;
height: 90px;
width: 18px;
padding: 0;
background: #fff;
color: #808080;
line-height: 90px;
font-size: 24px;
border: 1px solid #808080;
filter: Alpha(Opacity=50); /*IE7 fix*/
opacity: 0.5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.pdt_img_carousel .pdt_img_list .owl-controls .owl-buttons div.owl-prev {
left: -25px;
}
.pdt_img_carousel .pdt_img_list .owl-controls .owl-buttons div.owl-next {
right: -25px;
}
/* social block */
.pdt_social_block {
position: relative;
display: block;
margin: 30px auto 0 auto;
}
.pdt_social_block img {
display: block;
width: auto;
height: 30px;
margin: 0 auto;
}
.frd_share, .fb_share {
display: inline-block;
cursor: pointer;
}
.frd_share {
width: 160px;
height: 30px;
}
/* info block //////////////// */
.pdt_info_block {
position: relative;
display: block;
width: 745px;
}
.box_tab {
position: relative;
display: block;
width: 100%;
}
.box_tab li {
position: relative;
display: inline-block;
height: 48px;
line-height: 50px;
padding: 0 15px;
margin: 0 5px 0 0;
color: #002e6c;
font-size: 16px;
font-weight: 600;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.box_tab li.active, .box_tab li:hover {
color: #0081c9;
}
.box_tab li.active {
border-bottom: 1px solid #fff;
}
/* for member notivications */
.box_tab .remark {
position: absolute;
top: 16px;
right: 0;
}
.box_tab b {
font-weight: 600;
}
.info_box {
position: relative;
display: block;
width: 725px;
height: 590px;
padding: 10px;
color: #535e5b;
border-width: 1px;
border-style: solid;
border-color: #fff #ccc #ccc #ccc;
}
.info_box > li {
display: none;
}
.info_box > li.active {
display: block;
}
.info_box .separator_line {
margin: 6px auto;
}
.pdt_name {
line-height: 30px;
}
.modle_no {
line-height: 22px;
font-size: 14px;
}
.pdt_price {
display: inline-block;
text-align: left;
line-height: 40px;
}
.original_price {
display: inline-block;
padding: 0 5px;
font-size: 16px;
color: #808080;
text-decoration: line-through;
}
.display_discount,
.discount_expire {
position: relative;
display: inline-block;
top: -3px;
padding: 6px 8px;
margin-left: 10px;
font-size: 12px;
text-align: center;
color: #fff;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.display_discount {
background: #cf3918;
}
.discount_expire {
background: #4ac3d9;
}
/* Product description */
.pdt_info_block .more,
.pdt_info_block .close {
position: absolute;
color: #10386a;
font-size: 14px;
text-align: right;
text-decoration: underline;
text-transform: uppercase;
cursor: pointer;
}
.pdt_info_block .more {
bottom: 0;
right: 0;
}
.pdt_info_block .close {
bottom: 5px;
right: 10px;
}
.pdt_info_block .more:hover,
.pdt_info_block .close:hover {
color: #0081c9;
}
.pdt_info_block .more:before,
.pdt_info_block .close:before {
display: inline-block;
margin-right: 4px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.pdt_info_block .more:before {
content: "\f0da";
}
.pdt_info_block .close:before {
content: "\f00d";
}
.pdt_desc,
.pdt_desc_show {
font-size: 14px;
line-height: 16px;
}
.pdt_desc {
position: relative;
display: block;
height: 64px;
overflow: hidden;
z-index: 660;
padding-bottom: 15px;
}
.pdt_desc .desc_content {
height: 64px;
overflow: hidden;
}
.pdt_desc_show {
position: absolute;
display: none;
width: 725px;
margin-top: -64px;
padding: 20px 0 30px;
background: #fff;
border: 1px solid #ccc;
z-index: 665;
-webkit-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.4);
-moz-box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.4);
box-shadow: 2px 2px 11px 0px rgba(50, 50, 50, 0.4);
}
.pdt_desc_show .desc_content {
padding: 5px 20px;
height: auto;
}
/* Product options */
.pdt_option {
position: relative;
display: block;
/* margin: 10px 10px 0 0;*/
}
.pdt_color{
height: 39px;
}
.option_box {
position: relative;
display: inline-block;
height: 34px;
padding: 0 15px;
margin-right: 10px;
line-height: 36px;
font-size: 16px;
background: #fff;
border: 1px solid #ccc;
cursor: default;
min-width: 45px;
margin-bottom: 10px;
text-align: center;
}
.option_display {
font-weight: 600;
color: #535e5b;
}
.pdt_option .option_list {
position: absolute;
top: 36px;
left: 58px;
width: auto;
z-index: 665;
}
.pdt_option .option_list li {
padding: 8px 10px;
}
.option_box.active .fa-caret-down:before {
position: relative;
top: 3px;
content: "\f0de";
}
.pdt_color .label {
position: relative;
top: -12px;
}
.option_img {
display: inline-block;
width: 36px;
height: 34px;
margin-right: 5px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.option_img img {
display: block;
height: 100%;
width: auto;
margin: auto;
}
.option_qty .qty_text {
height: 34px;
width: 80px;
padding: 0;
margin: 0 5px;
color: #000;
font-weight: 700;
text-align: center;
background: #fff;
border: 1px solid #ccc;
}
.option_qty .qty_reduce,
.option_qty .qty_increase {
display: inline-block;
width: 36px;
height: 34px;
line-height: 34px;
text-align: center;
color: #9b9b9b;
margin: 0 0;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.pdt_comfort {
}
.pdt_comfort .option_box {
cursor: default;
}
.pdt_comfort .option_display small {
display: inline-block;
position: relative;
height: 16px;
font-size: 12px;
color: #9b9b9b;
line-height: 16px;
top: -2px;
}
.pdt_comfort .comfort_box {
display: inline-block;
position: relative;
height: 20px;
width: 160px;
line-height: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 160px 12px;
background-image: url('../images/bg_comfort_2x.png');
text-align: center;
vertical-align: m;
top: 5px;
}
.ie .pdt_comfort .comfort_box {
background-image: url('../images/bg_comfort.png');
}
.pdt_comfort .comfort_box b {
display: inline-block;
position: relative;
height: 20px;
width: 20px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: 16px 16px;
background-image: url('../images/bg_comfort_dot_2x.png');
}
.pdt_comfort .comfort_box b.selected {
background-image: url('../images/bg_comfort_dot_selected_2x.png');
}
.pdt_comfort .comfort_box b.half_selected {
background-image: url('../images/bg_comfort_half_dot_selected_2x.png');
}
.ie .pdt_comfort .comfort_box b {
background-image: url('../images/bg_comfort_dot.png');
}
.ie .pdt_comfort .comfort_box b.selected {
background-image: url('../images/bg_comfort_dot_selected.png');
}
.ie .pdt_comfort .comfort_box b.half_selected {
background-image: url('../images/bg_comfort_half_dot_selected_2x.png');
}
/* Extra Items
.pdt_extra {
position: relative;
}
.pdt_extra .label {
font-size: 14px;
}
.pdt_extra .extra_count {
color: #cf3918;
font-weight: 700;
}
.extra_item_list {
position: relative;
display: block;
margin: 10px auto;
}
.extra_item_list .extra_item {
position: relative;
display: inline-block;
width: 60px;
height: 45px;
margin-right: 5px;
background: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
.extra_item_list .extra_item:hover {
border: 1px solid #999;
}
.extra_item_list .extra_item img {
display: block;
height: 100%;
width: auto;
margin: auto;
}
.extra_item_list .fa {
position: relative;
top: -15px;
padding: 0 5px 0 0;
color: #9b9b9b;
}
.extra_item:before {
content: "\f096";
position: absolute;
display: inline-block;
top: 0;
left: 0px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 17px;
text-rendering: auto;
color: #bfbebc;
background: #fff;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.extra_item.default_item:before {
content: "\f14a";
color: #0081c9;
}
.extra_item.selected:before {
content: "\f14a";
color: #cf3918;
}*/
/* Combo Action */
.combo_action {
position: relative;
display: block;
margin: 25px 0;
}
.combo_price {
display: inline-block;
min-width: 200px;
}
.combo_price .display_combo_price {
color: #cf3918;
font-size: 28px;
font-weight: 700;
}
.combo_action .btn {
position: absolute;
right: 0;
margin: -8px 0 0 0;
}
/* Promotion Box*/
.promotion_box {
position: relative;
display: block;
height: 120px;
padding-bottom: 15px;
font-size: 14px;
line-height: 20px;
background: url('../images/bg_pattern_1.png') repeat #fff center;
border: 1px solid #ccc;
margin-top: 10px;
}
.promotion_box .promotion_tit {
padding: 5px 5px 0 5px;
color: #7d892a;
text-transform: uppercase;
font-weight: 700;
}
.promotion_box .promotion_list {
position: relative;
display: block;
height: 110px;
padding: 0 5px 0 5px;
color: #383838;
overflow-x: hidden;
overflow-y: auto;
}
.promotion_box .more {
right: 6px;
bottom: 2px;
font-size: 12px;
font-weight: 600;
text-decoration: none;
}
.promotion_box .more:before {
display: none;
content: none;
}
.promotion_box .more:after {
content: "\f078";
position: relative;
display: inline-block;
top: -1px;
padding-left: 2px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 12px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.promotion_box .more.hide:after {
content: "\f077";
}
/* dropdown promotion */
.promotion_box.current {
height: auto;
z-index: 965;
}
.promotion_box.current .promotion_list {
height: auto;
}
.promotion_box.current .more {
display: none;
}
.promotion_box.current .more.hide {
display: inline-block !important;
}
/* PART 2 DELIVERY & RETURNS*/
.rn_summary {
height: 560px;
padding: 10px 15px;
line-height: 22px;
overflow: auto;
}
.rn_summary b {
font-weight: 600;
}
/* CROSS SELL ITEMS ////////////////////////////////////// */
.cross_sell_block {
margin: 40px auto;
}
.cross_sell_box {
width: 1200px;
margin: 0 auto;
}
.cross_sell_list {
position: relative;
display: block;
}
.cross_sell_list .item {
position: relative;
margin: 5px 0 5px 10px;
background: #fff;
border: 1px solid #ccc;
}
.cross_sell_box .cross_sell_list .owl-controls .owl-buttons div {
position: absolute;
display: inline-block;
top: 50%;
height: 90px;
width: 18px;
padding: 0;
margin-top: -45px;
background: #fff;
color: #808080;
line-height: 90px;
font-size: 24px;
border: 1px solid #808080;
filter: Alpha(Opacity=50);
opacity: 0.5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.cross_sell_box .cross_sell_list .owl-controls .owl-buttons div.owl-prev {
left: -30px;
}
.cross_sell_box .cross_sell_list .owl-controls .owl-buttons div.owl-next {
right: -30px;
}
.cross_sell_box .owl-carousel .owl-wrapper-outer {
padding-top: 10px;
margin-top: -10px;
}
.cross_sell_box .flag.flag_cric {
top: -10px;
right: -10px;
}
.cross_sell_box .flag.new .flag_cric {
right: inherit;
left: -10px;
}
/* Share to frd popup box */
.frd_share_box {
position: absolute;
display: none;
bottom: 50px;
left: 0;
width: 680px;
height: auto;
padding: 20px;
background: #fff;
border: 1px solid #eeeeee;
-webkit-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, 0.3);
z-index: 866;
}
.frd_share_box .ass_arrow {
position: absolute;
display: block;
width: 25px;
height: 20px;
bottom: -20px;
}
.frd_share_box .fa-times {
position: absolute;
top: 10px;
right: 10px;
font-size: 24px;
color: #999;
z-index: 999;
}
.frd_share_row {
position: relative;
display: block;
margin: 0 auto;
padding-top: 20px;
}
.frd_share_box .option_box {
color: #535e5b;
height: auto;
/*padding: 0 0 0 10px;*/
padding: 0 10px 0 10px;
line-height: 36px;
border: 1px solid #ccc;
}
.frd_share_box .option_box .fa {
float: right;
position: relative;
top: 3px;
}
.frd_share_box .frd_search {
height: 36px;
width: 200px;
padding: 0 10px;
color: #0081c9;
background: #f2f2f2;
border: none;
border-left: 1px solid #ccc;
}
.frd_share_box .frd_search input[type="text"] {
height: 30px;
width: 180px;
color: #0081c9;
background: #f2f2f2;
border: none;
}
.frd_share_box .frd_search input[type="submit"] {
height: 30px;
width: 30px;
margin-left: -26px;
background: none;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.frd_share_box .frd_search .fa {
display: inline-block;
color: #999;
cursor: pointer;
top: 8px;
}
.frd_share_box .mb_avatar {
position: relative;
display: inline-block;
width: 160px;
height: 160px;
margin-right: 20px;
border: 1px solid #ccc;
}
.frd_share_box .mb_avatar img {
width: 100%;
height: 100%;
}
.share_msg {
position: relative;
display: block;
}
.share_msg textarea {
outline: none;
line-height: 1.5;
display: block;
/* width: 470px;*/
width: 655px;
height: 140px;
background-color: #FFFFFF;
border: 1px solid #ccc;
padding: 10px;
color: #535e5b;
-webkit-appearance: none;
}
.frd_share_box .btn {
margin-top: 0;
}
/* MEMBER SECTION
================================================== */
.general_mark .back {
position: relative;
top: 10px;
color: #9b9b9b;
text-decoration: underline;
text-transform: uppercase;
cursor: pointer;
}
.general_mark .back:before {
content: "\f0d9";
display: inline-block;
margin-right: 4px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.general_box {
position: relative;
display: inline-block;
border: 1px solid #ccc;
height: 32px;
line-height: 32px;
padding: 0 10px;
margin: 10px 10px 10px 0;
}
.general_box .fa {
color: #b3b3b3;
font-size: 18px;
}
.icn_checkbox {
position: relative;
display: inline-block;
width: 16px;
height: 16px;
top: 3px;
left: -1px;
background: #eee;
border: 1px solid #b3b3b3;
cursor: pointer;
}
.icn_checkbox.selected {
background: #c40000;
color: #fff;
border: 1px solid #c40000;
}
.icn_checkbox.selected:before {
content: "\f00c";
position: absolute;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.boxed_group {
position: relative;
display: block;
border: 1px solid #ccc;
padding: 20px 20px;
margin-bottom: 30px;
}
/* left content */
.mb_main_nav {
position: relative;
display: block;
width: 300px;
padding: 0;
margin: 10px 48px 40px 0;
background: #fff;
border: 1px solid #ccc;
}
.mb_point_box {
font-size: 16px;
color: #535e5b;
line-height: 22px;
margin: 10px 20px 5px 20px;
}
.mb_point_box:after {
content: " ";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.mb_point_box .display_value {
font-size: 28px;
color: #1a3363;
}
.mb_point_box small {
font-size: 12px;
}
.mb_point_box .more {
color: #10386a;
font-size: 14px;
line-height: 34px;
text-align: right;
text-decoration: underline;
text-transform: uppercase;
cursor: pointer;
}
.mb_point_box .more:hover {
color: #0081c9;
}
.mb_point_box .more:before {
content: "\f0da";
display: inline-block;
margin-right: 4px;
font: normal normal normal 14px/1 FontAwesome;
font-size: 16px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
}
.mb_large_avatar {
width: 180px;
height: 180px;
padding: 40px;
margin: 0 20px;
border: 1px solid #ccc;
}
.mb_large_avatar img {
width: 100%;
height: auto;
}
.mb_desc {
color: #808080;
margin: 10px 20px;
line-height: 24px;
}
.mb_desc .mb_name {
font-size: 21px;
color: #1a3363;
margin-bottom: 5px;
}
.mb_desc p img {
position: relative;
top: 5px;
}
/* member menu */
.mb_menu {
display: block;
background: #1a3363;
color: #fff;
padding: 10px 10px;
}
.mb_menu h3 {
font-size: 21px;
border: none;
line-height: 32px;
margin: 15px 0;
}
.mb_main_menu {
position: relative;
display: block;
font-size: 14px;
}
.mb_main_menu li {
position: relative;
margin-bottom: 22px;
cursor: pointer;
}
.mb_main_menu li.current a {
position: relative;
display: inline-block;
}
.mb_main_menu li a:hover {
color: #fff;
}
.mb_main_menu li.current a {
font-weight: 700;
}
/* ICON START */
.mb_main_menu li .mb_icn {
position: relative;
display: inline-block;
width: 40px;
height: 22px;
top: 3px;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
}
.mb_main_menu li .mb_icn.mb_icn_note {
background-image: url(../images/icn_mb_menu_notifications_3x.png);
}
.mb_main_menu li .mb_icn.mb_icn_cart {
background-image: url(../images/icn_mb_menu_cart_3x.png);
}
.mb_main_menu li .mb_icn.mb_icn_order {
background-image: url(../images/icn_mb_menu_orders_3x.png);
}
.mb_main_menu li .mb_icn.mb_icn_frd {
background-image: url(../images/icn_mb_menu_frd_3x.png);
}
.mb_main_menu li .mb_icn.mb_icn_prf {
background-image: url(../images/icn_mb_menu_profile_3x.png);
}
.mb_main_menu li .mb_icn.mb_icn_logout {
background-image: url(../images/icn_mb_menu_logout_3x.png);
}
.mb_main_menu li .mb_icn.mb_icn_cpn {
background-image: url(../images/icn_mb_menu_coupon_3x.png);
}
/*current*/
.mb_main_menu li.current .mb_icn.mb_icn_note {
background-image: url(../images/icn_mb_menu_notifications_current_3x.png);
}
.mb_main_menu li.current .mb_icn.mb_icn_cart {
background-image: url(../images/icn_mb_menu_cart_current_3x.png);
}
.mb_main_menu li.current .mb_icn.mb_icn_order {
background-image: url(../images/icn_mb_menu_orders_current_3x.png);
}
.mb_main_menu li.current .mb_icn.mb_icn_frd {
background-image: url(../images/icn_mb_menu_frd_current_3x.png);
}
.mb_main_menu li.current .mb_icn.mb_icn_prf {
background-image: url(../images/icn_mb_menu_profile_current_3x.png);
}
.mb_main_menu li.current .mb_icn.mb_icn_cpn {
background-image: url(../images/icn_mb_menu_coupon_current_3x.png);
}
/* right content start */
.mb_container {
position: relative;
display: block;
width: 955px;
margin: 10px 0px 60px auto;
}
.mb_container h5 {
font-weight: 600;
line-height: 40px;
text-transform: uppercase;
margin: -15px auto 15px auto;
border-bottom: 1px solid #ccc;
}
.mb_container .separator_line {
margin: 10px auto;
}
/* profile form contnet */
.mb_container .general_form .edit_avatar {
position: relative;
display: inline-block;
width: 60px;
height: 60px;
border: 1px solid #ccc;
}
.mb_container .edit_avatar img.avatar {
width: 60px;
height: auto;
}
.mb_container .general_form .avatar-upload {
position: relative;
top: -24px;
height: 40px;
}
.mb_container .general_form input[type=file] {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 34px;
line-height: 34px;
margin-left: 0;
padding: 0;
cursor: pointer;
opacity: 0.00001;
filter: Alpha(Opacity=0.001); /*IE7 fix*/
}
.mb_container .general_form dl {
margin: 20px auto;
}
.mb_container .general_form dt, .general_form dd {
}
.mb_container .general_form dt {
width: 320px;
padding-right: 6px;
}
.mb_container.general_form dd {
width: 420px;
}
.general_form .verifyItem {
}
.general_form .verifyItem .vfy_box {
display: inline-block;
position: relative;
height: 22px;
width: 100px;
top: 1px;
margin-left: -120px;
padding: 0 5px;
line-height: 22px;
border-width: 1px;
border-style: solid;
text-align: center;
}
.general_form .verifyItem .vfy_box.success {
background-color: #e5f4db;
border-color: #5aa333;
color: #5aa333;
}
.general_form .verifyItem .vfy_box.unverified {
background-color: #ffeaeb;
border-color: #de5957;
color: #de5957;
}
.general_form .verifyItem .vfy_box.unverified:hover {
text-decoration: underline;
}
.general_form .verifyItem .vfy_box:before {
display: inline-block;
position: relative;
font: normal normal normal 12px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: translate(0, 0);
padding-right: 5px;
margin-left: -5px;
}
.general_form .verifyItem .vfy_box.success:before {
content: "\f00c";
}
.general_form .verifyItem .vfy_box.unverified:before {
content: "\f12a";
}
.mb_container .general_form .form_footer {
padding-top: 20px;
}
/* NOTIVICATIONS */
.mb_container .box_tab {
top: 1px;
z-index: 981;
margin-top: 20px;
}
.mb_container .info_box {
width: 100%;
height: auto;
padding: 0;
border-top: 1px solid #ccc;
}
.mb_container .info_box .general_table {
display: none;
}
.mb_container .info_box .general_table.active {
display: block;
}
/* details */
.general_table .icn_checkbox {
margin-left: 14px;
}
.general_table .avatar_stack {
display: block;
margin: 14px auto;
width: 30px;
height: 30px;
line-height: 30px;
border: 1px solid #ccc;
}
.general_table .highlight .avatar_stack {
border: none;
}
.general_table .avatar_stack img {
width: 100%;
height: auto;
}
.general_table .avatar_name {
display: block;
margin: 0 5px;
}
.general_table .icn_stack {
position: relative;
display: inline-block;
top: 5px;
width: 20px;
height: 20px;
background-size: 100% auto;
background-repeat: no-repeat;
background-position: center;
}
.general_table .msg_tit {
display: inline-block;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.general_table .unread .msg_tit {
color: #000;
font-weight: 700;
}
.general_table li:hover .msg_tit,
.general_table li .msg_tit:hover {
color: #0081c9 !important;
}
.general_table .msg_tit .icn_stack {
background-image: url(../images/icn_stack_msg_3x.png);
}
.general_table .unread .msg_tit .icn_stack,
.general_table .tb_gift_email .icn_stack {
background-image: url(../images/icn_stack_msg_unread_3x.png);
}
.general_table .msg_date {
display: block;
text-align: center;
}
/* NOTIVICATIONS DETAILS */
.msg_dtl_row {
position: relative;
display: block;
padding: 25px 20px;
border-bottom: 1px solid #ccc;
}
.msg_dtl_row .label {
color: #1a3363;
padding-right: 5px;
}
.msg_dtl_row .avatar_name {
font-weight: 600;
}
.msg_dtl_row .msg_date {
position: relative;
top: 2px;
color: #535e5b;
font-size: 14px;
}
.msg_dtl_row .msg_tit {
display: inline-block;
font-weight: 600;
line-height: 21px;
width: 85%;
vertical-align: top;
}
.msg_dtl_row .msg_content_box {
position: relative;
line-height: 24px;
color: #000;
}
.msg_dtl_row .msg_content_box .label {
color: #535e5b;
}
.msg_dtl_row .msg_content {
margin: 20px auto 40px auto;
}
/* share product */
.share_pdt {
position: relative;
display: block;
width: auto;
text-align: right;
}
.share_pdt .grid_item_img {
position: relative;
width: 160px;
height: 120px;
margin-left: 10px;
border: 1px solid #ccc;
z-index: 760;
}
.share_pdt .grid_item_img img {
display: block;
width: 100%;
height: 100%;
margin: 0 auto;
}
.share_pdt .item_info {
position: relative;
height: 90px;
padding: 10px;
top: 5px;
background: #f1edea;
z-index: 750;
}
/* MEMBER FRIENDS PAGE */
.frd_search_block {
}
.mb_container .frd_search {
position: relative;
display: inline-block;
padding: 0 15px;
margin-left: -16px;
background: #f2f2f2;
border: 1px solid #ccc;
}
.mb_container .frd_search input[type="text"] {
height: 30px;
width: 180px;
color: #0081c9;
background: #f2f2f2;
border: none;
}
.mb_container .frd_search .fa {
display: inline-block;
color: #999;
cursor: pointer;
}
.mb_container .frd_search input[type="submit"] {
height: 30px;
width: 30px;
margin-left: -26px;
background: none;
opacity: 0;
-moz-opacity: 0;
-khtml-opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.mb_container .icn_addfrd {
position: relative;
display: inline-block;
top: 5px;
width: 22px;
height: 22px;
background-repeat: no-repeat;
background-position: center;
background-size: 100% 100%;
background-image: url(../images/icn_mb_addfrd_3x.png);
}
/* Friends LIST (wall) */
.frd_gridwall {
position: relative;
display: block;
margin: 30px auto;
}
.frd_list {
position: relative;
display: block;
}
.frd_list .frd_list_item {
position: relative;
display: inline-block;
width: 280px;
margin-bottom: 60px;
}
.frd_list .frd_list_item .fl_avatar_stack {
display: inline-block;
width: 80px;
height: 80px;
margin-right: 8px;
float: left;
border: 1px solid #ccc;
}
.frd_list .frd_list_item .fl_avatar_stack img {
width: 100%;
height: 100%;
}
.frd_list .frd_list_item .fl_name {
display: inline-block;
margin: 10px auto;
font-size: 18px;
font-weight: 600;
line-height: 24px;
color: #1a3363;
width: 180px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.frd_list .frd_list_item .fl_name:hover {
color: #0081c9;
}
/* ORDER HISTORY */
.general_mark.order_mark {
color: #9b9b9b;
font-size: 14px;
}
.general_mark.order_mark .general_box br {
display: none;
}
.general_mark.order_mark b {
font-weight: 600;
}
.order_mark .back {
top: 30px;
}
/* ORDER HISTORY DETAILS */
.order_details_block {
}
.order_details_block .general_table .row.thead {
height: 60px;
padding: 0;
}
.order_details_block .general_table .row {
padding: 15px 0;
min-height: 60px;
height: auto;
}
/* table setting */
.general_table .tb_pdt_thumb {
position: relative;
display: inline-block;
width: 80px;
height: 60px;
border: 1px solid #ccc;
}
.general_table .tb_pdt_thumb img {
width: 100%;
height: 100%;
}
.general_table .tb_pdt_name {
display: inline-block;
color: #10386a;
line-height: 20px;
}
.general_table .tb_pdt_name:hover {
color: #0081c9;
}
.general_table .tb_pdt_points,
.general_table .tb_pdt_u_price,
.general_table .tb_pdt_qty {
color: #383838;
font-weight: 600;
}
/*Discount products list*/
.info_box.discount_list {
border-top: none;
}
.discount_list .general_table .row {
padding: 15px 0;
min-height: 60px;
height: auto;
vertical-align: middle;
}
.discount_list .general_table .row.thead {
display: block !important;
background: #e5e5e5;
color: #535e5b;
height: 40px;
min-height: 40px;
line-height: 40px;
padding: 0 0 0 10px;
}
.discount_list .general_table .row .column {
}
.discount_list .general_table .tb_pdt_name {
font-weight: bold;
color: #057db1;
}
.discount_list .general_table .desc {
font-size: 12px;
color: #808080;
font-weight: normal;
}
/*Discount products - chart summapr option list*/
.cart_summary_block .info_box.discount_opt_list {
border-top: none;
}
.discount_opt_list .row.thead {
background: #e5f5f9;
color: #057db1;
font-size: 16px;
font-weight: bold;
height: 40px;
line-height: 40px;
padding: 0 10px 0 10px;
}
.discount_opt_list .row {
height: auto;
padding: 10px 0 20px 0;
line-height: inherit;
}
.discount_opt_list .row .column {
height: auto;
line-height: inherit;
}
.discount_opt_list .dis_tit {
display: block;
font-size: 16px;
padding: 10px;
}
.discount_opt_list .thumb {
display: inline-block;
width: 80px;
height: 60px;
margin: 10px;
border: 1px solid #ccc;
}
.discount_opt_list .thumb img {
width: 100%;
height: auto;
}
.discount_opt_list .info {
margin: 10px 10px 10px 0;
}
.discount_opt_list .info .tit {
display: block;
padding: 5px 0;
font-size: 14px;
font-weight: bold;
}
.discount_opt_list .info .desc {
color: #808080;
line-height: 18px;
}
.column.dis_price {
padding: 15px 0;
}
.dis_price .tb_pdt_u_price {
/* color: #008bb0; */
padding-right: 72px;
}
/* discount selector ============== */
/*button*/
.discount_opt_list .btn {
text-align: center;
font-size: 12px;
padding: 0 5px;
height: 28px;
line-height: 28px;
margin: 0 auto 0 auto;
width: 80px;
}
.discount_opt_list .btn.grn_btn {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.discount_opt_list .btn.grn_btn:hover {
background: #667a14;
}
.discount_opt_list .btn img {
position: relative;
display: inline-block;
top: 5px;
width: 20px;
height: 20px;
}
/* selector box */
.dis_selector {
position: relative;
display: inline-block;
height: 16px;
width: 360px;
padding: 6px 10px 4px 10px;
margin-left: 10px;
cursor: pointer;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
}
.dis_selector .btn.grn_btn,
.dis_selector .btn.grn_btn:hover {
position: absolute;
right: -95px;
top: -1px;
}
.dis_selector i.fa {
position: absolute;
right: 10px;
font-size: 18px;
color: #666;
}
.dis_selector ul {
position: absolute;
display: none;
left: -1px;
top: 27px;
width: 90%;
max-height: 320px;
overflow: auto;
padding: 4px 10px;
color: #9b9b9b;
background: #fff;
border: 1px solid #ccc;
border-top: none;
z-index: 860;
}
.dis_selector ul li {
display: block;
text-align: center;
padding: 6px 10px;
cursor: pointer;
background: url(../images/bg_dot_line_wt.png) repeat-x left bottom;
}
.dis_selector li:hover {
color: #057db2;
}
.dis_selector li.selected {
color: #fff;
background-color: #1a3363;
}
.dis_selector li:last-child {
background-image: none;
}
/* Deliver & SUmmary INFO BOX */
.deliver_info {
display: block;
height: auto;
padding: 0;
margin: 10px auto 30px auto;
}
.deliver_info h6 {
padding: 5px 10px;
background: #e5f5f9;
color: #057db1;
}
.deliver_info h4 {
color: #383838;
font-size: 18px;
font-weight: bold;
padding: 10px 10px 0 10px;
}
.deliver_info p {
line-height: 24px;
padding: 0 10px 10px 10px;
}
/* Alert Box */
.alert_box {
width: 500px;
height: auto;
margin: 30px 30px 30px 0;
border: none !important;
color: #535e5b;
}
.alert_box h6 {
font-size: 14px;
}
.alert_box p {
font-size: 12px;
line-height: 16px;
margin-left: 18px;
}
.alert_box .fa-exclamation-circle {
color: #3fa9f5;
font-size: 16px;
}
.summary_section {
position: relative;
display: block;
width: 380px;
padding: 10px;
height: auto;
margin: 30px auto 30px auto;
background: url(../images/bg_pattern_2.png) repeat center;
border: 1px solid #ccc;
}
.summary_section .summary_row {
display: block;
margin: 10px 0;
}
.summary_section .summary_column {
display: inline-block;
width: 150px;
}
.summary_section .separator_line {
margin: 20px 0;
}
.summary_section .bigger {
font-size: 18px;
font-weight: 600;
}
/* SPECIAL GIFTS */
.general_table .tb_gift_email {
position: relative;
display: inline-block;
line-height: 18px;
margin-left: 4px;
vertical-align: top;
}
.general_table .tb_gift_email .tbk {
position: relative;
top: 5px;
font-weight: 600;
display: inline-block;
width: 146px;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.general_table .tb_gift_msg {
/*position: relative;
display: inline-block;
line-height: 18px;
margin-left: 28px;
vertical-align: top;
margin-top: -30px;
height: 36px;
overflow: hidden;*/
height: 36px;
overflow: hidden;
}
.summary_section.gift_summary {
min-height: 35px;
}
/* CHECKOUT SECTION
================================================== */
/* CART SUMMARY & PAYMENT TABLE */
.cart_summary_block {
margin-bottom: 50px;
}
.cart_summary_block .info_box {
width: 100%;
height: auto;
padding: 0;
border-top: 1px solid #ccc;
}
.cart_summary_block .tb_pdt_qty_form {
position: relative;
display: inline-block;
}
.tb_pdt_qty_form .option_qty .qty_text {
width: 60px;
height: 30px;
margin: 0 -5px;
}
.tb_pdt_qty_form .option_qty .qty_reduce,
.tb_pdt_qty_form .option_qty .qty_increase {
width: 30px;
height: 30px;
margin: 0;
line-height: 30px;
}
/* .cart_summary_block .tb_pdt_name,
.cart_summary_block .tb_pdt_u_price,
.cart_summary_block .tb_pdt_ttl_price {
color: #0081c9;
} */
.cart_summary_block .info_box .fa-times {
color: #b3b3b3;
font-size: 16px;
}
.cart_summary_block .info_box .fa-times:hover {
color: #cf3918;
cursor: pointer;
}
/* CHECKOUT STEP NAV */
.checkout_step {
position: absolute;
left: 50%;
transform: translate(-50%, 0);
display: inline-block;
margin-bottom: 25px;
margin-top: -25px;
font-size: 12px;
color: #9a9a9a;
background: url(../images/bg_step_dot.png) repeat-x center;
}
.step_box {
position: relative;
display: inline-block;
width: 50px;
height: 50px;
margin-left: 32px;
background-image: url(../images/bg_step_circle_3x.png);
background-size: 100% 100%;
background-position: center top;
}
.step_box:first-child {
margin-left: 0;
left: -1px;
}
.step_box.active {
background-image: url(../images/bg_step_circle_active_3x.png);
}
.step_box .step_circle,
.step_box .step_name {
position: absolute;
display: inline-block;
text-align: center;
}
.step_box .step_circle {
top: 13px;
width: 50px;
font-size: 24px;
font-weight: 600;
}
.step_box .step_name {
bottom: -20px;
width: 100px;
margin-left: -25px;
}
.step_box.active .step_circle {
color: #fff;
}
.step_box.active .step_name {
color: #383838;
font-weight: 600;
}
.mark_box {
position: relative;
display: block;
width: 380px;
padding: 15px;
margin: 30px 30px 30px 0;
font-size: 18px;
font-weight: bold;
border: 1px solid #ccc;
}
.mark_box small {
font-size: 16px;
font-weight: normal;
}
.coupon_box {
position: relative;
display: block;
width: 380px;
padding: 20px;
margin: 30px 30px 30px 0;
border: 1px solid #ccc;
}
.coupon_box h6 {
line-height: 24px;
}
.coupon_box .mark {
font-size: 18px;
font-weight: bold;
margin: 0 auto 0 auto;
}
.coupon_box .mark small {
font-size: 16px;
font-weight: normal;
}
.coupon_form {
position: relative;
display: block;
}
.coupon_form input[type=text] {
display: block;
height: 14px;
width: 338px;
padding: 8px 10px;
margin: 10px 0;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
}
.coupon_form .sample_btn {
padding: 0 20px;
}
/* CHECKOUT BUTTONS */
.summaryBtns {
position: relative;
display: inline-block;
float: left;
width: 190px;
margin: 30px 50px 30px 0;
}
.summaryBtns .sample_btn {
width: 100%;
padding: 0;
margin-bottom: 30px;
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.summaryBtns .sample_btn,
.summaryBtns .sample_btn:hover {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.summaryBtns .sample_btn.bu_btn:hover {
background: #00a650;
}
/* PAYMENT */
.cart_summary_block .general_table .tb_gift_email .tbk {
width: 200px;
}
/* SPECIAL GIFT */
.cart_summary_block .box_txt,
.mb_container .box_txt {
position: relative;
display: inline-block;
height: auto;
line-height: 20px;
padding: 10px 10px;
border: 1px solid #ccc;
margin: -15px 10px 10px 0;
}
.cart_summary_block .info_box.sp_gifts_block {
padding-bottom: 40px;
}
.info_box.sp_gifts_block .mark_info {
display: block;
position: relative;
margin: 30px 40px 0 40px;
padding: 10px 10px;
background: #e5f5f9;
font-size: 16px;
font-weight: bold;
}
.sp_item_box {
position: relative;
display: block;
height: auto;
margin: 30px 40px 0 40px;
border: 1px solid #ccc;
}
.sp_item_box .sp_column {
position: relative;
display: block;
float: left;
height: 230px;
}
.sp_item_box .sp_column.cl_s {
width: 230px;
margin-right: 24px;
}
.sp_item_box .sp_column.cl_m {
width: 350px;
}
.sp_item_box .sp_column.cl_l {
width: 520px;
height: 290px;
padding: 25px;
background: url(../images/bg_pattern_1.png) repeat center;
}
.sp_item_box .sp_thumb {
position: relative;
display: block;
width: 230px;
height: 168px;
margin: 0 auto 10px auto;
}
.sp_item_box .sp_name {
display: block;
text-align: center;
margin: 0 auto;
color: #10386a;
}
.sp_item_box .sp_name:hover {
color: #0081c9;
}
.sp_item_box .sp_price {
display: block;
text-align: center;
margin: 10px auto;
}
.sp_item_box .sp_price .original_price {
font-size: 14px;
}
.sp_item_box .sp_price .sp_u_price {
font-size: 18px;
font-weight: 600;
}
.sp_item_box .small {
font-size: 14px;
color: #535e5b;
line-height: 60px;
}
.sp_item_box b {
font-weight: 600;
}
/*sp gift form*/
.sp_form {
position: relative;
display: block;
}
.sp_item_box .btn {
text-align: center;
font-size: 12px;
padding: 0 10px;
margin: 0 auto 0 auto;
}
.sp_item_box .btn img {
position: relative;
display: inline-block;
top: 5px;
width: 20px;
height: 20px;
}
.sp_form label {
display: inline-block;
width: 32px;
}
.sp_form input[type=text] {
display: inline-block;
height: 14px;
width: 450px;
padding: 8px 10px;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
}
.sp_form textarea {
display: block;
height: 200px;
width: 488px;
padding: 8px 10px;
margin: 10px auto;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
overflow: auto;
}
/* for selected sp item */
.sp_item_box.selected:before {
content: "\f00c";
position: absolute;
left: 0;
display: inline-block;
color: #fff;
background: #c40000;
font: normal normal normal 14px/1 FontAwesome;
font-size: 21px;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.sp_item_box.selected .btn.grn_btn,
.sp_item_box.selected .btn.grn_btn:hover {
background: #7d882a;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sp_item_box .btn.gary_btn {
color: #fff;
background: #9a9a9a;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.sp_item_box .btn.gary_btn:hover {
background: #808080;
}
/* dropdown list */
.sp_item_box .selector {
position: relative;
display: inline-block;
height: 14px;
width: 80%;
padding: 8px 10px;
margin-right: 15px;
cursor: pointer;
background-color: #fff;
border: 1px solid #bdbcba;
outline: none;
font-size: 14px;
}
.sp_item_box .selector i.fa {
position: absolute;
right: 15px;
font-size: 18px;
color: #666;
}
.sp_item_box .selector ul {
position: absolute !important;
display: none;
left: -1px;
top: 27px;
width: 90%;
max-height: 320px;
overflow: auto;
padding: 4px 10px;
position: relative;
color: #9b9b9b;
background: #fff;
border: 1px solid #ccc;
border-top: none;
z-index: 660;
}
.sp_item_box .selector ul li {
display: block;
text-align: center;
padding: 6px 10px;
cursor: pointer;
background: url(../images/bg_dot_line_wt.png) repeat-x left bottom;
}
.sp_item_box .selector li:hover {
color: #057db2;
}
.sp_item_box .selector li.selected {
color: #fff;
background-color: #1a3363;
}
.sp_item_box .selector li:last-child {
background-image: none;
}
/* pordocut selector */
.sp_item_box .pdt_box {
float: left;
border-right: 1px solid #ccc;
height: 290px;
padding: 25px;
}
.sp_item_box .pdt_selector {
display: block;
position: relative;
background: #FFDDDD;
margin: 0 0 20px 0;
}
.pdt_selector .selector {
margin: 0;
display: block;
width: auto;
}
/* cart summary - extra items
================================================== */
.extra_block {
display: block;
position: relative;
margin-top: 30px;
border: 1px solid #ccc;
}
.extra_block h3 {
font-size: 16px;
height: 30px;
line-height: 30px;
padding: 10px;
background: #e5f5f9;
font-weight: bold;
}
.extra_block .thead {
margin: 0 20px;
padding: 5px 0;
color: #9a9a9a;
font-size: 14px;
border-bottom: 1px solid #ccc;
}
.extra_block .desc,
.extra_block .value {
display: inline-block;
}
.extra_block .desc {
width: 68%;
}
.extra_block .value {
width: 25%;
margin-right: 3%;
text-align: right;
}
.extra_block .extra_list {
position: relative;
display: block;
max-height: 150px;
margin: 0 20px;
overflow: auto;
}
.extra_block .extra_list .row {
padding: 16px 0;
font-size: 16px;
color: #383838;
border-bottom: 1px dashed #ccc;
}
.extra_block .extra_list .row:last-child {
border-bottom: none;
}
.extra_block .extra_list .row .icn_checkbox {
left: 0;
}
.extra_block .extra_list .row.icn_checkbox.selected {
background: #c40000;
color: #fff;
border: 1px solid #c40000;
}
.extra_block .extra_list .row.icn_checkbox.selected :before {
content: "\f00c";
position: absolute;
display: inline-block;
font: normal normal normal 14px/1 FontAwesome;
font-size: inherit;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Redeem
================================================== */
/* Rdeem List */
.redeem_list {
position: relative;
display: block;
}
.redeem_list .sp_item_box {
margin: 10px auto 20px auto;
}
.redeem_list .sp_item_box .sp_column.cl_m {
width: 625px;
height: 240px;
padding: 20px 25px;
border-right: none;
}
.redeem_list .sp_thumb {
margin: 25px auto 10px auto
}
.redeem_list .sp_item_box .sp_price {
text-align: left;
padding-bottom: 5px;
margin-bottom: 10px;
border-bottom: 1px solid #ccc;
}
.redeem_list .redeem_btn,
.redeem_list .redeem_btn:hover {
position: absolute;
right: 25px;
bottom: 20px;
top: inherit;
}
/* REDEEM PAYMENT */
.redeem_details_block .general_table .row {
padding: 15px 0;
}
.redeem_details_block .general_table .row.thead {
padding: 0 0;
}
/* CHECKOUT DELIVERY
================================================== */
.general_block {
display: block;
position: relative;
width: auto;
height: auto;
margin: 50px auto;
border: 1px solid #ccc;
}
.general_block h5 {
font-weight: 600;
line-height: 40px;
text-transform: uppercase;
border-bottom: 1px solid #ccc;
margin: 0 0 20px 0;
}
.general_block .general_form {
margin: 10px 20px 20px 20px;
}
.general_block .general_form fieldset {
display: block;
position: relative;
padding: 0;
margin: 0 0 40px 0;
}
.general_block .general_form dl {
margin: 20px auto;
position: relative;
}
.general_block .general_form dt {
position: relative;
width: 420px;
padding-right: 6px;
}
.general_block .general_form dd {
position: relative;
}
.general_block .general_form input[type=text],
.general_block .general_form input[type=password],
.general_block .general_form textarea
{
width: 620px;
}
.general_block .general_form .selector.small {
width: 80px;
}
.general_block .general_form .selector.large {
width: 620px;
}
.general_block .general_form .selector.large .display_value {
width: 580px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
display: inline-block;
}
.general_block .general_form .selector.large ul {
width: 620px;
}
/*date picker*/
.general_form .datepicker dd input[type=text].date {
width: 120px;
}
.general_form .datepicker dd .date_icn {
position: absolute;
left: 115px;
top: 10px;
}
/*dummy box*/
.general_form .datepicker .date_box {
display: none;
position: absolute;
width: 200px;
padding: 10px;
height: auto;
left: 0;
top: 35px;
border: 1px solid #ccc;
background: #FFF;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
z-index: 50;
}
.info_box.general_block .separator_line {
margin: 10px auto;
}
.general_block .alert_box {
width: auto;
margin: 20px auto 0 auto;
}
/* Massage Box
================================================== */
.msg_box {
position: relative;
display: block;
text-align: center;
margin: 20px auto;
}
/*msg size*/
.msg_box.large {
font-size: 18px;
font-weight: 600;
line-height: 30px;
padding: 15px;
}
/*msg color*/
.msg_box.success {
color: #00ae41;
border: 1px solid #00ae41;
background: #e6f5dc;
}
/* payment thanks */
.msg_thx {
display: block;
position: relative;
margin: 30px;
}
.msg_thx img.state {
display: inline-block;
position: relative;
width: 120px;
height: auto;
margin: 20px;
}
.msg_thx h6 {
font-size: 24px;
line-height: 30px;
}
.msg_thx p {
font-size: 18px;
line-height: 24px;
padding: 10px 0;
}
/* revised Item
================================================== */
.txt_box {
display: block;
position: relative;
margin: 20px auto;
border: 1px solid #ccc;
}
.txt_box.half_box {
width: 49%;
}
/* Login
================================================== */
.bg_line {
background: url(../images/bg_pattern_2.png) repeat center;
}
.msg_general {
display: block;
position: relative;
margin: 20px;
}
.msg_general h5 {
display: block;
font-size: 18px;
line-height: 30px;
border-bottom: 1px solid #ccc;
}
.msg_general h6 {
font-size: 16px;
font-weight: 600;
line-height: 24px;
}
.msg_general p {
margin: 10px auto;
line-height: 18px;
font-size: 14px;
}
.msg_general .login_options {
font-size: 14px;
}
.msg_general .login_options .login_form_label {
margin-right: 20px;
}
/*login*/
.txt_box .msg_alert {
display: block;
}
.txt_box .login_form input[type=text],
.txt_box .login_form input[type=email],
.txt_box .login_form input[type=password] {
width: 44%;
padding: 10px 2%;
}
/* Register
================================================== */
.reg_tit {
position: relative;
}
.reg_tit p {
font-size: 14px;
text-transform: none;
}
.reg_tit .fl {
position: relative;
top: 5px;
}
.general_block .general_form.reg_form {
margin-bottom: 30px;
}
.reg_form .form_footer .btn {
margin-left: 15px;
}
/* Verify
================================================== */
.general_block .general_form.verify_form {
margin: 30px 20px 20px 20px;
}
.general_form.verify_form h6 {
line-height: 24px;
}
.general_form.verify_form label {
margin-right: 5px;
}
.general_form.verify_form input.small {
width: 120px !important;
margin: 10px 5px 10px 5px;
}
.general_form.verify_form .btn.grn_btn {
margin: 6px 0 10px 5px;
}
/* SEARCH TOP - 07/07/2015
================================================== */
#search_top {
position: relative;
display: block;
}
#search_top .icn_search {
position: relative;
display: block;
width: 32px;
height: 32px;
margin: 25px auto 0 auto;
background: #fff;
border: 1px solid #1a3363;
cursor: pointer;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
z-index: 995;
}
#search_top .icn_search img {
width: 32px;
height: 32px;
}
#search_top .sch_wrapper {
display: none;
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background: url('../images/bg_overly.png') repeat center;
overflow: auto;
z-index: 9999;
}
#search_top .sch_wrapper .search_bar {
display: block;
position: relative;
width: 560px;
padding-right: 40px;
margin: 120px auto 10px auto;
border-bottom: 1px solid #f2f2f2;
}
#search_top .sch_wrapper .txt_search {
display: block;
outline: none;
width: 100%;
height: 60px;
margin: 0 auto;
padding-right: 40px;
color: #f2f2f2!important;
font-size: 24px;
line-height: 70px;
background: transparent!important;
box-shadow: none;
-webkit-appearance: none;
}
#search_top .sch_wrapper .schBtn {
display: block;
position: absolute;
bottom: 5px;
right: 0;
width: 40px;
height: 40px;
background-color: transparent;
outline: none;
border: none;
padding: 0;
}
#search_top .sch_wrapper .schBtn img {
display: block;
width: 100%;
height: auto;
}
#search_top .sch_wrapper .schClose {
display: block;
position: relative;
width: 100%;
min-height: 50px;
margin-top: 20px;
cursor: pointer;
}
#search_top .sch_wrapper .schClose img {
display: block;
width: 50px;
height: auto;
margin: auto;
cursor: pointer;
}
/* SEARCH RESULTS - 07/07/2015
================================================== */
.results_block {
display: block;
position: relative;
width: 90%;
margin: 30px auto;
}
.results_block .result_list {
display: block;
position: relative;
padding: 10px 0 20px 0;
margin: 10px auto 20px auto;
line-height: 18px;
border-bottom: 1px dashed #ccc;
}
.results_block .result_list dd {
font-size: 16px;
font-weight: bold;
color: #002e6c;
line-height: 24px;
}
.results_block .result_list a:hover {
text-decoration: underline;
}
/* 404
================================================== */
.error_404_block {
position: relative;
display: block;
margin: 50px auto 100px auto;
text-align: center;
}
.img_404 {
margin: auto;
width: 50%;
height: auto;
display: block;
}
.error_404_block h2 {
font-size: 36px;
font-weight: 800;
}
.error_404_block {
font-size: 16px;
line-height: 28px;
padding: 10px 30px;
}
/******************************************************
new added by kelvin for new and override
******************************************************/
/*** menu ***/
.tier0 {
max-width: none;
}
/*** end of menu ***/
/*** check out ***/
.dis_selector i.fa{
top: 5px;
}
.dis_selector{
display: block;
margin-bottom: 10px;
height: auto;
background-color: inherit;
border: none;
padding: 0
}
.dis_selector > div:first-child {
border: 1px solid #bdbcba;
background-color: #fff;
height: 16px;
padding: 6px 10px 4px 10px;
cursor: pointer;
}
.dis_selector ul{
left: 0;
}
.blue_border {
border: 1px solid #002e6c;
}
/*** end of check out ***/
/*** member info left ***/
.mb_email {
display: table;
}
.mb_email_icon {
display: table-cell;
vertical-align: top;
}
.mb_email_content {
/* width: 255px;
word-wrap: break-word;
display: inline-block;
word-break: break-all;*/
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/*** end of member info left ***/
/*** product catalog ***/
.flag_cric {
display: block;
position: absolute;
width: 60px;
height: 60px;
top: -15px;
right: -15px;
z-index: 800;
}
/*** end of product catalog ***/
/*** product detail ***/
.pdt_img_box .display_img{
text-align: center;
}
.pdt_img_list .item{
text-align: center;
}
.product_color_active {
border: 1px solid #666666;
}
.pd_option_selected{
border: 1px solid #002e6c;
background-color: #002e6c;
color: #ffffff;
height: 34px;
}
.product_size, .product_color, .product_topper{
cursor: pointer;
text-align: center;
}
.disable_product_option{
background-color: #ccc;
position: relative;
top: 0;
left: 0;
width: 37px;
height: 34px;
opacity: 0.7;
cursor: default
}
/*** end of product detail ***/
/*** confirm order ***/
.general_table .tb_gift_msg{
width: 290px;
}
/*** end of confirm order ***/
/*** faq ***/
.faq_question, .faq_answer {
padding: 5px;
}
.faq_question .css_td, .faq_answer .css_td {
padding-right: 5px; line-height: 180%;
}
.faq_answer {
margin-bottom: 20px;
}
/*** end of faq ***/
/*** notification ***/
#notification_container input[type=checkbox].css-checkbox {
position: absolute;
z-index: -1000;
left: -1000px;
overflow: hidden;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
padding: 0;
border: 0;
}
#notification_container input[type=checkbox].css-checkbox + label.css-label {
padding-left: 30px;
height: 18px;
display: inline-block;
line-height: 18px;
background-repeat: no-repeat;
background-position: 0 0;
font-size: 25px;
vertical-align: middle;
cursor: pointer;
margin-top: -3px;
}
#notification_container input[type=checkbox].css-checkbox:checked + label.css-label {
background-position: 0 -20px;
}
#notification_container label.css-label {
background-image: url(../images/check_box_style.png);
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#notification_container .message {
margin-left: 14px;
}
/*** end of notification ***/
/*** search results ***/
#search_keywords{
cursor: default;
}
/*** end of search results ***/
/*** my coupon ***/
/*** end of my coupon ***/
/*** common css ***/
.pointer{
cursor: pointer;
}
.clearboth{
clear: both;
}
.italic{
font-style: italic;
}
.bold{
font-weight: bold;
}
.underline{
text-decoration: underline;
}
.css_table{
display: table;
}
.css_tr{
display: table-row;
}
.css_td{
display: table-cell;
}
/*** end of common css ***/
/*** special css ***/
#page_content_container ul, #popup ul, .agreement_content ul, #delivery_content ul, .pdt_desc ul, {
display: block;
list-style-type: disc;
padding-left: 40px;
margin: 16px 0;
}
#page_content_container ol, #popup ol, .agreement_content ol, #delivery_content ol, .pdt_desc ol, {
display: block;
list-style-type: decimal;
padding-left: 40px;
margin: 16px 0;
}
.step_box{
cursor: default;
}
.agreement{
text-decoration: underline;
}
#loading {
display: none;
position: fixed;
top:0;
left: 0;
width: 100%;
height: 100%;
background: url('../images/bg_overly.png') repeat center;
overflow: auto;
z-index: 9999;
}
#loading img {
display: block;
position: relative;
margin: 220px auto 10px auto;
}
.marquee_list li:not(:last-child):before {
content: "◆";
padding: 0 5px 0 0;
}
.special_gift_product{
width: 100%; height: 200px; max-height: 200px; overflow-y: scroll;word-wrap: break-word; border: 1px; solid #ccc
}
.special_gift_product table{
width: 100%;
}
.special_gift_product table td{
padding: 5px;
border-bottom: 1px solid #ccc;
vertical-align: middle;
}
/*** end of special css ***/
/* PAGE NAV
================================================== */
.page_nav {
position: relative;
margin: 10px auto;
}
.pages {
display: block;
position: relative;
right: 2px;
margin-bottom: 6px;
clear: both;
height: 45px;
line-height: 45px;
text-align: center
}
.pages li {
display: inline;
background: #fff;
padding: 4px 8px;
margin: 0 2px;
font-size: 16px;
color: #999;
cursor: pointer;
border: 1px solid #999;
}
.pages li:hover, .pages li.pgCurrent {
color: #363636 !important;
text-decoration: underline;
}
.pages li.pgCurrent {
border-color: #363636;
}
.pages li.pgEmpty {
color: #D1D1D1 !important;
border-color: #D1D1D1;
}
/* third level menu */
.third_menu_container{
position: relative; display: none;
}
.third_menu{
/* margin: -45px 0 0 130px !important;*/
position: absolute;
left: 130px;
top: -25px;
border: 1px solid #b0b0b2;
background: url(../images/bg_pattern_1.png) #fff repeat center;
}
.third_menu li{
/* background-color: #ffffff;*/
}
.editor_table{
display: table;
}
.editor_tr{
display: table-row;
}
.editor_td{
display: table-cell;
}
.store_finder_head_tr{
padding: 10px; color: #fff; background-color: #1a3363;
}
.store_finder_td {
padding: 10px; color: #000;
border-bottom: 1px solid #000;
}
.new_pdt_desc iframe, .new_pdt_desc img{
max-width: 100%;
}
img[src="images/blank.gif"] {
background: url("../images/ajax.gif") no-repeat scroll center center #ffffff;
width: 100%;
}
.pdt_price_h1 {
font-size: 32px;
font-weight: 700;
}
.catagory_product_name {
font-size: 18px;
font-weight: 600;
color: #10386a;
text-align: center;
margin: 0 10px 10px 10px;
line-height: 22px;
}
h1.main_tit {
background: url(../images/bg_main_tit_3x.png) no-repeat center bottom;
background-size: 270px 18px;
padding-bottom: 6px;
text-align: center;
}
/*.mob_menu_level_2_ul:after{
content: " [＋] ";
}*/
.mob_menu_level_2 a{
font-size: 14px !important;
}
.mob_menu_level_2{
display: none !important;
background: #004E7F !important;
}
.mob_menu_level_2 a:before{
/*content: " - ";*/
}
/*.mob_menu_level_3_ul:after{
content: " [＋] ";
}*/
.mob_menu_level_3 a{
font-size: 13px !important;;
}
.mob_menu_level_3{
display: none !important;
background: #0676A4 !important;
}
.mob_menu_level_3 a:before{
/*content: " -- ";*/
}
.screen .inner ul li{
text-align: center;
}
.screen .inner ul li a{
width: auto;
}
.screen .main_menu{
max-height: 400px;
overflow-y: scroll;
overflow-x: hidden;
}
#mob_menu{
position: relative;
z-index: 9999;
}
#close_mobile_menu{
position: relative;
right: -200px;
height: 35px;
width: 40px;
background: #1a3363;
color: #fff;
font-size: 25px;
line-height: 35px;
cursor: pointer;
}
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}
.discount_opt_list .thumb img{
height:100%;
}