/* ########################################################## */



html, body {
	margin: 0px;
	/* background: #f6f4d1; */
	background: #fafae7;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
}




div#groundingDiv {
	height: 1px;
}



div#page {
	width: 100%;
	margin: 0px
}

@media only screen and (min-width:  1220px) {
	div#page {width: 1200px; margin: 0px auto;}
}


div#groundingDiv{
	background: #fafae7;
}





a {
	text-decoration: underline;
	color: #773380;
}


hr {
	padding: 0px;
	margin: 0px;
	border: 0px;
}



/* ########################################################## */

div#header {
	background: #fafae7;
	position: fixed;
	width: 100%;
	height: 118px;
	margin-top: -1px;
	z-index: 100;
}


@media only screen and (min-width:  1220px) {
	div#header {width: 1200px; margin: 0px auto;}
}




div#headerLogo, 
div#headerTrug, 
div#headerLogin, 
div#headerMenu {
	width: 60px;
	height: 60px;
}

div#headerLogo img, 
div#headerTrug img, 
div#headerLogin img, 
div#headerMenu img {
	height: 50px;
}



div#headerLogo, 
div#headerMenu {
	float: left;
}

div#headerTrug, 
div#headerLogin {
	float: right;
}

div#headerTrug {
	width: 70px;
}
div#headerTrug a {
	text-decoration: none;
}



span#trugCount {
	position: relative;
	bottom: 27px;
	left: 17px;


	background-color: #cc0000;
	color: white;
	font-size: 10px;
	border-radius: 10px;
	padding: 3px 5px;
	margin-bottom: -20px;
}



div#headerLogin {
	margin-left: 20px;
}

div#headerLogin a {
	text-decoration: none;
}

span#loginUser {
	position: relative;
	bottom: 27px;
	left: 0px;


	background-color: #007700;
	color: white;
	font-size: 10px;
	border-radius: 10px;
	padding: 3px 5px;
	margin-bottom: -20px;
}










div#headerSearch {
	margin-top: 62px;
}

div#headerSearch form {
	background-color: #ffffff;

display:flex;
flex-direction:row;

	width: 80%;
	margin-left: 10%;
	border: solid 1px green;
	border-radius: 5px;
	padding: 5px;
	height: 30px;
	
}


.hiddenLabels {
	display: none;
}


div#headerSearch form label {

	padding-top: 5px;

}

div#headerSearch form input {

border:none;

}
div#headerSearch form input[type=text] {

flex-grow:2;

}


div#headerSearch form input:focus {

outline: none;

}




form:focus-within { 

outline: 1px solid green;

}

button {

border:1px solid green;
background:blue;
color:white;

width: 30px;

}










div#headerSearch img {
	height: 25px;
}





div#searchTarget {
	position: fixed;
	display: none;
	width: 100vw;
	max-width: 1200px;
	height: 80vh;
	margin-top: 112px;
	z-index: 10;
	overflow-y: scroll;
	z-index: 101;
}
div#searchCloser {
	background: rgba(0, 0, 0, 0.4);
	float: right;
	width: 15vw;
	max-width: 219px;
	margin-right: 0;
	height: 80vh;
	z-index: 10;
}




div#searchCloser a {

	/* color: #ffffff; */
	/* text-decoration: none; */
}
div#searchResults {
	background-color: #773380;




	background-color: #f6f4d1;




	/* position: fixed; */
	left: 0%;
	width: 79vw;
	max-width: 960px;
	height: 80vh;
	z-index: 10;
	overflow-y: scroll;
}


@media only screen and (min-width:  1220px) {

	div#searchCloser {
		width: 15%;
	}
	div#searchResults {
		width: 79%;
	}


}





.closerX {
	margin: 30px 20px;
	font-size: 30px;
	font-weight: bold;
	display: inline-block;
	text-decoration: none;
	color: #ffffff;
	background-color: #000000;
	border-radius: 108px;
	padding: 2px 13px 5px 13px;
	font-family: Arial, sans-serif;

}

