/* HEADER NAV STYLE */
.megamenu-dropdown {
	
	background-color: #fff; /* horo submenu container background */
	border: 1px solid #ddd; /* horo submenu container border*/
}
#vp_welcomeboxsquare .toprightsection:first-child {
	border-color: inherit; /* mid top right border ------- */
}
/*FOR TOP BAR LEFT SIDE HEADER */
#vp_topheader .left-topnav.nav > li.dropdown > a { padding-top: 10px; }
/*FOR TOP BAR LEFT SIDE HEADER */
#vp_topheader #topright_menu .navbar-nav li > a { padding-top: 10px ;} 

/* MOBILE HEADER */
.mobile-header {
	background: linear-gradient(to bottom, #eee 0px, #dbdbdb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    min-height: 30px;
    padding: 0px;
	background: -webkit-linear-gradient(#dcdcdc, #ececec); /* For Safari 5.1 to 6.0 */
	background: -o-linear-gradient(#dcdcdc, #ececec); /* For Opera 11.1 to 12.0 */
	background: -moz-linear-gradient(#dcdcdc, #ececec); /* For Firefox 3.6 to 15 */
	background: linear-gradient(#dcdcdc, #ececec); /* Standard syntax */
}
/* MOBILE LOGO CONTAINER STYLE */
.mobile-header.container #vp_logo, .mobile-header.container .vp_logo { 
	background: #eee; margin-top: 0px; padding-top: 10px; padding-bottom: 10px; 
}

/* MOBILE ICON DROPDOWN CONTAINER */
.navigation_dropdown_menu_mobile {
	 position: absolute; width: 100%;
	 z-index: 100;
	 top: 40px; 
	 background-color: #eee;
}

.mobile-header .iconnav > li:hover a, .mobile-header .iconnav > li:hover a:hover { color: #000; }

/* MOBILE SLIDE MENU CONTAINER */
body .mm-menu {
    background-color:#333333 !important;
    color: rgba(255, 255, 255, 0.6) !important;
}

/* NAVIGATION */
/* 
 * 800 2015-05-14. changed by Bryan
 * added classes so that every listing for sidebar will have same hover style as flyout mode of category list
 */
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus, .nav > li > a:hover, .nav > li > a:focus, #flyout1 li:hover, #flyout1 li:focus, .navbar-default .navbar-nav > li > a:hover, .navbar-default .navbar-nav > li > a:focus, .vp_sidebar  li:hover, .vp_sidebar  li:focus, #contentpage ul li:hover  {
	background-color: #f5f5f5;
	color: #262626;
}
.mobile-header #vp_toprighticons .iconnav li .fa {  transition: all .4s ease-in-out; }
.mobile-header #vp_toprighticons .iconnav li .fa:hover, .mobile-header #vp_toprighticons  .iconnav li .fa:hover { transform: scale(1.5); background: none; color: #fff; }
.mobile-header #vp_toprighticons .iconnav li:hover a { background: #000; color: #fff;  }

.megamenu-dropdown a {
    display: block;
    line-height: 1.42857;
    padding: 3px 20px;
    width: 100%;
}
.megamenu-dropdown a:hover, .megamenu-dropdown a:focus {
   background-color: #f5f5f5;
}

/* 
 * 800 2015-05-20. CLASSES STYLE FOR HORO MENU DESKTOP VIEW
 */
 .page_wrapper .fixedmenu .horo_desktop_bar { left: 0px !important;}
 .horo_desktop_bar,  .horo_desktop_bar .megamenu { background: #e7e7e7} /* DESKTOP CLASS HORO BAR FOR DESKTOP 100% WIDTH */
 .page_wrapper .horo_desktop_bar { background: none; }
 .page_wrapper .horo_desktop_bar .megamenu{ background: #ffffff; } /* DESKTOP CLASS HORO BAR FOR HORO INSIDE PAGE_WRAPPER */

/* LOGO */
.mobile-header.container #vp_logo { background: #eee; margin-top: 0px; padding-top: 10px; padding-bottom: 10px; }
/* LOGO */
/* 
 * SLIDER 
 */
.cameraContent .camera_caption > div {
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.2); /* opacity background */
	color: #000; 
 }
/*'800 - 2015.10.12 : Layout: CSS : Slider: Mobile Screen update*/
.cameraSlide img {
 	max-width: 100% !important;
 	margin: auto !important;
 }
/* END OF HEADER NAV STYLE */
/* WIDGETBOX STYLE */
.widget-box {
	border: 1px solid #e7e7e7; /* widgetbox border */
}
.featured-prod-widget {
	border: 1px solid #ddd; /* border for featured product widget */
	margin-top: 10px;
	padding: 5px;
}
.featured-prod-widget h6{
	font-size: 15px; /* featured product header title size */
}
/* style for widget product price */
span.widget-prod-price {
    
    font-size: 1em;
	display: block;
	margin-top: 6px;
}
/* FOR WIDGET TITLE WRAPPER CONTAINER */
.title {
	border-bottom:1px solid #e7e7e7;
	margin-bottom: 10px;
}
/* FOR WIDGET AND CENTER TITLE STYLE */
.title h2, .title h1 {
	/*text-transform: Uppercase;*/
	font-size: 1.3em;
	padding: 0px 5px 5px; 
}

.widget-title { color: inherit; }

/* TITLE WIDGET FOR MOBILE */

/* WIDGET LIST STYLE */
.menulist li a:before, .sidepage li a:before, .sideblogs li:before, .sidenews li a:before, .menulist-style li:before, .sidebarcell ul#accordion li a:before, .sidebarcell ul#flyout1 li:before{
    display: inline-block;
    vertical-align: top;
}
ul.sidepage a, ul.sideblogs a {
	display: inline-block;
	vertical-align: top;
}
 
#flyout1 li a {
    display: inline-block;
    visibility: 1;
    vertical-align: top;
	padding-top:3px;
	padding-bottom:3px;
	/*800 2015.09.11 : adjust the position of flyout link width*/
	width: 100%
}   

/*
* END WIDGETBOX 
*/

/* 
* FOOTER STYLE 
*/
/* FOOTER LETTER SORTING BAR */
.letter-sorting {
    background: none repeat scroll 0 0 rgb(237, 237, 237);
    color: #6b6b6b;
    margin: 10px 0;
    padding: 10px 15px;
    text-align: center;
    text-transform: uppercase;
}
.footer {
    background: none repeat scroll 0 0 rgb(237, 237, 237);
    border-top: 8px solid #ccc;
    clear: both;
    display: block;
    width: 100%;
}
.footer h3{
	font-size: 1.5em;
	line-height: 1.2;
	margin-bottom: 20px;
    text-transform: uppercase;
	color: #6b6b6b;
}
/* 
* END FOOTER STYLE 
*/


/* 
* GENERALS 
*/


/* 
 * 800 2015-05-20. added by bryan
 * added page wrapper container
 */
 #vp_topheader > .navbar { margin-bottom: 0px; }
 .page_wrapper .lowernavgation  { padding-top: 20px; }
 .page_wrapper { width: 100%; max-width: 1200px; margin: auto; background: #fff;} /* WHOLEPAGE CONTAINER  */

/*
 * 800 2015-05-20. added by bryan
 * autofixed horo menu fixed on top 
 */
 .fixedmenu .horo_desktop_bar {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
 }

body {
	background-color: #fff; 
	color: #777;
}

/* CONTAINER SECTIONS */
.sidebarcell, .main-content, .main-product, .main-news, .main-blog, .main-freetext, .main-product, #shopcustomer, 
.vp_topheader_upper /* MID HEADER CONTAINER CLASS */, .megamenu  /* for horo menu */ {
	background-color: #fff;
} 

/* SIDEBAR WRAPPER AND CENTER WRAPPER */
.vp_sidebar, #vp_bodycontent { 
	backaground-color: #fff;
}

.vp_topheader_upper { max-width: 1170px; margin: auto;  }
a {
	color: inherit;
}
a:hover {
	text-decoration: none;
	color: inherit;
}
.caret { /* FOR ARROW BULLET */
	color: #5a5a5a;
	
}
.default-btn-style {
	
	color: #fff;
	padding: 3px;
	max-width: 90px;
	min-height: 27px;
}
.global-font-color, .shadetabs li a, .global-font-color > a  {
	color: #5a5a5a !important;
	  
}
/* for hover */
.global-font-color:hover{
	color: #5a5a5a;
}
/* background of inner div, container or wrapper */
.global-background-color, .scrollToTop_default, .scrollToTop_default:hover, #scrollUp , #vp_bodycontent a.submitbtn  { 
	background-color: #5a5a5a;
	color: #fff;
}
.global-3rd-background-color { background-color: #000;}
.global-2rd-background-color { background-color: #ededed;}

/* LOWER WELCOME BAR */
#vp_welcomeboxstretch .utility-bar {
    background: none repeat scroll 0 0 rgb(237, 237, 237);
    padding: 0 15px;
}

.breadcrumb {
	background-color: #f5f5f5;
	border-radius: 4px;
	margin-bottom: 20px;
	padding: 8px 15px;
}
.main-product .pagination > li { padding-left: 0px; }
.pagination  > li  a {
	background-color: #fff;
	border: 1px solid #ddd;
}

/* FOR BUTTONS */
.submitbtn, #vp_bodycontent a.submitbtn, .default-btn-style,.btn-default {
   background-color: #5a5a5a;
   border: 0px;
   border-radius: 3px;
   color: #fff;
   padding: 5px;
}
.sprite-search {
	font-size: 16px; 
}
.lower-header #vp_welcomeboxsquare .dropdown-menu {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}

/* 
 * 800 2015-05-16.
 * added class for grid view and list view button
 */
/* CATEGORY LISTING PAGE */
.grid-view-btn, .list-view-btn {
	font-size: 17px; 
	padding: 5px 15px; 
}
/*'800 - 2015.10.20 - Layout: Category: Category center boxes should arrange intially*/
.categorysummary .main-product { min-height: 150px;}
/* END OF CATEGORY LISTING PAGE */

/* PRODUCT DETAILED PAGE */
.productsummary.productdesc_table {
	 background: none repeat scroll 0 0 #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    /*2015.09.17 : for product listing gray box, the width will depend on its content*/
    width: 100%;
    max-width: 400px;
}
/* tab container  */
#productexdbottom .tab_content_container, #productexdbottom .shadetabs li a.selected {
	background-color: #f8f6f7; 
}
/* PRODUCT DETAILED PAGE */

/* FOR PRODUCTS THUMBNAIL */
 .nailthumb, .product_thumbnail {
	display: block;
	margin: 0 auto; 
	overflow:hidden;
	/*2015.09.24 : for more flexible rendering of product thumb and prevent stretch*/
	width: auto;
	max-width: 100%;
	height: auto;
	
}
/*2015.09.24 : for more flexible rendering of product thumb and prevent stretch*/
.nailthumb img {
	width: auto;
	height: auto;
}

/* TABLES */
.info_table > tbody > tr > td {
    background: none repeat scroll 0 0 #fff;
    border-bottom: 1px solid #ddd;
    padding: 11px 5px;
}
table.view_cart tr:first-child th.menuhdr {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
/*800 - 2015.09.2 : for gift product table*/
table.gift_product { font-size:  11px; }
table.gift_product tbody tr > th:first-child { width: 32% ;}
.view_cart th, .gift_product th {
    background-color: #fff;
    border-bottom: 1px solid #ddd;
    border-top: 1px solid #ddd;
    color: #888787;
    font-size: 12px;
    padding: 5px;
    vertical-align: middle;
}
.product_sold_table tr .menuhdr { border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; }
.product_sold_table tr:first-child .menuhdr { border: 0px none; }
/* TABLE HEADER */
.view_cart > tbody > tr:first-child th, .view_cart > tbody > tr:first-child th.menuhdr, .product_sold_table > tbody > tr:first-child th.menuhdr, .info_table > tbody > tr:first-child th.menuhdr, .info_table > tbody > tr:first-child th {
	background-color: #5a5a5a;
	color: #fff;
}

/* 
* default input style 
*/
.txtfield, .txtfielddropdown, .searchfield, .txtfieldqty {
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: none;
    padding: 3px 5px 5px;
	margin-bottom: 5px;
}
input[type="text"] {
	border-radius: 4px;
}
.input-group  .input-group-btn{
	border-top-right-radius: 4px;
	border-bottom-right-radius: 4px;
}

/* DROPDOWNS AND FLYOUT */
.megamenu-dropdown , #flyout1 ul {
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
.searchresultwrapper {
	background-color: #fff;
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.176);
}
#welcomeboxstretchresultlist > a {
	line-height: 1.8;
}

