/* CSS Document */

/* Styles for index.html - 700px & smaller */


.hidden {display:none;}

.WelcomeScreen {
	margin-bottom:35px;
	}
.WelcomeScreen ul { /* see includes at end of file */
	color: #424242;
	font-family: "Libre Baskerville", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	padding: 5px 30px 5px 30px;
	line-height: 170%;
	font-variant: small-caps;
	list-style-type:none;
	margin:5px auto 5px auto;
	font-size:14pt;
	}
.WelcomeScreen .button {
	display:inline-block;
	background-color:#f0ecda;
	padding:15px;
	width:185px;
	min-height:150px;
	text-align:center;
	vertical-align: bottom;
	margin:5px auto;
	border-radius:12px;
}
.ProductNavTable a {text-decoration:none;}
.WelcomeScreen .button p {margin:0 auto;}
.WelcomeScreen img { /* see includes at end of file */
	vertical-align:middle;
	display:block;
	margin:0 auto;
	padding:5px 0;
	}

.showroom {
	display:inline-block;
	background-image:url(images/Showroom-panorama.jpg);
	background-size:cover;
	background-repeat:no-repeat;
	width:100%;
	padding-bottom:22%;
	}
.ShowroomWrapper p {
	text-align:center;
	width:85%;
	min-width:300px;
	margin:10px auto;
	}
.ShowroomWrapper {
	margin-bottom:100px;
	display:inline-block;
	width:100%;
	}
.NewsWrapper {
	margin-bottom:120px;
	display:block;
	}
.NewsWrapper .NewsItem {
	display:block;
	margin:10px auto;
	min-width:300px;
	width:85%;
	}
.NewsWrapper .NewsItem img {
	position:relative;
	float:left;
	left:-100px;
	margin-right:-80px;
	vertical-align:middle;
	}
.NewsWrapper .NewsItem p {
	padding:35px 0px;
	vertical-align:middle;
	}
.FAQ {
	display:inline-block;
	width:100%;
	margin-bottom:100px;
	}
.FAQ .left {
	float:left;
	position:relative;
	left:-20px;
	margin-right:-10px;
	}
.FAQ .right {
	float:right;
	position:relative;
	right:-20px;
	margin-left:-10px;
	}
.FAQ p {
	max-width:450px;
	min-width:300px;
	width:80%;
	margin:30px auto;
	}
.announcement {
	display:block;
	margin:0px auto 10px auto;
	text-align:center;
	width:300px;
	background-color:#fff; /* #f0ecda;*/
	}
.announcement a.announceheading {
	display:block;
	text-decoration:none;
	color:#660000;
	padding:3px 2px;
	border-color:#000;
	border-width:1px;
	border-style:dotted;
	}
.details {
	position:absolute;
	z-index:5;
	text-align:left;
	background-color:rgba(255,255,255,.95);
	display:none;
	width:300px;
	font-size:12px;
	line-height:155%;
	padding:2px 5px 6px 5px;
	margin-top:0px;
	}
.announcement span:not(:first-of-type) { /* makes sure that if there's a second or third announcement they get spaced out */
	display:block;
	margin-top:10px;
}

#IndexPageTopContainer {
	width:100%;
	display:table;
	border:0px;
	border-spacing:0px;
	border-collapse:separate;
	}
	
#IndexPageTopLeftContainer {
	display:table-cell;
	}

#IndexLeftHandMenu {
	width:215px;
	display:block;
	background-color:#e0dbc5;
	border-radius: 0px 7px 55px 0px;
	-moz-border-radius: 0px 7px 55px 0px;
	vertical-align:top;
   box-shadow: 10px 0px 30px -20px #FFF;
	}
	
#IndexLeftHandMenu #button { /* button to open and close side menu */
	position:relative;
	display:block;
	text-align:center;
	font-size:10px;
	text-transform:uppercase;
	letter-spacing:.1em;
	/* height:25px; */
	width:265px;
	padding:6px;
	background-color:#faf8f2;
	margin-bottom:-15px;
	top:-10px;
	left:-76px;
	transform:rotate(90deg);
	transform-origin: right center 0;
	border-radius: 2px 12px 2px 2px;
	}

#IndexPageTopMainPanel {
	display:table-cell;
	width:100%;
	text-align:center;
	vertical-align:top;
	}
	
.policy-button { /* shopping cart links to store policies */
	display:inline-block;
	font-size:13px;
	font-weight:700;
	margin:3px;
	padding:6px;
	background-color:#faf8f2;
	border-radius:4px;
	}
	
#policy-footer {
   position:fixed;
   vertical-align:middle;
   text-align:center;
   left:0px;
   bottom:0px;
   width:100%;
   background:#e0dbc5;
   padding:5px;
   border-top-style:solid;
   border-top-color:#555;
   border-top-width:1px;
}

#policy-footer p {margin:2px;font-size:85%;}


/* Page top content and left side menu */	

#nav-services {
	display:none;
	}
	
#PageTopMainPanel {
	width:100%; /*new*/
	text-align:center;
	margin-top:5%;
	}

/* Page top content and left side menu */

#IndexLeftHandMenu {
	display:none;
	}
	
h1 {		/* headline at top of page - eg 'Button Accordions In Stock' */
	font-weight: bold;
	color: #424242;
	font-family: "Libre Baskerville", Georgia, Garamond, Times, serif;
	letter-spacing:0.03em;
	font-size: 35px;
	font-variant: small-caps;
}

