/* W3C Validated 4/30/16 */


HEADER	{width: 100%;
		 padding: 20px 0 0 0;
		 box-sizing: border-box;
		 color: #7F7F7F;
		 position: relative;}


.logo	{width: 71.133333%;
		 min-width: 275px;
		 max-width: 328px;
		 margin-left: 5%}

.logo IMG	{width: 100%;
			 height: auto;}

HEADER	P	{font-size: 1.5rem;
			 margin: 5px 0 10px 10%}

HEADER	P a	{color: #7F7F7F;
			 text-decoration: underline}

/* larger than 600px */
@media (min-width: 600px) {

HEADER	P	{font-size: 1.8rem;}
}

/* larger than 700px */
@media (min-width: 700px) {

HEADER	P	{font-size: 1.8rem;
			 float: right;
			 margin: -105px 3% 0 0}
}

/* larger than 1024px */
@media (min-width: 1024px) {

HEADER	P	{font-size: 2.1rem;}
}


.fabric	{display: none;
		 width: 100%;
		 box-sizing: border-box;
		 padding: 10px 0 13px 2%;
		 background-color: #178E8F;
		 text-align: right;}


.margin	{margin-top: 30px;}


.search-top	{position: absolute;
			 bottom: 0;
			 right: 5px;
			 width: 140px;}


.catalog	{padding: 0 50px 10px 50px;
			 font-size: 1.6rem;
			 color: white;
			 text-shadow: 1px 1px #666;
			 text-align: left;
			 display: none}

.search {display: none}

/* larger than 700px */
@media (min-width: 700px) {

 .fabric {display: block;
		  padding-left: 0;
		  background-image: url(../images/fabric_bkgrd.jpg);
		  background-repeat: no-repeat; background-position: top center;
		  background-size: cover}

 .search {display: block;
		  padding: 15px 0 15px 10px;
		  font-size: 1.6rem;
		  color: white;
		  text-shadow: 1px 1px #666;
		  text-align: left;
		  border-left: 1px solid white;
		  border-right: 1px solid white;}

.search-top	{display: none}

.catalog	{display: block;
			 padding: 15px 0 15px 10px;
			 border: 0}
 }


.prod_buttons	{text-align: center;}


.bargain_barn	{text-align: center;}

.bargain_barn IMG	{width: 100%;
					 max-width: 309px;
					 height: auto}

			
.featured	{margin-top: 10px;
			 padding-right: 10px;
			 padding-left: 10px}

.featured IMG	{width: 100%;
				 height: auto;
				 border: 1px solid black}

figure	{box-sizing: border-box;
		 margin: 10px;
		 padding: 10px;
		 border: 1px solid #777;
		 text-align: center;
		 min-height: 230px;
		 background-image: linear-gradient(to bottom right, rgba(117,74,154,.2), rgba(117,74,154,.1), rgba(117,74,154,0));}

/* Larger than 1024 */
@media (min-width: 1024px) {

figure	{min-height: 300px}
}

figure IMG	{width: 90%;
			 max-width: 500px;
			 height: auto;
			 margin-bottom: 10px}

figcaption p {line-height: 1.1;}

.youtube	{padding: 7px 10px 0 10px;}

.youtube P	{margin: 5px 0 0 70px;}

.youtube IMG	{float: left;
				 width: 62px;
				 height: 29px;}

.static	{float: right;
		 margin-bottom: -15px}

.searchbox {width: 200px;
			float: right;
			margin: 0 0 -12px 0}

.storesearch {margin: 5px 0 7px 0}


.instructions	{width: 95%;
				 margin: 5px auto;
				 box-sizing: border-box;
				 text-align: center;}

