@import url("/common/css/pagebase.css");
@import url("/common/css/top.menu.css");
@import url("/common/css/eventbase.css");
@import url("/common/css/searchbase.css");
@import url("/common/css/touch.menu.css");

/*
 *  colours:
 *    body: black
 *    borders: #221e1f
 *    link: #676767/#666, #333/#EF3A41
 *    em: #EF3A41 bold normal
 *    h1-3: black bold
 *    menubar: #333, #999
 *    menu: (black) on white, white on #999
 */

body {
  background-color: white;
  padding: 0;
  font-size: 0.87em;
  color: #1A1A1A;
  font-family: "Lucida Grande", Verdana, Ariel, sans-serif
}

body#page {
  background: white url("/resources/page.background.jpg") top left no-repeat;
}

body#page.shrink {
  background-image: url("/resources/page.background.shrink.jpg");
  background-attachment: fixed;
}

#backtotop {
	border: 1px solid #CCCCCC;
	padding: 5px;
	background-color: #F0F0F0;
	}

em { font-style: italic; font-weight: normal; color: black }

a {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #999999;
	text-decoration: none;
	color: #800000;
}

a:active, a:hover {
  border-bottom-color: #999999;
  text-decoration: none;
  color: #990000;
}

textarea, input {
  border: 1px solid #CCCCCC;
  background-color: #FFFFFF;
  color: #000000;
}

input.button {
  border: 1px solid #ccc;
  background-color: #fff;
  color: black;
}

.rounded {
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  -khtml-border-radius: 4px;
}

h1, h2, h3 {
	color: #500000;
	font-weight: normal;
	font-variant: normal;
}

h1 {font-size: 135%;}

h2 {
	font-size: 120%;
	color: #474747;
}
h3 {font-size: 120%;}
h4 {
	font-size: 110%;
	color: #800000;
	margin-bottom: 5px;
	font-weight: normal;
	}

img { image-orientation: none }

div > h4:first-child { margin-top: 0 } /* 'cos IE does this whether we want or no */

.pagediv {
  position: relative;
  min-width: 850px;
}

body#page.shrink .pagediv { min-width: 0 }

* html .pagediv {
  position: absolute;
  top: 0;
  left: 0;
}

#pagetop {  height: 155px }
body#page.shrink #pagetop {  height: 75px }

#pagetop a { border-width: 0 }

#chartis { 
  position: absolute;
  top: 35px; 
  left: 420px;
}
  
#jplogo { position: absolute; top: 15px; left: 20px }
body#page.shrink #jplogo { top: 10px; width: 180px }

#quicksearch {
  position: absolute;
  top: 18px; 
  right: 0; 
  font-size: smaller;
}

body#page.shrink #quicksearch { top: 0; z-index: 300 }

#quicksearch input.filter {
  width: 12em;
  background: url("/common/resources/glass-white.50.png") top left repeat-x;
  padding-left: 18px;
  font-size: 110%;
}

body#page.shrink #quicksearch input.filter { margin-left: 16px }

#quicksearch select, #quicksearch option {
  background: transparent url("/common/resources/white.50.png");
}

#quicksearch br { display: none }
body#page.shrink #quicksearch br { display: inherit }
#quicksearch>a, #quicksearch>form button { display: none }

body#page.shrink #quicksearch>form {
  position: relative;
  margin-right: 30px;
  border: 1px solid black;
  background: transparent url("/common/resources/white.90.png") repeat;
  padding: 10px;
  text-align: right;
  z-index: 100;
  display: none;
}

body#page.shrink #quicksearch>form button {
  position: absolute;
  display: block;
  top: 2px;
  left: 2px;
}

body#page.shrink #quicksearch>a {
  display: block;
  position: absolute;
  top: 33px;
  right: 125px;
}

body#page.shrink.touch #quicksearch>a { top: 55px }
body#page.shrink #quicksearch.form>form { display: block }
body#page.shrink #quicksearch.form>a { display: none }

div.searchform {
  width: 90%;
  max-width: 45em;
  margin: 10px;
  border: 1px solid #aaa;
  background-color: #F2F2F2;
  padding: 5px;
  font-size: smaller;
}

div.searchform div {
  clear: both;
  padding-top: 4px;
}

#jphead { position: relative; z-index: 200 }

div.jpproducts {
  position: absolute;
  top: 20px;
  left: 200px;
  right: 20px;
}

body#page.shrink div.jpproducts { top: 8px; left: 50px; right: 10px }

div.jpproducts>div:first-child {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  text-align: right;
  overflow: visible;
}

