@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=STIX+Two+Text:ital,wght@1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital,wght@1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:wght@400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Text:ital,wght@1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@1,500;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,400;1,700;1,900&display=swap');

/* Antony Johnston CSS */

/* Inspiration and "eureka!" shouts to John Gruber, Jeffrey Zeldman, Jon Hicks */


/* ============= */
/* CSS VARIABLES */
/* ============= */

:root
	{
	--AJ-black: #000000;
	--AJ-white: #FFFFFF;
	--AJ-light-grey: #DDDDDE;	
	--AJ-med-grey: #9C999D;
	--AJ-dark-grey: #606164;
	--AJ-dark-red: #850D23;
	--AJ-bright-red: #B50008;
	}

	
/* =========== */
/* PAGE LAYOUT */
/* =========== */

/* Force elements to page edges */

html, body
	{
	margin: 0;
	padding: 0;
	}


/* ======= */
/* DIV IDs */
/* ======= */

#main
	{
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 40px;
	padding: 20px;
	}

#siteheadercontainerbg
	{
	display: flex;
	flex-direction: row;
	justify-content: center;
	flex-wrap: nowrap;
	width: 100%;
	height: 322px;
	background-color: var(--AJ-dark-red);
	background-repeat: no-repeat;
	}

#siteheadercontainer
	{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	column-gap: 20px;
	width: 100%;
	}

#siteheadercontent
	{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-end;
	height: 322px;
	}

#bookcontainer
	{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	column-gap: 20px;
	width: 100%;
	margin-top: 30px;
	margin-bottom: 30px;
	}

#pagecontentfullwidth
	{
	width: 100%;
	}

#footer
	{
	margin-top: 20px;
	padding: 5px;
	text-align: center;
	border-top: 1px solid var(--AJ-med-grey);
	}

#pagecontentcontainer
	{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	column-gap: 30px;
	width: 100%;
	margin-bottom: 10px;
	margin-top: 30px;
	}

#pagecontent200
	{
	width: 200px;
	}

#pagecontent250
	{
	width: 250px;
	}

#pagecontent300
	{
	width: 300px;
	}

#picturegridwrap
	{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	align-content: flex-start;
	column-gap: 5px;
	row-gap: 5px;
	flex-wrap: wrap;
	}

#seriesbox
	{
	display: block;
	width: 100%;
	margin-top: 50px;
	margin-bottom: 30px;
	text-align: left;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-right: 0px;
	border-top: 3px solid var(--AJ-dark-red);
	}


/* =========== */
/* DIV CLASSES */
/* =========== */


.awardsbox
	{
	display: block;
	margin-left: 0px;
	padding: 10px;
	text-align: left;
	border: 1px solid var(--AJ-dark-grey);
	}



/* ====== */
/* NAVBAR */
/* ====== */

#navbar
{
	position: absolute;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	height: 60px;
	font-family: 'Playfair Display',serif;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 60px;
	text-transform: none;
	text-align: center;
	color: var(--AJ-med-grey);
	border: none;
	background: var(--AJ-black);
	list-style: none;
}


#navbar li 
{
	display: inline-block;
	margin: 0px;
	padding: 0px 7px 0px 7px;
	transition-duration: 0.25s;
} 

#navbar li a:link,
#navbar li a:visited
{
	color: var(--AJ-white);
	display: block;
	text-decoration: none;
}

#navbar li a:hover
{
	color: var(--AJ-med-grey);
	background-color: none;
	text-decoration: none;
	cursor: pointer;
}

ul
{
	list-style: none;
	position: relative;
	margin: 0px;
	padding-left: 0px;
}


	

/* ========== */
/* TYPOGRAPHY */
/* ========== */


/* ===================== */
/* BODY STYLES + CLASSES */
/* ===================== */

body,
.main
	{
	font-family: 'Libre Baskerville',Times,serif; 
/*	font-family: 'Lato',"Lucida Grande","Lucida Sans","Lucida Sans Unicode",Verdana,sans-serif; */
	font-weight: 400;
	font-size: 20px;
	line-height: 160%;
	color: var(--AJ-black);
	}

body
	{
	background: var(--AJ-light-grey);
	}	



/* =================== */
/* SITE HEADER CLASSES */
/* =================== */

.siteheadername
	{
	font-family: 'Playfair Display',serif;
	font-size: 70px;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: none;
	line-height: 140%;
	color: var(--AJ-white);
	}

.siteheadername a:link,
.siteheadername a:visited,
.siteheadername a:hover
	{
	text-decoration: none;
	color: var(--AJ-white);
	}

.siteheaderlink
	{
	font-family: 'DM Serif Text',serif;
	font-size: 27px;
	font-weight: 400;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	line-height: 110%;
	color: var(--AJ-med-grey);
	}

