/**
 * CSS for PrairieShadows storefront wrapper template
 */

/* global */
html, body {
	background-color: #EBE6DD;	
	font-family: 'Bookman BT Light', Times New Roman;
	font-size: 24px;
}

body {
	overflow-y: scroll;
	/* overflow-x: hidden; */
	/* transform-origin: top center; */
}

/* default links */
a {
	color: #990000;
	text-decoration: none;
}

	/* hover on default link */
	a:hover {
		color: #FF0000;
		text-shadow: 1px 1px 0px rgba(255,255,255,.35);
	}

/* defaults */
em, i {
	font-style: italic;
}

b, strong {
	font-weight: bold !important;
}

u {
	text-decoration: underline;
}

/* input when disabled */
input:disabled, select:disabled {
	color: rgba(0,0,0,.65) !important;
}

/* description paragraphs */
main > div p {
	line-height: 1.35;
	margin: 0px 0px 20px 0px;
}
	
/* lists */
main > div ul {
	margin: 10px 0px 25px 45px;
	list-style-type: disc;
}

/* list items */
main > div ul > li {
	line-height: 1.35;
}

/* vacation message */
#ShopSuey-storefront-VacationMessage {
	display: block;
	padding: 25px 25px 25px 75px;
	margin-bottom: 25px;
	
	text-align: left;
	font-size: 18px;
	
	background: #cdc2ab;
	border: 1px solid #999999;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;
}
	/* icon in vacation message */
	#ShopSuey-storefront-VacationMessage > .fa {
		position: absolute;
		margin: -9px 0px 0px -50px;
		font-size: 35px;		
	}
	
	/* paragraph spacing */
	#ShopSuey-storefront-VacationMessage > p {
		margin-bottom: 15px;
	}
	
	/* OK button */
	#ShopSuey-storefront-VacationMessage > button {
		display: block;
		width: 175px;
		padding: 10px;
		margin: 20px auto 0px auto;
		
		font-family: Corbel, Calibri, Arial;
		font-weight: bold;
		font-size: 18px;
		color: white;
		text-shadow: 1px 1px 0px black;
		
		border: 0px;
		background-color: #736759;
		
		cursor: pointer;
	}
		#ShopSuey-storefront-VacationMessage > button:hover {
			background-color: #a69a8c;
		}
		#ShopSuey-storefront-VacationMessage > button:active {
			background-color: #3a342d;
			box-shadow: -1px -1px 0px black;
		}
		
		/* icon in button */
		#ShopSuey-storefront-VacationMessage > button > .fa {
			margin-left: 10px;
		}
	
	/* message seen and hidden */
	#ShopSuey-storefront-VacationMessage.ShopSuey-storefront-VacationMessage-hide {
		display: none;
	}
	
	/* message on order page */
	#ShopSuey-storefront-VacationMessage.ShopSuey-storefront-VacationMessage-order {
		width: 1148px;
		margin: 25px 0px 25px -20px;
	}
	
		/* no OK button on order page */
		#ShopSuey-storefront-VacationMessage.ShopSuey-storefront-VacationMessage-order > button {
			display: none;
		}
		
		/* no bottom margin for last paragraph on order page */
		#ShopSuey-storefront-VacationMessage.ShopSuey-storefront-VacationMessage-order > p:last-of-type {
			margin-bottom: 0px;
		}

/* overlay when in hidden state */
#nav-content-overlay {
	position: absolute;
	display: block;
	width: 100%;
	height: 0px;
	top: 150px;
	left: 0px;
	
	background: white;
	opacity: 0;
	
	transition: all 0.25s ease 0s;
	z-index: 19;
	
	transition: top 0.25s ease 0s;
}

	/* overlay when header collapsed */
	#nav-content-overlay.header-collapsed {
		top: 113px;
		transition: top 0.25s ease 0s;
	}

	/* when products menu open */
	#nav-content-overlay.show {
		opacity: .5;
		transition: all 0.25s ease 0s;
	}
	
	/* prevent flash while loading */
	#nav-content-overlay.loading {
		opacity: 0 !important;
	}

