/* This file is loaded by the main html code using a media constraint 

@media only screen and (max-width: 620px) - minus a smidgen to prevent browser
combining the two distinct rulesets...
  {
		  // Assert all of the following //
  }
*/		

@media only screen and (max-width: 619.9px) {

body {	
				margin			: 0 auto;
				min-width		: 360px;
				font-family		: Arial, Helvetica, Verdana, "Open Sans", sans-serif;
				--menu-left 	: 0px;
				--menu-width 	: 80vw;	
				--menu-height	: 40px;
				--menu-text-col : #291204;
				--menu-back-col	: #f6cf96;
				--menu-live-col : black;
				--menu-revd-col : whitesmoke;}				

 .desktop 	{  	display			: none;  }
 .mobile 	{  	display			: block; }

 .container {  	width			: auto;
				margin			: 0 auto}

.mininav 	{	font-size		: 16px;
				font-weight		: 700; }	

.mininav td {  	width			: 86px;
  				vertical-align	: middle; }

.mininav td:not(:last-child) a {
  				width			: 86px;  }

.mininav table tr:last-child td:last-child {
  				width			: 100%;  }

.mininav table td img {
			  	height			: 25px; 
			  	float			: right;   }

#centraliser h3, #mobileVariant h3 {
  				text-align		: center;  }

#backpage-content, #backpage-content-mobile,
.backpage-content, .backpage-content-mobile {
    min-height			: 460px;  /* Adjusted for 360 x 640 screens */
	margin-top			: 4px;}   /* Creates the separation line */

.art-menu a .t,
.question {
-webkit-user-select : none;/* Safari */
-ms-user-select : none;/* IE 10 and IE 11 */
user-select : none;/* Standard syntax */
}

.button_bar_mobile {
  position			: absolute; 
  height			: 22px; 
  width				: 200px;
}
.top {
  top				: 4px;
  left				: 350px;
}
.base {
  top				: 12px; 
  left				: 16px; 
}

.nav ul {
	font-size				: 16px;
	}

.button_shadow_spacer{
  width				: 20px;
  height			: 22px;
  float				: left;
  margin-right		: 5px
}

.art-menu ul a 				{ width : 14em;}
.art-menu ul li a 			{ text-indent : 1.0em; font-weight: 400; }
.art-menu ul li.heading a 	{ text-indent : 0.4em; font-weight: 700; font-style: italic;}

.art-Sheet { 
	position			: relative;
	margin				: 0;
	width 				: calc(100% - 2px);
	background-color	: #2B424A;
	border-radius		: 15px;
	border				: 1px solid #568495;
	z-index				: 0}

.art-Sheet-body 			{ margin-top : 0; padding:0;}
#art-main 					{ padding-top : 0; }

#padding_edges {
    padding: 10px 4px;}

#padding_edges.padding_merge{
   padding: 0;}

#padding_edges.padding_404 {
	padding				: 20px 6px;
	height				: 400px;
	text-align			: center;
	vertical-align		: middle;
}	

.telescope {
    top					: -60px;
    left				: 10px;
    height				: 72px;
    width				: 78px;
	background-size		: cover; }
	
#message {
    border-right		: #eda 0 solid;
    border-left			: #eda 0 solid;
    border-top			: #eda 2px solid;
    border-bottom		: #eda 2px solid;
    padding-right		: 2em;
    padding-left		: 0em;
    padding-bottom		: .5em;
    padding-top			: .5em;
    color				: #7c6240;
    font-family			: Arial,Helvetica,Serif;
    font-weight			: bold;
    text-align			: center;
    background			: transparent;
    margin				: 0 0;
    width				: auto;
    line-height			: 1;
    list-style-type		: none;
    overflow			: hidden;
}

.xr_ap 	{
	width					: 480px; 
	height					: auto; 
	top						: 0;
	margin					: 0 auto;
}

.art-menu a{
	position				: relative;
	display					: block;
	overflow				: hidden;
	height					: 29px;
	text-decoration			: none;
	margin-right			: 0;
	margin-left				: 0;
	cursor					: pointer;}
	
.button_shadow  {
	width					: 35px;
	height					: 22px;
	border-radius			: 4px;
	margin-right			: 5px;
	float					: left;
	box-shadow				: 4px 4px 5px black;
	cursor					: pointer;}

.button_shadow:hover {
	top						: 2px;
	left					: 2px;
	box-shadow				: none;	}		

.sinker {
	position				: relative;
	height					: 180px; } 	/* 180px needed to accomodate small book covers */
	
