/*! jQuery UI - v1.12.1 - 2016-09-14 - etail path updated
* http://jqueryui.com
* Includes: core.css, accordion.css, autocomplete.css, menu.css, button.css, controlgroup.css, checkboxradio.css, datepicker.css, dialog.css, draggable.css, resizable.css, progressbar.css, selectable.css, selectmenu.css, slider.css, sortable.css, spinner.css, tabs.css, tooltip.css, theme.css
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	opacity: 0;
	filter:Alpha(Opacity=0); /* support: IE8 */
}

.ui-front {
	z-index: 100;
}


/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
	cursor: default !important;
}


/* Icons
----------------------------------*/
.ui-icon {
	display: inline-block;
	vertical-align: middle;
	margin-top: -.25em;
	position: relative;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
}

.ui-widget-icon-block {
	left: 50%;
	margin-left: -8px;
	display: block;
}

/* Misc visuals
----------------------------------*/

/* Overlays */
.ui-widget-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.ui-accordion .ui-accordion-header {
	display: block;
	cursor: pointer;
	position: relative;
	margin: 2px 0 0 0;
	padding: .5em .5em .5em .7em;
	font-size: 100%;
}
.ui-accordion .ui-accordion-content {
	padding: 1em 2.2em;
	border-top: 0;
	overflow: auto;
}
.ui-autocomplete {
	position: absolute;
	top: 0;
	left: 0;
	cursor: default;
}
.ui-menu {
	list-style: none;
	padding: 0;
	margin: 0;
	display: block;
	outline: 0;
}
.ui-menu .ui-menu {
	position: absolute;
}
.ui-menu .ui-menu-item {
	margin: 0;
	cursor: pointer;
	/* support: IE10, see #8844 */
	list-style-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
}
.ui-menu .ui-menu-item-wrapper {
	position: relative;
	padding: 3px 1em 3px .4em;
}
.ui-menu .ui-menu-divider {
	margin: 5px 0;
	height: 0;
	font-size: 0;
	line-height: 0;
	border-width: 1px 0 0 0;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
	margin: -1px;
}

/* icon support */
.ui-menu-icons {
	position: relative;
}
.ui-menu-icons .ui-menu-item-wrapper {
	padding-left: 2em;
}

/* left-aligned */
.ui-menu .ui-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	left: .2em;
	margin: auto 0;
}

/* right-aligned */
.ui-menu .ui-menu-icon {
	left: auto;
	right: 0;
}
.ui-button {
	padding: .4em 1em;
	display: inline-block;
	position: relative;
	line-height: normal;
	margin-right: .1em;
	cursor: pointer;
	vertical-align: middle;
	text-align: center;

	/* Support: IE <= 11 */
	overflow: visible;
}

.ui-button,
.ui-button:link,
.ui-button:visited,
.ui-button:hover,
.ui-button:active {
	text-decoration: none;
}

/* to make room for the icon, a width needs to be set here */
.ui-button-icon-only {
	width: 2em;
	box-sizing: border-box;
	text-indent: -9999px;
	white-space: nowrap;
}

/* no icon support for input elements */
input.ui-button.ui-button-icon-only {
	text-indent: 0;
}

/* button icon element(s) */
.ui-button-icon-only .ui-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -8px;
	margin-left: -8px;
}

.ui-button.ui-icon-notext .ui-icon {
	padding: 0;
	width: 2.1em;
	height: 2.1em;
	text-indent: -9999px;
	white-space: nowrap;

}

input.ui-button.ui-icon-notext .ui-icon {
	width: auto;
	height: auto;
	text-indent: 0;
	white-space: normal;
	padding: .4em 1em;
}

/* workarounds */
/* Support: Firefox 5 - 40 */
input.ui-button::-moz-focus-inner,
button.ui-button::-moz-focus-inner {
	border: 0;
	padding: 0;
}
.ui-controlgroup {
	vertical-align: middle;
	display: inline-block;
}
.ui-controlgroup > .ui-controlgroup-item {
	float: left;
	margin-left: 0;
	margin-right: 0;
}
.ui-controlgroup > .ui-controlgroup-item:focus,
.ui-controlgroup > .ui-controlgroup-item.ui-visual-focus {
	z-index: 9999;
}
.ui-controlgroup-vertical > .ui-controlgroup-item {
	display: block;
	float: none;
	width: 100%;
	margin-top: 0;
	margin-bottom: 0;
	text-align: left;
}
.ui-controlgroup-vertical .ui-controlgroup-item {
	box-sizing: border-box;
}
.ui-controlgroup .ui-controlgroup-label {
	padding: .4em 1em;
}
.ui-controlgroup .ui-controlgroup-label span {
	font-size: 80%;
}
.ui-controlgroup-horizontal .ui-controlgroup-label + .ui-controlgroup-item {
	border-left: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label + .ui-controlgroup-item {
	border-top: none;
}
.ui-controlgroup-horizontal .ui-controlgroup-label.ui-widget-content {
	border-right: none;
}
.ui-controlgroup-vertical .ui-controlgroup-label.ui-widget-content {
	border-bottom: none;
}

/* Spinner specific style fixes */
.ui-controlgroup-vertical .ui-spinner-input {

	/* Support: IE8 only, Android < 4.4 only */
	width: 75%;
	width: calc( 100% - 2.4em );
}
.ui-controlgroup-vertical .ui-spinner .ui-spinner-up {
	border-top-style: solid;
}

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: inset 1px 1px 1px #ccc;
	border-radius: .12em;
	border: none;
}
.ui-checkboxradio-radio-label .ui-icon-background {
	width: 16px;
	height: 16px;
	border-radius: 1em;
	overflow: visible;
	border: none;
}
.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	background-image: none;
	width: 8px;
	height: 8px;
	border-width: 4px;
	border-style: solid;
}
.ui-checkboxradio-disabled {
}
.ui-datepicker {
	width: 17em;
	padding: .2em .2em 0;
	display: none;
}
.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: .2em 0;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	position: absolute;
	top: 2px;
	width: 1.8em;
	height: 1.8em;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
	top: 1px;
}
.ui-datepicker .ui-datepicker-prev {
	left: 2px;
}
.ui-datepicker .ui-datepicker-next {
	right: 2px;
}
.ui-datepicker .ui-datepicker-prev-hover {
	left: 1px;
}
.ui-datepicker .ui-datepicker-next-hover {
	right: 1px;
}
.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	display: block;
	position: absolute;
	left: 50%;
	margin-left: -8px;
	top: 50%;
	margin-top: -8px;
}
.ui-datepicker .ui-datepicker-title {
	margin: 0 2.3em;
	line-height: 1.8em;
	text-align: center;
}
.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}
.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 45%;
}
.ui-datepicker table {
	width: 100%;
	font-size: .9em;
	border-collapse: collapse;
	margin: 0 0 .4em;
}
.ui-datepicker th {
	padding: .7em .3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}
.ui-datepicker td {
	border: 0;
	padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: .2em;
	text-align: right;
	text-decoration: none;
}
.ui-datepicker .ui-datepicker-buttonpane {
	background-image: none;
	margin: .7em 0 0 0;
	padding: 0 .2em;
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
}
.ui-datepicker .ui-datepicker-buttonpane button {
	float: right;
	margin: .5em .2em .4em;
	cursor: pointer;
	padding: .2em .6em .3em .6em;
	width: auto;
	overflow: visible;
}
.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
	float: left;
}

/* with multiple calendars */
.ui-datepicker.ui-datepicker-multi {
	width: auto;
}
.ui-datepicker-multi .ui-datepicker-group {
	float: left;
}
.ui-datepicker-multi .ui-datepicker-group table {
	width: 95%;
	margin: 0 auto .4em;
}
.ui-datepicker-multi-2 .ui-datepicker-group {
	width: 50%;
}
.ui-datepicker-multi-3 .ui-datepicker-group {
	width: 33.3%;
}
.ui-datepicker-multi-4 .ui-datepicker-group {
	width: 25%;
}
.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
	border-left-width: 0;
}
.ui-datepicker-multi .ui-datepicker-buttonpane {
	clear: left;
}
.ui-datepicker-row-break {
	clear: both;
	width: 100%;
	font-size: 0;
}

/* RTL support */
.ui-datepicker-rtl {
	direction: rtl;
}
.ui-datepicker-rtl .ui-datepicker-prev {
	right: 2px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next {
	left: 2px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-prev:hover {
	right: 1px;
	left: auto;
}
.ui-datepicker-rtl .ui-datepicker-next:hover {
	left: 1px;
	right: auto;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane {
	clear: right;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button {
	float: left;
}
.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
.ui-datepicker-rtl .ui-datepicker-group {
	float: right;
}
.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
	border-right-width: 0;
	border-left-width: 1px;
}

/* Icons */
.ui-datepicker .ui-icon {
	display: block;
	text-indent: -99999px;
	overflow: hidden;
	background-repeat: no-repeat;
	left: .5em;
	top: .3em;
}
.ui-dialog {
	position: absolute;
	top: 0;
	left: 0;
	padding: .2em;
	outline: 0;
}
.ui-dialog .ui-dialog-titlebar {
	padding: .4em 1em;
	position: relative;
}
.ui-dialog .ui-dialog-title {
	float: left;
	margin: .1em 0;
	white-space: nowrap;
	width: 90%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-dialog .ui-dialog-titlebar-close {
	position: absolute;
	right: .3em;
	top: 50%;
	width: 20px;
	margin: -10px 0 0 0;
	padding: 1px;
	height: 20px;
}
.ui-dialog .ui-dialog-content {
	position: relative;
	border: 0;
	padding: .5em 1em;
	background: none;
	overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane {
	text-align: left;
	border-width: 1px 0 0 0;
	background-image: none;
	margin-top: .5em;
	padding: .3em 1em .5em .4em;
}
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
	margin: .5em .4em .5em 0;
	cursor: pointer;
}
.ui-dialog .ui-resizable-n {
	height: 2px;
	top: 0;
}
.ui-dialog .ui-resizable-e {
	width: 2px;
	right: 0;
}
.ui-dialog .ui-resizable-s {
	height: 2px;
	bottom: 0;
}
.ui-dialog .ui-resizable-w {
	width: 2px;
	left: 0;
}
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-resizable-sw,
.ui-dialog .ui-resizable-ne,
.ui-dialog .ui-resizable-nw {
	width: 7px;
	height: 7px;
}
.ui-dialog .ui-resizable-se {
	right: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-sw {
	left: 0;
	bottom: 0;
}
.ui-dialog .ui-resizable-ne {
	right: 0;
	top: 0;
}
.ui-dialog .ui-resizable-nw {
	left: 0;
	top: 0;
}
.ui-draggable .ui-dialog-titlebar {
	cursor: move;
}
.ui-draggable-handle {
}
.ui-resizable {
	position: relative;
}
.ui-resizable-handle {
	position: absolute;
	font-size: 0.1px;
	display: block;
}
.ui-resizable-disabled .ui-resizable-handle,
.ui-resizable-autohide .ui-resizable-handle {
	display: none;
}
.ui-resizable-n {
	cursor: n-resize;
	height: 7px;
	width: 100%;
	top: -5px;
	left: 0;
}
.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%;
}
.ui-resizable-w {
	cursor: w-resize;
	width: 7px;
	left: -5px;
	top: 0;
	height: 100%;
}
.ui-resizable-se {
	cursor: se-resize;
	width: 12px;
	height: 12px;
	right: 1px;
	bottom: 1px;
}
.ui-resizable-sw {
	cursor: sw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	bottom: -5px;
}
.ui-resizable-nw {
	cursor: nw-resize;
	width: 9px;
	height: 9px;
	left: -5px;
	top: -5px;
}
.ui-resizable-ne {
	cursor: ne-resize;
	width: 9px;
	height: 9px;
	right: -5px;
	top: -5px;
}
.ui-progressbar {
	height: 2em;
	text-align: left;
	overflow: hidden;
}
.ui-progressbar .ui-progressbar-value {
	margin: -1px;
	height: 100%;
}
.ui-progressbar .ui-progressbar-overlay {
	background: url("data:image/gif;base64,R0lGODlhKAAoAIABAAAAAP///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAQABACwAAAAAKAAoAAACkYwNqXrdC52DS06a7MFZI+4FHBCKoDeWKXqymPqGqxvJrXZbMx7Ttc+w9XgU2FB3lOyQRWET2IFGiU9m1frDVpxZZc6bfHwv4c1YXP6k1Vdy292Fb6UkuvFtXpvWSzA+HycXJHUXiGYIiMg2R6W459gnWGfHNdjIqDWVqemH2ekpObkpOlppWUqZiqr6edqqWQAAIfkECQEAAQAsAAAAACgAKAAAApSMgZnGfaqcg1E2uuzDmmHUBR8Qil95hiPKqWn3aqtLsS18y7G1SzNeowWBENtQd+T1JktP05nzPTdJZlR6vUxNWWjV+vUWhWNkWFwxl9VpZRedYcflIOLafaa28XdsH/ynlcc1uPVDZxQIR0K25+cICCmoqCe5mGhZOfeYSUh5yJcJyrkZWWpaR8doJ2o4NYq62lAAACH5BAkBAAEALAAAAAAoACgAAAKVDI4Yy22ZnINRNqosw0Bv7i1gyHUkFj7oSaWlu3ovC8GxNso5fluz3qLVhBVeT/Lz7ZTHyxL5dDalQWPVOsQWtRnuwXaFTj9jVVh8pma9JjZ4zYSj5ZOyma7uuolffh+IR5aW97cHuBUXKGKXlKjn+DiHWMcYJah4N0lYCMlJOXipGRr5qdgoSTrqWSq6WFl2ypoaUAAAIfkECQEAAQAsAAAAACgAKAAAApaEb6HLgd/iO7FNWtcFWe+ufODGjRfoiJ2akShbueb0wtI50zm02pbvwfWEMWBQ1zKGlLIhskiEPm9R6vRXxV4ZzWT2yHOGpWMyorblKlNp8HmHEb/lCXjcW7bmtXP8Xt229OVWR1fod2eWqNfHuMjXCPkIGNileOiImVmCOEmoSfn3yXlJWmoHGhqp6ilYuWYpmTqKUgAAIfkECQEAAQAsAAAAACgAKAAAApiEH6kb58biQ3FNWtMFWW3eNVcojuFGfqnZqSebuS06w5V80/X02pKe8zFwP6EFWOT1lDFk8rGERh1TTNOocQ61Hm4Xm2VexUHpzjymViHrFbiELsefVrn6XKfnt2Q9G/+Xdie499XHd2g4h7ioOGhXGJboGAnXSBnoBwKYyfioubZJ2Hn0RuRZaflZOil56Zp6iioKSXpUAAAh+QQJAQABACwAAAAAKAAoAAACkoQRqRvnxuI7kU1a1UU5bd5tnSeOZXhmn5lWK3qNTWvRdQxP8qvaC+/yaYQzXO7BMvaUEmJRd3TsiMAgswmNYrSgZdYrTX6tSHGZO73ezuAw2uxuQ+BbeZfMxsexY35+/Qe4J1inV0g4x3WHuMhIl2jXOKT2Q+VU5fgoSUI52VfZyfkJGkha6jmY+aaYdirq+lQAACH5BAkBAAEALAAAAAAoACgAAAKWBIKpYe0L3YNKToqswUlvznigd4wiR4KhZrKt9Upqip61i9E3vMvxRdHlbEFiEXfk9YARYxOZZD6VQ2pUunBmtRXo1Lf8hMVVcNl8JafV38aM2/Fu5V16Bn63r6xt97j09+MXSFi4BniGFae3hzbH9+hYBzkpuUh5aZmHuanZOZgIuvbGiNeomCnaxxap2upaCZsq+1kAACH5BAkBAAEALAAAAAAoACgAAAKXjI8By5zf4kOxTVrXNVlv1X0d8IGZGKLnNpYtm8Lr9cqVeuOSvfOW79D9aDHizNhDJidFZhNydEahOaDH6nomtJjp1tutKoNWkvA6JqfRVLHU/QUfau9l2x7G54d1fl995xcIGAdXqMfBNadoYrhH+Mg2KBlpVpbluCiXmMnZ2Sh4GBqJ+ckIOqqJ6LmKSllZmsoq6wpQAAAh+QQJAQABACwAAAAAKAAoAAAClYx/oLvoxuJDkU1a1YUZbJ59nSd2ZXhWqbRa2/gF8Gu2DY3iqs7yrq+xBYEkYvFSM8aSSObE+ZgRl1BHFZNr7pRCavZ5BW2142hY3AN/zWtsmf12p9XxxFl2lpLn1rseztfXZjdIWIf2s5dItwjYKBgo9yg5pHgzJXTEeGlZuenpyPmpGQoKOWkYmSpaSnqKileI2FAAACH5BAkBAAEALAAAAAAoACgAAAKVjB+gu+jG4kORTVrVhRlsnn2dJ3ZleFaptFrb+CXmO9OozeL5VfP99HvAWhpiUdcwkpBH3825AwYdU8xTqlLGhtCosArKMpvfa1mMRae9VvWZfeB2XfPkeLmm18lUcBj+p5dnN8jXZ3YIGEhYuOUn45aoCDkp16hl5IjYJvjWKcnoGQpqyPlpOhr3aElaqrq56Bq7VAAAOw==");
	height: 100%;
	filter: alpha(opacity=25); /* support: IE8 */
	opacity: 0.25;
}
.ui-progressbar-indeterminate .ui-progressbar-value {
	background-image: none;
}
.ui-selectable {
}
.ui-selectable-helper {
	position: absolute;
	z-index: 100;
	border: 1px dotted black;
}
.ui-selectmenu-menu {
	padding: 0;
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.ui-selectmenu-menu .ui-menu {
	overflow: auto;
	overflow-x: hidden;
	padding-bottom: 1px;
}
.ui-selectmenu-menu .ui-menu .ui-selectmenu-optgroup {
	font-size: 1em;
	font-weight: bold;
	line-height: 1.5;
	padding: 2px 0.4em;
	margin: 0.5em 0 0 0;
	height: auto;
	border: 0;
}
.ui-selectmenu-open {
	display: block;
}
.ui-selectmenu-text {
	display: block;
	margin-right: 20px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ui-selectmenu-button.ui-button {
	text-align: left;
	white-space: nowrap;
	width: 14em;
}
.ui-selectmenu-icon.ui-icon {
	float: right;
	margin-top: 0;
}
.ui-slider {
	position: relative;
	text-align: left;
}
.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.2em;
	height: 1.2em;
	cursor: default;
}
.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: .7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: .8em;
}
.ui-slider-horizontal .ui-slider-handle {
	top: -.3em;
	margin-left: -.6em;
}
.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}
.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}
.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: .8em;
	height: 100px;
}
.ui-slider-vertical .ui-slider-handle {
	left: -.3em;
	margin-left: 0;
	margin-bottom: -.6em;
}
.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}
.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}
.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}
.ui-sortable-handle {
}
.ui-spinner {
	position: relative;
	display: inline-block;
	overflow: hidden;
	padding: 0;
	vertical-align: middle;
}
.ui-spinner-input {
	border: none;
	background: none;
	color: inherit;
	padding: .222em 0;
	margin: .2em 0;
	vertical-align: middle;
	margin-left: .4em;
	margin-right: 2em;
}
.ui-spinner-button {
	width: 1.6em;
	height: 50%;
	font-size: .5em;
	padding: 0;
	margin: 0;
	text-align: center;
	position: absolute;
	cursor: default;
	display: block;
	overflow: hidden;
	right: 0;
}
/* more specificity required here to override default borders */
.ui-spinner a.ui-spinner-button {
	border-top-style: none;
	border-bottom-style: none;
	border-right-style: none;
}
.ui-spinner-up {
	top: 0;
}
.ui-spinner-down {
	bottom: 0;
}
.ui-tabs {
	position: relative;/* position: relative prevents IE scroll bug (element with position: relative inside container with overflow: auto appear as "fixed") */
	padding: .2em;
}
.ui-tabs .ui-tabs-nav {
	margin: 0;
	padding: .2em .2em 0;
}
.ui-tabs .ui-tabs-nav li {
	list-style: none;
	float: left;
	position: relative;
	top: 0;
	margin: 1px .2em 0 0;
	border-bottom-width: 0;
	padding: 0;
	white-space: nowrap;
}
.ui-tabs .ui-tabs-nav .ui-tabs-anchor {
	float: left;
	padding: .5em 1em;
	text-decoration: none;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active {
	margin-bottom: -1px;
	padding-bottom: 1px;
}
.ui-tabs .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-state-disabled .ui-tabs-anchor,
.ui-tabs .ui-tabs-nav li.ui-tabs-loading .ui-tabs-anchor {
	cursor: text;
}
.ui-tabs-collapsible .ui-tabs-nav li.ui-tabs-active .ui-tabs-anchor {
	cursor: pointer;
}
.ui-tabs .ui-tabs-panel {
	display: block;
	border-width: 0;
	padding: 1em 1.4em;
	background: none;
}
.ui-tooltip {
	padding: 8px;
	position: absolute;
	z-index: 9999;
	max-width: 300px;
}
body .ui-tooltip {
	border-width: 2px;
}

/* Component containers
----------------------------------*/
.ui-widget {
	font-family: inherit;
	font-size: 1em;
}
.ui-widget .ui-widget {
	font-size: 1em;
}
.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	font-family: inherit;
	font-size: 1em;
}
.ui-widget.ui-widget-content {
	border: 1px solid #c5c5c5;
}
.ui-widget-content {
	border: 1px solid #dddddd;
	background: #ffffff;
	color: #333333;
}
.ui-widget-content a {
	color: #333333;
}
.ui-widget-header {
	border: 1px solid #dddddd;
	background: #e9e9e9;
	color: #333333;
	font-weight: bold;
}
.ui-widget-header a {
	color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
	border: 1px solid #c5c5c5;
	background: #f6f6f6;
	font-weight: normal;
	color: #454545;
}
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
	color: #454545;
	text-decoration: none;
}
.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
	border: 1px solid #cccccc;
	background: #ededed;
	font-weight: normal;
	color: #2b2b2b;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
	color: #2b2b2b;
	text-decoration: none;
}

