@charset "utf-8";
/* 
screen2.1.css - new tweaks to header styles, with masonry styles; 
'ads' class & other commented out bits removed
*/
body {
 position:relative;
 margin:0;
 padding:0;
 border:0;   /* This removes the border around the viewport in old versions of IE */
 width:100%;
 background:#fff;
 min-width:320px;  /* Minimum width of layout - remove line if not required */
     /* The min-width property does not work in old versions of Internet Explorer */
 font-size:14px;  /* 90% in original, altered to 100%, now using CSS pixels */
 font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
 line-height: 1em;
}
.highlight {
    background-color:#a9ff80;
}
/* links - see masonry section for links for masonry items */
a {
 color:#369;
}
a:hover {
 color:#fff;
 background:#369;
 text-decoration:none;
}
h1 {
 padding:0 0 0 0;
 margin:0 0 0 0;
 line-height:1.2;
}
h2 {
 position: relative;
 top: 0;
 margin: 0;
 padding: 0;
}
h3.western { font-family: "Liberation Sans", sans-serif }
h3.cjk { font-family: "SimSun" }
h3.ctl { font-family: "Lucida Sans", sans-serif }
p { /* note - settings altered in tables */
/* size, font & line height in body properties above */
 margin: .0 0 0 0; /* was 2em 0 .2em 0*/
 padding: 0.2em; /* was 1em */
} 
/* are these used anymore? - missing trailing ";" anyway! - But not needed if only 1 attribute?
p.western {
 font-size: 11px
}
p.cjk {
 font-size: 11px
}
p.ctl {
 font-size: 11px
}
p.comment {
 font-size: 9px
}
p.smallComment {
 font-size: x-small
}
ul {
 font-size: 12px
}
ul.link {
 font-size: 11px 
}
*/
img {
 margin:0px 0px 0px;
 position: relative;
 right: auto;
 left: auto;
 vertical-align: middle;
}
img.absoluteImgRight {
 position: absolute;
 right: 0;
 top: 0;
 vertical-align: text-top;
}
img.absoluteImgLeft {
 position: absolute;
 left: 0;
 top: 0;
 vertical-align: text-top;
}
img.SaleImage {
max-width: 100%;
}
div#ImageContainer {
 width: 400px;
}
/* 
 Header styles
*/
#header {
 position:relative;
 /* position: absolute; */
 top: 0;
 clear:both;
 float:left;
 width:100%;
 background:#e0e0ff;
 border-bottom:1px solid #000;
}
#header h1,
#header h2 {
 padding:0 0 0 0;
 margin:0 0 16px 85px;
 position:relative;
 line-height:1.6em;
 /* overflow:hidden;  This chops off any overhanging divs */
}
/*
not used at present
#header p {
 padding:0 0 0 0;
 margin:0 0 0 0;
 position:relative;
 left:0px;
}
*/
#header ul {
 clear:left;
 float:left;
 width:100%;
 list-style:none;
 margin:10px 85px 0 85px;
 padding:0;
}
#header ul li {
 list-style:none;
 display:block;
}
#header ul li {
 float:left;
 margin:0 4px 0 4px;
 padding: 3px 7px;
 text-align:center;
 background:#eee;
 color:#000;
 text-decoration:none;
 position:relative;
 left:0px;
 line-height:1.3em;
}
#header ul li a {
 font-size: 14px; /* was = instead of : 14px so never worked before */
 text-decoration:none;
}
#header ul li a:hover {
 background:#369;
 color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
 color:#fff;
 background:#000;
 font-weight:bold;
}
#header ul li span {
 display:block;
}
/* 'widths' sub menu */
#layoutdims {
 position:relative;
 left:0;
 clear:both;
 background:#eee;
 border-top:4px solid #000;
 margin:0;
 padding:6px 15px !important;
 text-align:right;
}
ul.inCentred {
 text-align:left;
 margin:0 0 1em 10%;
}
/* main section (no cols) */
div.leftMain1 {
 position: relative;
 width:90%; /* width of whole page */
 max-width: 800px;
 margin: auto;
 overflow:hidden;  /* This chops off any overhanging divs */
}
div.leftMain1 h1 h2 h3 {
 text-align:center;
}
div.centreMain {
 position: relative;
 width:90%; /* width of whole page */
 max-width: 600px;
 margin: auto;
 overflow:hidden;  /* This chops off any overhanging divs */
}
div.centreMain > p {
 line-height:1.5;
}
div.relativeMain {
 position: relative;
 right: 0;
 clear:both;
 float:left;
 width:100%; /* 100% width of whole page */
 margin: auto;
 overflow:hidden;  /* This chops off any overhanging divs */
}
div.relativeMain h3.narrative {
 text-align:left;
 margin:0 0 1em 3em;
}
div.relativeMain p.narrative {
 text-align:left;
 margin:0 0 0.4em 2em;
}
/* column container */
.colmask {
 position:relative; /* This fixes the IE7 overflow hidden bug */
 clear:both;
 float:left;
 width:100%;   /* width of whole page */
 overflow:hidden;  /* This chops off any overhanging divs */
}
/*
 common column settings
*/
.colright,
.colmid,
.colleft {
 float:left;
 width:100%;   /* width of page */
 position:relative;
}
.col1,
.col2,
.col3 {
 float:left;
 position:relative;
 padding:0 0 1em 0; /* no left and right padding on columns, we just make them narrower instead 
     only padding {top and} bottom is included here, make it whatever value you need */
 overflow:hidden;
}
/*
 specific 3 Column settings
*/
.threecol {
 background:#ccffff;  /* right column background colour */
}
.threecol .colmid {
 right:20%;   /* width of the right column - 25% in original */
 background:#fff;  /* center column background colour */
}
.threecol .colleft {
 right:60%;   /* width of the middle column - 50% in original */
 background:#ddffdd; /* left column background colour */
}
.threecol .col1 {
 width:56%;   /* width of center column content (column width minus padding (zero?) on either side) - was 46% */
 left:102%;   /* 100% plus left padding of center column */
 overflow: scroll;
}
.threecol .col1 h2 {
 width:96%;   /* was (46% = supposedly width of center column content minus 10%) */
 font-size:100%;
}
.threecol .col1 h2 + p {
 width:96%;   /* was (46% = supposedly width of center column content minus 10%) */
 font-size:100%;
}
.threecol .col1 p + p {
 width:96%;   /* was (46% = supposedly width of center column content minus 10%) */
 font-size:100%;
}
.threecol .col1 img {
 width:100%;
 height:auto;
}
.threecol .col2 {
 width:16%;   /* Width of left column content (column width minus padding on either side - was 21%) */
 left:26%;   /* width of (right column) plus (center column left and right padding) plus (left column left padding) - was 31%*/
} /* this close curly bracket used to be missing but still worked!? */
.img {    /* to position images top right of div */
    position: absolute; /* position: relative; -- to float image */
    top: 0px;
    right: 0px;
}
.threecol .col3 {
 width:16%;   /* Width of right column content (column width minus padding on either side) - was 21% */
 left:90%;   /* Please make note of the brackets here:
     (100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) - was 85%*/
}
.stampPic {
   position: relative; /* position: relative; -- (to it's nearest ancestor) */
   top: 4px;
   left: 10px;
   right: 10px;
   max-width: 50%;
   max-height: 50%;
}
/*
.col1 {
 font-size:70%;
}
*/
.pic1 {
 border:1px solid #000000;
 background-color:#000000;
 max-width: 600px;
}
.autoResizeImage {
    max-width: 100%;
    height: auto;
    width: auto;
}
/*
 Table styles
*/
table {
 max-width: 100%; /* used to be maximum-width, so was not recognised */
}
table.table1, table.table1 th, table.table1 td {
    border-collapse: collapse;
    border: 1px solid black;
    padding: 4px 4px; /* used to mistakenly have a comma separating so declaration dropped (no padding attribute set) */
}
table.table2, table.table2 th, table.table2 td {
/*
    border: none;
*/
    border-collapse: collapse;
    border-spacing: 0px 0px;
    padding: 0px 0px; /* used to mistakenly have a comma separating so declaration dropped (no padding attribute set) */
    border: 1px solid black;
}
table.table2 {
    min-width: 600px;
}
table.image {
    border-collapse: collapse;
    border: 0px;
    padding: 0px;
}
table.image caption { 
    font-size: 80%;
    font-family: Verdana, Arial, sans-serif;  /* used to mistakenly have comma at end of list so declaration dropped (no font family attribute set) */
    text-align: center;
}
th, td {
 font-size:70%;
 line-height: 100%;
}
th {
 background-color: #ddff99;
}
tr.even {
 background-color: #eeffee;
}
tr.odd {
 background-color: #eeeeff;
}
th.salesTable {
 font-size:120%;
 line-height: 120%;
}
td.salesTable {
 font-size:120%;
 line-height: 120%;
}
table.table2 td span.CatID {
 color: #ff4444;
}
th.setlist {
	border-bottom: 1px solid #9f9;
} 
td.setlist {
	border-bottom: 1px solid #9f9;
}
.lg {
 font-size:90%;
}
#table01 {
  width: 98%;  /* was 90% */
  background-color: #ffffff;
  border:1px solid green;
}
#table01 tr:nth-child(even) {
  background-color: #eee; /* light grey */
}
#table01 tr:nth-child(odd) {
  background-color: #fff; /* white */
}
#table01 th {
 background-color: #fff; /* overwriting the previous setting for th */
}

