/*
 * Compressor:
 https://cssminifier.com/

 */

/* content box */
/*
Reuben wants to kill this height 100% on the html element, it adds scroll bars where not expected...
*/
html {
	/* height:100%; */ /* reuben wants to unset this...  DELETE AFTER JULY 2026*/
}
body {

	height:100%;
	width:100%;
	padding:0;
	margin:0;

	/*AJ 19-04-23 - Resolves horizontal scrollbar issue caused by -1rem .row margin CSS*/
	overflow-x:hidden;
}


.verticalAlignMiddle { vertical-align: middle; }



.red { color: red; }
.blue { color: blue; }
.green { color: green; }


.noDecoration { text-decoration: none; border: none; background: none; color: inherit; }
.stretchElement{position:initial;}
.stretchElement:after {position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 45;content: "";} /*allow element boundaries to scale outside element e.g buttons*/



/* Buttons */

.btn, .btn-primary, .btn-default, .btn-small {
	padding: 3px;
    border-radius: 3px;
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    -webkit-transition: all 0.16s ease;
    transition: all 0.16s ease;
}

.btn, .btn-primary, .btn-default {
    padding: 5px 20px;
    font-size: 1.2em;
		line-height: 2em;
    border-radius: 6px;
    white-space: normal; /*Added by default to allow long button text to wrap as screen size reduces*/
}

.btn-small {
	padding: 3px;
    font-size: inherit;
	line-height: inherit;
	border-radius: 3px;
}