.ui-visual-focus {
	box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid #003eff;
	background: #007fff;
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: #003eff;
	background-color: #ffffff;
}
.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
	color: #ffffff;
	text-decoration: none;
}

/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
	border: 1px solid #dad55e;
	background: #fffa90;
	color: #777620;
}
.ui-state-checked {
	border: 1px solid #dad55e;
	background: #fffa90;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
	color: #777620;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
	border: 1px solid #f1a899;
	background: #fddfdf;
	color: #5f3f3f;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
	color: #5f3f3f;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
	color: #5f3f3f;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
	font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
	opacity: .7;
	filter:Alpha(Opacity=70); /* support: IE8 */
	font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
	opacity: .35;
	filter:Alpha(Opacity=35); /* support: IE8 */
	background-image: none;
}
.ui-state-disabled .ui-icon {
	filter:Alpha(Opacity=35); /* support: IE8 - See #6059 */
}

/* Icons
----------------------------------*/

/* states and images */
.ui-icon {
	width: 16px;
	height: 16px;
}
.ui-icon,
.ui-widget-content .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-widget-header .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_444444_256x240.png");
}
.ui-state-hover .ui-icon,
.ui-state-focus .ui-icon,
.ui-button:hover .ui-icon,
.ui-button:focus .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_555555_256x240.png");
}
.ui-state-active .ui-icon,
.ui-button:active .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_ffffff_256x240.png");
}
.ui-state-highlight .ui-icon,
.ui-button .ui-state-highlight.ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777620_256x240.png");
}
.ui-state-error .ui-icon,
.ui-state-error-text .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_cc0000_256x240.png");
}
.ui-button .ui-icon {
	background-image: url("/images/jqueryui/ui-icons_777777_256x240.png");
}

/* positioning */
.ui-icon-blank { background-position: 16px 16px; }
.ui-icon-caret-1-n { background-position: 0 0; }
.ui-icon-caret-1-ne { background-position: -16px 0; }
.ui-icon-caret-1-e { background-position: -32px 0; }
.ui-icon-caret-1-se { background-position: -48px 0; }
.ui-icon-caret-1-s { background-position: -65px 0; }
.ui-icon-caret-1-sw { background-position: -80px 0; }
.ui-icon-caret-1-w { background-position: -96px 0; }
.ui-icon-caret-1-nw { background-position: -112px 0; }
.ui-icon-caret-2-n-s { background-position: -128px 0; }
.ui-icon-caret-2-e-w { background-position: -144px 0; }
.ui-icon-triangle-1-n { background-position: 0 -16px; }
.ui-icon-triangle-1-ne { background-position: -16px -16px; }
.ui-icon-triangle-1-e { background-position: -32px -16px; }
.ui-icon-triangle-1-se { background-position: -48px -16px; }
.ui-icon-triangle-1-s { background-position: -65px -16px; }
.ui-icon-triangle-1-sw { background-position: -80px -16px; }
.ui-icon-triangle-1-w { background-position: -96px -16px; }
.ui-icon-triangle-1-nw { background-position: -112px -16px; }
.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
.ui-icon-arrow-1-n { background-position: 0 -32px; }
.ui-icon-arrow-1-ne { background-position: -16px -32px; }
.ui-icon-arrow-1-e { background-position: -32px -32px; }
.ui-icon-arrow-1-se { background-position: -48px -32px; }
.ui-icon-arrow-1-s { background-position: -65px -32px; }
.ui-icon-arrow-1-sw { background-position: -80px -32px; }
.ui-icon-arrow-1-w { background-position: -96px -32px; }
.ui-icon-arrow-1-nw { background-position: -112px -32px; }
.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
.ui-icon-arrowthick-1-n { background-position: 1px -48px; }
.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
.ui-icon-arrow-4 { background-position: 0 -80px; }
.ui-icon-arrow-4-diag { background-position: -16px -80px; }
.ui-icon-extlink { background-position: -32px -80px; }
.ui-icon-newwin { background-position: -48px -80px; }
.ui-icon-refresh { background-position: -64px -80px; }
.ui-icon-shuffle { background-position: -80px -80px; }
.ui-icon-transfer-e-w { background-position: -96px -80px; }
.ui-icon-transferthick-e-w { background-position: -112px -80px; }
.ui-icon-folder-collapsed { background-position: 0 -96px; }
.ui-icon-folder-open { background-position: -16px -96px; }
.ui-icon-document { background-position: -32px -96px; }
.ui-icon-document-b { background-position: -48px -96px; }
.ui-icon-note { background-position: -64px -96px; }
.ui-icon-mail-closed { background-position: -80px -96px; }
.ui-icon-mail-open { background-position: -96px -96px; }
.ui-icon-suitcase { background-position: -112px -96px; }
.ui-icon-comment { background-position: -128px -96px; }
.ui-icon-person { background-position: -144px -96px; }
.ui-icon-print { background-position: -160px -96px; }
.ui-icon-trash { background-position: -176px -96px; }
.ui-icon-locked { background-position: -192px -96px; }
.ui-icon-unlocked { background-position: -208px -96px; }
.ui-icon-bookmark { background-position: -224px -96px; }
.ui-icon-tag { background-position: -240px -96px; }
.ui-icon-home { background-position: 0 -112px; }
.ui-icon-flag { background-position: -16px -112px; }
.ui-icon-calendar { background-position: -32px -112px; }
.ui-icon-cart { background-position: -48px -112px; }
.ui-icon-pencil { background-position: -64px -112px; }
.ui-icon-clock { background-position: -80px -112px; }
.ui-icon-disk { background-position: -96px -112px; }
.ui-icon-calculator { background-position: -112px -112px; }
.ui-icon-zoomin { background-position: -128px -112px; }
.ui-icon-zoomout { background-position: -144px -112px; }
.ui-icon-search { background-position: -160px -112px; }
.ui-icon-wrench { background-position: -176px -112px; }
.ui-icon-gear { background-position: -192px -112px; }
.ui-icon-heart { background-position: -208px -112px; }
.ui-icon-star { background-position: -224px -112px; }
.ui-icon-link { background-position: -240px -112px; }
.ui-icon-cancel { background-position: 0 -128px; }
.ui-icon-plus { background-position: -16px -128px; }
.ui-icon-plusthick { background-position: -32px -128px; }
.ui-icon-minus { background-position: -48px -128px; }
.ui-icon-minusthick { background-position: -64px -128px; }
.ui-icon-close { background-position: -80px -128px; }
.ui-icon-closethick { background-position: -96px -128px; }
.ui-icon-key { background-position: -112px -128px; }
.ui-icon-lightbulb { background-position: -128px -128px; }
.ui-icon-scissors { background-position: -144px -128px; }
.ui-icon-clipboard { background-position: -160px -128px; }
.ui-icon-copy { background-position: -176px -128px; }
.ui-icon-contact { background-position: -192px -128px; }
.ui-icon-image { background-position: -208px -128px; }
.ui-icon-video { background-position: -224px -128px; }
.ui-icon-script { background-position: -240px -128px; }
.ui-icon-alert { background-position: 0 -144px; }
.ui-icon-info { background-position: -16px -144px; }
.ui-icon-notice { background-position: -32px -144px; }
.ui-icon-help { background-position: -48px -144px; }
.ui-icon-check { background-position: -64px -144px; }
.ui-icon-bullet { background-position: -80px -144px; }
.ui-icon-radio-on { background-position: -96px -144px; }
.ui-icon-radio-off { background-position: -112px -144px; }
.ui-icon-pin-w { background-position: -128px -144px; }
.ui-icon-pin-s { background-position: -144px -144px; }
.ui-icon-play { background-position: 0 -160px; }
.ui-icon-pause { background-position: -16px -160px; }
.ui-icon-seek-next { background-position: -32px -160px; }
.ui-icon-seek-prev { background-position: -48px -160px; }
.ui-icon-seek-end { background-position: -64px -160px; }
.ui-icon-seek-start { background-position: -80px -160px; }
/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
.ui-icon-seek-first { background-position: -80px -160px; }
.ui-icon-stop { background-position: -96px -160px; }
.ui-icon-eject { background-position: -112px -160px; }
.ui-icon-volume-off { background-position: -128px -160px; }
.ui-icon-volume-on { background-position: -144px -160px; }
.ui-icon-power { background-position: 0 -176px; }
.ui-icon-signal-diag { background-position: -16px -176px; }
.ui-icon-signal { background-position: -32px -176px; }
.ui-icon-battery-0 { background-position: -48px -176px; }
.ui-icon-battery-1 { background-position: -64px -176px; }
.ui-icon-battery-2 { background-position: -80px -176px; }
.ui-icon-battery-3 { background-position: -96px -176px; }
.ui-icon-circle-plus { background-position: 0 -192px; }
.ui-icon-circle-minus { background-position: -16px -192px; }
.ui-icon-circle-close { background-position: -32px -192px; }
.ui-icon-circle-triangle-e { background-position: -48px -192px; }
.ui-icon-circle-triangle-s { background-position: -64px -192px; }
.ui-icon-circle-triangle-w { background-position: -80px -192px; }
.ui-icon-circle-triangle-n { background-position: -96px -192px; }
.ui-icon-circle-arrow-e { background-position: -112px -192px; }
.ui-icon-circle-arrow-s { background-position: -128px -192px; }
.ui-icon-circle-arrow-w { background-position: -144px -192px; }
.ui-icon-circle-arrow-n { background-position: -160px -192px; }
.ui-icon-circle-zoomin { background-position: -176px -192px; }
.ui-icon-circle-zoomout { background-position: -192px -192px; }
.ui-icon-circle-check { background-position: -208px -192px; }
.ui-icon-circlesmall-plus { background-position: 0 -208px; }
.ui-icon-circlesmall-minus { background-position: -16px -208px; }
.ui-icon-circlesmall-close { background-position: -32px -208px; }
.ui-icon-squaresmall-plus { background-position: -48px -208px; }
.ui-icon-squaresmall-minus { background-position: -64px -208px; }
.ui-icon-squaresmall-close { background-position: -80px -208px; }
.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
.ui-icon-grip-diagonal-se { background-position: -80px -224px; }


/* Misc visuals
----------------------------------*/

/* Corner radius */
.ui-corner-all,
.ui-corner-top,
.ui-corner-left,
.ui-corner-tl {
	border-top-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-top,
.ui-corner-right,
.ui-corner-tr {
	border-top-right-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: 3px;
}
.ui-corner-all,
.ui-corner-bottom,
.ui-corner-right,
.ui-corner-br {
	border-bottom-right-radius: 3px;
}

/* Overlays */
.ui-widget-overlay {
	background: #000;
	opacity: .5;
	filter: Alpha(Opacity=.3); /* support: IE8 */
}
.ui-widget-shadow {
	-webkit-box-shadow: 0px 0px 5px #666666;
	box-shadow: 0px 0px 5px #666666;
}
/* ------------------------------------------------------------------------------------
	SCREEN - RGM Norton 2023
	Filename : sitepanes.css
	Last Updated : 11. 01. 2023
	Copyright :(c) 2022 Etail Systems Ltd
	Author : Etail Systems Ltd
	Web : http://www.etailsystems.com

	Table of Contents
		=Definitions
		=Reset
		=Normalise
		=Jquery Base Overrides
		=Page
		=Typography
			defaults
			articles
		=Buttons
		=Tables
		=Forms
			Defaults
			Sign In
			Register
			Forgotten Password
		=Base CSS definitions and element stylings
			Messages
			Headings
		=Grid Layout
			layout base classes
			Custom classes - should become standard too
		=Forms
			Defaults
			Sign In
			Register
			Forgotten Password
		=SiteContainers
		=FIXEDTop Panel
		=Top Panel
		=Center Panel
		=Main Panel
			fullwidth
			wide
			leftpanel
		=Footer Panel
		=Bottom Panel
		=FIXEDBottom Panel
			Cookie Popup
			copyright and managed by
		=COMS COMPONENTS
			Breadcrumb
			DepartmentTree
				Tabs
				Dropdown
				alldepts
				menu featured product
				menu featured article
			OwlCarousel
				Basic
				Product
			Newsletter
			Accordion
			Blog
			Store Locator
			HoverBasket
			Autocomplete
			Email when back in stock EWIS
			PopupDialog / Popup Add to Basket / Direct Despatch
		=DepartmentPages
			SearchHeader / SearchFooter
			FilterSearch
			Deptsingle
			Subdepartment tree
		=FeaturedProducts
		=ProductPage
		=Basket
		=Checkout
		=My Account
		=ConfirmationPage
		=Sitemap
		=Client Spefific Stylings 
		
=Definitions
------------------------------------------------------------------------------------- */
:root {

	--line-height: 1.15;
	--text-font-weight: 400;
	--heading-font-weight: 600;
	--button-font-weight: 600;

	--outline-width: 3px;
	--spacing: 1rem;
	--half-spacing: .5rem;
	--typography-spacing-vertical: 1.5rem;
	--block-spacing-vertical:calc(var(--spacing) * 2);
	--block-spacing-horizontal:var(--spacing);
	--grid-spacing-vertical:var(--spacing);
	--grid-spacing-horizontal:var(--spacing);
	--form-element-spacing-vertical: 0.5rem;
	--form-element-spacing-horizontal: .725rem;
	--nav-element-spacing-vertical: 1rem;
	--nav-element-spacing-horizontal: 0.5rem;
	--nav-link-spacing-vertical: 0.5rem;
	--nav-link-spacing-horizontal: 0.5rem;
	--form-label-font-weight:var(--font-weight);
	
	/*fonts */
	--text-font:'montserrat', sans-serif;
	--heading-font:'novecento-sans-wide', sans-serif;
	--sub-heading-font:'montserrat', sans-serif;
	--button-font:'novecento-sans-wide', sans-serif;
	--font-awesome:"Font Awesome 6 Pro";
	--font-size: 16px;
	
	/* grid info */
	--grid-spacing-horizontal: 1rem;
	--grid-spacing-vertical: 1rem;
	--spacing: 1rem;
	--half-spacing: .5rem;
	
	/* shadows */
	--box-shadow: 5px 5px 5px 0 rgba(0, 0, 0, 0.25);
	--transition: 0.5s ease-in-out;
	
	
	/* client color scheme */
	--red:rgb(223 54 26);
	--red-alpha:rgb(223 54 26 / .7);
	--dark-red: #9c2c19;
	--green: #5eb20a;
	--dark-grey: #282828;
	--grey: #656565;
	--light-grey: #b1b1b1;
	--grey-alpha:rgb(102 102 102 / .7);
	--light-grey-alpha:rgb(177 177 177 / .7);
	--black: #171717;
	--white: #fff;
	--off-white: #eeeff1;
	
	/*standard colors */
	--error-color: #dc381d;
	--warn-color:rgb(230 167 27);
	--info-color: #5eb20a;
	--help-color: #2879ff;
	
	/*Section colors */
	--background-color:var(--white);
	--top-bar-color:var(--light-grey);
	--top-bar-text-color:var(--white);
	--top-bar-link-color:var(--white);
	--top-panel-color:var(--white);
	--center-panel-color:var(--white);
	--main-panel-color:var(--white);
	--footer-panel-color:var(--dark-grey);
	--bottom-panel-color:var(--dark-grey);
	--bottom-panel-text-color:var(--light-grey);
	--bottom-bar-color:var(--white);
	--bottom-bar-text-color:var(--light-grey);
	--panel-color:var(--white);
	--dropdown-color:var(--white);
	--popout-color:var(--white);
	--form-color:var(--white);
	
	/*nav colors */
	--navbar-color:var(--dark-grey);
	--navbar-tab-color:var(--black);
	--navbar-tab-hover-color:var(--black);
	--navbar-heading-color:var(--text-color);
	--navbar-link-color:var(--white);
	--nav-dropdown-color:var(--white);
	--nav-text-color:var(--dark-grey);
	
	/*Buttons */
	--button-color:var(--red);
	--button-text-color:var(--white);
	--button-border-color:var(--red);
	--button-hover-text-color:var(--white);
	--button-hover-color:var(--red);
	--button-hover-border-color:var(--red);
	
	--alt-button-color:var(--light-grey);
	--alt-button-text-color:var(--grey);
	--alt-button-border-color:var(--grey);
	--alt-button-hover-text-color:var(--dark-grey);
	--alt-button-hover-color:var(--light-grey);
	--alt-button-hover-border-color:var(--dark-grey);
	
	--checkout-button:var(--red);
	--checkout-button-text:var(--white);
	
	--info-button:var(--info-color);
	--info-button-text:var(--white);
	--icon-color:var(--error-color);
	
	/*Borders */
	--border-color:var(--grey);
	--border-color-light:var(--light-grey);
	--border-radius: 0rem;
	--border-width: 1px;
	
	/*Text */
	--color:var(--dark-grey);
	--text-color:var(--dark-grey);
	--text-color-light:var(--grey);
	--text-heading-color:var(--dark-grey);
	--text-sub-heading-color:var(--grey);
	--text-link-color:var(--red);
	--text-link-color-hover:var(--red);
	--text-link-color-focus: transparent;
	
	/* featured product element fprd*/
	--fprd-color:var(--white);
	--fprd-title-color:var(--red);
	/*sets height of fprd title element for consistency - need to figure a way of this being calculated in a way that matches the desired # of lines*/
	--fprd-title-height: 5rem;
}

/* -------------------------------------------------------------------------------------
=Reset 
------------------------------------------------------------------------------------- */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,
address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,
var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
	-webkit-font-smoothing: antialiased;
}

/* To enable HTML5 elements in IE */
article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section {
	display: block;
}