@media only screen and (min-width:  400px) {.closerX {font-size:  30px; padding: 2px 17px 5px 17px;}}
@media only screen and (min-width:  500px) {.closerX {font-size:  40px; padding: 2px 14px 5px 14px;}}
@media only screen and (min-width:  600px) {.closerX {font-size:  52px; padding: 2px 23px 5px 23px;}}

/*
@media only screen and (min-width:  700px) {.closerX {font-size:  72px; padding: 2px 26px 5px 26px;}}
@media only screen and (min-width:  800px) {.closerX {font-size:  84px; padding: 2px 30px 5px 30px;}}
@media only screen and (min-width:  900px) {.closerX {font-size:  96px; padding: 2px 35px 5px 35px;}}
@media only screen and (min-width: 1000px) {.closerX {font-size: 108px; padding: 2px 40px 5px 40px;}}
*/



div#searchTarget img {
	vertical-align: top;
}




div#VerticalMenu {
	position: fixed;
	display: none;
	width: 100vw;
	max-width: 1200px;
	height: 100vh;
	z-index: 10;
	overflow-y: scroll;
	font-size: 14px;
	z-index: 101;
}
div#VerticalMenuCloser {
	background: rgba(0, 0, 0, 0.7);
	float: right;
	width: 20vw;
	max-width: 219px;
	height: 100vh;
	z-index: 10;
}
div#VerticalMenuCloser a {
	color: #ffffff;
	text-decoration: none;
}
div#VerticalMenuContent {
	background-color: #773380;



	background-color: #f6f4d1;



	left: 0%;
	width: 77vw;
	max-width: 960px;
	height: 95vh;
	z-index: 10;
	overflow-y: scroll;
}










@media only screen and (min-width:  1220px) {


	div#VerticalMenuCloser {
		width: 15%;
	}
	div#VerticalMenuContent {
		width: 80%;
	}

}






/* ########################################################## */




div#horizontalMenuMobile {
	margin-top: 10px;
	background-color: #773380;
	overflow-x: scroll;
	white-space: nowrap;
	z-index: 100;
}


div#horizontalMenuDesktop {
	margin-top: 10px;
	background-color: #773380;
	z-index: 100;
}

div#horizontalMenuDesktop a , div#horizontalMenuMobile a {
	color: #ffffff;
	display: inline-block;
	padding: 4px;
}

div.pop-positioner {
	position: relative;
	display: inline-block;
}

div.linkDropDown {
	display: none;
	position: absolute;
	width: 220px;
	background-color: #773380;
	padding: 10px;
	top: 20px;
	left: 10px;
}



div.pop-positioner a.masterLink {
	margin-right: 40px;
}




@media only screen and (min-width:    1px) {
	div#horizontalMenuMobile {display: block;}
	div#horizontalMenuDesktop {display: none;}
}
@media only screen and (min-width:    960px) {
	div#horizontalMenuMobile {display: none;}
	div#horizontalMenuDesktop {display: block;}
}








/* ########################################################## */



.masterLink, .subLink {
	color: #ffffff;



	color: #773380;




	text-decoration: none;
}
div#VerticalMenu .masterLink, div#VerticalMenu .subLink {
	display: block;
}
div#VerticalMenu .masterLink {
	padding: 4px 4px 4px 10px;
}
div#VerticalMenu .subLink {
	padding: 4px 4px 4px 30px;
}
div#horizontalMenu .subLink {
	display: inline-block;
	padding: 4px 10px 4px 10px;
}





/* ########################################################## */




div#content {
	margin-top: 140px;
	padding: 4px;
}




div#resultsContainer {
	padding: 5px;
}

a.searchLink {
	color: #ffffff;



	color: #773380;





}




div#breadCrumbs {
	
}
div#breadCrumbs a {
	color: #773380;
}