/* SCROLLTOP BUTTON */
#scrollUp {
	background-color: #5a5a5a;
	color: #fff;
}
#scrollUp:hover {
	background-color: #000;
	color: #fff;
}
/* SCROLLTOP BUTTON */

/* UL LISTING */
.content-wrapper ul {
	list-style: none;
}
.content-wrapper ul ul ,
.content-wrapper ol ol {
	padding-left: 25px; 
}

.content-wrapper ul li::before,
.content-wrapper ul li::before,
#vp_footer ul li::before,
#vp_footer ol li::before
{
	content: "\f0da"; /* if you want to change the icon you can check the http://fortawesome.github.io/Font-Awesome/icons/  */
    position: absolute;
	margin-left: -15px; 
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    margin-right: 10px;
    text-decoration: inherit;
	font-size: 15px;
}
/*'800 - 2015.10.20 - Layout: Fix for sidebar listing arrow icon alignment*/
ul.sidepage li::before, ul#flyout1 li::before{
	padding-top:3px;
}
.content-wrapper ul li,
.content-wrapper ol li,
#vp_footer ul li,
#vp_footer ol li
 {
	padding-left: 20px;
}

/* HOMEPAGE BLOG LISTING AND NEWS LISTING */
.content-wrapper .text-content-wrapper ul li, 
.content-wrapper .text-content-wrapper ol li 
{
	padding-left: 0px;
}
.content-wrapper .text-content-wrapper ul li::before, 
.content-wrapper .text-content-wrapper ol li::before {
	content: "";
}

