/*

DO NOT EDIT IN TINY MCE, EDIT VIA FTP and SAVE BACKUPS
DO NOT EDIT IN TINY MCE, EDIT VIA FTP and SAVE BACKUPS
DO NOT EDIT IN TINY MCE, EDIT VIA FTP and SAVE BACKUPS
DO NOT EDIT IN TINY MCE, EDIT VIA FTP and SAVE BACKUPS
DO NOT EDIT IN TINY MCE, EDIT VIA FTP and SAVE BACKUPS
DO NOT EDIT IN TINY MCE, EDIT VIA FTP and SAVE BACKUPS

 https://cssminifier.com/

 */
body {
	margin:0;
	padding:0;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    -o-user-select: text;
    user-select: text;

	font-family: 'Noto Sans', sans-serif!important;
}

#cmsMainWindow{
	background-color: #e3e8e9;
	padding-bottom: 1px;
	height: 100%;
    /* overflow: auto; */
}

@media (min-width: 600px) {
body.modal-open {
	height: 100%;
	width: 100%;
	position: fixed;
    overflow-y: auto;
}
}

/*
body.modal-open #cmsMenuPagesLeft {
	height: 100%;
	position: absolute;
    overflow: scroll;
	top: 51px;
}
*/


BODY { font-size:8pt; }


@media only screen and (min-width: 1300px) {
	BODY { font-size: 9pt; }
}

@media only screen and (min-width: 2000px) {
	BODY { font-size: 10pt; }
}



@media only screen and (min-width: 800px) {
	.ColumnGroup {
		box-sizing: border-box;
		display: flex;
		clear: both;
		overflow: hidden;

	}
	.ColumnTwoThirdWidth {
		box-sizing: border-box;
		float: left;
		width: 66%;
		padding: 0;
		margin-right: 2%;
	}
	.ColumnThirdWidth {
		box-sizing: border-box;
		float: left;
		width: 31%;
		padding: 0;
		margin-right: 2%;
	}

	.ColumnHalfWidth, .ColumnHalf{
		box-sizing: border-box;
		float: left;
		width: 48%;
		padding: 0;
		margin-right: 2%;
	}

	fieldset 	.ColumnGroup {
		padding-left:10px;
	}

}


H1 {
	font-size: 140%;
	color:#334445;
	vertical-align: middle;
}

h1.cmsPageTitle{
	margin-bottom:50px;
}

H2 {
	font-size: 130%;
	color:#334445;
	vertical-align: middle;
}

H3 {
	font-size: 115%;
	color:#334445;
	vertical-align: middle;
}


H4 {
	font-size: 100%;
	vertical-align: middle;
}


input, textarea, select, button, button.material-icons {
	padding: 4px;
	box-sizing: border-box;
	font-size: 100%;
}
input, textarea, select {
	border: 1px solid #afc6e4;
}



A { color: #001144; } 
A:hover {
	color: #4BA630;
	text-decoration:underline;
}

.alignright { text-align: right; }

.smallGrayText {color: #999; }

h1.cmsPageTitle{
	margin-top:33px;
}
/*
.menuheadbg {
	background-color:#000000;
	font-size: 10pt;
	color:orange;
}
*/

.inputtitle { font-weight:bolder; }

.submitbutton { font-weight:bolder; }

select.changeEditor option.selected{background:#e5e4e4;}
select.changeEditor option:first-child{background:white;color:black}

.info { color:#001133; }

.material-icons { font-size: inherit; vertical-align: middle; padding: 0;}


/*
.cmsButOpenNewWindow, A.cmsButOpenNewWindow {
	border: outset 1px #333;
	text-decoration: none;
	padding: 1px 10px 1px 10px;
	margin: 0;
	font-weight: bolder;
	font-size: 9px;
	color: blue;
	background-color: #EEE;
	float: right;
}
*/



.sortContainer, .groupBorder ,  .roundBorders,
.adminArea, .mytooltips,
fieldset.formborder, .form ,
.tooltips, .help , .supportArea ,
.actionFeedback, .actionSuccess, .actionfeedback, .greentick, .success,
.error, .introWarning, .warning , .tickBoxOptionsFixedToBase
{
	max-width: 100%;
	word-wrap: break-word;
	border: 1px solid #ddd;
	margin: 1% 0;
	padding: 8px;
	box-sizing: border-box;

	/*
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.2);
	*/
}


/*AJ TEMPORARY CLASS FOR TESTING*/
.hideLegend legend{display:none;}
.hideLegend fieldset.formborder{
	border:0;
	margin:0;
	padding:0;
}

.tickBoxOptionsFixedToBase { position: fixed; bottom: 5px; left: 30%; padding: 5px;  }
.tickBoxOptionsFixedToBasePlaceholder { height: 35px ; }



fieldset.formborder, .form {
	position: relative;
}
fieldset.formborder legend {
	color:#334445;
	background-color:#fff;
	font-weight: bolder;
	margin-left: 10px;
    font-size: 110%;
}




fieldset.formborder div.formcontent {
	margin: 0;
	padding: 0;
}

fieldset.formborder div.formcontent:after{
	 visibility: hidden;
	  display: block;
	  content: "";
	  clear: both;
	  height: 0;
}

.adminArea legend {
	color:#660000;
	font-weight: bolder;
	margin-left: 10px;
}



.adminArea, .listitems li>div.adminArea {
    border-color: #DEF;
    background-color: #F3F9FF;
}

.mytooltips {
    border-color: #F9F;
    background-color: #FFEEFF;
}

.adminArea H1, .adminArea H2, .adminArea H3 {
	color: #069;
	font-size: 120%;
	vertical-align: middle;
}

/*AJ FIX - Set Wizard to higher z-index than tinyMCE 3+4*/
#mceModalBlocker + #windowImageWizard,
#mceModalBlocker + #windowURLWizard,
.mce-widget + #windowImageWizard,
.mce-widget + #windowURLWizard{
z-index: 800000;
}



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

.cmsModal {
  background: white;
  box-shadow: rgba(0,0,0,0.3) 5px 5px 9px!important;
  border-radius: 4px;
  z-index: 9000;
  display: block;
  border-width: 25px 4px 4px;
  border-style: solid;
  border-color: white;
  border-image: initial;
  box-sizing: border-box;
  padding: 0;
  bottom: auto;
  max-height: 90%;
  max-width: 90%;
  margin: 0 auto;
  top: 5%;
}

#formActionPopup .cmsModal,
#windowURLWizard .cmsModal {
	margin-right: 30%;
	max-width: 500px;
}

/*AJ disable #popupColEditorWindow to allow the content below to be clicked / persistent modal...*/
#popupColEditorWindow.noOverlay{
	pointer-events: none;
	background: none!important;
}


#popupColEditorWindow .cmsModal
{
  max-height: 650px;
  max-width: 320px;
  margin-right: 10%;
  top: 20%;
	pointer-events: all;
}

#popupPublishedMessage .cmsModal {	top: 15%;  }
#popupSaveMessage .cmsModal {	top: 25%;  }



.cmsDraggablePopupTitle {
  cursor: move;
	position: absolute;
    top: -24px; width: 96%;
	padding: 6px 0;
    font-weight: 200;
	font-size: 12px;
	min-height:12px;
    left: 10px;
    color: #999;
	overflow: hidden;
    height: 20px;
}

/*
.cmsDragIndicator{
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -4px;
    top: -12px;
    color: #393c46;
    font-size: 16px;
    pointer-events: none;
}
*/

.cmsModal iframe { margin:0; padding: 0; width: 100%; height: 100%; }


.cmsModal .cmsPopupCloseButton {
	position:absolute; right:-2px; top:-25px; margin: 0; display:block; padding: 6px; color:silver; text-decoration:none; cursor: pointer; font-size: 15px; background: white;
}

@media (max-width: 600px) {
  .cmsModal .cmsPopupCloseButton {
		font-size: 20px;
	}
}




.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
	-ms-touch-action: none;
	touch-action: none;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}

.ui-resizable-s {
	cursor: s-resize;
	height: 7px;
	width: 100%;
	bottom: -5px;
	left: 0;
}
.ui-resizable-e {
	cursor: e-resize;
	width: 7px;
	right: -5px;
	top: 0;
	height: 100%;
}




.cmsFormElements {
	overflow: auto;
}
.cmsFormElements {
	padding: 0;
	margin: 1%;
}
.cmsFormElement {
	overflow: hidden;
	margin: 1%;
}

.cmsFormPrompt {
	display: block;
	box-sizing: border-box;
	float: left;
	width:30%;
	font-size: 90%;
	color: #393c47;
	padding: 5px;
	margin: 0;
}

.cmsFormData {
	display: inline-block;
	float: left;
	width:70%;
	margin: 0;
}

.cmsFormDataNoPrompt {
	clear: both;
	display:block;
}

.cmsFormData input,
.cmsFormData textarea,
.cmsFormDataNoPrompt textarea,
.cmsFormData select
{
	width: 98%;
}

.cmsFormData input[type="image"],
.cmsFormData input[type="reset"],
.cmsFormData input[type="submit"],
.cmsFormData input[type="radio"],
.cmsFormData input[type="checkbox"],
.autowidth input,
.autowidth select
{
	box-sizing: border-box;
	width: auto;
	max-width: 100%;
}

.cmsFormElement .cmsFormDataWithLookup input
{
	width: 75%;
}



/* then fix these back to standard width*/

.cmsFormElement input.input100w, .cmsFormElement select.input100w  { width: 35%; min-width:100px;}

.cmsFormElement input[type="button"] ,
.cmsFormElement input[type="image"] ,
.cmsFormElement input[type="submit"] ,
.cmsFormElement input[type="reset"] ,
.cmsFormElement input[type="checkbox"] ,
.cmsFormElement input[type="radio"],
.cmsFormData input.widthauto, input.widthauto,
.cmsFormData select.widthauto, select.widthauto
 {
 	width: auto;
 	height: auto;
 	max-width: 98%;
 }

.cmsFormOptions { width: 78%; float: left; }
.cmsFormActions { width: 20%; float: right; text-align: right;  }
.cmsFormActions input[type="submit"] { font-size: 130%;}


