/**
 *
 *
 * NAV.CSS
 *
 *
**/



/* =QUICK NAV ---------------------------------------------------------------- */

/*
#quicknav-list is the UL,  #quicknav is its container.
It has threee LI's, the first two 
are "button-like" (with class .quicknav-button-item)
and on the same line;
the third is the mailing list form.
These three LI's are named:
  #quicknav-item-shop
  #quicknav-item-visit
  #quicknav-item-join
*/

#quicknav {
 position:absolute; 
 top:0;
 left:0;
 width:100%;
 max-width:100%;
 min-height:10px;
 zzzoutline:1px solid red;
}
#quicknav-inner {
 position:relative;
 zzzzzzzzNOTNEEDEDANYMOREmax-width:1000px;
 margin:0 auto;
 zzzoutline:1px solid blue;
}


#quicknav-list {
 position:absolute;
 right:0;
 list-style-type:none;
 margin:0;
 padding:0;
 font-family:'ovo',georgia,serif;
}


/* "TOP" Buttons...  "Quick Nav Button Items" - the first two items in the list (while in desktop mode only?) */

#quicknav li.quicknav-button-item {
 width:49%; 
 width:150px;
 text-align:center; 
 text-transform:uppercase;
 font-size:24px;
}
#quicknav li.quicknav-button-item:first-child {
 float:right;
 margin-left:10px;
}
#quicknav li.quicknav-button-item:nth-child(2) {
 float:right;
}
#quicknav li.quicknav-button-item a { 
 display:block; 
 padding:6px 0 10px; 
}
#quicknav li.quicknav-button-item a:hover { 
 text-decoration:none;
 zzzzzzbox-shadow: 0 2px 5px rgba(0,0,0,0.15);
 zzzzzz-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.15);
 zzzzzzz-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.25);
}

/* Unique colors for "TOP" Buttons */
#quicknav #quicknav-item-shop a {
 background-color:#d1d2cd;
 color:#040913;
}
#quicknav #quicknav-item-shop a:hover {
 background-color:#A19A97;
 background-color:#DFE0DB;
 zzzzcolor:#FFF;
}
#quicknav-list #quicknav-item-visit a {
 background-color:#54503d; 
 color:#d1d2cd; 
}
#quicknav-list #quicknav-item-visit a:hover {
 background-color:#6D6850; 
}

/* TOP NAV MAILING LIST */

#quicknav-list #quicknav-item-join {
 clear:both;
 padding-top:10px;
 font-size:80%;
 overflow:hidden; /* failsafe? */
}

#quicknav-join-form label {
 padding-left:30px;
 background:transparent url(/images/header-nav-icon-mail.png) no-repeat left center;
 float:left;
 text-align:left;
 height:26px;
 line-height:26px;
 width:120px;
 zzzoutline:1px solid red;
}
#quicknav-join-form label:hover {
 cursor:pointer;
}
#quicknav-join-form div.inputs {
 float:right;
 zzzzwidth:120px;
 margin-left:10px;
 position:relative;
}

#quicknav-join-form input {
 border:1px solid #d6d6d6;
 height:26px;
 font-size:11px;
 line-height:26px;
 padding-top:0;
 padding-bottom:0;
 display:inline-block;
 zzzposition:absolute;
}
#quicknav-join-form input[type="text"] {
 border-right-width:0;
 background-color:#f0f1eb;
 -webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
 -moz-transition: all 0.5s ease-out;  /* FF4+ */
 -ms-transition: all 0.5s ease-out;  /* IE10 */
 -o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
 transition: all 0.5s ease-out; 
    transition:none;
 width:113px;
 padding-left:5px;
 /* monday? */
 position:absolute;
 right:30px;
}
#quicknav-join-form input[type="text"]:focus {
 background-color:#fff;
 width:250px;
 position:absolute;
 right:30px;
 border-right-width:1px;
 -webkit-transition: all 0.5s ease-out;  /* Saf3.2+, Chrome */
 -moz-transition: all 0.5s ease-out;  /* FF4+ */
 -ms-transition: all 0.5s ease-out;  /* IE10 */
 -o-transition: all 0.5s ease-out;  /* Opera 10.5+ */
 transition: all 0.5s ease-out; 
}
#quicknav-join-form input[type="submit"] {
 height:28px; /* ??? for FF only, or erryone? */
 width:30px;
 border-left-width:0;
 background-color:#FFF;
}


