/**
 * 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%; }
/* ------------------------------------------------------------------------------------
		SCREEN - Just Wood 2020
		3506177 : 4358144
		Filename : sitepanes.css
		Last Updated : 22. 09. 2020
		Copyright : (c) 2020 Etail Systems Ltd
		Author : Etail stems Ltd
		Web : http://www.etailsystems.com

	Table of Contents
	01. =Reset
	02. =Page
	03. =Typography
			Defaults
			Headings
			Links
			Specific headings
			Blockquote
			Base Article Typography
	04. =Buttons
	05. =Tables
			Defaults
			Order
			Quotations
	06. =Forms
			Defaults
			Sign in
			Register
			Forgotten Password
			Checkout (New Customer)
			Checkout (Sign In)
	07. =DepartmentTree / Menu
			top level
			second level
			third level
			forth level
	08. =Breadcrumb
	09. =Jquery Base Overrides
	10. =OwlCarousel Overrides
	11. =AccordionBase
			Header including hide/show icons 
			Panes
	12. =Autocomplete 
	13. =Email when back in stock EWIS
	14. =HoverBasket
	15. =PopupDialog / Popup Add to Basket / Direct Despatch
	16. =Messages
	17. =FIXEDTopPanel
	17. =PanelTop
	18. =CenterPanel
	19. =MainPanel
			Articles
			Banners
	20. =FooterPanel
	21. =BottomPanel
	xx. =FIXEDBottomPanel
	22. =Copyright and Managed By
	23. =FilterSearch
	24. =SearchHeader / SearchFooter 
	25. =FeaturedProducts
			Base Settings
			Image
			Title
			Pricing Structure
			Unit Specifics
			Client ref/Model
			Buy Form
			Media Queries
	26. =ProductLists
	27. =MyAccount
	28. =Blog
	29. =CustomArticles
	30. =CustomBanners
	31. =DepartmentPages
			Subdepartment Tree
			Media Queries
	32. =ProductPage
			Title
			Image (carousel)
			Brand and Manufacturer
			barcodes
			Buy Panel
			Pricing info
			Description
			Accordion Description
			Stock
			Leadtime
			Direct Despatch/Dropship
			Links - Ask a question etc
			Video Links (youtube)
			Buytogether
			Personalisation
	33. =Super Attributes
			Defaults
			attributeTypePrice_Matrix_Calculator 
			attributeTypeDimensions
			attributeTypeRadio_button
			attributeTypeText_Box_Free_Text_Entry
			attributeTypeDrop_down_list
			attributeTypeSingle_Image_Upload
	34. =Basket
			Basket header
			Basket Lines
			Basket Line items
			Basket Subtotal
			Delivery info
			Shipping
			Basket Totals
			Basket Payment Buttons
			Media Queries
	35. =Checkout Process
	36. =OrderConfirmation
	36. =Hacks
		


Fonts Used
font-family: var(--mainFont);
font-family: var(--altFont);


=Definitions
------------------------------------------------------------------------------------- */
:root {
	--main-color:#b67965;
	--alt-color:rgb(109,242,48);
	--alt2-color:rgb(109,242,48);
	--text-color: #2c2a29;
	--text2-color:#979797;
	--bg-color:#e5e5e5;
	--bgalt-color:#ededed;
	--mainFont:	'Lato', sans-serif;
	--altFont: itc-avant-garde-gothic-pro, sans-serif;
}
	
/* =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;
	/* Looks pretty much the same than Windows */
	font-family: 'Lato', sans-serif;
    letter-spacing: 1px;
}

iframe {
	/*don't do this here!*/
	/* width:100% !important; */
}


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

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

body {
	background-color:var(--bgalt-color);
	font-family: var(--mainFont);
	font-size:16px;
	background-color: #fff;
}

#cont {
    margin-left: auto;
    margin-right: auto;
}

ol {
	margin-left:.5em;
}

/* -------------------------------------------------------------------------------------
=Typography 
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
/* this choice of font-family is supposed to render text the same across platforms */
body, input, button, textarea, select {
	font-family: var(--mainFont);
	-webkit-font-smoothing: antialiased;
	/* Looks pretty much the same than Windows */
}

p, li, label, input, select, textarea {}

select, textarea {
	padding:.5em;
}

input.inputtext,
input.inputtext_light /*used for the newsletter signup */{
	font-family: var(--mainFont);
	font-size: 1em;
	padding: .5em;
	border:1px solid;
	max-width: calc(100% - 2px - 0.5em);
}

p, ol, ul, dl, address {
	font-family: var(--mainFont);
	font-weight: 400;
}

b, strong {
	font-weight:bold;
	font-size:inherit;
}

ol, ul {
	list-style:none;
}

li ul,
li ol {
	font-size:1em;
}

ul.inline li {
	display:inline-block;
}

abbr {
	opacity:0.9;
}

abbr[title]:hover, dfn[title] {
	border-bottom: 1px dotted #656565;
	cursor:help;
}

ins, mark {
	padding:0 0.125em;
	text-decoration:none;
}

sub, sup {
	position:relative;
	font-size:smaller;
	line-height:0;
}

em, em a, i, samp {
	font-style: italic;
}

ins, mark {
	padding: 0 0.125em;
	text-decoration: none;
}

sub, sup {
	position: relative;
	font-size: smaller;
	line-height: 0;
}

sup {
	vertical-align: super;
}

sub {
	vertical-align: sub;
}

del, s {
	text-decoration: line-through;
}

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

/* Headings
------------------------------------------------------- */
h1,h2,h3,h4,h5,h6{
	font-family: var(--altFont);
	text-rendering: optimizelegibility;
}

h1 {
	font-size: 2em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.5em;
}

h4 {
	font-size: 1.4em;
}

h5 {
	font-size: 1.2em;
}

h6 {}

/* Specific headings
------------------------------------------------------- */

/* Links
------------------------------------------------------- */
a{
	text-decoration: none;
	color:inherit; /*makes the link the same colour as whatever the thing is that its in h3 h4 p etc*/
}

a:hover{
    text-decoration: underline;
}
a.lnk:hover {
	text-decoration:underline;
	color: var(--main-color);
}

a:active,
a:visited{
	text-decoration: none;
}

/* Blockquote
------------------------------------------------------ */
blockquote {
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid #f8f8f8;
	margin: 0 0 1.5em 0;
	padding: 2em;
}

blockquote p {
	font-size: 1.6em;
	font-style: italic;
	margin-bottom: 1em;
}

blockquote footer, blockquote cite {
	font-size: 1.4em;
	line-height: 1.5;
}

q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

cite {
	font-style: normal;
}

/* Base Article Typography
------------------------------------------------------- */

/*Unified heading colors*/
#pm .art h2,
#pm .art h3,
#pm .art h4,
#pm .art h5 {}

/*to ensure a clear break after a paragraph*/
#pm .artp p {}

#pm .art h3,
#pf .art h3 {}

#pm .art h2,
#pf .art h2 {}

#pm .artp ul {
	list-style-type:disc;
	margin:1em 1.5em;
}

#pm .artp ul.nobullets {
	list-style-type:none;
	margin:.5em 0;
}

#pm .artp ol {
	list-style-type:decimal;
	margin:1em 1.5em;
}

#pm .artp img {}
#pm .artp a {}

#pm .artp a {
	color:var(--main-color);
}

/* -------------------------------------------------------------------------------------
=Buttons 
------------------------------------------------------------------------------------- */
.submit,
a.btn {
	font-family:var(--altFont);
	font-size: 1em;
	padding: .5em;
	border: none;
	text-align: center;
	border-color: inherit;
	cursor: pointer;
	border: none;
	color: #fff;
	text-align: center;
	text-transform: uppercase;
	background-color: var(--main-color);
}

/* iphone specific overrides */
textarea,
input.text,
input[type="text"],
input[type="button"],
input[type="submit"],
input[type="image"],
input#searchbox,
.input-checkbox {
	-webkit-appearance: none;
	border-radius: 0;
	font-size:1em;
}

td a.btn{
	display:block;
}

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

.submit:hover,
a.btn:hover {}


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

/* Defaults 
------------------------------------------------------- */
table {
	border:1px #e8e8e8 solid;
	/*stops that stupid break between cells */
	border-collapse:collapse;
	min-width: 100%;
	font-size: 1em;
}

thead,
tbody {
 display: contents;
}

/*set table headers */
table th {
	font-family: var(--mainFont);
	color:var(--bgalt-color);
	font-weight:600;
	text-align:left;
	padding:.5em;
	width:auto;
}

/* for when no header has been used in the code !*/
table tbody tr:first-child td{
	font-family: var(--mainFont);
	color: #000;
	text-align:left;
	padding:.5em;
}

table tr td {
	padding:.5em;
	vertical-align:middle;
	font-size:1em;
}

th,
td {
 padding: .5em;
 overflow: hidden;
 text-overflow: ellipsis;
 white-space: nowrap;
 text-align:left;
}

tr:nth-child(even) td {
 background: #f8f8f8;
}

/*ensures font size for a p in a table is the same as it is for text that is NOT in a p block */
table tr td p,
table tr td li {
	font-size:1em;
}

#pm .artp table td p {
	font-size:1em;
}

table th:first-child {}

table tr:nth-child(odd) {
	background-color:#e8e8e8;
}

/* Order
------------------------------------------------------- */
table.order {
	width:100%;
	margin-bottom:1em;
}

.ordinfo a.btn.print {
	background-color:#e8e8e8;
	border-color:#e8e8e8;
	margin-left:1em;
}

/* Quotations
------------------------------------------------------- */
table.quotationlist,
table.quotationlines,
table.quotation {
	border-collapse:collapse;
	width:100%;
	max-width:100%;
}

table.quotationlist th.quoteNo,
table.quotationlist th.ref,
table.quotationlist th.value,
table.quotationlist th.expires,
table.quotationlist th.viewQuote,
table.quotationlist th.addQuote {
	width:auto;
}

table.quotationlist	a.btn[title="Download Quote"] {
	font-family: var(--mainFont);
	font-size:1em;
	padding:0;
	text-align:center;
	cursor:pointer;
	background-color:transparent; 
	border:none;
	outline:none;
	color:var(--bgalt-color);
	display:inline-block;
}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	padding:1em;
	grid-column: 1 / -1;
	/* grid-row:  1; */
}

/* -------------------------------------------------------------------------------------
=Forms
------------------------------------------------------------------------------------- */
/* Defaults
------------------------------------------------------- */
.form {
	padding:1em;
}

.form .bt {}

.form .bt h3 {}

.form h5 {}

.form li select,
.form li textarea,
.form li input {
	grid-column:2;
	width:100%;
}

.form li {
	/* try grid layout */
	display:grid;
	grid-template-columns:minmax(auto, 1fr) 3fr 1em;
	grid-gap:.25em;
}

.form label {
	grid-column:1;
	display:inline-block;
	vertical-align:top;
	text-align:right;
}

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

.form li.help,
.form li.info {
	display:inline-block;
	width:100%;
}

.form form {}
.form li {
	margin-bottom:.5em;
}

.form ul.radio {}
.form ul.radio li {
	display:inline-block;
	margin:1em;
	text-align:center;
}

.form ul.radio li input{
	padding:0;
	font-size:initial;
	max-width:unset;
	width:auto;
}

.form form .submit {}

/* captcha */
.form .g-recaptcha{
	grid-column:2;
	text-align:center;
}

/* fix for checklists*/
.form ul.check {
	max-width: 100%;
	columns:3;
	 -webkit-columns: 3;
	-moz-columns:3;
}

/* Sign In
------------------------------------------------------- */
.form#psign{}

/* as labels aren't being used - placeholders are */
.form#psign select,
.form#psign textarea,
.form#psign input {
	grid-column:1/3;
	text-align: left;
	width:100%;
}

.form#psign .exstreqsubmit input.submit{
	grid-column:1;
	justify-self:start;
	width:auto;
	margin-left:0;
}

.form#psign .exstfgtpwd {
	display:inline-block;
	font-weight:400;
}

.form#psign .exstreglnk{
	display:inline-block;
}

.form#psign .exstreglnk h5{
	font-weight:400;
	color:#1d1d1d;
}

.form#psign .exstreglnk h5 a{
	text-decoration:underline;
	text-decoration-color: var(--main-color);
}

/* Register
------------------------------------------------------- */
.form#preg{}

/* as labels aren't being used - placeholders are */
.form#preg select,
.form#preg textarea,
.form#preg input {
	grid-column: 2;
	text-align: left;
	justify-self: end;
}

.form#preg input#subscribe {
	
width: auto;
	
justify-self: left;
}

.form#preg input + img {
	grid-column: 1;
	grid-row: 1;
}

.form#preg input.submit {
	grid-column: 1 / -1;
	justify-self: center;
	/* margin-left:0; */
	text-align: center;
	width: 50%;
}

/* Forgotten Password
------------------------------------------------------- */
.form#pwrem{}

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

/* Checkout (Sign In)
------------------------------------------------------- */
.checkoutsignin #pm .form#psign,
.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 {
}

/***********************************************************************/
/* JQuery Nav menu                                                     */
/***********************************************************************/

#pc .dept{
    max-width: 100%;
    position: relative;
    display: inline-block;
}

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

#jnav li{
    float: left;
    padding: 0px 0px;
}

#jnav li.pipe{
    display: none;
}


/***********************************************************************/
/* Tabs                                                                */
/***********************************************************************/

#jnav li.nav a, #jnav li.navcurr a {
    display: block;
    padding: 24.5px 1.8em;
    color: #fff;
    text-decoration: none;
    text-align: center;
}

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

#jnav li.navcurr a:hover{
}



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

/***********************************************************************/
/* Drop down                                                           */
/***********************************************************************/
#jnav li.nav ul.snav,
#jnav li.navcurr ul.snav{
    position: absolute;
    display: none;
    width: 1196px;
    padding: 0;
    background-color: #f5f5f5;
    outline: 1px #555 solid;
    left:0px;
}

#jnav li.nav ul.snav li,
#jnav li.navcurr ul.snav li
{
    position: relative;
    display: inline;
    width: 96%;
    margin: 0;
    padding: 4px;
}