.btn-small,
.btn-default {color: #333333;background-color: #d3d3d3;}
.btn-small,
.btn-default:hover {color: #111;background-color: #ccc;border-color: #ccc;}

.btn-primary {color: #ffffff;background-color: #08c9b9 ; border-color: black; }
.btn-primary:hover {color: #ffffff;background-color:#07b0a2; }


button .material-symbols-outlined,
button .material-icons 
{
	font-size: inherit; 
}


/*

a inline button that does not play with line-height

*/
.cmsMoreInfo,
.cmsItem a.moreInfo,
.cmsNavButtons a {
	text-decoration: none !important;
	border: 1px solid #CACACA;
	display: inline-block;
    padding: 1px 5px;
    margin-left: 5px;
	cursor: pointer;
}

/*
	Making nav buttons a bit bigger by default - Reuben April 2023
*/

.cmsNavButtons a {
    margin: 5px;
	padding: 5px 10px;
}

/*
	Default styling for active and hover nav buttons...  Reuben April 2023
*/

.cmsNavButtons a:hover,
.cmsNavActivePage,
.pagenav-active
{
	background: #EEE;
	color: black;
	border: 1px solid #AAA;
	font-weight: 600;
}







#homePageWidget { margin-left: 10px; margin-bottom: 10px; text-align: left;}

#homePageWidget h3 { margin: 0px; padding: 3px 0px 3px 6px; border-bottom: dashed 1px #999999; background-color: #CCCCCC; color: #333333; font-size: 12px; font-weight: bold;}





/*

img 100% causing many issues, but it's important it remains

it is not good to prefix the img with #content, as it needs to be replciated in every img reference...

*/



img {

	max-width: 100%;

	/*image-orientation: none; ignore EXIF*/

}

p>img[align="right"],p>img[align="left"] { max-width: 40%; }



/* fix a general template issue with a 1px td cell */

#container table td .banner img { max-width: none; }




body .hide,
body .hidden,
body .cmsHidden,
.cmsHomePage .hideForHome,
.ProductList .hideForProductList,
body .row.hide,body .row.hidden,body .row.cmsHidden{
	display:none!important;
}


@media (min-width: 560px)  {

	body .hideForDesktop,
	body .mobile,
	.cmsHomePage.hideForHome 
	{
		display:none !important;
	}
}



@media print {

	.noPrint {
	    display:none;
	}

}


@media print {

	/* default layout for product tabs printing to show all information */

 	#productTabUL { display: none; }
	#product-moreinfo .productTabContent { display: block !important; }
	#product-moreinfo .productTabContent h3.printTabHeading { display: block !important; }
}





.clearfloat {
	float: none;
	clear: both;
	margin: 0;
	padding: 0;
	border: none;
	font-size:1px;
}

.cmsFloatContainer {
	clear: both;
	overflow: hidden;
}


@media (min-width: 560px) {

	.floatRight50PC {
		float:right;
		width: 49%;
		margin-left: 1%;
		display:block;
	}

	.floatLeft50PC {
		float:left;
		width: 49%;
		margin-right: 1%;
		display:block;
	}

	.floatRight25PC {
		margin: 0%;
		float:right;
		width: 24%;
		display:block;
	}

	.floatLeft75PC {
		margin: 0%;
		float:left;
		width: 74%;
		display:block;
	}

	.floatRight33PC {
		margin: 0%;
		float:right;
		width: 33%;
		display:block;
	}

	.floatLeft66PC {
		margin: 0%;
		float:left;
		width: 66%;
		display:block;
	}

	.floatLeft40PC {
		margin: 0%;
		float:left;
		width: 39%;
		display:block;
	}

	.floatRight60PC {
		margin: 0%;
		float:right;
		width: 60%;
		display:block;
	}

	.floatLeft20PC {
		margin: 0%;
		float:left;
		width: 20%;
		display:block;
	}

	.floatRight80PC {
		margin: 0%;
		float:right;
		width: 79%;
		display:block;
	}

}



/*.row table td{padding:12px;} default snippet table padding matches editor*/



/*default snippet table padding matches editor -

  exclude template .row as tinymce is affected when looking at live site*/

#cmsPageContainer	.row table td{padding:12px;}

#cmsPageContainer	.row.lastSavedWithTinyMCE table td{padding:0;} /*replicate tinymce when contains .row element but tinymce*/


#securePage { max-width: 600px; margin: auto;}

.warning, .error { border: 1px solid red; padding: 1%; margin: 2% 1%; }

.actionFeedback { border: 1px solid green; padding: 1%; margin: 2% 1%; }



/*

	accordians used faq, product tabs, and search filters.

*/

		.accordianItem { position:relative; border-bottom: 1px solid #999; }
		.revealable {display: none !important; }
		.clickToReveal { cursor: pointer; }
		.clickToReveal:has(.cmsRevealIcon) { padding-right:25px; } /*no text under arrow*/
		h3.clickToReveal { margin: 0; padding: 10px 0; }
		.cmsRevealIcon { position:absolute; right:0; top:0; cursor: pointer; }
		.accordianItem.revealTheRevealable .revealable {display: block !important; }
		.cmsRevealIcon::before { content: 'arrow_drop_down'; }
		.revealTheRevealable .cmsRevealIcon::before { content: 'arrow_drop_up'; }
		/* tighter targeting for nested */
		.accordianSection>.clickToRevealSection>.cmsRevealIcon::before { content: 'arrow_drop_down'; }
		.revealTheRevealable>.clickToRevealSection>.cmsRevealIcon::before { content: 'arrow_drop_up'; }


/*
	accordianSection used for input field relevant sections,
	and accordian outer wrapper (Simple filter button)
*/

.accordianSection { position:relative;}
.clickToRevealSection { margin: 0; padding: 0; cursor: pointer;}

.sectionAutoReveal,
body .is-section.sectionAutoReveal { display:none; } /*strengthen rule to override display:table; but do not use important*/


.accordianSection.revealTheRevealable>.sectionAutoReveal {display: block !important; }


.cmsPageList, .CategoryList, .ProductList {
	clear: none;
}








.cmsTree ul {

	list-style: none;

	margin-left: 0;

	padding-left: 0;

	margin-bottom: 10px;

}

.cmsTree ul ul {

	margin-left: 5%;

}



.cmsTree LI {

	margin: 1%;

}





.list-style-none, .list-style-default, .list-style-slide , .ajax-stream-images, .list-style-content-menu,
.list-style-none li, .list-style-slide li, .ajax-stream-images li , .list-style-content-menu li,
.list-style-inline>li {
	list-style: none;
	margin: 0;
	padding: 0;
}


.list-style-3col, .list-style-4col, .list-style-bizcard, .list-style-inline, .list-style-5col, .list-style-6col, .list-style-2col, .list-style-table,.list-style-grid, .list-style-inline {
	overflow: hidden;
	list-style: none;
	margin: 0;
	padding: 0;
	clear: both;
	box-sizing: border-box;
}

.list-style-2col,
.list-style-3col,
.list-style-4col,
.list-style-5col,
.list-style-6col,
.list-style-bizcard,
.list-style-grid{
	display:grid;
	overflow-wrap:break-word; 	/*set long words to break rather than affect grid column*/
  hyphens:auto;
}

/*Do not apply grid to list-style-default, too many different applications*/
.list-style-default{ margin:0;}
	.list-style-default>li:not(:last-child){margin-bottom:2%;}

.list-style-2col,
.list-style-bizcard{
    grid-gap: max(1rem , 4vw);
		/*grid-template-columns: 1fr 1fr; change of format - 1fr does not mean a fixed width*/
		grid-template-columns:repeat(2, minmax(0,1fr));
}
.list-style-3col{
		grid-gap: max(1rem , 4vw);
		grid-template-columns: repeat(3, minmax(0,1fr));
}
.list-style-4col{
		grid-gap: max(1rem , 3vw);
		grid-template-columns: repeat(4, minmax(0,1fr));
}
.list-style-5col{
		grid-gap: max(1rem , 3vw);
		grid-template-columns: repeat(5, minmax(0,1fr));
}
.list-style-6col{
		grid-gap: max(1rem , 3vw);
		grid-template-columns: repeat(6, minmax(0,1fr));
}
.list-style-grid {
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  grid-gap: 2rem;
}


.list-style-inline { display: inline-flex; flex-wrap: wrap; gap: 5px }
.list-style-inline>li { display: inline-block; }
.list-style-inline>li>.cmsItem { height: 100%; }

.cmsItemListStockCount { font-size: 70% ; }

.cmsPageList, .CategoryList,.ProductList { clear: both; }

.list-style-default, .list-style-fullimage li {
	/*margin-bottom: 8px;*/
}





@media (min-width: 640px) {
/*
	.list-style-2col li,
	.list-style-bizcard li {
		width:100%;
	}

	.list-style-3col li{
		width: 33.3%;
		display: inline-block;
		float: left;
	}

	.list-style-4col li {
		width: 25%;
		display: inline-block;
		float: left;
	}

	.list-style-5col li {
		width: 20%;
		display: inline-block;
		float: left;
	}

	.list-style-6col li {
		width: 16%;
		display: inline-block;
		float: left;
	}
*/
	/*.list-style-3col li:nth-child(3n+4),
	.list-style-4col li:nth-child(4n+5),
	.list-style-5col li:nth-child(5n+6),
	.list-style-6col li:nth-child(6n+7){
		clear:both;
	}*/


	.list-style-table .cmsItem > div {width: 20%; float:left; }
	.list-style-table .cmsItem div.cmsTitleAndText {width: 39%; margin-left: 1%;  }
	.list-style-table .cmsItem div.cmsImage {width: 15%; }
	.list-style-table .cmsItem div.cmsPrice {width: 15%; }
	.list-style-table .cmsItem div.cmsQuantity {width: 10%; }
	.list-style-table .cmsItem div.cmsEnquiry {width: 20%; }
	.list-style-table .cmsItem div.cmsImage {width: 15%; }
	.list-style-table .qtyCombo { width: 100%; display:block; }

}

/*Reformat Fixed Grid Layouts for Tablet - reset height set by js*/
@media (max-width: 900px) {

	.list-style-3col,
	.list-style-4col{
			grid-template-columns: repeat(2, minmax(0,1fr));
	}

	.list-style-3col li,
	.list-style-4col li {
        min-height: 0 !important;
    }

}


/*overflow hidden allows for increased height to accept right aligned images, with no scroll bar... */

.cmsItem {overflow: hidden; margin: 2px; max-width: 2000px; box-sizing: border-box; position: relative; }
.cmsItem>div { margin: 0; }
.cmsSmallPrint { font-size: 80% }
.cmsItem .cmsEnquiry { margin: 0; text-align: right; }
.cmsItem .cmsImage { margin:0; margin-bottom: 5px; }  /* just disabled position relative on this one */
.cmsItem .cmsTitle { margin-bottom: 5px; /* font-weight: bold; */ }   /* TODO: Reuben thinks this should be bold by default... */
.cmsItem .cmsText { font-size: 80%; margin-bottom: 5px; }
.cmsItem .cmsItemAdditional { font-size: 80%; margin-bottom: 5px; }

/* margin 0 because it creates scroll bars in the cmsItem...*/

.cmsImage a { max-width: 320px; margin:auto; }
.cmsImage img { max-width: 100%; height:auto; max-height:320px ;  margin: 0;  }

.cmsImage.backgroundImage a{
  max-width:none;
  width:100%;
  margin:0;
}


.cmsItem .floatRight {
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
	max-width: 33%;
}

.cmsItem .floatRight img { max-width:160px; max-height:160px ;  width: 100%; }

.list-style-content-menu .cmsItem { border: 1px solid #999; padding: 6px; }

.list-style-content-menu a { margin: 1%;  text-decoration: none; }

.list-style-slide .imgSlide img, .list-style-slide .imgSlide a img { width: 100%; margin: 0; border: 0; }
.list-style-slide .cmsItem { width:100%; background: #eee; max-height: 350px; overflow: hidden; }
.list-style-slide .cmsItem .cmsImage {float:left; width: 60%; margin: 0; max-height: 348px; overflow: hidden; }
.list-style-slide .cmsItem .cmsImage img {width: 100%; margin: 0; border: 0;}
.list-style-slide .cmsItem .cmsTitleAndText {float:right; width: 37%; margin: 1%; }

.list-style-default .cmsItem { margin: 0; }
.list-style-default .cmsItem .cmsImage {float:left; width: 22%; margin: 0; margin-right: 2%; text-align: center; }
.list-style-default .cmsItem .cmsTitleAndTextNoPrice {float:right; width: 75%; margin-left: 1%; margin-right: 0%; }
.list-style-default .cmsItem .cmsTitleAndText {float:left; width: 55%; margin: 0; }
.list-style-default .cmsItem .cmsPriceAndEnquiry {float:right; width: 19%; margin: 0%; text-align: right; }
.list-style-default .cmsItem .cmsImage img { max-width: 100%; max-height:240px ;  margin: auto;  }

.list-style-default .cmsItem .cmsSuburb { margin: 0; margin-bottom: 10px; font-weight: bolder; }
.list-style-default .cmsItem .cmsPrice { margin: 0; text-align: right; }
.list-style-default .cmsItem .cmsEnquiry { margin-top: 10px; text-align: right; }
.list-style-default .cmsItem .cmsText { font-size: 90%; }


ul.list-style-default .eventsListIndent { margin-left: 30px; }

.list-style-right-image .cmsImage img { max-width:160px; max-height:160px ;  width: 100%; }

/*Rule to set items to use full height in grid box*/
[class^="list-style-"][class*="col"] li,
[class^="list-style-"][class*="col"] form,
[class^="list-style-"][class*="col"] .cmsItem:not(:has(.floatRight)){display:flex;flex-direction:column;flex:1;}

.list-style-2col .cmsItem {	margin:0; }
.list-style-2col .cmsPriceAndEnquiry{	display:flex;	justify-content:space-between;}
.list-style-2col .cmsItem .cmsImage {text-align: center; }
.list-style-2col .cmsItem .cmsTitle { text-align: center; }
.list-style-2col .cmsImage img {max-height:none;} /*override max 320*/


.list-style-3col .cmsItem .cmsImage {margin-bottom: 5px; text-align: center; }
.list-style-3col .cmsItem .cmsPrice { float: left; width: 55%; margin: 0; text-align: left;  }
.list-style-3col .cmsItem .cmsEnquiry { float: right; width: 40%;  margin: 0; }
.list-style-3col .cmsItem .cmsPriceAndEnquiry {  overflow: hidden;  font-size: 90%;  text-align: center;}
.list-style-3col .cmsItem .cmsTitle { text-align: center; }


.list-style-4col .cmsItem .cmsImage {margin-bottom: 5px; text-align: center; }
.list-style-4col .cmsItem .cmsPrice { float: left; width: 55%; margin: 0;  text-align: left; }
.list-style-4col .cmsItem .cmsEnquiry { float: right; width: 40%; margin: 0; }
.list-style-4col .cmsItem .cmsPriceAndEnquiry { overflow: hidden;  text-align: center;  font-size: 80%; }
.list-style-4col .cmsItem .cmsTitle { text-align: center; }

.list-style-5col .cmsItem div { text-align: center; }
.list-style-5col .cmsItem .cmsPriceAndEnquiry  { font-size: 80%; }

.list-style-6col .cmsItem div { text-align: center; }
.list-style-6col .cmsItem .cmsPriceAndEnquiry  { font-size: 80%; }

.list-style-bizcard .cmsItem {display: grid; gap: 0 1rem;grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);margin:0;}
.list-style-bizcard .cmsItem:has(.cmsPriceAndEnquiry) {grid-template-rows: auto 1fr;}
.list-style-bizcard .cmsItem:has(.cmsPriceAndEnquiry) .cmsImage{grid-row: 1 / 3;}

.list-style-bizcard .cmsItem .cmsImage {text-align: center; margin:0;}
.list-style-bizcard .cmsItem .cmsTitleAndText {margin: 0; }
.list-style-bizcard .cmsItem .cmsTitle{text-align:left;}
.list-style-bizcard .cmsItem .cmsPriceAndEnquiry {font-size: 80%; overflow: hidden; display:flex;gap:1rem; align-items: flex-start; margin:0;}
.list-style-bizcard .cmsItem .cmsPrice {flex:1.2;  margin: 0; }
.list-style-bizcard .cmsItem .cmsEnquiry {flex:1; margin: 0; }


.list-style-grid .cmsItem {	margin:0; }
.list-style-grid .cmsImage{text-align: center;}
.list-style-grid .cmsImage img {max-height:none;} /*override max 320*/
.list-style-grid .cmsItem .cmsTitle { text-align: center; }



/*Centering Positioning CSS for Flexible Gallery Page Only - No JS*/

.cmsGallery .list-style-grid .cmsItem{height: 100%;display: flex;flex-direction: column;}
.cmsGallery .list-style-grid .cmsImage {flex: 1;display: flex;}
.cmsGallery .list-style-grid .cmsImage a{max-width:none;}/*override max 320*/


/*Image Aspect Classes*/

[class*="cmsImageAspect"] img{height: 100%;width: 100%; object-fit: contain;}

/*.cmsImageAspect1 img{aspect-ratio:1;} not currently used*/

.cmsImageAspect6x4 img{aspect-ratio:6/4;}
.cmsImageAspectSquared img{aspect-ratio:1;}

/*.cmsImageAspect4x6 img{aspect-ratio:4/6;} not currently used*/

.cmsImageMaxWidth img {width: 100%; }



.cmsBackgroundImg{
    padding-top:100%;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center;
}



.cmsItemHoverReveal {
  display: none;
  background-color: rgba(250,250,250,0.8);
  position: absolute;
  pointer-events: none;
  top: 0; width: 100%;
  height: 100%;
}



.cmsItemHoverReveal.flex {
  display: flex;
  background-color: rgba(250,250,250,0.8);
  position: absolute;
  pointer-events: none;
  top: 0; width: 100%;
  height: 100%;
  opacity:0;
  -webkit-transition: opacity 0.3s ease;
  transition: opacity 0.3s ease;
}



.cmsItemHoverReveal a, .cmsItemHoverReveal input, .cmsItemHoverReveal .cmsPriceAndEnquiry {
  pointer-events: auto;
}



li.sfhover .cmsItemHoverReveal,
li:hover .cmsItemHoverReveal,
li .cmsHasNoImage .cmsItemHoverReveal {
  display: block;
  height: 100%;
  top: 0;
}



li.sfhover .cmsItemHoverReveal.flex,
li:hover .cmsItemHoverReveal.flex,
li .cmsHasNoImage .cmsItemHoverReveal.flex{
  display:flex;
  opacity:1;
}



.cmsItemHoverReveal>div { margin: 5% ; }
.cmsItemHoverReveal .cmsTitleAndText { margin-top: 30% ;  margin: 5% ; }
.cmsItemHoverReveal>div.cmsPriceAndEnquiry { position: absolute; bottom: 5% ; width:90%; margin: 5%;left:0;}
.cmsItemHoverReveal , .cmsItemHoverReveal A  { color: black; }


.list-style-hover .cmsItem {
    margin: 1%;
    position: relative;
    min-height: 100px;
}

.list-style-hover .cmsItem .cmsImage { margin: 0;  }


.cmsItemGrid
{
 list-style-type: none; margin: 0; padding: 0;    position: relative;
}


.cmsItemGrid {
	position: relative;
	overflow: hidden;
}

.cmsItemGrid>li {
	margin: 0; padding: 0;
	float: left;
	position: relative;
	overflow: hidden;
 }


.cmsItemGrid>li div.cmsItem
	{
		margin: 5px;
		position: relative;
		overflow: hidden;
		height: inherit;
	}




/* right aligned images on blogs and galleries and real estate */





@media (min-width: 640px) {

	div.leftAlignedImageBlock {
		float:left;
		max-width: 48%;
		margin-right: 2%;
		margin-bottom: 10px;
		display:block;
	}

	div.rightAlignedImageBlock {
		float:right;
		max-width: 48%;
		margin-left: 2%;
		margin-bottom: 10px;
		display:block;
	}

}


/*max size the containers for images*/

.galleryView320 {
	max-width: 320px;
}



/*underlying image is 320px max, so need to match thumbnails to this size*/

.imageAlignmentBlock .imageBlockThumbs { max-width: 320px; clear: both;}
.imageBlockThumbs { margin-top: 5px; }



/* support mobile view still smaller */

@media (max-width: 600px) {
	.imageBlockThumbs	li {
		width: 33.3%;
		display: inline-block;
		float: left;
	}
}





/* beware ie must specify 100% relative to the div specified... */

.cmsThumb { margin: 2px; max-height: 100px; max-width: 100px; }
.cmsLargeThumb { margin: 2%;}



/* just a simple rule to keep these images a little smaller... */

.alsoConsider .cmsImage img { max-height: 100px;  }




/*but max width the images to 100% within their container, so not upscalled */



.zoomedphoto img ,
.cmsThumb img ,
.cmsLargeThumb img { height:auto; max-height: 100%; max-width: 100%; }


.nounderline { text-decoration: none; }


.showMobileSite
{
  display:block;
  background-color: #333;
  margin: 0; padding: 0;
  height: 100px;
}



.showMobileSite A:link, .showMobileSite A:visited
{
  display:block;
  line-height: 100px;
  font-size: 40px;
  background-color: #333;
  color: white;
  text-align:center!important;
  text-decoration: none;
}


.autoAddressTitle {
	display:block;
	font-size:9px;
	line-height:12px;
	color: #666;
	background-color: rgba(255,255,255, 0.8);
}






#cmsBrowserBottomFixed { display:block; width:100%; background: rgba(255, 255, 255, 0.5);z-index: 5000;} /*5000 suitably high enough to sit on top of all elements*/

#cmsBrowserTopFixed { display:block; width:100%; background: rgba(255, 255, 255, 0.5); z-index: 5000;}

#cmsBrowserTopFixed table, #cmsBrowserBottomFixed table {  margin: 3px; width: 100%;}


@media (min-width: 640px) {

	#cmsBrowserBottomFixed { position:fixed; bottom: 0;  }
	#cmsBrowserTopFixed { position:fixed; top: 0; }
	#cmsBrowserBottomFixedSpacer { height:20px; }
	#cmsBrowserTopFixedSpacer { height:30px; }

}



 /*

 ###########################################################################################



 END  OF CMS COMMON CSS



###########################################################################################

 */





.cmsDefaultTextLogo A {
	text-decoration: none;
}

.cmsDefaultTextLogo {
	line-height: normal;
	width: 90%;
	margin:5%;
	font-weight: bolder;
}

/* default settings, so that we can add width/height later */
.cmsLogoImg {
	max-width: 100%;
	height: auto;
}


.zoomedphoto .zoomPup img {max-width:none; max-height: none;}
.zoomedphoto .zoomWindow img {max-width:none; max-height: none;}

A.cmsToyToTop {
	z-index:9999; display:block;  text-decoration:none;
	overflow:hidden; width:35px; height:35px; border:none;
	text-indent:100%; background:url(/uploads/shared/images/art/Arrows/ui.totop.png) no-repeat left top;
}

A.cmsToyToTop:hover { background:url(/uploads/shared/images/art/Arrows/ui.totop.png) no-repeat left -35px; }


.preDiscount { font-size: 80%; text-decoration: line-through; color:red }
.productRrp .productRrpPrice { text-decoration: line-through; color:red }
.productPriceSavingsPrice {color:red  }
.mainPrice .value { font-weight: bolder;}
.productPrice .value { font-weight: bolder;}
.otherTaxPrice { font-size: 80%; }
.ccySymbol { margin-right: 3px; }



/* Drag/Drop Content */


/* reuben hacks */

img.halfwidth { width: 50%; }
img.fullwidth { width: 100%; }
img.fullheight{
	margin-left: auto;
	margin-right: auto;
    display: block;
}



img.greyscale {
	-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
}


/* --------------------- SLIDER ----- */


/* required minimum for banner area */

#cmsBannerSlideDiv img { width: 100%; }

.animatedSlideWrapInner li:gt(0) { display: none; }

#cmsBannerContainer {  position:relative; overflow:hidden; margin:0; padding:0; }

#cmsBannerOverlay {bottom:0;z-index: 100; position:absolute; top:0; height: 100%; width: 100%; margin:0; padding:0;}


img.pagebanner{width:100%;max-width:none;}



/* sliders should have no slides displayed by default... earliest load */


#cmsCycle2 > img:nth-child(n+2) { display:none; }
.cmsDivSlider > li:nth-of-type(n+2) {display:none;}
.slick-slide{display:none;}


/*Andrew - Slide Widget v3 hide by default*/

.inpagelazygallery{display:none;}
.inpagelazypopup,.inpagelazypopup.flex, .is-wrapper>div.inpagelazypopup {display:none;}
.inpagelazyaccordian .accordianContent{display:none;}








/* our social media icons */



.socialmediaicons img , .dirlistingsocialmediaicons img { max-width: 32px; max-height: 32px;}



.socialmediaicons ion-icon ,

.dirlistingsocialmediaicons ion-icon ,

.socialmediaicons i.icon ,

.dirlistingsocialmediaicons i.icon {
    display: inline-block;
	width: 32px;
	font-size: 22px;
	padding: 5px;
    background: #999;
    color: white;
    box-sizing: border-box;
    height: 32px;
    vertical-align: bottom;
}



a.socialmediaicon {
    line-height: 32px;
    text-align: center;
}

a.socialmediaicon:hover ion-icon,
a.socialmediaicon:hover i.icon {
	background: black;
	color: white;
}



/* add this icons - depricate */
/*
.at-style-responsive .at-share-btn {
    padding: 0px 3px !important;
    height: 32px !important;
    line-height: 32px !important;
}
*/


/* default menu layouts start */


/*allow customer nav buttons to auto expand to their full pixel width, in a horizontal menu , but not going crazy in a vertical menu*/

#nav img, #catnav img {   max-width:250px; }

/*to ensure it pops up over others, needs be position relative or absolute */

#menu ul ul, #nav ul , #catnav ul {   z-index: 9998;}


.cmsDefaultMenu #menu,
.cmsDefaultMenu {
        position:relative;
		height: auto; /* fix common styling mistake */
}



.cmsDefaultMenu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}



.cmsDefaultMenu ul>li {
	display: block;
	float: none !important;
	position: relative;
	margin: 0;
}



.cmsHorizontalMenu ul {
	text-align: center;
}

.cmsHorizontalMenu ul>li {
	margin: 0px 15px;
	display: inline-block;
	float: none; /*fix some common issues */
}

.cmsDefaultMenu.cmsVerticalMenu  {
	max-width: 300px;
}

.cmsDefaultMenu.cmsVerticalMenu ul>li {
	display: block !important;
}

.cmsDefaultMenu ul>li li {
	display: block !important;
	margin: 0  !important;
	box-sizing: border-box;
}

.cmsHorizontalMenu  ul>li>ul,
.cmsVerticalMenu  ul>li>ul {
	position: absolute;
	display:none;
	margin: 0;
	min-width: 240px;
	max-width: 320px;
	background-color: rgba(255,255,255,0.7);
	text-align: left;
}


.cmsDefaultMenu ul>li:hover>ul {
	display:block !important;
}

.cmsHorizontalMenu ul ul>li:hover>ul,
.cmsVerticalMenu ul>li:hover>ul {
	display:block !important;
	left: 100% !important;
	top: 0 !important;
	margin:0 !important;
}

.cmsHorizontalMenu ul>li:hover>ul {
	display:block !important;
	left: 0 !important;
	top:auto !important;
	margin: 0 !important;
}



.cmsDefaultMenu li a {
	line-height: 200%;
	margin: 1px;
	text-decoration: none;
	display: block;
	padding: 5px;
	width: 100% !important;
	box-sizing: border-box;
}

.cmsSiteMapMenu #menu ul {
	display:flex;
	margin:0;
	padding: 0;
	float: none;
}

 .cmsSiteMapMenu #menu ul ul {
	display:block !important;
	position: relative !important;
	left: auto  !important;
	font-size: 80%;
}

.cmsSiteMapMenu #menu ul ul ul {
	margin-left: 5%;
}

 .cmsSiteMapMenu #menu ul>li {
	text-align: left;
	padding: 1px 5px;
	display:block;
	float: none;
	border: none !important;
	background: none !important;
}

 .cmsSiteMapMenu #menu ul>li li {
	float: none;
	display:block;
	width: auto;
}

 .cmsSiteMapMenu #menu ul>li a {
	line-height: inherit;
	padding: 0;
	background: none !important;
	border: none !important;
	width: 100% !important;
}