.seafloor {
	position				: absolute; 
	bottom					: 4px; 
	height					: 180px; 
	width					: calc(100% - 20px); }

.coral_reef {
	position				: absolute; 
	display					: grid; 
	bottom					: 0;
	grid-template-columns	: 60px auto; 
	grid-template-rows		: 60px;
	grid-column-end			: -1;
	grid-auto-flow			: row dense; 
	grid-gap				: 4px;
	align-items				: center;
	justify-items			: center; 
	width					: calc(100% - 200px);	}		

.awarded::after{
	content					: "Prizes captured";
	display					: none;
	position				: relative;
	right					: -80px;
	width					: 100px;
	text-align				: center;
	background-color		: #fef4c5;
	border					: 1px solid #d4b943;
	border-radius			: 4px;
	opacity					: 0.5;
	font-size				: small;
	z-index					: 12;}
.awarded:hover::after{
	display					: block;}

.reef_dweller_1 {
	position				: absolute; 
	bottom					: -4px; 
	height					: 100px; 
	width					: 96px;
	background-image		: url('../Pictures/Dragon_Small_2013_s.png');
	background-size			: cover; }

.reef_dweller_2 {
	position				: absolute; 
	left					: 0;
	bottom					: -4px; 
	height					: 100px; 
	width					: 64px;
	background-image		: url('../Pictures/ship-2011-rev.gif');
	background-size			: cover; }

.reef_dweller_3 {
	position				: absolute; 
	bottom					: -90px;
	left					: 0;
	height					: 200px; 
	width					: 48px;
	background-image		: url('../Pictures/sword_image_s.gif');
	background-size			: 100% 100%;
	}

.reef_dweller_4 {
	position				: absolute; 
	bottom					: -4px; 
	height					: 80px; 
	width					: 100px;
	background-image		: url('../Pictures/JanChristopher.png');
	background-size			: 100% 100%;
	}

.reef_dweller_5 {
	position				: absolute; 
	bottom					: -10px;
	left					: -10px; 
	height					: 142px; 
	width					: 112px;
	background-image		: url('../Pictures/QuillScroll.png');
	background-size			: 100% 100%;			}

.rockpool_grid {
	position				: relative;
	display					: grid;
	grid-template-rows		: 10em auto;
	grid-template-columns	: repeat( auto-fill, minmax(14em, 2fr) );  
	grid-row-gap			: 3em;
	margin					: 0 0 2em 1em;		}

.shellfish {
	position				: relative;
	width 					: var( --cover-width);
	height					: var( --cover-height);			
	margin					: 0 auto;
	border					: 4px solid #CCC;
	box-shadow				: 4px 4px 5px black;}
	
.shellfish:hover  {
	right					: 0px; 
	bottom					: -4px; 
	box-shadow				: none;		}

.sandeel:after {
	content					: 'Award winning title';
	font-size				: small;
	}	

.shellfish.UK_flag::after  {
	content 				: '';
	position				: absolute;
	top						: 166px;
	left					: 50px;
	height 					: 11px;
	width					: 16px;
	background-image		: url('../Pictures/Flag_UK.gif');		}

.shellfish.US_flag::after  {
  content 					: '';
  position					: absolute;
  top						: 166px;
  left						: 50px;
  height 					: 11px;
  width						: 16px;
  background-image			: url('../Pictures/Flag_US.gif');		}


.thumbnail_2021 {
	position				: absolute;
	width 					: var( --cover-width);
	height					: var( --cover-height);			
	right					: 10px;
	bottom					: 8px;
	border					: 4px solid #CCC;
	box-shadow				: 4px 4px 6px rgb(0,0,0,0.75);}

.thumbnail_2021:hover  {
	bottom					: 4px; 
	box-shadow				: none;
	cursor					: pointer;		}

.thumbnail_e {
	position				: absolute;
	bottom					: 0px;
	right					: 0px;
	height					: 10em;
	width					: 11em;
	filter					: drop-shadow(2px 4px 4px rgba(0,0,0,0.75));
	background-size			: cover;		}	
.thumbnail_e:hover {
	bottom					: -4px; 
	filter					: none;		}	

.lang:hover {
	margin-top				: 4px; 
	box-shadow				: none;		}

.placeholder {
	position				: relative;
	float					: right; 
	top						: 20px; 
	width					: 110px; 
	height					: 157px; 
	margin					: 20px 0px 40px 20px;		}	

.lang {
	left					: 0; 
	top						: 0; 
	float					: none;		}