#jnav li.nav ul.snav li.depts,
#jnav li.navcurr ul.snav li.depts{
    width:226px;
    max-width:initial;
    max-height:initial;
    /* outline:1px red solid; */
    border:none;

}

#jnav li.nav ul.snav li a,
#jnav li.navcurr ul.snav li a{
    padding:10px;
    margin: 0;
    height: auto;
    width:90%;
    color: #7d7d7d;
}

#jnav li.nav ul.snav li a:hover,
#jnav li.navcurr ul.snav li a:hover{
    width:90%;
}


#pc #m8 > ul {
    display: none !important;
}


/* Banners */
#jnav li.nav ul.snav li.bnrs,
#jnav li.navcurr ul.snav li.bnrs{
}

#jnav li.nav ul.snav li.bnrs .bnr,
#jnav li.navcurr ul.snav li.bnrs .bnr{
}

#jnav li.nav ul.snav li.bnrs .bnr a,
#jnav li.navcurr ul.snav li.bnrs .bnr a
{
    width: 180px;
    margin: 0;
    padding: 0;
}

/* Level 1 dept header */
#jnav li.nav ul.snav li.depts a,
#jnav li.navcurr ul.snav li.depts a{
    width: auto;
    /* width: 200px; */
    padding: 5px 5px;
    font-size: 12px;
    color: #555;
    text-align:left;
}

#jnav li.nav ul.snav li.depts a.l1,
#jnav li.navcurr ul.snav li.depts a.l1{
    font-size:12px;
    font-weight:600;
    color: #000;
}

#jnav li.nav ul.snav li.depts a.l1:hover,
#jnav li.navcurr ul.snav li.depts a.l1:hover{
}

/* Level 2 depts */
#jnav li.nav ul.snav li a.l2,
#jnav li.navcurr ul.snav li a.l2 {
    width: 200px;
    padding: 0.5em 0.5em 0.25em 1em;
}

#jnav li.nav ul.snav li.depts a:hover, #jnav li.navcurr ul.snav li.depts a:hover
{
    color: #b67965;
    background-color:transparent;
}

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

#pc .dept .bc
{
    float: left;
    background-color: transparent;
    width: auto;
}

#pc .dept ul
{
    float: left;
    width: 1293px;
    padding: 0;
    list-style-type: none;
    list-style-position: outside;
    position: relative;
    z-index: 1001;
}

#jnav li {
    float: left;
    min-height: 61px;
}
#jnav li:first-child {
}

#jnav li:last-child {
}

#jnav #m0 a {
    padding-top: 16px;
    padding-bottom: 10px;
}


/* centering links */
/* single line */
li#m0 a, li#m2 a, li#m3 a, li#m5 a, li#m6 a, li#m8 a {
    /* padding: 22.5px 0; */
}

/* two lines */
li#m4 a, li#m7 a {
    /* padding: 14.5px 0; */
}

/* three lines */


/***** mikes 3 colum stuff! 



there are 3 columns, alldepts, prods and arts
prods and arts show if setup in the department in coms
need to decide how many columns you want in total

1170
 3 columns of depts
 1 column for product
 1 colum for article

bare in mind that the fprd settings are controlled elsewhere so take that off site width first-child

.fprd width is 260

910 width available for dept and article

*****/

#jnav li.nav ul.snav li{
    vertical-align:top;
    border: 0px;
}

#jnav li.nav ul.snav li.alldepts{
    float:left;
    width: 908px;
    /* outline:1px red solid; */
}

li.alldepts ol{
    /*depts are in ol not ul */
    float:left;
    list-style-position:inside;
    float:left;
    /* outline:1px orange solid; */
}

#jnav li.nav ul.snav li.alldepts li.depts{
    /* outline:1px blue solid; */
    font-size:15px;
    width:220px;
    /* min-height: 72px; */
    display:inline-block;
    list-style-position:inside;
    float:left;
    margin:0;
    padding:0px;
    /* padding-left:5px; */
    text-align:left;
    height: auto;
}

#jnav li.nav ul.snav li.prods{
    /*may need to sort out other widths as .fprd is set elsewhere */
    float: right;
    clear: right;
    width: 276px; /*same as .fprd*/
    padding: 0px;
    border: 1px solid #d5d5d5;
    border-bottom: 0px;
}

#jnav li.nav ul.snav li.prods .qty{
    display:none;
}

#jnav li.nav ul.snav li.prods .trade{
    display:none;
}

#jnav li.nav ul.snav li.prods .fprd {
    min-height: 374px;
    margin:0px;
}

#jnav li.nav ul.snav li.prods .fprd a {
    width: 100%;
    padding: 0px;
}
#jnav li.nav ul.snav li.prods .fprd a:hover {
    background-color: #fff;
}

#jnav li.nav ul.snav li.prods .fprd .fprdtitle a {
    width: 240px;
    color: #000;
    /* min-height: auto; */
    padding: 0px 10px;
}
#jnav li.nav ul.snav li.prods .fprd .fprdtitle a:hover {
    background-color: #f5f5f5;
    width: 240px;
}

#jnav li.nav ul.snav li.prods .fprd h5.clientref {
    max-width: 240px;
    margin-top: 5px;
    padding: 0px 10px;
    font-size: 12px;
}

#jnav li.nav ul.snav li.prods .fprd .packsize {
    margin-left: 17px;
}

#jnav li.nav ul.snav li.prods .fprd .price {
    width: 240px;
    margin: 0 10px;
}
#jnav li.nav ul.snav li.prods .fprd .price h6 {
    width: 240px;
}

#jnav li.nav ul.snav li.prods .fprd form {
    /* position: relative; */
}

#jnav li.nav ul.snav li.arts{
    float: right;
    clear: right;
    width: 241px;
    padding: 0px 10px 10px;
    border-left: 1px solid #555;
    /* outline:1px black solid; */
}

#pc .art.menuArt {
    width: 222px;
}
#jnav li.nav ul.snav li.arts h3{
    margin-bottom:10px;
    font-weight: 600;
}

#pc .art.menuArt p {
    font-size: 14px;
    line-height: initial;
    font-weight: 400;
    text-transform: none;
}


/***********************************************************************/
/* -------------------------------------------------------------------------------------
=Breadcrumb	 
------------------------------------------------------------------------------------- */
.bdcb{
    /* background: #fff; */
}

.crumb {
	display:block;
	/* padding:.5em 0; */
	text-align:left;
	font-size:.875em;
}

.crumb li{
	display:inline-block;
	vertical-align:middle;
}

.home .crumb {
	/*
		as a rule we don't want to show the breadcrumb on the home page, but it is written out anyway
		needs fixing by a dev
	*/
	display:none;
}

/*for the break between the crumb*/
.crumb li:after {
	content:">";
	display:inline-block;
	color:var(--main-color);
	vertical-align:middle;
	margin:0 .5em;
	font-weight:400;
	font-size:0.750em;
}

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

.crumb a,
.crumb h1,
.crumb h3 {
	display:inline-block;
	/* unify font */
	font-family: var(--mainFont);
	font-size:1em;
	color: var(--main-color);
	margin:0;
}

.crumb h1 span{
	font-weight:600;
}

.bdcb .bt,
.bdcb .bb{
    display: none;
}

.bdcb .bc ul{

}

.bdcb .bc ul li{
    display: inline;
    padding: 0;
    padding-right: 5px;
}

ul.crumb li:first-child {
    display: none;
}

.bdcb .bc ul li h3, 
.bdcb .bc ul li a {
    margin: 0;
    padding: 10px 3px;
    font-size: 12px;
    font-weight: 600;
    color:#777;
    text-transform:uppercase;
}
.bdcb .bc ul li a {
    color: #dc381d;
}

.bdcb .bc ul li h1{
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color:#777;
    text-transform:uppercase;
}

.bdcb .bc ul li a:hover{
}

.bdcb .bc ul li img {
    padding: 14.5px 0;
}

/* -------------------------------------------------------------------------------------
=Jquery Base Overrides 
------------------------------------------------------------------------------------- */
.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(--main-color);
	background: var(--main-color);
	font-weight: normal;
	color: #ffffff;
}
.ui-icon-background,
.ui-state-active .ui-icon-background {
	border: var(--main-color)
	background-color: #ffffff;
}

/* -------------------------------------------------------------------------------------
=OwlCarousel Overrides
------------------------------------------------------------------------------------- */
/* base settings */
.carousel {
	position:relative;
	margin-bottom:1em;
}

.owl-stage-outer{
}

/* this should be the title for the carousel */
.carousel h2{
	display:inline-block;
	width:100%;
	vertical-align:middle;
	text-align:center;
	padding:.25em 0;
	margin:1em 0;
	font-size:1.2em;
	font-weight:600;
}
.carousel:hover {
	cursor:-moz-grab;
	cursor:-webkit-grab;
	cursor:grab;
}

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

.owl-carousel .owl-item img {}

.owl-theme .owl-controls {
	/*going with a hardline of this is at the bottom of the carousel (not over anything) and centered */
	text-align:center;
	margin-top:1em;
	font-size:.875em;
	display: none;
}

.owl-theme .owl-nav {
	/*going with a hardline of not showing the arrows/nav */
	display:none;
}

.owl-nav .owl-prev,
.owl-nav .owl-next {}
.owl-prev {}
.owl-next {}

.owl-theme .owl-nav .disabled {}
.owl-theme .owl-dots {}
.owl-theme .owl-dots .owl-dot {
	display:inline-block;
	vertical-align:top;
}
.owl-theme .owl-dots .owl-dot span {
	display:inline-block;
	vertical-align:top;
	width:1em;
	height:1em;
	margin:.5em;
	border-radius:50%;
	background-color:#ffffff;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
	background-color: var(--main-color);
}
.owl-theme .owl-item img {}


/* 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;
	position:relative;
	background-color:#ffffff;
}
.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 */
#pm .carousel .piflags,
#pm .carousel .flag {
	grid-row:1;
	grid-column:1/4;
	text-align:left;
	vertical-align:top;
	align-items:start;
	align-self:start;
	padding:.5em;
	box-shadow: none;
	border: none;
}

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

/* -------------------------------------------------------------------------------------
=AccordionBase 
------------------------------------------------------------------------------------- */
ul.accordion {}

#pm li.address,
#pm li.inst {}

/* Header including hide/show icons 
------------------------------------------------------- */
.accordion .header {
	font-family:var(--altFont);
	background-color:var(--main-color);
	color:#ffffff;
	font-size: 1em;
	margin:0;
	position:relative;
	cursor:pointer;
	padding:.5em;
}

.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 {
	font-size:.825em;
}

#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 {}

/* -------------------------------------------------------------------------------------
=Autocomplete 
------------------------------------------------------------------------------------- */
.ui-helper-hidden-accessible {
	display:none;
}

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

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

.ui-menu-item a {
	display:inline-block;
	width:98%;
	padding:0 1%;
}

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

.foundProduct {
	display:inline-block;
	vertical-align:top;
	width:20%;
}

.foundProduct img {
	width:100%;
	max-width:80px;
	height:auto;
}

.foundProductTitle {
	display:inline-block;
	width:78%;
	font-size:.750em;
	margin:1%;
}

.foundProductRef {
	display:none;
}

.foundProductDesc {
	display:none;
}

.foundProductDesc {}

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

#ewis label {
	color:#61666b
}

.fprd .ewis {
	grid-column:1/4;
	grid-row:8;
	font-size:.8em;
	padding:1em;
}

a.lnk.ewisopen,
a.lnk.ewis {
	display:block;
	height:auto;
	background:#61666b;
	color:var(--bgalt-color);
	font-weight:600;
	padding:1%;
	text-align:center;
	text-transform:capitalize;
	width:98%;
}

.lnk.ewisopen:hover {
	text-decoration:none;
}

/* -------------------------------------------------------------------------------------
=HoverBsket 
------------------------------------------------------------------------------------- */
.hoverbskt {
	padding: 0.5em;
	background-color: #ffffff;
	border:1px solid var(--bgalt-color);
	box-shadow:5px 5px 5px rgba(0, 0, 0, 0.5);
	width: calc(232px - 1em);
	z-index:1001;
}

.hoverbskt h3 {
	font-size: 1.25em;
	padding: .25em;
	text-align:center;
	border-bottom: 1px solid #555;
	margin: 0 0 0.5em 0;
}

.hoverbskt .lines {}
.hoverbskt .lines .item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.hoverbskt .lines .item:last-child {}
.hoverbskt .formupdate {}
.hoverbskt .formupdate input {}
.hoverbskt .formupdate input.submitQtyChange {}
.hoverbskt a,
.hoverbsktadd a {
	font-size: 0.825em;
}
.hoverbskt a.btn {
    width: 95%;
    display: inline-block;
}
.hoverbskt .lines .item a.title {grid-row: 1;grid-column: 2;}
.hoverbskt .lines .item img {grid-row: 1;grid-column: 1;}
.hoverbskt .lines .item p.descr {}
.hoverbskt .lines .item p.qty {
    grid-row: 2;
    grid-column: 1/-1;
    text-align: right;
    padding: 0.25em 0;
    font-size: 0.8em;
}
.hoverbskt .lines .item p.price {
    grid-row: 3;
    grid-column: 1/-1;
    text-align: right;
    font-size: 0.8em;
}
.hoverbskt h4.count {
	font-size: 1.25em;
	text-align: right;
	padding: 0.25em 0;
	border-top: 1px solid #555;
	margin: 0.25em 0 0 0;
}
.hoverbskt h4.total {
	font-size: 1.4em;
	padding: 0.25em 0;
	text-align: right;
}

/* -------------------------------------------------------------------------------------
=PopupDialog / Popup Add to Basket / Direct Despatch
------------------------------------------------------------------------------------- */
.hoverbsktadd,
#popupdialog {
	position:fixed;
	top:25%;
	left:25%;
	width:calc(50% - 1em);
	padding:.5em;
	z-index:2000;
	border:2px #1d1d1d solid;
	background-color:var(--bgalt-color);
	display:none;
	text-align:center;
}

.hoverbsktadd .item,
#popupdialog .item {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	grid-gap:.25em;
}

.hoverbsktadd .item img,
#popupdialog .item img{
	/* why won't this element align as i want it too!!!! */
	grid-column:1/3;
	grid-row: 1;
}

