@import '/css/master/settings/settings';

/* Variables Specific to Ink and Toner
 * @TODO: Revisit colors with UX
 */
$button-grey: #f2f5f8;	// selected and enabled grey
$disabled-font: #AAA;   // disabled grey font for buttons
$disabled-border: #D5D5D5; //disabled number border
$disabled-arrow:  #BAC3CA;  // animated arrow on disabled state.
$selected-choice: #f7f7f7;  // the highlighted choice that the user picks on dropdown.


//** EVENTUALLY CODE WILL BE REMOVED  FRAMEWORK INTENDED **//
   /* #searchSection { border: 1px solid #ccc; background-color: #f2f5f1; } 
   		    #inkTonerWrapper #searchSection .srch_field { border: 1px solid #ccc; height: 50px; background-color: #e6e4f4; margin: 10px 0px;}

    #inkTonerWrapper #mainContainer { border: 1px solid #ccc; background-color: #f2f5f1; }
     */

    .small_hdr  { font-size: 14px; }
    .top-buffer { padding-top:20px; clear:both; }

    .ad_section  {border: 1px solid #ccc; height: 550px; background-color: #e6e4f4; margin: 10px 0px;}
    .no_margin {margin-left: 0px!important; margin-right: 0px!important;}
    #searchSec_inkTonerV2 .srch_field .search_drop .label_bk {background-color: lighten($gray,50%); padding: 5px;}
	#searchSec_inkTonerV2 .srch_field .search_drop .model_label {margin-left: 5px; font-weight: bold;}
//** EVENTUALLY CODE WILL BE REMOVED  FRAMEWORK INTENDED **//


/* Search Results Section */
/*********************** */
#inkToner {
	.ink_content {
		.products { min-height: 0; }
		.photo_container { width: 100%; }
		.price_container  { margin-top: 1px; }
		.compare_checkbox { display: none; }
		.products .bvs span { font-size: 11px; }
		.products { width: 100%!important; padding-bottom: 8px; }
	}
	
	#skuListV3 {	
		.searchV2 .price { @include font-size(24px); }
		.entryField .qty { @include font-size(11px); }	
		.result_label { @include font-size(16px); margin-bottom: 20px; }
		.price_container .cart .btn { padding: 2px 8px; min-width: 111px; font-size: 12px; }
		.list_view .quantity_box  { width: 180px; }		
		.list_view .searchV2 .photo { height: 0; width: 0; min-height: 135px; }
		.sku_availability_container .availibilityText { @include font-size(11px); }		
	}

}
/****************** */



/*Search Filter Area */
/****************** */
#searchSec_inkTonerV2 {
	
	#inkTonerV2SearchField {   
		color:#72777C;	
		float:left;
		font-size: 16px;
		line-height: 48px;
		padding: 4px 2px 4px 6px;	
		width: 90%; 
		height: 48px;	
		border: 1px solid #cccccc;
		border-right:0;
		border-top-left-radius: 5px;
    	border-bottom-left-radius: 5px;	    
		-webkit-box-shadow: inset 1px 1px 1px 0px #e7e7e7;
		-moz-box-shadow: inset 1px 1px 1px 0px #e7e7e7;
		box-shadow: inset 1px 1px 1px 0px #e7e7e7;
	}
		
	.peudo_inkToner_h1 { padding: 18px 0px; }
	
	.srch_icon {
		background: #fff url(/images/od/v2/header_search_icon_glass.gif) no-repeat 0 4px !important; 
		display: inline-block;
   		height: 26px;
   		width: 20px;
	}
	
	.srch_field { 
		position:relative;
		
		.button_go, .button_go:hover {
			border-top-left-radius: 0;
    		border-bottom-left-radius: 0;    
    		line-height: 1;
    		padding-left: 8px;  
    		height: 48px;		
		} 
		
		input[placeholder] { text-overflow: ellipsis; }
		
		.search_drop {
    		@include box-shadow(0 1px 2px 0px, rgba(0,0,0,0.22));
    		@include border-radius(0px 0px 5px 5px);
    		@include font-size(13px);
    		background-color: $white;
    		width: 502px;
    		max-height: 500px;
    		overflow-x:hidden;
    		overflow-y: auto;  
    		z-index:10;
    		border: 1px solid $grayLight;
    		position: absolute;  
    		padding: inherit;   
    		top: 48px;
    		
    		h3 {margin-bottom: 5px; @include font-size(16px);}
    		h3 span {padding: 6px; margin-top:5px; display: block;}
		}
		
		.cartridge_suggestions, .model_suggestions { width:475px; margin: 10px;	}
		
		.cartridge_suggestions td:hover, 
		.model_suggestions td:hover { background-color: $selected-choice; }
		
		.search_img { width:65px; padding-right: 10px; vertical-align: text-top; }
		
		.cartridge_suggestions .search_description { width: 380px; padding-right: 5px; text-align: top; }
		
		.cartridge_suggestions .search_description, 
		.model_suggestions .search_description { padding-left: 6px; }
		
	}

}
/****************** */