input,select,textarea {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

input:focus,
textarea:focus,
select:focus {
	outline-offset: 0px;
}

/* -------------------------------------------------------------------------------------
=Normalise v8.0.1 | MIT License | github.com/necolas/normalize.css 
------------------------------------------------------------------------------------- */

html {
	line-height: var(--line-height);
	-webkit-text-size-adjust: 100%;
}

hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

a {
	background-color: transparent;
}

abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

b,
strong {
	font-weight: var(--heading-font-weight);
}

code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

small {
	font-size: 80%;
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

img {
	border-style: none;
	max-width: 100%;
	height: auto;
}

.imgcont {}

.imgcont img {
	display: block;
}

button,input,optgroup,select,textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

button,input {
	overflow: visible;
}

button,select {
	text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

fieldset {
	padding: 0.35em 0.75em 0.625em;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

progress {
	vertical-align: baseline;
}

textarea {
	overflow: auto;
}

[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

details {
	display: block;
}

summary {
	display: list-item;
}

template {
	display: none;
}

[hidden] {
	display: none;
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.ui-dialog,
.ui-widget.ui-widget-content {
	z-index: 1000;
	border: 1px solid var(--border-color);
}

.ui-widget {
	font-size: 1em;
	font-family: var(--text-font)
}

.ui-widget-header {
	background: none;
	border: none;
	color: var(--text-heading-color);
	font-size: 1em;
}

.ui-dialog input {
	width: 100%;
}

.ui-dialog input#subscribe {
	width: auto;
}

.ui-dialog input.submit {
	margin: var(--spacing) 0;
	text-align: center;
}

.ui-widget input[type="text"] .ui-widget input[type="email"],
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
	padding: 0 var(--spacing);
	padding: .25em 0.5em;
	padding: var(--spacing);
	border: none;
	outline: 1px var(--border-color) solid;
}

.validateTips {
	font-size: .688em;
}

/* Interaction states
----------------------------------*/
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
	border: 1px solid var(--border-color);
	font-weight: normal;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--border-color);
}

/* the ask for email address popup? */

.ui-dialog.ewisdialog {
	width: 400px !important;
	text-align: center;
}

/* ask a question popup on product pages */
.ui-dialog.techquesdialog {}
.techquesdialog label {}

/* saartdialog*/
.ui-dialog.saartdialog {
	width: 640px !important;
}

/* -------------------------------------------------------------------------------------
=Page 
------------------------------------------------------------------------------------- */
html {
	-webkit-font-smoothing: antialiased
}

body {
	background-color: var(--background-color);
	font-family: var(--text-font);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
	color: var(--text-color);
	font-size: 16px;
	background: #f8f8f8 url('https://s3-eu-west-1.amazonaws.com/rgmnorton/1310720/i/bdr/bg_body2020-min.jpg') fixed center top no-repeat;
}

ol {
	margin-left: .5em;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
b,strong {
	font-weight: var(--heading-font-weight);
}

sub,sup {
	position: relative;
	font-size: 0.75em;
	line-height: 0;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

address,blockquote,dl,figure,form,ol,p,pre,table,
ul {
	margin-top: 0;
	margin-bottom: var(--typography-spacing-vertical);
	color: var(--text-color);
	font-style: normal;
	font-weight: var(--font-weight);
	font-size: var(--font-size);
}

a,[role=link] {
	--background-color: transparent;
	outline: none;
	background-color: var(--background-color);
	color: inherit;
	-webkit-text-decoration: var(--text-decoration);
	text-decoration: var(--text-decoration);
	transition: background-color var(--transition), color var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
	transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition);
	transition: background-color var(--transition), color var(--transition), text-decoration var(--transition), box-shadow var(--transition), -webkit-text-decoration var(--transition);
}

a:is([aria-current],:hover,:active,:focus),
[role=link]:is([aria-current],:hover,:active,:focus) {
	--color: var(--text-link-color-hover);
	--text-decoration: underline;
}

a:focus,[role=link]:focus {
	--background-color: var(--text-link-color-focus);
}

h1,h2,h3,h4,h5,h6 {
	margin-top: 0;
	margin-bottom: var(--typography-spacing-vertical);
	color: var(--text-heading-color);
	font-weight: var(--heading-font-weight);
	font-size: var(--font-size);
	font-family: var(--heading-font);
	text-transform: capitalize;
}

h1 {
	font-size: 2rem;
	--typography-spacing-vertical: .5rem;
}

h2 {
	font-size: 1.75rem;
	--typography-spacing-vertical: .5rem;
}

h3 {
	font-size: 1.5rem;
	--typography-spacing-vertical: .5rem;
}

h4 {
	font-size: 1.25rem;
	--typography-spacing-vertical: .5rem;
}

h5 {
	font-size: 1.125rem;
	--typography-spacing-vertical: .5rem;
}

p {
	font-family: var(--text-font);
	margin-bottom: var(--typography-spacing-vertical);
}

small {
	font-size: .825em;
}

.artp :where(dl,ol,ul) {
	padding-right: 0;
	padding-left: var(--spacing);
	-webkit-padding-start: var(--spacing);
	padding-inline-start: var(--spacing);
	-webkit-padding-end: 0;
	padding-inline-end: 0;
}

:where(dl,ol,ul) li {
	margin-bottom: calc(var(--typography-spacing-vertical) * 0.25);
}

:where(dl,ol,ul) :is(dl,ol,ul) {
	margin: 0;
	margin-top: calc(var(--typography-spacing-vertical) * 0.25);
}

[type=checkbox],[type=radio] {
	--border-width: 2px;
}

[type=checkbox][role=switch] {
	--border-width: 3px;
}

thead th,thead td,tfoot th,tfoot td {
	--border-width: 3px;
}

:not(thead):not(tfoot)>*>td {
	--font-size: 0.875em;
}

pre,code,kbd,samp {
	--font-family: "Menlo", "Consolas", "Roboto Mono", "Ubuntu Monospace", "Noto Mono", "Oxygen Mono", "Liberation Mono", monospace, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

kbd {
	--font-weight: var(--heading-font-weight);
}

/* custom dropdown - same on all things... */
select,textarea {
	padding: var(--half-spacing);
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

select {
	background: url(data:image/svg+xml;base64,PHN2ZyBpZD0iTGF5ZXJfMSIgZGF0YS1uYW1lPSJMYXllciAxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0Ljk1IDEwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6IzQ0NDt9PC9zdHlsZT48L2RlZnM+PHRpdGxlPmFycm93czwvdGl0bGU+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iNC45NSIgaGVpZ2h0PSIxMCIvPjxwb2x5Z29uIGNsYXNzPSJjbHMtMiIgcG9pbnRzPSIxLjQxIDQuNjcgMi40OCAzLjE4IDMuNTQgNC42NyAxLjQxIDQuNjciLz48cG9seWdvbiBjbGFzcz0iY2xzLTIiIHBvaW50cz0iMy41NCA1LjMzIDIuNDggNi44MiAxLjQxIDUuMzMgMy41NCA1LjMzIi8+PC9zdmc+) #fff no-repeat right .25em center;
	padding-right: 1.5em;
	display: inline;
	max-width: 100%;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
}

input.inputtext,input.inputtext_light{
	font-size: .725em;
	padding: var(--half-spacing) var(--spacing);
	border: 1px solid var(--border-color);
}

/* Article typesettings 
------------------------------------------------------- */
.art a {
	color: var(--text-link-color);
}

.art a:hover {
	color: var(--text-link-color-hover);
}


/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */
.submit,
a.btn {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
	font-weight: var(--button-font-weight);
	padding: var(--half-spacing) var(--half-spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px solid var(--button-border-color);
	border-radius: var(--border-radius);
	outline: none;
	background:url('https://s3-eu-west-1.amazonaws.com/rgmnorton/1310720/i/bdr/dust_cracks_min.png') var(--button-color) repeat left;
}
.submit:hover,
a.btn:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	color: var(--white);
	border: 1px solid var(--button-hover-border-color);
}

/* iphone specific overrides */
textarea,
input.text,
input.inputtext,
.ui-widget select,
input[type="text"],
input[type="email"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	-webkit-appearance: none;
	border-radius: var(--border-radius);
	font-size: 1em;
	padding: .5rem;
	width: auto;
}

td a.btn {
	display: block;
}

/* -------------------------------------------------------------------------------------
=Tables 
------------------------------------------------------------------------------------- */

/* Defaults for tables 
------------------------------------------------------- */

/* Delivery Information
------------------------------------------------------- */
#pm .art.deliveryInfo h3 {}
#pm .art.deliveryInfo h4,
#pm .art.deliveryInfo table {}
.deliveryInfo table {}
.deliveryInfo table th {}
.deliveryInfo table td {}
#pm .deliveryInfo .artp table td p {}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	border: 1px solid var(--border-color);
	padding: 1em;
	margin-bottom: 1em;
	background-color: var(--form-color)
}

/*bit of a hack - really don't want to be using an img as a way of identifying a required field */
.form img{
	width:auto !Important;
	height:auto
}

.form ul {
	margin: 0;
	padding: 0;
}

.form ul li {
	list-style: none;
}

.form h1,
.form h2,
.form h3,
.form h4, 
.form h5{
	font-size: 1em;
}

form .help {
	color: var(--help-color);
	font-size: small;
}

form label {
	font-weight: var(--heading-font-weight);
	color: var(--h2-color);
}

.form .bt h3 {
	padding: var(--spacing) 0;
}

.form li select,
.form li textarea,
.form li input {
	margin-bottom: var(--spacing)
}

/* DON'T try grid layout here - its too restrictive*/
.form li {}

.form li.reqmsg {
	text-align: right;
	color: var(--error-color);
}

.form li.header {
	margin-bottom: 1.5em;
}

.form label {
	font-weight: var(--heading-font-weight);
	display: block;
	margin-bottom: var(--half-spacing)
}

.form label img {
	display: inline-block;
}

.form li.help,
.form li.info {
	display: block;
	font-size: .825em;
}

.form form {}

.form form .submit {
	display: block;
}

.form .g-recaptcha {
	text-align: right;
	display: block;
	margin-left: auto;
}

/* fix for checklists*/
.form li ul.check {}

.form li ul.check input {
	margin-right: var(--half-spacing);
}

/* fix for radio buttons */
.form ul.radio {}

.form li ul.radio input {
	margin-right: var(--half-spacing);
}

/* fix for subscribe checkbox */
.form li.subscribe input {
	margin-right: var(--half-spacing)
}

.form li.subscribe label {
	display: inline;
	font-weight: normal;
}

.exstfgtpwd {
	font-family: var(--text-font);
	font-size: .825em;
	font-weight: normal;
}

/* Sign In
------------------------------------------------------- */
.form#psign {
	width: 50%;
	margin: auto;
}

/* Register
------------------------------------------------------- */
.form#preg,
.form#pguest {
	width: 50%;
	margin: auto;
}

/* Forgotten Password
------------------------------------------------------- */
.form#pwrem {
	width: 50%;
	margin: auto;
}

/* Checkout (New Customer)
------------------------------------------------------- */
.form#pchkoutnewcust {}

/* Checkout (Sign In)
------------------------------------------------------- */
.checkoutsignin #pm .form#psign,
.checkoutsignin #pm .form#pguest,
.checkoutsignin #pm .form#pchkoutnewcust {}

/*existing customer pane */
.checkoutsignin #pm .form#psign ul.exstcust {}
.checkoutsignin #pm .form#psign ul.exstcust label {}
.checkoutsignin #pm .form#psign .exstnotme a {}

/* -------------------------------------------------------------------------------------
=Base CSS definitions and element stylings
------------------------------------------------------------------------------------- */
/* Messages 
------------------------------------------------------- */
#mess {
	padding: 1em;
	margin: 1em 0;
}

li.info {
	color: var(--info-color);
	list-style: none;
}

li.info::before {
	font-family: var(--font-awesome);
	content: '\f05a';
	margin-right: var(--half-spacing)
}

.warn {
	color: var(--error-color);
}

.reqmsg {
	color: var(--error-color);
	font-size: smaller;
}

.oos {
	color: var(--error-color);
}

/* Headings 
------------------------------------------------------- */
.deptprods h3,
.carousel.prod h2,
.header h2,
.header h3 {
	font-size: 1.5em;
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.deptprods h3:before,
.deptprods h3:after,
.carousel.prod h2:before,
.carousel.prod h2:after,
.header h2:before,
.header h2:after,
.header h3:before,
.header h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color:var(--border-color-light);
}

.deptprods h3:before,
.carousel.prod h2:before,
.header h2:before,
.header h3:before {
	margin-left: -50%;
	text-align: right;
}

/* -------------------------------------------------------------------------------------
=Grid Layout
------------------------------------------------------------------------------------- */
#pm .pmind {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}
/*this would be avoided if we just wrote the content out in blocks
would be also better if we could add our own "blocks" for things to be in
you currently can't have a banner and an article side by side because of this */
#pm .pmind .pbnr {
	grid-column:1/-1;
}

#pm .pmind .pbnr  .bc {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-gap: var(--spacing);
	grid-auto-flow: dense;
}

/*set the default for any non grid class article #pm is needed as the css class is set higher than the immediate parent container */
.art,
.prdlst,
.carousel.prod,
.brnd,
#depts {
	grid-column: 1/-1;
}

.fullWidth img,
.halfWidth img,
.thirdWidth img,
.quarterWidth img,
.twoThirdWidth img {
	display: block;
	width: 100%;
	height: auto;
}

/* layout base classes
------------------------------------------------------- */
.fullWidth {
	grid-column: 1/-1;
}

.halfWidth {
	grid-column: auto / span 6;
}

.quarterWidth {
	grid-column: auto / span 3;
}

.thirdWidth {
	grid-column: auto / span 4;
}

.twoThirdWidth {
	grid-column: auto / span 8;
}

.fullWidth,
.halfWidth,
.quarterWidth,
.thirdWidth,
.twoThirdWidth {
	position: relative;
	/* added to ensure carousel elements work right in firefox */
	display: grid;
	grid-template-columns: 100%;
}

.siteWide{
	border:4px solid var(--red);
	margin:1em;
	padding:1em;
	text-align:center;
}


.siteWide h1,
.siteWide h2,
.siteWide h3,
.siteWide h4,
.siteWide h5{
	font-size:1em;
	margin:0;
}

.siteWide p,
.siteWide li{
	font-size:.725em;
	margin:0;
}










/* -------------------------------------------------------------------------------------
=SiteContainers
------------------------------------------------------------------------------------- */

#cont {
	width: 1200px;
	margin: auto;
}

#site {
	background-color: var(--background-color);
	border-top: 4px var(--red) solid;
	border-bottom: 1px solid var(--border-color-light);
	        -webkit-box-shadow: 2px 2px 2px 2px rgba(96,94,93,0.75);
    -moz-box-shadow: 2px 2px 2px 2px rgba(96,94,93,0.75);
    box-shadow: 2px 2px 2px 2px rgba(96,94,93,0.75);
}

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf {
	top: 0px;
	z-index: 2002;
	width: 100%;
	margin-bottom: .5rem;
}

#ptf .ext {
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
	display: grid;
	grid-template-columns: auto auto 1fr;
	grid-template-areas: "myaccount vatswitch infolinks";
	align-items: center;
}

/* Defaults
------------------------------------------------------- */
#ptf ul {
	margin: 0;
	padding: 0;
}

#ptf ul li {
	list-style: none;
	display: inline-block;
	margin: 0;
	/* padding: var(--half-spacing); */

}

#ptf a {}

/* My Account
------------------------------------------------------- */
#ptf .cust {
	grid-area: myaccount;
	background-color: var(--off-white);
	padding: var(--half-spacing);
}

#ptf .cust:before {}
#ptf .cust .bt {}

#ptf .cust h3,
#ptf .cust h4 {
	font-family: var(--heading-font);
	font-weight:normal;
	font-size: .725em;
	margin-bottom: 0;
	text-transform: none;
}

#ptf .cust h3 a,
#ptf .cust h4 a {
	display: inline-block;
}

#ptf .cust h4 a:before {
	font-family: var(--font-awesome);
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	content: '\f007';
}

#ptf .cust h4 a:after {}

#ptf .cust ul.topnav {
	display: grid;
	margin: 0;
}

#ptf .cust ul.topnav li.acct {}



#ptf .cust ul li:after {
	margin: 0 .25em;
	display: inline-block;
}

#ptf .cust ul li:last-child:after {}

/*****************************
dropdown stuff 
******************************/
#ptf .cust ul li.acct{
	display: block;
	position: relative;
}
#ptf .cust ul li.acct:after {
	content: "";
	display: none;
	margin: 0;
}

#ptf .cust ul.subnav li a:hover {
	border-bottom: none;
}


#ptf .cust ul>li:hover>ul,
.cust ul>a:hover+ul {
	display: block;
}

#ptf .cust ul.subnav {
	position: absolute;
	left: -0.5em;
	display: none;
	padding: 1em;
	z-index: 1000;
	display: none;
	width: 150px;
	background-color: var(--off-white);
}

#ptf .cust ul.subnav li h4 {}

#ptf .cust ul.subnav li {
	font-family: var(--heading-font);
	font-size:.725em;
	position: relative;
	display: block;
	margin: .25em 0;
}

/* vat switch
------------------------------------------------------- */
.vatsw {
	grid-area: vatswitch;
	text-align: left;
	padding: var(--half-spacing);
	background-color: var(--off-white)
}

.vatsw label {
	/* outline:1px red solid; */
	display: grid;
	grid-template-columns: auto auto auto;
}

.vatsw span {
	font-family: var(--text-font);
	display: block;
	font-size: .725em;
	vertical-align: bottom;
}

.vatsw [type=checkbox][role=switch] {
	--background-color: var(--red);
	--border-color: var(--red);
	--color: var(--switch-color);
	--border-width: 3px;
	font-size: .725em;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	/* vertical-align: bottom; */
	cursor: pointer;
	width: 2.25em;
	height: 1.25em;
	border: var(--border-width) solid var(--border-color);
	border-radius: 1.25em;
	background-color: var(--background-color);
	line-height: 1.25em;
	margin: 0 var(--spacing);
}

.vatsw [type=checkbox][role=switch]:focus {
	--background-color: var(--white);
	--border-color: var(--white);
}

.vatsw [type=checkbox][role=switch]:checked {
	--background-color: var(--red);
	--border-color: var(--red);
}

.vatsw [type=checkbox][role=switch]::before {
	display: block;
	width: calc(1.25em - (var(--border-width) * 2));
	height: 100%;
	border-radius: 50%;
	background-color: var(--white);
	content: "";
	transition: margin 0.1s ease-in-out;
}

.vatsw [type=checkbox][role=switch]:checked::before {
	background-color: var(--white);
}

.vatsw [type=checkbox][role=switch]:checked {
	background-image: none;
}

.vatsw [type=checkbox][role=switch]:checked::before {
	margin-left: calc(1.125em - var(--border-width));
	-webkit-margin-start: calc(1.125em - var(--border-width));
	margin-inline-start: calc(1.125em - var(--border-width));
}

/*info links*/
#ptf .info {
	grid-area: infolinks;
	text-align: right;
}

#ptf .info ul {
	display: inline;
	background-color: var(--off-white);
	padding: var(--half-spacing)
}

#ptf .info li {
	padding: 0 var(--half-spacing);
	font-size:.725em;
}

/* -------------------------------------------------------------------------------------
=Top Panel
------------------------------------------------------------------------------------- */

#pt {
	width: 100%;
	background-color: var(--top-panel-color);
}

#pt .ext {
	margin: 0 auto;
	position: relative;
	grid-column-gap: 0;
	grid-gap: var(--spacing);
	display: grid;
	align-items: center;
	padding: var(--spacing);
	width: calc(1200px - 2rem);
	grid-template-columns:350px 1fr 100px 250px;
	grid-template-areas: "contact logo . basket"
							"contact logo search search"
}

#pt .ext>* {
	min-width: 0;
}

/* logo
------------------------------------------------------- */
#pt .pbnr {
	grid-area: logo;
	margin: auto;
}

/* Article
------------------------------------------------------- */
#pt .art{
	grid-area:contact;
}

#pt .art ul{
margin-bottom:0;}


#pt .art li{
	list-style:none;
}

/*font awesome icons */
li.phone:before{
	font-family: var(--font-awesome);
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f095';
}

li.fax:before{
	font-family: var(--font-awesome);
	font-weight: 600;
	margin-right: .5em;
	display:inline-block;
	content: '\f1ac';
}

li.email:before{
	font-family: var(--font-awesome);
	font-weight: 600;
	margin-right: .5em;
	display:inline-block;
	content: '\f0e0';
}

#pt .ext .art ul li a{
	color:var(--text-link-color);
}

/* QuickOrder
------------------------------------------------------- */
#pt .qord {
	grid-area: quickorder;
	text-align: left;
}

#pt .qord .bc {
	margin: auto;
	display: inline-block;
}

#pt .qord label {
	font-size: .825em;
	display: inline-block;
	vertical-align: middle;
	margin-right: .5em;
	text-transform: capitalize;
}

#pt .qord input {
	border: 1px solid var(--border-color-light);
	border-radius: var(--border-radius);
	padding: 1em;
	text-align: center;
	color: var(--text-color-light);
}

#qoref {
	width: 6rem;
	margin-right: .5em;
}

#qoqty {
	width: 3rem;
}

#pt .qord input#qosubmit {
	margin-left: var(--spacing);
	padding: 1em;
	background-color: var(--button-color);
	border-color: var(--button-color);
	color: var(--white);
	font-weight: var(--button-font-weight);
}

#qoresponse {
	margin: 0;
}

/* search
------------------------------------------------------- */
#pt .search {
	grid-area: search;
	margin-left: auto;
	text-align: right;
}

#pt .search form {
	margin: 0;
	text-align: left;
}

#pt .search input {
	display: inline-block;
	vertical-align: top;
}

#pt .search input#searchbox {
	width: 329px;
	height: auto;
	margin: 0;
	font-size: 11px;
	padding: 8px;
	border: 1px solid var(--border-color-light);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right: 0;
}

/*could do with some way of nicely seeing font awesome icons in coms */
#pt .search input#search {
	font-size: 11px;
	width: auto;
	height: 30px;
	margin: 0;
	padding: 0;
	background-color: var(--white);
	color: var(--grey);
	font-family: var(--font-awesome);
	border: none;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left: 0;
}

/* Basket
------------------------------------------------------- */
#pt .bskt {
	grid-area: basket;
	text-align:right;

}

#pt .bskt .bc{
	/* width: 250px; */
	/* display:inline-block; */
	margin-left:auto;
	border-bottom:1px solid var(--border-color);
	padding: 1em;
}

#mybskt p,
#mybskt h4 {
	padding: 0;
	margin: 0;
}

#pt .bskt .bt h3 {
	display: inline-block;
	vertical-align: middle;
	font-size: 1em;
}

#pt .bskt h3,
#pt .bskt h4 {
	font-size: 1em;
}

#pt .bskt #mybskt {
display:grid;
	grid-template-columns:auto auto;
	grid-template-areas:"items total";
	grid-gap:1rem;
	
}

/*free delivery message - always displays and is confusing, should make prominent on basket instead */
#pt .bskt #mybskt h4 {
	display: none;
}

/* number of items in basket */
#pt .bskt #bsktitems {
	grid-area:items;
	font-weight:600
}

#pt .bskt #bsktitems span {
	margin-right: var(--half-spacing);
	font-weight:normal;
}

/* Basket value */
#pt .bskt #bsktvalue {
	font-weight:600;
}

#pt .bskt #bsktvalue span {
	margin-right: var(--half-spacing);
	font-weight:normal;
}

#pt .bskt span {}

/*the my basket button
------------------------------------------------------- */
#pt .bskt a.btn#viewbskt {
	color: var(--button-color);
	display: block;
	grid-column: 1;
	grid-row: 1;
	padding: 0;
	background: none;
	border: none;
	display: none;
}

#pt .bskt a.btn img {
	width: 1.5em;
	height: auto;
	display: none;
}

