*	{ font-family:Nunito,Arial,Helvetica; font-size:18px; box-sizing:border-box; -webkit-text-size-adjust: 100%; }
body	{ font-family:Nunito,Arial,Helvetica; font-size:18px; box-sizing:border-box; -webkit-text-size-adjust: 100%; margin:0px; overflow-Y:scroll; background:#EEE; }
a	{ color:blue; }

#top	{ width:100%; font-size:14px; text-align:right; text-decoration:none; color:#888; white-space:nowrap; background:#FFF; padding:15px 30px 15px 30px; text-align:center; }
#top a	{ font-size:14px; color:#888; text-decoration:none; padding:0 10px 0 10px; }

#white	{ width:100%; background:white; }

/* Nav1 is for desktops and tablets */
#nav1	{ z-index:100; width:100%; padding:23px 30px 23px 30px; border-top:1px solid #CCC; border-bottom:1px solid #CCC; background:white; }
#logo	{ width:201px; height:auto; }
.icons	{ width:23px; height:auto; margin-left:18px; cursor:pointer; }

#cart_items {	z-index:2; position:absolute; background:red; color:white; width:22px; height:22px; border-radius:22px; font-size:12px; 
		padding-top:3px; margin:-18px 0 0 16px; text-align:center; cursor:pointer; }

#topmenu { display:none; width:30px; height:auto; margin-right:0px; }
@media (max-width: 900px) {
	#topmenu { display:block; }
	#topcats { display:none; }
	#logo	 { width:110px; height:auto; }
	#top	 { display:none; }
}

/* Home Page */
#home1	{ width:100%; height:40vw; overflow:hidden; margin-bottom:5px; background:#333; overflow:hidden; }
.slider	{ position:absolute; width:100%; height:40vw; overflow:hidden; display:none; }
.slider img { width:100%; height:40vw; }
#stbl td { font-size:32px; color:white; }
#stbl td a { font-size:16px; color:white; text-decoration:none; }
.circle	{ width:16px; height:16px; }

#home2	{ height:25vw; width:calc(50% - 3px); float:left;  opacity:.80; border:0px solid #666; margin-top:60px; }
#home3	{ height:25vw; width:calc(50% - 3px); float:right; opacity:.80; border:0px solid #666; }

#home4	{ float:left; height:18vw; width:calc(33.33%); margin:6px 0 6px 0;	opacity:.80; }
#home5	{ float:left; height:18vw; width:calc(33.34% - 12px); margin:6px;	opacity:.80; }
#home6	{ float:left; height:18vw; width:calc(33.33%); margin:6px 0 6px 0;	opacity:.80; }