.brand_section img {width: 100%;}
.brand_section {padding-top: 10px;}
.brand_section.seca img { height:auto!important; }


#inkTonerV2searchResults #productView { margin-top: 25px;}
#inkTonerV2searchResults .desc_text { @include font-size(12px); font-weight: 600;  min-height: 56px;}
#inkTonerV2searchResults .sku_id .item_sku { @include font-size(11px); min-height: 15px;  }
#inkTonerV2searchResults .grid_view .descriptionFull {width: 100%;}
#inkTonerV2searchResults .grid_view .bvs { min-height: 20px;  width: 100%  }
#inkTonerV2searchResults .grid_view .photo_container { min-height: 266px; }

#inkTonerV2searchResults .grid_view .secondary {clear:both; width: 100%; }
#inkTonerV2searchResults .grid_view .compare_container {display:none; } 


/* Media Queries for  Position */
.my_office_toolbar_is_visible #searchSec_inkTonerV2 .search_drop { left: -64px; }


/* MD BreakPoint State */
@media (max-width: 1257px) {	
	#searchSec_inkTonerV2 #inkTonerV2SearchField { width: 83%; }
	#searchSec_inkTonerV2 .search_drop { left: 6px;	}

	#inkToner .ink_content .products {width: 100%;}
	#inkToner #skuListV3 .list_view .sku_description_wrapper {
		margin: 0 0 0 10px;
		width: 85%;
	} 
	#inkToner #skuListV3 #productView {
    	margin-top: 30px;
	}		
}

/* LG BreakPoint State */
@media (min-width: 1258px) and (max-width: 1457px) {
  	.my_office_toolbar_is_visible #searchSec_inkTonerV2 .search_drop { left: -213px; }
	#searchSec_inkTonerV2 #inkTonerV2SearchField { width: 85%; }
	#searchSec_inkTonerV2 .search_drop { left: -127px; }	
	
	#inkToner #container.my_office_toolbar_is_visible  #skuListV3 .list_view .sku_description_wrapper {
		margin: 0 0 0 10px;
		width: 82%;
	} 
	
	#inkToner #skuListV3 .list_view .sku_description_wrapper {
		margin: 0 0 0 10px;
		width: 86%;
	} 
	
	#topBrandsContainer .rr_zones .moduleStruct {width: 220px;}
	
}

/* XL BreakPoint State */
@media (min-width: 1458px) and (max-width: 1657px) {
  	.my_office_toolbar_is_visible #searchSec_inkTonerV2 .search_drop { left: -169px; }
  	#searchSec_inkTonerV2 #inkTonerV2SearchField { width: 87%; }
  	#searchSec_inkTonerV2 .search_drop { left: -68px; }
  	
  	#inkToner #container.my_office_toolbar_is_visible  #skuListV3 .list_view .sku_description_wrapper {
		margin: 0 0 0 10px;
		width: 85%;
	} 
	
	#inkToner #skuListV3 .list_view .sku_description_wrapper {
		margin: 0 0 0 10px;
		width: 88%;
	} 
	
	#topBrandsContainer .rr_zones .moduleStruct {width: 236px;}
  	
}

/* XXL BreakPoint State */
@media (min-width: 1658px) {
	.my_office_toolbar_is_visible #searchSec_inkTonerV2 .search_drop { left: -73px; }	
	
	#inkToner #container.my_office_toolbar_is_visible  #skuListV3 .list_view .sku_description_wrapper {
		margin: 0 0 0 10px;
		width: 71%;
	} 
	
	#inkToner #skuListV3 .list_view .sku_description_wrapper { margin: 0 0 0 10px; width: 70%; } 
	
	#topBrandsContainer .rr_zones .moduleStruct {width: 190px;}
	
}
/* ******************* */



#inkToner h1 { margin-bottom: 20px; @include font-size($baseFontSize + 4); }
#inkToner h3, 
#inkToner h4  {margin-bottom: 5px; @include font-size(16px);}
#inkToner h4 {padding-top: 40px;}
#inkToner {
	.seoSection h3 {
		@include font-size(13px);
		padding-top: 40px;
	}
}

#inkToner .rrStyle {
	padding: 0;
	margin-bottom: 5px;
	@include font-size($baseFontSize);
	border-bottom: solid 1px #ddd;
	padding-bottom: .25em;
	font-weight: $fontWeightBold;
}

	.bottomBorder_label { border-bottom: solid 1px #ddd; }
.seoSection {@include font-size(11px); margin-top: 20px;}

/*DropDown Area */
/* *********** */

#dropDownMenus .btn_dropdowns .active:hover,
#dropDownMenus .btn_dropdowns .selected:hover,
#dropDownMenus .btn_dropdowns .enabled:hover,
#searchDropDown .cartridge_suggestions:hover,
#searchDropDown .model_suggestions:hover {cursor: pointer;}


#dropDownMenus .clearUsersLocalStorage {
	@include font-size(10px);
	clear:both;
	color: $blue;
	cursor:pointer;
	padding-top: 5px;
	margin-left: 8px;
	float: left;
}