body#page.shrink div.jpproducts>div:first-child { left: 50px; overflow: hidden }

div.jpproducts>div:first-child div {
  position: relative;
  top: -2px;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 106%;
  text-transform: uppercase;
  text-align: right;
}

/* Scroller CSS from Syed Murtaza https://codepen.io/Murtaxa/pen/egrRbN */
body#page.phone div.jpproducts>div:first-child div {
  position: absolute;
  width: 130%;
  height: 100%;
  margin: 0;
  line-height: 1.2em;
  text-align: center;
  white-space: pre;
  /* Starting position */
  moz-transform: translateX(100%);
  webkit-transform: translateX(100%); 
  transform: translateX(100%);
  /* Apply animation to this element */ 
  moz-animation: scroll-left 20s linear infinite;
  webkit-animation: scroll-left 20s linear infinite;
  animation: scroll-left 20s linear infinite;
}

/* Move it (define the animation) */
@-moz-keyframes scroll-left {
  0%   { -moz-transform: translateX(100%) }
  100% { -moz-transform: translateX(-100%) }
}

@-webkit-keyframes scroll-left {
  0%   { -webkit-transform: translateX(100%) }
  100% { -webkit-transform: translateX(-100%) }
}

@keyframes scroll-left {
  0% { 
    moz-transform: translateX(100%); /* Browser bug fix */
    webkit-transform: translateX(100%); /* Browser bug fix */
    transform: translateX(100%); 
  }

  100% { 
    -moz-transform: translateX(-100%); /* Browser bug fix */
    -webkit-transform: translateX(-100%); /* Browser bug fix */
    transform: translateX(-100%); 
  }
}

#abalogo, #badalogo { position: absolute; top: 60px }
body#page.shrink #abalogo, body#page.shrink #badalogo { top: 25px; width: 40px }
body#page.shrink.touch #abalogo, body#page.shrink.touch #badalogo { top: 40px }
#abalogo { right: 110px }
body#page.shrink #abalogo { right: 85px }
#badalogo { right: 40px }

#chartistop {
  position: absolute; 
  top: 35px; 
  right: 10px;
}

#body {
  margin-bottom: 18px;
  /*background-image: url("/resources/body.background.gif");
  background-repeat: repeat-y;
  background-position: top left;*/
  padding-top: 18px;
}

.loginbox {
  text-align:left;
  padding: 15px;
}

.loginbox input.text { width: 100% }

#navigate {
  top: 135px;
  left: 0;
  width: 100%;
}

body#page.shrink #navigate { top: 70px }

* html #navigate { height: 34px }

#menu {
  position: relative;
  top: 0;
  left: 0;
  height: 21px;
  margin-left: 168px;
  font-size: 90%;
  border-bottom: 1px solid black;
  border-top: 1px solid black;
  border-left: 1px solid black;
}

body#page.shrink #menu { margin-left: 90px }
body#page.shrink.touch #menu { margin-left: 0 }

ul#menubar {
  position: absolute;
  top: 0;
  left: 0;
  height: 18px;
  width: 100%;
  background-color: #79352b;
  padding: 3px 0 0 0;
}

body#page.touch ul#menubar { background-color: transparent }

li.menuhead {
  margin: 0 0 0 0;
  padding: 0 0 0 0;
}

#menupad {
  top: -100px;
  left: -50px;
  height: 650px;
}

#menuoffset {
  top: 14px;
  left: 0;
  height: 60px; /* TOUCHMENU */
}

* html #menu { height: 23px }
* html ul#menubar { height: 22px }

#menu a {
  background-color: transparent;
  padding: 3px;
  color: #FFFFFF;
}

#menu a.menutitle, #menu a.menuactive {
  position: relative;
  top: 0;
  left: 4px;
  text-transform: uppercase;
/*  font-family:Georgia, "Times New Roman", Times, serif; */
  font-size: 11px;
  font-weight: normal;
}

#menu a:hover, #menu a.menuactive:link, #menu a.menuactive:visited {
  background-color: #EDEDED;
  color: #800000;
}

#menu .menubag ul {
  margin-top: 0.3em;
  background-color: #D3BC9F;
  text-transform: capitalize;
  color: #000000;
}

#menu .menubag a { border-style: none; color: #5D2D25; }
book { padding-left: 8em }

#menu li.memberarea a {
}

#menu li.memberarea .menubag ul, #menu li.memberarea .menubag a {
}

#menu li.memberarea a:hover,
#menu li.memberarea a.menuactive:link, #menu li.memberarea a.menuactive:visited {
}

#menu li.touch { display: none }