.content-wrapper .contentcell .minicart li::before,
.content-wrapper .contentcell .minicart li {
	content: "";
	margin-right: 0px;
	padding-left: 0px;
} 

#producttabs > li { padding-left: 0px ;}

/* PRODUCT LIST VIEW */
.product-list-row-view .product-details .product-price {
	text-align: right;
	margin-bottom: 5px;
	font-weight: bold;
	font-size: 14px;
}
/*2015.09.17 : for product image listing*/
.product-list-row-view .product-details .quantity { margin-top: 5px; margin-right: 5px; }
/*'800 - 2015.10.20 - Layout: Prevent product listing from stretching and still be responsive*/
.product-list-row-view .nailthumb, .product-list-row-view .product_thumbnail{
	width: auto;
	max-width: 100%;
	height: auto;
}
.featured-option {
	width: 100%;
	max-width: 400px;
}
/* END OF PRODUCT LIST VIEW */

/* LISTING CLASS IF YOU WANT LISTING NOT HAVING BULLET STYLED */
.unstyled li{ padding-left: 0px !important; }
.unstyled li::before { content: "" !important; margin-right: 0px !important; padding-left: 0px !important;  } 
.pagination li::before, #producttabs li::before { content: "" !important; margin-right: 0px !important; padding-left: 0px !important;  } 