a#filterLink, a#relatedLink {
	display: inline-block;
	float: left;
	width: 120px;
	margin: 5px 0px 5px -5px;
	padding: 5px;
	background-color: #773380;
	color: #ffffff;
	border-radius: 0px 10px 10px 0px;
}
a#contentLink {
	display: inline-block;
	float: right;
	width: 120px;
	margin: 5px -4px 5px 0px;
	padding: 5px;
	background-color: #773380;
	color: #ffffff;
	border-radius: 10px 0px 0px 10px;
}
div#filterExtra, div#productRelated {
	display: none;
	background-color: #f6f4d1;
	padding: 5px;
	line-height: 1.4;
}
div#filterExtra a, div#productRelated a {
	color: #773380;
	text-decoration: underline;
}
div#contentExtra, div#productRelated {
	display: none;
}





@media only screen and (min-width:    960px) {
	div#contentExtra {display: block;}
	a#contentLink {display: none;}
}

























div.search_results {
	margin-bottom: 10px;
}

div.search_results a {
	
}

div.search_results a img {
	margin: 5px 10px 5px 0px;
}


a.search_result_image {
	float: left;
	display: block;
}







/* Category Content B HTML Hide */
#B1 {
	display: none;
}


.categoryMainImage {
	padding-left: 10px;
	float: right;
	width: 200px;
	height: 200px;
}

@media only screen and (min-width:    1100px) {
	.categoryMainImage {width: 300px; height: 300px;}
}



.cat2024listviewinner {
	min-height: 105px;
}
.cat2024listviewinner h2 {
	font-size: 14px;
	margin-block-end: 0.4em;
}
.cat2024listviewinner p {
	margin-block-start: 0.4em;
}
.cat2024listviewinner h2 a {
	color: #773380;
	text-decoration: none;
}
.cat2024listviewinner p a {
	color: #773380;
}
.cat2024listviewinner p a img {
	display: block;
	float: left;
	margin: 5px 10px 5px 0px;
}



.form_holder {
	float: right;
	width: 152px;
}





.priceOnCat {
	display: inline-block;
	font-size: 12px;
	padding: 2px 2px 16px 2px;
}






.purchaseButton {
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 12px;
	width: 121px;
	height: 40px;
	margin: 7px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	padding-left: 5px;
	padding-right: 5px;
	color: #ffffff;
	outline: none;
}
.buyNow {
	border: 1px solid #4a7702;
	background: #4a7702;
	color: #ffffff;
}
.preOrder {
	border: 1px solid #ef9b45;
	background: #ef9b45;
	background: #7f4b22;
}

.buyNow:hover {
	text-decoration: none;
	border: 1px solid #4a7702;
	background: #c6cf50;
	color: #ffffff;
}


.preOrder:hover {
	text-decoration: none;
	border: 1px solid #ef9b45;
	background: #fad797;
	color: #ffffff;
}

.notAvailable {
	border: 1px solid #ff0000;
	background: #cc3333;
}
.notAvailable:hover {
	text-decoration: none;
	border: 1px solid #ff0000;
	background: #aa3333;
	color: #ffffff;
}
















.dropt{
	position: relative;
	z-index: 55;
}

.dropt:hover {
	background-color: transparent;
	z-index: 65;
}
.dropt span {
	/*CSS for enlarged image*/
	position: absolute;
	background-color: #f6f4d1;
	width: 100px;
	padding: 5px;
	left: -1000px;
	border: 1px solid #d7d53f;
	visibility: hidden;
	color: black;
	text-decoration: none;
		border: 1px solid #d7d53f;
		-moz-border-radius: 5px;
		border-radius: 5px;
	z-index: 50;
}
.dropt span img {
	/*CSS for enlarged image*/
	border-width: 0;
	padding: 2px;
}
.dropt:hover span {
	 /*CSS for enlarged image on hover*/
	visibility: visible;
	top: 105px;
	left: -90px; /*position where enlarged image should offset horizontally */
}


.dropt img {
	/*
	margin-right: 5px;
	*/
}
.dropt a {
	display: inline-block;
	margin-left: 3px;
	margin-right: 3px;
}