.siteheaderlink a:link, 
.siteheaderlink a:visited
	{
	text-decoration: none;
	}

.siteheaderlink a:hover
	{
	text-decoration: underline;
	color: var(--AJ-white);
	}




/* ============== */
/* HEADER CLASSES */
/* ============== */

.pagetitle
	{
	font-family: 'Playfair Display',serif;
	font-size: 50px;
	font-weight: 700;
	letter-spacing: -0.03em;
	text-transform: none;
	line-height: 110%;
	margin-bottom: 0.25em;
	color: var(--AJ-dark-red);
	}

.pageintro
	{
	font-family: 'Libre Baskerville',serif;
	font-weight: 400;
	font-size: 22px;
	font-style: normal;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 160%;
	margin-top: 0.75em;
	margin-left: 0.75em;
	margin-right: 1em;
	margin-bottom: 0;
	color: var(--AJ-dark-grey);
	}

.pageintro a:link,
.pageintro a:visited
	{
	color: var(--AJ-dark-red);
	text-decoration: none;
	}

.pageintro a:hover
	{
	color: var(--AJ-dark-grey);
	text-decoration: underline;
	}

.seriestitle
	{
	font-family: 'Libre Baskerville',serif;
	font-size: 38px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 110%;
	margin-top: 0px;
	margin-bottom: 5px;
	color: var(--AJ-dark-red);
	}

.seriesstrapline
	{
	font-family: 'Libre Baskerville',serif;
	font-weight: 400;
	font-size: 24px;
	font-style: normal;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 150%;
	margin-top: 0.75em;
	margin-bottom: 0;
	color: var(--AJ-dark-grey);
	}

.worktitle
	{
	font-family: 'Playfair Display',serif;
	font-size: 43px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 110%;
	margin-top: 0px;
	margin-bottom: 5px;
	color: var(--AJ-dark-red);
	}

.bookstrapline
	{
	font-family: 'Lato',sans-serif;
	font-weight: 700;
	font-size: 23px;
	font-style: normal;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 120%;
	margin-top: 0.75em;
	margin-bottom: 0;
	color: var(--AJ-dark-grey);
	}

.subtitle
	{
	font-family: 'DM Serif Text',serif;
	font-size: 40px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 110%;
	color: var(--AJ-black);
	margin-top: 0em;
	}

.subhead
	{
	font-family: 'DM Serif Text',serif;
	font-size: 33px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 140%;
	margin-top: 0;
	margin-bottom: 0.25em;
	color: var(--AJ-dark-grey);
	}

.smallsubhead
	{
	font-family: 'DM Serif Text',serif;
	font-weight: 700;
	font-size: 25px;
	text-transform: none;
	line-height: 120%;
	margin-top: 0.75em;
	margin-bottom: 0;
	color: var(--AJ-dark-grey);
	}

.subhead a:link,
.smallsubhead a:link,
.subhead a:visited,
.smallsubhead a:visited
	{
	text-decoration: none;
	color: var(--AJ-dark-red);
	}

.subhead a:hover,
.smallsubhead a:hover
	{
	color: var(--AJ-dark-grey);
	text-decoration: underline;
	} 


/* =========== */
/* TEXT BLOCKS */
/* =========== */

blockquote
	{
	font-family: 'Lato',"Lucida Grande","Lucida Sans","Lucida Sans Unicode",Verdana,sans-serif;
	font-size: 18px;
	line-height: 150%;
	padding-left: 10px;
	margin-left: 15px;
	color: var(--AJ-dark-grey);
	border-left: 6px solid var(--AJ-dark-red);
	}
	
blockquote a:link, a:visited
	{
	font-size: 18px;
	}
	
.indent
	{
	margin-left: 15px;
	}

.copy
	{
	font-size: 14px;
	text-align: left;
	line-height: 150%;
	color: var(--AJ-dark-grey);
	}

.copy a:link,
.copy a:visited
	{
	font-size: 14px;
	color: var(--AJ-black);
	text-decoration: none;
	}

.copy a:hover
	{
	color: var(--AJ-red);
	text-decoration: underline;
	}	

/* =============== */
/* BLURBS & AWARDS */
/* =============== */

.blurb,
.bigblurb
	{
	font-family: 'Lato',sans-serif;
	font-style: italic;
	line-height: 120%;
	margin-left: 20px;
	color: var(--AJ-dark-red);
	}
	
.blurb
	{
	font-weight: 400;
	font-size: 22px;
	margin-left: 20px;
	}

.bigblurb
	{
	font-weight: 400;
	font-size: 28px;
	letter-spacing: -0.01em;
	}
	
.blurber,
.bigblurber
	{
	font-family: 'Lato',sans-serif;
	display: inline;
	font-style: normal;
	text-transform: uppercase;
	line-height: 150%;
	margin-left: 1em;
	color: var(--AJ-dark-grey);
	}
	
