@charset "UTF-8";
/* CSS Document */


#spaceabove {
display: flex;
height: 70px;
}
/* The box that holds all the index page adverts */
.adverts {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	/*float: left;*/
	position: absolute;
	bottom: 0px;
	width: 865px;
	z-index:2000;
}

/* The class that holds individual tabs */
.linobook,
.gallery,
.info,
.shows,
.latest,
.process,
.albums,
.paintings,
.drawings,
.gumroad,
.blank,
.quote {
height: 86px;
width: 60px;
margin-right: 10px;
position: relative;
background-repeat: no-repeat;
background-position: center bottom; 
}
/* The class that holds individual tabs images */

.gallery {
background-image: url("../graphics/gallery.png");
}
.info {
background-image: url("../graphics/infoLink.png");
}
.shows {
background-image: url("../graphics/exhibition.png");
}
.latest {
background-image: url("../graphics/latestWork.png");
}
.process {
background-image: url("../graphics/process.png");
}
.albums {
background-image: url("../graphics/videoBooks.png");
}
.linobook {
background-image: url("../graphics/cover.png");
}
.drawings {
background-image: url("../graphics/drawings.png");
}
.paintings {
background-image: url("../graphics/paintings.png");
}
.gumroad {
background-image: url("../graphics/gumroad.png");
}
.quote {
background-image: url("../graphics/quotes.png");
}
.blank {
background-image: url("../graphics/coverIconBLANK.png");
}

a.linobook:hover,
a.latest:hover,
a.gallery:hover,
a.info:hover,
a.shows:hover,
a.process:hover,
a.albums:hover,
a.quote:hover,
a.gumroad:hover
 {
background-position: 0 5px;
}

a.linobook span,
a.latest span,
a.gallery span,
a.info span,
a.shows span,
a.process span,
a.albums span,
a.quote span,
a.gumroad span
 {
	display: none;
}

a.linobook: hover,
a.latest: hover,
a.gallery: hover,
a.info: hover,
a.shows: hover,
a.process: hover,
a.albums: hover,
a.quote: hover,
a.gumroad: hover

{ filter: grayscale(100%); }

/* THIS SHOWS POP UP INFO ON HOVER */

a.linobook:hover span,
a.latest:hover span,
a.gallery:hover span,
a.info:hover span,
a.shows:hover span,
a.process:hover span,
a.albums:hover span,
a.gumroad:hover span
{
	display: block;
	font-family:  "Playfair", "Didot", Palatino;
	font-size: 20px;
	text-align: center;
	position: absolute;
	left: -150px;
	visibility: visible;
	background-color: #FFFFFF;
	color: #000000;
	z-index: 2000;
	padding: 10px;
	border: thin solid rgba(0,0,0,1);
	box-shadow: 0px 0px 10px rgb(0, 0, 0);
	bottom: 100px;
}
a.gallery:hover span,
a.info:hover span,
a.shows:hover span,
a.process:hover span,
a.albums:hover span,
a.gumroad:hover span
{
	width: 300px;
}

a.info:hover span,
a.shows:hover span,
a.process:hover span,
a.albums:hover span,
a.gumroad:hover span
{
	height: auto;
}
/*a.latest:hover span {
	width: 200px;
	height: auto;
	left: -80px;
	box-shadow: 0px 0px 80px rgb(0, 0, 0);

}

a.latest:hover span img {
width:200px;
}
*/


a.gallery:hover span,
a.linobook:hover span,
a.latest:hover span  {
	background-repeat: none;
	padding: 0px;
	box-shadow: 0px 0px 80px rgb(0, 0, 0);
	}
	
a.latest:hover span  {
	left: -120px;
	width: 300px;
	height: 380px;
	background-image: url("../graphics/latest.png")
	}

a.linobook:hover span  {
	left: -75px;
	width: 208px;
	height: 380px;
	background-image: url("../graphics/LinoBook.png")
	}

a.gallery:hover span  {
	left: -120px;
	width: 300px;
	height: 300px;
	background-image: url("../graphics/galleryPoster.png")
	}
	
a.quote:hover span  {
	display: block;
	position: absolute;
	visibility: visible;
	background-color: #FFFFFF;
	color: #000000;
	z-index: 2000;
	width: 840px;
	height: 450px;
	left: -600px;
	padding: 0px;
	bottom: 100px;
	background-image: url("../graphics/quote.png");
	background-repeat: none;
	}
	
a.gallery:hover span strong{
font-family: "Playfair", "Didot", Palatino, Times New Roman;
	font-size: 24px;

}
	
/* THIS KEEPS THE POP UP TABS DOWN and GREY */
	
#book .adverts .linobook,
#information .adverts .info,
#exhibition .adverts .shows,
#process .adverts .process,
#drawingbook .adverts .albums
{
filter: grayscale(100%);
background-position: 0 15px;
}


/* THE POP UP COLOURED TABBED INFO LINKS */
a.popup, a.popup-image, a.popup-inline {
	position: relative;
	z-index: 2000;
}
a.popup, a.popup-image  {
	margin-right: 10px;
	
}
a.popup span, a.popup-image span, a.popup-inline span   {
	display: none;
}
/* THE POP UP BOXES for Tabbed Info links */

a.popup:hover span  {
	bottom: 100px;
}
a.popup-inline:hover span  {
	bottom: 18px;
	width: 200px;
}

a.popup:hover {
/*filter: grayscale(100%);*/
}


/* style below positions pop-up above content*/
a.popup:hover span  {
	width: 200px; 
	}
	
.popup em {	
	font-size: 14px;
	color: rgba(0,0,0,1);
}
.popup strong, .popup-inline strong {
	font-size: 16px;
	font-style: normal;
	font-weight: 100;
}