/* -------------------------------------------------------------------------------------
=Center Panel
------------------------------------------------------------------------------------- */
#pc {
	margin: auto;
	display: flow-root;
	background-color: var(--center-panel-color);
	/* margin-bottom: 1rem; */
}


/* -------------------------------------------------------------------------------------
=Main Panel
------------------------------------------------------------------------------------- */

#pmid {
	width: calc(1200px - 2rem);
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	/*used to ensure left panel displays correctly, unsure why though... */
	display: flex;
	justify-content: flex-start;
	padding: 0 var(--spacing);
}

#pm {
	max-width: 1200px;
	margin: 0 auto;
}


/* full width panel 
------------------------------------------------------- */
#pm.pmfull {
	width: 1200px;
	background-color: var(--main-panel-color);
	padding:var(--spacing) 0;
}

/* wide panel (used with left panel - or is it... see filter search) 
------------------------------------------------------- */
#pm.pmwide {
	background-color: var(--main-panel-color);
	width: 80%;
	display: inline-block;
	vertical-align: top;
}

/* left panel
------------------------------------------------------- */
#pl {
	width: calc(20% - 1em);
	margin-right: 1em;
	margin-top: 1em;
	vertical-align: top;
}

#pl .bt h3 {
	font-size: 1em;
	padding: .5em;
}


/* -------------------------------------------------------------------------------------
=Footer Panel
------------------------------------------------------------------------------------- */
#pf {
	display: flow-root;
	background-color: var(--footer-panel-color);
	margin-top: 2em;
}

#pf .ext {
	margin: 0 auto;
	position: relative;
	max-width: 1200px;
	grid-column-gap: 0;
	grid-row-gap: var(--grid-spacing-vertical);
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 600px 600px 1fr;
	grid-template-areas: ". news news .";
}



/* -------------------------------------------------------------------------------------
=Bottom Panel
------------------------------------------------------------------------------------- */
#pb {
	background:url('https://s3-eu-west-1.amazonaws.com/rgmnorton/1310720/i/bdr/footer_bg-min2019.png') no-repeat  bottom left;
}

#pb .ext {
	margin: 0 auto;
	position: relative;
	padding: 1em;
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	color: var(--bottom-panel-text-color);
	display: grid;
	align-items: start;
	max-width: 1200px;
	margin: auto;
	grid-template-columns: repeat(3, auto);
}

#pb .art {
	grid-area: article;
}

#pb .art li {
	display: inline-block;
	margin-right: .5em;
}

#pb .art li a {
	color: var(--white);
	font-size: 2em;
}

#pb .pbnr{
	align-self:end;
	text-align:right;
}

/* defaults 
------------------------------------------------------- */

/*because we don't write out all section headings as the same level */

#pb h3,
#pb h2 {
	font-size: 1.5em;
	margin-bottom: 1em;
	color: var(--bottom-panel-text-color);
}

#pb p {
	color: var(--bottom-panel-text-color);
}

#pb a {}

#pb ul {
	padding: 0;
}

#pb ul li {
	list-style: none;
	color: var(--bottom-panel-text-color);
}

/*old stuff we don't want written out*/

#pb li.pipe {
	display: none;
}

ul.inline,
ul.socials,
ul.contacts {
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

ul.inline li {
	display: inline-block;
	padding-right: .5em;
}

/* -------------------------------------------------------------------------------------
=FIXEDBottom Panel
------------------------------------------------------------------------------------- */

#pbf {
	width: 100%;
	min-width: 1200px;
	display: flow-root;
	background-color: var(--bottom-bar-color);
	color: var(--bottom-bar-text-color);

		border-bottom:1px solid var(--border-color-light);
	margin:1em 0;
		        -webkit-box-shadow: 2px 2px 2px 2px rgba(96,94,93,0.75);
    -moz-box-shadow: 2px 2px 2px 2px rgba(96,94,93,0.75);
    box-shadow: 2px 2px 2px 2px rgba(96,94,93,0.75);
}

#pbf .ext {
	padding:var(--half-spacing)
}

/* cookie popup
------------------------------------------------------- */
#pbf .cookie {
	position: fixed;
	bottom: 0%;
	left: 0%;
	width: 100%;
	z-index: 1000;
	background: var(--bottom-bar-color);
	text-align: center;
}

#pbf .cookie p {
	margin: 0 auto;
	float: none;
	color: var(--bottom-bar-text-color);
	padding: .5em 0
}

#pbf .cookie p a {
	float: none;
	color: var(--bottom-bar-text-color);
	text-decoration: underline;
	padding: 0 5px
}

#pbf .cookie img {
	float: none;
	display: inline-block;
	vertical-align: middle;
	margin-left: 10px
}

#pbf .cookie img:hover {
	cursor: pointer
}

/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
#pbf .etailcopy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	color: var(--bottom-bar-text-color);
}

#pbf .info,
#pbf .fullWidth {
	display: block;
	text-align: center;
}

#pbf .info li {
	display: inline-block;
	margin: .5em;
}

/* note to use grid layout */
p.etail {
	font-size: .725em;
	text-align: right;
	color: var(--bottom-bar-text-color);
		margin:0;
}

p.etail  a{
	color:var(--red);
}
p.copy {
	font-size: .725em;
	display: inline-block;
	margin-right: 1em;
	color: var(--bottom-bar-text-color);
	margin:0;
}
p.copy span {}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=COMS COMPONENTS 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb {
	margin: var(--spacing) auto;
	padding: 0;
	text-align: center;
	max-width: 1200px;
}

.home .bdcb {
	display: none;
}

.bdcb .bc {
	margin: auto;
}

.crumb {
	display: block;
	text-align: left;
	margin: 0 var(--half-spacing);
}

.bdcb ul li {
	list-style: none;
	display: inline-block;
	margin: 0;
}

.bdcb li a {
	font-family: var(--text-font);
	font-size: .825em;
	font-weight: normal;
	padding: 0;
	margin: 0;
	display: inline-block;
}

/*active page */
.bdcb li a h1,
.bdcb li h1 {
	font-size:1em;
}

/*for the break between the crumb*/
.bdcb li:after {
	display:inline-block;
	vertical-align:middle;
	font-family: var(--font-awesome);
	font-weight: 600;
	font-size: .25em;

	content:"\f111";

	margin: 2em;
}

.bdcb li:last-child:after {
	content: "";
	margin: 0;
	display: none;
}

.bdcb span {
	display: inline-block;
	margin: 0;
}

.bdcb h1 {}
/* -------------------------------------------------------------------------------------
=DepartmentTree / Menu
------------------------------------------------------------------------------------- */

#pc .dept {
	grid-area: dept;
	display: block;
	position: relative;
	text-align: center;
}

#pc .dept .bt,
#pc .dept .bb {
	display: none;
}

#pc .dept .bc {
	text-align: center;
	margin: auto;
	border-top: 3px solid var(--dark-grey);
	border-bottom: 3px solid var(--dark-grey);
}

#jnav {
	width: 1200px;
	padding: 0;
	margin: auto;
	list-style-type: none;
	list-style-position: outside;
	position: relative;
	z-index: 1001;
	font-family: var(--heading-font);
	text-transform: uppercase;

	border-top: 1px solid #acacac;
	border-bottom: 1px solid #acacac;
	margin: 2px auto;
}

#jnav li.nav,
#jnav li.navcurr {
	/*use if not full width menu */
	/* position:relative; */
	display: inline-block;
	vertical-align: middle;
	transition: background-color 0.5s ease;
}

#pc .dept ul#jnav li:after{
	font-family: var(--font-awesome);
	font-weight: 600;
	margin-right: .5em;
	font-size: .25em;

	content:"\f111";
	display:inline-block;
	vertical-align:middle;
}

#pc .dept ul#jnav:hover li:after{
	color:#282828;
}
#pc .dept ul#jnav li.depts:after,
#pc .dept ul#jnav li:last-child:after{
	content:'';
	margin-right:0;
}

#jnav li.navcurr ul.snav {}

#jnav li {
	margin: 0;
}

#jnav li.pipe {}

/* Tabs
------------------------------------------------------- */
#jnav li.nav a,
#jnav li.navcurr a {
	display: inline-block;
	padding: var(--half-spacing) ;
	color: var(--navbar-heading-color);
	text-transform: capitalize;
}

#jnav li.nav:hover,
#jnav li.navcurr:hover {
	color: var(--text-color);
}

#jnav li.nav a:hover,
#jnav li.navcurr a:hover {}

#jnav .navleft,
#jnav .navright,
#jnav .navleftcurr,
#jnav .navrightcurr {
	display: none;
}

/* Dropdown
------------------------------------------------------- */
#jnav li.nav ul.snav,
#jnav li.navcurr ul.snav {
	position: absolute;
	left: 0;
	z-index: 1000001;
	font-family: inherit;
	background-color: var(--nav-dropdown-color);
	text-align: left;
	display: none;
	/* needed for ie11 display issues, does mean that the dropdown won't display but at least it isn't in permanent view... something to do with visibility not being applied by javascript */
	padding: var(--half-spacing);
	margin: 0;
	border: 1px solid var(--nav-dropdown-color);
	width: calc(100% - 1px - 1em);
	border-top: 0;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

/*last menu items should be from the left*/
#jnav li.nav:last-child ul.snav,
#jnav li.navcurr:last-child ul.snav {
	right: 0;
}

#jnav li.nav ul.snav li,
#jnav li.navcurr ul.snav li {
	display: grid;
	grid-template-columns: 1fr;
	align-items: center;
	margin-bottom: var(--spacing);
	grid-template-areas: "title";
	grid-column-gap: var(--half-spacing)
}

#jnav li.nav ul.snav li:last-child,
#jnav li.navcurr ul.snav li:last-child {
	margin-bottom: 0;
}

#jnav li.nav ul.snav li a,
#jnav li.navcurr ul.snav li a {
	color: var(--nav-text-color);
	padding: 0;
}

#jnav li.nav ul.snav li img,
#jnav li.navcurr ul.snav li img {
	display: block;
	margin:auto;
	max-width:120px;
	max-height: 100px;

}

#jnav li.nav ul.snav li a.deptIcon,
#jnav li.navcurr ul.snav li a.deptIcon {
	grid-area: image;
}

#jnav li.nav ul.snav li a.deptLink,
#jnav li.navcurr ul.snav li a.deptLink {
	grid-area: title;
	color: var(--navbar-link-color);
}

/* all depts menu layout
------------------------------------------------------- */
#jnav li.nav ul.snav li.alldepts,
#jnav li.navcurr ul.snav li.alldepts {
	display: inline-block;
	vertical-align: top;
	padding: 0;
	margin: 0;
	/* full width, margin, product, product border */
	width: calc(100%);
}

#jnav li.nav ul.snav li.alldepts ol.alldepts,
#jnav li.navcurr ul.snav li.alldepts ol.alldepts
{
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: .5em;
}

#jnav li.nav ul.snav li.alldepts li.depts,
#jnav li.navcurr ul.snav li.alldepts li.depts {
	display: grid;
	grid-template-areas:"image"
						"title";
	margin: 0;
	padding: 0px;
	text-align: center;
}

#jnav li.nav ul.snav li.alldepts li.depts .l1,
#jnav li.navcurr ul.snav li.alldepts li.depts .l1 {
	font-weight: var(--text-font-weight);
	padding-bottom: .5rem;
}

#jnav li.nav ul.snav li.alldepts li.depts .l2,
#jnav li.navcurr ul.snav li.alldepts li.depts .l2 {
	text-transform: capitalize;
	font-size: .825em;
	font-weight: var(--text-font-weight);
	padding-bottom: .725rem;
}

/* Menu Featured Product 
------------------------------------------------------- */
#jnav li.nav ul.snav li.prods,
#jnav li.navcurr ul.snav li.prods {}


/* Menu Featured Article 
------------------------------------------------------- */
#jnav li.nav ul.snav li.arts,
#jnav li.navcurr ul.snav li.arts {}



/* -------------------------------------------------------------------------------------
=OwlCarousel
------------------------------------------------------------------------------------- */

/* Basic Carousels
-------------------------------------------------------*/
.carousel {
	position: relative;
	/*these are needed to prevent firefox messing things up - otherwise we need to use specific sizes for grid layouts */
	max-width: 100%;
	grid-column: 1/-1;
}

.owl-stage-outer {}

/* this should be the title for the carousel */
.carousel h2 {}

.carousel:hover {
	cursor: -moz-grab;
	cursor: -webkit-grab;
	cursor: grab;
}

.noNav .owl-controls {
	display: none;
}

.owl-controls {
	text-align: center;
}

.owl-nav {}

.owl-dot {
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

.owl-dot span {
	display: inline-block;
	vertical-align: top;
	width: 0.825em;
	height: .825em;
	margin: .5em;
	border-radius: 50%;
}

.owl-dot.active span,
.owl-dot:hover span {}

.owl-theme .owl-controls {
	position: absolute;
	top: 0%;
	left: 0%;
	width: 100%;
	height: 100%;
	pointer-events: none;
}

.owl-theme .owl-nav {
	text-align: center;
	-webkit-tap-highlight-color: transparent;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {
	position: absolute;
	font-size: 2em;
	font-weight: var(--button-font-weight);
	font-family: var(--heading-font);
	margin: .25rem;
	padding: .5rem;
	background: var(--button-color);
	display: block;
	cursor: pointer;
	color: var(--background-color);
	opacity: .8;
	pointer-events: auto;
}

.owl-prev {
	top: calc(50% - 1em);
	left: 0em;
}

.owl-next {
	top: calc(50% - 1em);
	right: 0em;
}

.owl-nav .owl-prev:hover,
.owl-nav .owl-next:hover {
	text-decoration: none;
	opacity: 1;
}

.owl-carousel .owl-item img {}

/* text overlay stuff - needs a bit more tweeking in coms */
.carousel .imgcont {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	align-items: center;
}

/*first statement is to cover lack of css class being applied */
.carousel .imgcont div,
.carousel .slideCont {
	grid-row: 1;
	grid-column: 1;
	display: inline-block;
	vertical-align: middle;
	text-align: center;
	background-clip: content-box;
	margin: auto;
	min-width: 25%;
}

.carousel .imgcont div h2,
.carousel .slideCont h2 {
	font-size: 3em;
	padding: 0;
}

.carousel .imgcont div h3,
.carousel .slideCont h3 {
	color: var(--text-sub-heading-color);
}

.carousel .imgcont div p,
.carousel .slideCont p {
	width: auto;
	margin: .5em;
}

.carousel .imgcont div .btn,
.carousel .slideCont .btn {
	border: 1px var(--border-color) solid;
	margin: 1em;
}

/* Product Carousels
-------------------------------------------------------*/
/* the layout is different so need to undo some of the default settings and re-order */
/* even MORE irritating is the fact that this is done differently for carousels on the product page! */
.carousel .fprd {
	/* display: grid; */
	grid-template-columns: 1fr 1fr 1fr;
	/* try using template-rows to get stuff to line up rather than min height on titles */
	grid-template-rows: auto 3em auto auto;
	align-items: center;
	position: relative;
}

.home .carousel .fprd {
	display: block;
}

/* mini hack for the fact that we aren't consistent in how we write out product info !*/
.home .carousel .fprd .bt,
.home .carousel .fprd .bb {}

.carousel .fprd .prevprice {
	/* due to the carousel dictating the width of the container this may not fit! */
}

/* flags */
.carousel .piflags,
.carousel .flag {
	grid-row: 1;
	grid-column: 1/4;
	text-align: left;
	vertical-align: top;
	align-items: start;
	align-self: start;
	box-shadow: none;
	border: none;
}

.carousel .piflags img,
.carousel .flag img {
	width: auto;
	height: auto;
}


/* -------------------------------------------------------------------------------------
=Newsletter 
------------------------------------------------------------------------------------- */
#pf .ext .news {
	grid-area: news;
	margin: 1rem;
}

#pf .ext .news .bt h3 {
	color: var(--white)
}

#pf .ext .news form {
	margin-bottom: 0;
}

.news {
	grid-column: 1/-1;
	text-align: center;
	padding: var(--spacing);
	align-self: center;
}

.news label {
	display: none;
}

.news input {
	display: inline-block;
	margin: 0 .5rem;
}

.news_input_container {
	display: inline-block;
}

/* -------------------------------------------------------------------------------------
=Accordion 
------------------------------------------------------------------------------------- */

ul.accordion {}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	border-top: 2px solid var(--border-color);
	font-size: 1.2em;
	margin: 0;
	position: relative;
	cursor: pointer;
	padding: var(--spacing);
}

.accordion .header img {
	position: absolute;
	right: 1em;
	top: .75em;
	width: 1em;
	cursor: pointer;
}

.accordion .header .showplus {}

.accordion .header .showminus {
	display: none;
}

.accordion .header.current .showplus {
	display: none;
}

.accordion .header.current .showminus {
	display: block;
}

li.subhead {}

/* Panes
------------------------------------------------------- */
#pm ul.accordion li.pane.first {}
#pm ul.accordion li.pane {}
#pm ul.accordion li.pane p {}

#pm ul.accordion li.pane ul {
	list-style-type: disc;
	margin-left: 1em;
}

#pm ul.accordion li.pane li {}

#pm ul li.title {}


/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
#site.blog #pm>.bc {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: var(--spacing);
}

/* correct the breadcrumb */
#site.blog #pm .bc .bdcb {
	grid-column: 1/-1;
}

/* correct the main title for the blog page/post */
#site.blog #pm .bc h2 {
	grid-column: 1/-1;
}

/*layout for the individual blog listings */
#site.blog #pm .bc .blog {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 5em auto auto;
	grid-template-areas: "image" "title" "date" "desc" "read";
	grid-gap: var(--half-spacing);
	padding-bottom: var(--half-spacing);
	background-color: var(--panel-color);
	align-items: start;
}

#site.blog #pm .blog a.img {
	grid-area: image;
	display: block;
}

#site.blog #pm .blog a.img img {
	display: block;
	width: 100% !important;
	height: auto !important;
}

#site.blog #pm .blog a.title {
	grid-area: title;
	font-family: var(--heading-font);
	text-align: center;
	padding: 0 var(--half-spacing);
	color: var(--fprd-title-color);
	font-size: 1.5em;
}

#site.blog #pm .blog p.date {
	grid-area: date;
	color: var(--text-sub-heading-color);
	margin: 0;
	text-align: center;
	font-size: .725em;
}

#site.blog #pm .blog .artp {
	grid-area: desc;
	padding: 0 var(--half-spacing);
	font-size: .825em;
}

#site.blog #pm .blog a.more {
	grid-area: read;
	margin: auto;
	font-size: 1em;
	padding: var(--spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px var(--button-border-color) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition)
}

#site.blog #pm .art {
	grid-column: 1/-1;
}

#site.blog #pm .art .bc h2 {}

#site.blog #pm .art .bc .artp {}

#site.blog #pm .art .bc .artp h3 {}

#site.blog #pm .blogBtns,
#site.blog #pm .blogPageBtns {
	grid-column: 1/-1;
}

#site.blog #pm .blogBtns a,
#site.blog #pm .blogPageBtns a {
	text-align: center;
	cursor: pointer;
	font-family: var(--heading-font);
	border: 1px var(--border-color) solid;
	outline: none;
	color: #fff;
	font-weight: var(--heading-font-weight);
	display: inline-block;
	margin: auto;
	vertical-align: middle;
}

#site.blog #pm .blogBtns a.prev,
#site.blog #pm .blogPageBtns a.prev {}

#site.blog #pm .blogBtns a.next,
#site.blog #pm .blogPageBtns a.next {}

/* -------------------------------------------------------------------------------------
=Store Locator 
------------------------------------------------------------------------------------- */
.gm-style div div {
	/*max-width: 360px;*/
	/*not sure what this is for */
}

#storelocator {}
#storelocator #storesearchform {}
#storelocator #storesearchform label {}
#storelocator input#searchpostcode {}
#storelocator input.submit {}
#storelocator #searchresults {}
#storelocator #searchresults ol li {}


/* -------------------------------------------------------------------------------------
=HoverBasket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	border: 2px solid var(--red);
	border-radius: var(--border-radius);
	width: calc(250px - 1em);
	padding: var(--spacing);
	z-index: 999999;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
	background-color: var(--white);
}

.hoverbskt h3 {
	display: none;
}

.hoverbskt .lines .item:last-child {}

.hoverbskt .formupdate {}

.hoverbskt .formupdate input {}

.hoverbskt .formupdate input.submitQtyChange {}

.hoverbskt a,
.hoverbsktadd a,
.hoverbskt p,
.hoverbsktadd p {
	font-size: 0.825em;
	margin: 0;
}

.hoverbsktadd p.descr {
	display: none;
}

.hoverbskt .lines {
	max-height: 260px;
	overflow-y: auto;
	border-bottom: 1px solid var(--border-color-light);
	padding-bottom: var(--half-spacing);
	margin-bottom: var(--spacing);
}

.hoverbskt .lines .item {
	display: grid;
	grid-template-columns: 48px 1fr 16px;
	grid-template-areas: "image title title"
						 "image quantity quantity";
	grid-column-gap: .5em;
	padding-right: .5em;
	margin-bottom: .5rem;
}

.hoverbskt .lines .item a.title,
.hoverbskt .lines .item p.sample {
	font-weight: var(--heading-font-weight);
	text-align: left;
	grid-area: title;
}

.hoverbskt .lines .item img {
	aspect-ratio: 1 / 1;
	width: 100%;
	object-fit: contain;
	grid-area: image;
	margin: 0 !important;
}

.hoverbskt .lines .item p.price {
	grid-area: price;
	display: none;
}

.hoverbskt .lines .item p.descr {
	grid-area: description;
	display: none;
}

.hoverbskt .lines .item p.qty {
	grid-area: quantity;
	text-align: left;
}

.hoverbskt h4.count,
.hoverbskt h4.total {
	padding: 0;
	margin: 0;
	font-size: 0.825em;
	text-align: left;
	display: block;
	width: 50%;
	text-transform: capitalize;
	color: var(--text-color);
	font-weight: var(--heading-font-weight);
}

.hoverbskt a.btn {
	display: inline-block;
	padding: var(--spacing) var(--spacing);
	background-color: var(--red);
	border: 1px var(--red) solid;
	position: absolute;
	right: 1em;
	bottom: 1em;
}


/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */

.ui-helper-hidden-accessible {
	display: none;
}

.ui-widget.ui-widget-content.ui-autocomplete {
	width: 275px !important;
	margin: auto;
	padding: 0;
	z-index: 999999 !important;
	border-radius: 0;
	max-height: 332px;
	overflow-x: hidden;
	overflow-y: scroll;
	border: 1px solid var(--border-color);
	z-index: 2000;
	background-color: var(--white)
}

.ui-autocomplete li.ui-menu-item {
	cursor: pointer;
	margin: 0;
	display: block;
}

.ui-menu-item a {
	display: grid;
	grid-template-columns: 32px 1fr;
	padding: var(--half-spacing);
	grid-template-areas: "image title";
	grid-gap: var(--spacing);
}

.foundProduct {
	grid-area: image;
}

.foundProduct img {}

.foundProductTitle {
	grid-area: title;
}

.foundProductRef {
	display: none;
}

.foundProductDesc {
	display: none;
}

.ui-autocomplete li {
	list-style: none;
}

.ui-autocomplete li:hover {}

.ui-menu .ui-menu-item a.ui-state-focus,
.ui-menu .ui-menu-item a.ui-state-active {
	margin: 0;
	border-radius: 0;
	border: none;
	outline: none;
}

.ui-menu-item a.ui-state-active {}

.ui-autocomplete mark {}

/* -------------------------------------------------------------------------------------
=Email when back in stock EWIS 
------------------------------------------------------------------------------------- */

/* take care as the html markup that writes this thing out is a bit borked! */

#ewis h3 {
	font-weight: var(--heading-font-weight);
}

#ewis label {
	color: var(--text-heading-color);
}

.fprd .ewis {
	grid-column: 1/-1;
	align-self: end;
}

a.lnk.ewisopen,
a.lnk.ewis {
	display: block;
	height: auto;
	background-color: var(--button-color);
	font-family: var(--button-font);
	color: var(--button-text-color);
	border-radius: var(--border-radius);
	border: 2px solid var(--button-border-color);
	padding: var(--spacing);
	text-align: center;
	text-transform: capitalize;
}

.lnk.ewisopen:hover {
	text-decoration: none;
	background-color: var(--button-hover-color);
	border-color: var(--button-hover-color);
}

/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */

.hoverbsktadd,
#popupdialog {
	position: fixed;
	top: 30%;
	left: 30%;
	width: calc(40% - 1em);
	padding: 1em .5em;
	z-index: 2000;
	border: 1px solid var(--border-color);
	background-color: var(--popout-color);
	display: none;
	text-align: center;
	-webkit-box-shadow: var(--box-shadow);
	-moz-box-shadow: var(--box-shadow);
	box-shadow: var(--box-shadow);
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-gap: .5em;
	margin-bottom: var(--spacing)
}

.hoverbsktadd .item img,
#popupdialog .item img {
	grid-column: 1/-1;
	grid-row: 1;
	align-self: center;
	margin: auto;
}

.hoverbsktadd h3,
#popupdialog h3 {
	font-size: 1em;
	margin-bottom: 1em;
}

.hoverbsktadd a,
#popupdialog a {}

.hoverbsktadd .item a.title,
#popupdialog .item .title {
	font-family: var(--heading-font);
	color: var(--text-heading-color);
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
	grid-column: 1/-1;
	grid-row: 2;
	text-align: center;
}

.hoverbsktadd .item p.qty,
#popupdialog .item p.qty {
	grid-column: 1;
	grid-row: 3;
	text-align: right;
}

.hoverbsktadd .item p.price,
#popupdialog .item p.price {
	grid-column: 2;
	grid-row: 3;
	text-align: left;
}

/* this element needs a class */
.hoverbsktadd a[title="Checkout"],
.hoverbsktadd .item+a {
	font-size: 1em;
	padding: var(--spacing);
	text-align: center;
	cursor: pointer;
	font-family: var(--button-font);
	text-transform: capitalize;
	background-color: var(--button-color);
	color: var(--button-text-color);
	border: 1px var(--button-border-color) solid;
	outline: none;
	display: inline-block;
	vertical-align: middle;
	transition: var(--transition);
	border-radius: var(--border-radius);
}

.hoverbsktadd a[title="Checkout"]:hover {}

#popupdialog .useraccount {}

#popupdialog .useraccount input {}

#popupdialog .useraccount a {}

/* Out of Stock, Direct Despatch
------------------------------------------------------- */
.ui-dialog.outofstockdialog,
.ui-dialog.directdespatchdialog {
	width: 500px !important;
	text-align: center;
}

.ui-dialog.outofstockdialog .outofstockpopup,
.ui-dialog.directdespatchdialog .directdespatchpopup-pane {
	border: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosheader,
.ui-dialog.directdespatchdialog .ui-widget-header {
	padding: 0 0 1em 0;
}

.ui-dialog.directdespatchdialog .ui-widget-header {
	display: none;
}

.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {
	display: none;
}

.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}

.ui-dialog.outofstockdialog .ui-dialog-titlebar {
	display: none;
}

.ui-dialog.outofstockdialog .ui-widget-content,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane {
	background: transparent;
	border: none;
	margin-top: 0;
	text-align: center;
	padding: 0;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {
	float: none;
}

.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {
	outline: none;
	border-radius: 0;
	border: none;
	margin: .5em;
}

.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {}

.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}

#directdespatchpopup-pane span.ddproduct {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.ddmessage {}

.ddmessage span.dddatemessage {}

.ddmessage span.dddate {
	display: block;
	margin-top: 1em;
	font-size: 1.2em;
}


/* --------------------------------------------------------------------------------------------------------------------------------------------------------------------------
=DEPARTMENT PAGES 
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=SearchHeader / SearchFooter 
------------------------------------------------------------------------------------- */
.deptwrap {}

.searchheader {
	padding: .5em;
}

.searchfooter {
	padding: .5em;
	text-align: center;
	margin: 1em 0;
}

.searchheader .bc,
.searchfooter .bc {
	display: grid;
	grid-template-columns: auto auto auto 1fr;
	grid-gap: 1em;
	align-items: center;
}

.searchheader label,
.searchfooter label {
	display: none;
}

/* results found */
.searchheader h5#rescou {
	margin: 0;
	display: none;
}

/* sort by */
.searchheader #sorpan,
.searchheader form[name="dispord"] {
	margin: 0;
}

/* results per page */
.searchheader #rpppan,
.searchheader .rpp {
	margin: 0;
}

.searchheader .search {
	/* for unknown reasons we re-write out the searchbox in the search header*/
	display: none !important;
}

.searchheader .paging {
	text-align: right;
}

/*writing out "page" is a little daft */
.searchheader .paging label,
.searchfooter .paging label {
	display: none;
}

.searchheader .paging span,
.searchheader .paging a,
.searchfooter .paging span,
.searchfooter .paging a {
	font-size: 1em;
	display: inline-block;
	margin-right: .5em;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	padding: var(--spacing);
}

.searchheader .paging span:last-child,
.searchheader .paging a:last-child,
.searchfooter .paging span:last-child,
.searchfooter .paging a:last-child {
	margin-right: 0;
}

.searchheader .paging a,
.searchfooter .paging a {}

/*this should be the current page */
.searchheader .paging span,
.searchfooter .paging span {}

.currpg {
	font-weight: var(--heading-font-weight);
}

.searchheader .search input#searchbox {}

.searchheader .search input.submit {}

.searchheader label[for="rpp"] {}

.searchfooter .paging {}

#sr {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	position: relative;
	margin-top: 1em;
}

.pmwide #sr {
	grid-template-columns: repeat(4, 1fr);
}

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
.filter {
	border: 1px var(--bgColor) solid;
}

#pl .filter .bc .ContainerPanel .Content .showmore {
	cursor: pointer;
}

.filter .bt {
	background-repeat: no-repeat;
	width: 100%;
}

.filter .bt h3 {
	display: inline-table;
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1em;
}

.HeaderContent h5 {
	font-size: 1em;
}

.collapsed h5 {}

.collapsed h5:hover {}

.items {}

.citem {
	color: var(--textColor);
	padding: .5em;
	margin: 0;
	cursor: pointer;
}

.citem:before {
	font-family: var(--font-awesome);
	font-size: 1em;
	display: inline-block;
	content: '\f0c8';
}

.citemselected:before {
	font-family: var(--font-awesome);
	font-size: 1em;
	display: inline-block;
	content: '\f14a';
}

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected {}

.citemselected:hover {}

#divPriceRangeDisplay {
	text-align: center;
	padding: .5rem;
}

#sldiv {
	margin: 1em;
}

#resetfs {
	display: none;
}

#resetfs h5 {
	text-transform: uppercase;
	cursor: pointer;
}

/* price slider 
------------------------------------------------------- */
div[sectiontype="priceslider"] {
	margin-bottom: 1em;
	border: 1px var(--border-color) solid;
	border-radius: var(--border-radius);
}

.longattrsection .items {
	overflow-x: hidden;
	-ms-overflow-x: scroll;
	margin-bottom: 1rem;
}

.attrsection {
	margin-bottom: 1rem;
	border: 1px var(--border-color) solid;
	border-radius: var(--border-radius);
}

.filter .HeaderContent {
	padding: var(--spacing);
	position: relative;
	cursor: pointer;
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1em;
}

.HeaderContent:after {
	content: '\f068';
	font-family: var(--font-awesome);
	font-size: 1em;
}

.HeaderContent.collapsed:after {
	content: '\f067';
}

.HeaderContent h5 {
	margin: 0;
	font-size: 1em;
	padding: 0;
	position: relative;
	cursor: pointer;
}

.collapsed h5 {}

.collapsed h5:hover {}

.items {
	margin: .5em 0
}

.citem {
	padding: var(--spacing);
	margin: 0;
	cursor: pointer;
	text-align: left;
}

.citem::before,
.citemselected::before {
	font-family: var(--font-awesome);
	margin-right: .5em;
	font-size: 1em;
	display: inline-block;
}

.citem::before {
	content: '\f0c8';
}

.citemselected::before {
	content: '\f14a';
}

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected:hover {}

#divPriceRangeDisplay {
	text-align: center;
	padding: var(--spacing);
}

#sldiv {
	margin: 1em;
}

/* filter clear/reset 
/*should have a nicer way of doing this
------------------------------------------------------- */
#resetfs {
	padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
	outline: none;
	background-color: var(--background-color);
	font-weight: var(--font-weight);
	font-size: .725rem;
	line-height: var(--line-height);
	text-align: center;
	cursor: pointer;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
	display: block;
	margin-bottom: 1em;
}

#resetfs h5 {
	font-size: small;
	font-weight: normal;
	margin: 0;
}

/* -------------------------------------------------------------------------------------
=Deptsingle  
------------------------------------------------------------------------------------- */
.deptsingle {
	grid-column: span 4;
	position: relative;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.deptsingle a,
.deptsingle a img {
	display: block;
}

/*when a class is applied on the article text it is also applied to the image */
.deptsingle a.imglnk+a {
	background-color: var(--light-grey-alpha);
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	transition: var(--transition);
}

.deptsingle a.txt,
.deptsingle a.imglnk+a {
	/* class doesn't exist so having to fork things in place */
	font-family: var(--heading-font);
	font-size: 1.25em;
	font-weight: var(--heading-font-weight);
	color: var(--red);
}

.deptsingle a.imglnk+a:hover {
	background-color: var(--red-alpha);
	color: white;
	font-size: 1.5em;
}

.deptsingle a.imglnk,
.deptsingle a.txt {
	/*remove transition effect on text */
	transition: none;
}

.deptsingle a.imglnk,
.deptsingle a.txt,
.deptsingle a {}


/* -------------------------------------------------------------------------------------
=Subdepartment tree  
------------------------------------------------------------------------------------- */

.depttree {
	display: block;
}

/* dept title
------------------------------------------------------- */
.depttree>.bt h3 {
	display: none;
}

.depttree h4.tagline {
	font-size: 1.5em;
	color: var(--red);
	margin-bottom: 1rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.depttree ul {
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: 1em;
	display: grid;
	align-items: start;
	grid-gap: 1em;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	margin: var(--spacing) 0;
	padding: 0;
}

.depttree li {
	display: block;
	position: relative;
	border-radius: var(--border-radius);
	border: 1px solid var(--border-color);
}

.depttree li a.img {
	display: block;
}

.depttree li img {
	display: block;

	margin: auto !important;
	max-
}

.depttree a.txt {
	background-color: var(--light-grey-alpha);
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-content: center;
	flex-direction: column;
	transition: var(--transition);
	font-family: var(--heading-font);
	font-size: 1.25em;
	font-weight: var(--heading-font-weight);
	color: var(--red);
}

.depttree a.txt:hover {
	background-color: var(--red-alpha);
	color: white;
}

.depttree a.btn {}

.depttree p {}

/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */

/* Base settings
------------------------------------------------------- */

#deptlist .fprdcont,
#searchlist .fprdcont {}

/* lets use grid layouts cos they are awesome! */

.fprd {
	position: relative;
}

.fprd:hover {}

/* unfortunately there are cases where a .bc is present inside .fprd 
department listing page uses a .bc*/

.fprd .bc {
	padding-bottom: var(--spacing);
	border:1px solid var(--border-color-light);
	padding:var(--half-spacing);
	display: grid;
	grid-row-gap: var(--half-spacing);
	grid-template-columns: 1fr 1fr 1fr; 
	grid-template-rows: auto var(--fprd-title-height) auto;
	/*use grid template areas */
	grid-template-areas:
		"image image image"
		"title title title"
		"model-number model-number model-number"
		"selling-price selling-price fprdinfo"
}

/* reset margins and paddings */
.fprd p,
.fprd h3,
.fprd h4,
.fprd h5 {
	margin: 0;
	padding: 0;
}

/* image 
------------------------------------------------------- */
.fprd .fprdimg {
	grid-area: image;
	position: relative;
	align-items: center;
	overflow: hidden;
}

.fprd .fprdimg a {
	display: block;
	text-align: center;
}

.fprd .fprdimg img {
	margin: 0px !important;
}

.fprd .fprdimg img:hover {}

/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title{
	grid-area: title;
	font-size: 1em;
	/* font-weight: var(--heading-font-weight); */
	text-transform: capitalize;
}

#sr.listview .fprd .fprdtitle {
	height: auto;
	text-align: left;
}

.fprd .fprdtitle a.lnk,
.fprd a.title {
	font-family: var(--heading-font)
}

.fprd .strap {
	grid-area: strap;
	display: none;
}

.fprd .strap a {}

/* pricing structure
------------------------------------------------------- */
.fprd h6 {
	margin: 0;
	padding: 0;
}

.fprd h6 span {
	font-size: small;
	display: block;
	color: var(--text-sub-heading-color);
}

.fprd label {
	margin: 0;
	padding: 0;
	font-size: small;
}

.fprd .rrp {
	grid-area: prev-price;
	--font-size: small;
	text-align: left;
}

.fprd .rrp label {}
.fprd .rrp h6 {}

/* if rrp is showing then don't show prev-price as its redundant here */
.fprd .rrp+.prevprice {
	display: none;
}
.fprd .prevprice {
	display: none;
}
.fprd .prevprice label {}

.fprd .prevprice h6 {
	text-decoration: line-through;
}

.fprd .price {
	grid-area: selling-price;
}
.fprd .price label {
	color: var(--text-sub-heading-color);
	display:none;
}
.fprd .price h6 {
	font-size: 1.5em;
}
.fprd .price h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

.fprd .trade {
	grid-area: selling-price;
	text-align: center;
}

.fprd .trade label {}
.fprd .trade h6 {}
.fprd .offer {
	grid-area: selling-price;
	text-align: right;
	padding-right: .5rem;
}

.fprd .offer label {
	display: none;
}
.fprd .offer h6 {
	font-size: 1.5em
}
.fprd .offer h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

.fprd .saving {
	position: absolute;
	top: .25em;
	right: .25em;
	padding: 1em;
	background-color: var(--green);
	border-radius: 100%;
	text-align: center;
	color: var(--white);
}

.fprd .saving label {}
.fprd .saving h6 {
	color: var(--white);
}

/* pricebreaks 
------------------------------------------------------- */
.pricebreak {}


/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {
	grid-area: unit-price;
	padding-left: .5rem;
	display: none;
}

.fprd .packsize {
	grid-area: packsize;
	text-align: left;
}

.fprd .packsize p {
	font-size: .725em;
}

.fprd .unit label {
	color: var(--text-sub-heading-color);
}

.fprd .unit h6 {}

.fprd .unit h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

.fprd .qty {
	grid-area: carton;
	text-align: center;
	display: none;
}

.fprd .qty label {
	color: var(--text-sub-heading-color);
}


.fprd .qty h6 span {
	display: block;
	color: var(--text-sub-heading-color);
	font-size: small;
	font-weight: normal;
	font-family: var(--text-font);
}

/* clientref/model code
------------------------------------------------------- */
.fprd .clientref span {}

.fprd .model,
.fprd .clientref {
	margin: 0;
	font-weight: var(--heading-font-weight);
	font-size: small
}

.fprd .model span,
.fprd .clientref span {
	font-size: small;
	display: block;
	font-weight: var(--text-font-weight);
}

.fprd .clientref {
	grid-area: client-ref;
	/* padding: 0 .5rem; */
	font-size: .725em;
	text-align: left;
}

.fprd .model {
	grid-area: model-number
}

/* flags
------------------------------------------------------- */
/* piflags are product specific flags, like made in uk, our top pick etc */
.piflags {}

/*flags may exist either within the image or as a separate element, position accordingly */
.fprdimg .piflags {
	position: absolute;
	top: 0;
}

.fprd .piflags ul {
	margin: 0;
	padding: 0;
}

.piflags ul li {
	list-style: none;
	margin: 0;
}

.fprd .piflags img {
	width: auto;
}

/* flag could be any auto sys flag like no stock, offer etc */
.fprd .flag {
	display: none;
}

/* again... these flags may exist either within the image or as a separate element, position accordingly */
.fprdimg .flag {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	max-width: 50%;
}

.flag.prdel {}

.flag.offer {}

.flag.newin {}

.flag.stkout {}

.flag img {
	width: auto;
}

/* quantity in basket - CAUTION not shown everywhere... 
------------------------------------------------------- */
.qtyInBskt {
	display: none;
}

/* more info and quickview button 
------------------------------------------------------- */
.fprdinfo {
	grid-area:fprdinfo;
}

.fprd:hover .fprdinfo {
	visibility: visible;
	opacity: 1;
}

.fprdinfo a.btn,
.fprd a.btn {
}

.fprdinfo a.btn:hover,
.fprd a.btn:hover {
	text-decoration: none;
}

/* quick view */

.fprd a.btn.qkvw {
	display: inline-block;
	pointer-events: all;
}

.fprd:hover a.qkvw {}

.fprdinfo a.qkvw:hover {}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-area: buy-pane;
	text-align: center;
	margin: 0;
	/* this won't work with dropdown skus */
	display: grid;
	grid-template-columns: repeat(3, 1fr);
}

.fprd form select {}

.fprd form label {
	/*seems daft to display a label for an input that is obvious*/
	display: none;
}

.fprd button {
	display:inline-block;
	vertical-align:middle;
	border:1px var(--alt-button-color) solid;
	background-color:var(--alt-button-color);
	color:var(--alt-button-text-color);
	font-weight:600;
	padding: .5em .75em;
}

.fprd button.fpskuqtysub {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.fprd form input.inputtext {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
}

.fprd button.fpskuqtyadd {
}

.fprd input.fpskuqty {
	display: inline-block;
	text-align: center;
	border-radius: var(--border-radius);
}

.fprd form input.submit {

		border:1px var(--button-color) solid;
	background-color:var(--button-color);
	color:var(--button-text-color);
}

/* Buy form 
------------------------------------------------------- */

.fprd .ewis {
	grid-area: buy-pane;
	margin: 0;
	padding: 0 .5rem;
}


/* -------------------------------------------------------------------------------------
=ProductPage 
------------------------------------------------------------------------------------- */

#pmid.page_buy {}

#pmid.page_buy #pm.pmfull {}

/* Product Panels 
------------------------------------------------------- */

#pi {
	margin: 0;
	padding: 0;
	margin-bottoM: 4em;
}