table.cmsFormTable {  border-spacing: 4px; width:100%; margin:0; }
.cmsFormTable td {
	vertical-align: top;
	box-sizing: border-box;
}

tr.topprompts td, .topprompts { font-size: 90%; color: #653; padding: 2px; vertical-align: bottom; }


.cmsFormTable>tr>td:first-of-type,
.cmsFormTable>tbody>tr>td:first-of-type {
		min-width: 50px;
		width: 23%;
		max-width: 200px;
		font-size: 90%;
		color: #888;
		padding-top: 3px;
	}
	
.cmsFormTable>tbody>tr>td:first-of-type sup { font-size: 100%;}

.cmsFormTable tr>td input:not([type]),
.cmsFormTable tr>td input[type="text"],
.cmsFormTable tr>td input[type="email"],
.cmsFormTable tr>td input[type="password"],
.cmsFormTable tr>td textarea ,
.cmsFormTable tr>td select,
.cmsFormTable tr>td .dynaCombo
			{ width: 99%; min-width: 80px; }

.cmsFormTable tr>td input[type="number"],
.cmsFormTable tr>td input[type="decimal"],
.cmsFormTable tr>td input.validateNumber,
.cmsFormTable tr>td input.validateColour,
.cmsFormTable tr>td input.validateTime,
.cmsFormTable tr>td input.validateDateTime,
.cmsFormTable tr>td input.validateDate
{width: 60%; min-width: 40px; }

.cmsFormTable tr>td input.validateStyle
{width: 80%; min-width: 40px; }

.maxWidthFields .dynaCombo input[type="text"],
.cmsFormTable tr>td .dynaCombo input[type="text"] { width: 75%;margin: 0; }
.maxWidthFields .dynaCombo button,
.cmsFormTable tr>td .dynaCombo button,
.cmsFormTable tr>td .dynaCombo input[type="button"] { width: 20%; margin: 0; }

.cmsFormTable tr>td input.widthauto,
.cmsFormTable tr>td select.widthauto { width: auto; min-width: 10px;}

.flex{display:flex;align-items:center;}
.flexwrap{display:flex;flex-wrap:wrap;align-items:center;}
.flex .stretch,	.flexwrap .stretch{flex-shrink:0;flex-grow:1;}

.flexwrap.btngroup>* { margin: 1px; } 

.dynaCombo { display: inline-flex; }
.maxWidthFields.dynaCombo, 
.maxWidthFields .dynaCombo { display: flex; }

@media only screen and (min-width: 1200px) {
	table.cmsFormTable { width:100%; border-spacing: 4px 8px; }
}

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

	.cmsFormTable>tr>td:first-of-type,
	.cmsFormTable>tbody>tr>td:first-of-type {
			text-align: right;
	}

}

.RightCheckList label{
    color: #393c47;
    font-size:90%;
    flex: 10;
}
.RightCheckList input[type=checkbox]{
	flex: 1;
}
div.RightCheckList>div {
    display: flex;
    justify-content: flex-start;
}


.ajaxErrorMessage {
	display:block; position:absolute; background-color:#600; color:white; padding: 5px; font-size: 12pt;
}
.validateHasErrors {
	border: 1px solid #933; background-color: #fee;
}




th { text-align : left; }


.tooltips, .help , .supportArea {
	background-color: white;
	font-size:90%;
	line-height: 180%;
	font-style:italic;
	color: #777;
	padding: 1% 3%;
}

.tooltipsBase {
clear:both;
padding: 0;
border: 0;
border-top: 1px solid silver;
padding-top: 2%;
}

 .supportArea {
 	margin-top: 50px;
 }

 .supportArea H3 {
 }

 .supportAreaData {
 	font-size: 80%;
 	color: green;
 	margin-left: 20px;
 }


.tooltips H3 {
	font-style:italic;
	color:#334445;
	font-size:110%;
}


.tooltipsBig {
	font-size:11pt;
	color: #000000;
}


.tooltipsBig H3 {
	color:#334445;
}


.sampleText {
  color: #339999;
  font-style: italic;
  padding: 2% 4%;
  word-wrap: break-word;
  word-break: break-word;
  overflow: none;
}

div.cssCode {
	color: #990;
}

code.greenCode {
	color: green;
}


.table,.mytable
{
    display:table;
    width:100%;
}
.tr
{
    display:table-row;
}
.td, .th
{
    display:table-cell;
}

.mytable {
	background: #eee;
	border-spacing: 1px;
	padding: 1px;
}

.primaryBlock.mytable{
		background:none;
		border:1px solid #88bafe;
}

.primaryBlock.mytable .tr .td{
		background:rgba(136,186,254,0.1);
}

.mytable>tr>td, .mytable>tbody>tr>td, .mytable>.tr>.td {
	background: white;
/*
	background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6f6f6), color-stop(100%,#ededed));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
*/
	margin: 0;
	border: 0;
	color:#000000;
	vertical-align: top;
	padding: 3px;
	font-weight: normal;
	font-size: 90%;
	word-wrap: break-word;
	word-break: break-word;
}

.mytable.tablevariations>.tr>.td{
	background:none;
}

.mytable tr.altrow td {
	background: none;
	background-color: #eeeeee;
	color:#000000;
}
.mytable tr.altaltrow td {
	background: none;
	background-color: #f3f3f3;
	color:#000000;
}
.mytable tr.userHeader td {
	background: none;
	background-color: #777777;
	color:white;
}


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


fieldset.editTextChunk legend {
    font-size:inherit;
    font-weight: 400;
		text-transform: uppercase;
    font-size: 11px;
}

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

.mytable tr.userHeader:hover td {
	background-color: #333333 !important;
}

	.mytable .tr>.td>input:not([type]),
	.mytable .tr>.td>input[type="text"],
	.mytable .tr>.td>input[type="number"],
	.mytable .tr>.td>input[type="decimal"],
	.mytable .tr>.td>select ,
	.mytable .tr>.td>textarea ,
	.mytable tr>td>input:not([type]),
	.mytable tr>td>input[type="text"],
	.mytable tr>td>input[type="number"],
	.mytable tr>td>input[type="decimal"],
	.mytable tr>td>textarea,
	.mytable tr>td>select
				{ width: 99%; min-width: 60px; }

.mytable input[type="checkbox"] { width:20px; height: 20px;  }
.toprightcheckbox input[type="checkbox"] { width:20px; height: 20px; margin:0; }


.cmsTabs ul {
	position:relative;
	text-align: right;
	margin: 10px 0 ;
	border-bottom: 1px solid #AAA;
	list-style-type: none;
	padding: 0; /* THIRD number must change with respect to padding-top (X) below */
}

.cmsTabs ul li {
	text-align: left;
	position: relative;
	display: inline-block;
	vertical-align: bottom;
	padding-right: 5px;
	padding-top: 5px;
	font-weight: 700;
}
.cmsTabs ul li a {
	-webkit-border-radius: 5px 5px 0 0 ;
	-moz-border-radius: 5px 5px 0 0 ;
	border-radius: 5px 5px 0 0 ;
	padding: 0px 5px; /* set padding (tab size) as desired; FIRST number must change with respect to padding-top (X) above */
	/*
	border: 1px solid #BBB;
	background-color: #FFF;
	*/
	color: #666;
	margin-right: 0px;
	text-decoration: none;
	border-bottom: none;
	color: #393c47;
	display: inline-block;
	position: relative;
	margin-bottom: 0px;
	line-height: 180%;
}

.cmsTabsProminent ul li a {
	border: 1px solid #BBB;
	background-color: #FFF;
	border-bottom: none;
}

.cmsTabs ul li a:hover {
	color: #eeeeee;
	background: #333333;
	border-color: #000000;
}

.cmsTabs li.cmsActiveTab A {
	border: 1px solid #AAA;
	border-bottom: 1px solid #f9f9f9;
	background-color: #f9f9f9;
	color: #000;
	margin-bottom: -1px;
}


.cmsTabs li.cmsTabsTitle {
	position: absolute;
	left:0;
	padding: 0;
	background: none;
	border: none;
	font-weight:400;
	font-size:110%;
}


.sampleColour {
	width: 100px;
	height: 20px;
	text-align: center;
}


.pagingTabs a {
	color: #000;
	display: inline-block;
	text-align:center;
	min-width:30px;
	max-width:55px;
	line-height: 30px;
	text-decoration: none;
	background: #fff;
	border: 1px solid #e6e6e6;
	margin:2px;
}

.pagingTabs a:active {
	background: #eee;
	border: 1px solid #C2C2C2;
}

.pagingTabs a:hover {
	color: #eeeeee;
	background: #333333;
	border-color: #000000;
}

.pagingTabs strong a {
	background: #C2C2C2;
	border: 1px solid #A3A3A3;
}

/* HTML Editor Toolbar */
table.tabsTable tr td {
	font-size: 8pt;
	color: #999;
}





#WebsiteMenuTabs {
	clear: both;
	position: relative;
	margin: 1%;
}

#TopMenus {
	background-color:#466986;
}

#TopMenus {
	 box-sizing: border-box;
}

#TopMenus img {max-width:100%;}


#TopMenusSiteName {
	text-align:right;
}


#TopMenu {
	min-height: 51px;
	position:relative;
	z-index: 5;
	background-color: white;
}
#TopMenu>div
{
	display: inline-block; box-sizing:border-box;
	min-height: 50px;
	background: inherit;
}


#cmsMenuPagesLeft {
	clear: both;
	margin: 1%;
	z-index: 2;
}

#cmsContent {
	clear: both;
	margin: 1%;
	position:relative;
	box-sizing: border-box;
	background: white;
	padding: 1% 2%;
/*	overflow: auto; */
}

#cmsContent.cmsPopupWindow {
margin: 5px;
padding: 5px;
}


.wrapFloats:after,
#cmsContent:after,
#cmsMainWindow:after {
    content: '';
    display: block;
    clear: both;
	visibility: hidden;
	height: 0;
}


#cmsToolDiv {
	position:relative;
	margin-top: 4px;
}


.cmsToolDivAndTooltips {position: relative;}