.thumbnail img,
.shellfish img
	{
	height					: 148px;
	width					: 100px;
	}


.mininav table td:last-child {
  width						: 100%;
  }


td a.fullcell {
	display					: block;
	margin					: 2px 0 0 10px ;
	padding					: 14px 2px 14px 2px;
	height 					: 6px;
	color					: #7c6240;
	text-decoration			: none;
}

.OutOfPrint {
	position				: absolute;
	left					: 64px;
	top						: 100px;
	width					: 232px;
	background-color		: #FF9900; 
	border					: 1px solid; 
	box-shadow				: 0 0 4px 4px rgba(0, 0, 0, 0.5); 
	padding					: 4px 6px 6px 6px; 
	text-align				: center;
	z-index					: 1; 
}

.kindleunlimited {
	top:24px;
	right:10px;
}



/* Updated to streamline the mobile version internal menu structures */
.textblock {
	margin				: 20px 20px 0 20px;
	padding-top			: 40px;}
.textblock_initial {
	margin-top			: 0; 
	padding-top			: 0;}
.textblock_translated {
	margin-top			: 30px; 
	padding-top			: 0;}
.textblock_margin {
	margin				: 0 20px;}

.microNav 
	{
	border-top: #eda 1px solid;
	border-bottom: #eda 1px solid;
	font-size: 16px;
	padding: 4px;
	margin-bottom: 32px;
	background-color: whitesmoke;
	border-top: 2px dotted #291204;
	border-bottom: 2px dotted #291204;
	position: relative;
	left: -16px;
	width: calc(100% + 20px);
	}					  


a:link .microNext, a:visited .microNext, a:link .microPrev, a:visited .microPrev  
{  color			: black; }

.Null
{  color			: grey; }

.microNext, .microPrev, .microDivide
{
  width				: 50px; 
  height			: 30px;
  float				: right;
  font-size			: 13px; 
  text-align		: right;
  text-decoration	: none;
  display			: block;
}

.microNext a, .microPrev a, .microDivide a
{
  text-decoration	: none;
  color				: black;
}

.microNext 	{  text-align:right;}
.microDivide{  text-align:center; width:6px;}
.microPrev  {  text-align:left;}

.microDivide::before
{  content			: "|" }


.contributors table {
	width 				: 100%;
}



.contributors td {
	border-bottom		: 1px solid #ddd;
	vertical-align 		: top;
	padding				: 1px 5px 15px 0;
}

.contributors td:nth-child(1) {
	width				: 40%;
}

.separator {
	height				: 50px; 
	margin				: 30px 0 10px 0; 
}

.maple {
	background			: url('../Pictures/leaves.gif') no-repeat center;
}

.mini_flag {
  width					: 16px; 
  height				: 11px; 
  margin-bottom			: 4px;
}

.tab_flag {
  width					: 16px; 
  height				: 11px;
  margin-left			: 10px; 
}

#EmmaEssay .mininav {
  visibility			: hidden;
}


/* 
  SadWolf Germany styles 
*/
.sw-font-size-2 { font-size: 12px; }
.sw-font-size-5 { font-size: 20px; }
.sw-font-size-6 { font-size: 28px; }
.sw-0-0-centre  { text-indent: 0  ; margin-top: 0;   text-align:center;}
.sw-0-4-centre  { text-indent: 0  ; margin-top: 2pt; text-align:center;}

#tabselector {
	margin				: 0 auto;
}

#tabselector_mobile {
	margin-top			: 40px;
	width				: 95%;
}


.art-main {
	position: relative;
	width: 100%;
	left: 0;
	top: 0;
	height: auto;
	padding-top: 0px;}

.mobile_information, 
.mobile_overview {
    position			: relative;
    top					: 10px;
    min-height			: 420px;
    text-align			: center;
    border				: 3px solid #8c9777;
    border-radius		: 15px;
    padding				: 0 10px;
    background-color	: whitesmoke;
    margin				: 0 4px;
    overflow			: hidden;
  	z-index				: 0;}

.mobile_information {
  display				: grid;
  text-align			: left;
  align-items			: start;
  grid-gap				: 10px 0px;
  grid-template-columns	: repeat(5, 1fr) 120px;
  grid-template-rows	: minmax(2em, auto) minmax(4em, auto) auto 160px 1px;
  grid-template-areas	: "hd hd hd hd hd hd"
  						  "bl bl bl bl bl bl"
						  "mt mt mt mt mt mt"
						  "ic p1 p2 p3 p4 cv";}
