@import url("//fonts.googleapis.com/css?family=Montserrat:1000,900,800,700,600,500,400,300,200,100"); 
@import url("//fonts.googleapis.com/css?family=Open+Sans:1000,900,800,700,600,500,400,300,200,100"); 
@import url("//fonts.googleapis.com/css?family=Lato:1000,900,800,700,600,500,400,300,200,100"); 
@import url("//fonts.googleapis.com/css?family=Work+Sans:1000,900,800,700,600,500,400,300,200,100"); 
@import url("//fonts.googleapis.com/css?family=Josefin+Sans:1000,900,800,700,600,500,400,300,200,100"); 
@import url("//fonts.googleapis.com/css?family=Poppins:1000,900,800,700,600,500,400,300,200,100"); 

 

html, body {
height: 100%;
width:100%;  
background-color:#fff;
background-color:#fff;
}

.tox .tox-dialog-wrap{ padding-top:80px; } 

* {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
color:#333333;
text-decoration: none;
text-align:left;
margin:0; 
padding:0;
border:0px;
list-style:none; 
letter-spacing:normal;
-webkit-text-size-adjust: 100%; 
-webkit-appearance: none;
border-radius:0px;
z-index:1;font-size: 12.6px;
font-family:"Poppins",  Arial, Helvetica, sans-serif;
font-weight:400 ;
}


input{outline: none; }

a, span, strong, em, table, tr, td  { color:inherit; font-size:inherit}
strong{ font-weight:bold;}

p{ margin:0; padding:0;}
a{ color:#006699}
hr{ display:block; clear:both;}
hr.line{background-image:url(../images/semiTransLine.png); background-repeat:repeat-x;}

*.cursor, .cursor {cursor:pointer; }
*.cursor:hover, .cursor:hover{cursor:pointer; text-decoration: underline }

#timedOut{ position: fixed ; left: 0; top: 0; width: 100vw; height: 100vh; background: #fff;  z-index: 500000001}
#timedOut p{
	position: absolute;
	left: 50%;
	top: 40%; background: #e1e1e1; 
	width: 300px;
	margin:  0px 0 0 -150px;
	text-align: center; font-family:"Open Sans"  ;
	font-size: 15px; border: 1px solid #e1e1e1; border-radius: 3px; padding: 30px 0 ;
} 
#timedOut p a{ display: block; text-align: center; margin: 4px auto;	font: inherit}


.fadeContent{  opacity: 0.3;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
-o-transition:all 0.3s ease-in-out;
transition:all 0.3s ease-in-out;
} 