#table01 td {
  border:1px solid green;
  border-collapse: collapse;
  font-size:90%; /* this changes font size from that set for td, but if line wraps, spacing is wrong? */
  padding: 0.2em;
  line-height: 1.2em;	
}
td > p { /* i.e. all paragraphs that are a child of td: '>' creates a 'child selector' */
 font-size:150%; /* this changes font size from that set for td, but if line wraps, spacing is wrong? */
 padding: 0.4em; /* otherwise would inherit 0.2em from previous attributes of p */
 line-height: 1.2em;	
}
/* 
 Footer styles
*/
#footer {
 clear:both;
 float:left;
 width:100%;
 border-top:1px solid #000;
}
#footer p {
 padding:10px;
 margin:0;
}
/* Masonry stuff below here */
.masonry { /* Masonry container */
 -webkit-column-count: 4; /* Chrome, Safari, Opera - added 14/4/18 was missing previously */
 -moz-column-count: 4; /* Firefox - added 14/4/18 was missing previously */ 
 column-count: 4;
 -moz-column-gap: 1em;
 -webkit-column-gap: 1em;
 column-gap: 1em;
 padding: 0 0.5em 0 1em;
 font-size: .60em;
}
.item { /* Masonry bricks or child elements */
    background-color: #eee;
    background: #fff; /* eh? */
    display: inline-block;
    margin: 0 0 0 0;
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.item p {
 font-size: 1.2em;
}
.item h3 {
 font-size: 1.6em;
}
a .item {
 text-decoration:none;
 color:#000;
}
h2 .item {
 text-decoration:none;
 color:#000;
}
a:hover .item {
 color:#999;
 background:#369;
 text-decoration:none;
}
.itemLightPurpleColoured { /* Masonry bricks or child elements */
	background-color: #eeffee;
	background: #eeffee; /* eh? */
    display: inline-block;
    margin: 0 0 0 0;
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.itemLightPurpleColoured p {
 font-size: 1.2em;
}
.itemLightPurpleColoured h3 {
 font-size: 1.6em;
}
a .itemLightPurpleColoured {
 text-decoration:none;
 color:#000;
}
h2 .itemLightPurpleColoured {
 text-decoration:none;
 color:#000;
}
a:hover .itemLightPurpleColoured {
 color:#999;
 background:#369;
 text-decoration:none;
}
.itemLightGreenColoured { /* Masonry bricks or child elements */
	background-color: #eeeeff;
    background: #eeeeff; /* eh? */
    display: inline-block;
    margin: 0 0 0 0;
    width: 100%;
    padding: 0.5em;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-shadow: 2px 2px 4px 0 #ccc;
}
.itemLightGreenColoured p {
 font-size: 1.2em;
}
.itemLightGreenColoured h3 {
 font-size: 1.6em;
}
a .itemLightGreenColoured {
 text-decoration:none;
 color:#000;
}
h2 .itemLightGreenColoured {
 text-decoration:none;
 color:#000;
}
a:hover .itemLightGreenColoured {
 color:#999;
 background:#369;
 text-decoration:none;
}
/* @media stuff 
NOTE - max size of images in masonry should be 200px (=400px / 2 columns)
*/
@media only screen and (min-width: 200px) {
    .masonry {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        column-count: 1;
    }
}
@media only screen and (min-width: 400px) {
    .masonry {
        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;
    }
}
@media only screen and (min-width: 700px) {
    .masonry {
        -moz-column-count: 3;
        -webkit-column-count: 3;
        column-count: 3;
    }
}
@media only screen and (min-width: 900px) {
    .masonry {
        -moz-column-count: 4;
        -webkit-column-count: 4;
        column-count: 4;
    }
}
@media only screen and (min-width: 1100px) {
    .masonry {
        -moz-column-count: 5;
        -webkit-column-count: 5;
        column-count: 5;
    }
}
@media only screen and (min-width: 1300px) {
    .wrapper {
/* was (why?)
        width: 1260px;
*/
        width: 1300px;
    }
}
/* [1] The container */
.img-hover-zoom {
  height: 300px; /* [1.1] Set it as per your need */
  /* overflow: hidden; [1.2] Hide the overflowing of child elements */
}

/* [2] Transition property for smooth transformation of images */
.img-hover-zoom img {
  transition: transform .5s ease;
}

/* [3] Finally, transforming the image when container gets hovered */
.img-hover-zoom:hover img {
  transform: scale(1.5);
}