/* Grid template area definitions;

product-image
product-title
product-price
product-strapline
product-clientref
product-description
product-video
product-bullets
product-tabbed-description
product-additional-description-tab
product-model
product-brand
product-gtin
product-outer
product-manufacturer
product-buy-pane
product-leadtime 
product-delivery
product-piflags
product-links
product-flags
product-file
product-recommended 
product-associated
product-bought-together
product-related
product-departments

/*choice here to use a single panel for all content and sort layout using grid-template-area */

#pi .top>.bc {
	display: grid;
	/*must use fixed widths due to carousel overflow */
	grid-template-columns: 300px 788px;
	grid-column-gap:5em;
	grid-row-gap: .5em;
	/*use grid template areas */
	grid-template-areas:
		"product-image product-title"
		"product-image product-brand"
		"product-image product-model"
		"product-image product-buy-pane"
		"gallery currencyselector"
		"product-links . "
		"product-description product-description"
		"product-article product-article"
		"product-related product-related"
		"product-recommended product-recommended"
		"product-associated product-associated"
		"product-departments product-departments";
}

#pi .top>.bc>* {
	min-width: 0px;
}


/* Product Title
------------------------------------------------------- */
#pi .pititle {
	grid-area: product-title;
}

/* Strapline
------------------------------------------------------- */
h4.strap {
	grid-area: product-strapline;
}

/* clientref
------------------------------------------------------- */
#pi .brandmanu.clientref {
	grid-area: product-clientref;
}

#pi .brandmanu.clientref h5,
#pi .brandmanu.clientref h6 {
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: small;
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: block;
	margin-right: var(--half-spacing)
}

#pi .brandmanu.clientref h5 {
	font-weight: var(--heading-font-weight);
}

/* Brand
------------------------------------------------------- */
#pi .brandmanu.brand {
	grid-area: product-brand
}

#pi .brandmanu.brand  img{
	max-height:50px;
	width:auto;

}

#pi .brandmanu.brand h5,
#pi .brandmanu.brand p {
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: small;
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: block;
	margin-right: var(--half-spacing)
}

/* GTIN
------------------------------------------------------- */
#pi .brandmanu.gtin {
	grid-area: product-gtin;
}

#pi .brandmanu.gtin h5,
#pi .brandmanu.gtin h6 {
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: small;
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: inline-block;
	margin-right: var(--half-spacing)
}

/* Model
------------------------------------------------------- */
#pi .brandmanu.model {
	grid-area: product-model;
}

#pi .brandmanu.model h5,
#pi .brandmanu.model h6 {
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: small;
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: inline-block;
	margin-right: var(--half-spacing)
}
#pi .brandmanu.model h5
{
	font-weight:600;
}

/* Manufacturer
------------------------------------------------------- */
#pi .brandmanu.manu {
	grid-area: product-manufacturer;
}

#pi .brandmanu.manu h5,
#pi .brandmanu.manu p {
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: small;
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: block;
	margin-right: var(--half-spacing)
}

#pi .brandmanu.manu h5 {
	font-weight: var(--heading-font-weight);
}

/* outer stock/carton info
------------------------------------------------------- */
#pi .brandmanu.outer {
	grid-area: product-outer;
	display: none;
}

#pi .brandmanu.outer h5,
#pi .brandmanu.outer h6 {
	font-family: var(--text-font);
	color: var(--text-color);
	font-size: small;
	font-weight: normal;
	margin: 0;
	padding: 0;
	display: block;
	margin-right: var(--half-spacing)
}

/* Image (carousel/Main Image Zoom)
------------------------------------------------------- */
#pi .piimg,
#pi .prodimg {
	grid-area: product-image;
}

#productimage {
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	/*remove any borderwidth from width calcuation */
	width: calc(100% - 4px);
}

/*because inline style shoves it 8px from the left! */
#cloud-zoom-big {
	left: 0 !important;
}

/*image hover helper text - no class ! */
#pi .piimg p {
	display: none;
}

/* This is the moving lens square underneath the mouse pointer. Not visible if the zoom window is over the image*/
.cloud-zoom-lens {
	border: 1px solid var(--border-color);
	margin: -1px;
	/* Set this to minus the border thickness. */
	background-color: var(--white);
	cursor: move;
}

/* This is for the title text. */
.cloud-zoom-title {}

/* This is the zoom window. */
.cloud-zoom-big {
	overflow: hidden;
	top: 0;
	left: 0 !important;
	background-color: var(--white);
}

/* This is the loading message. */
.cloud-zoom-loading {
	position: absolute;
	top: 0;
	margin: 0;
	color: var(--white);
	background: #222;
	padding: 3px;
}

/* Gallery
- ideally this won't exist if we use carousel and improve it to do thumbnails too
------------------------------------------------------- */
#pi .gallery {
	grid-area: gallery;
	display: grid;
	grid-template-columns: repeat(4, 120px);
}

#pi .gallery h4 {
	display: none;
}

/* independant price element - not part of the form yay!
------------------------------------------------------- */
#pi .pricecomp {
	grid-area: product-price;
}

#pi .pricecomp .price,
#pi .pricecomp .offer,
#pi .pricecomp .saving,
#pi .pricecomp .rrp,
#pi .pricecomp .prevprice,
#pi .pricecomp .trade {
	display: inline-block;
	margin-right: var(--spacing);
}

#pi .pricecomp label {}

#pi .pricecomp h6 {}

#pi .pricecomp .prevprice h6 {
	font-size: 1em;
	text-decoration: line-through;
}

#pi .pricecomp .offer {}

/* Buy Panel
------------------------------------------------------- */
#pi form.currsel{
	grid-area:currencyselector;
	
}

#pi form.currsel li{
	list-style:none;
}
#pi form.currsel label{
	display:block;
	margin-bottom:1rem;
}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy {
	grid-area: product-buy-pane;
}

#pi .pibuy h6 {}

#pi .pibuy .bt {}

#pi .pibuy .bc {
	display: grid;
	grid-template-columns: repeat(4, auto);
	grid-gap:var(--half-spacing);
	grid-template-areas: "stock stock stock stock"
		"price prev-price  saving ."
		"offer prev-price  saving ."
		"trade-price trade-price . ."
		"buy buy buy buy"
		"save-for-later save-for-later save-for-later save-for-later";
	align-items: start;
}

#pi .pibuy .bb {}

/* for some reasone we always show "price in..." */
#pi .pibuy .title {
	display: none
}

#pi .pibuy h6 {
	font-family: var(--heading-font);
}

/* set defaults */
#pi .pibuy .price,
#pi .pibuy .prevprice,
#pi .pibuy .offer,
#pi .pibuy .rrp,
#pi .pibuy .saving,
#pi .pibuy .trade {
	display: inline-block;
	vertical-align: top;
}

#pi .pibuy .unit {
	margin-top: 1em;
	display: none;
}

#pi .pibuy .price h6,
#pi .pibuy .prevprice h6,
#pi .pibuy .offer h6,
#pi .pibuy .rrp h6,
#pi .pibuy .saving h6,
#pi .pibuy .trade h6,
#pi .pibuy .unit h5 {
	padding: 0;
	margin: 0;
}

#pi .pibuy .price span,
#pi .pibuy .prevprice span,
#pi .pibuy .offer span,
#pi .pibuy .rrp span,
#pi .pibuy .saving span,
#pi .pibuy .trade span,
#pi .pibuy .unit span {
	display: block;
	font-size: x-small
}

/*normal price */
#pi .pibuy .price {
	grid-area: price;
}
#pi .pibuy .price h6 {
	font-size: 2em;
	color: var(--red);
}

#pi .pibuy .price label {
	display:none;
}
#pi .pibuy .price span {}

/*rrp price */
#pi .pibuy .rrp {
	/*for this client rrp is a lease price hack! */
	grid-area: lease;
}
#pi .pibuy .rrp h6 {
	text-decoration: line-through;
	text-decoration-color: var(--red)
}

#pi .pibuy .rrp label {}
#pi .pibuy .rrp span {}

/*offer price */
#pi .pibuy .offer {
	grid-area: offer;
}
#pi .pibuy .offer h6 {
	font-size: 2em;
	color: var(--red)
}

#pi .pibuy .offer label {}
#pi .pibuy .offer span {}

/*previous price (goes with offer) */
#pi .pibuy .prevprice {
	grid-area: prev-price;
}
#pi .pibuy .prevprice h6 {
	text-decoration: line-through;
	text-decoration-color: var(--red)
}
#pi .pibuy .prevprice label {}
#pi .pibuy .prevprice span {}

/*saving  info */
#pi .pibuy .saving {
	grid-area: saving;
	margin-left: .5rem;
}

#pi .pibuy .saving h6 {}
#pi .pibuy .saving label {}
#pi .pibuy .saving span {}

/*trade price */
#pi .pibuy .trade {
	grid-area: trade-price;
}

#pi .pibuy .trade h6 {
	font-size: 2em;
	color: var(--red)
}

#pi .pibuy .trade label {}
#pi .pibuy .trade span {}

/* Messages */
#pi .pibuy p {}
#pi .pibuy p#bspresponse {
	grid-area: bspresponse;
}
#pi .pibuy h4 {}
#pi .pibuy h5 {}
#pi .pibuy p.p_stock {}
#pi .pibuy .qty {
	display: none;
}

/* stock */
#pi .pibuy .stock {
	grid-area: stock;
	font-size:.725em;
	margin:0;
	font-weight: var(--heading-font-weight);
}
#pi .pibuy .stock li {
	list-style: none;
}
#pi .pibuy .stock li.in {
	color: var(--info-color);
}
#pi .pibuy .stock li.in:before {
	content: '\f00c';
	font-family: "Font Awesome 5 Pro";
	margin-right: .5em;
	font-size: 1em;
	color: var(--info-color);
	font-weight: var(--heading-font-weight);
}

/*order cutoff timer? */
#pi .pibuy p.cutoff {
	color: var(--info-color);
}
#pi .pibuy p.cutoff::before {}

/* quantity in basket info */
#pi .pibuy .qtyInBskt {
	display: none;
}

/*dynamic price */
.dynprice {
	grid-column: 3;
	text-align: right;
	font-size: 1.5em;
}

/*save for later? */
#bspsubmit {
	grid-area: save-for-later;
	display: inline-block;
	margin: 0;
	margin-right: auto;
	padding: var(--half-spacing);
	background-color: var(--alt-button-color);
	border-color: var(--alt-button-border-color);
	color: var(--alt-button-text-color);
}

#bspsubmit:hover {
	background-color: var(--alt-button-hover-color);
	border-color: var(--alt-button-border-color);
	color: var(--alt-button-hover-text-color);
}

/* Buy Form
-------------------------------------------------------*/
#buy_form {
	grid-area: buy;
	margin: 0;
}

/* attributes/sku select */
#buy_form .attr {}

#buy_form .attr .attrlabel {
	display: none;
}

.attritem select {
	width: 100%
}

#buy_form select,
#buy_form textarea {}

#buy_form select {
	max-width: 100%;
	margin-bottom: 1em;
}

#pi .pibuy .attrqty {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-template-areas: "qty buy buy sample . ."
}

/* quantity input 
---------------------------*/
#pi .pibuy .attrqty .qtyinput {
	grid-area: qty;
	display: inline-block;
	margin-bottom: 0;
	display: grid;
}

/*increase/decrease buttons */
#pi .pibuy .attrqty .qtyinput button {
	/*doesn't currently seem to be a way of turning these on or of in v5 or v6 */
	display: none;
}

/*hide quantity label*/
#pi .pibuy .attrqty .qtyinput label {
	display: none;
}

.attrqty .qtyinput #skuqty {
	display: inline-block;
	vertical-align: middle;
}

.attrqty .qtyinput #skuqty {
	text-align: center;
	padding: 1em;
	width: auto;
	display: block;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	border-right: none;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	text-align: center
}

#pi .pibuy .attrqty .submit#buy {
	grid-area: buy;
	padding: 1em;
	border-radius: var(--border-radius);
	text-align: center;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	margin-right: 1rem;
}

/*sample request 
---------------------------*/
#pi .pibuy #smplreq {
	grid-area: sample;
}

/* message if no option selected*/
#selectResponse {
	color: var(--errorColor);
	grid-column: 1/-1;
}

/* Descriptions
-------------------------------------------------------*/
#pi .pidesc {
	grid-area: product-description;
}

/*duplicated product title auto written out in the description */
#pi .pidesc h2[itemprop="name"] {
	display: none;
}

/* Product leadtime
-------------------------------------------------------*/
#pi .pidesc.desp {
	grid-area: product-leadtime;
}

/* Product specific delivery info
-------------------------------------------------------*/
#pi .delivery {
	grid-area: product-delivery;
}

/* Bullets
-------------------------------------------------------*/
#pi .bullets {
	grid-area: product-bullets;
}

/* Links
-------------------------------------------------------*/
#pi .pilinks {
	grid-area: product-links;
}

#pi .pilinks li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#pi .pilinks ul li.query a.lnk {
	cursor: pointer;
	display: inline-block;
	vertical-align: middle;
}

#pi .pilinks ul li.query a.lnk:before {
	font-family: var(--font-awesome);
	font-weight: var(--heading-font-weight);
	margin-right: .5em;
	font-size: 1em;
	display: inline-block;
	content: '\f059';
}

/* video
-------------------------------------------------------*/
#pi .youtube {
	grid-area: product-video;
}

#pi .youtube ul {
	margin: 0;
	padding: 0;
}

#pi .youtube ul li {
	margin: 0;
	padding: 0;
	list-style: none;
}

#pi .youtube ul li.title {
	display: block;
	font-family: var(--heading-font);
	text-transform: capitalize;
	font-weight: var(--heading-font-weight);
}

/* responsive iframe */
#pi .youtube ul li.vid {}

/*to sort out the responsive iframe */
.responsive-iframe {
	position: relative;
	overflow: hidden;
	padding-top: 56.25%;
}

.responsive-iframe iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Flags (site flags like offer)
-------------------------------------------------------*/
#pi .flags {
	grid-area: product-flags;
}

#pi .flags .packsize img {
	display: inline-block;
	padding-right: .5rem;
	vertical-align: middle;
}

#pi .flags .packsize p {
	display: inline-block;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	color: var(--text-heading-color);
}

/* Product flags
-------------------------------------------------------*/
#pi .piflags {
	grid-area: product-piflags;
}

#pi .piflags li {
	display: inline-block;
	padding-right: 1rem;
}

/* Product Files
-------------------------------------------------------*/
#pi .pifile {
	grid-area: product-file;
}

/* Product Departments
-------------------------------------------------------*/
#pi .alldepts {
	grid-area: product-departments;
}

#pi .alldepts a {
	display: inline-block;
	padding: var(--spacing);
	border: 1px solid var(--border-color);
	background-color: var(--navbar-tab-color);
	margin: var(--half-spacing);
}

/* Product PDL Article - could do with a class
-------------------------------------------------------*/
#pi .art {
	grid-area: product-article;
}

/* Tabbed Descriptions
-------------------------------------------------------*/
#pi .pi_tab,
#pi #pi_wrapper {
	grid-area: product-tabbed-description;
}

#pi ul.pi_tabs {
	cursor: pointer;
	margin: 0;
	padding: 0;
}

#pi ul.pi_tabs li {
	background-color: var(--secondary);
	color: var(--secondary-inverse);
	list-style: none;
	display: inline-block;
	margin: 0;
	padding: 1em;
	margin-right: .5em;
	border: 1px var(--border-color) solid;
	border-radius: var(--border-radius);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
	text-align: center;
}

#pi ul.pi_tabs li.selected {
	font-weight: var(--heading-font-weight);
	z-index: 9999999;
	background-color: var(--red);
	color: var(--white);
}

#pi ul.pi_tabs li:last-child {}

#pi .pi_tab_content {
	border: 1px solid var(--border-color);
	padding: var(--spacing);
}

#pi .pi_tab_content a img {}

#pi .pi_tab_content ul,
#pi .pi_tab_content ol {
	margin: 1em
}

#pi .pi_tab_content ol li {}

#pi .pi_tab_content ul li {}

/* accordion descriptions - doesn't work with description field also being present due to duplicate class and no id to target
------------------------------------------------------- */
#pi .bc ul.accordion {}

/* Recommended Products - option to also buy these at the same time
-------------------------------------------------------*/
#pi .prec {
	grid-area: product-recommended;
	margin-top: 1rem;
}

#pi .prec h3 {
	font-size: 1.5em;
	color: var(--red);
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

#pi .prec h3:before,
#pi .prec h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--red);
}

#pi .prec h3:before {
	margin-left: -50%;
	text-align: right;
}

#pi .prec .sprd {
	display: grid;
	grid-gap: .25em;
	grid-template-columns: 50px 1fr auto auto auto auto;
	/*switch to grid template areas */
	align-items: center;
}

#pi .prec .sprd .price label {}

#pi .prec .sprd form {}

#pi .prec .sprd form input,
#pi .prec .sprd form p {
	display: inline-block;
	vertical-align: middle;
}

/* Related Products - shown as a carousel
-------------------------------------------------------*/
#pi .prel {
	grid-area: product-related;
}

#pi .prel h3 {
	font-size: 1.5em;
	color: var(--red);
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

#pi .prel h3:before,
#pi .prel h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--red);
}

#pi .prel h3:before {
	margin-left: -50%;
	text-align: right;
}

/* Associated Products - CAN'T use this with buytogether as it uses the same data
-------------------------------------------------------*/
#pi .pass {
	grid-area: product-associated;
}

#pi .pass h3 {
	font-size: 1.5em;
	color: var(--red);
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

#pi .pass h3:before,
#pi .pass h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--red);
}

#pi .pass h3:before {
	margin-left: -50%;
	text-align: right;
}

/* buytogether
-------------------------------------------------------*/
#pi .buytogether {
	grid-area: product-bought-together;
	padding: 0;
	margin: 0;
}

#pi .buytogether ul {
	padding: 0;
	margin: 0;
}

#pi .buytogether li {
	padding: 0;
	margin: 0;
	list-style: none;
}

/*this needs to be a heading not just plain text */
#pi .buytogether li.header {
	list-style: none;
	padding: .5em 0;
	margin: 0;
	font-family: var(--heading-font);
	text-align: center;
	text-transform: uppercase;
	border-top: 1px var(--border-color) solid;
	border-bottom: 1px var(--border-color) solid;
}

#pi .buytogether ul.boughtto {
	display: grid;
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	grid-template-columns: 1fr
}

#pi .buytogether ul.boughtto li.prods {
	margin: 0;
	padding: 0;
}

#pi .buytogether ul.boughtto li.imgs {
	grid-column: 1/-1;
	text-align: center;
	margin: 0 auto;
}

#pi .buytogether ul.boughtto li.imgs img {
	margin: .5em;
	max-width: 75px;
	display: inline-block;
	vertical-align: middle;
}

#pi .buytogether ul.boughtto li.imgs span {
	text-align: center;
	display: inline-block;
	vertical-align: middle;
	font-size: 2em;
}

#pi .buytogether ul.boughtto li.prods {
	grid-column: 1;
	display: grid;
	grid-column-gap: var(--grid-spacing-horizontal);
	grid-row-gap: var(--grid-spacing-vertical);
	grid-template-columns: auto 1fr auto;
	align-items: center;
}

.buytogether ul.boughtto li.prods input {
	margin: 0;
}

.buytogether ul.boughtto li.prods span.price {
	display: block;
}

.buytogether ul.boughtto li.total {
	text-align: center;
}

.buytogether ul.boughtto li.btn {
	text-align: center;
}

.buytogether ul.boughtto li.btn form {
	margin: 0;
}

.buytogether ul.boughtto li.btn .submit {
	padding: var(--spacing);
	margin: 0;
	display: inline-block;
}

/* -------------------------------------------------------------------------------------
=Basket
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-gap: 1em;
	grid-template-areas: "header header"
		"lines lines"
		"shipping totals"
		"voucher buttons";
}

#pm .bskt .icon {
	display: none;
}

#pm .bskt form {
	margin: 0 auto;
	padding: 0;
}

/* if basket is empty and user is in it */
.bskt .empty {
	grid-column: 1/-1;
	padding: 1rem;
	display: block;
}

.bskt .empty .cont {
	margin: 1rem 0;
}

.bskt .empty .header {
	display: none
}

.bskt .empty .header+.header {
	display: block;
}

.bskt .empty .total {}

/* Basket header
------------------------------------------------------- */
#pm .bskt .header {
	grid-area: header;
	font-family: var(--heading-font);
	font-size: 1.25em;
	margin: 0;
	position: relative;
	padding: var(--spacing);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: .5em;
	text-align: center;
}

/* Basket Lines
------------------------------------------------------- */
#pm .bskt .lines {
	grid-area: lines;
}

#pm .bskt .line {
	margin-bottom: var(--spacing);
	grid-column-gap: .5em;
	align-items: center;
	display: grid;
	grid-template-columns: 64px 1fr auto auto 5ch;
	grid-template-areas: "icon desc qty rem price"
						 ". unit  . . ." ". .  . .  .";
}

/* Image */
#pm .bskt .line .prodimg {
	grid-area: icon;
	align-self: start;
}

#pm .bskt .line .prodimg a,
#pm .bskt .line .prodimg a img {
	display: block;
}