.mob_title {  grid-area	: hd;}
.mob_blurb {  grid-area	: bl;}
.mob_yt	   {  grid-area	: yt;}
.mob_table {  grid-area	: mt; z-index:11;}
.mob_cover {  grid-area	: cv; z-index:10;}
.mob_icon  {  grid-area	: ic;}
.mob_prize1{  grid-area	: p1; align-self: end; margin: 0 auto;}
.mob_prize2{  grid-area	: p2; align-self: end; margin: 0 auto;}
.mob_prize3{  grid-area	: p3; align-self: end; margin: 0 auto;}	
.mob_prize4{  grid-area	: p4; align-self: end; margin: 0 auto;}	

		
.mobile_splash {
  font-size			: 1.17em; 
  font-weight		: bold;
  margin			: 18px 0 20px 0;
  width				: auto;
  text-align		: center;		}

.mobile_title {
  font-size			: 18px; 
  font-weight		: 700;
  margin			: 18px 0 20px 0;
  width				: auto;
  text-align		: left;		}

.mobile_mini_cover {
	position		: absolute; 
	height			: 220px; 
	top				: 620px; 
	right			: 130px;}

.mobile_content {
  position			: relative;
  z-index			: 0; 
  width				: 100%; 
  height			: 92px; 
  background-size	: cover;
}

.editions {
  font-size			: small;
  font-weight		: 400;
  vertical-align	: super;
}

.art-Footer .mobile_footer_background {
  width				: 460px; 
  height			: 36px;
 top				: 0px;
  left				: 0px;}

.art-Footer_mobile {
    height			: 3em;
    width			: calc(100% - 10px);
    text-align		: right;
    padding-top		: 4px;
    padding-right	: 10px;
    top				: 4px;
    left			: 0;
    margin			: 0;
    background-color: #568495;
    border-bottom-left-radius	: 15px;
    border-bottom-right-radius	: 15px}

.art-Footer_mobile:before {
	content			: '\00a9\0020 2025 Helen Hollick';
	font-size		: 14px;
	position		: absolute;
	top				: 16px;
	left			: calc(100% - 170px);
	}

.Tag_Line {
	position		: relative;
	background-color: whitesmoke;
	width			: 98%;
	margin			: 0 auto;
	margin-bottom	: 0;
	top				: -30px;
	margin-bottom	: 30px;
	font-size		: 13px;
	text-align		: center;
	border-top		: 2px solid #291204;
	border-bottom	: 2px solid #291204;
}

.nav [id^=drop] {
	display					: none;}
		
.nav input[type=checkbox] + label::before {
	/* (A bit hacky!) Omit content item to hide arrow until hovered...	*/
	position				: absolute;
	transform-origin		: 25% 50%;
	border					: 6px solid transparent;
	border-left-color		: var(--menu-back-col); /* #f6cf96; */
	margin					: 15px 0 0 -12px;
	-webkit-transition 		: all .1s ease;  
	-moz-transition			: all .1s ease;  
	-o-transition			: all .1s ease;  
	transition				: all .1s ease;}		
.nav input[type=checkbox] + label[for="drop-22"]::before {
	/* The menu bar at top is thinner then the drop-downs.  Align arrow to middle of it */
	margin-top				: 10px;}

.nav .art-menu > li.MobileMenuItem:hover > input[type=checkbox] + label::before,
.nav .art-menu ul input[type=checkbox] + label::before {
	content					: '';
	border-left-color		: var(--menu-back-col); /* #f6cf96; */
	}

.nav input[type=checkbox]:checked + label::before  {
	transform				: rotate(90deg);}

.nav .art-menu {
	padding					: 0 15px;	}

.nav .art-menu,
.nav .art-menu ul {
	margin					: 0;
	border					: 0;
	min-height				: 0;
	list-style-type			: none;
	display					: block		}

.nav .art-menu ul {
	visibility				: hidden;
	position				: unset;
	margin					: 1px;
	z-index					: 10;
	left					: 0;
	top						: 100%;
	background				: none;
	padding					: 0;
}

.nav .art-menu-separator {
	width					: 2px;
	height					: 29px;
	background-color		: white;
	pointer-events			: none;
}

.nav .art-menu li li {
	float					: none;
	}


.nav .art-menu:after,
.nav .art-menu ul:after {
	content					: "";
	height					: 0;
	display					: block;
	visibility				: hidden;
	overflow				: hidden;
	clear					: both
}