@media only screen and (min-width: 600px) {
	.cmsRightOfMenuPages, #cmsRightOfMenuPages {
		float: right;
		width: 87%;
	}

	#cmsMenuPagesLeft {
		float: left;
		width: 12%;
		margin-right: 0;
	}
}
@media only screen and (max-width: 600px) {
	.cmsRightOfMenuPages, #cmsRightOfMenuPages {
		float: none;
		width: 100%;
	}

	#TopMenu>div.cmsLogo,
	#cmsMenuPagesLeft {
		display: none;
	}

	div.topRightMenu {text-align: right; } /* only mobile mode */



}

/* min width for IE10 */
div.topRightMenu {float: right; min-width: 60%;  }
div.noBackgrounds  { color: #666; padding: 3px 8px; font-size: 90%; overflow: hidden; }
div.selectWebsite select { max-width: 130px;  }
#TopMenu>div.cmsLogo {max-width: 25%; padding: 2px; position: absolute; top: 0; left: 0; }
#TopMenu>div.cmsLogo img {max-width: 100%; max-height: 45px; }


/* CMS BUTTONS AND SEARCH BAR */


ul.TopMenuTabs {
	list-style:none;
	padding:0;
	margin:0;
    display: flex;
    flex-wrap: wrap;
}

ul.TopMenuTabs>li {
	flex: 1;
	list-style:none;
    vertical-align: middle;
	display: inline-block;
}

a.TopMenuTabA {
	display: block;
	background-color: #333;
	color: #f3edc2;
	height: 50px;
	min-width: 30px;
	padding: 8px;
	margin:0 1px 1px 0;
	text-decoration:none;
	text-align:center;
	box-sizing: border-box;
	overflow: hidden;
	vertical-align: middle;
	white-space: nowrap;
}

.topRightMenu a.TopMenuTabA {
	background-color: rgba(100,100,100,0.2);
	color: black;
	text-align: center;
}

@media only screen and (max-width: 1200px) {
	a.TopMenuTabA {
		font-size: 8pt;
		padding: 9px 6px;
	}
}

@media only screen and (max-width: 1000px) {
	a.TopMenuTabA {
		font-size: 8pt;
		padding: 9px 4px;
	}
}

li.TopMenuTabRight {
	float: right;
}


a.TopMenuTabA
{
	background-color:#393c47;
	color: white;
}



a.TopMenuTabA {
	transition: background-color 0.3s ease;
}



a.TopMenuTabA .buttonIcon span.material-icons { font-size: 170%; display:inline-block; }


#WebsiteMenuTabs a.TopMenuTabA:hover ,
a.TopMenuTabA:hover {
	background-image: none;
	background-color: #333 !important;
	color: white !important;
}




ul.TopMenuTabs .menuPopout {
	margin:0;
	padding:0;
	position:absolute;
	width:100%;
	border:none;
	max-height: 50vh;
	background-color: white;
	box-shadow: 4px 4px 20px rgba(0, 0, 0, 0.6);
	overflow: auto;
	right:0;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-10px);
	z-index: -1;
	/*transition: all 0.5s ease-in-out 0s, visibility 0s linear 0.5s, z-index 0s linear 0.01s;*/
}
.menuPopout #cmsToolWrapper {
}


.menuPopout canvas,
.menuPopout .humanHelpPopup,
.menuPopout .tooltips { display: none; }
 
.menuPopout .hasRightSearchBar { min-height: 600px; } 


.menuPopout #cmsToolWrapper {
	margin:10px; 
}



.topRightMenu ul.TopMenuTabs>li.TopMenuTab .menuPopout,
ul.TopMenuTabs li.TopMenuTabRight .menuPopout {
	left: auto;
	right: 0;
}


@media only screen and (min-width: 1400px) {
	a.TopMenuTabA {
		padding: 8px 12px;
	}
}

@media only screen and (max-width: 600px) and (orientation:portrait) {
	ul.TopMenuTabs li:hover .menuPopout,
	ul.TopMenuTabs li.sfhover .menuPopout,
	ul.TopMenuTabs li .menuPopout:hover {
		display:none;
	}
}

ul.TopMenuTabs li:hover .menuPopout,
ul.TopMenuTabs li.sfhover .menuPopout,
ul.TopMenuTabs li .menuPopout:hover {
	  visibility: visible; /* shows sub-menu */
	  opacity: 1;
	  z-index:4001;
	  transform: translateY(0%);
	  /*transition-delay: 0.3s, 0.3s, 0.3s; */  /* this removes the transition delay so the menu will be visible while the other styles transition */
}

/*target chrome 29+*/
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
    ul.TopMenuTabs .menuPopout {
			transition: all 0.2s ease-in-out 0s, visibility 0s linear 0.2s, z-index 0s linear 0.01s;
		}
		ul.TopMenuTabs li:hover .menuPopout,
		ul.TopMenuTabs li.sfhover .menuPopout,
		ul.TopMenuTabs li .menuPopout:hover{
			transition-delay: 0.3s, 0.3s, 0.3s;   /* this removes the transition delay so the menu will be visible while the other styles transition */
		}
}


#topNavSearchBar input[name='search_keywords'] {

	border:1px solid #666666;
	padding:0;
	height: 22px;
	width:150px;
}


#LeftMenuPages {
	/*display:block;*/
	display: flex; /*AJ flex to allow order: style*/
  flex-direction: column;
}



#LeftMenuPages img {
	border: 0px;
	max-width: 100%;
}


.LeftMenuPagesBlock {
	margin-bottom: 25px;
}

.LeftMenuPagesBlock h4 {
	margin: 0;
	font-size: 80%;
	padding: 5%;
	/*color: #333;*/
	background-color:#393c47;
	color: white;
}


.siteMap li {
	list-style-type: none;
}

ul.SiteMapUL {
	padding:0;
	margin:0;
	display: block;
}

ul.SiteMapUL>li>ul.SiteMapUL {
	border: 1px solid #AAA;
	background: #dbdee1;

	-moz-box-shadow: 2px 5px 8px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 2px 5px 8px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 2px 5px 8px 0px rgba(0, 0, 0, 0.2);

	display: none;
	visibility: hidden;
	top:0;
	left:99%;
	width:100%;
	position:absolute;
	z-index: 400002;
}



ul.SiteMapUL li.pageLI {
	border-bottom: 1px solid #CCC;
	margin: 0px 0px 1px;
	padding: 0;
	display: block;
	position:relative;
}

/*
ul.SiteMapUL li.pageLI .securedPage {
	background-image: url(/uploads/shared/images/art/General/Large/general-icons-46.png);
	width: 24px;
	height: 24px;
	background-size: contain;
	display: inline-block;
}
*/

ul.SiteMapUL li.pageLI>a {
	text-decoration:none;
	padding-left: 5%;
	margin: 0;
	font-family: arial;
	display:block;
	line-height: 220%;
	text-align:left;
	color: #111;
	background-color: white;
}

ul.TopMenuTabs .PopoutColumn ul.SiteMapUL>li>a:hover,
ul.SiteMapUL>li:hover>a,
ul.SiteMapUL>li.sfhover>a {
	background-color: black;
	color: white;
}





@media only screen and (min-width: 1100px) {
	.siteMap ul.SiteMapUL li.pageLI>a
	{
		line-height: 240%;

	}
}

@media only screen and (min-width: 1400px) {
	.siteMap ul.SiteMapUL li.pageLI>a
	{
		line-height: 260%;
	}
}

@media only screen and (max-width: 800px) and (orientation : portrait) {

	ul.TopMenuTabs .menuPopout {	width: 100%;}

}

.siteMap h2 {
	width: 100%;
}



ul.SiteMapUL>li:hover>ul.SiteMapUL,
ul.SiteMapUL>li.sfhover>ul.SiteMapUL
{
	display:block;
	visibility:visible;
}



ul.SiteMapUL>li.addPageLI
{
	text-align: right;
	margin: 4px 0;
}



ul.siteMapOptions
{
	padding: 0;
	margin: 0;
	display: block;
	visibility: hidden;
	position:absolute;
	right:4px;
	bottom:4px;
	color: black;
}

ul.SiteMapUL>li:hover>ul.siteMapOptions,
ul.SiteMapUL>li.sfhover>ul.siteMapOptions
{
	visibility:visible;
}

ul.SiteMapUL ul.siteMapOptions li
{
	position:relative;
	float:left;
	margin-right:3px;
	display:inline-block;
}

ul.SiteMapUL ul.siteMapOptions li a {
	display: inline-block;
}

ul.SiteMapUL ul.siteMapOptions li span.material-icons,
ul.SiteMapUL ul.siteMapOptions li ion-icon
{
	margin: 0;
	font-size: 130%;
	padding:3px;
	color: black;
	background-color:#888;
	max-width: 20px;
}

ul.SiteMapUL ul.siteMapOptions li span.material-icons:hover,
ul.SiteMapUL ul.siteMapOptions li ion-icon:hover,
ul.SiteMapUL ul.siteMapOptions li.sfhover ion-icon
{
	background-color:#CCC;
}