.darkGreen {
	color: #4a7702;
}
.darkOrange {
	color: #7f4b22;
}
.darkRed {
	color: #cc3333;
}
.bold {
	font-weight: bold;
}










/* ########################################################## */
/* ## Product Image display MOBILE                         ## */
/* ########################################################## */

/* The GRANDPARENT */
div#productImageHolderContainerPhone {
	margin-left: 5%;			/* Move the box off the LEFT margin */
	width: calc(90vw);			/* 90% of the WIDTH of the ViewPort */
	height: calc(90vw);			/* 90% of the WIDTH of the ViewPort - YEAH - I DO MEAN WIDTH - You can set the HEIGHT relative to the WIDTH */
	overflow-x: scroll;			/* This is going to scroll left&right */
	overflow-y: hidden;			/* No Vertical scroll */
}

/* The PARENT */
#productImageHolderRowPhone {
	height: calc(90vw);			/* This TOO is going to have a HEIGHT of 90% the WIDTH */
	white-space: nowrap;		/* Make sure we don't WRAP, as we want ONE LINE of these */
}

/* The CHILD */
#productImageHolderPhone {
	position: relative;			/* Relative to the Partent (The the spans can be absolute to this) */
	width: calc(90vw);			/* Make these the same width as the GrandParent each */
	float: left;				/* Make a long horizontal line of these */
	height: calc(90vw);			/* Make them the same height as the GrandParent */

	display: flex;
	justify-content: center;
	align-items: center;
}

/* The Image */
#productImageHolderPhone img {
	max-width: 10%;				/* Limt the MAX Width */
	max-height: 10%;			/* Limt the MAX Height */
	transform: scale(10);		/* Make it large enough to fit the box */
}

/* The Navigation SPANS */
#productImageHolderRowPhone span {
	position: absolute;				/* Position is ABSOLUTE compared to the CHILD's RELATIVE */
	background: rgba(0,0,0,0.3);	/* Semi-Transparent background */
	color: rgba(255,255,255,0.7);	/* Semi-Transparent Sign */
	width: 32px;					/* Width for this block-ish */
	top: calc(50vw + -40px);		/* Half way down (works nicely for portrait and landscape) */
	height: 40px;					/* Height ofr this block */
	display: inline-block;			/* Block so we can pad it etc */
}

/* LEFT Span */
#productImageHolderRowPhone span.L {
	left: calc(0vw + 0px);			/* Bang against the LEFT */
}

/* RIGHT Span */
#productImageHolderRowPhone span.R {
	left: calc(90vw + -34px);		/* Bang against the RIGHT (The whole WIDTH, and back 34px) */
}

/* LINKS in SPANS */
#productImageHolderRowPhone span a {
	display: block;					/* Block them */
	width: 32px;					/* Same as SPAN */
	height: 40px;					/* Same as SPAN */
	color: rgba(255,255,255,0.3);	/* Semi-Transparent Sign */
	text-decoration: none;			/* No underline */
	font-size: 30px;
	padding-left: 2px;
}


/* ########################################################## */
/* ## Product Image display TABLET                         ## */
/* ########################################################## */


/* The GRANDPARENT */
div#productImageHolderContainerTablet {
	margin-left: 10px;			/* Move the box off the LEFT margin */
	width: 300px;				/* 2/3 of the WIDTH of the ViewPort */
	height: 300px;				/* 2/3 of the WIDTH of the ViewPort - YEAH - I DO MEAN WIDTH - You can set the HEIGHT relative to the WIDTH */
	overflow-x: scroll;			/* This is going to scroll left&right */
	overflow-y: hidden;			/* No Vertical scroll */
}

/* The PARENT */
#productImageHolderRowTablet {
	height: 300px;				/* This TOO is going to have a HEIGHT of 2/3 the WIDTH */
	white-space: nowrap;		/* Make sure we don't WRAP, as we want ONE LINE of these */
}