::-webkit-input-placeholder {   color: #999; font-weight:normal ;}
:-moz-placeholder { color: #999;font-weight:normal ; /* Firefox 18- */    }
::-moz-placeholder {  color: #999;font-weight:normal ; /* Firefox 19+ */    }
:-ms-input-placeholder {   color: #999;font-weight:normal ;}

input[type=radio] { position:absolute; left:-10000px}

input[type=radio]  + label, 
input[type=checkbox]  + label{
font-weight:normal; 
font-size:14.5px;
padding:0 6px;
height:30px;line-height:30px; margin:0;
cursor:pointer; color:#006699 
}
input[type=radio]  + label:hover, input[type=checkbox]  + label:hover{ text-decoration:underline;}
input[type=radio] + label span, input[type=checkbox] + label span{
height:20px;
width:20px;
display:block;  
float:left;
border:1px solid #999;border-radius:44px;
background-position:50%;
background-repeat:no-repeat;
margin:8px 6px 0 0;
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label { color: #333}
input[type=radio]:checked + label span, input[type=checkbox]:checked + label span{ border-color:#666;  background-image:url(../admin/images/icons/tickGreen.png)}



#wrapper h5.settingSections, #wrapper div.settingSections{
margin:20px auto 10px auto;
font-size:14px;
font-weight:500;
padding:0 0 4px 4px;
color: #699;
text-align:left;
background-color:#fff;
border-bottom:4px solid #699;
text-shadow:1px 1px #fff;
height:40px;
line-height:36px;
border-radius:0px;
text-transform:uppercase;
} 
#wrapper div.settingSections .settingInfo, #wrapper h5.settingSections .settingInfo{ font-size: 12.2px; color:#6C6C6C; text-transform: none; padding-left: 10px;}/* extra label inside*/

em.sectionHelper{ font-size:12px; font-style:italic; color:#555; text-transform:none; padding-left:20px;}
em.sectionHelper a, em.sectionHelper a:hover{ text-decoration:underline; color:#069; background:none}

.settingSections p , .settingSections a  {
	border: 1px solid #ccc;
	padding: 0px 0px;
	text-align: center;
	border-radius: 2px;
	text-shadow: none;
	color: #006699;
	cursor: pointer;
	font-weight: bold;
	padding: 0 20px;
	margin-left: 40px;
	height: 34px;
	line-height: 33px;
	float: right;
}
.settingSections p, .settingSections   a{  font-size: 10.8px }
.settingSections p:hover , .settingSections a:hover  {  background-color: #069; border-color: #069;color:#FFF }

 
#csvDownload , * #csvDownload{
background-position: 95% 50%;
background-repeat: no-repeat;
background-size: 14px auto;
background-color: #fff;
border:1px solid #B0B0B0;
color: #069;
padding-right: 40px;
background-image: var(--xl);
line-height:34px;
text-shadow:none;
transition:all 300ms;
}
#csvDownload:hover { background-color:#777; border-color:#777; color: #fff; }

.listDDwrap{position:relative; z-index: 100; }
.listDD{width: 100%;background-color: #fff;
position: absolute; left: 0; top: 0;
border:1px solid #ccc;height:36px;
border-radius:2px;overflow:hidden; background: #fff;
padding:7px 0  0px 10px; z-index: 1111111; 
} 

 
.listDD.listDDopen { height: auto}

.listDD li {cursor:pointer; width:100%;padding: 0 8px 0 5px; margin:0px auto ; min-height:20px; line-height:normal; }
.listDD li:last-child{ margin-bottom: 20px}
.listDD li *{  font-weight:bold; color: #006699}
.listDD li:hover *{text-decoration:underline;}

.listDD li{ display: none;  }
.listDD li.listDDactive *{ font-weight:bold; color: #690;   }

.listDD.listDDopen li{ display: block;  }
.listDD li.listDDactive { display: block; }

.listDDactive ::after{
	content: "";
	position: absolute;
	right: 0px;
	width: 30px;
	height: 30px;
	top: 0px; 
	background-image: url(../images/icons/arrowDgray.png);
	background-position: 50% 60%;
	background-repeat: no-repeat;
	opacity: 0.5;
	transition: 300ms;
}
.listDDopen ::after{transform: rotate(-180deg); 	transition: 300ms; } 

#selectDDpages { max-height: 92vh;max-height: calc(100vh - 66px); overflow: auto}
#selectDDpages  p.mainPage{   margin: 0; padding:0;    font-size:14px;  }
#selectDDpages  p.subPage{ margin: 0px 0;
	padding-left: 4px;   font-size:12.9px; color: #555;
/*	background-image: url(../images/icons/arrowR.png);
	background-repeat: no-repeat;
	background-position: 2px 50%;
	background-size: auto  8px; */
}


.selectDD{
background-color: #fff;
position:relative;
border:1px solid #ccc;
height:36px;
border-radius:2px;
padding-top:3px;
background-image:url(../images/icons/arrowDgray.png);
background-position: 98% 14px;
background-repeat: no-repeat;
} 
.selectDD.selectorOpen {
height:auto;
background-image:url(../images/icons/arrowU.png);
padding-bottom:20px;
}  
.selectDD  input[type=radio] + label  { display:none ;width:100%; clear:both; opacity:0; height:30px; line-height:30px; font-size:12px;}
.selectDD   input[type=radio]:checked + label  { display:block ;opacity:1} 
.selectDD.selectorOpen  input[type=radio] + label  {display: block; opacity:1 }
.selectDD input[type="radio"]:checked + label {   text-decoration: none}
.selectDD label:last-child {}




 
.ICAL , .OUTLOOK{
 display: block;
 float: left;
 margin: 0px 6px;
 border: 0px solid #e1e1e1;
 background: 0 0% no-repeat;
 background-size:contain;
 width: 30px;
 height: 30px; line-height: normal;
 font-style: normal;
 }
 
 
.OUTLOOK {line-height: 12.2px;	background-image: url(../../images/calOUTLOOK.png);	 } 

.ICAL {
 background-image: url(../../images/calICAL.png);
 font-size:9px;
 text-transform: uppercase;
 color: #fff;
 text-align: center; 
 font-style: normal;
 padding: 4px 0 0 0;
 font-weight: bold;
 font-family: Helvetica, Arial
} 
.ICAL em {  font-weight: bold;font-size: 10px;
 text-align: center; 
 font-style: normal;
 display: block;
 clear: both;
 line-height:14px;
} 

.ICAL:hover , .OUTLOOK:hover { opacity: 0.8}
.ICAL.pastDate { opacity:0.3; 	filter:   grayscale( 100% )   ;-webkit-filter:   grayscale(100% )   }

.ICAL:hover , .OUTLOOK:hover { opacity: 0.8}
.ICAL.pastDate { opacity:0.3; 	filter:   grayscale( 100% )   ;-webkit-filter:   grayscale(100% )   }

#footer{ 
width:100%; margin:0;background-color: #e9e9e9; border-top:1px solid #ccc; 
}

#footer p{
text-align:center;
width:100%;
padding:20px 0;
}
#footer p a{
font-size: 11px;
font-weight:bold; color:#777; text-shadow:1px 1px #fff;
}

.pagetitle{
font-size:1.2em;
color:#FF9900;
font-weight:bold;
margin:0px auto 0px auto;
padding:4px;
border-bottom:0px solid;
border-color:#ccc
}


#ajaxContainer{
position: fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-image:url(../images/bgTrans.png);
z-index:1000; display:none
}

#loadingContent{
position: fixed;
top:0px;
left:0px;
bottom:0px;
right:0px;
background-image:url(../images/bgTrans.png);
z-index:1000; display:none
} 

#loadingContent span{
position:fixed;
width:100%;
background-repeat:no-repeat;
height:40px;
top:40%;
left:0px;
background-image:url(../images/loading-spinner.gif);
background-position:50% 50%;background-size:40px;  
} 

#loadingAjax{
position:absolute;
top:0px;
left:0px;
bottom:0px;
right:0px; width:100%; height:150px; 
z-index:1000; 
} 

#loadingAjax span{
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	top: 0;
	left: 0px;
	background-image: url(../images/loading-spinner.gif);
	background-position: 50% 50%;
	background-size: 30px;
} 

#dialogueBox{
position:fixed; display: none; background-image: url("../images/bgTrans.png"); background-repeat: repeat;
height: 100%; width: 100%;   z-index: 100001
} 
#dialogueBoxInner{ left:50%; margin-left:-175px; width:350px; min-height: 70px;
position: absolute;
top:150px;
text-align:center;
z-index:1000;
font-weight:bold;
background-color:#FFFFFF;
border:2px solid #999;
padding:20px 20px 20px 20px;
border-radius:2px;
-webkit-box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.10);
-moz-box-shadow:    0px 0px 12px 0px rgba(0, 0, 0, 0.10);
box-shadow:         0px 0px 12px 0px rgba(0, 0, 0, 0.10);
}