ul .securegroup { color:#f96; }


ul.SiteMapUL li.addPageLI a.addPageButton
{
	display: inline-block;
	text-decoration: none;
	text-align: center;
	line-height: 180%;
	width: 85%;
	background: #f9f9f9;
	color: black;
	border-radius: 4px;
}

ul.SiteMapUL li.addPageLI a.addPageButton:hover
{
	background: black;
	color: white;
}





@media only screen and (max-width: 800px) and (orientation : portrait) {


	.siteMap ul.SiteMapUL li:hover>ul.siteMapOptions,
	.siteMap ul.SiteMapUL li.sfhover>ul.siteMapOptions
 		{	visibility: hidden; }

		.siteMap ul.SiteMapUL li.pageLI a { min-height: 50px; overflow: hidden; }


}






div.sortContainer H3 {
    margin: 0;
    padding: 2% 5%;
    background: #393c47;
    color: white;
    font-size: 80%;
}


ul.wgtul,
ol.sortable,
ul.sortable,
.sortable ol,
.sortable ul,
ol.sortable,
ul.listitems,
.listitems ol,
.listitems ul,
.sortContainer ol,
.sortContainer ul
{
	margin: 0;
	padding: 0;
    min-height: 30px;
	overflow: visible; /* for multiple page/category section sorting, needs remain visible. */
}

ul#sortableInfo
{
	overflow: hidden; /* for column based blog sorting... */
}


/*2nd level*/
ol.sortable ol,
ol.listitems ol,
ul.listitems ul,
.listitems ul ul
{
	margin-left: 20px;
	margin-right: 5px;
}

.PopoutList li,
.sortable li,
.wgtul li,
.listButtons li, 
.listitems li {
	display: block;
	list-style-type: none;
	margin: 0;
	padding: 0;
}


.cmsItem,
.wgtul>li,
.listitems li>div,
.listitems li>a,
.listitems li>b
 {
	display: block;
	position:relative;
	overflow: hidden;
	padding: 8px;
	margin: 1% 0;
	background: #f9f9f9;
	border: 1px solid #f3f3f3;
	text-decoration: none;
}


.sortable li>div,
.sortContainer .fieldName
 {
	display: block;
	position:relative;
	overflow: hidden;
	margin: 1% 0;
	padding: 8px;
	border: 1px solid #f3f3f3;
	text-decoration: none;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #f9f9f9;
	transition: background 0.15s ease;
}

@media only screen and (min-width: 1400px) {
	.cmsItem,
	.wgtul>li,
	.listitems li>div,
	.listitems li>a,
	.listitems li>b
	{
	/*padding: 1.5%;
	margin: 10px 0;*/
	padding: 2.25% 10px;
  margin: 5px 0;
	}
}

/*deal with cmsEditorOptions*/
#sortableInfo li>div {
	min-height: 50px;
}


.clickFirstLink li:hover .cmsItem,
.listitems li>div:hover,
.listitems li>a:hover,
.listitems li>b:hover,
.sortable li>div:hover
 {
	background-color: #ddd !important;
}


body .listitems li a,body .sortable li a,
body .listitems li a b,body .sortable li a b {  /* BOLD <B> TAG OVERRIDE*/
    font-weight: 500;
}



.listitems>li>a ,
.listitems>ul>li>a {
	background-color: #eee ;
	border: 1px solid #aaa;
	color: black ;
	margin:0;
}


.listitems>li>a:hover ,
.listitems>ul>li>ul li>a:hover ,
.listitems>ul>li>a:hover {
	color: white;
	background-color: #006bc2 !important;
	margin:0;
}





/* preferred way to have a set of links as buttons */

.listitems>li,
.listButtons li {
	display: block;
	list-style-type: none;
	margin: 1%;
}

body .listButtons li>div,
body .listButtons li>a
{
	margin:0; 
	display: block;
	text-decoration: none; 
	background-color: #f9f9f9 ;
	border: 1px solid #ddd;
	color: black ; 
}

/* when a list also contains secondary buttons */
.listButtons li>div>a.button
{
	background-color:CCC !important;
	color: white !important;
}

.listButtons li>div>a:hover,
.listButtons li>div:hover,
.listButtons li>a:hover
{
background-color:#006bc2 !important ;
color: white !important;
}





 .sortContainer .fieldName {
	padding: 4px;
	margin-bottom: 2px;
}

.sortable li img {
	cursor: pointer;
}


/* this no good because drggable does weird wrapping stuff */
/*
.sortContainer {
	max-height: 1200px;
	overflow: auto;
}
*/





/**Kaasi 13/6/2013 Default style sheet for nested sortable starts */


.mjs-nestedSortable-error {
	background: #fbe3e4;
	border-color: transparent;
}


.mjs-nestedSortable-collapsed > ol {
	display: none;
}


h3.ui-accordion-header .ui-icon,
.mjs-nestedSortable-branch .disclose,
.mjs-nestedSortable-branch  > div > .disclose {
	cursor: pointer;
	width: 16px;
	height: 16px;
	display: inline-block;
	font-size: 14px;
}


h3.ui-state-default .ui-icon:before,
.mjs-nestedSortable-collapsed  > div > .disclose > span:before {
	content: '+';
}

h3.ui-state-active .ui-icon:before,
.mjs-nestedSortable-expanded  > div > .disclose > span:before {
	content: '-';
}

.mjs-nestedSortable-collapsed  > div > .disclose > span,
.mjs-nestedSortable-expanded  > div > .disclose > span {
    padding: 2px;
    background: #f3f3f3;
    border-radius: 4px;
    width: 16px;
    display: inline-block;
    text-align: center;
	float: left;
}


/* setting up the 3 table rows */

/* the nested one */

.ui-sortable-placeholder,
.sortable .placeholder {
	border: 1px dashed #ffeb8e;
	min-height: 60px;
	background: rgba(255,245,235,0.5);
	visibility: visible !important;
}




.sortable .empty:hover  {
	cursor: auto;
	background-color: #ddd !important;
	background-image: none;
}

 .sectionTitle{
	float: right;
}

.sortable li a
{
	color: #012;
}




.sortable li a,
.listitems li a
  {
	cursor: pointer;
	text-decoration: none;
	font-weight: bold;
 }
 



.dragTable td {
	vertical-align:top;
}


/**RSJ sortable li within a drag table*/

.dragTable td .sortable li {
	min-width: 170px;
}




/***** Member Database Stuff *****/

.newEdit{
	display:none;
}



/* White background to hide gray used during opacity */

#rightDropArea {
	padding: 5px;
	background-color: #fff;
}



/* Gray to show through during opacity */

#rightDropGray {
	background-color: #999;
}



/* block off right when name or email */

#rightDropArea.block {
	filter:alpha(opacity=60);
	opacity: 0.6;
}



/* background colors for drop areas */
/* right area */

.dropActive{
	background-color: #cbe19d;
}



.dropHover{
	background-color: #a1c652;
}



/*left area*/
.dropActiveUL{
	background-color: #cbe19d;
}



.dropHoverUL{
	background-color: #a1c652;
}



/* adding padding to the bottom of each section */

#leftFields > li {
	padding-bottom: 5px;
}



/* adding padding around area so background can be seen */

#leftFields > li > ul{
	padding: 5px;
}





/* Applied to the section headers on the left */

.sectionHeader{
	border-width: 0px;
	border-style: solid;
	padding: 3px;
	border-color: gray;
	background-color: #FFF;
	border-bottom: 1px solid black;
}



.sectionHeader:hover{
	cursor: move;
}



/* Applied to all field LI's */

ol.sortable li>div.empty,
.fieldName.empty{
	border-style: dashed;
	border-color: #CCC;
	background-color: white;
	background-image: none;
}

ol.sortable .empty:hover,
.dragTable .empty:hover{
	cursor: auto;
	background-color: #ddd !important;
	background-image: none;
}



td.rightSide .sortContainer .fieldName {
	border-color: #CCC;
	border-style: dashed;
}

td.rightSide div.sortContainer  {
	border-color: #CCC;
	border-style: dashed;
}





.list-style-none, .list-style-default, .list-style-slide {
	margin: 0;
	padding: 0;
	list-style: none;
}
.list-style-none li, .list-style-slide li {
	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 {
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
	clear: both;
	max-width: 2000px;
	max-width: 100%;
}

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


.list-style-inline li {
	float: left;
	display: inline-block;
}


@media (min-width: 500px) AND (min-device-width: 500px) {

	.list-style-bizcard li {
		display: inline-block;
		float: left;
		width: 48%;
		box-sizing: border-box;
	}

	.list-style-bizcard li:nth-child(2n+1) { margin-right: 1%;  clear: both; }
	.list-style-bizcard li:nth-child(2n+2) { margin-left: 1%; }

	.list-style-2col li {
	  width: 50%;
	  display: inline-block;
		float: left;
		box-sizing: border-box;
	}

	.list-style-3col li {
		width: 33.3%;
		display: inline-block;
		float: left;
		box-sizing: border-box;
	}
	.list-style-4col li {
		width: 25%;
		display: inline-block;
		float: left;
		box-sizing: border-box;
	}
	.list-style-5col li {
		width: 20%;
		display: inline-block;
		float: left;
		box-sizing: border-box;
	}
	.list-style-6col li {
		width: 16%;
		display: inline-block;
		float: left;
		box-sizing: border-box;
	}

	.list-style-2col li:nth-child(2n+3),
	.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;
	}
}




/*overflow hidden allows for increased height to accept right aligned images, with no scroll bar... */
.cmsItem {overflow: hidden; margin: 1%; max-width: 2000px;}
.cmsItem div { margin: 0; }
.cmsSmallPrint { font-size: 80% }
.cmsItem .cmsEnquiry { margin: 0; text-align: right; }
.cmsItem .cmsTitle { margin-bottom: 5px; font-weight: bold; }
.cmsItem .cmsText { font-size: 80%; margin-bottom: 5px; }


/* margin 0 because it creates scroll bars in the cmsItem...*/
.cmsImage img, .floatRight img { max-width: 100%; height:auto; margin: 0;  }

 .floatRight {
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
	max-width: 160px;
	max-height: height:auto;
}

.cmsItem img.floatRight,
img.floatRightSmall { float: right; max-height: 80px; max-width:80px; height:auto; } 

.cmsItem .bottomRightOptions {
	position: absolute; right: 2px; bottom: 2px; 
}

.smallText { font-size: 80%; } 


.list-style-slide .imgSlide img { width: 100%; margin: 0; border: 0; }
.list-style-slide .cmsItem { 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: 5px 0; }
.list-style-default .cmsItem .cmsImage {float:left; width: 10%; margin: 0; margin-right: 2%; text-align: center; }
.list-style-default .cmsItem .cmsTitleAndTextNoPrice {float:right; width: 87%; margin-left: 1%; margin-right: 0%; }
.list-style-default .cmsItem .cmsTitleAndText {float:left; width: 60%; margin: 0; }
.list-style-default .cmsItem .cmsPriceAndEnquiry {float:right; width: 19%; margin: 0%; text-align: right; }
.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%; }

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

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

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

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

.list-style-bizcard .cmsItem .cmsImage {float:left; width: 33%; margin: 0; text-align: center; }
.list-style-bizcard .cmsItem .cmsTitleAndText {float:right; width: 65%; margin: 0; }
.list-style-bizcard .cmsItem .cmsPriceAndEnquiry {float:right; width: 65%; margin: 0; font-size: 80%; overflow: hidden;}
.list-style-bizcard .cmsItem .cmsPrice {float: left; width: 55%;  margin: 0; }
.list-style-bizcard .cmsItem .cmsEnquiry {float:right; width: 40%; margin: 0; }