.nav .art-menu ul a {
	display					: block;
	background-image		: none;
	text-align				: center;
	white-space				: nowrap;
	height					: 40px;
	height					: var( --menu-height);
	width					: 15em; /* <-- Controls the horizontal width of the secondary drop-downs */
	width					: var( --menu-width );
	overflow				: hidden;
	line-height				: 40px;
	line-height				: var( --menu-height);
	margin-right			: auto;
	background-color		: #291204;
	border-width			: 1px;
	border-style			: solid;
	border-left				: 0;
	border-color			: #f6cf96;
	}

.nav .art-menu ul ul a {
	margin-left				: auto
	}

.nav .art-menu ul a,
.nav .art-menu ul a:link,
.nav .art-menu ul a:visited,
.nav .art-menu ul a:active {
	text-align				: left;
	text-indent				: 12px;
	text-decoration			: none;
	line-height				: 40px;
	line-height				: var( --menu-height);
	color					: #f6cf96;
	font-size				: 16px;
	font-style				: normal;
	font-weight				: 400;
	margin					: 0 0 -2px 19px;
	padding-left			: 6px;
	}

.nav .art-menu li > ul {
	display					: none;
	margin-left				: -19px;
	}

.nav .art-menu ul .MobileMenuPrime a {
	margin					: -2px 0 -1px 0;
	font-weight				: bold;}		

.nav .art-menu a,
.nav .art-menu a:link,
.nav .art-menu a:visited  {
	text-align				: left;
	text-decoration			: none;
	outline					: none;
	letter-spacing			: normal;
	word-spacing			: normal;
	display					: block
	}

.nav .art-menu li:hover, 
.nav .art-menu ul li:hover > a, 
.nav .art-menu ul li a:hover, 
.nav .art-menu ul li.MobileMenuDrop:hover, 
.nav .art-menu ul li.MobileMenuPrime:hover, 
.question:hover {
	color					: #291204;
	color					: var( --menu-text-col );
	background-color		: #f6cf96;
	background-color		: var( --menu-back-col );}

.nav .MobileMenuItem  {
	font-size				: 16px;
	font-style				: normal;
	font-weight				: 400;
	color					: #f6cf96;
	padding					: 0 17px;
	margin					: 0;
	text-align				: center;
	letter-spacing			: normal;
	word-spacing			: normal;
	width					: 34px;
	height					: 29px;}

.nav label  {
	display					: block;
	cursor					: pointer;
	padding-left			: 18px;	}

.nav .MobileMenuItem>label  {
	padding-left			: 4px;
	width					: 68px;
	margin-left				: -16px;
	height					: 30px;	}

.art-menu li {
	margin					: 0;
	padding					: 0;
	border					: 0;
	display					: block;
	float					: left;
	position				: relative;
	z-index					: 5;
	background				: none;	}

/* Brings the list items up above neighbour shadows. */
.nav .art-menu li {	
	z-index					: 2;}
	
/* Brings the list items up above neighbour shadows. */
.nav .shadowed li { 
	filter 					: drop-shadow(5px 5px 10px var(--menu-text-col));}

/* EXPERIMENTAL Dim background elements while menu is active */
.nav input[type=checkbox]:checked + label[for="drop-22"]:after{
	content				: '';
	top					: 0px;
	height 				: 100%;
	width 				: 100vw;
	position 			: fixed;
	left				: 0;
	background-color	: black;
	opacity				: 0.6;
	z-index				: -1} 
/* EXPERIMENTAL Dim background elements while menu is active */

/* 	------------------------------------------------------------------------------------------------------------
	The mobile version of the menu needs to offer a lot of choices via a small display area, requiring some
	compromises.  The site colour-palette is "earthy", with many browns, greens & greys.  Not ideal for a reduced
	visual area, so this menu begins with the standard colours then highlights accordian drop-downs with much
	brighter visual accents, along with a drop-shadow. 
	------------------------------------------------------------------------------------------------------------ */

.nav .art-menu li.MobileMenuDrop,
.nav .art-menu ul .MobileMenuPrime {
	display					: block;
	text-align				: left;
	white-space				: nowrap;
	left					: 24px; /* <-- Controls the horizontal positioning lists */
	left					: var( --menu-left );
	height					: auto;
	width					: 15em; /* <-- Controls the horizontal width of the secondary drop-downs */
	width					: var( --menu-width );
	overflow				: hidden;
	line-height				: 40px; /* <-- Controls the vertical height of the secondary drop-downs */
	line-height				: var( --menu-height);
	margin-right			: auto;
	color					: #f6cf96;
	color					: var( --menu-back-col );
	background-color		: #291204;
	background-color		: var( --menu-text-col );
	border					: 1px solid;}