/* Product Info - in list form */
#pm .bskt .line .prodinfo {
	grid-area: desc;
	margin: 0;
	padding: 0;
}

#pm .bskt .line .prodinfo li {
	list-style: none;
}

#pm .bskt .line .prodinfo li.descr {
	font-family: var(--heading-font);
}

#pm .bskt .line .prodinfo li.subset,
#pm .bskt .line .prodinfo li.brnd,
#pm .bskt .line .prodinfo li.model,
#pm .bskt .line .prodinfo li.manu,
#pm .bskt .line .prodinfo li.ref,
#pm .bskt .line .prodinfo li.attr,
#pm .bskt .line .prodinfo li.uom,
#pm .bskt .line .prodinfo li.stock,
#pm .bskt .line .prodinfo li.lead,
#pm .bskt .line .prodinfo li.pieces,
#pm .bskt .line .prodinfo li.oos,
#pm .bskt .line .prodinfo li.disc {
	margin: 0;
	font-size: small;
	margin-left: var(--spacing);
}

#pm .bskt .line .prodinfo li.lead,
#pm .bskt .line .prodinfo li.disc {
	color: var(--info-color);
	font-weight: var(--heading-font-weight);
}

/* remove item */
#pm .bskt .line .rem {
	text-align: center;
	grid-area: rem;
}

#pm .bskt .lines .line .rem .submit {
	border: none;
	background-color: transparent;
	color: var(--error-color);
	font-size: 1em;
	/* width:2em; */
}

#pm .bskt .lines .line .netprice {
	grid-area: unit;
	margin: 0;
	font-size: small;
	margin-left: var(--spacing);
}

#pm .bskt .lines .line .price {
	grid-area: price;
	text-align: right;
	font-family: var(--heading-font);
}

#pm .bskt .lines .line .qty {
	grid-area: qty;
	text-align: right;
}

/* if product is multi sku then show this in the same area as the quantity update */
#pm .bskt .lines .line .skuselect {
	grid-area: skuselect;
	align-self: end;
}

#pm .bskt .lines .line .skuselect select {
	margin: 0;
	font-size: small;
	width: auto;
}

#pm .bskt .lines .line .qty form {
	--line-height: 1;
}

#pm .bskt .lines .line .qty label {
	/*not really needed to be displayed */
	display: none;
}

#pm .bskt .lines .line .qty button {
	display: inline-block;
	vertical-align: middle;
	border: 1px solid var(--border-color);
	border-radius: var(--border-radius);
	font-weight: var(--heading-font-weight);
	font-size: 1em;
	padding: .5em 1em;
	background-color: #fff;
	cursor: pointer;
}

#pm .bskt .lines .line .qty button.skuqtybsktsub {}

#pm .bskt .lines .line .qty button.skuqtybsktadd {}

#pm .bskt .lines .line .qty input.inputtext {
	text-align: center;
	margin: 0 var(--spacing);
}

#pm .bskt .lines .line .qty input.submit#update {
	--background-color: var(--checkout-button);
	--border-color: var(--checkout-button);
	--color: var(--checkout-button-text);
	padding: 0;
	margin: 0;
}

#pm .bskt .lines .line .qty input.submit#update {
	margin: 0;
	padding: 0;
	border: none;
	background-color: transparent;
	width: 1em;
	border: 0;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal {
	/*why display this... we have this info in the totals area... */
	display: none;
	grid-area: basket-sub-total;
	text-align: right;
	font-size: 1.25em;
	margin-bottom: var(--spacing);
}

.prodsubtotal label {
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
}

.prodsubtotal span {}

/* Delivery info
------------------------------------------------------- */

/* for free delivery messages */
.header.freedel {
	display: none;
}

.header.delivery {
	/*doesn't exist but should be on the actual delivery header */
}

/* Shipping 
------------------------------------------------------- */
.shipping {
	grid-area: shipping;
}

.shipping .icon {
	display: none;
}

.shipping ul {
	margin: 0;
	padding: 0;
}

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

.shipping form input,
.shipping form h4 {
	margin: 0;
	padding: 0;
	display: inline-block;
	vertical-align: middle;
	margin-right: var(--half-spacing);
	font-size: 1rem;
}

.shipping form h4 {}

.shipping ul li.delivery select {
	display: block;
	margin: .5em 0;
}

.shipping ul li.delivery.deliveryto {}

/*if only one country we show the country as a span - a bit redundant so hidden */

.shipping .delivery.deliveryto form span {
	display: none;
}

.shipping ul li.delivery.collectstore {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "title title"
		"location location"
		"address options";
}

.shipping ul li.delivery.collectstore label {
	grid-area: title;
}

.shipping ul li.delivery.collectstore form {
	grid-area: location
}

.shipping ul li.delivery.collectstore.info::before {
	display: none;
}

.shipping ul li.delivery.collectstore p {
	padding: 0;
	margin: 0;
}

.shipping ul li.delivery.collectstore .address {
	margin-left: var(--spacing);
	font-size: small;
}

/*better code structure needed - is just a p if only one option is available*/
.shipping ul li.delivery.collectstore #serviceid,
.shipping ul li.delivery.collectstore .address+p {
	grid-area: options;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals {
	grid-area: totals;
	text-align: right;
}

/*because no title is displayed */
.bskttotals::before {
	content: "Basket Summary";
	display: block;
	font-family: var(--heading-font);
	font-size: 1.25em;
	margin: 0;
	position: relative;
	padding: var(--spacing);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: .5em;
	text-align: center;
}

.bskttotals .subtotal {
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-gap: 1em;
}

.bskttotals .total {
	display: grid;
	grid-template-columns: 1fr 100px;
	grid-gap: 1em;
}

.bskttotals label {}

.bskttotals span {
	font-family: var(--heading-font);
}

.bskttotals .total span {}

/* Vouchers
------------------------------------------------------- */
.vouchentry {
	grid-area: voucher;
}

/*because no title is displayed */
.vouchentry form::before {
	content: "Voucher";
	display: block;
	font-family: var(--heading-font);
	margin: 0;
	position: relative;
	padding: var(--spacing);
	border-top: 1px solid var(--border-color);
	border-bottom: 1px solid var(--border-color);
	margin-bottom: .5em;
	text-align: center;
}

.vouchentry ul {
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas: "voucher submit"
}

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

/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons {
	grid-area: buttons;
	display: grid;
	grid-template-columns: 1fr auto auto;
	grid-template-areas: ".  account sagepay"
		". . continue";
	grid-gap: var(--half-spacing);
	align-items: center;
}

.bsktbuttons .btn.cont {
	grid-area: continue;
	text-align: right;
}

.bsktbuttons .btn.cont a.btn {
	background-color: var(--alt-button-color);
	border-color: var(--alt-button-color);
	color: var(--alt-button-text-color);
}

.bsktbuttons .sp_button {
	grid-area: sagepay;
	margin-left: auto;
}

.bsktbuttons .sp_button.bacs {
	grid-area:account
}

.bsktbuttons .sp_button a.btn {
	background-color: var(--checkout-button);
	border-color: var(--checkout-button);
}

.bsktbuttons .pp_button {
	grid-area: paypal;
}

.bsktbuttons .pp_button a.btn {
	padding: 0;
	margin: 0;
	background: none;
	border: none;
}

.bsktbuttons .pp_button img {
	display: block;
}

/*font awesome icons */
#pm .sp_button a.btn::before {
	font-family: var(--font-awesome);
	margin-right: var(--half-spacing)
}

/*Sagepay*/
#pm .sp_button.sagepay a.btn::before {
	content: '\f09d';
}

/*braintree*/
#pm .sp_button.braintree a.btn::before {
	content: '\f09d';
}

/*iwoca*/
#pm .sp_button.iwoca a.btn::before {
	content: '\f53a';
}

/*bacs*/
#pm .sp_button.invoice a.btn::before,
#pm .sp_button.bacs a.btn::before {
	content: '\f570';
	left: 0.825em;
}

/*lease */
#pm .sp_button a.btn.lease::before {
	content: '\f2b5';
}

.page_basket .btn.cont a.btn {
}

.page_basket .btn.cont a.btn:hover {}
.page_basket .btn.clear a.btn {}
.page_basket .btn.clear a.btn:hover {}
.bsktbuttons .art {}
.bsktbuttons .art p {}

/* -------------------------------------------------------------------------------------
=Checkout
------------------------------------------------------------------------------------- */
/* Defaults / Overrides 
------------------------------------------------------- */
#checkout_panel_processing,
#ro_accord_processing {
	position: absolute;
	display: none;
	width: 100%;
	padding: 20px 10px;
	opacity: 0.6;
	filter: Alpha(Opacity=60);
	float: right;
	background-color: var(--textColor);
}

/* Accordion tabs 
------------------------------------------------------- */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	color: #ffffff;
	right: 0;
	left: initial;
	background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_fff_256x240.png);
}

/* Accordion tabs 
------------------------------------------------------- */
.ui-accordion .ui-accordion-header .ui-accordion-header-icon {
	color: #ffffff;
	right: 0;
	left: initial;
	background-image: url(https://download.jqueryui.com/themeroller/images/ui-icons_fff_256x240.png);
}

#pm .accord h3 {
	font-weight: var(--heading-font-weight);
	padding: .5em;
	margin: 0;
	width: calc(100% - 1em);
	position: relative;
	cursor: pointer;
	border: none;
	font-size: 1.2em;
	border-radius: 0;
	background: var(--grey);
	color: #ffffff;
}

#personalisation_panel,
#gift_panel {
	border: none;
}

#pm .accord h4 {}

#pm .accord label {
	display: block;
}

#pm .accord ul li input,
#pm .accord ul li select,
#pm .accord ul li textarea,
#pm .accord ul li span {}

#pm .accord ul li textarea {}

#pm .accord ul li input.submit {}

#pm .accord li #submit {}

#checkout_accordion {}

#checkout_accordion input.inputtext,
#checkout_accordion input.inputtext_light,
#checkout_accordion select,
#checkout_accordion textarea {}

/*hacks due to coms code writing out things we dont want/need */
#customerPoNo {
	width: auto;
	max-width: 200px;
}

/* Checkout info/main panel
------------------------------------------------------- */
#checkout_accordion {
	display: inline-block;
	vertical-align: top;
	width: 70%;
	margin-right: var(--spacing)
}

/* Checkout Breadcrumb panel
------------------------------------------------------- */
#checkout_accordion_breadcrumb {
	display: inline-block;
	vertical-align: top;
	width: calc(30% - var(--spacing));
}

#pm .accordbdcb .checkoutLogos {
	text-align: center;
}

#pm .accordbdcb .checkoutLogos img {
	margin: .5em;
}

#pm .accordbdcb ul {}

#pm .accordbdcb ul li {
	margin: .5em 0em 1em 1em;
}

#pm .accordbdcb ul li.header {
	font-weight: var(--heading-font-weight);
	padding: 0;
	margin: 0;
	width: 96%;
	padding: .25em 2%;
	position: relative;
	cursor: pointer;
	border: none;
	font-size: 1em;
	border-radius: 0;
	border-bottom: var(--border-color) 1px solid;
}

#pm .accordbdcb ul li:last-child {}

#pm .accordbdcb ul li.title {
	font-weight: var(--heading-font-weight);
	padding: .5em;
	margin: 0;
	width: calc(100% - 1em);
	position: relative;
	cursor: pointer;
	border: none;
	font-size: 1.2em;
	border-radius: 0;
}

/* due to the way the payment bit in the checkout crumb is written out */
#pm .accordbdcb ul li span.label {
	width: 50%;
	display: inline-block;
}

/* Typography
------------------------------------------------------- */
.page_checkoutprocess ul {
	margin: 0;
	padding: 0;
}

.page_checkoutprocess ul li {
	list-style: none;
	padding: 0;
}

#pm .accord .chkbox {}

#pm .accord .chkbox label {
	display: inline-block;
	margin-left: .5em;
}

.reqmsg {
	color: var(--error-color);
}

.continue input {
	background-color: var(--checkout-button);
	border-color: var(--checkout-button);
}

/* Main accordion Sections 
------------------------------------------------------- */

#ul_top {
	grid-area: top;
}

#ul_left {
	grid-area: left;
}

#ul_right {
	grid-area: right;
}

#ul_bottom {
	grid-area: bottom;
}

/* Customer Details 
------------------------------------------------------- */

#customer_panel form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "top top"
		"left right"
		"bottom bottom";
	grid-gap: var(--spacing);
}

/* Delivery Address 
------------------------------------------------------- */

#delivery_panel form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas: "left right"
		"bottom bottom";
	grid-gap: var(--spacing);
}

#delivery_panel a {
	padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
	border: var(--border-width) solid var(--border-color);
	border-radius: var(--border-radius);
	outline: none;
	background-color: var(--background-color);
	color: var(--text-color);
	font-weight: var(--font-weight);
	font-family: var(--heading-font);
	font-size: 1rem;
	line-height: var(--line-height);
	text-align: center;
	cursor: pointer;
}

#delivery_panel a:is([aria-current],:hover,:active,:focus) {}

/* Confirm Panel inc Basket Summary
------------------------------------------------------- */
#confirm_panel {}

.basketsummary .header {
	margin: 0;
	color: var(--text-color);
	padding: var(--spacing);
	text-align: center;
}

.bsktsum {}

.bsktsum .line {
	display: grid;
	grid-gap: .5em;
	margin-bottom: var(--spacing);
	grid-template-columns: 3fr 1fr 1fr 1fr;
	align-self: center;
}

.bsktsum .line:nth-child(odd) {}

.bsktsum .qty {
	text-align: right;
}

.bsktsum .qty label {
	display: none !important;
}

.bsktsum .price {
	font-weight: var(--heading-font-weight);
	text-align: right;
}

.bsktsum .editbskt {}

.bsktsum .editbskt span {
	float: none !important;
	font-family: var(--heading-font);
	font-weight: var(--heading-font-weight);
	display: block;
}

.bsktsum .editbskt a {
	font-size: 1em;
	padding: .5rem 0;
	margin: 0;
	text-align: center;
	cursor: pointer;
	display: inline-block;
	text-decoration: underline;
	/* margin-right:auto; */
}

.bsktsum .line .prodinfo li {
	font-size: .725em;
}

.bsktsum .line .prodinfo li.descr {
	font-size: 1em;
	font-weight: var(--heading-font-weight);
}

/*accept terms and conditions - could do with a class */
.bsktsum h5 {
	color: var(--text-heading-color);
	font-weight: var(--heading-font-weight);
	font-size: 1em;
}

.bsktsum .chkbox {
	margin-left: .5em;
}

/*view terms - needs a class and to loose the space in the title!*/
a[title="View "] {
	font-size: .875em;
	margin: 1em 0;
}

/* Basket Subtotal
------------------------------------------------------- */
.bsktsum .subtotal {
	padding: var(--spacing);
	text-align: right;
}

/* Basket Totals
------------------------------------------------------- */
#confirm_panel .bskttotals {
	border-top: 1px var(--text-color) solid;
	border-bottom: 1px var(--text-color) solid;
	padding: 1em;
	text-align: right;
}

/* Payment Panel Totals
------------------------------------------------------- */
#payment_panel {}

#payment_panel .form {}

#delivery_date_panel .continue {
	margin: auto;
	text-align: center;
}

/* 
PAY WITH AMAZON
------------------------------------------------------- */
/* Please include the min-width, max-width, min-height 
and max-height if you plan to use a relative CSS unit 
measurement to make sure the widget renders in the 
optimal size allowed.	
*/

#addressBookWidgetDiv {
	min-width: 300px;
	max-width: 100%;
	min-height: 228px;
	height: 300px;
}

#walletWidgetDiv {
	min-width: 300px;
	max-width: 100%;
	min-height: 228px;
	height: 300px;
}

#shippingSelector {
	border: 1px solid #bbb;
	margin: 1em 0;
	padding: 0 1em;
}

#amazonShippingSelection>span {
	margin-top: .5em;
	font-size: 1.2em;
	font-weight: var(--heading-font-weight);
	width: 100%;
	display: inline-block;
}

#amazonShippingSelection>span+span {
	font-weight: normal;
	margin-top: .5em;
	margin-bottom: .5em;
}

#shippingSelector amazonShippingSelection {
	outline: 1px red solid;
}

.amazonShippingCountryDiv span.label {
	font-weight: var(--heading-font-weight);
	margin-right: 1em;
}

.amazonShippingOptionsDiv span.value {
	font-weight: var(--heading-font-weight);
}

.amazonShippingOptionsDiv {
	cursor: pointer;
}

.amazonShippingOptionDiv {
	width: 40%;
	line-height: 30px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	border: 1px solid #bbb;
	border-radius: 3px;
	display: block;
	text-decoration: none;
	margin: 0 3px 6px 0;
	padding: 0 20px 0 30px;
	color: #333;
	font-size: 11px;
	height: 30px;
	background: #f6f6f6;
	background: -moz-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: -webkit-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: -ms-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: linear-gradient(to bottom, #f6f6f6 0, #e1e1e1 100%);
}

.amazonShippingOptionsDiv:after {
	display: block;
	clear: both;
	content: '';
}

.amazonShippingOptionDiv.selected {
	background: #f6f6f6 url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, -moz-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, -webkit-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, -ms-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, linear-gradient(to bottom, #f6f6f6 0, #e1e1e1 100%)
}

.amazonShippingOptionDiv.selected:hover {
	background: #ececec url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat;
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, -moz-linear-gradient(top, #ececec 0, #d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, -webkit-linear-gradient(top, #ececec 0, #d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, -ms-linear-gradient(top, #ececec 0, #d3d3d3 100%);
	background: url('https://images-na.ssl-images-amazon.com/images/G/01/ep/background-image-1x._V313533909_.png') -130px -293px no-repeat, linear-gradient(to bottom, #ececec 0, #d3d3d3 100%)
}

.amazonShippingOptionDiv:hover {
	background: #ececec;
	background: -moz-linear-gradient(top, #ececec 0, #d3d3d3 100%);
	background: -webkit-linear-gradient(top, #ececec 0, #d3d3d3 100%);
	background: -ms-linear-gradient(top, #ececec 0, #d3d3d3 100%);
	background: linear-gradient(to bottom, #ececec 0, #d3d3d3 100%)
}

.address-list li.selected a.invalid {
	background: #f6f6f6;
	background: -moz-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: -webkit-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: -ms-linear-gradient(top, #f6f6f6 0, #e1e1e1 100%);
	background: linear-gradient(to bottom, #f6f6f6 0, #e1e1e1 100%)
}

#cancelAmazon {
	background-color: #eef2f3;
	color: #416976;
	font-weight: var(--heading-font-weight);
	padding: var(--spacing);
}

.noshipping {
	margin-bottom: 1em;
	font-weight: var(--heading-font-weight);
}

.submit[disabled] {
	background-color: #eef2f3;
	color: #ffffff;
}

/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
.form.myaccount#psign {
	width: calc(100% - 2em);
	margin: auto;
}

/* could do with being in some form of logical container */
.page_useraccount #pm .bnr {
	text-align: center;
}

/* could do with being in some form of logical container */
.page_useraccount #pm .arts {
	text-align: center;
}

#psign h4,
#psign h3 {
	margin-bottom: .5em;
}

.page_useraccount h4 {
	font-size: 1.5em;
	color: var(--red);
	margin: 2rem 0;
	margin-bottom: 2rem;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.page_useraccount h4:before,
.page_useraccount h4:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--red);
}

.page_useraccount h4:before {
	margin-left: -50%;
	text-align: right;
}

.page_useraccount ul.orders,
.page_useraccount ul.contact,
.page_useraccount ul.details {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	text-align: left;
}

.page_useraccount ul.orders img,
.page_useraccount ul.contact img,
.page_useraccount ul.details img {
	max-width: 100%;
	height: auto;
}

.page_useraccount ul.orders {}

/* new order status stuff - no one ever does stuff the same!!!! */

.past_orders {
	display: grid;
}

.past_order_header,
.past_order {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* account icons
------------------------------------------------------- */
.page_useraccount .form li.icon {
	display: inline-block;
	margin-right: 1em;
}

.page_useraccount .form li.icon a.img {
	display: block;
	text-align: center;
	border: 1px solid var(--borderColour);
}

.page_useraccount .form li.icon a.lnk {
	display: block;
	text-align: center;
	margin: .5em auto;
}

.page_useraccount .form li.icon a.img img {
	display: block;
	margin: auto;
}

/* Custom product lists in member account */
#popular_products {}

#popular_products h3 {
	font-size: 1.5em;
	color: var(--mainColor);
	margin-bottom: .25em;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	font-weight: var(--heading-font-weight);
}

#popular_products h3:before,
#popular_products h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--mainColor);
}

#popular_products h3:before {
	margin-left: -50%;
	text-align: right;
}

ul.popular_products {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	grid-gap: 1em;
}

.ritm#popular_products ul li {
	display: inline-block;
}

/* save for later list in my account 
needs overrieds for .ritm definitions
------------------------------------------------------- */
.ritm#saved_for_later {}

.ritm#saved_for_later h3 {
	font-size: 1.5em;
	color: var(--mainColor);
	margin-bottom: .25em;
	position: relative;
	z-index: 1;
	overflow: hidden;
	text-align: center;
	font-weight: var(--heading-font-weight);
}