/* override title popup */
a ion-icon {
  pointer-events: none;
}


.cmsImage .material-icons-outline,
.cmsImage .material-icons,
.cmsImage ion-icon,
.cmsImage i.fa {font-size: 250%; color: #393c47; vertical-align: text-bottom;}

/*icon with heading.. */
.cmsImage label {margin-left: 10px; }



ol.largeNumbers { font-size: 300%; }
ol.largeNumbers>li { vertical-align:text-top;}
ol.largeNumbers>li>div.cmsItem {font-size: 33%; overflow: visible; vertical-align:text-top;  margin: 1% 0; }



#TopMenu form .material-icons { font-size: 17px; vertical-align: text-top; }
#TopMenu input, #TopMenu select, #TopMenu button  {
	padding: 3px;
	border: 1px solid #afc6e4;
	color: black; font-size: 12px;
}

/*AJ attempt to enlarge inputs too inconsistent prefer it though*/
/*
#cmsToolDiv input:not([type='checkbox']):not([type='radio']),
#cmsToolDiv select,
#cmsToolDiv button[type=submit]{
	min-height:38px;
	line-height:32px;
	min-width:38px;
}

#cmsToolDiv .tabsTable select,
#cmsToolDiv div.RightSidePullout input,
#cmsToolDiv div.RightSidePullout select	{
	min-height:inherit!important;
	line-height:inherit!important;

}*/

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

	input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
	  color: silver;
	}
	input::-moz-placeholder { /* Firefox 19+ */
	  color: silver;
	}
	input:-ms-input-placeholder { /* IE 10+ */
	  color: silver;
	}
	input:-moz-placeholder { /* Firefox 18- */
	  color: silver;
	}

}


input[type=button],
input[type=submit],
button,
a.button,
a.smallbutton
 {
	display: inline-block;
	cursor: pointer;
	text-decoration:none;
	font-weight: bold;
	text-align: center;
	transition: background-color 0.3s ease;
	font-weight: normal!important;
	/*border: none !important; */
	box-sizing: border-box;
	
	/* old button	*/
	color: #000!important;
	background: #c2d3eb!important;
	/* new button	*/
	background: #acacac!important;
	color: white !important;
	/* new button a toucher more contrasting	*/
	background: #aaa!important;
	/* needs border to match input fields */ 
	border: 1px solid #aaa!important;
	color: white !important;
}

input[type=button],
input[type=submit],
button,
a.button
{
	/* sizing must be consistent between buttons and a.buttons... 
	/* standard 3px padding, plus with borders now included on buttons...*/
	padding: 4px ;
}


a.smallbutton
{
	padding: 2px 5px ;
}



.cmsItem .cmsTitle>a {
	font-weight: bold;
	color: #000!important;
}
.cmsItem .cmsTitle>a.button {
	color: white !important;
}	


.button.material-icons,
.button .material-icons { font-size: 150%; padding: 4px;  vertical-align: bottom; }
.cmsEditorOptions .button { padding: 2px; font-size: inherit; }

/* eg category and date popup buttons */
button>.material-icons {
	line-height: 16px; 
}