.hoverbsktadd h3,
#popupdialog h3 {}
.hoverbsktadd a,
#popupdialog a {}
.hoverbsktadd .item a.title,
#popupdialog .item .title {
	grid-column:1/3;
	grid-row:2;
	text-align:center;
}

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

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

/* this element needs a class */
.hoverbsktadd a[title="Checkout"] {
	font-family: var(--mainFont);
	font-weight:600;
	font-size:1em;
	margin:.5em;
	padding:.5em .5em;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	color:#ffffff;
	font-weight:600;
	display:inline-block;
	vertical-align:middle;
	background-color:#fd6a02;;
}

.hoverbsktadd a[title="Checkout"]:hover {}
#popupdialog .useraccount {}
#popupdialog .useraccount input {}
#popupdialog .useraccount a {}

/* media queries for viewports start BIG and go small
 outside of this it used the default
--------------------------------------- */
/* under 400px wide, go wider */
@media screen and (max-width:400px ){
	.hoverbsktadd,
	#popupdialog {
		left:2.5%;
		width:calc(95% - 1em);
	}
}

/* -------------------------------------------------------------------------------------
=Messages 
------------------------------------------------------------------------------------- */

#mess{
	background-color:#ffffff;
	padding:1em;
	margin:1em 0;
}

.warn{
	color:red;
}

/* OOS and DDS popup 20/11/14 */
.outofstockdialog,
.directdespatchdialog {}
.outofstockdialog .outofstockpopup,
.directdespatchdialog .directdespatchpopup {}
.outofstockdialog span,
.directdespatchdialog span {}
.outofstockdialog .outofstockpopup .oosheader,
.directdespatchdialog .ddheader {}
.outofstockdialog .outofstockpopup .oosmessage,
.directdespatchdialog .ddmessage {}
.outofstockdialog .outofstockpopup .oosmessage .oosdate,
.directdespatchdialog .dddate {}
.ui-dialog-titlebar {}
.outofstockdialog .ui-widget-content {}
.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.directdespatchdialog .ui-widget-content .ui-dialog-buttonset button {}


/* Out of Stock, Direct Despatch
------------------------------------------------------- */
.ui-dialog.outofstockdialog,
.ui-dialog.directdespatchdialog {}	
.ui-dialog.outofstockdialog .outofstockpopup,
.ui-dialog.directdespatchdialog .directdespatchpopup-pane {}
.ui-dialog.outofstockdialog .outofstockpopup .oosheader,
.ui-dialog.directdespatchdialog .ui-widget-header {}
.ui-dialog.directdespatchdialog .ui-widget-header {}
.ui-dialog.directdespatchdialog .ui-widget-header .ui-dialog-titlebar-close {}
.ui-dialog.outofstockdialog .outofstockpopup .oosmessage .oosdate {}
.ui-dialog.outofstockdialog .ui-dialog-titlebar {}
.ui-dialog.outofstockdialog .ui-widget-content,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane {}
.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset {}
.ui-dialog.outofstockdialog .ui-widget-content .ui-dialog-buttonset button,
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}
.ui-dialog.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button:first-child {}
.directdespatchdialog .ui-dialog-buttonpane .ui-dialog-buttonset button {}
#directdespatchpopup-pane span.ddproduct {}
.ddmessage {}
.ddmessage span.dddatemessage {}
.ddmessage span.dddate {}

/* -------------------------------------------------------------------------------------
=SiteContainer
------------------------------------------------------------------------------------- */
#site {
	width:100%;
	/* max-width: 1200px; */
	margin:auto;
	font-size:16px;
	font-weight:normal;
	text-align:left;
	-webkit-text-size-adjust:100%;
	background: #fff;
}

/* -------------------------------------------------------------------------------------
=FIXEDTop Panel
------------------------------------------------------------------------------------- */
#ptf{
	top:0px;
	z-index:2002;
	width: 100%;
	min-width: 1200px;
	background-color: #f2f3f5;
	color:var(--text-color);
}

#ptf .ext {
	width: 1280px;
	margin: 0 auto;
	position: relative;
	text-align:right;
	display: grid;
}




/* top links
------------------------------------------------------- */
#ptf .info {
	display:inline-block;
	vertical-align:middle;
	grid-row: 1;
	grid-column: 2;
}

#ptf .info .bt {
	display: none;
}

#ptf .info li{
	display:inline-block;
	font-size:.813em;
	padding:0 .5em;
}

#ptf .info li a{
	display:inline-block;
	padding:1em 0;
}

#ptf .info li a:hover{}

/* Top content/contact 
------------------------------------------------------- */
#ptf .art{
	display:inline-block;
	vertical-align:middle;
}

#ptf .artp,
#ptf .imgcont{
	display:inline-block;
	vertical-align:middle;
	font-size:.813em;
	padding:0 .5em;
}



/* vat switch 
------------------------------------------------------- */
.vatsw {
	grid-column: 1;
	grid-row: 1;
	height: 37px;
	margin-left: 20px;
	font-weight: 600;
}
.vatsw p {
    float: left;
    line-height: 37px;
}
#vatswitch {
    height: 37px;
    font-size: 0.7em;
    letter-spacing: 1px;
}
.vatsw form input {
    width: 34px;
    height: 24px;
    margin: 6px 0 7px;
    background-color: #dfdfdf;
    -webkit-appearance: none;
}
.vatsw form input[checked="checked"] {
    background-image: url('/csi/3440640/4259840/i/bdr/vatswitch.png');
    background-repeat: no-repeat;
}
#vatswitch div:nth-child(1) {
}
#vatswitch div:nth-child(1) label {
    float: left;
    margin-right: 5px;
    border-radius: 5px 0 0 5px;
    line-height: 37px;
}
#vat_yes {
    float: left;
    border-radius: 5px 0 0 5px;
}
#vatswitch div:nth-child(2) {
    float: left;
}
#vatswitch div:nth-child(2) label {
    float: right;
    margin-left: 5px;
    line-height: 37px;
}
#vat_no {
    float: right;
    border-radius: 0 5px 5px 0;
}


/* -------------------------------------------------------------------------------------
=PanelTop 
------------------------------------------------------------------------------------- */
#pt {
	position: relative;
	padding: 2em 0 1em 0;
	width: 100%;
	min-width: 1130px;
	color: #0f0f0f;
	border-bottom: 1px solid #d9d9d9;
	border-top: 6px solid #3f7355;
	margin: 0;
}

#pt .ext {
	margin: 0em auto;
	padding: 0;
	position: relative;
	width: calc(1280px - 2em);
	display: grid;
	grid-template-columns: 20% 18% 24% 18% 20%;
}

#pt ul {
	/* typically we dont want bullet styles*/
	list-style: none;
	list-style-position: inside;
	display: inline;
}

/* Site Logo
------------------------------------------------------- */
#pt .pbnr {
	display:inline-block;
	vertical-align:middle;
}

#pt .pbnr.ps {
	grid-column: 1;
	grid-row: 1;
}

#pt .pbnr.ps .logo {
	margin: 1em 0 0 0;
}

/* top phone number
------------------------------------------------------- */
#pt .art {
	display:inline-block;
	vertical-align:middle;
}

/* top contact stuff
------------------------------------------------------- */
#pt .art.topcontact {
	display: inline-block;
	vertical-align: middle;
	grid-column: 2;
	grid-row: 1;
	color: #5a353d;
}

#pt .art.topcontact p {
	font-size: 1.8em;
	font-weight: 700;
}

#pt .art.topcontact p a {
	font-size: 0.5em;
	color: #b67965;
}

/* signin and register
------------------------------------------------------- */
#ptf .info:first-of-type {
	grid-row: 1;
	grid-column: 3;
}

#pt .info {
	display:inline-block;
	vertical-align:middle;
}

#pt .info li{
	display:inline-block;
	vertical-align:middle;
}

#pt .info li.pipe {
	display: none;
}

/* signin and register
------------------------------------------------------- */
#pt .search + .info {
	grid-row: 1;
	grid-column: 4;
	padding: 0em 0 0 2em;
}

#pt .search + .info ul li {
	padding: 0.5em;
}

#pt .search + .info ul li a {
	color: #b67965;
	text-align: center;
	display: block;
	position: relative;
}

/*quick order */

#pt .qord {
    grid-column: 2;
    grid-row: 2;
    display: inline-block;
}

#pt .qord .bt{
    display:none;
}

#pt .qord .bc {
	margin-left: 13em;
	margin-top: 1em;
}

#pt .qord input.inputtext{
    width:50px;
    height:32px;
    clear:none;
    margin-right:15px;
    padding-left:5px;
}

#pt .qord input.inputtext_light{
    width:50px;
    height:32px;
    clear:none;
    margin-right:15px;
    padding-left:5px;
}

#pt .qord  label{
    line-height:38px;
    margin-right:10px;
}

#pt .qord #qosubmit {
	width: 6.5em;
}

/* Search
------------------------------------------------------- */
#pt .search {
    grid-column: 3;
    grid-row: 1;
    display: inline-block;
} 

#pt .search .bc {
	padding: 0;
}

#pt .search form{}
	
#pt .search label {
	display: none;
}

#pt #searchbox {
	background-color: #f4f4f4;
	border: 1px solid var(--bg-color) !important;
	border-radius: 10px 0px 0px 10px;
	display:inline-block;
	vertical-align:middle;
	color:var(--text-color);
	outline:0;
	width: 260px;
	padding: 0.5em 0.5em 0.5em 1em;
}

/*sort the placeholder color*/
#pt #searchbox::-webkit-input-placeholder { /* WebKit, Blink, Edge */
	color:var(--bg-color);
}
#pt #searchbox:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
 opacity: 1;
 color:var(--bg-color);
}
#pt #searchbox::-moz-placeholder { /* Mozilla Firefox 19+ */
 opacity: 1;
 color:var(--bg-color);
}
#pt #searchbox:-ms-input-placeholder { /* Internet Explorer 10-11 */
	color:var(--bg-color);
}
#pt #searchbox::-ms-input-placeholder { /* Microsoft Edge */
	color:var(--bg-color);
}

#pt #searchbox:focus{
	outline: 0;
	border: none;
}

#pt .search input#search {
	display:inline-block;
	vertical-align:middle;
	outline: 0;
	background-color: transparent;
	width: 36px;
	border: 1px solid #d7d7d7;
	border-left: none;
	border-radius: 0px 10px 10px 0px;
}

#pt .search input[type="submit"] {}

/* Basket
------------------------------------------------------- */
#pt .bskt {
	text-align:center;
	grid-column: 5;
	grid-row: 1;
	padding: 0em 0 0 3em;
	background-image: url('/csi/3440640/4259840/i/bdr/trolley-icon.png');
	background-repeat: no-repeat;
	background-position: left 12%;
	background-size: 40px;

	/*width needs to be set and match the hoverbasket width */
	width:200px;
}

#pt .bskt .bc {}
#pt .bskt .bt {}

#pt .bskt h3,
#pt .bskt h4 {
	font-size: 0.825em;
	padding:.5em;
}

#pt .bskt #mybskt{
	display:grid;
	padding:0 .5em;
	grid-template-columns:1fr 1fr;
	grid-gap:.25em;
}

#pt .bskt #mybskt h4{
	grid-column:1/3;
	display: none;
}

#pt .bskt #bsktitems {
	font-size: 12px;
}
#pt .bskt #bsktitems span{}

#pt .bskt #bsktvalue {
	font-size: 12px;
}
#pt .bskt #bsktvalue span{}
#pt .bskt span {}
#pt .bskt a.btn {}

#viewbskt {
	grid-column: 1 / -1;
	padding: 0.25em;
}

#pt .bskt a.btn img {}

/* -------------------------------------------------------------------------------------
=CentrePanel 
------------------------------------------------------------------------------------- */
#pc {
	width: 100%;
	min-width: 1200px;
	display: inline-block;
	    background:
    	linear-gradient(#eeeff0, #eeeff0) 0px 564px no-repeat,
		linear-gradient(#2b2a28, #2b2a28) 0px 71px no-repeat,
		linear-gradient(#b67965, #b67965) 0 0 no-repeat, repeat-x top center;
    background: 
		-webkit-gradient(linear, 0 0, 0 100%, from(#eeeff0), to(#eeeff0)) 0px 564px no-repeat,
		-webkit-gradient(linear, 0 0, 0 100%, from(#2b2a28), to(#2b2a28)) 0 71px no-repeat,
		-webkit-gradient(linear, 0 0, 0 100%, from(#b67965), to(#b67965)) 0 0 no-repeat;
    background: 
		-moz-linear-gradient(#eeeff0, #eeeff0) 0px 564px no-repeat, 
		-moz-linear-gradient(#2b2a28, #2b2a28) 0px 71px no-repeat, 
		-moz-linear-gradient(#b67965, #b67965) 0 0 no-repeat;
}

#pc .bc {
	width: 1200px;
	margin: 0em auto;
	position: relative;
	text-align:left;
}

#pc .arts,
#pc .pbnr {}

#pc .arts .bc,
#pc .pbnr .bc{
	width:auto;
}

#site.home #pc {}

#pc .bc .pbnr {}
#pc .bc .pbnr img {}
#pc .bc .pbnr h3 {}

/* -------------------------------------------------------------------------------------
=MainPanel 
------------------------------------------------------------------------------------- */

#pmid {
	width:1200px;
	clear: both;
	margin: 0 auto;
	padding: 0;
	position: relative;
	display:flex;
	min-height:40vh;
}

#pm {
	/* clear: both; */
	/* width:1200px; */
	margin: 0 auto;
	position: relative;
}

/*should only be pmwide if a left panel is in use*/
#pm.pmwide {
	width: 80%;
}

#pm.pmfull {
	width: 1200px;
	background-color:transparent;
}

.home #pm .pmind {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

/* Articles
------------------------------------------------------- */

.art {
    grid-column: 1 / -1;	
}

#pm .art.hpWelcome {
    display: grid;
    grid-template-columns: 50% 50%;
    grid-column: 1 / -1;
    padding: 1em;
}

#pm .art.hpWelcome .imgcont {
	grid-column: 1;
}

#pm .art.hpWelcome .artp {
	/* grid-column: 2 / 2; */
	padding: 0 0 0 1em;
}

#pm .art.hpWelcome .artp h3 {
	padding: 0 0 1em 0;
}

#pm .art.hpWelcome .artp .sp {
	padding: 1em 0;
	font-size: 0.8em;
	color: #7b7b7b;
}

