﻿Header { background: #1E1E1E; height: 127px; }

header #PersonalNav { text-align: right; color: #b8b8b8; line-height: 1em; font: normal .7em Georgia; color: #b8b8b8; }
header #PersonalNav a { display: inline-block; margin: 0 0 0 -3px; padding: 12px 14px; color: #d5d5d5; text-decoration: none; background: url(/Images/master/divider.png) left no-repeat; background-size: 1px auto; }
header #PersonalNav a:hover, header #PersonalNav a.active { color: #fff; background: #ac3e0e url(/Images/master/divider.png) left no-repeat; background-size: 1px auto; }
header #PersonalNav a.phone { background: none; }
header #PersonalNav a.phone:hover { color: #d5d5d5; text-decoration: none; cursor: default; }
header #PersonalNav a.search { display: none; }
header #PersonalNav a.basket { margin-right: -14px; }

.HeaderDropDown { display: none; position: absolute; background: #fff; padding: 30px; box-shadow: 0 0 3px #d2c1c7; z-index: 9999; }

#Basket { top: 0; right: -14px; width: 287px; }
#Basket h3 { font-size: 1em; border-bottom: 2px solid #1E1E1E; padding-bottom: 8px; }
#Basket li { font-size: .7em; border-bottom: 1px dotted #1E1E1E; }
#Basket li.last { border-bottom: 2px solid #1E1E1E; }
#Basket .ProductImage { padding: 5px 5px 5px 0; }
#Basket .ProductText { padding: 10px 0 5px 0; }
#Basket a.BlockLink { display:inline; max-width: 100%; padding: 5px 15px; background: #1e1e1e; border: 2px solid #1e1e1e; text-align: center; font: .9em/1 TradeGothicLTCom-BdCn20, sans-serif; text-transform: uppercase; color: #1e1e1e; letter-spacing: .1em; text-decoration: none; color: #e9e8e0; }
#Basket a.BlockLink:hover { background: #ac3e0e; border: 2px solid #ac3e0e; color: white; text-decoration: none; }
#Basket #ItemCount { padding-top: 0; padding-left: 0; font-size: .8em; }
#Basket #ItemCount a { font-weight: bold; }
#Basket #ViewButton { padding-top: 0; margin-right: 8px;  }

#Subscribe { position: relative; text-align: left; }
#Subscribe .HeaderDropDown { top: 36px; right: 0; width: 350px; cursor: default; }
#Subscribe h3 { padding-bottom: 8px; border-bottom: 2px solid #1e1e1e; }
#Subscribe em { display: block; margin: 12px 0 16px; color: #4F4F4F; font-size: 14px; line-height: 1.4; }
#Subscribe input[type="button"] { border: none; height: 32px; text-align: left; }
#Subscribe:hover .HeaderDropDown { display: block; }

#MainNav a.Logo { display: block; float: left; width: 208px; height: 29px; padding: 0; margin: 25px 55px 0 0; background: url(/Images/master/mast-logo.png) left no-repeat; background-size: 208px auto; text-indent: -9999px; overflow: hidden; }

nav li { float: left; }
nav h4 { padding: 29px 20px 44px; margin: 0; color: #d5d5d5; letter-spacing: .15em; font-size: 1.1em; }
nav li:hover h4 { background: #ac3e0e; color: white; cursor: pointer; }
nav li.current h4 { border-bottom: 6px solid #ac3e0e; padding-bottom: 37px; }
nav li div { display: none; }
nav li:hover div, nav li.active div { display: block; }
nav li div.large-8 { min-width: 860%; left: 0px; }
nav li div.large-6 { min-width: 769%; left: 0px; }
nav li div.large-5 { min-width: 505%; left: 0px; }
nav li div.large-4 { min-width: 200%; left: 0px; }

#MainNav div#NavSearch { text-align: right; padding-right: 0; padding-top: 18px; }
#MainNav div#NavSearch input { height: 40px; margin: 0; padding: 8px 32px 10px 10px; background: #444; border: 1px solid #1E1E1E; color: #b8b8b8; font-style: italic; font-size: .9em; }
#MainNav div#NavSearch input.MGFull { position: absolute; right: 1px; top: 30px; height: 16px; width: 26px; padding: 0; background: none; }
#MainNav div#NavSearch input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 17px; width: 16px; background: none; margin-right: -16px; padding: 0; } 
#MainNav div#NavSearch input:focus { box-shadow: none; border-radius: 0; border: 1px solid #fff; font-style: normal; color: #fff; background: #444 url(/Images/master/magnifying-glass_on.png) right no-repeat; background-size: auto 17px; }
#MainNav div#NavSearch #Suggestions { display: none; position: absolute; z-index: 9999; background: #fff; padding: 30px; width: 95%; font: normal .7em Georgia; }
#MainNav div#NavSearch #Suggestions li { border-bottom: 1px dotted #1E1E1E; text-align: left; padding: 7px 0; }
#MainNav div#NavSearch #Suggestions li.first { border-top: 2px solid #1E1E1E; }
#MainNav div#NavSearch #Suggestions li.last { border-bottom: 2px solid #1E1E1E; }
#MainNav div#NavSearch #Suggestions li a { display: block; width: 100%; height: 100%; text-decoration: none; }
#MainNav div#NavSearch #Suggestions li a:hover { text-decoration: underline; }

/** Placeholder Text Fixes **/
#MainNav div#NavSearch input::-webkit-input-placeholder { color: #818181; font-style: italic; }
#MainNav div#NavSearch input:-moz-placeholder { color: #818181; font-style: italic; }
#MainNav div#NavSearch input::-moz-placeholder { color: #818181; font-style: italic; }
#MainNav div#NavSearch input:-ms-input-placeholder { color: #818181; font-style: italic; }

/*#Shop .SubMainTitle + ul li:last-of-type { position: relative; height: 104px; margin-top: 30px; font-style: italic; font-weight: bold; }
#Shop .SubMainTitle + ul li:last-of-type a { position: absolute; bottom: 0; left: 0; display: block; height: 80px;  width: 100%; padding-top: 66px;  background: url('/Images/Master/nav-great-gift-ideas.jpg') no-repeat; }*/

.GreatGiftIdeas { position: absolute; bottom: 0; right: 0; padding: 24px 30px; border-top: 1px dotted #1e1e1e; border-left: 1px dotted #1e1e1e; }
.GreatGiftIdeas img { margin-top: 4px; }
.GreatGiftIdeas ul { margin: 0; }
.GreatGiftIdeas ul:first-of-type { padding-left: 25px; }
.GreatGiftIdeas a { font-weight: bold; font-style: italic; }

#CommunityMenu { right: 1px; }
.MainDropDown { position: absolute; width: 100%; padding: 40px; font-size: .9em; background: white; z-index: 9999; box-shadow: 0 0 3px #d2c1c7; }
.MainDropDown li { padding: 0; float: none; text-align: left; }
.MainDropDown li:hover { background: none; }
.MainDropDown a { text-decoration: none; }
.MainDropDown a:hover { text-decoration: underline; }
.MainDropDown ul.SubMainTitle a { font-style: italic; }
.MainDropDown ul.SubMainTitle li:nth-of-type(-n+8) a { font-style: normal; font-weight: normal; padding-left: 12px; font-size: 11px; }
.MainDropDown ul.SubMainTitle li:nth-of-type(1) a { font-style: italic; font-weight: bold; padding-left: 0; font-size: 13px; }
.MainDropDown ul.SubMainTitle li:nth-of-type(8) { margin-bottom: 10px; }
.MainDropDown li.separate { margin-top: 22px;  }

#Community.MainDropDown ul.SubMainTitle li:nth-of-type(-n+8) a { padding-left: 0; font-size: 13px; }

#Visit img { margin: 0 0 10px; }
#History img { margin: 0 0 10px; max-width: 140px; }

#Community .SubMainTitle, #CommunityMobile .SubMainTitle { margin-bottom: 20px; }

.Selected { background: #ac3e0e; cursor: pointer; }
.Selected h4 { color: white; }

.mobilenav { display: none; position: relative; z-index: auto; background: #fff; }
.mobilenav .MainDropDown { position: static; z-index: auto; }
.MainDropDown:after {
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden; }
.mobilenav ul { margin-bottom: 20px; }
.mobilenav li a { display: block; padding: 5px 0; font-size: 150%; }

#MobileSearch { display: none; background: #fff; padding: 12px; position: relative; }
#MobileSearch input { height: 40px; margin: 0; padding: 8px 32px 10px 10px; background: #fff url(/Images/master/magnifying-glass.png) right no-repeat; background-size: auto 17px; border: 2px solid #1E1E1E; color: #b8b8b8; font-style: italic; }
#MobileSearch input.MGFull { position: absolute; right: 14px; top: 24px; height: 16px; width: 26px; padding: 0; background: none; }
#MobileSearch input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 17px; width: 16px; background: none; margin-right: -16px; padding: 0; } 
#MobileSearch input:focus { box-shadow: none; border-radius: 0; border: 2px solid #ac3e0e; font-style: normal; background: #fff url(/Images/Master/magnifying-glass_on2.png) right no-repeat; background-size: auto 17px; }
#MobileSearch #MobileSuggestions { display: none; position: absolute; z-index: 9999; background: #fff; padding: 30px; width: 95%; font: normal .7em Georgia; }
#MobileSearch #MobileSuggestions li { border-bottom: 1px dotted #1E1E1E; text-align: left; padding: 7px 0; }
#MobileSearch #MobileSuggestions li.first { border-top: 2px solid #1E1E1E; }
#MobileSearch #MobileSuggestions li.last { border-bottom: 2px solid #1E1E1E; }
#MobileSearchh #MobileSuggestions li a { display: block; width: 100%; height: 100%; text-decoration: none; }
#MobileSearch #MobileSuggestions li a:hover { text-decoration: underline; }

/*The following helps with the autocomplete feature on the search box in the header
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-clearfix {
	min-height: 0; /* support: IE7 */
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0);
}

.ui-front {
	z-index: 100;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-button {
	display: inline-block;
	position: relative;
	padding: 0;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;
	overflow: visible; /* removes extra width in IE */
}
.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* button text element */
.ui-button .ui-button-text {
	display: block;
	line-height: normal;
}
.ui-button-text-only .ui-button-text {
	padding: .4em 1em;
}
.ui-button-icon-only .ui-button-text,
.ui-button-icons-only .ui-button-text {
	padding: .4em;
	text-indent: -9999999px;
}
.ui-button-text-icon-primary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 1em .4em 2.1em;
}
.ui-button-text-icon-secondary .ui-button-text,
.ui-button-text-icons .ui-button-text {
	padding: .4em 2.1em .4em 1em;
}
.ui-button-text-icons .ui-button-text {
	padding-left: 2.1em;
	padding-right: 2.1em;
}
/* no icon support for input elements, provide padding by default */
input.ui-button {
	padding: .4em 1em;
}

/* button sets */
.ui-buttonset {
	margin-right: 7px;
}
.ui-buttonset .ui-button {
	margin-left: 0;
	margin-right: -.3em;
}

/* workarounds */
/* reset extra padding in Firefox, see h5bp.com/l */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.ui-menu {
	list-style: none;
	padding: 2px;
	margin: 0;
	display: block;
	outline: none;
}
.ui-menu .ui-menu {
	margin-top: -3px;
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	padding: 0;
	width: 100%;
	/* support: IE10, see #8844 */
	list-style-image: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}
.ui-menu .ui-menu-divider {
	margin: 5px -2px 5px -2px;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-menu-item a {
	text-decoration: none;
	display: block;
	padding: 2px .4em;
	line-height: 1.5;
	min-height: 0; /* support: IE7 */
	font-weight: normal;
}
.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	font-weight: normal;
	margin: -1px;
}

.ui-menu .ui-state-disabled {
	font-weight: normal;
	margin: .4em 0 .2em;
	line-height: 1.5;
}
.ui-menu .ui-state-disabled a {
	cursor: default;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: Georgia, serif;
	font-size: 0.9em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: Georgia, serif;
	font-size: .9em;
}
.ui-widget-content {
	border: 1px solid white;
	background: white 50% 50% repeat-x;
	color: #1e1e1e;
}
.ui-widget-content a {
	color: #1e1e1e;
}
.ui-widget-header {
	border: 1px solid white;
	background: white 50% 50% repeat-x;
	color: #b8b8b8;
	font-weight: bold;
}
.ui-widget-header a {
	color: #b8b8b8;
}

/* Interaction states
----------------------------------*/
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus {
	border: 1px solid #b8b8b8;
	background: #b8b8b8 50% 50% repeat-x;
	font-weight: normal;
	color: #1e1e1e;
}
/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 0;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 0;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 0;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 0;
}

@media only screen and (max-width: 1000px)  {
	
	header #PersonalNav a.basket { margin-right: -9px; }
	#Basket { right: 0px; } 
											 
}

/**** Styles for screens that are less than 960px; ****/
@media only screen and (max-width: 960px) {
	nav li.current h4 { padding-bottom: 39px; }
	nav h4 { font: 1em/1 TradeGothicLT-CondEighteen, sans-serif; text-transform: uppercase; letter-spacing: 0; }
	#MainNav a.Logo { margin-right: 55px; }
	
	#History img { margin: 0 0 10px; max-width: 100%; }
}

/**** Styles for screens that are less than 862px; ****/
@media only screen and (max-width: 862px) {
	#MainNav a.Logo { width: 84px; height: 46px; margin: 9px 10% 0 0; background: url(/Images/master/mast-logo2.png) left no-repeat; background-size: 84px auto; }
	
	header #PersonalNav a.basket { margin-right: -4px; }
	
	nav li.active h4 { background: #ac3e0e; color: white; cursor: pointer; }
	nav li.active div, nav li.active:hover div { display: block; }
	nav li div.large-8 { min-width: 852%; left: 0px; }
	nav li div.large-6 { min-width: 798%; left: 0px; }
	nav li div.large-5 { min-width: 531%; left: 0px; }
	nav li div.large-4 { min-width: 200%; left: 0px; }
	
	#Basket { right: 14px; top: 44px; }
	
}

/**** Styles for screens that are less than 685px ****/
@media only screen and (max-width: 685px) {
	#MainNav a.Logo { margin-top: -43px; }
	header #PersonalNav { margin-top: 18px; }
	header #PersonalNav a.phone { font-style:italic; font-size: 1em; position: relative; }
	header #PersonalNav a.account { width: 16px; height: 16px; text-indent: 9999px; overflow: hidden; background: url(/Images/master/header-account.png) center no-repeat; background-size: auto 16px; }
	header #PersonalNav a.chat, header #PersonalNav a.logout { display: none; }
	header #PersonalNav a.basket { width: 17px; height: 16px; text-indent: 9999px; overflow: hidden; background: url(/Images/master/header-bag.png) center no-repeat; background-size: auto 16px; margin: 0 9px 0 0; }
	header #PersonalNav a.search { display:inline-block; width: 16px; height: 16px; text-indent: 9999px; overflow: hidden; background: url(/Images/master/magnifying-glass.png) left no-repeat; background-size: auto 16px; }
	
	#Basket { right: 10px; top: 60px; width: 50%; }
	#Basket #ViewButton .BlockLink { margin-right: 20px; }
	
	
	#MainNav div#NavSearch .MGFull { display: none; }
	
	#NavWrapper { padding-right: 0; }
	nav li { margin-right: 15%; }
	nav li:hover div, nav li.active div, nav li.current div { display: none !important; }
	nav li.last { margin-right: 0; }
	nav h4 { padding: 22px 0 15px; font-size: 1.1em; }
	nav li:hover h4, nav li.active h4, nav li.current h4 { background: none; border-bottom: 6px solid #ac3e0e; padding-bottom: 21px; }
		
	#NavSearch { display: none; }
	
	#NavWrapper.small-9 { width: 100%; }
	nav { clear: left; }
	nav li:hover div { display: none; }
	nav li div.large-8 { min-width: 200%; left: 0px; }
	nav li div.large-6 { min-width: 100%; left: 0px; }
	nav li div.large-4 { min-width: 100%; left: 0px; }
	
	.MainDropDown ul.SubMainTitle li:nth-of-type(-n+8) { display: none; }
	.MainDropDown ul.SubMainTitle li:nth-of-type(1) { display: block; margin-bottom: 20px; }
	
}

@media only screen and (max-width: 395px) {

	nav li { margin-right: 10%; }
	
}

@media only screen and (max-width: 320px) {
	
	nav { padding-right: 0; }
	nav li { margin-right: 5.5%; }
	nav li.last { margin-right: 0; }
	nav li.current h4 { padding-bottom: 20px }
	nav h4 { padding: 22px 0 15px; font-size: 1.2em; }
	header #PersonalNav a.phone { font-style:italic; font-size: 1em; position: relative; top: 25px; right: -173px; }
}