#home2:hover, #home3:hover, #home4:hover, #home5:hover, #home6:hover { opacity:1; cursor:pointer; }
@media (max-width: 550px) { #home1, #home2, #home3, #home4, #home5, #home6 { width:100%; height:30vw; margin:0 0 1% 0; } }

.heading { font-size:calc(8px + 2vw); text-align:center; font-weight:bold;	text-decoration:none; color:#FFF; text-shadow: 1px 1px 2px black; }
.subtext { font-size:calc(8px + 1vw); text-align:center; 			text-decoration:none; color:#FFF; text-shadow: 1px 1px 2px black; } 

#web_admin { z-index:10; position:absolute; top:0; left:0; width:100px; height:50px; background:blue; padding-top:15px; text-align:center; cursor:pointer; }
#web_admin a { color:white; }

/* Cats */
.cats { z-index:5; cursor:pointer; padding:2px 3px 2px 7px; }
.catson { cursor:pointer; background:rgb(230,240,235); }
.cats:hover { color:#006633; }
.cname	{ font-size:calc(.5vw + 7px); 15px; white-space:nowrap; }
.cname:hover { color:#006633; fill:#006633; }
.svg	{ width:2vw; height:2vw; margin-top:2px; } 

#main_cat_img { z-index:2; width:100%; height:auto; aspect-ratio:9/3; border:1px solid #666; border:1px solid #999; border-left:0; border-right:0; }
.SliderDiv    { z-index:9; position:absolute; top:10px; width:100%; height:auto; border:1px solid #red; font-size:100px; }

.subs	{ z-index:1; position:absolute; font-size:calc(.5vw + 5px); display:none; height:0px; padding:5px; text-align:left; background:rgb(230,240,235); }
.sub	{ width:auto; font-size:calc(.5vw + 5px); text-align:left; background:rgb(230,240,235); cursor:pointer; padding:.5vw; white-space:nowrap; border:1px solid rgb(230,240,235); border-radius:5px; }
.sub:hover { background:white; border:1px solid #73AB8F; }

#fullmenu { position:fixed; z-index:100; top:0px; left:-260px; width:250px; height:100%; padding:10px; display:block; background:#444; text-align:left; overflow-Y:scroll;
		scrollbar-color: #666 #444;
		scrollbar-width: thin; }
#menu_back { cursor:pointer; color:white; padding-bottom:10px; }

.mcat_plus { display:inline-block; width:10px; }
.mcat	{ font-size:calc(.5vw + 10px); color:white; padding:7px; margin-top:2px; cursor:pointer; border-radius:4px; }
.mcat:hover { background: #666; }
.msubs	{ display:none; cursor:pointer; }
.msub	{ font-size:calc(.5vw + 9px); color:#BBB; padding:2px 5px 2px 5px; }
.msub:hover { background:#666; color:white; border-radius:4px; }

/* Search Styles */
#search		{ padding:20px; background:rgb(230,240,235); border-bottom:1px solid #CCC; text-align:center; }
.search_cols	{ column-count:6; gap:5px; }
@media (max-width: 2200px) { .search_cols { column-count:6; } }
@media (max-width: 1900px) { .search_cols { column-count:5; } }
@media (max-width: 1600px) { .search_cols { column-count:4; } }
@media (max-width: 1300px) { .search_cols { column-count:3; } }
@media (max-width: 1000px) { .search_cols { column-count:2; } }
@media (max-width:  700px) { .search_cols { column-count:1; } }
.search_items	{ width:100%; heigth:auto; cursor:pointer; margin-bottom:5px; }
.earch_imgs	{ width:100%; height:auto; }

#signup	 { background:#DDD; color:#006633; font-weight:normal; outline:none; padding:10px; text-align:center; }
#signup1 { color:#666; display:block; padding:3px; }
#signup2 { color:#666; display:none;  padding-right:5px; white-space:nowrap; }
@media (min-width: 500px) { #signup1 { display:none; } #signup2 { display:block; } }

textarea { width:100%; padding:2%; border:1px solid #CCC; border-radius:5px; }
input[type='text'], input[type='file'], input[type='number'], input[type='range'], input[type='password'], select { width:100%; padding:2px; font-size:1rem; padding:5px; border:1px solid #CCC; border-radius:5px; background:white; color:black; }

.submit	{ -webkit-appearance: none; width:100%; padding:5px 10px 5px 10px; margin-left:2px; border:0; border-radius:5px; background:#006633; color:white; text-align:center; font-weight:bold; cursor:pointer; }
.update	{ -webkit-appearance: none; width:100%; padding:8px 15px 8px 15px; border:0; border-radius:5px; background:#006633; color:white; text-align:center; font-weight:bold; cursor:pointer; }
.delete	{ -webkit-appearance: none; width:100%; padding:8px 15px 8px 15px; border:0; border-radius:5px; background:#FF0000; color:white; text-align:center; font-weight:bold; cursor:pointer; }
.reset	{ -webkit-appearance: none; width:100%; padding:8px 15px 8px 15px; border:0; border-radius:5px; background:#999999; color:white; text-align:center; font-weight:bold; cursor:pointer; }

.upsmall { -webkit-appearance:none; font-size:10px; border:0; border-radius:5px; padding:5px; background:#006633; color:white; text-align:center; cursor:pointer; }

#main	{ padding:15px 40px 20px 40px; margin:auto auto; max-width:3000px; }

h1, h1 a { font-size:calc(32px + 1vw); font-weight:normal; color:#000; text-decoration:none; margin-top:5px; }
h2, h2 a { font-size:calc(24px + 1vw); font-weight:normal; color:#000; text-decoration:none; margin-top:5px; }
h3, h3 a { font-size:calc(18px + 1vw); font-weight:normal; color:#000; text-decoration:none; margin-top:5px; }
h4, h4 a { font-size:calc(16px + 1vw); font-weight:normal; color:#000; text-decoration:none; margin-top:5px; }
h5, h5 a { font-size:calc(12px + 1vw); font-weight:normal; color:#000; text-decoration:none; margin-top:5px; }

.h1, .h1 { font-size:calc(36px + 1vw); font-weight:normal; color:#000; text-decoration:none; }

ol, ul	{ line-height:150%; }

/* Category Page - Pro Panels */
#pros	{ display:grid; grid-template-columns:repeat(5,1fr); grid-column-gap:15px; grid-row-gap:15px; margin-top:10px; }
@media (max-width:1200px) { #pros { grid-template-columns:repeat(4,1fr); } }
@media (max-width: 900px) { #pros { grid-template-columns:repeat(3,1fr); } }
@media (max-width: 600px) { #pros { grid-template-columns:repeat(2,1fr); } }
@media (max-width: 420px) { #pros { grid-template-columns:repeat(1,1fr); } }
.pros { font-size:calc(9px + .5vw); width:100%; padding:15px; border:1px solid #CCC; border-radius:10px; background:#EEE; cursor:pointer; }
.pros b	{ font-size:calc(9px + .5vw); }
.SAVEprsq	{ width:100%; height:0; padding-bottom:100%; border:1px solid #CCC; border-radius:10px; background:#FFF; margin-bottom:10px; overflow:hidden; text-align:center; }
.prsq	{ aspect-ratio:1/1; width:100%; border:1px solid #CCC; border-radius:10px; background:#FFF; margin-bottom:10px; overflow:hidden; text-align:center; }
.pros img { aspect-ratio:1/1; max-width:100%; max-height:100%; }

.fabs1	{ font-size:calc(9px + .5vw); width:100%; height:auto; padding:15px; border-radius:10px; background:#EEE; }
.fabs2	{ margin:0px; width:100%; height:auto; }
.fabs2 img { border-radius:10px; width:100%; height:auto; }

/* Pros Page - two columns */
#pro	{ display:inline-block; width:100%; }
#pro1	{ float:right; width:calc(50% - 5px); padding:5px; }
#pro2	{ float:left;  width:calc(50% - 5px); padding:5px; line-height:130%; text-align:center; }
#pro3	{ float:right; width:calc(50% - 5px); padding:5px; line-height:130%; }
@media (max-width: 700px) { #pro1, #pro2, #pro3 { clear:both; width:100%; } }

#proImg { max-width:500px; max-height:500px; cursor:pointer; }
.other_pics { width:100px; height:auto; margin:10px 10px 0 0; cursor:pointer; }

.covers_only { margin-top:-20px; color:black; font-size:2rem; }

.sq	{ float:left; width:42px; height:42px; border:2px solid #FFF; cursor:pointer; }
.sq:hover { border:2px solid #FFFF00; }
.sq img { width:100%;  height:100%;  }
.sq_120 { width:120px; height:120px; }
.add_cart { -webkit-appearance: none; width:100%; padding:5px 10px 5px 10px; margin-left:2px; border:0; border-radius:5px; background:#006633; color:white; text-align:center; font-weight:bold; cursor:pointer; }
#prc	{ padding:0 0 5px 0; margin-bottom:10px; border-bottom:1px solid #006633; color: #006633; }
.specs	{ float:left; padding-right:20px; }
#thumb	{ position:absolute; width:100px; height:100px; border:1px solid #666; padding:5px; background:white; }
#thumb img { width:100%; height:auto; }

#hires	{ display:flex; position:fixed; left:0px; top:0px; width:100%; height:100%; justify-content:center; align-items:center; cursor:pointer; }
#hifade { z-index:2; position:fixed; top:0; left:0; width:100%; height:100%; background:black; opacity:.8; }
#hires img { z-index:3; width:100%; max-width: 100%; max-height:100%; -o-object-fit:contain; object-fit:contain; }

#fabs		{ display:inline-block; width:100%; height:128px; overflow:hidden; }
#fins, #lams	{ display:inline-block; width:100%; }
#see	{ font-size:90%; width:150px; text-align:left; cursor:pointer; margin:-3px 0 10px 2px; }
#more	{ font-size:100%; }

fieldset { color:#006633; border:1px solid #006633; border-radius:5px;  }

#cart	{ font-size:10px; position:fixed; background:white; top:40%; left:50%; width:250px; margin-left:-125px; border:1px solid #666; border-radius:10px; box-shadow: 5px 5px 20px black; padding:15px; text-align:center; }
.cart_button { background:#0066FF; width:90px; padding:10px; border-radius:10px; color:white; text-decoration:none; cursor:pointer; font-size:11px; }

/* cart.htm */
strike			{ color:#777; }
#cart td, #cart a	{ font-size:18px; }
#cart_tbl th		{ font-size:18px; font-weight:bold; }
#cart_tbl td, nobr	{ font-size:18px; }
#cart_tbl b		{ font-size:18px; }

#subtbl th, #subtbl td, #subtbl * { font-size:11px; }

.cart_qty	{ font-size:12px; width:60px; height:25px; border:1px solid #CCC; text-align:left; border:0; background:transparent; margin-top:-7px; }
#cart_state 	{ font-size:12px; width:60px; height:25px; border:1px solid #CCC; text-align:left; }
#cart_zip	{ font-size:12px; width:60px; height:25px; border:1px solid #CCC; text-align:left; }
#cart_county	{ font-size:12px; width:60px; height:25px; border:1px solid #CCC; text-align:left; }
#nc1, #nc2	{ font-size:12px; }

#cart1		{ background:white; float:left; width:calc(33.3% - 20px); margin:0 20px 0 0; }
#cart2		{ background:white; float:left; width:calc(33.3% - 20px); margin:0 20px 0 0; }
#cart3		{ background:white; float:left; width:33.3%; margin:0; }
.cart4		{ font-size:18px; font-weight:normal; color:#000; text-decoration:none; margin:-3px 0 3px 0; }
@media (max-width: 950px) {
	#cart1		{ clear:both;	float:left;	width:100%;		margin: 0px 0 8px 0; }
	#cart2		{ clear:both;	float:left;	width:calc(50% - 8px);	margin:20px 0 8px 0; }
	#cart3		{		float:right;	width:calc(50% - 8px);	margin:20px 0 8px 0; }
}
@media (max-width: 600px) {
	#cart1, #cart2, #cart3 { clear:both; width:100%; }
}


/* Bottom of all pages */
#copy	{ font-size:calc( 9px + .20vw); color:#666; width:100%; background:#EEE; padding:20px 20px 150px 20px; text-align:center; border-top:1px solid #CCC; }
#exec	{ font-size:calc( 9px + .20vw); color:#666; }

#pans	{ display:inline-block; width:100%; }

/* Panel 2x */
#pan1-2	{ float:left;  width:calc(50% - 5px); padding:10px; background:rgb(240,250,235); border:1px solid #CCC; border-radius:10px; margin:0 0 10px 0; }
#pan2-2	{ float:right; width:calc(50% - 5px); padding:10px; background:rgb(240,250,235); border:1px solid #CCC; border-radius:10px; margin:0 0 10px 0; }

/* Footer Pages 4x */
#footer		{ display:table; max-width:1200px; text-align:center; background:EEE; margin:auto auto; }
.footer	{ display:table-cell; text-align:left; padding:20px; font-size:calc(10px + .25px); color:#666; text-decoration:none; white-space:nowrap; }
.footer_title	{ font-size:calc(12px + .25px); font-weight:bold; font-stretch:condensed; margin-bottom:-10px; color:#333; white-space:nowrap; }
.footer_links a { font-size:calc(10px + .25px); color:#666; text-decoration:none; }
@media (max-width: 460px) {
	.footer { display:block; padding:10px 0 0 0; }
}

/* Gallery Columns */
.Gouter  { -moz-column-count:4; -webkit-column-count:4; column-count:4;
	  -moz-column-gap:5px; -webkit-column-gap:5px; column-gap:-5px; }
.Gitems  { display:inline-block; margin:0 0 15px 0; width:100%; border:1px solid #666; }
@Gedia (max-width:300px) { .outer { -moz-column-count:3; -webkit-column-count:3; column-count:3; } }
@Gedia (max-width:250px) { .outer { -moz-column-count:2; -webkit-column-count:2; column-count:2; } }
@Gedia (max-width:100px) { .outer { -moz-column-count:1; -webkit-column-count:1; column-count:1; } }

/* Admin Order Panels 2x */
#ord1-2	{ float:left;  width:calc(40% - 5px); padding:10px; background:rgb(240,250,235); border:1px solid #CCC; border-radius:10px; margin:0 0 10px 0; }
#ord2-2	{ float:right; width:calc(60% - 5px); padding:10px; background:rgb(240,250,235); border:1px solid #CCC; border-radius:10px; margin:0 0 10px 0; }

/* PayPal */
#paypal1  { margin:0 10px 10px 0; max-width:450px; border:1px solid #CCC; border-radius:10px; padding:10px; }
#paypal2  { margin:0 10px 10px 0; max-width:450px; }


/* GRID STUFF */
:root {
	--fade1:	rgb(255,255,255);
	--fade2:	rgb(220,220,220);
	--border:	rgb(200,200,200);
	--blue:		rgb( 25,100,250);
	--rowbk:	rgb(245,245,245);
	--grback:	rgb(240,240,240);
	--col_color:	rgb(50,50,50);
	--col_order:	rgb(255,225,125);
	--txtbk:	rgb(255,255,230);
	--hover:	rgb(255,255,150);
}

/* Pagination */
#grid_page_tbl		{ font-size:80%; border:1px solid #CCC; border-radius:5px; padding:1px; }
#grid_page_tbl	td	{ height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:center; border:0px; }
.grid_page		{ font-size:85%; height:100%; padding:3px 5px 3px 5px; cursor:pointer; text-align:center; color:black; }
.grid_page_on		{ font-size:85%; height:100%; padding:3	px 5px 3px 5px; cursor:pointer; text-align:center; color:white; text-align:center; background:var(--blue); border-radius:5px; }
#grid_page_cell1	{ font-size:85%; padding:0; text-decoration:none; color:blue; padding:0 10px 0 10px; white-space:nowrap; }
#grid_page_cell2	{ font-size:85%; padding:0; white-space:nowrap; }

#gcont	{ width:100%; padding:10px; border:1px solid var(--border); border-radius:10px; background:var(--rowbk); }
.grid	{
	width:100%;
	display: grid;
	overflow:hidden;
	text-align: left;
	background: var(--grback);
	grid-gap:1px;
	cursor:pointer;
	border:1px solid var(--border);
	margin-top:-1px;
}

.grid_cols {	font-size:80%; white-space:nowrap; text-align:left; background:white; color:var(--col_color); overflow:hidden; gtf-text-overflow:ellipsis; padding:calc(4px + .05vw);
		background: var(--grback) ;
		background: -moz-linear-gradient(top,    var(--fade1) 0%, var(--fade2) 100%);
		background: -webkit-linear-gradient(top, var(--fade1) 0%, var(--fade2) 100%);
		background: linear-gradient(to bottom,   var(--fade1) 0%, var(--fade2) 100%); }

.grid_col_order { background: var(--col_order); }

.grid_search_cell	{ white-space:nowrap; overflow:hidden; padding:0; border:0; background:white;		}
.grid_search_txt	{ font-size:85%; width:100%; background:var(--txtbk); border:0; outline:none;		padding:4px 4px 4px 4px; }
.grid_cell		{ font-size:85%; white-space:nowrap; text-align:left; color:#000; overflow:hidden;	padding:4px; }

.grid_row_User	{ display:contents; position:absolute; }
.grid_row_Admin	{ display:contents; position:absolute; }

.grid_row_User:nth-child(odd)  > div { background-color:rgb(255,255,255); }
.grid_row_User:nth-child(even) > div { background-color:rgb(255,255,255); }

.grid_row_Admin:nth-child(odd)  > div { background-color:rgb(225,255,225); }
.grid_row_Admin:nth-child(even) > div { background-color:rgb(225,255,225); }


.grid_row	{ display:contents; position:absolute; }
.grid_row_new	{ display:contents; position:absolute; font-weight:bold; }

.grid_row:nth-child(odd)  > div { background-color: #FFFFFF; }
.grid_row:nth-child(even) > div { background-color: var(--rowbk); }

.grid_row:hover		  > div { background-color: var(--hover); }

.grid_row_new:nth-child(odd)	> div { background-color: #FFFFFF; }
.grid_row_new:nth-child(even)	> div { background-color: var(--rowbk); }
.grid_row_new:hover		> div { background-color: var(--hover); }

.grid_delete_cell		{ text-align:center; color:red; background:#FFF; padding:2px 2px 0 0; }

/* Content Manager Site Map */		
.tree div { font-size:12px; }
.tree ul { margin:0px 0px 0px -15px; list-style:none; }
.tree ul li { position:relative; line-height:22px; font-size:10px; }
.tree ul li:before { position:absolute; left:-15px; top:0px; content:''; display:block; border-left:1px solid #999; border-bottom:1px solid #999; width:10px; height:9px; }
.tree ul li:after { position:absolute; left:-15px; bottom:-7px; content:''; display:block; border-left:1px solid #999; height:100%; }
.tree ul li.root { margin:0px 0px 0px -20px; }
.tree ul li.root:before { display:none; }
.tree ul li.root:after { display:none; }
.tree ul li:last-child:after { display:none; }
.treeY { text-decoration:none; color:#000000; border:1px solid #FFF; }
.treeN { text-decoration:none; color:#666666; border:1px solid #EEE; }
.treeY:hover { border:1px solid #CCC; background-Color:#FFFFCC; }
.treeN:hover { border:1px solid #CCC; background-Color:#FFFFCC; }
.inputTxt { width:100%; height:24px; border:0px; outline:none; min-width:300px; }
.texta { width:99%; height:20px; border:0px; padding-top:5px; font-family:arial,helvetica; outline:none; }