.art.twoThirdsW {
	grid-column: span 4;
	padding: 1em;
}

.art.thirdW {
	grid-column: span 2;
	padding: 1em;
}

.art.fullW {
	grid-column: 1 / -1;
}

.art.infoBar {
	background-color: #2b2a28;
	color: #fff;
	text-transform: uppercase;
	font-size: 0.8em;
	text-align: center;
	padding: 0.5em;
}

.art.infoBar .btn {
	background-color: #d2a272;
	display: inline-block;
	padding: 0.75em;
	border-radius: 8px;
}

.art.infoBar .info {
	display: inline-block;
	padding: 0 1em;
}

.art.infoBar .lnk {
	display: inline-block;
}

/* Banners
------------------------------------------------------- */

.pbnr .bt {
	display: none;
}

#pm .pbnr {

}

#pm .pbnr .bc {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(350px, 1fr) );
}

#pm .pbnr .bnr.threewide {
	margin-bottom: 2em;
}

.page_home .pbnr .bnr a.txt {
    display: block;
    width: 87.5%;
    padding: 0.25em 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    background-color: rgba(85,85,85,0.6);
    text-align: center;
}

.page_home .pbnr .bnr a.txt:hover {
    text-decoration: none;
    background-color: #555555;
}


/* -------------------------------------------------------------------------------------
=RightPanel 
------------------------------------------------------------------------------------- */
#pr {
	width: 25%;
	padding:1em;
}

/* -------------------------------------------------------------------------------------
=LeftPanel 
------------------------------------------------------------------------------------- */

#pl {
	width: calc(20% - 1em);
	margin-right:1em;
}

#pl .bt h3 {
	font-size: 1em;
	padding: .5em;
	font-family: var(--mainFont);
	background-color:var(--main-color);
	color:#ffffff;
}

#pl .bc {
	/* padding:.5em 0; */
}
#pl .bc #sldiv {}
#pl p {}
#pl a {}
#pl a:hover {}
#pl .bb {}
#pl .dept{}
#pl .dept .bc{}
#pl .dept .bc li{}
#pl .dept ul{}
#pl .dept ul li{}
#pl .dept ul li a{}
#pl .pbnr {}
#pl .bnr {}
#pl .bnr span {}


/* -------------------------------------------------------------------------------------
=FooterPanel
------------------------------------------------------------------------------------- */
#pf {
	width: 100%;
	min-width: 1130px;
	background:linear-gradient(0deg, rgba(91, 56, 54, 0.8), rgba(91, 56, 54, 0.8)), url('https://s3-eu-west-1.amazonaws.com/justwood/i/art/heritage-bg-wood.png');
	background-repeat: repeat-x;
	background-position: top left;
	background-size: auto 600px;
	padding: 1em 0;
}

#pf .ext {
	width: 1200px;
	min-width:1200px;
	margin: 0 auto;
	position: relative;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

#pf .ext .news {
}

#pf .ext .news .bc {

}

#pf .ext .news .bc form {
    display: grid;
    grid-template-columns: 45% 55%;
}

#pf .ext .news .bc label {
	grid-column: 1;
	font-size: 20px;
	line-height: 30px;
	padding: 0 0 0 4em;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	background-image: url('/csi/3440640/4259840/i/bdr/email-icon.png');
	background-repeat: no-repeat;
	background-position: left center;
}

#pf .ext .news .bc .news_input_container {
	grid-column: 2;
}

#pf .ext  .news form .inputtext, #pf .ext .news form .inputtext_light {
    line-height: 54px;
    width: 470px;
    margin: 0;
    padding: 0px 5px 0px 30px;
    border: 0px;
    border-radius: 5px 0px 0px 5px;
    font-size: 13px;
    font-weight: 600;
    color: #979797;
    letter-spacing: 2px;
    float: left;
}

#pf .ext .news form .submit {
    width: 54px;
    margin: 0px;
    padding: 0.5em;
    border-radius: 0px 5px 5px 0px;
    background-color: #fff;
}

#pf .ext .news .bt {
	display: none;
}

#pf ul {}
#pf ul li {}
#pf ul li:last-child {}


/* Typography
------------------------------------------------------- */

#pf h2,
#pf h3,
#pf h4,
#pf span,
#pf strong{}

#pf a,
#pf p{}

#pf a:hover{}

#pf h2,
#pf h3,
#pf h4{
	color:var(--main-color);
	font-size:1.5em;
	margin-bottom:.5em;
}

#pf li{}

/* Articles
------------------------------------------------------- */
#pf .art {
	vertical-align:top;
	padding:.5em;
}

/* Homepage Heritage article */

#a107970560 {
    display: grid;
    grid-template-columns: 45% 55%;
}

#a107970560 h3 {
	text-transform: uppercase;
	font-size: 0.8em;
	margin: 2em 0 1em 0;
}

#a107970560 h4 {
	font-size: 1.5em;
	color: #fff;
}

#a107970560 p {
	margin: 1em 0;
	color: #fff;
}

#a107970560 .artBtn {
	background-color: #3f7355;
	padding: 10px 9px 9px;
	border-radius: 6px;
	color: #fff;
	vertical-align: middle;
	text-transform: uppercase;
	display: inline-block;
	font-size: 0.8em;
}

/* Affiliates Article */
#a107970561 {
	display: grid;
	grid-template-columns: 30% 1fr 1fr 1fr 1fr;
	margin-top: 2em;
}

#a107970561 img {
	width: 140px;
	vertical-align: middle;
	padding: 1em;
	display: inline-block;
	margin: auto;
}

#i134840326 {
    margin-top: 1em;
}

/* Banners
------------------------------------------------------- */
#pf .pbnr{
	display:inline-block;
	vertical-align:top;
	padding:.5em;
	width:calc(25% - 1em);
}

#pf .pbnr img{
	height:auto;
}

/* Info
------------------------------------------------------- */
#pf .info{
	display:inline-block;
	vertical-align:top;
	padding:.5em;
	width:calc(25% - 1em);
}

/* Client specific
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=BottomPanel 
------------------------------------------------------------------------------------- */
#pb {
	margin: 0em auto;
	width: 100%;
	min-width: 1200px;
	display: block;
	width: 100%;
	min-width: 1130px;
	color: #fff;
	position: relative;
	background: #2c2a29 url('https://s3-eu-west-1.amazonaws.com/justwood/i/bnr/footer-twig.png') 0% 50% no-repeat;
	padding: 0;
}

#pb .ext {
	width: 1200px;
	margin:0 auto;
	position: relative;
	display: grid;
	grid-template-columns: 25% 25% 25% 25%;
	padding: 3em 0 2em 0;
}

#pb .pipe {
	display: none;
}

#pb ul {
	list-style: none;
}

#pb .info h3,
#pb .art h2,
#pb .news h3,
#pb .pbnr h3 {
	font-size:1.125em;
	padding-bottom:1em;
	color: #fff;
	font-weight: 600;
	text-transform: uppercase;
	color: #b67965;
}

#pb .info a:hover,
#pb .art a:hover{
	text-decoration:underline;
}


/* Typography
------------------------------------------------------- */

#pb h2,
#pb h3,
#pb h4,
#pb span,
#pb strong{}

#pb a,
#pb p{
}

#pb a:hover{}

#pb h2,
#pb h3,
#pb h4{}

#pb p,
#pb li {
	padding: 0 0 1em 0;
}

/* Articles
------------------------------------------------------- */
#pb .art{
}

/* Banners
------------------------------------------------------- */
#pb .pbnr {
}

#pb .pbnr {
    grid-row: 2;
    grid-column: 4;
    padding: 0 0 2em 0;
}
#pb .pbnr .bc {
	display: grid;
	grid-auto-flow: row;
	grid-template-columns: auto auto auto auto auto;
}



#pb .pbnr .bc .bnr {
    display: block;
    margin: 0.25em;
}

#pb .pbnr img {
	height: auto;
	display: block;
}
#pb #p12156937.pbnr img {
	max-width: 32px
}

#b18841600{
	grid-column:1/-1;
}

#pb #p12156937.pbnr #b18841600 img{
	max-width:100%;;
}
/* Info
------------------------------------------------------- */
#pb .info{
}



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

/* Newsletter signup;
------------------------------------------------------- */
#pb .news{

}

#pb .news .bc #email {
	background-color: #3f3832;
	border-radius: 10px 0px 0px 10px;
	display:inline-block;
	vertical-align:middle;
	color: #a39c96;
	outline:0;
	width: 200px;
	padding: 0.5em 0.5em 0.5em 1em;
}

#pb .news .bc #subscribe {
	background-color: #b67966;
	width: 60px;
	border: none;
	padding: 10px 9px 9px;
	border-radius: 0px 10px 10px 0px;
	vertical-align: middle;
}

#pb .news .bc label{
	display: none;
}

#pb .news .bc .news_input_container{}
#pb .news .bc .news_input_container .submit{}


/* Client specific
------------------------------------------------------- */


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


/* -------------------------------------------------------------------------------------
=Copyright and Managed by 
------------------------------------------------------------------------------------- */
.etailcopy {
	width: 100%;
	color: #fff;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-row: 3;
	grid-column: 1/-1;
}

/* note to use grid layout */
p.copy{}
p.etail {
    text-align: right;
}

p.copy {
	display:inline-block;
	margin-right: 1em;
}

p.copy span {}

/* -------------------------------------------------------------------------------------
=FilterSearch 
------------------------------------------------------------------------------------- */
#pl .filter{
	border:1px var(--bg-color) solid;
}

#pl .filter .bc .ContainerPanel .HeaderContent, #pl .filter .bc .ContainerPanel .HeaderContentClose {}
#pl .filter .bc .ContainerPanel .Content .citem {}
#pl .filter .bc .ContainerPanel .Content .citem:hover {}
#pl .filter .bc .ContainerPanel .Content .citem span {}
#pl .filter .bc .ContainerPanel .Content {}
#pl .filter .bc .ContainerPanel .Content .showmore {
	cursor: pointer;
}

.filter .bt {
    display: none;
}

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

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

.HeaderContent {
	font-size: 1em;
	padding: .5em;
	font-family: var(--mainFont);
	/* background-color:var(--main-color); */
	color:#ffffff;
	position:relative;
	cursor:pointer;
}

.HeaderContent:after{
	content:'\f146';
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	position:absolute;
	right:0;
	top:.5em;
}

.HeaderContent.collapsed:after{
	content:'\f0fe';
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	position:absolute;
	right:0;
	top:.5em;
}

.HeaderContent h5 {
    font-size: 1em;
    color: #555;
    font-weight: 600;
    margin: 0;
    text-transform: uppercase;
}

.collapsed h5 {}
.collapsed h5:hover {}

.items{
	margin:.5em 0
}

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

.citem:before{
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f0c8';
}

.citemselected:before{
	font-family: "Font Awesome 5 Free";
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f14a';
}

.citem:empty {
	display: none;
}

.citem:hover {}

.citemselected {}

.citemselected:hover {}

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

#sldiv {
	margin: 1em;
}

#resetfs {
    padding: 1em 0px;
    border-bottom: 1px solid #b3b3b3;
}

#resetfs h5{
    font-size: 14px;
    color: #555;
    font-weight: 600;
    background: url('/csi/3440640/4259840/i/bdr/selectbox_remove.png') no-repeat 10px center;
    padding-left:30px;
    text-transform: uppercase;
    cursor:pointer;
}


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

.searchheader, .searchfooter {
	padding:.5em;
	color: #fff;
	background-color: #b67965;
}

.searchheader .bc, .searchfooter .bc {
	display: grid;
	grid-template-columns: 15% 25% 20% auto;
}

#pm.pmfull .searchheader .bc,
#pm.pmfull .searchfooter{}

.searchheader label,
.searchfooter label{
	font-size:.825em;
	margin-right:.5em;
}

/* results found */
.searchheader h5#rescou {
	font-size:.825em;
	display:inline-block;
	vertical-align:middle;
	padding: 0.6em 0 0 0;
}

/* sort by */
.searchheader #sorpan,
.searchheader form[name="dispord"]{
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
}

/* results per page */
.searchheader #rpppan{
	display:inline-block;
	vertical-align:middle;
	margin-right:.5em;
}

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

.searchheader .paging {
	padding:.5em 0;
	text-align: right;
}

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

.searchheader .paging span,
.searchheader .paging a,
.searchfooter .paging span,
.searchfooter .paging a {
	font-size:.825em;
	display:inline-block;
	margin-right:.5em;
}

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


}
/*this should be the current page */
.searchheader .paging span,
.searchfooter .paging span {
	font-weight:600;
}

.searchheader .search input#searchbox {}
.searchheader .search input.submit {}
.searchheader label[for="rpp"] {}
.searchfooter .paging {
    text-align: right;
}

#sr {
	/* use grid layout */
	display:grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap:.5em;
	position:relative;
}

.pmfull #sr {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* -------------------------------------------------------------------------------------
=FeaturedProducts 
------------------------------------------------------------------------------------- */
/* Base settings
------------------------------------------------------- */
#deptlist .fprdcont,
#searchlist .fprdcont {}

/* lets use grid layouts cos they are awesome! */
.fprd {}

.fprd:hover{

}

/* unfortunately there are cases where a .bc is present inside .fprd*/
.fprd .bc{
	display:grid;
	grid-template-columns: 1fr 1fr;
	position:relative;
	background-color:#ffffff;
}

.fprd .bc .fprdimg{
	grid-column:1 / 4;
	text-align:center;
	padding:.5em;
	background: #fff;
}

/* image 
------------------------------------------------------- */
.fprd a.img {
	grid-column:1/4;
	grid-row:1;
	text-align:center;
	padding:.5em;
}

.fprd a.img img {
	max-width:100%;
}

.fprd .fprdimg{
	grid-row:1;
	text-align:center;
	padding:.5em;
}

.fprd .fprdimg a.img {
	display:inline-block;
	padding:0;
}