#dialogueBox #dialogueBoxCloser{ position:absolute; right:6px; top:6px; height:18px; width:18px; background-color:#FFFFFF; background-image:url(../images/icons/closer.png); background-repeat:no-repeat; background-position:50% 50%; background-size:12px; cursor:pointer; } 

#dialogueBox #dialogueMessage , #dialogueBox #dialogueMessage p, #dialogueBox #dialogueMessage p strong {
font-size:14px; word-wrap:break-word
} 
#dialogueBox #dialogueMessage p{ margin:4px auto}

#dialogeReturns{ border:0; background:none; clear:both; border-top:0px solid #f1f1f1; margin:6px auto 0px auto; height:30px; padding-top:6px}
#dialogueYes, #dialogueNo{
display:inline-block;
margin:10px  0 0 0px;
cursor:pointer; height:32px; line-height:32px;
padding: 0px 20px;   border-radius:3px;
color:#FFFFFF;font-size:12px;}

#dialogueYes{   float:left; background-color:#99CC00; }
#dialogueNo{  float:right ; background-color:#FF0000; } 
#dialogueYes:hover, #dialogueNo:hover{ background-color:#666666 }

/*for orders and details */
.statusCANCELLED{ color: #ff0000}
.statusDROPPED{ color: #999}
.statusNEW{color: #FF6600}
.statusPROCESSED{	color: #99CC00} 

#homeMessage {
font-size:16px;
font-weight:bold;
color:#83AF00;
padding:40px 0 0 0;
margin:0 auto;
text-align:center;
width:400px
}

input[type=radio]  + label:hover,
input[type=checkbox]  + label:hover{ text-decoration:underline; cursor: pointer}

input[type=radio] + label span, 
input[type=checkbox] + label span{
height:24px;
width:24px;margin:8px 0 0 0;
display:block;  
float:left; background-color: #fff;
border:1px solid #999;
border-radius:2px;
background-position:50%;
background-repeat:no-repeat;
background-size:12px;
}
input[type=radio] + label span{ border-radius:100%;}

input[type=radio]:checked + label span,
input[type=checkbox]:checked + label span{ 
background-color: #719600;border-color: #719600; 
    background-image: url("../images/icons/tickWhite.png");
}
input[type=radio] + label strong ,
input[type=checkbox] + label strong  {
font-size: 10.4px;
float: left;
margin:0 8px;
width: auto;
display: block;
color: #999;
text-transform: uppercase;
font-weight:500;
} 

input[type=radio]:checked + label strong,
input[type=checkbox]:checked + label strong{ color:#777 }
 
.shop_emailField{ padding: 5px;  border:1px solid #999; float: left; width: 500px; height: 90px ;margin-right: 15px;}/*shop prefs */


/* psuedo div tables, use width classes for rows*/
.divTableRowHeader{
display:block; clear:both; 
margin:10px auto 10px auto; 
padding:0;
width:100%;  
background-color:#fff;  
border-bottom: 3px solid #999; 
height:32px; line-height:32px ;  
}

.divTableRowHeader  p{
display: block;
margin:0;
padding:0;
float:left;
height:32px;
line-height:32px;
text-shadow:1px 1px #fff;
font-size:1.1em;
color:#000;
}

.divTableRowHeader  p:first-child{ padding: 0 6px;}

.divTableRow {  display:block; clear:both; min-height:40px; line-height:40px; padding:0 ; width:100%;  margin:6px auto 0 auto}



.divTableRow p{
display: block;
float:left;
margin:0; padding:0;
height:40px;
line-height:40px;
font-size: 1em; 
}/* col */

.divTableRow p.noHeight{ height:auto}

input.variants, input[type="text"].variants {width: 24.6%; margin: 4px 0.5% 4px 0; display: block; float: left}
input.variants:nth-child(4n){ margin-right: 0px;}

input.sizes, input[type="text"].sizes {width:9.08%; text-align: center;  display: block; float: left ;font-size: 14px; text-indent: 0; padding: 0; margin: 4px 1% 4px 0}
input[type="text"].sizes:nth-child(10n), input.sizes:nth-child(10n){ margin-right: 0px;} 


a.ellipsis,
p.ellipsis,
.divTableRow p.ellipsis ,
.divTableRow p a.ellipsis {
display:block; padding-right:25px;  
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden; max-height:40px;  
}

.divTableRow em, .divTableRow strong, .divTableRow span{ line-height:40px;}


.divTableRow label{
color:#333333;
font-size:1em;
font-weight:bold;
}/* for forms with fields etc*/

.divTableRow p.endColumn{ float:right }
/* eo  div tables */

.divTableRow hr{  clear:both;  height:0px;}/*empty     div row clear */

hr.rowSep {  height:1px; border-top:1px dotted	 #e8e8e8; width:100%; clear:both; margin:2px auto}  
hr.sep {  height:8px; border-bottom:2px solid	 #ccc; width:100%; clear:both; margin:8px auto} 


.addItemBtn{
display: inline-block;
color: #003366;
font-style:normal;
font-size:1em;
cursor:pointer;
text-align:center;
font-weight:bold;
padding:0px;
width:auto;
padding-right:25px;
height:40px;
background-image:url(../images/add.png);
background-position:right 50%;
background-repeat:no-repeat;

color: #99CC00;
}
.addItemBtn:hover{ color:333 }

.editModeBtn{
display: inline-block;
color:#006699;
font-style:normal;
font-size:1em;
cursor:pointer;
text-align:center;
font-weight:bold;
margin:0 6px 0 0;
width:72px;  
height:40px;
background-image:url(../images/icons/grid.png);
background-size:14px;
background-position:right 50%; 
background-repeat:no-repeat;
color: #006699; 
}

.editModeBtnDONE{
color:#99CC00;   background-image:url(../images/icons/gridGray.png);
}

.statusDD{ width:90px; height:30px; font-size:0.9em} 

 
input[type="text"].colourPickerText, .colourPickerText{ width:80px; margin-left:10px;height:36px;float:left; text-transform:uppercase; font-size:13.2px; }

input[type=color] + label { padding-left:10px; font-size:14px; color: #555}
.colourPicker, input[type=color]{   position:absolute; left:-1000px;;}
 


.sliders{
    display: block;
    height: 8px;
    float: left;
    width: 100%;
    background: #777;
    background-image: -webkit-linear-gradient(0deg,rgba(255,102,0,1.00) 0%,rgba(183,73,0,1.00) 100%);
    background-image: -moz-linear-gradient(0deg,rgba(255,102,0,1.00) 0%,rgba(183,73,0,1.00) 100%);
    background-image: linear-gradient(90deg,rgba(255,102,0,1.00) 0%,rgba(183,73,0,1.00) 100%);
    margin-top: 14px;
    border: none;
    border-radius: 0px;
    position: relative;
}
.sliders .ui-state-default, .sliders  .ui-widget-content .ui-state-default, .sliders   .ui-widget-header .ui-state-default{
width: 14px;
height: 20px;
background: #399;
border: none;
top: -7px;
border-radius: 4px;
cursor: pointer;
}
.sliderVal, em.sliderVal, * .sliderVal    {
position: absolute;
top: 23px;
width: 50px;
height: 20px;
line-height: 20px;
text-align: center;
padding: 0px;
text-indent: 0px;
margin-left: -25px;
border: 0px dashed red;
font-style: normal;
font-size: 12.8px;
font-weight: normal;
color: #399;
}


.drag , 
.deleteIcon, 
.infoOpeners ,
.infoSpans {
cursor:pointer;
width:30px;   display:block; float: left;  /*display:inline-block; */
height:30px;
margin:4px 2px 0 0px;
text-indent:-9999px;
font-size: 0em;
background-repeat:no-repeat ;
background-position:50% 50% ;
font-size: 0em; cursor:pointer; 
transition: background 200ms ease-in-out 0s; 
border-radius: 4px;
}

.infoOpeners {
background-color:#e1e1e1;
background-image:url(../images/icons/arrowDwhite.png) ;
background-repeat:no-repeat ;
background-position:50% 50%; 
}

.infoOpeners:hover { background-color:#CCCCCC}


.resultsWrapOpen .infoOpeners{ 
background-color:#999; 
background-image:url(../images/icons/arrowUwhite.png) ;
background-repeat:no-repeat ;
background-position:50% 50%; 
} 

.deleteIcon{ 
background-color:#FF0000;
background-image:url(../images/icons/deleteWhite.png);
} 
.deleteIcon:hover{ background-color:#333} 

.drag{
background-color:#fff;
border:0px solid #e1e1e1;
background-image:url(../images/icons/barsGray.png);
background-repeat:no-repeat;
background-position:50% 50%;
}

.dragSpacer, span.dragSpacer, * span.dragSpacer{  width:38px; display:block; float: left; height:5px;margin:0;}

.drag:hover{ background-color:#f1f1f1;}

.infoSpans{ 
background-color:#ccc;
border-radius:14px;
background-image:url(../images/icons/infoIcon.png); width:24px;  height:24px;
}
.infoSpans:hover{ background-color:#666666}

/* edit icon to text edit */
a.textEditLink{
	float: left;
	display: block;
	width: 16px;
	height: 18px;
	/* top /  left:  set in pages / cats edit etc */ 
	position: absolute; 
	background-image: var(--editText); background-size: contain;
	background-repeat: no-repeat;
	background-position: 0% 80%; opacity: 0.5; transition: opacity 200ms 0s;
}
a.textEditLinkMains{		border: 0px solid  aqua ;height: 30px;}
a.textEditLinkSubs{		border: 0px solid  aqua ;height: 30px;}
a.textEditLink:hover { opacity: 1}


#iframeUploadWrap{}
#iframeUploadWrap li { display: block; height:140px; width:158px; border:2px solid #e1e1e1; float:left; margin:0px 6px 4px 6px; text-align:center; overflow:hidden; padding:0} 

#iframeUploadWrap li  iframe{  
height:100%; width:100%; border:0;
overflow:hidden;
margin: 0; padding:0;
}


#iframeUploadWrapPics{height:510px; overflow:hidden; overflow-y: auto; padding-bottom:50px;}
#iframeUploadWrapPics li { display: block; height:200px; width:31%;  float:left; margin:0 1% 12px 1% ; text-align:center; overflow:hidden; padding:0} 

#iframeUploadWrapPics li  iframe{  
height:100%; width:100%; border:0;
overflow:hidden;
margin: 0; padding:0;
}



.white , p.white,   a.white:link,a.white:visited,a.white:hover { color:#FFFFFF ;}
.red ,  a.red:link, a.red:visited { color: #FF0000 ;} 
.dkRed ,  a.dkRed:link, a.dkRed:visited { color: #BD0000; } 
.orange, a.orange{color:#ff6600;}
.green, a.green:link,a.green:visited{
    color: #7BA500;
}
.blue, a.blue:link,a.blue:visited { color: #006699; }
.gray, a.gray:link,a.gray:visited{ color: #7D7D7D }
.silver ,  a.silver:link,a.silver:visited,a.silver:hover { color: #D7D7D7; }
.pink ,  a.pink:link,a.pink:visited,a.pink:hover{color:#FF0099;}
.black ,  a.black:link,a.black:visited,a.black:hover{color:#000;}
.purple ,  a.purple:link,a.purple:visited,a.purple:hover{
    color: #7E58AE;
}
.clr{ display:block; clear:both}


.italic{font-style:italic;}
.bold ,  a.bold:link, a.bold:visited {font-weight:bold;}


.block{ clear:both; display:block}
.hidden{ display:none}
.clr, .clearFloat{ display:block; clear:both}
.floatLeft{ float: left}
.floatRight{ float:right}
.centered{ margin:0 auto}
.TAR{ text-align:right}
.TAL{ text-align:left}
.TAC{ text-align:center}

.p3{ padding:3px;}
.p5{ padding:5px;}
.p10{ padding:10px;}
.p20{ padding:20px;}

.pL3{ padding-left:3px;}
.pL5{ padding-left:5px;}
.pL10{ padding-left:10px;}
.noBorder{ border:0 ; border:none}

.videoPlay, a.videoPlay{ height:100%; width:30px; background-image:url(../images/video.png); background-repeat:no-repeat; background-position:50% 50%; display:inline-block;background-size:30px 30px; text-indent:-2000px}

.smaller{
font-size: 0.9em;
}
.bigger{
font-size: 1.2em;
} 
.underline{ text-decoration:underline}

.w25{ width:25px }
.w35{ width:35px }
.w40{ width:40px }
.w50{ width:50px }
.w75{ width:75px }
.w100{ width:100px }
.w33percent{ width:33% }
.w45percent{ width:45% }
.w49percent{ width:49% }
.w50percent{ width:50% }
.w90percent{ width:90% }
.w95percent{ width:95% }
.w99percent{ width:99% }
.w100percent{ width:100% }
.w124{ width:124px }
.w125{ width:125px }
.w149{ width:149px }
.w150{ width:150px }
.w175{ width:175px }
.w200{ width:200px }
.w225{ width:225px }
.w250{ width:250px ; }
.w275{ width:275px }
.w300{ width:300px }
.w325{ width:325px }
.w350{ width:350px }
.w375{ width:375px }
.w400{ width:400px }
.w425{ width:425px }
.w450{ width:450px }
.w500{ width:500px }
.w550{ width:550px }
.w600{ width:600px }
.w650{ width:650px }
.w700{ width:700px }
.w750{ width:750px }
.w800{ width:800px }
.w825{ width:825px }
.w850{ width:850px }
.w900{ width:900px }
.w950{ width:950px }
.h20{ height:20px;}
.h30{ height:30px;}
.h40{ height:40px;}
.h50{ height:50px;}
.hAuto{ height: auto;} 

select { 
padding: 0 0px 0 4px;
text-indent:0px;
height:38px; 
border:2px solid #ccc;
background-color:#fff;
background-image: url(../images/icons/selectDD.png); 
 background-image:url(../images/icons/arrowDgray.png); 
background-position: 98% 14px; 
background-repeat: no-repeat;
padding-right:   24px; font-size:13.5px ;border: 2px solid red;
}

select option{ padding:0; display:block; margin-bottom:4px; text-indent:0} 


select .optGroupLabel, 
optgroup{ font-style:normal; font-weight:bold; color:#006699; padding: 2px 8px;}

input[type=text] , input[type=email] , input[type=password] ,input[type=telephone] , select   { border:1px solid #ccc; height:36px; padding:0 0 0 3px; text-indent:3px; border-radius:2px;  filter: none;}
input[type=text] , input[type=email] , input[type=password] ,input[type=telephone] {   background: #fff;} 
input[type=text].inputErr, input[type=password].inputErr,  input[type=email].inputErr, select.inputErr { border-color:#FF0000;} 
input[type=submit].hiddenSubmit{ position: absolute; left:-9999px; top:-9999px;}

input[type=text]:disabled{ border-color:#e5e5e5; background-color:#fff; color:#CCCCCC;  } 

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus
input:-webkit-autofill, 
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  border:none !important;
  -webkit-text-fill-color: inherit !important;
  transition: background-color 50000s ease-in-out 0s;
}



input[type=button]:disabled ,
input[type=submit]:disabled { opacity:0.4}




input[type=button].clearDate, 
.clearDate{
margin:2px 0 0 -30px;
height:28px;
width:28px;
display:inline-block; float:left;
cursor:pointer;
background-color:#f1f1f1;
padding:0; 
background-image:url(../images/icons/deleteWhite.png);
background-position:50% 50%;
background-repeat:no-repeat;
}

input[type=button].clearDate:hover, 
.clearDate:hover{ background-color:#ccc}


input[type="text"].field_pounds ,
.field_pounds{
background-image:url(../images/inputsType/pounds.png);
background-position:3px 50%;
background-repeat:no-repeat; text-indent: 0px;
padding-left: 15px; 
}

input[type="text"].field_grammes ,
.field_grammes{
background-image:url(../images/inputsType/grammes.png);
background-position:right 50%;
background-repeat:no-repeat;
padding-right: 24px; text-align:right; font-size:11px;
}


input[type="text"].field_kg ,
.field_grammes{
background-image:url(../images/inputsType/kg.png);
background-position:right 50%;
background-repeat:no-repeat;
padding-right: 24px; text-align:right; font-size:11px;
}



input[type="text"].field_percent ,
.field_percent{
background-image:url(../images/inputsType/percent.png);
background-position:right 50%;
background-repeat:no-repeat;
padding-right: 18px; text-align:right; font-size:11px;
} 

.numberField{
display:inline-block; 
padding: 0 4px;
background-color:#555;
color:#FFFFFF;
font-size:11px;
height:16px;
line-height:16px;
min-width:18px;
text-align:center;
border-radius:2px;
}

input.autoComplete{ background-image:url(../images/icons/autoComplete.png); background-position: 98% 50%; background-repeat:no-repeat; padding-right:15px; }

.cmsDatepicker,  .shopDatepicker,
input.cmsDatepicker,  input.shopDatepicker{ 
	background-image: url("../images/calColour.png");
	background-repeat: no-repeat;
	background-position: 8px  48%;
	background-size: 18px auto;
	cursor: pointer; 
	font-weight: bold; 
	display: inline-block;
	text-align: left; padding-left:30px;	  
font-size:12.9px; color: #777;  
}

.inputErr{ border-color:#FF0000} 

/* ####### buttons  */

.buttons25,
.buttons50,
.buttons75, 
.buttons100, 
.buttons125, 
.buttons150,  
.buttons175, 
.buttons200,
.buttons250,
.buttonsFULL  {
background: transparent;
font-family:"Montserrat", Arial, Helvetica, sans-serif;  
text-align:left;
cursor:pointer;
border: 0px;
height:36px; line-height:36px;  
color:#FFFFFF;  
padding: 0 15px; text-align:center; position:relative;
font-size:10.2px; font-weight:700;
border-radius:3px;
transition: background 200ms;
transition-timing-function: ease-in-out;
}

.buttons25{ 	width:25px; } 
.buttons50{ 	width:50px;} 
.buttons75{ 	width: 75px;} 
.buttons100{ 	width: 100px; } 
.buttons125{ width: 125px;} 
.buttons150{ width: 150px; } 
.buttons175{ width: 175px;  } 
.buttons200{ width: 200px;   } 
.buttons250{ width: 250px;  } 
.buttonsFULL{ width: 100%;  } 



.buttonsRed{background-color: #D81313;background-image:none;}
.buttonsGray {background-color: #7D7D7D; }
.buttonsLtGray { background-color:#AEAEAE; }
.buttonsOrange { 	background-color: #F60;  }
.buttonsGreen { 	background-color: #83A523 }
.buttonsBlue  {background-color: #385F87; }
.buttonsBlack  {background-color: #424242; }

.buttons25:active ,
.buttons50:active ,
.buttons75:active , 
.buttons125:active , 
.buttons150:active ,  
.buttons175:active , 
.buttons200:active ,
.buttons250:active ,
.buttonsFULL:active {	
background-color: #424242;  
} 


input[type=button]:hover , 
input[type=submit]:hover {
background-color: #333; 
}


.buttonIconRarrow{ background-image:url(../images/icons/arrowRwhiteThin.png); background-repeat:no-repeat; background-position:calc(100% - 8px) 50%; }
/* eo buttons*/


.buttonLinks, *.buttonLinks{ background: none; border: none; cursor: pointer}
.buttonLinks:hover, input[type=button].buttonLinks:hover , input[type=submit].buttonLinks:hover { background: none; border: none;}



#pageTop {
position:fixed;
bottom:10px;
right:20px;
width:40px;
height:40px;
background-image:url(../images/bgTransBlack.png); opacity:0.6; display:none;
} 

#pageTop a {
-webkit-transition: all 500ms ease-in-out 0s;
-moz-transition: all 500ms ease-in-out 0s;
-o-transition: all 500ms ease-in-out 0s;
transition: all 500ms ease-in-out 0s;
background-position: 50%;
width:40px;
height:40px;
line-height:40px;
display:block;
z-index:1000;
background-image:url(../images/icons/arrowUwhite.png);
background-repeat:no-repeat;
}

#pageTop:hover { opacity:1}
#pageTop a span{ display:none}



/* JQ css over rides */ 



/*auto complete style over ride*/
.ui-menu{
list-style:none;
background:#fff;
padding:8px 5px 8px 5px;
border:1px solid #ccc;  border-radius: 3px;
max-height:500px;
overflow-y:hidden;
overflow-x:auto;
-webkit-box-shadow: 0px 9px 7px 2px rgba(255, 255, 255, 100);
-moz-box-shadow:    0px 9px 7px 2px rgba(255, 255, 255, 100);
box-shadow:         0px 9px 7px 2px rgba(255, 255, 255, 100);
}
.ui-menu-item,
.ui-menu-item:hover , 
.ui-menu .ui-menu-item , 
.ui-menu .ui-menu-item:hover,
.ui-menu .ui-menu-item:focus ,
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active{
background-image:none;
background:#fff;
border:0;
font-size:14px;
background-color:#FFFFFF;
padding:4px 4px 4px 5px;
margin:0px  ;
color:#777;
list-style: none;
font-weight:500;
}  /* list of results */

.ui-menu .ui-menu-item:hover , 
.ui-menu-item:hover, 
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active{border:0;margin:0px  ;padding:4px 4px 4px 5px;font-size:14px; background-color:#f4f4f4;  font-weight:600; color:#000000; } /* higlighted result */


/* JQ css over rides */