.touchmenu { font-size: 100% !important }
.touchmenu.open { width: 20em }

#leftmenu a, #rightmenu a {
  height: 24px;
  padding-top: 5px;
  text-align: center;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: bold;
}

#leftmenu a, #rightmenu a {
  display: block;
}

#leftmenu a, #rightmenu a { color: #000000; }

#leftmenu a:hover, #rightmenu a:hover {
  background-color: transparent;
  color: white;
}

#leftcolumn, #rightcolumn {
  position: absolute;
  font-size: 90%;
  list-style-position: outside;
  list-style-type: none;
}

#sidebars { position: absolute; top: 0; left: 0; width: 100%; height }

#leftcolumn {
  top: 158px;
  left: 0px;
  border-right: 1px solid #CCCCCC;
}

#leftbox {
  width: 155px;
  padding: 0 8px 0 5px;
  text-align: right;
  color: black;
}

body#page.shrink #leftbox {
  width: 165px;
  padding: 0 8px;
}

#leftcolumn p, #leftcolumn form { margin: 0 }

#leftcolumn ul {
  margin: 0;
  padding: 0 3px;
  list-style-position: inside;
  list-style-type: none;
  text-align: left;
  /*	text-transform: capitalize;*/
}
	
#leftcolumn li {
  margin: 0;
  padding-bottom: 2px;
  padding-top: 8px;
}	

#leftcolumn a {
  color: black;
  font-size: 100%;
  margin-bottom: 0px;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #CCCCCC;
  text-decoration: none;
  /*	text-transform: uppercase; */
}

#leftcolumn a:link, #leftcolumn a:visited { color: #6E2B1E }
#leftcolumn a:active, #leftcolumn a:hover { color: #800000 }
#leftcolumn #searchform { margin-bottom: 10px }

#leftcolumn #searchform input.text {
  width: 130px;
  background: white url("/common/resources/glass-16x16.png") top left no-repeat;
  padding-left: 18px;
}

#leftcolumn .sitelink {
  margin-bottom: 4px;
}

#rightcolumn {
  top: 185px;
  right: 10px;
}

body#page.shrink #sidebars {
  left: auto;
  right: 0;
  top: 32px;
  width: auto;
  height: auto;
  display: none;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: black;
  background: transparent url("/common/resources/white.75.png") repeat;
  padding-top: 0;
  z-index: 400;
}

body#page.shrink #leftcolumn, body#page.shrink #rightcolumn {
  position: relative;
  top: 0;
  left: 0;
}

body#page.touch #rightcolumn { top: 70px }
body#page.touch.shrink #rightcolumn { top: 0 }

body#page.shrink.rightshow #sidebars { display: block !important }

#rightshow {
  position: fixed;
  display: none;
  z-index: 500;
  top: 72px;
  right: 0;
  width: 30px;
  height: 19px;
  border-width: 1px 0 1px 1px;
  border-style: solid;
  border-color: #333;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  background: transparent url("/common/resources/white.70.png") repeat;
}

#rightshow:after {
  font-size: 2em;
  font-size: 20px;
  font-weight: bold;
  color: #1b51a3;
  content: "«";
}

body.touch.shrink #rightshow { top: 73px }
body.touch.phone #rightshow { top: 63px }
body.shrink #rightshow { display: block }
body.shrink.rightshow #rightshow { right: 183px }
body.shrink.rightshow #rightshow:after { content: "»" }

#rightbox {
  width: 155px;
  border: 1px solid #CCCCCC;
  background-color: white;
  padding: 0px 10px 15px 15px;
  color: #6E2B1E;
}
#rightbox a:link, #rightbox a:visited, #rightbox a:active, #rightbox a:hover {
	color: #5D5D5D;
	border: none;
text-decoration: none;
}

#rightbox .rightlisting {
	text-align:left
}
#rightlisting li {
	list-style-type: none;
	padding-bottom: 3px;
}
#rightbox .rightlisting a:link, #rightbox .rightlisting a:visited {
	color: #3F3F3F;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #CCCCCC;
	border-left: none;
	text-decoration: none;
}

#rightlisting a:active, #rightlisting a:hover {
  color: #800000;
  border-top: none;
	border-right: none;
	border-bottom: 1px solid #666666;
	border-left: none;
	text-decoration: none;
}

.rightbutton {
  position : relative;
  width: 150px;
  height: 66px;
  border: 0;
  margin: 5px 0 25px 0;
  border-radius: 10px;
  padding: 0;
  box-shadow: 6px 6px #ddd;
}