.fprd .fprdimg img{
	max-width:100%;
}
/* title
------------------------------------------------------- */
.fprd .fprdtitle,
.fprd a.title {
	font-family: var(--altFont);
	grid-column:1/4;
	grid-row:2;
	padding:.5em;
	text-align: center;
	color: var(--text-color);
	align-self:start;
	/*min-height set based on 3 line titles */
	min-height:3em;

	
}

.fprd .fprddescr {
    grid-column: 1 / -1;
}

.fprd .strap {}

/* pricing structure
------------------------------------------------------- */
.fprd .rrp{
	grid-column:1;
	grid-row:3;
	font-size:.875em;
	text-align:left;
	padding-left:.5em;
	align-self:end;
}

.fprd .rrp h6{
	text-decoration: line-through;
	text-decoration-color:var(--main-color);
	color:var(--main-color);
}

.fprd .prevprice{
	grid-column:2;
	grid-row:3;
	font-size:.875em;
	text-align:center;
	align-self:end;
}

.fprd .price,
.fprd .offer{
	grid-column: 1 / -1;;
	grid-row: 3;
	font-size: .75em;
	text-align: center;
	align-self:end;
}

.fprd .price label {
	display: none;
}

.fprd label {
	font-size: .725em;
}

.fprd .price h6 {
    font-size: 1.8em;
    color: #3f7355;
}

/* this is the vat info */
.fprd h6 span{
	font-size:.5em;
}

.fprd .prevprice h6 {
	text-decoration: line-through;
	text-decoration-color:var(--main-color);
	color:var(--main-color);
}

.fprd .offer h6 {
	color:var(--main-color);
	font-weight:600;
}

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

.pricebreak tr {
	display:table-row;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr) );
}

.pricebreak th{}
/* Unit specifics 
------------------------------------------------------- */
.fprd .unit {}
.fprd .unit label,
.fprd .unit h6 {}
.fprd .unit label {}
.fprd .qty {}
.fprd .inner {}
.fprd .outer {}
.fprd .trade {}

.fprd .trade.break {
	display:none;
}

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

.fprd .brand, 
.fprd .manu, 
.fprd .model,
.fprd .clientref {
	grid-row:3;
	font-size:.750em;
	/* equiv to 1em at .75em font size */
	padding: 0.66666666666em;
}

.fprd .flag.offer{
}

.fprd .piflags {}
.fprd .piflags ul {}
.fprd .piflags li {}
.fprd .flag img,
.fprd .piflags img {
		width:auto;
}

/* Buy form 
------------------------------------------------------- */
.fprd form {
	grid-column: 1 / 4;
	grid-row: 5;
	padding:.5em;
	display:grid;
	grid-template-columns: 20% auto;
	grid-gap:.25em;
	align-items:center;
}

.fprd form select {
	width:100%;

}
.fprd form label {
	display:none;
}

.fprd button {
	display:inline-block;
	vertical-align:middle;
	border:1px var(--bg-color) solid;
	background-color:var(--bgalt-color);
	color:var(--bg-color);
	font-weight:600;
	font-size:1.2em;
	padding:.25em .5em;
}


.fprd button.fpskuqtysub {
	font-weight:600;
	font-size:2em;
	display: none;
}
.fprd form input.inputtext {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	max-width: 99%;
}

.fprd button.fpskuqtyadd{display: none;}

.fprd form input.submit {
	/* width: 10em; */
	display: inline;
	grid-column: 2;
	grid-row: 1;
	border: 1px solid #dc381d;
}

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

/* more info button */

.fprdinfo,
.fprd a.btn {
	grid-row:11;
	align-self:center;
	text-align:center;
	grid-column:1 / 5;
	padding:.5em;
}


/* the quickview button */
.fprd a.btn.qkvw{
	display:none;
}

/* Media Queries 
------------------------------------------------------- */
/* -------------------------------------------------------------------------------------
=QuickView 
------------------------------------------------------------------------------------- */

.quickview{
	background-color:rgba(0,0,0,0.5);
	width:100vw;
	height:100vh;
	z-index: 999;
	position:fixed;
	top:0;
	left:0;
	padding-top:5%;
}
.quickviewdialog{
	width:800px;
	height:480px;
	margin:auto;
	background-color:#ffffff;
	z-index:999999;
}

.quickviewdialog .quickviewHeader{}
.quickviewdialog .quickviewHeader .closeqkvw{}
.quickviewdialog .left{}
.quickviewdialog .left .piimg{}
.quickviewdialog .left img{}
.quickviewdialog .right{}
.quickviewdialog .right .pititle,
.quickviewdialog .right .lnk,
.quickviewdialog .right .delivery{}

.quickviewdialog .right .delivery h4{
	margin-top:.5em;
	font-size:1.2em;
}

.quickviewdialog .right .brandmanu.model{}

.quickviewdialog .right .brandmanu.model h5,
.quickviewdialog .right .brandmanu.model h6{
	font-size:1.2em;
	margin-right:.5em;
}

.quickviewdialog .right .pidesc{}

.quickviewdialog .right .pidesc p{}

.quickviewdialog .right .pidesc h2{}

.quickviewdialog .right .lnk{
	font-size:.8em;
}

.quickviewdialog .right .pibuy{ 
}

.quickviewdialog .right .pibuy .price,
.quickviewdialog .right .pibuy .qty,
.quickviewdialog .right .pibuy .trade{}

.quickviewdialog .right .pibuy .price label,
.quickviewdialog .right .pibuy .price h6{}

.quickviewdialog .right .pibuy .qty label,
.quickviewdialog .right .pibuy .trade label,
.quickviewdialog .right .pibuy .qty h6,
.quickviewdialog .right .pibuy .trade h6{}

.quickviewdialog .right .pibuy form p{}
.quickviewdialog .right .pibuy form .attrqty{}

.quickviewdialog .right .pibuy form .attrqty .qtyinput label{}

.quickviewdialog .right .pibuy input#bspsubmit{}

.quickviewdialog .right .pibuy form .attrqty .qtyinput input.inputtext{}

.quickviewdialog .right .pibuy form .attrqty input#buy{}

.quickviewdialog .right .pibuy .stock,
.quickviewdialog .right .pibuy .title,
.quickviewdialog .right .pibuy .ewis_dialog,
.quickviewdialog .right .pibuy .ewis{}

/* -------------------------------------------------------------------------------------
=ProductLists 
------------------------------------------------------------------------------------- */
.prdlst .bc ul{
	display:grid;
	gap: .5em;
	padding:1em;
	/*will use media queries to change breakpoints set default here */
	grid-template-columns:1fr 1fr 1fr 1fr 1fr;
}

.prdlst .bt h3{
	font-size: 1.5em;
    font-weight: 700;
}

/* media queries for viewports start BIG and go small
 outside of this it used the default
--------------------------------------- */
/* over 600px wide and less than 800px wide - show 3 per row */
@media screen and (max-width:800px ){
.prdlst .bc ul {
		/* for grid widths us the fr unit - which is calcuated on free space (whats left after padding and margin) */
		grid-template-columns:1fr 1fr 1fr;
	}
}

/* over 400px wide and less than 600px wide - show 2 per row */
@media screen and (max-width:600px ){
.prdlst .bc ul{
	 grid-template-columns:1fr 1fr;
	}
}

/* under 400px wide, show 1 per row */
@media screen and (max-width:400px ){
.prdlst .bc ul{
		grid-template-columns: 1fr;
	}
}

/* items in product list - would be better if they had .fprd stylings on them !*/


.prdlst {
	grid-column: 1 / -1;
}

.prdlst li {
	display:grid;
	grid-template-columns: 1fr 1fr;
	position:relative;
	background-color:#ffffff;
	align-items:center;
}

.prdlst li a.img{
	grid-column:1/3;
	grid-row:1;
	text-align:center;
	padding:.5em;
}

.prdlst li a.txt{
	grid-column:1/3;
	grid-row:2;
	padding:.5em;
	color:var(--text-color);
	font-family: var(--altFont);
}

.prdlst .price{
	grid-column:1/3;
	grid-row:3;
	text-align:center;
	padding:.5em;
}

.prdlst .offer{
	grid-column:2;
	grid-row:3;
	text-align:center;
}

.prdlst .prevprice{
	grid-column:1;
	grid-row:3;
	text-align:center;
}

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

.prdlst h6 {
    font-size: 1.4em;
    color: #3f7355;
}

.prdlst label{
	font-weight:400;
	display: none;
}

/* -------------------------------------------------------------------------------------
=BrandLists 
------------------------------------------------------------------------------------- */

/* scrolling brand lists */
.brnd .scroller{}

.brnd ul {
	background-color:#ffffff;
	width:100%;
	overflow:hidden;
}

.brnd #buttleft,
.brnd #buttright{
	display:none;
}

.brnd ul li {
	display:inline-block;
	vertical-align:middle;
	height:100%;
	padding-left: 1em;
}

.brnd ul li a{}

.brnd ul li a img {
	display:inline-block;
	vertical-align:middle;
	opacity:0.6;
	filter:alpha(opacity=60);
	-webkit-transition:opacity .2s ease-in-out;
	-moz-transition:opacity .2s ease-in-out;
	-o-transition:opacity .2s ease-in-out;
	transition:opacity .2s ease-in-out;
	filter:grayscale(1);
	max-height:70px;
	width:auto;
	margin:auto;
}

.brnd ul li a:hover img {
	opacity:1;
	filter:alpha(opacity=100);
	filter:grayscale(0);	
}

/* -------------------------------------------------------------------------------------
=RecentItems 
------------------------------------------------------------------------------------- */
.ritm {

}
.ritm .bt {}
.ritm h3 {}
.ritm ul {}

.ritm ul li {
	display:grid;
	grid-template-columns:1fr 4fr;
	grid-gap:.25em;
	margin-bottom:1em;
	background-color:#ffffff;
	padding:.5em;
}
.ritm a.img {
	display:inline-block;
	vertical-align:middle;
}
.ritm ul li a.img img {
	max-width: 63px;
}
.ritm ul li a.txt {
	font-size: 0.825em;
	font-weight: bold;
	color: var(--text-color);
}

.ritm ul li .price,
.ritm ul li .qty,
.ritm ul li .trade{
	grid-column:1/3;
	font-size:.825em;
}
.ritm ul li .price label,
.ritm ul li .qty label,
.ritm ul li .trade label{}


/* -------------------------------------------------------------------------------------
=MyAccount
------------------------------------------------------------------------------------- */
.myaccount ul {}
.link {}

#psign h4,
#psign h3 {
	margin-bottom:.5em;
}

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

.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{
	background:none;
	margin:0;
	padding:0;
}

.orderinfo #pm a.btn img.btn{
	width:1em;
}

ul.order a.lnk {
	grid-column:1/3;
	font-weight:600;
	font-size:1em;
	margin:.5em;
	padding:.5em .5em;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	color:#ffffff;
	background-color: var(--bg-color);
}


/* 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{
	grid-column:1/3;
	text-align:left;
}

#psign ul.orders a.img,
#psign ul.contact a.img,
#psign ul.details a.img {
	text-align:center;
	justify-self:center;
	align-self:center;
}

#psign ul.orders a.img img,
#psign ul.contact a.img img,
#psign ul.details a.img img {
	max-height:32px;
	padding:.5em;
}

#psign ul.orders a.lnk,
#psign ul.contact a.lnk,
#psign ul.details a.lnk {
	justify-self:left;
	align-self:center;
	font-weight:600;
}

#pm .form .link {}



/* -------------------------------------------------------------------------------------
=Blog
------------------------------------------------------------------------------------- */
#site.blog #pm {}
#site.blog #pm h2 {}
#site.blog #pm .blog {}
#site.blog #pm .blog a.title {}
#site.blog #pm .blog p.date {}
#site.blog #pm .blog img {}
#site.blog #pm .blog .artp {}
#site.blog #pm .blog a.more {}
#site.blog #pm .blogBtns, 
#site.blog #pm .blogPageBtns {}
#site.blog #pm .blogBtns a, 
#site.blog #pm .blogPageBtns a {}
#site.blog #pm .blogBtns a.prev, 
#site.blog #pm .blogPageBtns a.prev {}
#site.blog #pm .blogBtns a.next, 
#site.blog #pm .blogPageBtns a.next {}
#site.blog #pm .art .bc h2 {}
#site.blog #pm .art .bc .artp {}
#site.blog #pm .art .bc .artp h3 {}

/* -------------------------------------------------------------------------------------
=CustomPromotions
------------------------------------------------------------------------------------- */

/* HoldingPage
------------------------------------------------------- */

/* HomePage
------------------------------------------------------- */


/* contact us page
------------------------------------------------------- */

.art.contact {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
	grid-row:  1;
}

.art.contact h2 {
	grid-column: 1 / -1;
	margin: 0 0 1em 0;
}

.art.contact .artp {
	grid-column: 1 / 4;
}

.art.contact + .form {
	grid-column: 4 / 7;
	grid-row: 1;
}

/* Set Width Articles/Banners
------------------------------------------------------- */


/* 404 page
------------------------------------------------------- */

/* FAQs
------------------------------------------------------- */

/* About US
------------------------------------- */
/* -------------------------------------------------------------------------------------
=TabbedArticles
------------------------------------------------------------------------------------- */
#pi_wrapper{
	-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);
	margin-bottom:1em;
}

#pi_wrapper ul.pi_tabs{}


#pi_wrapper ul.pi_tabs li{
	display:inline-block;
	padding:1em;
	background-color:var(--bg-color);
	cursor:pointer;
	font-weight:600;
	margin-right:1em;
}

#pi_wrapper ul.pi_tabs li.selected{
	background-color:var(--main-color);
	color:#ffffff;
	-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);
}

#pi_wrapper .pi_tab_content{
	border:1px var(--bg-color) solid;
	padding:1em;
	overflow-x:hidden;
	height:20em;
	-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);
}
/* -------------------------------------------------------------------------------------
=CustomArticles
------------------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=CustomBanners
------------------------------------------------------------------------------------- */


/* -------------------------------------------------------------------------------------
=DepartmentPages 
------------------------------------------------------------------------------------- */

/* Subdepartment tree
------------------------------------------------------- */
.depttree{}

.depttree h3{
	color:var(--main-color);
	margin-bottom:.5em;
}

