Utilities
CSS Minifier
Online CSS Minifier Tool and Compressor, with Fast and Simple API Access
Input CSS
/*
 * 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
button with no background, just a border..
*/
.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;
}

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




/*
img 100% causing many issues, but it's important it remains
by default, we don't want small images stretching oversized... 
So when set to width:100%, and wanting stretch, then elsewhere, you should overrride the max-width
*/

img {
	max-width: 100%;
	/*image-orientation: none; ignore EXIF*/
}

/* When an image is floated in a paragraph, then do not consume anymore than 40% of the paragraph, thus looking the same in mobile and desktop. */
p>img[align="right"],p>img[align="left"] { max-width: 40%; }




/* 
rules to hide need to be strong
*/
body .hide,
body .hidden,
body .cmsHidden,
.cmsHomePage .hideForHome,
.ProductList .hideForProductList,
body .row.hide,
body .row.hidden,
body .row.cmsHidden{
	display:none!important;
}

/*
rules to hide need to be strong, 
*/
@media (min-width: 560px)  {

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

@media print {
	.noPrint {
	    display:none;
	}
}


/* 
float divs, legacy approach, but well used...  
note that the float left/right helps determine the desktop shape, 
while maintaining the stack order in mobile. 
recently deleted the display:block, which is assumed with div, 
and removed the default margin: 0
*/


.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%;	}
	.floatLeft50PC {	float:left;	width: 49%;	margin-right: 1%;}
	.floatRight25PC {	float:right;width: 24%; }
	.floatLeft75PC {	float:left;	width: 74%; }
	.floatRight33PC {	float:right;	width: 33%;	}
	.floatLeft66PC {	float:left;	width: 66%;	}
	.floatLeft40PC {	float:left;	width: 39%;	}
	.floatRight60PC {	float:right;	width: 60%;	}
	.floatLeft20PC {	float:left;	width: 20%;	}
	.floatRight80PC {	float:right;	width: 79%;	}

}




/*
 fix a general template issue with a 1px td cell
 legacy - no more table templates...  but some users still have em... 
 Turned off in June 2026
 */
 /*
#container table td .banner img { max-width: none; }
*/
/*
	default snippet table padding matches editor -
  exclude template .row as tinymce is affected when looking at live site
  Turning this off, june 2026... 
  consider the effects, discuss with reuben... 
 */
/* 
#cmsPageContainer .row table td{padding:12px;}
#cmsPageContainer .row.lastSavedWithTinyMCE table td{padding:0;} /*replicate tinymce when contains .row element but tinymce*/
*/


.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.
	accordans now used in the CMS significantly as well. 
*/

	.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 
{
	/* deleted june 2026 */
	/* 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%; }

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



/*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;  }


/* not used anywhere - deleted june 2026*/
/* 
.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 product summaries, 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 on products, blogs and galleries*/

img.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; }



.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; }




/* 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;
}
*/