.rightbutton>a {
  display: block;
  width: 120px;
  font-size: 105%;
}

.rightbutton>a, .rightbutton .editable {
  position: absolute;
  top: 50%;
  left: 50%;
  ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: white !important;
  text-transform: uppercase;
  font-variant: small-caps;
  line-height: 1.2em;
}

body.xmas .rightbutton:after {
  position: absolute;
  top: -6px;
  right: -8px;
  content: url("/resources/xmashat.png");
}

* html #leftbox { width: 168px }
* html #leftbox #searchform input.text { width: 150px }
* html #rightbox { width: 180px }

#frontpageheaderleft img { padding: 0.5em 2em 0.5em 0 }

#catalogueinsert {
  margin-bottom: 1em;
  padding: 1em 0 1em 0.5em;
  text-align: center;
  font-size: 95%;
  font-weight: bold;
}

#catalogueinsert img { float: left; padding-right: 0.3em }

#logoblock {
  margin-top: 1em;
  text-align: center;
}

#content {
  margin: 0 200px 0 195px;
  padding: 0 10px 0 10px;
  line-height: 140%;
  border-style: none none none none;
}

body#page.shrink #content {
  background: url("/common/resources/white.50.png") top left repeat;
  margin: 0 0 0 90px;
  padding-top: 2px;
}

body#page.shrink.touch #content { margin: 0 }