/* header */
header {
	position: fixed;
	left: 0px;
	top: 0px;
	display: block;
	width: 100%;
	height: 215px;
	z-index: 20;
	
	transition: all 0.25s ease 0s;
}

	/* header collapsed */
	header.collapsed {
		height: 125px;
		transition: all 0.25s ease 0s;
	}

	/* banner container */
	header > div#banner {
		position: absolute;
		width: 100%;
		height: 150px;
		
		/* background image defined in wrapper template for generated URL */
		background-color: black;
		background-position: center, 0px 0px;
		background-repeat: no-repeat;
		
		border-bottom: 2px solid #B6A785;
		
		z-index: 22;
		
		transition: all 0.25s ease 0s;
		
		background-image: url('/deployment/templates/public/storefront/images/header.jpg');
	}

		/* banner when header collapsed */
		header.collapsed > div#banner {
			height: 65px;
			transition: all 0.25s ease 0s;
		}
		
			/* collapsed background */
			header > div#banner > div#background-collapsed {
				position: absolute;
				z-index: -1;
				
				background-color: black;
				background-position: center, 0px 0px;
				background-repeat: no-repeat;
				
				opacity: 0;
				transition: opacity 0.25s ease 0s;
				width: 100%;
				height: 65px;
				
				background-image: url('/deployment/templates/public/storefront/images/header-collapsed.jpg');
			}
			
				/* collapsed background when header collapsed */
				header.collapsed > div#banner > div#background-collapsed {
					z-index: 23;
					opacity: 1;
					transition: opacity 0.25s ease 0s;
				}

		/* centering div */
		header > div#banner > div {
			display: block;
			margin: 0px auto 0px auto;
			width: 1250px;
		}
	
			/* homepage link on logo in banner */
			header > div#banner > div > a {
				position: absolute;
				display: block;
				margin-top: 15px;
				margin-left: 25px;
				width: 540px;
				height: 115px;
				
				z-index: 24;
			}
	
				/* homepage link on logo in banner when collapsed */
				header.collapsed > div#banner > div > a {
					margin-top: 0px;
					margin-left: 25px;
					width: 340px;
					height: 65px;
				}
		
			/* address */
			header > div#banner > div > address {
				display: block;
				position: absolute;
				margin: 35px 0px 0px 900px;
				
				font-size: 22px;
				color: #B6A785;
				line-height: 1.25;
				white-space: nowrap;
				
				opacity: 1;
				
				z-index: 24;
				
				transition: all 0.25s ease 0s;
			}
			
				/* address when header collapsed */
				header.collapsed > div#banner > div > address {
					opacity: 0;
					height: 0px !important;
					z-index: -1;
					
					transition: all 0.25s ease 0s;
				}
			
				/* links in address block */
				header > div#banner > div > address a {
					color: #B6A785;
					white-space: nowrap;
				}
					header > div#banner > div > address a:hover {
						color: #B6A785;
						text-shadow: none;
						border-bottom: 1px dotted #B6A785;
					}
				
				/* line in address */
				header > div#banner > div > address > div {
					display: block;
				}
				
					/* address line label */
					header > div#banner > div > address > div > label {
						display: inline-block;
						width: 70px;
					}
					
			/* shopping controls (icons, cart, checkout, locale) */
			header > div#banner > div > nav#store-controls {
				display: block;
				position: absolute;
				margin: 114px 0px 0px 895px;
				
				font-family: Calibri, Arial;
				font-size: 18px;
				color: rgba(255,255,255,.8);
				
				white-space: nowrap;
				
				transition: margin 0.25s ease 0s;
				z-index: 24;
			}
						
				/* shopping controls (icons, cart, checkout, locale) when header collapsed */
				header.collapsed > div#banner > div > nav#store-controls {
					margin: 30px 0px 0px 895px;
					transition: margin 0.25s ease 0s;
				}
			
				/* store control containers */
				header > div#banner > div > nav#store-controls > div {
					display: inline-block;
				}
				
					/* view icons */
					header > div#banner > div > nav#store-controls > div#view {
						width: 95px;
					}
						/* view icon */
						header > div#banner > div > nav#store-controls > div#view > a {
							display: inline-block;
							margin: 0px 5px 0px 5px;
						}
						
							/* click */
							header > div#banner > div > nav#store-controls > div#view > a:active {
								color: black;
								text-shadow: 1px 1px 0px white;
							}
						
							/* view icon disabled */
							header > div#banner > div > nav#store-controls > div#view.disabled > a,
							header > div#banner > div > nav#store-controls > div#view.disabled > a:active,
							header > div#banner > div > nav#store-controls > div#view.disabled > a:hover {
								color: white;
								text-shadow: none;
								opacity: .4;
								cursor: default;
							}
				
					/* cart/checkout/flag */
					header > div#banner > div > nav#store-controls > div#shopping {
						
					}
					
						/* cart counter */
						header > div#banner > div > nav#store-controls > div#shopping .ShopSuey-storefront-cart-counter {
							display: inline-block;
							width: 25px;
							height: 15px;
							padding-left: 1px;
							
							text-align: center;
							text-overflow: ellipsis;
							overflow: hidden;
						}
						
						/* store selection */
						header > div#banner > div > nav#store-controls > div#shopping > span.store {
							display: inline-block;
							margin-left: 20px;
							opacity: .8;
							
							background: black;
							cursor: pointer;
							vertical-align: middle;
						}
							/* store selection hover */
							header > div#banner > div > nav#store-controls > div#shopping > span.store:hover {
								opacity: 1;
							}
							
							/* main flag icon indicating selected store */
							header > div#banner > div > nav#store-controls > div#shopping > span.store > .flag-icon,
							header > div#banner > div > nav#store-controls > div#shopping > span.store > .fa {
								width: 24px;
								text-align: center;
							}
						
							/* default store selection */
							header > div#banner > div > nav#store-controls > div#shopping > span.store > span.select-store {
								position: absolute;
								display: inline-block;
								visibility: hidden;
								padding: 15px;
								width: 160px;
								margin-left: -151px;
								
								background: black;
								text-align: right;
								border-bottom-left-radius: 5px;
								border-bottom-right-radius: 5px;
								
								opacity: 0;
								z-index: -2;
								
								height: 0px;
								max-height: 0px;
								
								transition: max-height 0.25s ease .05s, opacity 0.25s ease .05s;
							}
					
								/* show store selection */
								header > div#banner > div > nav#store-controls > div#shopping > span.store:hover > span.select-store {
									visibility: visible;
									height: auto;
									max-height: 150px;
									opacity: 1;
									z-index: 1;
								}
								
								/* store selection links */
								header > div#banner > div > nav#store-controls > div#shopping > span.store > span.select-store > a {
									display: inline-block;
									margin-bottom: 10px;
								}
								
									/* last store selection link */
									header > div#banner > div > nav#store-controls > div#shopping > span.store > span.select-store > a:last-of-type {
										margin-bottom: 0px;
									}
									
									/* flag icon */
									header > div#banner > div > nav#store-controls > div#shopping > span.store > span.select-store > a > span.flag-icon,
									header > div#banner > div > nav#store-controls > div#shopping > span.store > span.select-store > a > span.fa {
										width: 24px;
										margin-left: 5px;
										text-align: center;
									}
					
						/* flag icon link */
						header > div#banner > div > nav#store-controls > div#shopping > a.flag-icon {
							display: inline-block;
							margin-left: 20px;
							opacity: .8;
						}
							
							/* hover flag */
							header > div#banner > div > nav#store-controls > div#shopping > a.flag-icon:hover {
								opacity: 1;
							}
							
							/* click flag */
							header > div#banner > div > nav#store-controls > div#shopping > a.flag-icon:active {
								box-shadow: -1px -1px 0px black;
								opacity: .5;
							}
				
				/* shopping control links */
				header > div#banner > div > nav#store-controls a {
					color: rgba(255,255,255,.8);
				}
				
	/* nav container in header */
	header > div#nav {
		position: absolute;
		margin-top: 150px;
		width: 100%;
		height: 45px;
		
		background-color: #E6E6E6;
		border-top: 1px solid black;
		border-bottom: 1px solid #999999;
		
		transition: margin 0.25s ease 0s;
	}
		
		/* nav container in header when header collapsed */
		header.collapsed > div#nav {
			margin-top: 66px;
			transition: margin 0.25s ease 0s;
		}
		
		/* centering div */
		header > div#nav > div {
			width: 1260px;
			margin: 0px auto 0px auto;
		}
			
			/* main nav */
			header > div#nav > div > nav#main {
				display: inline-block;
				float: right;
				margin: 7px -5px 0px 0px;
				
				font-size: 0px; /* collapse spacing between elements */
			}
				/* nav list container */
				header > div#nav > div > nav#main > ul {
					
				}
				
					/* nav list item */
					header > div#nav > div > nav#main > ul > li {
						display: inline-block;
						border: 1px solid transparent;
					}
			
						/* disabled nav links */
						header > div#nav > div > nav#main > ul > li > a:not([href]),
						header > div#nav > div > nav#main > ul > li > a:not([href]):hover {
							color: rgba(0,0,0,.4);
							text-shadow: none;
							text-decoration: none;
							border-bottom: 1px solid transparent;
							cursor: default;
						}
						
						/* main nav links */
						header > div#nav > div > nav#main > ul > li > a {
							display: inline-block;
							padding: 5px 17px 5px 17px;
							
							font-size: 19px;
							font-weight: bold;
							color: black;
							
							border-bottom: 1px solid transparent;
							
							transition: all 0.5s ease .25s;
						}
							
							/* main nav link hover */
							header > div#nav > div > nav#main > ul > li > a:hover {
								color: rgba(0,0,0,.75);
								text-shadow: 1px 1px 0px white;
								border-bottom: 1px solid rgba(0,0,0,.5);
							
								transition: all 0.25s ease 0s;
							}
							
								/* top list item with menu */
								header > div#nav > div > nav#main > ul > li.menu {
									border: 1px solid transparent;
									border-bottom: 0px;
									
									box-shadow: none;
									
									transition: all 0.25s ease 0.05s;
								}
							
									/* top list item with menu when hovered */
									header > div#nav > div > nav#main > ul > li.menu:hover {
										border: 1px solid #999;
										border-bottom: 0px;
										
										box-shadow: 3px 3px 0px rgba(0,0,0,.25);
										transition: all 0.25s ease 0.05s;
									}
								
										/* no hover underline on menu list item with submenu */
										header > div#nav > div > nav#main > ul > li.menu > a:hover {
											border-bottom: 1px solid transparent;
										}
										
							
								/* submenu container */
								header > div#nav > div > nav#main > ul > li > ul {
									display: inline-block;
									position: absolute;
									padding: 15px 15px 0px 15px;
									margin: 0px 0px 0px -1px;
									
									background: #E6E6E6;
									border: 1px solid #999;
									border-top: 0px;
									border-bottom-left-radius: 5px;
									border-bottom-right-radius: 5px;
									
									box-shadow: 3px 3px 0px rgba(0,0,0,.25);
									
									z-index: -1;
									opacity: 0;
									transition: opacity 0.25s ease .05s, z-index 0.25s step-end;
								}
							
									/* submenu container when shown */
									header > div#nav > div > nav#main > ul > li:hover > ul {
										z-index: 1;
										opacity: 1;
										transition: opacity 0.25s ease 0.05s;
									}
							
										/* submenu item */
										header > div#nav > div > nav#main > ul > li > ul > li {
											margin-bottom: 10px;
										}
										
											/* submenu item link */
											header > div#nav > div > nav#main > ul > li > ul > li > a {
												display: inline-block;
												font-size: 15px;
												font-weight: normal;
												color: black;
											}
												/* hover on submenu link */
												header > div#nav > div > nav#main > ul > li > ul > li > a:hover {
													color: rgba(0,0,0,.75);
													text-shadow: 1px 1px 0px white;
												}
												
								/* facebook nav item */
								/* 
								header > div#nav > div > nav#main > ul > li#facebook {
									width: 50px;
									margin-left: 10px;
								}
									header > div#nav > div > nav#main > ul > li#facebook > a.fa {
										position: absolute;
										font-size: 29px;
										margin: -20px 0px 0px -5px;
										padding: 0px;
										
										color: #4b66a0;
										text-decoration: none;
										border: none;
										
										z-index: 0;
									}
										header > div#nav > div > nav#main > ul > li#facebook > a.fa:hover {
											color: #133783;
											text-decoration: none;
											border: none;
										}
								 */
				
			/* line art */
			header > div#nav > div > img#line-art {
				position: absolute;
				margin: 39px 0px 0px 832px;
				
				opacity: 1;
				transition: opacity 0.15s linear 0s;
			}
	
				/* line art */
				header.collapsed > div#nav > div > img#line-art {
					opacity: 0;
					transition: opacity 0.15s linear 0s;
				}