.depttree h4.tagline{
	font-size:1em;
	margin-bottom:1em;
}

.depttree ul{
	display:grid;
	grid-template-columns:1fr 1fr 1fr 1fr;
	grid-gap:.5em;
}

.depttree li{
	display:grid;
	grid-gap:.5em;
	/*will use media queries to change breakpoints set default here */
	grid-template-columns:1fr;
	padding:.5em;
	background-color:#ffffff;
}


.depttree li:hover{
	-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);
}

.depttree a.txt{
	text-align:center;
}

/* media queries
--------------------------------------- */


/* dept single links used in promotions 
------------------------------------------------------- */
.deptsingle {
	display:grid;
	grid-template-columns:1fr 5fr;
	grid-gap:.5em;
	align-items:center;
	border-top: 1px solid var(--bg-color);
	padding:.5em;
	text-align:center;
	background-color:#ffffff;
}

.deptsingle a.imglnk{
	text-align:center;
}

.deptsingle a.imglnk img{
	object-fit:cover;
	width:100%;
	height:auto;
}

/* done like this due to lack of class on the text link */
.deptsingle a.imglnk + a {}

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

/* Product Panels 
------------------------------------------------------- */
#pi{
	display:inline-block;
	position:relative;
	margin:0;
	padding:0;
	max-width: 100%;
}

#pi .top{}

#pi .main{
	display:inline-block;
	position:relative;
	width:1200px;
	margin:auto;
	padding-top:1em;
	text-align:left;
}

#pi .left{
	display:inline-block;
	vertical-align:top;
	width: calc(40% - 1em);
	margin-right:1em;
	padding:0;
	position:relative;
}

#pi .right {
	display:inline-block;
	vertical-align:top;
	width: calc(60% - 1em);
	padding:.5em;
}

#pi .right .bc {
	display: grid;
	grid-template-columns: 60% 40%;
}


#pi .bottom{}


/* -------------------------------------------------------------------------------------
=tipsy 
------------------------------------------------------------------------------------- */
.tipsy{
	padding: .5em;
	font-size: 1em;
	opacity: 0.8;
	filter: alpha(opacity=80);
	background-repeat: no-repeat;
	background-image: url(/images/tipsy.gif);
}

.tipsy-inner{
	padding: .5em;
	background-color: #1a1a1c;
	color: white;
	max-width: 200px;
	text-align: center;
}

.tipsy-inner{
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

.tipsy-north{
	background-position: top center;
}

.tipsy-south{
	background-position: bottom center;
}

.tipsy-east{
	background-position: right center;
}

.tipsy-west{
	background-position: left center;
}




/* Title
------------------------------------------------------- */
.pititle{
    grid-column: 1;
    grid-row: 1;
}

h4.strap{
	font-size: 1em;
	grid-column: 1;
	grid-row: 2;
}

#pi .pititle h2{}

/* Image (carousel/Main Image Zoom)
------------------------------------------------------- */
#pi .piimg{
	background-color:#fff;
	text-align:center;
}

#pi .piimg img{
	max-width:100%;
	height:auto !important;
}

#pi .piimg p{
	display:none;
}

#pi .piimgx{}

/* If image not aligning centrally */
#pi .piimg a{
	margin:auto;
	text-align:center;
}

#pi .piimg a img{
	margin:auto;
}

/* Gallery
------------------------------------------------------- */
#pi .gallery{
	text-align:left;
	margin:.5em 0;
}

#pi .gallery h4{
	display:none;
}

#pi .gallery .piimg_large{
	width:83px;
	display:inline-block;
	margin:1em;
	vertical-align:top;
}

#pi .gallery .piimg_large img{
	width:100%;
	height:auto;
	margin:0 !important;;
}
#pi .gallery .piimg_large a{}


/* 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(--main-color);
	margin:-1px; /* Set this to minus the border thickness. */
	background-color:#fff;
	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:#fff;
}

/* This is the loading message. */
.cloud-zoom-loading{
	position:absolute;
	top:0;
	margin:0;
	color:white;
	background:#222;
	padding:3px;
}
 
/* Brand and Manufacturer 
------------------------------------------------------- */
#pi .brandmanu.brand{}

#pi .brandmanu.brand p{
	display:inline-block;
	font-size:0.688em;
	font-weight:600;
}

#pi .brandmanu.brand img{}

#pi .brandmanu.model {
	grid-column: 1;
	grid-row: 3 / span 2;
}

#pi .brandmanu h5{
	display:inline-block;
	margin-right:10px;
	font-size:0.688em;
}

#pi .brandmanu h6{
	display:inline-block;
	font-size:0.688em;
}

/* Barcodes
------------------------------------------------------- */

/* independant price element - not part of the form yay!
------------------------------------------------------- */
#pi .pricecomp{}

#pi .pricecomp .prevprice,
#pi .pricecomp .offer{}

/* Buy Panel
------------------------------------------------------- */
#pi .pibuy{
	padding-top: 1em;
	grid-row: 1 / span 3;
	grid-column: 2;
	border: 1px solid #cfcfcf;
	/* border-bottom: none; */
}

#pi .pibuy h6{}
#pi .pibuy .bt{}
#pi .pibuy .bc{
    display: block;
    padding: 0.25em;
}
#pi .pibuy .bb{}

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

/* pricing info
------------------------------------------------------- */
#pi .pibuy .bc .price,
#pi .pibuy .bc .offer,
#pi .pibuy .bc .prevprice,
#pi .pibuy .bc .rrp,
#pi .pibuy .bc .trade,
#pi .pibuy .bc .saving{
	display:inline-block;
	margin-right:1em;
}

/*normal price */
#pi .pibuy .bc .price {
/*because despite my instructions this is being written out when not wanted!!!! *//* display:none; */margin: 0;}
#pi .pibuy .bc .price h6{
	display:inline-block;
	vertical-align:middle;
	font-size: 1.8em;
	color: #3f7355;
} 
#pi .pibuy .bc .price label{
	display:inline-block;
	vertical-align:middle;
	margin-right: 0.5em;
	display: none;
}
#pi .pibuy .bc .price span{} 

/*rrp price */
#pi .pibuy .bc.rrp {}
#pi .pibuy .bc .rrp h6{}
#pi .pibuy .bc .rrp label{}
#pi .pibuy .bc .rrp span{} 

/*offer price */
#pi .pibuy .bc .offer {}
#pi .pibuy .bc .offer h6{}
#pi .pibuy .bc .offer label{} 
#pi .pibuy .bc .offer span{} 

/*previous price (goes with offer) */
#pi .pibuy .bc .prevprice {}
#pi .pibuy .bc .prevprice h6{
	text-decoration:line-through;
	text-decoration-color:#d94927;
}
#pi .pibuy .bc .prevprice label{}
#pi .pibuy .bc .prevprice span{} 

/*offer price */
#pi .pibuy .bc .saving {}
#pi .pibuy .bc .saving h6{}
#pi .pibuy .bc .saving label{}
#pi .pibuy .bc .saving span{} 

/*trade price */
#pi .pibuy .bc .trade {}
#pi .pibuy .bc .trade h6{}
#pi .pibuy .bc .trade label{}
#pi .pibuy .bc .trade span{} 

/* Messages */
#pi .pibuy p{
	font-size:0.688em;
	display:inline-block;
	width: 100%;
	text-align: center;
}
#pi .pibuy h4{}
#pi .pibuy h5{}
#pi .pibuy p.p_stock{}


/* stock */
#pi .pibuy .stock{
	font-size:0.750em;
	text-align: center;
}

/* quantity in basket info */
#pi .pibuy .qtyInBskt{
	margin:1em 0;
	font-size:.825em;
}

/*dynamic price */
.dynprice{
	display:inline-block;
}

/* Pricing info
------------------------------------------------------- */

/* Buy Form
-------------------------------------------------------*/
#buy_form {

margin: 1em 0;
}

/* attributes/sku select */
#buy_form .attr{
	display:inline-block;
	vertical-align:middle;
	padding-right: 0.5em;
}
#buy_form .attr label{
	margin-right:1em;
}

#buy_form .options{
	display:inline-block;
	vertical-align:middle;
	max-width: 100%;
}

#buy_form textarea {
	max-width: 98%;
}

#buy_form select{
	max-width:100%;
}

/* quantity input */
.attrqty {
	display: grid;
	grid-template-columns: 45% 55%;
	margin: 1em 0;
}

.attrqty #buy {
	
grid-column: 1 / -1;
}

/*hide quantity label*/
.attrqty .qtyinput label{
	display:none;
}
.attrqty .qtyinput #skuqty {
	display:inline-block;
	vertical-align:middle;
	text-align:center;
	padding:.5em;
	margin: .25em;
}

.pibuy .attrqty .qtyinput #skuqty {
	width: 2.5em;
}

/*increase/decrease buttons */

.attrqty .qtyinput  button{
	display:inline-block;
	vertical-align:middle;
	margin: .25em;
	padding: .65em;
}


/* message if no option selected*/
#selectResponse{
	color:red;
	/*horrid so doing full width */
	grid-column: 1 / -1;
	padding: 1em 0;
	font-weight: 600;
}

/* Description
-------------------------------------------------------*/
#pi .pidesc, 
#pi .delivery{}

#pi .pidesc h2[itemprop="name"]{
	/*product title gets duplicated on the page*/
	display:none;
}

/*strapline*/
#pi .pidesc h4[itemprop="description"]{
	/*if strapiline is added then it too gets duplicated on the page*/
	display:none;
}

#pi .delivery h3{}
#pi .pidesc p, 
#pi .delivery p{}

#pi .pidesc ul{}
#pi .pidesc li{}

/* direct despatch */
#pi .pidesc.desp{}

#pi .pidesc.desp h5{}
#pi .pidesc.desp p{
	display:inline-block;
	vertical-align:middle;
}


/* Extra Description 
------------------------------------------------------- */
#pi .pidescx{
    grid-column: 1 / -1;
}
#pi .pidescx ul{}
#pi .pidescx ul li{}


/* Strapline
-------------------------------------------------------*/

/* Accordion Description
-------------------------------------------------------*/

/* Tabbed Descriptions
-------------------------------------------------------*/
#pm #pi .pi_tab{
	display:inline-block;
	width:100%;
}

#pm #pi #pi_wrapper{
	-webkit-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
	-moz-box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
	box-shadow:-2px 2px 2px 0 rgba(96,94,93,0.75);
}

#pm #pi ul.pi_tabs{
	display:inline-block;
	cursor:pointer;
}

#pm #pi ul.pi_tabs li{
	font-size:1em;
	text-transform:uppercase;
	padding:1em;
	margin:1em;
	text-align:center;
	border:1px #ebecee solid;
	background-color:#ebecee;
}

#pm #pi ul.pi_tabs li.selected{
	background-color:#2c4556;
	color:#fff;
	z-index:9999999;
}

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

#pm #pi .pi_tab_content{
	width:95%;
	margin-left:1em;
}

#pm #pi .pi_tab_content h2{
	font-size:1.2em;
}

#pm #pi .pi_tab_content h3,
#pm #pi .pi_tab_content h4,
#pm #pi .pi_tab_content ul,
#pm #pi .pi_tab_content p{
	padding:.5em;
}

#pm #pi .pi_tab_content p{
	font-size:0.813em;
}

#pm #pi .pi_tab_content a{}
#pm #pi .pi_tab_content a img {}

#pm #pi .pi_tab_content ul ,
#pm #pi .pi_tab_content ol{}

#pm #pi .pi_tab_content ul li,
#pm #pi .pi_tab_content ol li{}

#pm #pi .pi_tab_content ul li{
	list-style:disc;
	font-size:0.938em;
}


/* Stock 
-------------------------------------------------------*/

/* Leadtime 
-------------------------------------------------------*/

/* Direct Despatch/Dropship
-------------------------------------------------------*/

/* Links - Ask a question etc
------------------------------------------------------ */
#pi .pilinks li{
	font-size:0.750em;
	display:inline-block;
	margin-bottom:.5em;
}

#pi .pilinks .linkimg{
	display:inline-block;
	vertical-align:middle;
}

#pi .pilinks .linkimg img{
	display:inline-block;
	vertical-align:middle;
	width:1em;
	height:auto;
}

#pi .pilinks a.lnk{}
#pi .pilinks li.email a.lnk{
	display:inline-block;
	vertical-align:middle;
}

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

/* Files 
------------------------------------------------------ */
#pi .pifile li{
	font-size:0.750em;
	display:inline-block;
	margin-bottom:.5em;
}

#pi .pifile .linkimg{
	display:inline-block;
	vertical-align:middle;
}

#pi .pifile .linkimg img{
	display:inline-block;
	vertical-align:middle;
	width:1em;
	height:auto;
}

/* Flags 
------------------------------------------------------ */
#pi .flags{
	grid-row: 4;
	grid-column: 2;
	border: 1px solid #cfcfcf;
	border-top: none;
}

#pi .flags .flag{
	display:inline-block;
	margin-bottom:.5em;
	text-align: center;
	width: 100%;
}


/* Video Links (youtube)
------------------------------------------------------ */
#pi .youtube {}
#pi .youtube li.title{}
#pi .youtube li.vid{}

/* Social Links
------------------------------------------------------ */
#pi .socbook {}
#pi .socbook .bt h3{
	display:none;
}
#pi .socbook li{
	display:inline-block;
	margin-right:.5em;
}

/* Buytogether
-------------------------------------------------------*/

/* Personalisation
-------------------------------------------------------*/
#pi .pibuy form .pers{}
#pi .pibuy form .pers li{
    padding: 0.5em 0;
    border-top: 1px dashed #cfcfcf;
    margin-top: 0.5em;
}
#pi .pibuy form .pers li:last-child{}
#pi .pibuy form .pers label{
    font-size: 0.75em;
}
#pi .pibuy form .pers input.inputtext{}
#pi .pibuy form .pers span.chars{
    font-size: 0.75em;
    color: var(--main-color);
}
#pi .pibuy form .pers span{}

/* Associated/Recommended/Related
-------------------------------------------------------*/
#pi .prec,
#pi .pass,
#pi .prel,
#pi .pran{}