/* Animates the rotating left arrow */
.nav .art-menu li.MobileMenuDrop ul li a.MenuOverview::before {
	content					: '';
	position				: absolute;
	right					: 0px;
	transform-origin		: 25% 50%;
	border					: 6px solid transparent;
	border-left-color		: var( --menu-back-col );
	margin					: 14px 10px 0 -12px;
	transition				: all .1s ease;
	-webkit-transition		: all .1s ease;
	-moz-transition			: all .1s ease;
	-o-transition			: all .1s ease;}

/* Sets the colour of the rotating left arrow */
.nav .art-menu > li.MobileMenuItem:hover > input[type="checkbox"] + label::before, 
.nav .art-menu ul li:hover input[type="checkbox"] + label::before, 
.question:hover::before {
	content					: '';
	border-left-color		: #291204; 
	border-left-color		: var( --menu-text-col ); }

/* Switches on the drop-lists when checkbox is active  */
.nav [id^=drop]:checked ~ ul { 	
	display					: block;
	visibility				: visible;	}

/* Highlight the important menu item */
.nav .art-menu li.MobileMenuDrop ul li a.MenuOverview {
	 font-weight			: bold !important; }
	 
/* Asserts coloured highlights to differentiate dropped blocks */
.nav .art-menu li.MobileMenuDrop ul li a.MenuOverview::before {
	content					: '';
	border-left-color		: var( --menu-live-col );	}
.nav .art-menu li.MobileMenuDrop ul li:hover a.MenuOverview::before {
	content					: '';
	border-left-color		: var( --menu-revd-col );	}

.nav .art-menu li.MobileMenuDrop ul li a {
	 color					: var( --menu-live-col );
	 background-color		: var( --menu-revd-col );
	 border-top-color		: var( --menu-live-col );
	 border-bottom-color	: var( --menu-live-col );}
.nav .art-menu li.MobileMenuDrop ul li a:hover	{
	 color					: var( --menu-revd-col );
	 background-color		: var( --menu-live-col );
	 border-color			: var( --menu-revd-col );}

.nav .art-menu li.MobileMenuDrop ul li a.FlagUS::after,
.nav .art-menu li.MobileMenuDrop ul li a.FlagUK::after   { 
	content 				: '';
	height 					: 11px;
	width 					: 16px;
	position 				: relative;
	float 					: right;
	margin 					: 3px 10px 0 0;	}

.nav .art-menu li.MobileMenuDrop ul li a.FlagUS::after { 
	background-image 		: url('../Pictures/Flag_US.gif'); }

.nav .art-menu li.MobileMenuDrop ul li a.FlagUK::after   { 
	background-image 		: url('../Pictures/Flag_UK.gif'); }

.nav .float_right {
	float					: right;}	

.dragon_flag {
	position				: absolute; 
	bottom					: -4px; 
	left					: 0px; 
	height					: 100px; 
	width					: 96px;	}

.brag_mobile {
	width					: 76px; 
	height					: 48px;
	background-image		: url('../Pictures/zzIndieBragLogo_s.png');	}

.wreath_mobile {
	width					: 48px; 
	height					: 48px; 
	background				: url('../Pictures/laurel-wreath-winner.gif');
	background-size			: 100% 100%; 
	border					: 2px solid #CCCCCC;
	padding					: 4px;
}

.chill_mobile {
  width						: 56px; 
  height					: 56px;
  background				: url('../Pictures/Chill_Logo.png');
  background-size			: cover;
  }

.chill_BotM_mobile {
  width						: 100px; 
  height					: 54px;
  background				: url('../Pictures/BotM_Nov_2022.jpg');
  background-size			: cover;
  }


.eds_choice {
	width					: 75px; 
	height					: 46px;
	background-image		: url('../Pictures/HNS_Eds_Choice.png');
	background-size			: cover;
}


.HNS_long_list {
	width					: 75px; 
	height					: 46px;
	background-image		: url('../Pictures/HNSIndieLonglisted2015.png');
	background-size			: cover;
}

.HFC_Bronze {
  width						: 56px; 
  height					: 56px;
  background				: url('../Pictures/HFC_Bronze_s.png');
  background-size			: cover;
  }


/* --------------------------------------------------------------------------------------
   The headers MUST come last in the cascade, so that any adjustments remain in force.
   -------------------------------------------------------------------------------------- */   