/* tabular content that is less relevant */
.lessRelevant { font-size: 80%; color: #666 }




a.button.smallAction,
input.smallAction{
		width:100%;
		max-width:200px;
		padding:inherit;
}

/* focus colour, but no size change */

a.button.secondaryAction{
	background-color:#d8e3f3!important;
	color: black !important; 
	/* needs border to match input fields */ 
	border: 1px solid #d8e3f3!important;
}


.cmsItem .cmsTitle a
{
	line-height: 200%;
	margin: 2px;
}

/* Reuben: no line height here please */
a.button
{
	min-width: 25px;
	margin: 1px;
	/* font-size: 95%; */
}

/* buttons should have same height as the input fields the sit next to...   requier more targeting if you want to increase to 20px*/
/*
button .material-icons { font-size: 20px; }
*/

.popupButton { box-shadow: 1px 1px 1px #666; vertical-align: top;   }

/* fit in one row under an image */

.colorPickerButton { vertical-align: top;  box-shadow:  1px 1px 1px #666;  }

.imagePickerButtons a.button { padding: 3px; box-shadow:  1px 1px 1px #666; }
.ImageSelectorNarrow a.button { padding: 3px; box-shadow:  1px 1px 1px #666; }
.ImageSelectorNarrow {position: relative; }
.ImageSelectorNarrow .imagePickerButtons {
	position: absolute;
	top: 50%;
    left: 50%;
	-ms-transform: translateY(-50%)  translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
	text-align: center;
	min-width: 85px;
	transition: all 0.15s ease;
}
.ImageSelectorNarrow.hasImage a.button {
	opacity: 0.5;
	font-size: 50%; padding: 1px; min-width: auto;
}
.ImageSelectorNarrow.hasImage:hover a.button  {
	opacity: 1;
	font-size: 80%;
}

.ImageSelectorNarrow.hasImage:hover .imagePickerButtons
{
	background: rgba(255,255,255,0.6); padding: 3px;
}

.sampleImageAndLink { width:100%; max-width: 100%; min-height:20px; max-height:160px; text-align: center; overflow: hidden;}
.sampleImageAndLink img { max-width: 100%; min-height:20px; }

a.smallbutton
{
	white-space:nowrap;
	padding:2px;
	font-size: 80%;
}

.cmsEditorOptions a.smallbutton {
	font-size: 10pt !important;
}


a.button i.fa { line-height: inherit; }
a.button.fa { line-height: inherit; font-size: 15px; padding: 5px 3px; color: #333 !important;}
a.button ion-icon { line-height: inherit; font-size: 18px; padding: 3px; color: #333 !important;}

@media (max-width: 600px) {
	a.button ,
	a.smallbutton  {
		display: inline-block;
		min-width: 18px;
		min-height: 18px;
	}
}



div.primaryAction{
	padding:15px;
	background: #88bafe!important;
}

div.primaryAction h3{
	margin-top:0;
}

a.button.primaryAction,
input.primaryAction
{
	background: #88bafe!important; /* blue */
	background: #4BA630!important; /* dark green */
	background: #00bf00!important; /* bright green */
	background: #00b000!important; /* darker bright green */
	/* needs border to match input fields */ 
	border: 1px solid #00b000!important; 
	color: white !important;
}
a.button.primaryAction:hover,
input.primaryAction:hover
{
	background: black!important;
	color: white !important;
}


@media (min-width: 800px) {
	a.button.primaryAction,
	input.primaryAction
	{
		font-size: 1.1em;
		padding:15px;
		text-shadow: 1px 1px 2px rgba(255,255,255,0.3);
	}
}
 
button.primaryButton,
input.primaryButton,
.cmsItem a.primaryButton,
a.primaryButton  {
	color: black !important;
	background: #88bafe!important; /* blue */
	background: #00bf00!important; /* bright green */
	background: #4BA630!important; /* dark green */
	background: #00b000!important; /* darker bright green */
	/* needs border to match input fields */ 
	border-color: #00b000!important; 
	color: white !important;
}


.deleteButton,
a.deleteButton,
input.deleteButton { 
	background-color: #cd0000 !important;  /* dark red */
	background-color: #ec563f !important;  /* logo red */
	border-color: #ec563f !important;  /* logo red */
	color: white !important; 
}


a.confirmDeleteButton {  white-space: nowrap; }

a.confirmDeleteButton,
input.confirmDeleteButton { 
	display:none; 
	background-color:red !important;  
	background-color: #cd0000 !important;  /* dark red */
	border-color: #cd0000 !important;  /* dark red */
	color: white !important; 
}


.imagePickerButtons a.imageSelectorButton
{
	background: rgba(0, 172, 214,0.9) !important;
	border-color: rgba(0, 172, 214,0.9) !important;
	color: white !important;
}

.imagePickerButtons a.cropButton
{
	background-color: rgba(233, 84, 0, 0.9)!important;
	border-color: rgba(233, 84, 0, 0.9)!important;
	color: white !important;
}


a.secondaryButton,
a.button-secondary { 
	background-color:#006ac2!important;  
	border-color:#006ac2!important;  
	color: white !important; 
}

.blockButton {display: block !important; }   

a.button-save:link {
    background: orange !important;
	background: #4BA630!important;
	background: #00bf00 !important;
    font-weight: bold !important;
    color: white !important;
}
a.button-backups {
    background: #006699 !important;
    font-weight: bold !important;
    color: white !important;
}

/* no like this... need button to be functional while active... and delete confirm button to be prominant */
/*
 .mytable tr:hover a.button,
.listitems li:hover a.button
{
	background-color: #AAA !important;
	color: black !important;
}
*/

input[type=button]:hover,
input[type=submit]:hover,
input[type=button].active,
input[type=submit].active,
.listitems li a.button:hover,
.mytable tr a.button:hover,
a.button:hover,
button:hover,
li.sfhover a.button:hover,
a.smallbutton:hover,
li.sfhover a.smallbutton:hover
{
	background-color: hsla(207, 100%, 38%, 1)!important;
	border-color: hsla(207, 100%, 38%, 1)!important;
	color:white !important;
}



/*
.clickFirstLink li:hover .cmsItem a:first-child
{
	background-color: hsla(207, 100%, 38%, 1)!important;
	color:white !important;
}
*/


.changesSaved a.button {font-size: 110%; background-color: #666 !important; color: white !important; padding: 3%;}
.changesSaved a.button ion-icon {font-size: 150%; padding: 5px; color: white !important; }
.changesSaved a.button i {font-size: 150%; padding: 5px;}

#WebsiteMenuTabs a.TopMenuTabA {
	background-color: #006bc2 !important;
}
a.previewLink ,
.changesSaved a.button-preview,
#PreviewTab a.TopMenuTabA {
	background-color: #1da1f2 !important;
	color: white !important;
}
.changesSaved a.button-publish,
#PublishTab a.TopMenuTabA {
	background-color: #00bf00 !important;
	maybe-background-color: #4fa834 !important;
}

body .goLiveButton,
#GoLiveTab a.TopMenuTabA {
	background-color: green !important;
	background: #00bf00!important; /* bright green */
	color: white !important;
}


body  .changesSaved a.button:hover {
	background-color: #333 !important;
}




/*

.ImagesDirectoryThumbs {
	padding-left: 0;
}


.ImagesDirectoryThumbs li {
	display: inline-block;
	width: 88px;
	border: 1px solid gray;
	margin: 10px;
	padding: 5px;
	font-size: 85%;
}

*/



ul.photos {
 	list-item: none;
 	padding:0;
 	margin-top: 10px;
 	margin-bottom: 10px;
}
ul.photos li {
	float: left;
	display: inline-block;
	width: 160px;
	margin: 4px;
}
ul.photos li>div {
	position:relative;
	height: 130px;
	text-align:center;
    background: #ddd;
}
ul.photos a.thumbnail {
    font-size: 80%;
    display: block;
}
ul.photos a>img {
	max-width: 100%;
}

ul.photos li.banner {
	width: 310px;
}
ul.photos li.banner>div {
	height: 50px;
}


ul.topfolders { 
	display: flex; 
    flex-wrap: wrap;
}

ul.topfolders a, ul.folders {
    display: block;
	text-decoration: none;
}

ul.topfolders li {
	display: inline-block;
	flex: 1;
	min-width: 60px;
	margin: 0;
	padding: 0;
}

ul.topfolders li a {
	text-align: center;
	position:relative;
	height: 65px;
	font-size: 8pt;
	display: block;
	background-color: #006bc2;
	color: white;
	padding: 4px;
	margin: 1px; 
}

ul.topfolders li a:hover {
	background-color:black !important ;
	color: white !important;
}

ul.topfolders li span.material-icons {
	font-size: 150%; padding: 4px; colour: white;
}


ol.productsList {
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	grid-gap:1rem;
	    margin: 0;
    padding: 0;
    list-style: none;
}

/* for sortability, needs to be fixed height li */
ol.productsList li {
	width: 100%;
	display: block;
	height: 105px;
	overflow: hidden;
	padding: 0;
	font-size: 80%;
	float: none;
	min-width: auto;
	box-sizing: border-box;
}
ol.productsList li>div.cmsItem {
	display: block;
	position:relative;
	height: 100px;
	overflow: hidden;
	margin: 0;
	padding: 5px;
	box-sizing: border-box;
}

ol.productsList li  a {
	text-decoration: none;
}

.productsList .cmsEditorOptions {
	font-size: 8pt;
	bottom: 0;
 }

.productsList .floatRight {
	max-width: 33%;
}
.productsList .floatRight img {
	max-width: 100%;
}
.productsList .cmsText {max-height: 50px;}

.productsList .pcode {height: 14px; overflow: hidden;}
.productsList .floatRight {max-width: 70px;}
.productsList .cmsTitle {overflow: hidden; }
.productsList .cmsTitle a { background: none; margin: 0; padding: 1px; color: black;}



.welcomeMessages .cmsItem {  padding: 3%; margin: 10px 0;}


/*------------------------------

WELCOME DASHBOARD

--------------------------------*/

ol.dashboardsteps, ol.dashboardsteps ol {
	list-style: none;
	counter-reset: my-awesome-counter;
}
ol.dashboardsteps li {
counter-increment: my-awesome-counter;
	margin: 2%;
	position: relative;
	padding-left: 40px;
}
ol.dashboardsteps li a {
	text-decoration: none; color: green; font-weight: strong;
}
ol.dashboardsteps li::before {
	position: absolute;
	display: block;
	top:0; left: 0;
	content: counter(my-awesome-counter);
	height: 25px; width: 25px;
	font-size: 12px;
	text-align: center;
	border-radius: 15px;
	color: white;
	border: 2px solid silver;
}

.welcomeBox fieldset.formborder {
	border-radius: 0;
	border: 1px solid #c2d3eb;
	color: inherit;
	font-style: inherit;
	line-height: 180%;
}

.supportIcons a{
    border-radius: 5px;
		background: #006ac2!important;
}
.supportIcons .material-icons {font-size: 200%; margin-bottom: 5px; }

.stepLogo::before,
.stepName::before,
.stepBanner::before,
.stepColours::before{
 background-color: #E20000;/*red*/

}
.stepWidgets::before{
 background-color: #ff6600; /*orange*/
}
.stepContent::before,
.stepPage::before{
	background-color: #128BDB;
}

.stepEcom::before{
background-color: #393c47; /*darkblue*/
}
	.stepEcom .stepEcom::before{
	background-color: #393c4799;/*darkblue*/
	}
	.stepDomain::before{
	background-color: #C6A200; /*tan*/
	}
	.stepLive:before{
	background-color: #008000; /*green*/
	}

.cmsItem .cmsLinkBlock{margin-top:10px;}

#inPageSearchForm{margin-right:1%;}

/*------------------------------

custom shopping dashboard layout -
css dynamic grid layout, falls back to 1col on internet explorer

--------------------------------*/

.list-style-grid{
	display:grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	grid-gap:1rem;
	    margin: 0;
    padding: 0;
    list-style: none;
}
	.grid240{
		grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	}

.list-style-grid li{
    background: #f9f9f9;
}
.list-style-grid i{
	margin:0 8px;
}
.list-style-grid .cmsImage ion-icon,
.list-style-grid .cmsImage i.fa {
    font-size: 170%;
    color: #393c47;
}

.list-style-grid .cmsItem label,
.list-style-grid .cmsImage label{
	font-size: 14px;
	font-weight: bold;
	vertical-align: super;

}
.list-style-grid .cmsItem{
	margin:0;
	padding:16px;
}
.list-style-grid .cmsImage{
	float: none;
	width: auto;
	text-align: left;
	margin-bottom: 8px;
}
.list-style-grid .floatRight{
	float: right;
	width: auto;
	margin-left: 8px;
	margin-bottom: 8px;
}


.list-style-grid .cmsTitleAndTextNoPrice{
	margin:0;
	float:none;
	width:auto;
}




@media all and (-ms-high-contrast:none) and (min-width: 900px)
{
	ol.productsList li { display:inline-block; width: 23%; margin: 1%; }
	.list-style-grid li { display:inline-block; width: 31%; margin: 1%; height: 180px; }
}





li>div.secureItem, .secureItem, .secureItem .cmsItem
  { border: 1px dashed blue;  }


li>div.hiddenItem, .hiddenItem, .hiddenItem .cmsItem, form.hiddenItem>span.td
  { border: 1px dashed green !important; }

li>div.deletedItem, .deletedItem , .deletedItem .cmsItem
 { text-decoration: line-through; border: 1px solid red; color: red;
	background: #f6eeee;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f6eeee 47%, #edbbbb 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(47%,#f6eeee), color-stop(100%,#edbbbb));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f6eeee 47%,#edbbbb 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#f6eeee 47%,#edbbbb 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#f6eeee 47%,#edbbbb 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f6eeee 47%,#edbbbb 100%);
}


.secureProduct, .secureItem { color: green; border-color: 1px dashed green; }




input.tilebutton {
  font-size: 140%;
  width: 100px;
  white-space: normal;
  padding: 5%;
  margin: 1%;
  text-align: center;
}

li div .cmsEditorOptions {
  	position:absolute;
	bottom: 1px;
	padding: 3px;
	left: 0; right: 0;
	text-align: center;
	clear: both;
  	background: rgba(240, 240, 240, 0.6);
}

.cmsEditorOptions a.button { line-height: 120%; }

div.hasCmsEditorOptions ,
.sortable li>div.hasCmsEditorOptions {
	padding-bottom: 30px;
}



.cmsCheckCorner {
	position:absolute;
	top: 0px;
    right: 0px;
  	background: rgba(240, 240, 240, 0.6);
    text-align: left;
	padding: 8px;
}


.cmsCheckCorner input {
	margin: 0;
	width: 20px !important;
	height: 20px !important;
}

.cmsDragCorner {
	position:absolute;
	bottom: 0px;
    right: 0px;
	padding: 8px;
	color: #AAA;
  	background: rgba(240, 240, 240, 0.6);
    text-align: right;
	font-size: 16px !important;
}


 .cmsDragCorner:hover {
	cursor: move;
	background-color: #ddd !important;
	background-image: none;
}



/*legacy*/
.sortable .handle {
	cursor: move;
	display: inline-block;
	width: 16px;
	min-height: 16px;
	vertical-align: top;
	background-image: url(/uploads/art/Arrows/move.png) !important;
	background-color: white;
	background-repeat: no-repeat !important;
	opacity: 0.3;
	height: inherit;
	margin: 0 6px 6px 6px;
	margin-bottom: 6px ;
}

/*legacy*/
.toprightcheckbox {
	position:absolute;
	top: 3px;
    right: 3px;
    background: rgba(250, 250, 250, 0.6);
    text-align: center;
}






.mytooltips {
    background-color: #FFEEAA;
    border: 1px solid #FFDD99;
    min-height: 20px;
}

a.mytooltipsButton:link {
		    background-color: #FFEEAA;
		    color: black;
    		border: 1px solid #FFDD99;
	}
a.mytooltipsButton:hover {
		    background-color: black;
		    color: #FFEEAA;
    		border: 1px solid #FFDD99;
	}


.actionFeedback, .actionSuccess, .actionfeedback, .greentick, .success,
.error, .introWarning, .warning , .importantText
 {
 	box-sizing: border-box;
	background-repeat:no-repeat;
	background-position:top left;
	border:dashed;
	margin: 1% 0;
	padding: 1% 1% 1% 50px;
}

span.error,
span.warning { display: inline-block; }

.importantText, .introWarning, .warning  {
	padding: 5px 5px 5px 50px;
	background-color: #fff9ee;
	background-image:url(/uploads/shared/images/art/Crystal_Clear_Icons/apps/important.png );
	background-size: 32px 32px;
	background-repeat:no-repeat;
	background-position:5px 5px;
	border: 1px dashed #ee9900;
}

.actionFeedback, .actionSuccess, .actionfeedback, .greentick, .success ,  .listitems>li>.success  {
	padding: 5px 5px 5px 50px;
	background-color: #f2f2f2;
	color: #006600;
	background-image:url(/uploads/63211/images/icons/success.gif  );
	background-repeat:no-repeat;
	background-position:5px 5px;
	border: 1px dashed #006600;
}


.error , .listitems>li>.error {
	padding: 5px 5px 5px 50px;
	background-image:url(/uploads/63211/images/icons/no_sucess.gif);
	background-repeat:no-repeat;
	background-position:5px 5px;
    background-color: #ffcccc;
	border:2px dashed #cc3300;
	color: #334445;
}


.actionFeedback h1, .actionSuccess H1 {
	color: #006600;
	font-size: 13pt;
	vertical-align: middle;
	margin-top: 0;
}




	#TopMenus img {max-width:100%;}


@media only screen and (max-width: 600px) and (orientation : portrait) {


	.sortable li>div,
	ul.sortable li>div,
	.listitems li>div,
	.listitems li>a,
	.sortContainer .fieldName,
	.cmsItem
	{
		box-sizing: border-box;
	 	min-height: 25px;
	}


	.dragTable td .sortable li {
    min-width: 50px;
	}

}








/*
FILES DRAG AND DROP
*/

#dragandrophandler {
    border: 2px dotted #afc6e4;
	color: #afc6e4;
    margin: 5px 0;
	padding: 3px;
	opacity: 1;
	font-size: 80%;
}
/* REUBEN WANTS BLOCK - LOOKS BETTER on PAGE OPTIONS TAB, and RIGHT SEARCH BOX areas
.imagePickerDiv {
    display:inline-block;
}
*/

.imagePickerDiv #dragandrophandler {
	display: none;
	visibility: hidden;
	opacity: 0;
}
.imagePickerDiv #dragandrophandler.dragandrophandlerVisible {
    display:block;
	visibility: visible;
	opacity: 0.5;
}


 #dragandrophandler.dragandrophandlerActive {
    display:inline-block;
	visibility: visible;
    border: 2px dotted black;
    background-color: #0B85A1;
	opacity: 1;
}