.blurber
	{
	font-size: 18px;
	font-weight: 900;
	}
	
.bigblurber
	{
	font-size: 23px;
	font-weight: 900;
	letter-spacing: 0.01em;
	}
	
.awards
	{
	font-family: 'Lato',sans-serif;
	font-size: 23px;
	font-weight: 700;
	line-height: 110%;
	margin-left: 10px;
	margin-top: 10px;
	margin-bottom: 5px;
	color: var(--AJ-black);
	}	

.awards a:link,
.awards a:hover,
.awards a:visited
	{
	font-size: 25px;
	}

.awarder
	{
	font-family: 'Lato',"Lucida Grande","Lucida Sans","Lucida Sans Unicode",Verdana,sans-serif;
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	margin-left: 20px;
	color: var(--AJ-dark-grey);
	}
	
.gameawards
	{
	font-family: 'Lato',"Lucida Grande","Lucida Sans","Lucida Sans Unicode",Verdana,sans-serif;
	font-size: 17px;
	font-style: normal;
	font-weight: 700;
	color: var(--AJ-dark-grey);
	line-height: 150%;
	text-transform: none;
	padding: 10px 20px 10px 20px;
	border: 1px solid var(--AJ-dark-grey);
	}

.accolade
	{
	font-family: 'Libre Baskerville',serif;
	font-size: 21px;
	font-style: italic;
	font-weight: 400;
	color: var(--AJ-light-grey);
	line-height: 140%;
	text-transform: none;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 20px;
	background-color: var(--AJ-dark-red);
	}



/* ================ */
/* HORIZONTAL RULES */
/* ================ */

hr.workdivider
	{
	border-top: 4px solid var(--AJ-med-grey);
	width: 100%;
	margin-top: 50px;
	margin-bottom: 50px;
	}



/* ====== */
/* IMAGES */
/* ====== */

img
	{
	-ms-interpolation-mode:bicubic;
	}

body a img
	{
	border: none;
	}
	
img.siteheaderpicflex
	{
	width: 337px;
	height: 322px;
	border: none;
	}

img.siteheaderpic
	{
	float: left;
	position: absolute;
	width: 225px;
	height: 215px;
	margin-top: 0px;
	border: none;
	}

img.lefthero300
	{
	width: 300px;
	border: none;
	}

img.lefthero200
	{
	width: 200px;
	border: none;
	}

img.cover
	{
	float: right;
	width: 250px;
	margin: 5px 0px 5px 10px;
	border: 1px solid var(--AJ-dark-grey);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	}

img.lefthero
	{
	float: left;
	width: 250px;
	margin: 5px 10px 10px 0px;
	}

img.coverleft,
img.coverleft200,
img.coverleft300
	{
	float: left;
	width: 250px;
	margin: 5px 10px 10px 0px;
	border: 1px solid var(--AJ-dark-grey);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	}

img.coverleft200
	{
	width: 200px;
	}

img.coverlefttrans,
img.coverlefttrans200,
img.coverlefttrans300
	{
	float: left;
	width: 250px;
	margin: 5px 10px 10px 0px;
	}

img.coverlefttrans200
	{
	width: 200px;
	}

img.coverlefttrans300
	{
	width: 300px;
	}

img.coverleft300
	{
	width: 300px;
	margin: 0px 10px 10px 0px;
	}

img.covertrans,
img.covertranswide
	{
	width: 245px;
	float: right;
	margin: 5px 0px 5px 20px;
	}

img.covertranswide
	{
	width: 350px;
	}

img.coverwide
	{
	float: right;
	width: 350px;
	margin: 5px 0px 5px 20px;
	border: 1px solid var(--AJ-dark-grey);
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	}

img.alignright
	{
	float: right;
	margin: 0px 0px 5px 10px;
	border: none;
	-webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	-moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
	box-shadow: 0 2px 10px rgba(0,0,0,.2);
	}

img.alignrighttrans
	{
	float: right;
	margin: 0px 0px 5px 10px;
	border: none;
	}

img.articlethumb
	{
	max-width: 400px;
	max-height: 350px;
	display: block;
	margin-top: 5px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
	}

img.awardlogo
	{
	width: 600px;
	display: block;
	}

img.buybutton
	{
	float: left;
	width: 180px;
	margin-right: 10px;
	margin-bottom: 10px;
	border: none;
	}


/* ====================== */
/* BODY TEXT LINK COLOURS */
/* ====================== */

/*Yes, I am British. Why do you ask? ;) */

a:link, a:visited
	{
	text-decoration: none;
	color: var(--AJ-dark-red);
	}

a:hover
	{
	text-decoration: underline;
	color: var(--AJ-dark-grey);
	}