.header_404 {
  background-image	: url('../Pictures/Banner-Unknown-Address.jpg'); 
}  

.header_seawitch {
	background-image: url('../Pictures/Banner-SW-Series.jpg'),
		linear-gradient(180deg, rgba(107, 130, 138, 1), rgba(103, 127, 134, 1)),
		linear-gradient(135deg, rgba(78, 92, 105, 1), rgba(30, 49, 63, 1)),
		linear-gradient(135deg, rgba(41, 81, 140, 1), rgba(41, 81, 140, 1));
	background-position: 
		center center;
	background-size: contain, 100% 84%, 100% 87%, cover;
	background-repeat: 
		no-repeat;
}  

.header_banner {
	background-image	: url('../Pictures/Banner-PB-Trilogy.jpg'),linear-gradient(180deg, rgba(63, 59, 50, 1), rgba(31, 33, 34, 1));
	background-position: center center;
	background-size: contain, cover;
	background-repeat: no-repeat;
  
}  

.header_saxon {
	background-image	: url('../Pictures/Banner-Saxon-Series.jpg'),linear-gradient(135deg, rgba(49, 26, 70, 1), rgba(99, 78, 121, 1)); 
	background-position: center center;
	background-size: contain, cover;
	background-repeat: no-repeat;
}  

.header_diamond {
	background-image	: url('../Pictures/Banner-DtD-Volumes.jpg'),linear-gradient(135deg, rgba(181, 151, 87, 1), rgba(181, 151, 87, 1)); 
	background-position: center center, 0 0;
	background-size: contain, 100% 100%;
	background-repeat: no-repeat, repeat;
}  

.header_fact {
	background-image	: url('../Pictures/Banner-Non-Fiction.jpg'); }  

.header_collaboration {
	background-image	: url('../Pictures/Banner-Collaborations.jpg'); }

.header_mystery {
	background-image	: url('../Pictures/Banner-Mystery.jpg'),linear-gradient(140deg, rgba(1, 0, 0, 1), rgba(13, 5, 2, 1));
	background-position	: center center;
	background-size		: contain;
	background-repeat	: no-repeat;}

.header_journal {
	background-image	: url('../Pictures/Banner-Journal.jpg'),linear-gradient(140deg, rgba(116, 112, 85, 1), rgba(151, 147, 120, 1)); 
	background-repeat	: no-repeat;	}

.header_archive {
	background-image	: url('../Pictures/Banner-Journal-Archives.jpg'),linear-gradient(140deg, rgba(116, 112, 85, 1), rgba(151, 147, 120, 1)); 
	background-size		: cover;
	background-repeat	: no-repeat;}

.header_dispatches {
	background-image	: url('../Pictures/Banner-Dispatches.jpg'),linear-gradient(140deg, rgba(116, 112, 85, 1), rgba(151, 147, 120, 1)); 
	background-repeat	: no-repeat;	}

.header_gallery {
	background-image	: url('../Pictures/Banner-Gallery.jpg'),linear-gradient(140deg, rgba(116, 112, 85, 1), rgba(151, 147, 120, 1)); 
	background-repeat	: no-repeat;}
	
.header_contact {
	background-image	: url('../Pictures/Banner-Contact-2.jpg'),linear-gradient(140deg, rgba(116, 112, 85, 1), rgba(151, 147, 120, 1)); 
	background-repeat	: no-repeat;}
		
.header_search {
	background-image	: url('../Pictures/Banner-SiteSearch.jpg'); 
	background-repeat	: no-repeat;}	

.header_h2ubonus {
 	background-image	: url('../Pictures/Banner-H2U-base.jpg');
	background-repeat	: no-repeat;}

.header_h2ubonus::before {
	content 			: '';
	position			: absolute; 
	top					: 0px; 
	left				: 20px; 
	width				: 60%;
	height				: 60px;
 	background-image	: url('../Pictures/H2U-Bonus.png');
	background-size		: cover}
	
.header_h2ubonus > #sub_title {
	position			: absolute; 
	top					: 50px; 
	left				: 20px; 
	width				: 400px; 
	height				: 80px;}	

#telescope_logo_align {
     position 			: absolute;
     top 				: -54px;
     left 				: 4px;
     width 				: 100px;
     height 			: 90px;
     background-image 	: url('../Pictures/Telescope.png');
	 background-size	: cover;
     filter 			: drop-shadow(2px 4px 4px black);}
	
#annum { /* background date image is added via javascript */
	position			: absolute;
	top					: 50%;
	left				: 50%;
	width				: 100px;
	height				: 50px;
	background-size		: cover;
	transform			: translate(-25%, -50%);}