#dragandrophandler .ddh_progressBar {
    width: 200px;
    height: 22px;
    border: 1px solid #ddd;
    /*border-radius: 5px; */
    overflow: hidden;
    display:inline-block;
    margin:0px 10px 5px 5px;
    vertical-align:top;
}

#dragandrophandler .ddh_progressBar div {
    height: 100%;
    color: #fff;
    text-align: right;
    line-height: 22px; /* same as #progressBar height if we want text middle aligned */
    width: 0;
    background-color: #0ba1b5;
	/*border-radius: 3px; */
}
#dragandrophandler .ddh_statusbar
{
    border-top:1px solid #A9CCD1;
    min-height:25px;
    padding:10px 10px 0px 10px;
    vertical-align:top;
}
#dragandrophandler .ddh_statusbar:nth-child(odd){
    background:#EBEFF0;
}
#dragandrophandler .ddh_filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
#dragandrophandler .ddh_filesize
{
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
#dragandrophandler .ddh_abort{
    background-color:#A8352F;
	/*
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;display:inline-block;
	*/
    color:#fff;
    padding:4px 15px;
    cursor:pointer;
    vertical-align:top
    }


#dragandrophandler i{
color:#069
}






/*
    Colorbox Core Style:
    The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxWrapper {max-width:none;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto; -webkit-overflow-scrolling: touch;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block; max-width:none; -ms-interpolation-mode:bicubic;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#colorbox, #cboxContent, #cboxLoadedContent{box-sizing:content-box; -moz-box-sizing:content-box; -webkit-box-sizing:content-box;}

/*
    User Style:
    Change the following styles to modify the appearance of Colorbox.  They are
    ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:#000;}
#colorbox{outline:0;}
    #cboxContent{margin-top:20px;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        /*#cboxLoadedContent{border:5px solid #000; background:#fff;}*/
        #cboxTitle{position:absolute; top:-20px; bottom: auto; left:0; color:#ccc;}
        #cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
        #cboxLoadingGraphic{background:url(/js-cms/colorboxTopRedClose-jquery1.10/example3/images/loading.gif) no-repeat center center;}

        /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */
        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; width:auto; background:none; }

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
		/*
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}
		#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
        #cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(/js-cms/colorboxTopRedClose-jquery1.10/example3/images/controls.png) no-repeat top left; width:28px; height:65px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:bottom left;}
        #cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(/js-cms/colorboxTopRedClose-jquery1.10/example3/images/controls.png) no-repeat top right; width:28px; height:65px; text-indent:-9999px;}
        #cboxNext:hover{background-position:bottom right;}
        #cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(/js-cms/colorboxTopRedClose-jquery1.10/example3/images/controls.png) no-repeat top center; width:38px; height:19px; text-indent:-9999px;}
        #cboxClose:hover{background-position:bottom center;}
	*/


/* do not exceed 999999 here, as some common popups on public side are 999999 , needs be same or lower... */
#colorbox, #cboxOverlay, #cboxWrapper{ z-index: 9999;} /* less than new cms modal */
#cboxOverlay{background:#333;}

#colorbox {
	border:1px solid #000;
	background-color: rgba(255,255,255,0.7);
    box-shadow: 5px 5px 9px #333;
}

#cboxLoadedContent{
    /*border-radius: 8px;*/
	padding: 8px;
	/*
	border:9px solid #000; background:#fff;
	-webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px;
	*/
	 }
/*#cboxClose {right: 20px; top: 1px;  background:url(/js-cms/colorboxTopRedClose-jquery1.10/example3/images/controls.png) no-repeat top center; } */

        #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose {border:0; padding:0; margin:0; overflow:visible; text-indent:-9999px; width:20px; height:20px; position:absolute; top:-18px;
			background:url(/uploads/js/colorbox_1_4_33/example2/images/controls.png) no-repeat 0 0;
		}

        /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */
        #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active {outline:0;}

        #cboxPrevious{background-position:0px 0px; right:49px;}
        #cboxPrevious:hover{background-position:0px -25px;}
        #cboxNext{background-position:-25px 0px; right:27px;}
        #cboxNext:hover{background-position:-25px -25px;}
        #cboxClose{background-position:-50px 0px;right:5px;background-color: red; color: red;}
        #cboxClose:hover{background-position:-50px -25px;}



/* /js-cms/colorboxTopRedClose-jquery1.10/example3/images/overlay.png */
/* #cboxTitle { color: white; font-weight: bolder; text-shadow: 2px 2px #000; margin-left: 15px; }  */
 #cboxTitle { color: black; font-weight: bolder; margin-left: 15px; margin-top: 3px; }

  #cboxContent{margin-top:20px; background:none; }

#cboxLoadedContent {}


	/* New 2020 cboxstyle for cbox,drag-drop*/
	#colorbox.whitebox{
		    box-shadow: 0 4px 23px 0 rgba(0, 0, 0, 0.15), 0 2px 6px rgba(0, 0, 0, 0.15);
				border-radius:5px;
				border: none;
	background-color: white;
	cursor:move;
	}

	#colorbox.whitebox	#cboxContent {

	}


/*new colour scheme*/


 iframe.internalPreview {
	border: 1px solid #aaa;
	/*
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	*/
	-moz-box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.2);
	box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 1px 3px 7px 0px rgba(0, 0, 0, 0.2);
}

iframe.mobileView{width:560px;}


@media (min-width: 900px) {

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

}




#htmlEditorSaveIframe {
  position: fixed;
	width: 80%; right: 0;
    bottom: 0;
    z-index:11;
	background: #eee;
    padding: 5px;
    margin: 0;
	height: 40px;
	border: 1px solid #aaa;
	-box-shadow: -5px -5px 5px rgba(0, 0, 0, 0.2);
	border-radius: 10px 10px 0 0;
}




@media only screen and (min-width: 900px) {
	#htmlEditorSaveIframe {
		width: 50%;
		right: 10%;
	}
}

#htmlEditorSaveIframe  input {
	vertical-align: middle;
}

#maximiseableDiv {
	background-color:#f9f9f9;
}


.tabsTable .button {
	display: inline-block;
}


.tabsTable .minimiseButton { display:none; }
.maximiseDivToWindow .tabsTable .minimiseButton { display: inline-block; }
.maximiseDivToWindow .tabsTable .maximiseButton { display: none;}

.maximiseDivToWindow {
	z-index:10;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	padding-bottom:20px;
	border: 2px solid #777;
    box-sizing: border-box;
}




.RightSidePullout fieldset.formborder
{
    background: #DEE;
    border-color: #699;
}

fieldset.formborder legend label ,
fieldset.formborder legend a.button ,
.RightSidePullout .minimiseButton
{
    position: absolute;
    display: inline-block;
    right: 15px;
    top: 0;
    font-weight: normal;
    font-size: 8pt;
    padding-right:5px;
    padding-left:5px;
    background: #f9f9f9;
    color: #666;
    line-height: 100%;
}


.rightSideSearchBar  {
	background: white;
}

.rightSideSearchBar .validateDateTime
	{
		width:120px;
	}

.RightSidePullout .minimiseButton { visibility: none; }




.showRightSearchBar .sideEl{
    margin: 8px 0;
}
.showRightSearchBar .sideEl.label{
    margin: 8px 0 4px;
}


.searchWebsites  {
	white-space: nowrap;
}

.maxWidthFields textarea,
.maxWidthFields input ,
.maxWidthFields select {
	max-width:100%;
}