/* 
 * 2015-06-18. added by bryan
 * fixed the layout issue for tax info under product detailed page (after product discription)
 */
 .productinfolabel { vertical-align: top; font-size: 13px; width: 49%; display: inline-block;}
 .productinfodetails { width: 49%; display: inline-block; font-size: 13px; margin-bottom: 5px; }

/* 
 * 800 2015-07-13 text align classes
 */
.text-left { text-align: left}
.text-right { text-align: right}
.text-center { text-align: center}


/* 800 2015-08-11 FOR FREE TEXT TO HEADER */
.noborder {
    border: 0px none !important;
}
.notitle .title { display: none; }
.navbar-nav .main-freetext { padding: 0px; background-color: transparent;}

/*800 2015.09.16 : fullwidth css*/
.fullwidth .container, .fullwidth .page_wrapper, .fullwidth .vp_topheader_upper { max-width: 100%; }

/*800 2015.10.28 : adjust zoompad container for detailed page and make it 100% width, add margin auto for the main image*/
.zoomPad { width: auto; float: none; position: relative; margin: 0px auto; display: inline-block; }
.zoomPad > img { margin: 10px 0px !important; }

/*'800 - 2016.02.23 : Layout: CSS: Fix quickview for compare page*/
.compare-row {
margin-bottom: 10px;
}
.compare-row .nailthumb .quickview-wrapper> a{
display: block;
margin: auto;
width: 134px !important;
}
/*'800 - 2016.02.23 : Layout: CSS: Fixed tab content elements*/
.tabcontent  table {
width: 100% !important
}
.tabcontent img {
max-width: 100%;
height: auto;
}
.tab_content_container iframe {
max-width: 100%;
} 
.tabcontent.content_padding {
overflow: auto;
}