.helptext { color: #966 }
.pink {
	float: right;
	background: #C49885;
	width: 250px;
	margin-left: 1em;
			}
.pinknews {
	float: right;
	background: #C49885;
	width: 180px;
	margin-left: 1em;
			}

.pink li, .pinknews li {
	color: black;
	list-style-position: outside;
	list-style-type: none;
	padding-top: 0px;
	padding-bottom: 4px;
	margin-left: -17px;
	margin-right: 4px;
	list-style-image: url(/css/twoarrows.gif);
}
.pinknews h3 {
	font-size: 100%;
	margin: 7px 0 0px 8px;
		}
table.contacttable { width: 100%; margin-top: 1em }
table.contacttable th { font-weight: bold }
table.contacttable th.section { padding-top: 1em }

div.cataloguepdf { clear: left }
div.cataloguepdf img { float: left; padding-right: 1em }

hr {
	border: 0;
	width: 100%;
	color: #666;
	height: 1px;
	background-color: #666;
}

.indievent {
	margin-top: 10px;
		}
.details  {
	margin-top: 10px;
		}
.black {color: #000000 }
.paler {color: #666666; }
.red {color: #800000;}

.booklisting {
 	margin-left: 15px;
 			}
.booklisting ul {
	list-style-image: none;
	list-style-type: none;
}
.booklisting li {
	padding-bottom: 5px;		
}
.booklisting a:link, .booklisting a:visited {
	color: #5c2820;
	border-bottom: none;
	text-decoration: none;
	font-style: italic;
}
.booklisting a:active, .booklisting a:hover {
	color: #520900;
	border-top: none;
	border-right: none;
	border-bottom: 1px solid #666666;
	border-left: none;
	text-decoration: none;
}
.search1 	{
	background-color:#CCCCCC;
	color: #800000;
	}

/*
 *  maps drilldown page
 */

/* span.was { color: #969381; white-space: nowrap; }
span.was:before { content: "(was " }
span.was:after { content: ")" } */

span.was { color: #969381; white-space: nowrap; text-decoration: line-through }
span.was:before { content: "WAS " }

span.now { white-space: nowrap }
span.now:before { content: " NOW " }

#mapsearchresult { padding-bottom: 2em }
#mapsearchresult a.maplistimage, .regionhead a { border-bottom-width: 0 }
#mapsearchresult p { margin-top: 0 }
#mapsearchresult .map { margin-bottom: 1em }

.regionhead a {
  padding-left: 19px;
  background-position: center left;
  background-repeat: no-repeat;
}

#filterform div { margin-top: 0.5em }
.open .regionhead a { background-image: url("/common/resources/closebox.gif") }
.closed .regionhead a { background-image: url("/common/resources/openbox.gif") }
.busy .regionhead a { background-image: url("/common/resources/loading-16x16.gif") }
.regionbody { padding-left: 19px }
.closed .regionbody { display: none }
div.map.closed { padding-left: 0; background-image: none }
.regionbody img { float: left; padding-right: 1em }
.mapprice { color: #800000; white-space: nowrap }
.detaillink { clear: left; padding: 0.3em 0 0.6em 0 }

.maplistitem {
  display: table-row;
}

.maplistimage, .maplisttext {
  display: table-cell;
  vertical-align: top;
  padding-bottom: 25px;
}

.maplistimage {
  width: 270px;
  text-align: center;
}

#mapsearchresult .maplistimage { width: 120px }


/*
 *  shopping cart
 */

.checkoutform label {
  display: block;
  clear: left;
  float: left;
  width: 12em;
  text-transform: lowercase;
}

.checkoutform label.hidden { visibility: hidden }
.checkoutform label.above { float: none; width: inherit }
.checkoutform label, .checkoutform input, .checkoutform select { margin-top: 0.6em }
.checkoutform input.button { margin-top: 1.2em }
.checkoutform br { clear: left }

table.basket { width: 100% }
table.basket td { vertical-align: top }
table.basket th.price, table.basket td.price { text-align: right; padding: 0 0 0 1em }
table.basket td.adjust { white-space: nowrap; text-align: left; padding: 0 2em }
table.basket td.adjust input { width: 1.5em }

#basket.full .empty, #basket.empty .full { display: none }
#basket.empty .empty, #basket.full .full { display: block }

.buylink { margin: 0.5em auto 0 auto; text-align: left }

.buylink span, .buylink a, .detaillink a { display: inline-block; white-space: nowrap }

.buylink a.button, .detaillink a.button {
  margin: 1px;
  border-style: solid;
  border-width: 1px;
  border-color: #aaa #666 #666 #aaa;
  background: #ddd url("/common/resources/fade.down.white50.20px.png") repeat-x;
  padding: 0 0.5em;
  font-size: 80%;
  text-transform: lowercase;
  color: #993300;
}

.buylink a.button:hover, .detaillink a.button:hover {
  border-color: #666 #aaa #aaa #666;
}

.buylink .basket { display: none }
.buylink.basket .basket { display: inline-block }

.buylink .available { display: none }
.buylink.available .available { display: inline-block }
.buylink.available.reserved .available { display: none }

.buylink .enquire { display: none }
.buylink.available .enquire { display: inline-block }

.buylink .reserved { display: none }
.buylink.reserved .reserved { display: inline-block }
.buylink.reserved.basket .reserved { display: none }

.buylink .sold { display: inline-block }
.buylink.available .sold { display: none }
.buylink.reserved .sold { display: none }
.buylink.basket .sold { display: none }

.buythis, .enquire, .remove, .buylink .basketlink { font-size: 85% }
.sold, .inbasket { x-font-weight: bold; font-size: 100% }
.sold, .reserved { color: red }
.inbasket { margin: 2px }
.basket { color: #1A1A1A }

a.basketlink, a.checkoutlink {
  padding-left: 19px;
  background-position: center left;
  background-repeat: no-repeat;
}

a.basketlink { background-image: url("/common/icons/shopping-cart-orange.gif") }
a.checkoutlink { background-image: url("/common/icons/checkout3-orange.gif") }

.finaltotal h3 { margin-bottom: 0 }
.finaltotal p { margin: 0 0 0 0 }
.finaltotal input { margin-top: 1em }

#pagetail {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

#pagetail div {
  background-color: #79352b;
  padding: 3px 0 3px 6px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: normal;
  margin: 0 0 0 168px;
  border-left: 1px solid black;
  border-top: 1px solid black;
  text-align: left;
}

body#page.touch #pagetail { display: none }
body#page.shrink #pagetail div { margin-left: 90px }

#pagetail a {
  background-color: transparent;
  padding: 3px;
  color: #FFFFFF;
  text-decoration: none;
  border:  0;
 }

.send2friendactivate p { display: inline }

.send2friendactivate input.button {
  border-width: 0 2px 2px 0;
  border-color: #d7d7d7;
  background-color: #8c695a;
  font-size: smaller;
  color: white;
  cursor: pointer;
}

div#siteflag {
  display: none;
  top: 10px;
  right: auto;
  left: 10px;
}
#holly {
	position: absolute;
	left:  290px;
	top:  15px;
	z-index: 600;
	}

a.stripelink {
  display: inline-block;
  position: relative;
  top: 6px;
  border-bottom-style: none;
}

a.stripelink svg { fill: #6772e5; transition: fill .4s ease }
a.stripelink:active svg, a.stripelink:hover svg { fill: #32325d }

#newrightboxes {
color:  white;
	text-transform: uppercase;
	font-variant: small-caps;
    text-align: center;
    width: 105px;
    border: 0;
    line-height:1.2ems;
    padding: 15px;
    margin: 25px;
    border-radius: 25px;
   padding: 20px; 
    box-shadow: 10px 10px ##c6c6c6;"
	}