@media (min-width: 900px)  {

	.showRightSidePullout .RightSidePullout table.cmsFormTable td ,
	.showRightSearchBar .rightSideSearchBar table.cmsFormTable td { width:100% ; display:block; text-align:left; padding: 2px; margin: 0;}


	.showRightSearchBar .maxWidthFields textarea,
	.showRightSearchBar .maxWidthFields input ,
	.showRightSearchBar .maxWidthFields select ,
	.showRightSidePullout .maxWidthFields textarea,
	.showRightSidePullout .maxWidthFields input ,
	.showRightSidePullout .maxWidthFields select,
	.showRightSidePullout .maxWidthFields .dynaCombo
	{
		width:100%;
		margin-bottom: 2px; 
		padding: 5px; 
	}
	.showRightSearchBar .dynaCombo input {
		margin-bottom: 0; 
	}

	.maxWidthFields2columns input { 
		width:48% !important;
	}

	.menuPopout .maxWidthFields a.button,
	.showRightSearchBar .maxWidthFields a.button ,
	.showRightSearchBar a.button.maxWidthFields,
	.showRightSidePullout .maxWidthFields a.button ,
	.showRightSidePullout a.button.maxWidthFields
	{
		display:block;
	}

	.RightSidePullout .minimiseButton {
		visibility:visible;
	}

	/*eg to create list filters, that get hidden by tick box options*/
	.menuPopout .rightSideSearchBar,
	.showRightSearchBar .rightSideSearchBar {
		position: absolute;
		top: 0;
		right:0;
		width:20%;
		overflow:auto;
	}
	.showRightSearchBar .rightSideActionBar {
		width:24%;
	}

	.actionBarBlock{
		position:relative;
		margin-top:20px;
	}
	#cmsContent.showRightSearchBar  {
		min-height: 800px;
	}


	.showRightSearchBar .maxWidthFields .popupButton
	{
		width:15%;
	}
	.showRightSearchBar .maxWidthFields .validateDateTime
	{
		width:80%;
	}
	
	.menuPopout .searchDiv,
	.showRightSidePullout .searchDiv,
	.showRightSearchBar .searchDiv {
		display:block; margin-bottom:5px;
		line-height: 230%;
	}


	.showRightSearchBar .rightSideSearchBar .cmsTabs ul li,
	.showRightSearchBar .rightSideSearchBar .cmsTabs ul li a
	{
		position:relative;
		display:block;
	}
	.showRightSearchBar .rightSideSearchBar .cmsTabs ul li a
	{
		position:relative;
		display:block;
		border-radius: 5px;
		margin: 5px;
		border: 1px solid #BBB;
	}

	#cmsContent .RightSidePullout {
		display:none;
		position:fixed;
		width:20px;
		height: 50px;
		overflow:hidden;
	}


	#cmsContent.hasRightTooltips .tooltipsRight {
		float: right;
		top: 0;
		right:0;
		width:30%;
		overflow:auto;
	}

	#cmsContent.hasRightTooltips #cmsToolDiv {
		float: left;
		width: 69%;
	}


	.menuPopout .hasRightSearchBar,
	#cmsContent.showRightSearchBar .hasRightSearchBar,
	#cmsContent.showRightSearchBar .tooltipsBase,
	#cmsContent.showRightSidePullout .tooltipsBase
	{
		margin-right: 21%;
	}
	#cmsContent.showRightSearchBar.showAsActionBar .tooltipsBase,
	#cmsContent.showRightSearchBar .hasActionBar{
		margin-right: 28%;
	}

	#cmsContent.showRightSidePullout .rightSideSearchBar
	{
		display:none;
	}


	#cmsContent.showRightSidePullout .RightSidePullout {
		display:block;
		position:fixed;
		right:0;
		top:25%;
		width: 18%; /* % of whole screen */
		height: 75%;
		margin: 0.5%;
		z-index: 3;
		overflow:auto;
	}


	#cmsContent.showRightSidePullout .RightSidePullout,
	#cmsContent .RightSidePullout .RightSideMaximiseButton ,
	#cmsContent.showRightSidePullout .RightSidePullout .RightSideMinimiseButton
	{
		display:block;
	}
	#cmsContent .RightSidePullout .RightSideMinimiseButton,
	#cmsContent.showRightSidePullout .RightSidePullout .RightSideMaximiseButton
	{
		display:none;
	}



}



@media only screen and (max-width: 600px){

	
	#WebsiteMenuTabs{
		 margin:0;
	    background-color: #006bc2;
	   background-color:#005499;
	}

	 ul.TopMenuTabs {
		display:flex;
		flex-wrap: wrap;
	}

	 ul.TopMenuTabs li{
		flex:1;
	}
	.selectWebsite>div:first-child,
	.searchWebsites>form>div:first-child,
	.searchWebsites>form button[type=submit]{display:none;}
	 ul.TopMenuTabs  div.noBackgrounds {
	    color: #eee;
	    padding: 0;
	}
	 ul.TopMenuTabs input,ul.TopMenuTabs select{
	height:50px;
	}
	/*CMSMSTABS*/

	.cmsTabs ul {
	    margin: 0;
	    padding: 0;
	    display: flex;
	    flex-wrap: wrap;
	}
	.cmsTabs li.cmsTabsTitle {
	    position:relative;
	    width: 100%;
	    font-size: 100%;
	    flex: none;
	    text-align: center;
	  font-weight:700;
	}
	.cmsTabs ul li {
	    text-align:center;
	    position: relative;

	  padding:0;
	    font-weight: 400;
	    flex: 1;
	}
	#cmsContent {
	    margin: 0%;
	    padding:0;
	}

	.cmsTabSet{
	    background: #ddd;
	}
	.cmsToolDivAndTooltips{
	padding:2%;
	}
	.cmsTabs ul {
	    margin: 0;
	    padding: 0;
	    display: flex;
	    flex-wrap: wrap;
	border:none;
	}
	.cmsTabs li.cmsTabsTitle {
	    position: relative;
	    width: 100%;
	    font-size: 100%;
	    flex: none;
	    text-align: center;
	    font-weight: 700;
	    padding: 5px 0;
	}
	.cmsTabs ul li {
	    padding: 0;
	    margin: 0 1px 1px 0!important;
	    font-weight: 400;
	    flex: 1;
	    display: flex;
	    align-items: center;
	    background: #fff;
	}
	.cmsTabs ul li a,
	.cmsTabs li.cmsActiveTab A {
	    height: auto;
	    font-size: 90%;
	    padding: 5px;
		text-align: center;
	    border-radius: 0;
	   border:0;
	    margin: 0;
	    line-height: 1.2em;
	    display: block;
	    flex: 1;
	    max-width: none;
	}
	.cmsTabs li.cmsActiveTab,.cmsTabs li.cmsActiveTab a{
	background-color:#ddd;
	}

}




@media only screen and (max-width: 800px) and (orientation : portrait) {

	.cmsTabs li.cmsTabsTitle {
		position:static;
		float: none;
		display:block;
		background:none;
	}

	.cmsTabs ul li a { max-width: 33px ; height: 30px;  font-size: 80%; overflow: hidden;}

}



@media print {
	.noPrint, .cmsTabs, .cmsTabSet, .tooltips, .RightSidePullout, .rightSideSearchBar { display:none; }
	#cmsContent, .cmsContentWithMenu { margin: 0; position:relative; left: 0; top: 0; right: 0; bottom: 0;}

}


div.LeftMenuPagesBlock{
order:99; /*give a default order so not 0 (top)*/

}

div.LeftMenuPagesBlock H4 {
	position: relative;
}


div.LeftMenuPagesBlock H4 .maxToggle,
div.LeftMenuPagesBlock H4 .moveMenuBlock  {
	position:absolute;
	display: block;
	right: 3px;
	top: 3px;
	padding: 5px;
	background-color: rgba(100,100,100,0.5);
	cursor: pointer;
	color: white;
	font-size: 12px;
}

div.LeftMenuPagesBlock H4 .moveMenuBlock {
    right: 26px;
    /*
    transform: rotate(-90deg);
    */
    width: 8px;
		background-color: rgba(100,100,100,0.3);
		/*display:none!important;AJ NOT ENABLED AS OF YET*/
}
div.LeftMenuPagesBlock.hideMove .moveMenuBlock {
			display:none!important;/*AJ NOT ENABLED AS OF YET*/
}

div.LeftMenuPagesBlock:first-child H4 .moveMenuBlock{
	/*display:none;*/
}
div.LeftMenuPagesBlock.hideMenuBlock>div.siteMap {
	display:none;
}

div.LeftMenuPagesBlock H4 span ion-icon {
	color: white;
}


.showHumanHelpPopup .humanHelpPopup {position: fixed; right: 15px; bottom: 3px; background: rgba(255,255,255,0.5); border-radius: 20px ; }
.showHumanHelpPopup .humanHelpPopup img { max-width: 200px; }



input.bgInclPrice,
input.bgExclPrice,
input.validatePrice ,
input.priceSplit {
	text-align: right; 
	background-repeat: no-repeat;
}
input.validateNumber div[id^=__lpform_],
input.priceSplit div[id^=__lpform_] {
    display: none;
}

.bgInclPrice { background-image: url(https://www.cms-tool.net/images/bgInclPrice.png); }
.bgExclPrice { background-image: url(https://www.cms-tool.net/images/bgExclPrice.png); }

.cmsFormTable .splitPriceWrap input { width: 100%; max-width:200px; }
.cmsFormTable .splitPriceWrap.splitPriceSplit input{ width: 50%; }
.mytable .splitPriceWrap input { width: 100%; }
.mytable .splitPriceWrap { white-space: normal; }


.matchedAddresses a {padding: 5px; }



@media only screen and (max-width: 700px) {
	table.mobileBreakTable>tr>td:first-of-type ,
	table.mobileBreakTable>tr>td ,
	table.mobileBreakTable>tr ,
	table.mobileBreakTable>tbody>tr>td ,
	table.mobileBreakTable>tbody>tr ,
	table.mobileBreakTable
	{
		display:block;
		width: 100% !important;
		max-width: 100% !important;
	}
}

#LeftMenuPages #DesignBlock a.button { background:#f9f9f9 !important; color: black !important; }



	.collapsibleTree li { position:relative; }   
	.collapsibleTree li>div, 
	.collapsibleTree li>a { padding-left: 32px }   
	.collapsibleTree .ctDisclose { display: block; font-size: 16px; width: 24px; text-align: center; cursor: pointer; position:absolute; left:3px; top: 5px; } 
	.collapsibleTree .ctDisclose .ctMinimise {display: block; border: 1px solid silver; background: rgba(255,255,255,0.5);}
	.collapsibleTree .ctDisclose .ctExpand {display: none; border: 1px solid silver; background: rgba(255,255,255,0.5);}
	.collapsibleTree .ctBranchHidden .ctDisclose .ctExpand {display: block !important; }
	.collapsibleTree .ctBranchHidden .ctDisclose .ctMinimise {display: none !important; }
	.collapsibleTree .ctBranchHidden ol,
	.collapsibleTree .ctBranchHidden ul { display: none !important; }