.ritm#saved_for_later h3:before,
.ritm#saved_for_later h3:after {
	position: absolute;
	top: 51%;
	overflow: hidden;
	width: calc(50% - .5em);
	margin-left: .5em;
	height: 4px;
	content: '\a0';
	background-color: var(--mainColor);
}

.ritm#saved_for_later h3:before {
	margin-left: -50%;
	text-align: right;
}

.ritm#saved_for_later ul li {
	display: block;
	padding: 0;
	margin: 0;
	margin-bottom: 2em;
	border-bottom: 1px solid var(--borderColour);
	padding-bottom: 1em;
}

.ritm#saved_for_later .fprd .bc {
	grid-template-columns: 80px 3fr 1fr 1fr 1fr 1fr 2fr 1fr;
	grid-template-rows: auto auto;
	grid-gap: .25em;
	min-height: auto;
}

.ritm#saved_for_later li .fprd .fprdimg {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
}

.ritm#saved_for_later li .fprd .fprdtitle {
	grid-column: 2;
	grid-row: 1;
	align-self: start;
	margin: 0;
}

.ritm#saved_for_later li .fprd .strap {
	grid-column: 2;
	grid-row: 1;
	align-self: end;
	margin: 0;
}

.ritm#saved_for_later li .fprd h5.clientref {
	grid-column: 3;
	grid-row: 1;
	align-self: start;
	margin: 0;
}

.ritm#saved_for_later li .fprd .packsize {
	grid-column: 3;
	grid-row: 1;
	align-self: end;
}

.ritm#saved_for_later .bc ul li .price {
	grid-column: 4;
	grid-row: 1;
	display: block;
}

.ritm#saved_for_later .bc ul li .price h6 span {
	float: right;
}

.ritm#saved_for_later li .fprd .trade {
	grid-column: 5;
	grid-row: 1;
	display: block;
}

.ritm#saved_for_later .bc ul li .trade h6 span {}

.ritm#saved_for_later li .fprd .qty {
	grid-column: 6;
	grid-row: 1;
}

.ritm#saved_for_later li .fprd form {
	grid-column: 7;
	grid-row: 1;
	align-self: start;
	display: block;
}

.ritm#saved_for_later li .fprd form.rsfl {
	grid-column: 8;
	grid-row: 1;
}

.ritm#saved_for_later li .fprd form input {
	width: auto;
	display: inline-block;
	vertical-align: top;
	margin: 0 .5em;
}

.ritm#saved_for_later li .fprd .qty label {
	display: inline-block;
}

/* as labels aren't being used - placeholders are */

.form#psign ul.popular_products input {
	display: block;
	text-align: center;
	/* max-width:unset; */
	grid-column: unset;
}

ul.popular_products form.rsfl {
	padding: 1em;
	text-align: center;
	align-items: center;
	display: block;
}

ul.popular_products form.rsfl input {
	text-align: center;
	background-color: white;
	color: var(--mainColor);
}

/* orderinfo
------------------------------------------------------- */
.orderinfo {}

.orderinfo ul.order li {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	grid-template-columns: 25% 75%;
	grid-gap: .5em;
	margin-bottom: .5em;
}

.orderinfo ul.order label {
	grid-column: 1;
	font-weight: var(--heading-font-weight);
}

.orderinfo ul.order li span {
	grid-column: 2;
	display: contents;
	word-break: break-word
}

.orderinfo ul.order table {
	grid-column: 1/3;
}

/*view order button uses the same image as other things, be careful! */
.orderinfo #pm a.btn.info {
	color: var(--mainColor);
	background-color: transparent;
	margin: 0 .5em;
	display: inline-block;
}

.orderinfo #pm a.btn img.btn {
	width: 1em;
}

ul.order a.lnk {
	grid-column: 1/3;
	font-family: "proxima-nova", sans-serif;
	font-weight: var(--heading-font-weight);
	font-size: 1em;
	margin: .5em;
	padding: .5em .5em;
	text-align: center;
	cursor: pointer;
	border: none;
	outline: none;
	color: #ffffff;
	background-color: var(--bgColor);
}

/* my details
------------------------------------------------------- */
form[name="selectDelAddress"] {}

form[name="selectDelAddress"] li.info {
	width: 100%;
	color: #1d1d1d;
	font-family: "open-sans", sans-serif;
	/* www.aestheticallyloyal.com/public/optimize-legibility/ */
	text-rendering: optimizelegibility;
}

form[name="selectDelAddress"] li label {}

#psign ul.orders a.img,
#psign ul.contact a.img,
#psign ul.details a.img {}

#psign ul.orders a.img img,
#psign ul.contact a.img img,
#psign ul.details a.img img {}

#psign ul.orders a.lnk,
#psign ul.contact a.lnk,
#psign ul.details a.lnk {}

#pm .form .link {}

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.confirmation .conf {
	padding: 1em;
}

.confirmation .conf .info li {
	display: block;
	list-style: none;
	margin-bottom: 1em;
}

.confirmation .conf .info li.info {
	font-size: 1em;
}

.confirmation .conf .info li input,
.confirmation .conf .info li label {
	margin-right: 1em;
	display: inline-block;
	vertical-align: middle;
	font-weight: normal;
}

.confirmation .conf .info li label p {
	display: inline-block;
	font-weight: var(--heading-font-weight);
	font-family: var(--headingFont);
	margin-bottom: 1em;
}

.confirmation .conf li.info li {
	list-style: disc;
	display: list-item;
	list-style-position: inside;
}

.confirmation .conf .header {
	font-size: 2em;
	font-weight: var(--heading-font-weight);
	font-family: var(--heading-font);
	text-align: center;
	margin-bottom: 1rem;
}

.confirmation .conf .subhead {
	font-weight: var(--heading-font-weight);
	font-weight: var(--heading-font-weight);
	font-family: var(--heading-font);
	margin: .5em 0;
	margin-bottom: 1rem;
	text-align: center;
	color: var(--text-sub-heading-color)
}

/* Basket Line items
------------------------------------------------------- */
.confirmation .conf .order {}

.confirmation .conf .order li {
	list-style: none;
	display: block;
}

.confirmation .conf .order .subhead {
	text-align: left;
}

.confirmation .conf .order .line {
	display: grid;
	grid-gap: .5em;
	grid-template-columns: 64px 1fr auto 100px;
	grid-template-areas: "icon desc qty price";
	padding: 1em;
	align-self: center;
	align-items: start;
}

.confirmation .conf .order .line:nth-child(odd) {
	background-color: var(--bgaltColor);
}

/* Image */
.page_confirmation .conf .order .line a.img {}

/* Product title*/
.confirmation .conf .order .line .descr {
	align-self: start;
	font-size: .875em;
	font-weight: var(--heading-font-weight);
}

.confirmation .conf .order .line .price {
	text-align: right;
	font-weight: var(--heading-font-weight);
	align-self: start;
}

/* Basket Subtotal
------------------------------------------------------- */
.confirmation .conf .order .subtotal {
	padding: 1em;
	border-top: 1px var(--border-color) solid;
	text-align: right;
}

.confirmation .conf .order .subtotal label {
	margin-right: 1em;
}

.confirmation .conf .order .subtotal span {
	font-size: 1.2em;
	font-weight: var(--heading-font-weight);
}

.confirmation .conf .order .address {
	text-align: left;
	font-size: .875em;
}

/* Post order customer registration panel
------------------------------------------------------- */
.confirmation .conf .ordreg {
	background-color: #ffffff;
	padding: 1em;
	margin: 1em 0;
}

.confirmation .conf .ordreg input {
	margin: .5em 0;
}

.confirmation .conf .ordreg .info {
	margin: .5em 0;
}

.confirmation .conf .ordreg .help {
	font-size: .725em;
	padding: 1em 0
}

.success .form li {}

/* -------------------------------------------------------------------------------------
=Sitemap 
------------------------------------------------------------------------------------- */
#pm .smap ul {
	list-style-position: inside;
	list-style:none;
	display:grid;
	grid-template-columns:repeat(4, 1fr);
}

#pm .smap ul li {
}

/* First Level */
#pm .smap ul li {
}

#pm .smap ul li a {
	font-weight: var(--heading-font-weight);
	font-size: 1.2em;
}

/* Second Level */
#pm .smap ul li ul {
	grid-template-columns:1fr;
}

#pm .smap ul li ul li {
	width: 100%;
}

#pm .smap ul li ul li a {
	font-weight: normal;
	font-size: 1em;
}

/* Third Level */
#pm .smap ul li ul li ul li a {
	font-weight: normal;
}


/* -------------------------------------------------------------------------------------
=Client Spefific Stylings 
------------------------------------------------------------------------------------- */
/**
 * Owl Carousel v2.2.1 
 * THIS IS A BASE FILE - overrides should be in sitepanes.css in the relevant place!
 * 
 * Copyright 2013-2017 David Deutsch
 * Licensed under  ()
 */
.owl-carousel {
  display: none;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  /* position relative and z-index fix webkit rendering fonts issue */
  position: relative;
  z-index: 1; }
  .owl-carousel .owl-stage {
    position: relative;
    -ms-touch-action: pan-Y;
    -moz-backface-visibility: hidden;
    /* fix firefox animation glitch */ }
  .owl-carousel .owl-stage:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; }
  .owl-carousel .owl-stage-outer {
    position: relative;
    overflow: hidden;
    /* fix for flashing background */
    -webkit-transform: translate3d(0px, 0px, 0px); }
  .owl-carousel .owl-wrapper,
  .owl-carousel .owl-item {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0); }
  .owl-carousel .owl-item {
    position: relative;
    min-height: 1px;
    float: left;
    -webkit-backface-visibility: hidden;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none; }
  .owl-carousel .owl-item img {
    display: block;
    width: 100%; }
  .owl-carousel .owl-nav.disabled,
  .owl-carousel .owl-dots.disabled {
    display: none; }
  .owl-carousel .owl-nav .owl-prev,
  .owl-carousel .owl-nav .owl-next,
  .owl-carousel .owl-dot {
    cursor: pointer;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-loaded {
    display: block; }
  .owl-carousel.owl-loading {
    opacity: 0;
    display: block; }
  .owl-carousel.owl-hidden {
    opacity: 0; }
  .owl-carousel.owl-refresh .owl-item {
    visibility: hidden; }
  .owl-carousel.owl-drag .owl-item {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
  .owl-carousel.owl-grab {
    cursor: move;
    cursor: grab; }
  .owl-carousel.owl-rtl {
    direction: rtl; }
  .owl-carousel.owl-rtl .owl-item {
    float: right; }

/* No Js */
.no-js .owl-carousel {
  display: block; }

/*
 *  Owl Carousel - Animate Plugin
 */
.owl-carousel .animated {
  animation-duration: 1000ms;
  animation-fill-mode: both; }

.owl-carousel .owl-animated-in {
  z-index: 0; }

.owl-carousel .owl-animated-out {
  z-index: 1; }

.owl-carousel .fadeOut {
  animation-name: fadeOut; }

@keyframes fadeOut {
  0% {
    opacity: 1; }
  100% {
    opacity: 0; } }

/*
 * 	Owl Carousel - Auto Height Plugin
 */
.owl-height {
  transition: height 500ms ease-in-out; }

/*
 * 	Owl Carousel - Lazy Load Plugin
 */
.owl-carousel .owl-item .owl-lazy {
  opacity: 0;
  transition: opacity 400ms ease; }

.owl-carousel .owl-item img.owl-lazy {
  transform-style: preserve-3d; }

/*
 * 	Owl Carousel - Video Plugin
 */
.owl-carousel .owl-video-wrapper {
  position: relative;
  height: 100%;
  background: #000; }

.owl-carousel .owl-video-play-icon {
  position: absolute;
  height: 80px;
  width: 80px;
  left: 50%;
  top: 50%;
  margin-left: -40px;
  margin-top: -40px;
  background: url("owl.video.play.png") no-repeat;
  cursor: pointer;
  z-index: 1;
  -webkit-backface-visibility: hidden;
  transition: transform 100ms ease; }

.owl-carousel .owl-video-play-icon:hover {
  -ms-transform: scale(1.3, 1.3);
      transform: scale(1.3, 1.3); }

.owl-carousel .owl-video-playing .owl-video-tn,
.owl-carousel .owl-video-playing .owl-video-play-icon {
  display: none; }

.owl-carousel .owl-video-tn {
  opacity: 0;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  transition: opacity 400ms ease; }

.owl-carousel .owl-video-frame {
  position: relative;
  z-index: 1;
  height: 100%;
  width: 100%; }
.wt-rotator
{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    background-color: #000;
    border: 0px solid #FFF;
    position: relative;
    width: 100px;
    height: 20px;
    overflow: hidden;
}
.wt-rotator a
{
    outline: none;
}
.wt-rotator .screen
{
    position: relative;
    top: 0;
    left: 0;
    width: 100px;
    height: 20px;
    overflow: hidden;
}
.wt-rotator #strip
{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    overflow: hidden;
}
.wt-rotator .content-box
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.wt-rotator .main-img
{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    border: 0;
}
.wt-rotator .preloader
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    margin-top: -18px;
    margin-left: -18px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    background: #666 url(/images/loading.gif) center no-repeat;
    background: rgba(0,0,0,.7) url(/images/loading.gif) center no-repeat;
    z-index: 4;
    display: none;
}
.wt-rotator #timer
{
    position: absolute;
    left: 0;
    height: 4px;
    background-color: #FFF;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    opacity: 0.5;
    z-index: 4;
    visibility: hidden;
    font-size: 0;
}
.wt-rotator .desc
{
    color: #000;
    position: absolute;
    color: #FFF;
    z-index: 6;
    overflow: hidden;
    visibility: hidden;
    text-align: left;
}
.wt-rotator .inner-bg
{
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    -moz-opacity: .7;
    filter: alpha(opacity=70);
    opacity: .7;
    z-index: 0;
}
.wt-rotator .inner-text
{
    position: absolute;
    top: 0;
    left: 0;
    padding: 10px;
    width: auto;
    height: auto;
    z-index: 1;
}
.wt-rotator .c-panel
{
    position: absolute;
    top: 0;
    z-index: 7;
    visibility: hidden;
}
.wt-rotator .outer-hp, .wt-rotator .outer-vp
{
    position: absolute;
    background: #333;
    background: -moz-linear-gradient(#444, #111);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#444), to(#111));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#111111',GradientType=0);
    border: 1px solid #000;
}
.wt-rotator .outer-hp
{
    left: 0;
    width: 100%;
    border-left: none;
    border-right: none;
}
.wt-rotator .outer-vp
{
    top: 0;
    height: 100%;
    border-top: none;
    border-bottom: none;
}
.wt-rotator .back-scroll, .wt-rotator .fwd-scroll
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
    background: url(assets/spacer.png) no-repeat;
}
.wt-rotator .thumbnails, .wt-rotator .buttons
{
    display: inline;
    position: relative;
    float: left;
    overflow: hidden;
}
.wt-rotator .thumbnails ul
{
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
}
.wt-rotator .thumbnails ul.inside
{
    position: absolute;
    top: 0;
    left: 0;
}
.wt-rotator .thumbnails li, .wt-rotator .play-btn, .wt-rotator .prev-btn, .wt-rotator .next-btn
{
    position: relative;
    list-style: none;
    display: inline;
    float: left;
    overflow: hidden;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    color: #EEE;
    background-color: #000;
    background: -moz-linear-gradient(#333, #000);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
    border: 1px solid #000;
    cursor: pointer;
    font-weight: bold;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.wt-rotator .thumbnails li.thumb-over
{
    color: #FFF;
    background-color: #CCC;
    background: -moz-linear-gradient(#DDD, #BBB);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
.wt-rotator .thumbnails li.curr-thumb
{
    color: #000;
    background-color: #FFF;
    background: -moz-linear-gradient(#FFF, #DDD);
    background: -webkit-gradient(linear, 0 top, 0 bottom, from(#FFF), to(#DDD));
    cursor: default;
}
.wt-rotator .thumbnails li.image
{
    background: #000;
}
.wt-rotator .thumbnails li.image.curr-thumb, .wt-rotator .thumbnails li.image.thumb-over
{
    border-color: #06F;
}
.wt-rotator .thumbnails li.image a
{
    display: block;
    border: 0;
}
.wt-rotator .thumbnails li.image img
{
    display: block;
    border: 0;
    position: absolute;
    -moz-opacity: .85;
    filter: alpha(opacity=85);
    opacity: 0.85;
}
.wt-rotator .thumbnails li.image.thumb-over img
{
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
}
.wt-rotator .thumbnails li.image.curr-thumb img
{
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    cursor: default;
}
.wt-rotator .thumbnails li *
{
    display: none;
}
.wt-rotator .thumbnails li div
{
    position: relative;
    color: #FFF;
    background-color: #000;
    width: auto;
    height: auto;
}
.wt-rotator .button-over
{
    background-color: #CCC !important;
}
.wt-rotator .play-btn
{
    background: #000 url(/images/assets/play.png);
    background: url(/images/assets/play.png), -moz-linear-gradient(#333, #000);
    background: url(/images/assets/play.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .play-btn.button-over
{
    background: url(/images/assets/play.png), -moz-linear-gradient(#DDD, #BBB);
    background: url(/images/assets/play.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
.wt-rotator .pause
{
    background: #000 url(/images/assets/pause.png);
    background: url(/images/assets/pause.png), -moz-linear-gradient(#333, #000);
    background: url(/images/assets/pause.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .pause.button-over
{
    background: url(/images/assets/pause.png), -moz-linear-gradient(#DDD, #BBB);
    background: url(/images/assets/pause.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
.wt-rotator .prev-btn
{
    background: #000 url(/images/assets/prev.png);
    background: url(/images/assets/prev.png), -moz-linear-gradient(#333, #000);
    background: url(/images/assets/prev.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .prev-btn.button-over
{
    background: url(/images/assets/prev.png), -moz-linear-gradient(#DDD, #BBB);
    background: url(/images/assets/prev.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
.wt-rotator .next-btn
{
    background: #000 url(assets/next.png);
    background: url(/images/assets/next.png), -moz-linear-gradient(#333, #000);
    background: url(/images/assets/next.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .next-btn.button-over
{
    background: url(/images/assets/next.png), -moz-linear-gradient(#DDD, #BBB);
    background: url(/images/assets/next.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
.wt-rotator .up
{
    background: #000 url(/images/assets/up.png);
    background: url(/images/assets/up.png), -moz-linear-gradient(#333, #000);
    background: url(/images/assets/up.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .up.button-over
{
    background: url(/images/assets/up.png), -moz-linear-gradient(#DDD, #BBB);
    background: url(/images/assets/up.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
.wt-rotator .down
{
    background: #000 url(/images/assets/down.png);
    background: url(/images/assets/down.png), -moz-linear-gradient(#333, #000);
    background: url(/images/assets/down.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#333), to(#000));
}
.wt-rotator .down.button-over
{
    background: url(/images/assets/down.png), -moz-linear-gradient(#DDD, #BBB);
    background: url(/images/assets/down.png), -webkit-gradient(linear, 0 top, 0 bottom, from(#DDD), to(#BBB));
}
#rotator-tooltip
{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    display: none;
}
#rotator-tooltip.txt-up
{
    margin-left: -10px;
    margin-bottom: 5px;
    background: url(/images/assets/vtip.png) no-repeat;
    background-position: 10px bottom;
    background-position-x: 10px;
    background-position-y: bottom;
}
#rotator-tooltip.txt-down
{
    margin-left: -10px;
    margin-top: 24px;
    background: url(/images/assets/vtip.png) no-repeat;
    background-position: 10px top;
    background-position-x: 10px;
    background-position-y: top;
}
#rotator-tooltip.img-up
{
    background: url(/images/assets/vtip.png) center bottom no-repeat;
}
#rotator-tooltip.img-down
{
    background: url(/images/assets/vtip.png) center top no-repeat;
}
#rotator-tooltip.img-right
{
    background: url(/images/assets/htip.png) left center no-repeat;
}
#rotator-tooltip.img-left
{
    background: url(/images/assets/htip.png) right center no-repeat;
}
#rotator-tooltip .tt-txt
{
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    color: #FFF;
    background-color: #000;
    max-width: 300px;
    padding: 4px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    margin: 8px 0;
}
#rotator-tooltip img
{
    display: none;
    background-color: #000;
    padding: 3px;
    margin: 8px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
}
.wt-rotator .s-prev, .wt-rotator .s-next
{
    position: absolute;
    top: 50%;
    margin-top: -25px;
    width: 30px;
    height: 50px;
    cursor: pointer;
    background: url(/images/assets/large_buttons.png) no-repeat;
    -moz-opacity: .7;
    filter: alpha(opacity=70);
    opacity: .7;
    z-index: 8;
}
.wt-rotator .s-prev
{
    left: 0;
    background-position: 0 0;
}
.wt-rotator .s-next
{
    left: 100%;
    margin-left: -30px;
    background-position: -30px 0;
}
.wt-rotator .s-prev.button-over, .wt-rotator .s-next.button-over
{
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    opacity: 1;
    background-color: transparent !important;
}
.wt-rotator .block, .wt-rotator .vpiece, .wt-rotator .hpiece
{
    position: absolute;
    z-index: 2;
}