/* fix some common issues, when overridding */

.cmsVerticalMenu #menu { height: auto; }
.cmsHorizontalMenu #menu ,
.cmsHorizontalMenu #menu ul { width: 100%; float: none; max-width: none; }


/* default menu layouts end */




/* --- CMS table --- */

.cmsTable, .mytable
{
	background: #eee;
	border-spacing: 1px;
	padding: 1px;
	display: table !important; /* was not sticking when sorting variants  */
	width: 100%;
}

.tr
{
    display:table-row;
}

.td, .th
{
    display:table-cell;
}



.mytable>tr>td, .mytable>tbody>tr>td,
.cmsTable>tr>td, .cmsTable>tbody>tr>td,
.mytable>.tr>.td
{
	background: white;
	margin: 0;
	border: 0;
	color: #333;
	vertical-align: top;
	padding: 3px;
	font-weight: normal;
	font-size: 90%;
	word-wrap: break-word;
	word-break: break-word;
}

.mytable tr th ,
.mytable thead td ,
.cmsTable tr th,
.cmsTable thead td {
	padding: 4px;
	background-color: #666666;
	color:white;
	vertical-align: middle;
	text-align:left;
	font-size: 90%;
}

.cmsTable tr th[align=right] {
	text-align:right;
}

.mytable tr:hover td
 {
	background-color: #ddd;
	background-image: none;
}