/* '800 - 2016.03.02 - To replace SVG as checkout indicator */
.checkoutsteps { padding: 8px 15px; }
.checkoutsteps svg {
	width: 30px;
	vertical-align: middle;
	position: relative;
	color: #5A5A5A;
    fill: currentColor;
}
.checkoutsteps .step.active svg {
	color: #0bbbef;
}
.checkoutsteps .step { display: inline-block; vertical-align: middle;}
.checkoutsteps .step span::after {
	content: "------";
  	font-weight: bold;
    display: inline-block;
    margin-top: -10px; 
    vertical-align: middle;
}
.checkoutsteps .step:last-child span::after {
	content: "";
}
/*checkout steps*/

/* '800 - 2016.03.02 - Blogs Listings: To be compatiable with reponsive layout */
.main-blog .container, .main-news .container { padding: 0px; max-width: 1200%; width: 100%; }
.main-blog .featured-prod-widget, .main-news .featured-prod-widget { padding: 5px 15px; }
.main-blog .blog-image, .main-news .news-image { 
    margin: 6px 0px 20px;
}
.main-blog p.desc, .main-news p.desc {
	font-size: 14px;
    line-height: 22px;
    color: #939399;
}
.main-blog  span.date, .main-news span.date {
	display: block;
    font-size: 12px;
    color: #5c5c61;
    margin-bottom: 10px;
}
.main-blog h3, .main-news h3 {
	display: block;
    font-weight: 700;
    font-size: 16px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0px 0px 18px;
    color: #5a5a5a;
}
.blogpage .blog-image, .newspage .new-image {
	max-width: 100%; width: auto; display: block; margin: 10px auto;
}
.blogpage, .newspage {
	font-size: 14px;
    line-height: 22px;
}
/*footer newsletter*/
.footer .newsletterform input { margin-bottom: 0px; }
.footer .newsletterform .form-group { margin-bottom: 8px; }
@media (max-width: 1000px) {
	.footer .newsletterform.form-horizontal .control-label  { text-align: left; }
}

@media (max-width: 1000px){
	.main-product > h1,.main-product > h1:hover, .main-product > h1:focus, .main-content > h2,.main-content > h2:hover,.main-content > h2:focus, .main-content > h3,.main-content > h3:hover,.main-content > h3:focus, .sub-header-container h1,.sub-header-container h1:hover,.sub-header-container h1:focus {
	    background: none repeat scroll 0 0 #777;
		border-bottom: 1px solid #e7e7e7;
		color: #fff;
		font-size: 1.3em;
		margin-bottom: 10px;
		margin-left: -15px;
		margin-right: -15px;
		padding: 0 5px 5px;
		text-transform: uppercase;
		padding: 10px 15px 10px;
		
	}
	
}