.instruction_box	{width: 255px;
					 box-sizing: border-box;
					 margin: 12px 0 0 0;
					 display: inline-block;
					 border: 3px solid #73509E;
					 background-color: #6E6C71;}


/* larger than 600px */
@media (min-width: 600px) {

.instruction_box	{margin: 15px 10px 0 10px;}
}

.instruction_box h3 {color: white;
					 background: none;
					 margin: 0;
					 padding: 5px 0;
					 font-weight: 300}

.instruction_box h3 a {color: white;
					   text-decoration: none;}

.instruction_box h3 a:hover {text-decoration: underline;}


IFRAME	{border: 0;
		 width: 100%;}


.class_box	{width: 95%;
			 box-sizing: border-box;
			 border: 3px solid #73509E;
			 background-color: #6E6C71;
			 margin: 10px 0}

.prod_button	{display: inline-block;
				 width: 41.66666%;
				 max-width: 150px;
				 margin: 10px 5px 0 5px}

.prod_button IMG	{width: 100%;
					 height: auto;}

.prod_button a:hover	{opacity: .9}

/* larger than 700px */
@media (min-width: 700px) {

.prod_buttons	{text-align: left;
				 padding-left: 20px}

.prod_button	{margin: 10px 10px 0 0}

.featured	{margin: 0;
			 padding-left: 0}
}

/* larger than 800px */
@media (min-width: 800px) {

.youtube	{padding: 6px 0 0 0;}
}

/* larger than 1024px */
@media (min-width: 1024px) {

.prod_button	{margin: 10px 20px 5px 0;}
}


.category_hdr	{box-sizing: border-box;
				 padding: 40px 10px;
				 background: linear-gradient(#E3DFDF, transparent); /* Standard syntax */}

.category_hdr IMG	{width: 100%;
					 height: auto;
					 border: 1px solid black}


.product	{margin-top: 25px;
			 padding: 0 5px;}

.pricebox	{display: table;}

.product IMG	{float: left;
				 width: 31.25%;
				 max-width: 150px;
				 min-width: 100px;
				 height: auto;
				 margin: 0 15px 0 0;
				 border: 1px solid #666}


FOOTER	{text-align: center;
		 padding-bottom: 20px;
		 background-color: #1B9091;}

.access	{float: none;
		 display: inline-block;
		 margin-bottom: 10px;}

.access	IMG	{display: inline-block;
			 margin-right: 5px;
			 vertical-align: top}

.login	{display: inline-block;
		 height: 22px;
		 background: linear-gradient(to right, #A5403F, #E1BEBE, #A5403F); /* Standard syntax */
		 text-align: center;
		 padding: 7px 10px 0 10px;
		 margin: 15px 5px 0 5px;
		 font-size: 12px;
		 font-weight: 600;
		 color: white;
		 text-shadow: 1px 1px black;
		 box-shadow: 2px 2px 4px rgba(50, 50, 50, 0.45);}

.login a {color: white;
		  text-decoration: none}

.login a:hover {color: #DDD;
				text-decoration: none}

.nav	{float: none;
		 display: inline-block;
		 font: normal 9pt Verdana, Arial, Helvetica, sans-serif;
		 height: 40px;
		 text-align: center;}

.nav > UL	{margin: 0 0 15px 0;
			 padding: 0;
			 list-style-type: none;
			 display: inline-block}

.nav > UL LI	{display: inline;
				 float: left;
				 margin: 0;
				 padding: 0;}

.nav > UL LI a	{display: block;
				 color: white;
				 padding: 12px 5px 0 5px;
				 text-decoration: none;}

.nav > UL LI a:link, .nav > UL LI a:visited	{color: white;}

.nav > UL LI a:hover	{color: #70529E;}

.nav > P	{color: #DDD;
			 padding-top: 10px;
			 border-top: 1px solid #BBB}

.nav > P a	{color: white;
			 text-decoration: underline}

.nav > P.wdt	{color: #CCC;
				 padding: 0;
				 border-top: none;
				 font-style: italic;}

.nav > P.wdt a	{color: #CCC;
				 text-decoration: none}

.nav > P.wdt a:hover	{color: #DDD;
						 text-decoration: underline}


.btm_category_nav	{margin-top: 30px;
					 font: normal 15px Verdana, Arial, Helvetica, sans-serif;
					 padding: 10px;}

.btm_category_nav > UL	{margin: 0;
						 padding: 0;
						 list-style-type: none;
						 display: inline-block}

.btm_category_nav > UL LI	{display: inline;
							 float: left;
							 margin: 0;
							 padding: 0;}

.btm_category_nav > UL LI a	{display: block;
							 margin: 12px 20px 0 0;
							 padding: 5px 10px;
							 text-decoration: none;
							 border: 1px solid #CCC;
							 border-radius: 5px}

.btm_category_nav > UL LI a:hover	{background-color: #EFEFEF}


/* VIEWPORT WIDTHS: */

/*	iPhone: 320 - 480
	iPad:  768 - 1024
	Galaxy S4: 360 - 640 (1080 - 1920, times 3 for HD?)
	Kindle Fire HD: 533 - 801
	Moto X4 1080 - 1920 */