/* =MAIN NAV ---------------------------------------------------------------- */


.toggleMenu { display:none; line-height:2em; font-weight:bold; font-size:120%;}

/* SEARCH */

ul#nav-list {
 position:relative;
}

#nav-list a.active {
 font-weight:normal;
 text-decoration:underline;
 color:#948964;
 zzzborder-bottom:2px solid #948964;
 zzzbackground-color:rgba(148, 137, 100, 0.1);
}

#nav-list > li.active > a {
 text-decoration:underline;
 zzzbackground-color:#ccc;
}

#nav-search-item {
 float:none;
 padding:0;
 position:absolute;
 right:0;
}
#nav-search-item > a {
 padding:12px 0 5px 0;
 text-align:center;
}
#nav-search-div {
 position:absolute;
 width: 200px;
 right:-8px;
 padding:5px;
 text-align:right;
 background-color: #E8E9E3;
}

[id^="___gcse_"] * {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
[id^="___gcse_"] table {
  margin: 0;
}
[id^="___gcse_"] div[style*="google_custom_search_watermark.gif"] {
  display: none !important;
}
[id^="___gcse_"] form.gsc-search-box {
  margin: 0 !important;
}
[id^="___gcse_"] form.gsc-search-box table.gsc-search-box {
  margin: 0 !important;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input,
[id^="___gcse_"] form.gsc-search-box td.gsc-search-button {
  display: inline-block;
  vertical-align: middle;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input {
  width: calc(100% - 35px);
  padding: 0 0 0 30px;
  background: white url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%20data-icon%3D%27magnifying-glass%27%20viewBox%3D%270%200%2032%2032%27%20fill%3D%27%239b8c61%27%3E%3Cpath%20d%3D%27M12%200C5.39%200%200%205.39%200%2012s5.39%2012%2012%2012c2.74%200%205.257-.944%207.28-2.5l1.595%201.625-.53.53a.478.478%200%200%200%200%20.69l7.312%207.312a.478.478%200%200%200%20.688%200l3.313-3.313a.478.478%200%200%200%200-.688l-7.313-7.313a.478.478%200%200%200-.688%200l-.625.625-1.594-1.594A11.923%2011.923%200%200%200%2024%2012c0-6.61-5.39-12-12-12zm0%203c4.988%200%209%204.012%209%209s-4.012%209-9%209-9-4.012-9-9%204.012-9%209-9z%27/%3E%3C/svg%3E") 5px 50% no-repeat;
  -webkit-background-size: auto 60%;
  -moz-background-size: auto 60%;
  background-size: auto 60%;
  font: normal 14px/1.2 Lato, sans-serif;
  line-height: 1.2;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #AAA;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsc-input-box {
  height: auto;
  border: none;
  background: transparent !important;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsc-input-box.gsc-input-box-hover,
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsc-input-box.gsc-input-box-focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsc-input-box .gsib_a {
  padding: 0;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input input {
  height: 28px !important;
  background: transparent !important;
  border: none !important;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input input:focus {
  outline: none;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsib_b {
  padding: 0;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsib_b .gsst_b {
  padding: 0 !important;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsib_b .gsst_b .gsst_a {
  display: block;
  padding: 0 8px;
  text-decoration: none;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-input .gsib_b .gsst_b .gsst_a .gscb_a {
  display: block;
  font-size: 25px;
  line-height: 28px;
  color: #694b27;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-search-button {
  width: auto;
  margin: 0 0 0 5px;
  padding: 0 !important;
}
[id^="___gcse_"] form.gsc-search-box td.gsc-search-button input {
  display: block;
  height: 30px;
  width: 0 !important;
  margin: 0;
  padding: 0 0 0 28px;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20data-icon%3D%22arrow-thick-right-line-large%22%20width%3D%2216%22%20height%3D%2216%22%20data-container-transform%3D%22translate%280%201%29%22%20viewBox%3D%220%200%2016%2016%22%20fill%3D%22%23FFFFFF%22%3E%3Cpath%20d%3D%22M4.5%201l5%205H0v4h9.5l-5%205H9l7-7-7-7H4.5z%22/%3E%3C/svg%3E");
  background-position: 50% 50%;
  background-repeat: no-repeat;
  -webkit-background-size: 60% auto;
  -moz-background-size: 60% auto;
  background-size: 60% auto;
  background-color: #73030B;
  text-transform: uppercase;
  font-family: Lato, sans-serif;
  -webkit-transition: all 0.15s linear;
  -moz-transition: all 0.15s linear;
  -o-transition: all 0.15s linear;
  -ms-transition: all 0.15s linear;
  transition: all 0.15s linear;
  line-height: 1.2;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid transparent;
}












nav li {
 zzzoutline:1px solid red;
}


      /*  mobile */
    @media only screen and (max-width: 760px), only screen and (max-device-width: 760px) {  
    #nav-container nav {    
     padding-left:0px; 
    }    
    }  
    


#zzznav-container .toggleMenu,
#zzznav-container .toggleMenu * {
 line-height:1;
 padding:0;
 margin:0;
 top:0;
 font-size:100%;
}
#nav-container .toggleMenu img {
 vertical-align:middle;
 margin-bottom:4px;
 margin-left:10px;
 transition: all 0.5s ease;
}

#nav-container .toggleMenu {
 border:1px solid #777;
 border-width:1px 1px 0;
 border-color:transparent;
 zzzborder-radius:4px 4px 0 0;
}
#nav-container .toggleMenu.active {
 background-color:#DDD;
 border:1px solid #777;
 border-width:1px 1px 0;
  position:relative;
 top:1px;
 z-index:1001;
 outline:0;
}
#nav-container .toggleMenu.active img {
 -webkit-transform: rotate(90deg);
 -moz-transform: rotate(90deg);
 -ms-transform: rotate(90deg);
 -o-transform: rotate(90deg);
}


/*-----------------------------------------------------------------------------*/
/* =Nav - Superfish
-----------------------------------------------------------------------------*/
/*** ESSENTIAL STYLES ***/
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sf-menu li {
	position: relative;
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
	z-index: 99;
}
.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}

.sf-menu a {
	display: block;
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}


/*** DEMO SKIN ***/
.sf-menu {
 margin-bottom: 1em;
 zzzwidth:900px;
 margin:0 auto;
 zzzpadding-left:150px;

}
.sf-menu ul {
	box-shadow: 2px 2px 6px rgba(0,0,0,.2);
	min-width: 12em; /* allow long menu items to determine submenu width */
	*width: 12em; /* no auto sub width for IE7, see white-space comment below */
}
.sf-menu a {
	padding: .75em 0.85em .5em;
	text-decoration: none;
	zoom: 1; /* IE7 */

 color:#948964;
 color:#696244;

}
.sf-menu li {
	white-space: nowrap; /* no need for Supersubs plugin */
	*white-space: normal; /* ...unless you support IE7 (let it wrap) */
	-webkit-transition: background .2s;
	transition: background .2s;
}
.sf-menu ul li {
	background: #fff;
}
.sf-menu ul ul li {
	background: #fff;
}
.sf-menu li:hover,
.sf-menu li.sfHover {
	background-color: #E8E9E3;
	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}

.sf-menu li:hover a:hover,
.sf-menu li.sfHover a:hover {
	color: #73030b;

	/* only transition out, not in */
	-webkit-transition: none;
	transition: none;
}



/*** arrows (for all except IE7) **/
.sf-arrows .sf-with-ul {
	padding-right: 2.5em;
	*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */
}
/* styling for both css and generated arrows */
.sf-arrows .sf-with-ul:after {
	content: '';
	position: absolute;
	top: 50%;
	right: 1em;
	margin-top: -3px;
	height: 0;
	width: 0;
	/* order of following 3 rules important for fallbacks to work */
	border: 5px solid transparent;
	border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-top-color: rgba(255,255,255,.5);
}
.sf-arrows > li > .sf-with-ul:focus:after,
.sf-arrows > li:hover > .sf-with-ul:after,
.sf-arrows > .sfHover > .sf-with-ul:after {
	border-top-color: white; /* IE8 fallback colour */
}
/* styling for right-facing arrows */
.sf-arrows ul .sf-with-ul:after {
	margin-top: -5px;
	margin-right: -3px;
	border-color: transparent;
	border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */
	border-left-color: rgba(255,255,255,.5);
}
.sf-arrows ul li > .sf-with-ul:focus:after,
.sf-arrows ul li:hover > .sf-with-ul:after,
.sf-arrows ul .sfHover > .sf-with-ul:after {
	border-left-color: white;
}