/* The CHILD */
#productImageHolderTablet {
	position: relative;			/* Relative to the Partent (The the spans can be absolute to this) */
	width: 300px;				/* Make these the same width as the GrandParent each */
	float: left;				/* Make a long horizontal line of these */
	height: 300px;				/* Make them the same height as the GrandParent */

	display: flex;
	justify-content: center;
	align-items: center;
}

/* The Image */
#productImageHolderTablet img {
	max-width: 10%;				/* Limt the MAX Width */
	max-height: 10%;			/* Limt the MAX Height */
	transform: scale(10);		/* Make it large enough to fit the box */
}

/* The Navigation SPANS */
#productImageHolderRowTablet span {
	position: absolute;				/* Position is ABSOLUTE compared to the CHILD's RELATIVE */
	background: rgba(0,0,0,0.3);	/* Semi-Transparent background */
	color: rgba(255,255,255,0.7);	/* Semi-Transparent Sign */
	width: 32px;					/* Width for this block-ish */
	top: 130px;						/* Half way down (works nicely for portrait and landscape) */
	height: 40px;					/* Height ofr this block */
	display: inline-block;			/* Block so we can pad it etc */
}

/* LEFT Span */
#productImageHolderRowTablet span.L {
	left: 0px;						/* Bang against the LEFT */
}

/* RIGHT Span */
#productImageHolderRowTablet span.R {
	right: 0px;					/* Bang against the RIGHT (The whole WIDTH, and back 34px) */
}

/* LINKS in SPANS */
#productImageHolderRowTablet span a {
	display: block;					/* Block them */
	width: 32px;					/* Same as SPAN */
	height: 40px;					/* Same as SPAN */
	color: rgba(255,255,255,0.3);	/* Semi-Transparent Sign */
	text-decoration: none;			/* No underline */
	font-size: 30px;
	padding-left: 2px;
}

/* Disposal, if the screen is too wide for this version */
@media only screen and (min-width:    0px) {
	#productImageHolderContainerPhone {display: block;}
	#productImageHolderContainerTablet {display: none;}
}
@media only screen and (min-width:  600px) {
	#productImageHolderContainerTablet {display: block;}
	#productImageHolderContainerPhone {display: none;}
}




#productBasics {
	margin-top: 10px;
	width: calc(90vw);
}

#productBasics h3 {
	margin-top: 0px;
}

#productBasics ul{padding-left: 25px;}


@media only screen and (min-width:    0px) {
	#productBasics {margin-top: 10px;}
	#productBasics {width: calc(90vw);}
}

@media only screen and (min-width:  600px) {
	#productBasics {float: right;}
	#productBasics {margin-top: 0px;}
	#productBasics {width: calc(100vw + -340px);}
	#productBasics {max-width: 860px;}
}


.offerCurrency {
	display: none;
}






#productBuyFormTextBox {
	vertical-align: text-top;
	border: 1px solid #4a7702;
	background: #ffffff;
	height: 21px;
	font-size: 14px;
}


#productBuyFormSubmitButton {
	vertical-align: text-top;
	padding: 0px 10px;
	border: 1px solid #4a7702;
	background: #4a7702;
	color: #ffffff;
	height: 23px;
	font-size: 13px;
}










































/* ########################################################## */
/* ## Boxes like those on the hone page                    ## */
/* ########################################################## */



.box248
	{
	background-color: #f6f4d1;
	padding: 2px;
	width: 100px;
	margin-right: 5px;
	margin-bottom: 5px;
	float: left;
	line-height: 1.6;
	border: 1px solid #d7d53f;
	-moz-border-radius: 5px;
	border-radius: 5px;
	}
.box248 img {width: 83px; height: 44px;}
.box248 h3 {height: 44px;}
.box248 h3 a
{
text-decoration: none;
}


.box248 p {
	font-size: 15px;
}
.box248 p:last-child {display: none;}



#holderOf248s {
	width: 340px;
	margin-left: auto;
	margin-right: auto;
}
#holderOf248s hr {
	width: 100%;
}