#pi .prec h3,
#pi .pass h3,
#pi .prel h3,
#pi .pran h3{
	margin-bottom:1em;   
    margin-top: 20px;
    text-align: center;
    color: #dc381d;
    font-weight: 800;
    border-bottom: 2px #ccc solid;
}

#pi .prec .fprd,
#pi .pass .fprd,
#pi .prel .fprd,
#pi .pran .fprd{}

#pi .prec .fprd h3,
#pi .pass .fprd h3,
#pi .prel .fprd h3,
#pi .pran .fprd h3{}

#pi .prec .fprd .bc{}

#pi .prec .fprd:last-child,
#pi .pass .fprd:last-child,
#pi .prel .fprd:last-child,
#pi .pran .fprd:last-child{}

#pi .prec .fprd .fprdimg,
#pi .pass .fprd .fprdimg,
#pi .prel .fprd .fprdimg,
#pi .pran .fprd .fprdimg {}

#pi .prec .fprd .fprdimg img,
#pi .pass .fprd .fprdimg img,
#pi .prel .fprd .fprdimg img,
#pi .pran .fprd .fprdimg img{}

#pi .prec .fprd .fprdimg .piflags,
#pi .pass .fprd .fprdimg .piflags,
#pi .prel .fprd .fprdimg .piflags,
#pi .pran .fprd .fprdimg .piflags{}

#pi .prec .fprd .fprdtitle,
#pi .pass .fprd .fprdtitle,
#pi .prel .fprd .fprdtitle,
#pi .pran .fprd .fprdtitle{}

#pi .prec .fprd .piflags,
#pi .pass .fprd .piflags,
#pi .prel .fprd .piflags,
#pi .pran .fprd .piflags{}



/* buytogether
-------------------------------------------------------*/
.buytogether{}
.buytogether li.header{}
.buytogether ul.boughtto{}
.buytogether ul.boughtto li{}
.buytogether ul.boughtto li.imgs{}
.buytogether ul.boughtto li.imgs img{}
.buytogether ul.boughtto li.imgs span{}
.buytogether ul.boughtto li.prods{}
.buytogether ul.boughtto li.prods input,
.buytogether ul.boughtto li.prods span.descr,
.buytogether ul.boughtto li.prods span.price{}
.buytogether ul.boughtto li.prods input{	}
.buytogether ul.boughtto li.prods span.descr{}
.buytogether ul.boughtto li.prods span.price{}
.buytogether ul.boughtto li.total{}
.buytogether ul.boughtto li.total span{}
.buytogether ul.boughtto li.btn{}
.buytogether ul.boughtto li.btn .submit{}

/* feefo summary widget
-------------------------------------------------------*/
#pi #feefologohere{}
ul.feefo li{}
ul.feefo li:last-child{}
.feefosmallsummarypanel{}
.feefosmallsummarypanel .title{}
.feefosmallsummarypanel .stars{}
.feefosmallsummarypanel span[itemprop="ratingCount"]{}
.feefosmallsummarypanel .ratingNumber{}
.feefosmallsummarypanel .reviewCount{}

.feefopanel{}

.feefosmallsummarypanel{}

.feefosmallsummarypanel img{}

/* title is a duplicate of product title so we don't want to show it */
.feefosmallsummarypanel .title{
	display:none;
}

.feefosmallsummarypanel .stars{
	text-align:right;
}
.feefosmallsummarypanel .stars img{
	width:1em;
	height:auto;
}

.feefosmallsummarypanel .stars img {
	display: inline-block;
	width: 1em
}

.feefosmallsummarypanel .reviewCount{
	display: inline-block;
	margin: .5em;
	text-align:left;
}
.feefosmallsummarypanel .ratingNumber {
	display:none;
}

.feefosmallsummarypanel .ratingNumber {}
.feeforeviews {}
.feeforeviews .feefosummary {}
.feeforeviews .feefosummary span.title {}
.feeforeviews .feefosummary span.stars {}
.feeforeviews .feefosummary img {}
.feeforeviews .feefosummary span.ratingNumber {}
.feeforeviews .feefosummary .ratingCount {}

/* Wishlist (not used)
------------------------------------------------------- */
#pi .pibuy form.wishlist{}
#pi .pibuy form.wishlist input.chkbox{}
#pi .pibuy form.wishlist label{}
#pi .pibuy form.wishlist .submit{}


/* Media Queries
------------------------------------------------------- */

/* -------------------------------------------------------------------------------------
=Super Attributes 
------------------------------------------------------------------------------------- */

/* Defaults
------------------------------------------------------- */
/*validator messages */
.sa_validator {
	color:red;
}

.cls_superattrribute #sa_pnl_product_not_found {
	display: none;
	z-index: 2000;
}

.cls_superattrribute #saten_pnl_show {
	position:relative;
}

.cls_superattrribute {}
.cls_superattrribute .bc table {}
.cls_superattrribute .bc table .sa_left_cell_type_1,
.cls_superattrribute .bc table .sa_right_cell_type_1 {}
.cls_superattrribute .att_measure {}
.cls_superattrribute .att_X,
.cls_superattrribute .att_Y {}
.cls_superattrribute .att_X label,
.cls_superattrribute .att_Y label {}
.cls_superattrribute .calc_price {}
.cls_superattrribute .calc_price .submit {}
#sa_pnl_product_not_found #sa_label_product_not_found_close {}
#sa_pnl_product_not_found table {}
#sa_pnl_product_not_found table label {}
#sa_pnl_product_not_found td {}
#sa_pnl_product_not_found th {}
#sa_pnl_product_not_found #sa_label_product_not_found {}
#safour_panel_show td {}
.sa_pnl_product_not_found_showg {}
.sa_pnl_product_not_found_show label {}
#pi .pibuy form#buy_form .cls_superattrribute .submit {}
/*help icon */
#pi .pibuy form#buy_form .cls_superattrribute img[id^="help"] {}

/* attributeTypePrice_Matrix_Calculator 
------------------------------------------------------- */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .bc {}
/*help icon needs to be placed differently for different items... */
.cls_superattrribute.attributeTypePrice_Matrix_Calculator #saten_pnl_show img[id^="help"] {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_X label,
.cls_superattrribute.attributeTypePrice_Matrix_Calculator .att_Y label {}
.cls_superattrribute.attributeTypePrice_Matrix_Calculator label {}

/* attributeTypeDimensions 
***************************************************************/
.cls_superattrribute.attributeTypeDimensions {}
.cls_superattrribute.attributeTypeDimensions .bc {}
.cls_superattrribute.attributeTypeDimensions .width {}
.cls_superattrribute.attributeTypeDimensions .drop {}
.cls_superattrribute.attributeTypeDimensions .width label,
.cls_superattrribute.attributeTypeDimensions .width input,
.cls_superattrribute.attributeTypeDimensions .drop label,
.cls_superattrribute.attributeTypeDimensions .drop input {}
.cls_superattrribute.attributeTypeDimensions .width span,
.cls_superattrribute.attributeTypeDimensions .drop span{}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDimensions img[id^="help"] {}
.cls_superattrribute.attributeTypeDimensions .att_container {}
.cls_superattrribute.attributeTypeDimensions .att_X label,
.cls_superattrribute.attributeTypeDimensions .att_Y label {}
.cls_superattrribute.attributeTypeDimensions label {}

/* attributeTypeRadio_button
***************************************************************/
.cls_superattrribute.attributeTypeRadio_button {}
.cls_superattrribute.attributeTypeRadio_button .info.sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeRadio_button img[id^="help"] {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali ul {}
.cls_superattrribute.attributeTypeRadio_button .radiobuttondatali li {}


/* attributeTypeText_Box_Free_Text_Entry 
***************************************************************/
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry {}
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry .sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry img[id^="help"] {}
.cls_superattrribute.attributeTypeText_Box_Free_Text_Entry span {}

/*attributeTypeDrop_down_list
***************************************************************/
.cls_superattrribute.attributeTypeDrop_down_list {}
.cls_superattrribute.attributeTypeDrop_down_list .info.sa_name {}
/*help icon needs to be placed differently for differnt items... */
.cls_superattrribute.attributeTypeDrop_down_list img[id^="help"] {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {}
/* for things with images... */
/*except this isn't just written out when images are in use because people don't think! */
/*don't put stuff in here it breaks things you may not be seeing on other pages */
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner {}
img.sa_img_swatch_selected {}

.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner img,
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content .sa_swatch_panel .sa_swatch_panel_inner span {}
.cls_superattrribute.attributeTypeDrop_down_list .sa_ddl_content select {}

/* whatever this is we don't want it! */
.sa_pnl_product_popup_image_show {
	display:none;
}

/*attributeTypeSingle_Image_Upload 
***************************************************************/
.cls_superattrribute.attributeTypeSingle_Image_Upload {}
.cls_superattrribute.attributeTypeSingle_Image_Upload .progress {}
.cls_superattrribute.attributeTypeSingle_Image_Upload .sa_name {}

/* -------------------------------------------------------------------------------------
=Basket - Checkout v5
------------------------------------------------------------------------------------- */
/*needs #pm as .bskt is used in the header */
#pm .bskt {
	margin:1em 0;
}

/*checkout breadcrumb added - controls the order of the checkout process
doesn't do accordion stuff though */
.chkcrumb{
	text-align:left;
	font-size:.750em;
	padding:.5em;
	/* currently not wanting to show this - ultimately this will be a setting in coms as to whether it is displayed or not at each stage */
	display:none;
}

.chkcrumb .prev,
.chkcrumb .curr,
.chkcrumb .next{
	display:inline-block;
	margin-right:.5em;
}

.chkcrumb .numbers{
	display:inline-block;
}

.chkcrumb .text{}

.chkcrumb .curr{
	font-weight:600;
}

.chkcrumb .prev .numbers{}

/* if basket is empty and user is in it */
.bskt .empty{
	margin:10em 0;
}

.bskt .empty .header{
	color:var(--text-color);
	background:none;
}

.bskt .empty .total{
	text-align:center;
}

/* Basket header
------------------------------------------------------- */
.bskt .header{
	font-family: var(--mainFont);
	font-weight:600;
	padding:.5em;
}

/* Basket Lines
------------------------------------------------------- */
.bskt .lines{}

/* Basket Line items
------------------------------------------------------- */
.bskt .lines .line{
	display:grid;
	grid-gap:.5em;
	grid-template-columns: 1fr 6fr 1fr .5fr 1fr;
	padding:1em;
	align-self:center;
	align-items:start;
}

.bskt .lines .line:nth-child(odd){
	background-color:var(--bg-color);
}

/* Image */
.bskt .lines .line .prodimg{
	grid-column:1;
	grid-row:1;
}

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

/* Product Info - in list form */
.bskt .lines .line .prodinfo{
	grid-column:2;
	grid-row:1;
	align-self:start;
}

.bskt .lines .line .prodinfo li.descr{
	font-size:.875em;
	font-weight:600;
}
.bskt .lines .line .prodinfo li.subset,
.bskt .lines .line .prodinfo li.model{
	font-size:.875em;
	margin-left:1em;
}

/* remove item */
.bskt .lines .line .rem{
	grid-column:4;
	grid-row:1;
	align-self:start;
	text-align:center;
}

.bskt .lines .line .rem .submit {
	margin:0;
	padding:0;
	border:none;
	outline:none;
	background:none;
}

.bskt .lines .line .rem .submit{
    color: #ce1c00;
    border: 1px solid #ce1c00;
    padding: 0.25em;
    font-size: 10px;
}

.bskt .lines .line .rem .submit:hover {}

/* Change quantity */
.bskt .lines .line .qty{
	grid-column:3;
	grid-row:1;
	font-size:.875em;
	text-align:center;
}

.bskt .lines .line .qty label{
	display:none;
}

.bskt .lines .line .qty button{
	display:inline-block;
	vertical-align:middle;
	border:1px var(--text-color) solid;;
	background-color:var(--bgalt-color);
	color:var(--text-color);
	font-weight:600;
	font-size:1.2em;
	padding:.25em .5em;
}

.bskt .lines .line .qty input{
	display:inline-block;
	vertical-align:middle;
	margin: 0 .25em;
	text-align:center;
	width: 3em;
}

.bskt .lines .line .netprice {
	grid-column:1/3;
	grid-row:2;
}

.bskt .lines .line .netprice label,
.bskt .lines .line .netprice span{
	font-size:.750em;
}

.bskt .lines .line .netprice label{
	margin-right:.25em;
}

.bskt .lines .line .price {
	grid-column: 5;
	grid-row: 1;
	text-align:right;
	font-weight:600;
	align-self:start;
}

/* out of stoc messages */
.oos{
	color:var(--main-color);
	font-size:.725em;
}

/* Basket Subtotal
------------------------------------------------------- */
.prodsubtotal{
	padding:1em;
	border-top:1px var(--text-color) solid;
	border-bottom:1px var(--text-color) solid;
	text-align:right;
}

.prodsubtotal label{
	margin-right: 1em;
}

.prodsubtotal span{
	font-size:1.2em;
	font-weight:600;
}

/* Delivery info
------------------------------------------------------- */
/* for free delivery messages */
.header.free{
	background:none;
	color:var(--text-color);
	padding:1.5em;
	font-size:.875em;
}

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

/* Shipping 
------------------------------------------------------- */
.shipping{
	padding:1em;
}

/* no need to show this unless collect option is available */
.shipping .deliveryto h4{
	display:none;
}

.shipping .address input,
.shipping .address h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
}

.shipping .store input,
.shipping .store h4{
	display:inline-block;
	vertical-align:middle;
	font-size:1em;
}

.shipping .deliveryto form{
	text-align:center;
}

/* if there ARE delivery choices */
.shipping form select{
	width:100%;
	margin-bottom:1em;
}

/* if there are NOI delivery choices */
.shipping .deliverto span{
	font-weight:600;
}

li.shipping{
	padding:0;
	text-align:right;
}

/* selected shipping cost*/
li.shipping form span{
	font-weight:600;
	margin-left:.5em;
}


/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	border-top:3px var(--text-color) solid;
	border-bottom:3px var(--text-color) solid;
	padding:1em;
	text-align:right;
}

.bskttotals label{
	display:inline-block;
}

.bskttotals span{
	font-weight:600;
	/*fix a min width for different number alignment */
	display:inline-block;
	width:8em;
}