#centraliser{
	padding				: 0;
    text-align			: justify}
#centraliser.middled {
	text-align			: center}
	
/* CSS elements controlling the new twin-format Journal entry pages */

.Jo_col {
	flex				: 0 1 98%;	}

.Jo_entry	{
	flex				: 0 0 96%;
	margin				: 0 2%;
	line-height			: 1.5;
	text-align			: justify;}


/* CSS handling the slideshow elements used by the Gallery in mobile mode */

.gilded_frame {
	position		: relative; 
	left			: 0;
	width			: 100%;
	padding-bottom	: 75%;
	background-color: black; 
	background-image: url('../Pictures/gallery_frame.gif');
	background-size	: contain;
	overflow		: hidden;}

.gilded_sensor { /* !important : Exposes current div dimensions to other DOM elements */
	position: absolute; 
	top: 0; bottom: 0; left: 0; right: 0;}

.gilded_canvas {
	position		: absolute; 
	width			: calc( 100% - 10px );
	height			: calc( 100% - 10px );
	left			: 5px; 
	top				: 5px;
	text-align		: start;
	z-index			: 0;
	overflow		: hidden} 	

.gilded_controls {
 	position		: relative; 
	width			: 100% !important;
	top				: 20px; 
	height			: 40px;
	margin			: 0 auto;
	opacity			: 1.0 !important;}

.gilded_controls a.next,
.gilded_controls a.prev {
	padding			: 4px 12px;
	background-color: white;
	font			: normal 16px Arial;}

.gilded_slide{
	display			: inline-block; 
	text-align		: center; 
	width			: 60px;}		

.gilded_message {
	position		: relative;
	margin-top		: 20px;
	font-size		: 16px;
	text-align		: center;}
.gilded_message	> span {
	display			: block;
	font-size		: smaller; 
	font-style		: italic;}

.gilded_thumb {
	width			: 50%}

.gildedTL, 
.gildedBL, 
.gildedTR, 
.gildedBR {
	width 			: calc(100% - 0px)}

.gildedTL img, 
.gildedTR img, 
.gildedBL img, 
.gildedBR img  {
	width			: calc(50% - 4px)}
	
.gildedTL {	position : absolute; left: 1px;				top	: 1px}
.gildedTR {	position : absolute; left: calc(50% + 1px);	top	: 1px}
.gildedBL {	position : absolute; left: 1px;				top	: calc(50% + 1px)}
.gildedBR {	position : absolute; left: calc(50% + 1px);	top	: calc(50% + 1px)}

.gilded_portrait {
	width: 50%;}

.gilded_landscape {
	width: 100%;}

/* 
	Featured content controls.  Placed here to enable override 
	Source: featuredcontentglider.css
*/

.glidecontentwrapper{
position: relative;} /* Do not change this value */

.glidecontent{
position: absolute; /* Do not change this value */
background: transparent;
background: black;
padding: 0px;
visibility: hidden;
width: 100%;
height:100%;}

.glidecontent img{
width: 100%;
}

.glidecontenttoggler{
text-align: center;}

.glidecontenttoggler a{
display: inline-block;
width:40px;
border: 1px inset #7c6240;
border-radius: 5px;
color: #7c6240;}

.glidecontenttoggler a.selected{
background: #e4effa;}

.glidecontenttoggler a:hover{
background: #eda;}

.glidecontenttoggler a.toc{
text-decoration: none;}

.glidecontenttoggler a.prev, 
.glidecontenttoggler a.next{
text-decoration: none;}

.glidecontenttoggler a.prev:hover, 
.glidecontenttoggler a.next:hover{
background: #eda;
text-decoration: none;}
}


/* 	--------------------------------------------------------------------------------------
   	Tablet device
   	-------------------------------------------------------------------------------------- */ 

@media only screen and (max-width: 460px) 
	{ 
		#mob_prize1			{ visibility	: hidden; }
		.kindleunlimited 	{ top			: 4px;   }		
	}




/* 	--------------------------------------------------------------------------------------
   	Slender device
   	-------------------------------------------------------------------------------------- */ 

@media only screen and (max-width: 400px) 
	{ 
		.precis 			{ visibility	: hidden; }
	}



/* 	--------------------------------------------------------------------------------------
   	Mobile phone
   	-------------------------------------------------------------------------------------- */ 

@media only screen and (max-width: 360px) 
	{ 
		.handheld 			{ visibility	: hidden; }	
	}