@media only screen and (min-width: 750px) {
.box248 {width: 119px;}
.box248 img {width: 100px; height: 50px;}
#holderOf248s {width: 390px;}
}
@media only screen and (min-width: 1020px) {
.box248 {padding: 5px; width: 238px;}
.box248 img {width: 200px; height: 100px;}
.box248 p:last-child {display: block;}
.box248 h3 {height: auto;}
#holderOf248s {width: 767px;}
}





@media only screen and (min-width: 1px) {
iframe {width: 280px; height: 158px}
}
@media only screen and (min-width: 580px) {
iframe {width: 280px; height: 158px}
}
@media only screen and (min-width: 750px) {
iframe {width: 560px; height: 315px}
}
@media only screen and (min-width: 1260px) {
iframe {width: 560px; height: 315px}
}











































/* ########################################################## */
/* ## Contact??? ## */
/* ########################################################## */


.CollectionBox {
	padding: 10px 10px;
	border: solid 2px #aa87b3;
	border-width: 2px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
	.CollectionBox textarea, .CollectionBox select, .CollectionBox input {
		width: 250px;
		margin: 7px;
		border: 1px solid #773380;
		-moz-border-radius: 5px;
		border-radius: 5px;
		padding-left: 5px;
		padding-right: 5px;
	}
	.CollectionBox select {
		padding-left: 2px;
		padding-right: 2px;
	}
	.CollectionBox input[type="checkbox"], .CollectionBox input[type="radio"] {
		vertical-align: bottom;
		width: 25px;
		margin: 0px;
		border: 0px solid #773380;
		padding-left: 0px;
		padding-right: 5px;
	}
	.CollectionBox select, .CollectionBox input {
		height: 25px;
	}
	.CollectionBox textarea {
		height: 100px;
	}

	.CollectionBox label.checkbox {
		padding-bottom: 8px;
	}




input.required
	{
	border: 1px solid #ff0000;
	}



@media only screen and (min-width: 375px) {



	.CollectionBox textarea, .CollectionBox select, .CollectionBox input {
		width: 325px;
	}


}







#UpdateForm div label {
	display: inline-block;
	width: 300px;
}

.dataPair {
	height: 40px;
}
.requiredOrNot {
	display: none;
	padding-top: 12px;
	height: 13px;
	width: 80px;
	float: right;
	text-align: left;
}




@media only screen and (min-width: 640px) {
	#UpdateForm div label {
		width: 150px;
	}
	.dataPair {
		height: 25px;
	}
	.requiredOrNot {
		display: block;
	}
}
@media only screen and (min-width: 920px) {
}








/* ########################################################## */
/* ## Trug ## */
/* ########################################################## */


.BigPurple[type="submit"] {
	margin-left: 5px;
	vertical-align: text-top;
	padding: 0px 10px;
	border: 1px solid #773380;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background: #773380;
	color: #ffffff;
	height: 23px;
	font-size: 13px;
}
.BigPurple[type="submit"]:hover {
	border: 1px solid #773380;
	background: #aa87b3;
	color: #ffffff;
}

/* Trug */

.Trug
	{
	padding: 20px 2px;
	border: solid 2px #aa87b3;
	border-width: 2px;
	-moz-border-radius: 30px;
	border-radius: 30px;
	}
	.TrugLine, .TrugLineOn
		{
		height: 75px;
		padding: 10px 5px;
		}
	.TrugLineOn
		{
		background-color: #f6f4d1;
		}
		.TrugLine img
			{
			float: left;
			padding-right: 10px;
			}
			.TrugLine input
				{
				margin-right: 10px;
				padding-top: 0px;
				vertical-align: text-top;
				border: 1px solid #773380;
				-moz-border-radius: 5px;
				border-radius: 5px;
				background: #ffffff;
				height: 19px;
				font-size: 11px;
				text-align: center;
				}


			.TrugLine input[type="submit"]
				{
				margin-right: 10px;
				vertical-align: text-top;
				padding: 0px 10px;
				border: 1px solid #773380;
				-moz-border-radius: 5px;
				border-radius: 5px;
				background: #773380;
				color: #ffffff;
				height: 19px;
				font-size: 11px;
				}
				.TrugLine input[type="submit"]:hover
					{
					border: 1px solid #773380;
					background: #aa87b3;
					color: #ffffff;
					}