#dropDownMenus .clearUsersLocalStorage span { @include font-size(9px); font-weight: bold; }

#dropDownMenus #series .data_list,
#dropDownMenus #models .data_list  { width: 96%;}

#dropDownMenus #brands {padding-left: 0px;}
#dropDownMenus .filter_button  ul {  padding-left:0; }
#dropDownMenus .filter_button .label li {
	@include font-size(14px);
	list-style: none;
	list-style-type: none;
	padding:10px;
	display: inline-block;
	list-style: none;
}

#dropDownMenus .filter_button { width: 100%; @include border-radius();}
#dropDownMenus .filter_button:hover{opacity: 0.8;}


/*** BEGIN enabled, selected, and disabled buttons BEGIN ***/
#dropDownMenus .filter_button.active {background-color: $blue; @include box-shadow(0 3px 0 0, darken($blue,10%)); color: $white; border: 1px solid $blue;}
#dropDownMenus .filter_button.enabled,
#dropDownMenus .filter_button.selected {background-color: $button-grey; @include box-shadow(0 3px 0 0, lighten($gray,30%)); color:$black; border:1px solid $grayLight; }
#dropDownMenus .filter_button.enabled .triangle,
#dropDownMenus .filter_button.selected .triangle { color: $blue; }
#dropDownMenus .filter_button.enabled .num_bubble { border:2px solid $blue; line-height: 18px; background-color: $white; color: $blue; }
#dropDownMenus .filter_button.selected .num_bubble { border:2px solid $blue;  color:$white; background: $blue url('/images/od/checkout/white-check.png') 49% 50% no-repeat; border: 1px solid $blue;  }

#dropDownMenus .filter_button.disabled {
	background-color: lighten($gray,50%);
	@include box-shadow(0 3px 0 0, lighten($gray,30%));
	color: $disabled-font;
	border:1px solid $grayLight;
}
#dropDownMenus .filter_button.disabled .num_bubble { border:2px solid $disabled-border; line-height: 18px; @include font-size(12px); color: $disabled-font; }
#dropDownMenus .filter_button.disabled .triangle { color: $disabled-arrow; }

/*** END enabled, selected, and disabled buttons END ***/


#dropDownMenus .filter_button .label li.number { width: 8%; text-align:right; margin-right: 6px; float:left; }
#dropDownMenus .filter_button .label li.name { width: 69%; }
#dropDownMenus .filter_button .label li.arrow { width: 5%; position: relative; float: right; margin:6px 8px 0px 0px; }

#dropDownMenus .data_list {
	@include box-shadow(0 1px 2px 0px, rgba(0,0,0,0.22));
	@include border-radius(0px 0px 5px 5px);
	@include font-size(14px);
	background-color: $white;
	width: 96%;
	z-index:10;
	border: 1px solid $grayLight;
	position: absolute;
	overflow-y: auto;
	overflow-x:hidden;
	max-height: 460px;
}

#dropDownMenus .data_list.hide {display: none;}
#dropDownMenus .data_list ul li {padding: 10px 10px;}
#dropDownMenus .data_list ul li:hover{ background-color: $selected-choice; cursor:pointer;}


/* Additional formatting for arrow icon */
.triangle {
	@include rotate(-#{$degreesDefault});
	@include transition(.3s ease);
	border-right: 3px solid;
	border-bottom: 3px solid;
	position: absolute;
	width: 10px;
	height: 10px;

}
.toggle_triangle {
	@include rotate();
}

.num_bubble {
	@include border-radius(28px);
	@include font-size(11px);
	color:  $blue;
	background:$white;
	width:22px;
	height:22px;
	font-weight: bold;
	line-height:23px;
	text-align:center;
}

.scroll {
	overflow-x: hidden;
	overflow-y: scroll;
	width: 200px;
	height: 100px;
}

#dropDownMenus .data_list::-webkit-scrollbar { -webkit-appearance: none; width: 12px; }
#dropDownMenus .data_list::-webkit-scrollbar-track { background-color: $white; }
#dropDownMenus .data_list::-webkit-scrollbar-thumb { background-color: rgba(188, 188, 188, .6); }


.divider {background-color: $selected-choice; height: 5px; margin-left: 5px; width: 100%;}

.ink_error_msg {display: none; clear: both; padding-top:10px;}


#inkTonerWrapper h2 {padding: 18px 0px;}
#inkTonerWrapper .list_view .products { border-top: solid 0px; margin-top: 10px; }



#filteredContent {display: none;}
#recentActivitySection { margin-top:120px; display: none;}

/* Loading Icon */

.carouselLoadingForLazyLoad {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	background: rgba(255,255,255,0.8) url('/images/common/searchbrowse/buttons/ellipsis.gif') 50% 100px no-repeat;
}

#brandDrivenTopBanner img {width: 100%;}

#topBrandsContainer .rr_zones.zone_block.horizontal {
	width: 100% !important;
}


#topBrandsContainer .rr_zones .moduleStruct .rrStyle {padding-left: 13px;}