/* main element */
main {
	display: block;
	margin: 235px auto 20px auto;
	padding-left: 20px;
	width: 1200px;
	
	transition: margin 0.25s ease 0s;
}

	/* main element when header collapsed */
	main.header-collapsed {
		margin-top: 135px;
		transition: margin 0.25s ease 0s;
	}

	/* adjustment for policies page */
	main#ShopSuey-storefront-page-policies > div > h3 {
		margin: -20px 0px 35px 0px;
		padding: 0px;
	}

	/* centering div */
	main > div {
		
	}
	
		/* super-title above page title */
		main > div > h5 {
			margin: 0px 0px 25px 0px;
			font-size: 20px;
		}
		
			/* link inside super-title */
			main > div > h5 > a,
			main > div > h5 > a:hover,
			main > div > h5 > a:active {
				color: black;
				text-decoration: none;
			}

		/* page title */
		main > div > h3 {
			margin-bottom: 10px;
			
			font-family: 'Bookman BT', Times New Roman;
			font-size: 45px;
			color: #746B5C;
		}
		
/* footer */
footer {
	width: 1260px;
	margin: 100px auto 0px auto;
	border-top: 1px solid #B6A785;
	height: 75px;
	
	font-family: AvantGarde BK BT, Corbel, Calibri, Arial;
	font-size: 12px;
	color: black;
	line-height: 1.35;
	
	clear: both;
}

	/* footer line art */
	footer > img#line-art {
		position: absolute;
		margin: -7px 0px 0px 487px;
	}
	
	/* footnotes */
	footer > div#footnotes {
		float: right;
		margin: 25px;
		text-align: center;
	}
	
		/* publish link */
		footer > div#footnotes a,
		footer > div#footnotes a:active,
		footer > div#footnotes a:hover {
			color: black;
		}
	
	/* exchange rate in footer */
	footer > div#exchange {
		margin: 25px;
	}