/*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;}



/* --- 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; }
Minified CSS Output
.list-style-inline>li>.cmsItem,body{height:100%}body{width:100%;padding:0;margin:0;overflow-x:hidden}.verticalAlignMiddle{vertical-align:middle}.red{color:red}.blue{color:#00f}.green{color:green}.noDecoration{text-decoration:none;border:none;background:0 0;color:inherit}.stretchElement{position:initial}.stretchElement:after{position:absolute;top:0;right:0;bottom:0;left:0;z-index:45;content:""}.btn,.btn-default,.btn-primary,.btn-small{padding:3px;border-radius:3px;display:inline-block;margin-bottom:0;font-weight:400;text-align:center;text-decoration:none;vertical-align:middle;cursor:pointer;background-image:none;border:1px solid transparent;white-space:nowrap;-webkit-transition:.16s;transition:.16s}.btn,.btn-default,.btn-primary{padding:5px 20px;font-size:1.2em;line-height:2em;border-radius:6px;white-space:normal}.btn-small,button .material-icons,button .material-symbols-outlined{font-size:inherit}.btn-small{padding:3px;line-height:inherit;border-radius:3px}.btn-default,.btn-small{color:#333;background-color:#d3d3d3}.btn-default:hover,.btn-small{color:#111;background-color:#ccc;border-color:#ccc}.btn-primary{color:#fff;background-color:#08c9b9;border-color:#000}.btn-primary:hover{color:#fff;background-color:#07b0a2}.cmsItem a.moreInfo,.cmsMoreInfo,.cmsNavButtons a{text-decoration:none!important;border:1px solid #cacaca;display:inline-block;padding:1px 5px;margin-left:5px;cursor:pointer}.cmsNavButtons a{margin:5px;padding:5px 10px}.cmsNavActivePage,.cmsNavButtons a:hover{background:#eee;color:#000;border:1px solid #aaa;font-weight:600}img{max-width:100%}p>img[align=left],p>img[align=right]{max-width:40%}.ProductList .hideForProductList,.cmsHomePage .hideForHome,.revealable,body .cmsHidden,body .hidden,body .hide,body .row.cmsHidden,body .row.hidden,body .row.hide{display:none!important}@media print{.noPrint{display:none}}.clearfloat{float:none;clear:both;margin:0;padding:0;border:none;font-size:1px}.cmsFloatContainer{clear:both;overflow:hidden}@media (min-width:560px){body .hideForDesktop,body .mobile{display:none!important}.floatRight50PC{float:right;width:49%;margin-left:1%}.floatLeft50PC{float:left;width:49%;margin-right:1%}.floatRight25PC{float:right;width:24%}.floatLeft75PC{float:left;width:74%}.floatRight33PC{float:right;width:33%}.floatLeft66PC{float:left;width:66%}.floatLeft40PC{float:left;width:39%}.floatRight60PC{float:right;width:60%}.floatLeft20PC{float:left;width:20%}.floatRight80PC{float:right;width:79%}}.error,.warning{border:1px solid red;padding:1%;margin:2% 1%}.actionFeedback{border:1px solid green;padding:1%;margin:2% 1%}.accordianItem{position:relative;border-bottom:1px solid #999}.clickToReveal{cursor:pointer}.clickToReveal:has(.cmsRevealIcon){padding-right:25px}h3.clickToReveal{margin:0;padding:10px 0}.cmsRevealIcon{position:absolute;right:0;top:0;cursor:pointer}.accordianSection,.autoCompleteWrapper,.cmsItem{position:relative}.accordianItem.revealTheRevealable .revealable,.accordianSection.revealTheRevealable>.sectionAutoReveal{display:block!important}.accordianSection>.clickToRevealSection>.cmsRevealIcon::before,.cmsRevealIcon::before{content:'arrow_drop_down'}.revealTheRevealable .cmsRevealIcon::before,.revealTheRevealable>.clickToRevealSection>.cmsRevealIcon::before{content:'arrow_drop_up'}.clickToRevealSection{margin:0;padding:0;cursor:pointer}.sectionAutoReveal,body .is-section.sectionAutoReveal{display: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%}.ajax-stream-images,.ajax-stream-images li,.list-style-content-menu,.list-style-content-menu li,.list-style-default,.list-style-inline>li,.list-style-none,.list-style-none li,.list-style-slide,.list-style-slide li{list-style:none;margin:0;padding:0}.list-style-2col,.list-style-3col,.list-style-4col,.list-style-5col,.list-style-6col,.list-style-bizcard,.list-style-grid,.list-style-inline,.list-style-table{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;hyphens:auto}.cmsItem>div,.list-style-2col .cmsItem,.list-style-bizcard .cmsItem .cmsTitleAndText,.list-style-default,.list-style-default .cmsItem,.list-style-grid .cmsItem,.list-style-hover .cmsItem .cmsImage{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: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}@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}}.cmsItem{overflow:hidden;margin:2px;max-width:2000px;box-sizing:border-box}.cmsSmallPrint,.list-style-5col .cmsItem .cmsPriceAndEnquiry,.list-style-6col .cmsItem .cmsPriceAndEnquiry{font-size:80%}.cmsItem .cmsEnquiry,.list-style-default .cmsItem .cmsPrice{margin:0;text-align:right}.cmsItem .cmsImage{margin:0 0 5px}.cmsItem .cmsTitle{margin-bottom:5px}.cmsItem .cmsItemAdditional,.cmsItem .cmsText{font-size:80%;margin-bottom:5px}.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,.list-style-right-image .cmsImage 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 .cmsItem .cmsImage img,.list-style-slide .imgSlide a img,.list-style-slide .imgSlide img{width:100%;margin:0;border:0}.list-style-slide .cmsItem{width:100%;background:#eee;max-height:350px;overflow:hidden}.cmsItemHoverReveal,.cmsItemHoverReveal.flex{background-color:rgba(250,250,250,.8);pointer-events:none;position:absolute;width:100%;height:100%;top:0}.list-style-slide .cmsItem .cmsImage{float:left;width:60%;margin:0;max-height:348px;overflow:hidden}.list-style-slide .cmsItem .cmsTitleAndText{float:right;width:37%;margin:1%}.list-style-default .cmsItem .cmsImage{float:left;width:22%;margin:0 2% 0 0;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 0 10px;font-weight:bolder}.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}[class^=list-style-][class*=col] .cmsItem:not(:has(.floatRight)),[class^=list-style-][class*=col] form,[class^=list-style-][class*=col] li{display:flex;flex-direction:column;flex:1}.list-style-2col .cmsPriceAndEnquiry{display:flex;justify-content:space-between}.list-style-2col .cmsItem .cmsImage,.list-style-2col .cmsItem .cmsTitle,.list-style-3col .cmsItem .cmsTitle,.list-style-4col .cmsItem .cmsTitle,.list-style-5col .cmsItem div,.list-style-6col .cmsItem div,.list-style-grid .cmsImage,.list-style-grid .cmsItem .cmsTitle{text-align:center}.list-style-2col .cmsImage img,.list-style-grid .cmsImage img{max-height:none}.alsoConsider .cmsImage img,.cmsThumb{max-height:100px}.list-style-3col .cmsItem .cmsImage,.list-style-4col .cmsItem .cmsImage{margin-bottom:5px;text-align:center}.list-style-3col .cmsItem .cmsPrice,.list-style-4col .cmsItem .cmsPrice{float:left;width:55%;margin:0;text-align:left}.list-style-3col .cmsItem .cmsEnquiry,.list-style-4col .cmsItem .cmsEnquiry{float:right;width:40%;margin:0}.list-style-3col .cmsItem .cmsPriceAndEnquiry{overflow:hidden;font-size:90%;text-align:center}.list-style-4col .cmsItem .cmsPriceAndEnquiry{overflow:hidden;text-align:center;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 .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}.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}[class*=cmsImageAspect] img{height:100%;width:100%;object-fit:contain}.cmsImageAspect6x4 img{aspect-ratio:6/4}.cmsImageAspectSquared img{aspect-ratio:1}#cmsBannerSlideDiv img,.cmsImageMaxWidth img,img.fullwidth{width:100%}.cmsBackgroundImg{padding-top:100%;background-size:cover;background-repeat:no-repeat;background-position:center}.cmsItemHoverReveal{display:none}.cmsItemHoverReveal.flex{display:flex;opacity:0;-webkit-transition:opacity .3s;transition:opacity .3s}.cmsItemHoverReveal .cmsPriceAndEnquiry,.cmsItemHoverReveal a,.cmsItemHoverReveal input{pointer-events:auto}li .cmsHasNoImage .cmsItemHoverReveal,li.sfhover .cmsItemHoverReveal,li:hover .cmsItemHoverReveal{display:block;height:100%;top:0}li .cmsHasNoImage .cmsItemHoverReveal.flex,li.sfhover .cmsItemHoverReveal.flex,li:hover .cmsItemHoverReveal.flex{display:flex;opacity:1}.cmsItemHoverReveal .cmsTitleAndText,.cmsItemHoverReveal>div{margin:5%}.cmsItemHoverReveal>div.cmsPriceAndEnquiry{position:absolute;bottom:5%;width:90%;margin:5%;left:0}.autoCompleteResults a,.cmsItemHoverReveal,.cmsItemHoverReveal A,.cmsModal .cmsPopupCloseButton:hover{color:#000}.list-style-hover .cmsItem{margin:1%;position:relative;min-height:100px}img.galleryView320{max-width:320px}.imageAlignmentBlock .imageBlockThumbs{max-width:320px;clear:both}.imageBlockThumbs{margin-top:5px}@media (max-width:600px){.imageBlockThumbs li{width:33.3%;display:inline-block;float:left}}.cmsThumb{margin:2px;max-width:100px}.cmsLargeThumb{margin:2%}.cmsLargeThumb img,.cmsThumb img,.zoomedphoto img{height:auto;max-height:100%;max-width:100%}.cmsDefaultTextLogo A,.nounderline{text-decoration:none}.autoAddressTitle{display:block;font-size:9px;line-height:12px;color:#666;background-color:rgba(255,255,255,.8)}#cmsBrowserBottomFixed,#cmsBrowserTopFixed{display:block;width:100%;background:rgba(255,255,255,.5);z-index:5000}#cmsBrowserBottomFixed table,#cmsBrowserTopFixed table{margin:3px;width:100%}@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}#cmsBrowserBottomFixed{position:fixed;bottom:0}#cmsBrowserTopFixed{position:fixed;top:0}#cmsBrowserBottomFixedSpacer{height:20px}#cmsBrowserTopFixedSpacer{height:30px}}.cmsDefaultTextLogo{line-height:normal;width:90%;margin:5%;font-weight:bolder}.cmsLogoImg{max-width:100%;height:auto}.zoomedphoto .zoomPup img,.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) left top no-repeat}A.cmsToyToTop:hover{background:url(/uploads/shared/images/art/Arrows/ui.totop.png) left -35px no-repeat}img.halfwidth{width:50%}img.fullheight{margin-left:auto;margin-right:auto;display:block}img.greyscale{-webkit-filter:grayscale(100%);filter:grayscale(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}#cmsCycle2>img:nth-child(n+2),.cmsDivSlider>li:nth-of-type(n+2),.inpagelazyaccordian .accordianContent,.inpagelazygallery,.inpagelazypopup,.inpagelazypopup.flex,.is-wrapper>div.inpagelazypopup,.popupMessage,.slick-slide{display:none}.dirlistingsocialmediaicons img,.socialmediaicons img{max-width:32px;max-height:32px}.dirlistingsocialmediaicons i.icon,.dirlistingsocialmediaicons ion-icon,.socialmediaicons i.icon,.socialmediaicons ion-icon{display:inline-block;width:32px;font-size:22px;padding:5px;background:#999;color:#fff;box-sizing:border-box;height:32px;vertical-align:bottom}a.socialmediaicon{line-height:32px;text-align:center}a.socialmediaicon:hover i.icon,a.socialmediaicon:hover ion-icon{background:#000;color:#fff}#catnav img,#nav img{max-width:250px}#catnav ul,#menu ul ul,#nav ul{z-index:9998}.cmsTable,.mytable{background:#eee;border-spacing:1px;padding:1px;display:table!important;width:100%}.tr{display:table-row}.td,.th{display:table-cell}.cmsTable>tbody>tr>td,.cmsTable>tr>td,.mytable>.tr>.td,.mytable>tbody>tr>td,.mytable>tr>td{background:#fff;margin:0;border:0;color:#333;vertical-align:top;padding:3px;font-weight:400;font-size:90%;word-wrap:break-word;word-break:break-word}.cmsTable thead td,.cmsTable tr th,.mytable thead td,.mytable tr th{padding:4px;background-color:#666;color:#fff;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}.sessionLoggedIn{padding:2rem;border:1px solid #222}.sessionLoggedIn .sessionLoginButtons{display:block;margin-top:20px}.sessionLoggedIn a{border-radius:0;text-transform:uppercase;border:1px solid #222;font-size:1em!important;letter-spacing:.5px}.sessionLoggedIn a.btn-retrieve-session{background:#f1df0d;color:#000}.sessionLoggedIn a.btn-retrieve-session:hover{background:#ffea00}.sessionLoggedIn a.btn-logout{background:#393c47;color:#fff}.sessionLoggedIn a.btn-logout:hover{background:#222;text-decoration:none}.inputOptionSingleLine div{display:inline-block;margin-right:10px}.autoCompleteResults{position:absolute;width:100%;max-width:800px;max-height:500px;overflow:auto;background:#fff;border:inset;z-index:100000;display:none}.autoCompleteResults div{display:block;text-align:left}.searchAlignRight .autoCompleteResults{right:0}.autoCompleteHasResults.autoCompleteCurrent,.autoCompleteHasResults:hover,.autoCompleteWrapper:hover .autoCompleteHasResults{display:block}.searchResults . cmsSearchResultPageName{font-style:italic;font-size:85%}.cmsPopupStackable{z-index:10003;background:rgba(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;left:0;width:96%;padding:0 1px;font-weight:200;font-size:12px;line-height:25px;min-height:25px;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:#fff}.cmsModal .cmsPopupCloseButton span{font-size:22px}.cmsModal{position:relative;background:#fff;box-shadow:rgba(0,0,0,.3) 5px 5px 9px!important;border-radius:4px;display:block;border-width:25px 4px 4px;border-style:solid;border-color:#fff;border-image:initial;box-sizing:border-box;padding:0;bottom:auto;width:fit-content;max-width:90%;margin:0 auto;top:5%}.cmsModalContent{max-height:90vh;overflow-y:auto;padding:10px;margin:0;box-sizing:border-box}.cmsPopupIframe .cmsModal{padding:0;height:100%;max-height:90%;width:100%}.cmsPopupIframe .cmsModalContent{padding:0;height:100%;width:100%}.cmsPopupImage .cmsModal,.cmsPopupImage .cmsModalContent{width:fit-content;height:auto;padding:0}.cmsModal .cmsModalContent:not(:has(> iframe,> img)){overflow:auto}.cmsPopupImage .cmsModal{max-width:1200px}.cmsModal>.cmsModalContent>iframe{margin:0;padding:0;width:100%;height:100%}.ui-resizable-resizing iframe{pointer-events:none}
CSS Minifier Tool Documentation
The API has changed, to see more please click here
To minify/compress your CSS, perform a POST request to

API https://www.toptal.com/developers/cssminifier/api/raw
with the input parameter set to the CSS you want to minify.

Hire World Class Talent with Toptal
CSS Developers
Landing Page Designers
Animation Designers
Web Developers
Social Media Designers
Webflow Designers
Blog Designers
Salesforce Consultants
Mobile UI Designers
WPF Developers
Level Designers
Mobile Game Designers
CSS3 Developers
VBA Developers
Marketo Developers
Hire the top 3% of freelance talent
Join the Toptal Network
Copyright 2010 - 2026 Toptal, LLC

Privacy Policy
Website terms
By continuing to use this site you agree to our Cookie Policy Privacy Policy, and Terms of Use.

Got it