@media only screen and (min-width: 550px) {
	.Trug {padding: 20px 20px;}
	.TrugLine {padding: 10px 35px;}
}

























/* ########################################################## */
/* ## Checkout ## */
/* ########################################################## */










/* The FORM */
#Checkout2021 {
	
}

/* The DIV */
#checkoutTarget {
	
}




#checkoutDebugging {
	border: solid 1px red;
	display: visible;
}



#checkoutTarget input[type=submit], .checkoutButton {
	padding: 5px;
	margin: 5px;
	background-color: #76a23e;
	color: #ffffff;
	border: 1px solid #76a23e;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

.checkoutBackButton {
	font-size: 12px;
	padding: 5px;
	margin: 5px;
	/* background-color: #76a23e; */
	background-color: #c6cf50;
	color: #ffffff;
	border: 1px solid #76a23e;
	-moz-border-radius: 5px;
	border-radius: 5px;
}



.checkoutTypeLink {
	display: inline-block;
	padding: 5px 15px;
	margin: 5px;
	background-color: #76a23e;
	color: #ffffff;
	font-weight: bold;
	font-size: 13px;
	text-decoration: none;

	border: 1px solid #76a23e;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
.pale {
	background-color: #c9deac;
}

.checkoutTypeLink:visited, .checkoutTypeLink:active, .checkoutTypeLink:hover {
	color: #ffffff;
}
.checkoutTypeLink:hover {
	text-decoration: underline;
}

div#C0G, div#C0C, div#C0N {
	margin-bottom: 20px;
}
div#C0G input[type=text], div#C0C input[type=text], div#C0N input[type=text], div#C0G input[type=password], div#C0C input[type=password], div#C0N input[type=password] {
	padding: 5px;
	margin: 5px;
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #773380;
	-moz-border-radius: 5px;
	border-radius: 5px;
	min-width: 220px;
}



div#C0G input[type=submit], div#C0C input[type=submit], div#C0N input[type=submit] {
	padding: 5px;
	margin: 5px;
	background-color: #76a23e;
	color: #ffffff;
	border: 1px solid #76a23e;
	-moz-border-radius: 5px;
	border-radius: 5px;

}



div#AddressForm {
	border: solid 0px #00ff00;
	min-width: 300px;
}
div.formRow {
	border: solid 0px #00ffff;
	width: 380px;
}
div.formRow label {
	display: inline-block;
	min-width: 120px;
}
div.formRow input {
	padding: 5px;
	margin: 5px;
	background-color: #ffffff;
	color: #000000;
	border: 1px solid #773380;
	-moz-border-radius: 5px;
	border-radius: 5px;
}
div.formRow input[type=text], div.formRow input[type=submit] {
	min-width: 220px;
}



#Checkout2021 div textarea {
	width: 300px;
	margin: 3px;
	padding: 3px;
	height: 83px;
	border: 1px solid #773380;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

div.formRow .formNote {
	font-size: 75%;
	width: 100%;
	display: inline-block;
}


.deliveryContaining {
	background-color: #aa87b3;
	color: #ffffff;
	display: inline-block;
	padding: 3px;
}





@media only screen and (min-width: 1px) {
	div#AddressForm {width: 100%;}
	div.formRow {width: 100%;}
}
@media only screen and (min-width: 400px) {
	div#AddressForm {min-width: 300px;}
	div.formRow {width: 380px;}
}


















/* ########################################################## */
/* ## Footer ## */
/* ########################################################## */