.bskttotals .total{
	font-size:1.5em;
}
.bskttotals .total span{
	/* reset span size as font size if .total font size is bigger */
	width:5.3333333333em;
}

/* Vouchers
------------------------------------------------------- */
.vouchentry{
	display:inline-block;
	text-align: left;
	background: #eef2f3;
	padding:1em;
}

#pm ul.accordion li.pane ul.vouch li,
.vouchentry ul.vouch li{
	display:inline-block;
}


/* Basket Payment Buttons
------------------------------------------------------- */
.bsktbuttons{
	text-align:right;
	margin:.5em 0;
	font-size: 1em;
}

.bsktbuttons a{
	padding:.5em;
	margin: .25em 0;
	text-align:center;
	cursor:pointer;
	border:none;
	outline:none;
	background-color: #dc381d;
	display: inline-block;
}

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

/*font awesome icons */
#pm .sp_button a.btn.sagepay:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f09d';
}

#pm .sp_button a.btn.bacs:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f19c';
}

#pm .sp_button a.btn.lease:before{
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	margin-right: .5em;
	font-size: 1em;
	display:inline-block;
	content: '\f154 \f154 \f154';
}

.page_basket .btn.cont a.btn {
	display: inline-block;
	margin:.5em 0;
	border-color:var(--bg-color);
	color:var(--bg-color);
	background-color: #999;
}

.page_basket .btn.cont a.btn:hover {
	color:#ffffff;
	background-color:var(--bg-color);;
}
.page_basket .btn.clear a.btn {
	display:inline-block;
	margin:.5em 0;
}

.page_basket .btn.clear a.btn:hover {}

/* Media Queries
------------------------------------------------------- */
/* over 600px wide and less than 800px */
@media screen and (max-width:800px ){}

/* over 400px wide and less than 600px wide */
@media screen and (max-width:600px ){}

/* under 32400px0px wide */
@media screen and (max-width:400px ){
	/* add an extra row and change order of things */
	.bskt .lines .line .qty{
		grid-column:1/4;
		font-size:.875em;
	}

	.bskt .lines .line .prodinfo{
		grid-column:2/5;
		grid-row:1;
	}

	/* remove item */
	.bskt .lines .line .rem{
		grid-column:4;
		grid-row:2;
	}

	.bskt .lines .line .netprice {
		grid-column:1/3;
	}

	.bskt .lines .line .netprice label,
	.bskt .lines .line .netprice span{
		font-size:.750em;
	}

	.bskt .lines .line .price {
		grid-row:3;
	}
}

/* -------------------------------------------------------------------------------------
=Checkout v5 Accordion Option
------------------------------------------------------------------------------------- */

/* 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(--text-color);
}

#pm .accord {
	width: 834px;
	margin-right:1em;
	overflow-x: visible;
	display: inline-block;
}

/* 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 {
	padding: 0.5em 0 ;
	margin: 0;
	width: 100%;
	position: relative;
	cursor: pointer;
	background:var(--bg-color);
	border:none;
	color:#ffffff;
	font-weight:600;
	font-size:1.2em;
	margin-bottom:2px;
	border-radius:0;
}

#personalisation_panel, #gift_panel {
	border: none;
}

#pm .accord h4 {}
#pm .accord label {
    font-size: 0.75em;
	grid-column:1/-1;
	grid-row:1;
}

#pm .accord ul li input, 
#pm .accord ul li select, 
#pm .accord ul li textarea,
#pm .accord ul li span {
	/* margin-bottom:1em; */
	grid-column: 2;

}

/* img asterisk */
#pm .accord ul li img {
	grid-column: 1;
	grid-row: 1;
}

#pm .accord ul li textarea {
    max-width: calc(100% - 2px - 0.5em);
}
#pm .accord ul li input.submit {
    float: right;
}
#pm .accord li #submit {}
#checkout_accordion {}
#checkout_accordion input.inputtext,
#checkout_accordion input.inputtext_light,
#checkout_accordion select,
#checkout_accordion textarea {}

#checkout_accordion #deliveryInst{
	width:90%;
}

#checkout_accordion select{
	grid-column: 1/2;
	max-width: calc(100% - 2px - 0.5em);
}

.ui-accordion .ui-accordion-content {
	padding: 1em ;
	border-top: 0;
	overflow: auto;
}

#checkout_accordion #ul_left li,
#checkout_accordion #ul_right li{
	margin-bottom:1em;
	display:grid;
	grid-template-columns: 0.5fr 10fr;
	align-items:center;
	grid-gap: .5em;
}

#basket_delivery_method{
	grid-column:1/-1;
}

#checkout_accordion #ul_left li.reqmsg,
#checkout_accordion #ul_right li.reqmsg {
	grid-template-columns: 1fr;
	color: red;
	font-size: 0.8em;
}

#checkout_accordion #ul_left li.chkbox,
#checkout_accordion #ul_right li.chkbox {
	grid-template-columns: 10fr 1fr;
}

#checkout_accordion #ul_left li.chkbox label,
#checkout_accordion #ul_right li.chkbox label{
	grid-area:1;
}


#checkout_accordion #ul_left li h4,
#checkout_accordion #ul_right li h4  {
	grid-column: 1 / -1;
}

/* Typography
------------------------------------------------------- */

/* Specific Fields 
------------------------------------------------------- */
/* sign in in accordion */
#signinform h5{
	font-size:.8em;
}

#signinform li{}

#signinform input.inputtext{
	width:300px;
}

#signin_skip{
	line-height:normal;
	font-weight:600;
	padding:.5em;
	border: none;
	color: var(--text2-color);
	margin-right:1em;
	text-align: center;
	text-transform: uppercase;
 	background: #eef2f3;
	cursor:pointer;
}


/* Main accordion Sections 
------------------------------------------------------- */
#ul_top{
	font-size:.875em;
	margin-bottom:1em;
}
#ul_left{}
#ul_right{}

#ul_bottom .continue{
	margin:auto;
	text-align:center;
}

/* Customer Details 
------------------------------------------------------- */
#customer_panel #ul_left,
#customer_panel #ul_right{
	width:calc(50% - 1em);
	display:inline-block;
	vertical-align:top;
	padding:0 .5em;
}


/* Delivery Address 
------------------------------------------------------- */
#delivery_panel #ul_right{
}

#delivery_panel .address,
#delivery_panel #basket_delivery_address,
#delivery_panel .address ul{
	grid-column:1/3;
}

/* Confirm Panel inc Basket Summary
------------------------------------------------------- */
#confirm_panel{
	padding:0;
}

#confirm_panel .continue{
	text-align: right;
	margin: 0 1em 1em;
}

.basketsummary .header{
	margin:0;
	color:var(--text-color);
	padding:.5em;
	background-color:#ffffff;
	text-align:center;
}

.bsktsum{}

.bsktsum .line{
	display:grid;
	grid-gap:.5em;
	padding:.5em;
	grid-template-columns: 3fr .5fr 1fr;
	align-self:center;
}

.bsktsum .line:nth-child(odd){
	background-color:var(--bg-color);
}

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

.bsktsum .qty label{
	display:none;
}

.bsktsum .price{
	font-weight:600;
	text-align:right;
}

/* no one wants to send people back to the basket at this point - needs to be removed from basket summary */
.bsktsum .editbskt{
	display:none;
}

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

.bsktsum .line .prodinfo li.descr {
	font-size:1em;
	font-weight:600;
}

/* Basket Subtotal
------------------------------------------------------- */
.bsktsum .subtotal{
	padding: .5em;
	text-align:right;
}

/* Basket Totals
------------------------------------------------------- */
.bskttotals{
	border-top:3px var(--text-color) solid;
	border-bottom:3px var(--text-color) solid;
	padding:1em;
	text-align:right;
}

.bsktsum .subtotal label{
	display:inline-block;
}

.bsktsum .subtotal span{
	font-weight:600;
	/*fix a min width for different number alignment */
	display:inline-block;
	width:5.3333333333em;
}

.bsktsum #ordertotal{
}
.bskttotals #ordertotal{
	/* reset span size as font size if .total font size is bigger */
	width:5.3333333333em;
}

/* 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:600;
	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:600;
	margin-right:1em;
}

.amazonShippingOptionsDiv span.value{
	font-weight:600;
}

.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:600;
	padding:.5em;
}

.noshipping{
	color:var(--main-color);
	margin-bottom:1em;
	font-weight:bold;
}

.submit[disabled]{
	background-color:#eef2f3;
	color:#ffffff;
}


/* Checkout Breadcrumb panel
------------------------------------------------------- */
#pm .accordbdcb {
	width: 350px;
	display: inline-block;
	float:  right;
}

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

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

#pm .accordbdcb ul {
	border-bottom:2px #d5d6d6 solid;
	margin-bottom:.5em;
}

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

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

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

#pm .accordbdcb ul li.title {
	font-weight: 600;
	padding: 0;
	margin: 0;
	width: 96%;
	padding:.5em 2%;
	position: relative;
	cursor: pointer;
	border:none;
	font-size:1.2em;
	border-radius:0;
	margin-bottom:2px;
	background: #3f7355;
	color:#ffffff;
}

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

/* terms and conditions article in checkout
------------------------------------------------------- */
#pp {
	width: 1000px;
	margin: 0 auto;
	background-color: #ffffff;
}

#pp p, #pp h3, #pp h4 {
	margin: 0 1em;
}

#pp h3, #pp h4 {
	margin-bottom: .5em;
}

/* -------------------------------------------------------------------------------------
=ConfirmationPage 
------------------------------------------------------------------------------------- */
.confirmation .conf{
	padding:1em;
}

.confirmation .conf .info li{
	margin-bottom:1em;
	display:block;
}

.confirmation .conf li.info li{
	list-style:disc;
	display:list-item;
	list-style-position:inside;
}

.confirmation .conf .header{
	font-weight:600;
	font-size:2em;
}

.confirmation .conf .subhead{
	font-weight:600;
	margin:.5em 0;
}

/* Basket Line items
------------------------------------------------------- */
.confirmation .conf .order{}
.confirmation .conf .order .line{
	display:grid;
	grid-gap:.5em;
	grid-template-columns: 1fr 6fr 1fr;
	padding:1em;
	align-self:center;
	align-items:start;
}

.confirmation .conf .order .line:nth-child(odd){
	background-color:var(--bgalt-color);
}

/* Image */
.page_confirmation .conf .order .line a.img{}

/* Product title*/
.confirmation .conf .order .line .descr{
	align-self:start;
	font-size:.875em;
	font-weight:600;
}

.confirmation .conf .order .line .price {
	text-align:right;
	font-weight:600;
	align-self:start;
}

/* Basket Subtotal
------------------------------------------------------- */
.confirmation .conf .order .subtotal{
	padding:1em;
	border-top:1px var(--bg-color) solid;
	text-align:right;
}

.confirmation .conf .order .subtotal label{
	margin-right: 1em;
}

.confirmation .conf .order .subtotal span{
	font-size:1.2em;
	font-weight:600;
}

.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;
	width:100%;
}

#pm .smap ul li {
	padding: 1em 0;
}

#pm .smap ul li a,
#pm .smap ul li h3 {
	padding: 0;
}

#pm .smap .bc ul li ul {
	padding:1em 0;
	float:left;
}

#pm .smap ul li ul li {
	padding: 0;
}

/* First Level */
#pm .smap ul li{
	width:25%;
	float:left;
}
#pm .smap ul li a{
	font-weight:600;
	font-size:1.2em;
}

/* Second Level */
#pm .smap ul li ul{
	margin-left:2%;
	width:98%;
	float:left;
}
#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;
}








/* -------------------------------------------------------------------------------------
=AccordionArticles
------------------------------------------------------------------------------------- */

/* accordion descriptions 
------------------------------------------------------- */
#pm .bc ul.accordion{}

#pm .bc ul.accordion .pane{
	display:none;
}

#pm .bc ul.accordion .pane{
	background-color:var(--bg-color);
	padding:1em;
}

#pm .bc ul.accordion li.header{
}

#pm .bc ul.accordion li.header img{
	position:absolute;
	right:1em;
	top: 0.5em;
	width:1em;
	height:auto;
	cursor:pointer;
}

#pm .bc ul.accordion li.header img.showminus{
	display:none;
}

#pm .bc ul.accordion li.header.current img.showminus{
	display:block;
}

#pm .bc ul.accordion li.header.current img.showplus{
	display:none;
}

#pm .bc .accordion p{
	font-size:1em;
	margin-bottom:1em;
}

#pm .bc .accordion ul{}
#pm .bc .accordion a{}

#pm .bc .accordion a:hover{
	text-decoration:underline;
}

#pm .bc .accordion span{
	font-weight:800;
}

#pm .bc ul.accordion thead td{
	font-weight:800;
}

/* -------------------------------------------------------------------------------------
=Hacks 
------------------------------------------------------------------------------------- */
.clearfix{
	padding:0 !important;
	margin:0 !important;
	float:none !important;
	clear:both !important;
}

.spacer {
    float:left;	
}

.epau .bc {
	display:none;
}

#modal-overlay-inline {
	z-index:999;
}

/* slider override */
#a107708419 {
	grid-column: 1 / -1;
	padding: 1em;
}

/* footer "products" link override */
#p41320449 {
	grid-column: 1 / span 2;
}
/* footer "products" link list override */
#p41320449 ul li {
	width: 50%;
	display: inline-block;
}

/* HP reviews custom bits */
#a108003329 img,
#a108003330 img,
#a108003328 img {
	margin: 0.5em 0;
}

#a108003329 h3,
#a108003330 h3,
#a108003328 h3 {
    color: #000;
    font-weight: 700;
    margin: 1em 0;
}

#a108003329 h4,
#a108003330 h4,
#a108003328 h4 {
	margin: 1em 0;
	font-size: 0.75em;
}

/* save for later - MDR is #bspsubmit unique? */
input[value="Save for later"] {
	opacity: 0.5;
}

#a58163200 .imgcont {
    display: inline-block;
    padding: 1em;
}

a[title="Return to My Account"] {
	grid-column: 1 / -1;
	width: 48.5%;
    justify-self: center;
}

.bsktsum h5:after {
    content:" *";
    color: red;
    font-size: 1.2em;
    font-weight: 600;
}