/*
 * Style sheet for Helen's Web back-page elements.
 *
 * PART THREE - MOBILE
 *
 * (CSS3 level statements used.  Legacy browsers will ignore)
 *
 * $ Id: default.css,v 1.00 04/06/2006 19:03 M L Phillips $
 * <Title>Helen Hollick - Stylesheet</title>
 *
 *   Ver 2.0 		: 12/06/2012 11:58
 *					:   Update many areas. Renamed h3 to h3x, conflict with 
 *					:   internal CSS used by twidget code.
 *					:   Correct operation ascertained on a range of browsers
 *
 *   Ver 3.0 		: 16/04/2016 12:05
 *					:   Added support for YouTube sound
 *					:   via iFrame embed
 *
 *   Ver 4.0		: 08/11/2017 10:07
 *					:   Added code to format the translation sub-tabs
 *					:   Buttons on Gallery forms normalised
 *
 *   Ver 5.0		: 29/02/2020 20:20
 *					:   Mobile variant sections added
 *					:   
 * 					: 	We begin with a sequence of normalisation, to start from a known position.
 *					:
 *					: 	The screen-size statements cascade, so they MUST be stored in the correct
 *					: 	file positions, allowing overwrite replacement of previous values.
 *					:   
 *   Ver 6.0		: 29/06/2021 11:14
 *					:   File size and DOM minimisation
 *					:   
 * 					: 	Sprite instances are now separated into always/desktop/mobile version.
 *					:
 *					: 
 *					: 
 */

@media only screen and (max-width: 619px) {
body {
	margin 			: 0 auto 40px auto;
	width 			: 100%;
	min-width 		: 360px;
	font-family 	: "Open Sans", Verdana, Arial, Helvetica, sans-serif;
	line-height 	: 1.4;
	--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;		
	--book-text-col : #291204;
	--book-live-col : whitesmoke;
	--book-back-col	: black}

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

#backpage-content, #backpage-content-mobile,
.backpage-content, .backpage-content-mobile {
    min-height			: 460px; } /* Adjusted for 360 x 640 screens */

.desktop {
display : none;
}
.mobile {
display : block;
}
.art-menu a .t,
.question {
-webkit-user-select : none;/* Safari */
-ms-user-select : none;/* IE 10 and IE 11 */
user-select : none;/* Standard syntax */
}
.art-Sheet {
width : calc(100% - 2px);
background-color : #2B424A;
border-radius : 15px;
border : 1px solid #568495;
z-index : 0}

.art-Sheet-body {
position : relative;
height : auto;
padding : 0;
margin-top : 0;
z-index : 1;
}
.art-Header {
margin : 0 auto;
position : relative;
z-index : 0;
width : 100%;
height : 120px;
left : 0;
}
.art-Header-jpeg {
position 			: absolute;
top 				: 0;
left 				: 0;
width 				: 100%;
height 				: 118px;
background-repeat 	: no-repeat;
background-position : center center;
background-size 	: contain;}
.no-webp .art-Header-jpeg, no-js .art-Header-jpeg{
background-image 	: url('../Pictures/header_banner_2021.png'), linear-gradient(140deg, rgba(116, 112, 87, 1), rgba(145, 143, 118, 1));}
.webp .art-Header-jpeg{
background-image 	: url('../Pictures/header_banner_2021.webp'), linear-gradient(140deg, rgba(116, 112, 87, 1), rgba(145, 143, 118, 1));
}
#art-main {
position : relative;
width : 100%;
left : 0;
top : 0;
height : auto;
padding-top : 0px;
}
.index_container {
position : relative;
top : 0;
height : auto;
min-height : 600px;
margin : auto;
text-align : justify;
width : calc(100% - 2px);
z-index : 0;
overflow : hidden;
background : url('../Pictures/Parchmnt.jpg');
}
.art-vine-header {
position : relative;
left : 0px;
top : -4px;
height : 200px;
width : 50px;
z-index : 1;
float : left;
background-image : url('../Pictures/vine_R_shadow.png');
background-size : cover;
}
#quickSummary {
position : relative;
background : #fbfae6;
text-align : center;
margin : 0;
height : 250px;
padding : 0;
}
.boxboat {
display : grid;
grid-template-columns : 58px auto 100px 90px;
grid-template-rows : auto auto;
gap : 12px;
text-align : left;
}
.container_1 {
/* Nothing yet */
}
.container_2 {
grid-row : 1 / span 1;
grid-column : 2 / span 2;
margin : 12px 20px 0 0;
}
.container_3 {
grid-row : 1;
grid-column : 4;
}
.container_4 {
grid-row : 1;
grid-column : 4;
position : relative;
top : 110px;
right : -15px;
}
.Portrait_Group {
position : relative;
top : 0px;
left : 0px;
width : auto;
height : 350px;
background : url('../Pictures/Parchmnt.jpg');
}
.maintext {
width : 290px;
text-align : left;
margin : 8px 10px 0 12px;
float : left;
}
.mainportrait {
position : relative;
width : 90px;
height : 97px;
margin : 0;
padding : 0;
left : -8px;
top : 8px;
background : url('../Pictures/Helen_2014.png');
background-size : cover;
}
.sig {
position : absolute;
top : 108px;
right : 12px;
height : 58px;
width : 65px;
background : url('../Pictures/HelenSig5.gif');
background-size : cover;
}
.Tag_Line {
position : relative;
background-color : whitesmoke;
width : 98%;
margin : 0 auto;
top : -30px;
margin-bottom : 10px;
font-size : 13px;
text-align : center;
border-top : 2px solid #291204;
border-bottom : 2px solid #291204;
}
.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::after {
	content			: '\00a9\0020 2025 Helen Hollick';
	position		: absolute;
	font-size		: 14px;
	margin-right	: 0.5em;
	top				: calc(50% - 8px);
	right			: 10px;
}
.base {
	top 			: 20px;
	left 			: 16px;
}
.nav ul {
	font-size 		: 16px;
}
.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		: #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		: #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 );}