@media (max-width: 766px){
	.title { background: #777; }
	#flyout1 { margin-top: -20px;}
	#page .title h2, #page .title h2 > a { color: #fff !important;  }
	
	.main-product > h1.global-font-color, .title > h1 {
		color: #fff !important;
		margin-bottom: 0px; 
	}
	
	/* FOR MODAL TITLE PRODUCT HEADER */
	.modal-content  .title {
		background: #fff;
		color: #777;
	} 
	.modal-content h1, .modal-content >.title > h1, .moda-content > .title > h2 {
		background-color: #fff;
		color: #777 !important; 
	}
	/*800 2015.09.08 - fixed mobile layout issue for listing sidebar*/
	#flyout1, .sidepage,.sidenews, .sideblogs {
		margin-top: -10px;
	}
	
	
	#flyout1 li a, .sidepage li a {
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 15px;
	}
	.sidebarcell, .sidepage {
		margin-bottom: 0px;
		padding-bottom: 0px;
	}
	/* 
	 * 800 2015.09.08.
	 * changed the format issue on the listing for mobile
	 */
	.flyout li, .sidepage li, .sidenews li, .sideblogs li {
		margin-right: -15px;
		margin-left: -20px;
		padding-right: 20px;
		border-bottom: 1px solid #777;
		position: relative;
	}
	#flyout1 li:last-child, .sidepage > li:last-child, .sidenews li:last-child, .sideblogs li:last-child {
		border-bottom: 0px none;
	}
	.sidenews li, .sideblogs li {
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.sidebarcell ul > li::before {
		display: none; 
	}
	.sidepage li::after { margin-top: 10px; }
	.content-wrapper ul.link li::before { content: "";}
	.content-wrapper ul.link li::after {
		content: "\f0da"; /* if you want to change the icon you can check the http://fortawesome.github.io/Font-Awesome/icons/  */
		position: absolute;
		right: 10px; 
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
	}
	.content-wrapper ul.pagination li::after { content: "" }
	.content-wrapper .text-content-wrapper ul li::after { content: ""}
	.sidebarcell ul > li::after {
		content: "\f0da"; /* if you want to change the icon you can check the http://fortawesome.github.io/Font-Awesome/icons/  */
		position: absolute;
		margin-left: -15px; 
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		margin-right: 10px;
		text-decoration: inherit;
		font-size: 15px;
		/*800 2015.09.08 - layout for link listing for news and blog on the sidebars */
		top: 0px;
		right: 0px;
	}
	/*800 2015.09.08 - layout for link listing for news and blog on the sidebars */
	.sidebarcell ul li { position: relative; }
	.sidebarcell .sidenews li::after, .sidebarcell .sideblogs li::after 
	 {
		top: 10px;
	}
	/* 
	 * END OF  listing format for mobile
	 */
}

/* 
* end default input style 
*/

@media (max-width: 766px){
	/* MOBILE LOWER HEADER BAR STYLE */
	.lower-header {
		background: -webkit-linear-gradient(#dcdcdc, #ececec); /* For Safari 5.1 to 6.0 */
		background: -o-linear-gradient(#dcdcdc, #ececec); /* For Opera 11.1 to 12.0 */
		background: -moz-linear-gradient(#dcdcdc, #ececec); /* For Firefox 3.6 to 15 */
		background: linear-gradient(#dcdcdc, #ececec); /* Standard syntax */
		padding: 0px;
	}
	.breadcrumb { margin-bottom: 0px; }
	
}

/*800 2015.09.07 : addtocart page button container alignment for smaller screen*/

@media (min-width: 535px){
	.button-container .md-text-right { text-align: right}
}
/*800 2015.10.10 : for addtocart button display in mobile view*/
@media (max-width: 540px){
	.button-container {
		text-align: center;
	}
	.button-container .col-xs-6 {
		width: 100%;
	}
	.button-container .col-xs-6 input { display: block; margin: 0px auto 7px; min-width: 200px; }

}