/* Notes about Images for the footer */
/* The narrow versions are based on images at their original size (967px) */
/* For this we are going to use a top and bottom and NO middle */
/* This will NOT have a Newsletter background */
/* For the larger version, we are going to up-scale to 1200px (rather than the 1240 we used in the past.) */
/* This will also change to having Newsletter background as an overlay over the whole background */

/* ## Mobile ## */

div#footer {
	background-image: none;
/*
	border: solid 1px #000000;
*/
}



/*
	linear-gradient(45deg, #fec 12%, transparent 0, transparent 88%, #fec 0),
	linear-gradient(135deg, transparent 37%, #edb 0, #edb 63%, transparent 0),
	linear-gradient(45deg, transparent 37%, #fec 0, #fec 63%, transparent 0) #dca;
*/



/* By default the three boxes will be one-above-another. Each with a defained height*/
div#footerNewsLetter, div#footerMenu, div#footerCopyright {
	background-color: #f4dfc1;

background:
	linear-gradient(45deg, #ffeecc77 12%, transparent 0, transparent 88%, #ffeecc77 0),
	linear-gradient(135deg, transparent 37%, #eeddbb77 0, #eeddbb77 63%, transparent 0),
	linear-gradient(45deg, transparent 37%, #ffeecc77 0, #ffeecc77 63%, transparent 0) #ddccaa77;
	background-size: 25px 25px;


	border-radius: 10px;
}
div#footerNewsLetter {
	height: 129px;
}

div#footerCopyright {
}

/* Payment Types will now become a completely separate thing */
div#footerPaymentTypes {
	background: transparent URL(/images/template/footer-2024-bottom.png) no-repeat;
	padding: 180px 0px 5px 0px;
	margin-bottom: 50px;
}

/* Default NewLetter has the top and a huge top padding for the image to sit in */
div#footerNewsLetter {
	/* TOP SLICE IMAGE */
	background: #f4dfc1 URL(/images/template/footer-2024-top.png) no-repeat;
	padding: 225px 5px 5px 5px;
	margin-left: 0px;
	width: auto;
}

div#footerMenu {
/*
	border: solid 1px #00ff00;
*/
}


ul.footerMenuList {
	list-style-type: none;
	margin-top: 0px;
	padding-top: 8px;
	padding-inline-start: 0px;
}
ul.footerMenuList li {
	float: left;
	width: 45%;
	max-width: 200px;
	padding: 6px 1% 6px 4%;
}




div#footerCopyright {
	/* BOTTOM SLICE IMAGE */
	padding: 5px 5px 5px 5px;
}



img.paymentOption {
	margin: 50px auto;
}

/* Not tested yet with PayPal */
div#footerPaymentTypes img {
	float: right;
	height: 56px;
}

@media only screen and (min-width:  500px) {
	img.paymentOption {margin: 5px auto;}
}


@media only screen and (min-width:  960px) {
	/* Footer DIV has the WHOLE background now */
	div#footer {
		background: transparent URL(/images/template/footer-2024-complete-temp.png) 50% 0% no-repeat;
		padding: 205px 0 5px 0;
	}
	/* NewsLetter gets its own image */
	div#footerNewsLetter {
		background: transparent URL(/images/template/footer-mailing-list-2024.png) no-repeat;
		padding: 10px 10px 0px 10px;
		margin-left: calc(50% + -384px);
		width: 189px;
		float: left;
		margin-right: 40px;
	}
	div#footerMenu {
		background: none;
		float: left;
		width: 320px;
		margin-right: 40px;
	}

	ul.footerMenuList li {
		padding: 2px 1% 2px 4%;
	}


	div#footerCopyright {
		background: none;
		padding: 0px 5px 5px 5px;
		float: left;
		width: 187px;
	}
	div#footerPaymentTypes {
		background-image: none;
		padding: 425px 0px 5px 0px;
	}


	img#CardMaster {
		margin-left: calc(50% + -100px);
	}


	div#footerMenu, div#footerCopyright {
		background-color: #f6f4d1;
	}


}







#simple_signup{
	padding: 5px 0px;
}