h2  {
	color: #000000;
	font-weight: bolder;
	font-size: 15pt;
	font-family: "Libre Baskerville", Georgia, Garamond, Times, serif;
	letter-spacing:0.1em;
	text-align:center;
	margin-top: 35px;
	margin-bottom: 20px;
	line-height: 145%;
	font-variant: small-caps;
	display:block;
	width:100%;
	padding:10px;
	background-color:#f0ecda;
	z-index:100;
	}

.ProductNavTable {
	padding:15px;
	width:100%;
	}
/* .ProductNavTable a:nth-of-type(4) {
	display:none;
	} */
	
p {
	margin-bottom:5px;
	font-size:90%;
	line-height:135%;
	}

/* header styles */
	
#ButtonBoxHeader {
	width:100%;
	/* height:122px; */
	border:0px;
	padding:0px;
	border-spacing:0px;
	border-collapse:collapse;
	background-color:#f5eed2;
	background-image:url(images/HeaderBg5.jpg);
	background-repeat:repeat-x;
	}

#ButtonBoxLogo {
 display:block;
 margin:0 auto;
 padding-top:10px;
 min-width:250px;
 max-width:375px;
 width:80%;
 height:auto;
 }

/* footer */

div#footer {
   display:block;
   vertical-align:middle;
   text-align:center;   
   min-height:20px;
   width:100%;
   background:#26370f;
   color: #FFF;
   font-size:11px;
   padding:3px;
}

div#footer a {
	color:white;}

.BackToTop {		/* class of back-to-top navigation layer */
	display:none;
	position:fixed;
	right: 10px;
	bottom: 10px;
	width: 70px;
	height: 70px;
	z-index: 100;
	overflow: hidden;
	}

h4{
   	max-width:320px;
   	font-size: 32px;
   	text-align:center;
	color: #000;
	font-weight: bold;
	margin:0 auto;
	padding:8px 0 0 0;
	font-family: "Open Sans", Helvetica, Verdana, sans-serif;
	line-height: 145%;
	}


/* "Left hand" menu for touch screens - services and store information */
h5 {
	margin:15px 15px 7px 30px;
	font-size:20px;
	text-align:center;
	}

.modal {
	display:none;
	width:100%;
	max-width:500px;
}

/* Exclusive links */
.MobileOnly {}
.DesktopOnly {display:none;}

.MobileOnly p {
	margin:0 auto 12px auto;
	padding-left:6px;
	max-width:320px;}

.SmallScreenMenu {}

.SmallScreenMenu ul {
	display:block;
	margin:10px auto;
	width:250px;
	max-width:70%;
}

.SmallScreenMenu li {
	display:block;
	border:1px;
	border-style:solid;
	border-color:#fff;
	border-radius:12px;
	padding:15px;
	font-size:12pt;
	background-color:#f0ecda;
	}
	
.SmallScreenMenu li a {
	color:#000;
	text-decoration:none;
	}

/* .vendors {
	width:100%;
	height:145px;
	background-image:url('images/vendors-bg.png');
	background-repeat:repeat;
} */
	
/* ---- further media queries for smallest screens ---- */

@media only screen and (max-width: 340px) {

#ButtonBoxLogo {
 margin:6px 0px 0px 32px;
 }
}

@media only screen and (max-width: 520px) {
	.WelcomeScreen ul { 
		letter-spacing:0;
		font-variant:normal;
		}
	.WelcomeScreen .button {
		display:block;
		}
	#HeaderIcons {
		display:block;
		margin:4px auto 0 auto;
		width:157px;
		}
	#HeaderIcons img {
		display:inline-block;
		margin:0 4px;
		}
	}

@media only screen and (min-width: 520px) {
	.ProductNavTable a {
		border-radius:12px;
		background-color:#f0ecda;
		border-spacing:8px;
		}
	.ProductNavTable a:before {
		content: ' ';
		display: inline-block;
		height: 100%; 
		vertical-align: middle;
	 }
	.WelcomeScreen .button {
		display:inline-block;
		/*height:205px;*/
		width:185px;
		padding:15px;
		vertical-align:middle;
		text-align:center;
		background-color:transparent;
	}
	.WelcomeScreen .DesktopOnly {
		display:none;
	}
	.ProductNavRow {
		/*display:table-row;*/
		table-layout:fixed;
		height:210px;
		}
	.ProductNavTable {
		display:grid;
		grid-gap:10px;
		grid-template-columns: 185px 185px;
		grid-template-rows: auto auto;
		justify-content: center;
		margin:0 auto;
		}
	#HeaderIcons {
		display:block;
		position:absolute;
		right:5px;
		top:20px;
		}
	#HeaderIcons img {
		margin-left:15px;
		margin-bottom:5px;
		display:block;
		}
	#ShoppingCartIcn {
		margin-left:25px;
	}
	#ButtonBoxLogo {
		padding-bottom:8px;
	}
	}

@media only screen and (max-width: 450px) {
	h1 { 
		letter-spacing:0;
		font-variant:normal;
		}
	.FAQ .left {
		float:none;
		display:block;
		margin:10px auto 3px auto;
		left:0px;
		}
	.FAQ .right {
		float:none;
		display:block;
		margin:10px auto 3px auto;
		right:0px;
		}
	.FAQ p {
		margin:12px auto 30px auto;
	}
	.FAQ {
		margin-bottom:40px;
	}
	}