.question {				/* Instantiate a border to reserve its position */
	border				: 1px solid transparent;}
.question:hover  {		/* Make the border visible */
	content			 	: '';
	border-top			: 1px solid var( --book-back-col );
	border-bottom		: 2px solid var( --book-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;
}

/* 	------------------------------------------------------------------------------------------------------------
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		: #f6cf96;
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{
content					: '';
border-left-color		: #291204; 
border-left-color		: var( --menu-text-col );	}


/* Sets the colour of the rotating left arrow */
.question:hover::before {
content					: '';
border-left-color		: #291204; 
border-left-color		: var( --book-text-col );	}


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

/* 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 */


/* 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:hover a.MenuOverview::before {
content					: '';
border-left-color		: var( --menu-revd-col );	}

.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 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;}

.Accordian_selector {
padding : 0;
margin : 0 4px 0 4px;
overflow : hidden;
}

/* Question */
.question {
	position 			: relative;
	background-color	: #291204;
	background-color	: var( --book-back-col );
	color 				: #f6cf96;
	color				: var( --book-live-col );
	margin 				: 0;
	padding 			: 6px 0 6px 30px;
	display 			: block;
	width 				: auto;
	cursor 				: pointer}

/* Answer */
.answers {
	padding 			: 0px 15px;
	margin 				: 5px 0;
	height 				: 0;
	position 			: relative;
	opacity 			: 0;
	-webkit-transition 	: .3s ease;
	-moz-transition 	: .3s ease;
	-o-transition 		: .3s ease;
	transition 			: .3s ease;
}
.question::before {
	content 			: '';
	position 			: absolute;
	transform-origin 	: 25% 50%;
	border 				: 6px solid transparent;
	border-left-color 	: #f6cf96;
	border-left-color 	: var( --book-live-col );
	margin 				: 7px 0 0 -20px;
	-webkit-transition 	: all .1s ease;
	-moz-transition 	: all .1s ease;
	-o-transition 		: all .1s ease;
	transition 			: all .1s ease;
}
.questions:checked ~ .answers {
height: auto;
opacity: 1;
padding-bottom : 20px;
}
.questions:checked ~ label::before {
transform : rotate(90deg);
}
.questions {
display : none;
}
.cover_art_small {
position : relative;
top : 0;
left : calc(50% - 50px);
width : 100px;
height : 150px;
overflow : hidden;
margin-top : 0;
border : medium ridge #630;
background-repeat : no-repeat;
}
.mobile_library_shelf {
display : grid;
grid-column-gap : 10px;
grid-row-gap : 10px;
grid-template-columns : repeat(auto-fill, minmax(120px, 0.8fr));
grid-template-rows : auto;
grid-auto-flow : row;
padding : 20px 0 20px 0;
}
.button_bar_mobile {
position : absolute;
height : 22px;
width : 200px;
}
.base {
top : 16px;
left : 16px;
}
.precis {
position : absolute;
right : 0;
font-size : smaller;
}
.precis::before {
content : '{';
}
.precis::after {
content : '}\00a0';
}		 
.nav .float_right {
float : right;
}

.saxon_set.lazy-bg-loaded,    .saxon_set.sleepy-bg 		{ background-image : url('../Pictures/Cover_Saxon_sprites_mobile.jpg');}
.banner_set.lazy-bg-loaded,   .banner_set.sleepy-bg		{ background-image : url('../Pictures/Cover_Banner_sprites_mobile.jpg');}
.seawitch_set.lazy-bg-loaded, .seawitch_set.sleepy-bg 	{ background-image : url('../Pictures/Cover_Seawitch_sprites_mobile.jpg');}
.language_set.lazy-bg-loaded, .language_set.sleepy-bg 	{ background-image : url('../Pictures/Cover_Language_sprites_mobile.jpg');}
.misc_set.lazy-bg-loaded,     .misc_set.sleepy-bg  		{ background-image : url('../Pictures/Cover_Misc_sprites_mobile.jpg');}			 
}