/*
	Only used by templates/member/login-test.js and is this even a thing now? 
*/

.sessionLoggedIn {padding: 2rem; border: 1px solid #222222;}
.sessionLoggedIn .sessionLoginButtons { display: block; margin-top: 20px;}
.sessionLoggedIn a{border-radius:0;text-transform:uppercase; border: 1px solid #222;font-size: 1.0em!important; letter-spacing: 0.5px;}
.sessionLoggedIn a.btn-retrieve-session { background: #f1df0d; color: black; }
.sessionLoggedIn a.btn-retrieve-session:hover { background:#ffea00;}
.sessionLoggedIn a.btn-logout { background: #393c47; color: white; }
.sessionLoggedIn a.btn-logout:hover { background: #222; text-decoration:none; }


/* New form editor, enables radio items on one line... but spaced... */
.inputOptionSingleLine div { display: inline-block; margin-right: 10px; }


/* new auto complete action for search box */



.autoCompleteWrapper { position: relative;}

.autoCompleteResults {
	position:absolute; width: 100%; max-width:800px; max-height: 500px; overflow:auto;
	background: white; border: inset; z-index: 100000; display: none;
}

.autoCompleteResults div { display:block; text-align: left; }
.autoCompleteResults a { color: black;  }
.searchAlignRight .autoCompleteResults { right: 0;}

/* important to override jQuery animations while hovered... */
.autoCompleteWrapper:hover .autoCompleteHasResults,
.autoCompleteHasResults.autoCompleteCurrent,
.autoCompleteHasResults:hover {
	display: block;
}





.searchResults . cmsSearchResultPageName   { font-style: italic; font-size: 85%;}



.cmsPopupStackable
{
	z-index: 10003; /*more than colorbox */
	background:rgba(0,0,0,0.5);
	position:fixed;
	height:100%;
	width:100%;
	top:0;
	left:0;
}

.cmsPopupCloseOverlay
{
	position:absolute;
	top:0; left: 0;
	height:100%;
	width:100%;
}

.cmsDraggablePopupTitle
{
	position:absolute;
    top: -25px; /*the offset approach works better for having the core content with a scroll bar unaffected by the title bar... */
	left: 0;
	width: 96%;
	padding: 0 1px;
    font-weight: 200;
	font-size: 12px; /* small context headings...  or just put your h3 in the content... */
	line-height: 25px;
	min-height: 25px; /* for draggable title even if nothing in it */
    color: #999;
	box-sizing: border-box;
}


.cmsModal .cmsPopupCloseButton
{
	position:absolute;
	right:-2px ;
	top: -24px;
	margin: 0;
	display:block;
	padding: 1px;
	color:silver;
	text-decoration:none; cursor: pointer;
	background: white;
}
.cmsModal .cmsPopupCloseButton span {
	font-size: 22px;
}
.cmsModal .cmsPopupCloseButton:hover {
	color: black;
}

.cmsModal
{
  position:relative;
  background: white;
  box-shadow: rgba(0,0,0,0.3) 5px 5px 9px!important;
  border-radius: 4px;
  display: block;
  border-width: 25px 4px 4px;
  border-style: solid;
  border-color: white;
  border-image: initial;
  box-sizing: border-box;
  padding: 0;
  bottom: auto;
  width: fit-content;
/* do not put default height, as small popups should not have a height */
  max-width: 90%;
  margin: 0 auto;
  top: 5%;
}

/* do not put height on this one... */
.cmsModalContent {
  max-height: 90vh;
  overflow-y: auto;
  padding: 10px; 
  margin:0; 
  box-sizing: border-box;
}

/* iframe need to be max height */
.cmsPopupIframe .cmsModal { padding: 0; height: 100%; max-height: 90%; width: 100%; }
.cmsPopupIframe .cmsModalContent { padding: 0; height: 100%;  width: 100%; }


/* mainly for popup cart needs a scroll bar */
.cmsModal .cmsModalContent:not(:has(> iframe, > img)) { overflow:auto; }

/* modal image mainly about good proportions and width...  */
.cmsPopupImage .cmsModal { padding: 0; width: fit-content; height: auto; max-width: 1200px; }
.cmsPopupImage .cmsModalContent { width: fit-content; padding: 0; height: auto; }


/* iframe need to be 100% of the size */
.cmsModal>.cmsModalContent>iframe { margin:0; padding: 0; width: 100%; height: 100%; }
/* allow resize to shrink, but also allow scroll bar in iframe */

.ui-resizable-resizing iframe {  pointer-events: none; }

/* do not display in page... they get popped up as popup messages */
.popupMessage {display: none; }