/*
 * Style sheet for Helen's Web back-page elements.
 *
 * PART ONE - GENERIC
 *
 * (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.
 *					:
 *					: 
 *					: 
 */
 
body{
    margin:0 auto;
    padding:0;
    font-family:Arial,Helvetica,"Times New Roman",sans-serif,Times,Serif,Georgia;
    font-size:16px;
    text-align:center;
    background-size:cover}
.no-js body, .no-webp body{
	background:url('../Pictures/background2018.jpg') no-repeat center center fixed;}
.webp body{
	background:url('../Pictures/background2018.webp') no-repeat center center fixed;
}
.desktop{
    display:none
}
.mobile{
    display:none
}
#Reedbed_1{
    position:fixed;
    width:120px;
    height:130px;
    right:-32px;
    bottom:0;
    background-image:url('../Pictures/grass.png');
    z-index:+1;
    cursor:pointer;}

.art-Sheet{
    position:relative;
    z-index:0;
    margin:0 auto;
    width:900px;
    min-width:49px;
    min-height:49px}

.art-Sheet-body{
    position:relative;
    height:auto;
    z-index:1;
    padding:5px 5px 0;
    margin-top:75px}

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

.art-menu,.art-menu ul{
    margin:0;
    padding:0;
    border:0;
    list-style-type:none;
    display:block
}
.art-menu li{
    margin:0;
    padding:0;
    border:0;
    /* display:block; */
    float:left;
    position:relative;
    z-index:5;
    background:0 0
}
.art-menu li:hover{
    z-index:10000;
    white-space:normal
}
.art-menu li li{
    float:none
}
.art-menu ul{
    visibility:hidden;
    position:absolute;
    z-index:10;
    left:0;
    top:0;
    background:0 0
}
.art-menu li:hover>ul{
    visibility:visible;
    top:100%
}
.art-menu li li:hover>ul{
    top:0;
    left:100%
}
.art-menu ul:after,.art-menu:after{
    content:".";
    height:0;
    display:block;
    visibility:hidden;
    overflow:hidden;
    clear:both
}
.art-menu,.art-menu ul{
    min-height:0
}
.art-menu ul{
    background-image:url(../Pictures/spacer.gif);
    padding:10px 30px 30px;
    margin:-10px 0 0 -30px
}
.art-menu ul ul{
    padding:30px 30px 30px 10px;
    margin:-30px 0 0 -10px
}
.art-menu{
    padding:0 15px
}
.art-nav{
    position:relative;
    width:100%;
    background-color:#291204;
    z-index:1}
.art-nav .l{
    left:0;
    right:15px
}
.art-nav .r{
    right:0;
    width:890px;
}
.art-menu ul li{
    clear:both
}
.art-menu a{
    position:relative;
    display:block;
    overflow:hidden;
    height:29px;
    cursor:pointer;
    text-decoration:none;
    margin-right:0;
    margin-left:0
}
.art-menu a .r{
    width:50em;
    right:0;
    height:auto
}
.art-menu a:hover .l,.art-menu a:hover .r,.art-menu li:hover>a .l,.art-menu li:hover>a .r,.art-menu li:hover a .l,.art-menu li:hover a .r{
    top:-30px
}
.art-menu a:hover .t,.art-menu li:hover a .t,.art-menu li:hover>a .t{
    color:#ecf2f4
}
.art-menu a.active .l,.art-menu a.active .r{
    top:-60px
}
.art-menu a.gateway{
    cursor:default
}
.search::before{
    content:url(../Pictures/search_box_icon_s.png)
}
.art-menu ul a,.art-menu ul a:active,.art-menu ul a:hover,.art-menu ul a:link,.art-menu ul a:visited{
    text-align:left;
    text-indent:12px;
    text-decoration:none;
    line-height:32px;
    color:#2d3a43;
    font-size:13px;
    font-style:normal;
    font-weight:400
}
.art-menu ul ul a{
    margin-left:auto
}
.art-menu ul li a:hover{
    color:#000;
    border-color:#439cb6;
    background-position:0 -32px
}
.art-menu ul li:hover>a{
    color:#000;
    border-color:#439cb6;
    background-position:0 -32px
}

.art-menu li.head_item::after {
    content: '';
    display: block;
    position: absolute;
    top: -2px;
    height: 32px;
    border-right: 2px solid white;
}

.art-Header{
    margin:0 auto;
    position:relative;
    z-index:0;
    width:890px;
    height:250px
}
img, a img{
    border:0
}

a{
    text-decoration:none; /* page redesign Sept 2021 */	
	color: blue;
}
a:link{
    text-decoration:none; /* page redesign Sept 2021 */	
    color: blue;
}
a:visited{
    text-decoration:none; /* page redesign Sept 2021 */	
    color: blue;
}
a:hover{
    text-decoration:underline;
    color: red;
}

ul{
    list-style-type:none;
    color:#9baebb;
    margin:1em 0 1em 2em;
    padding:0;
    font-size:13px
}
li ul{
    margin:.5em 0 .5em 2em;
    padding:0
}
li{
    margin:.2em 0;
    padding:0
}
.art-menu li:hover ul ul,.art-menu li:hover ul ul ul{
    visibility:hidden
}
.art-menu li li li:hover ul,.art-menu li li:hover ul,.art-menu li:hover ul{
    visibility:visible
}
.art-menu li ul{
    position:absolute;
    width:10em;
    visibility:hidden
}
.art-menu a,.art-menu a:hover,.art-menu a:link,.art-menu a:visited{
    text-align:left;
    text-decoration:none;
    outline:0;
    letter-spacing:normal;
    word-spacing:normal;
    display:block
}
.art-menu li>ul{
    display:none
}
.art-menu li:hover>ul{
    display:block;
    visibility:visible;
    top:100%
}
.art-menu li ul ul{
    margin:-30px 0 0 44px
}
.art-nav .l,.art-nav .r{
    position:absolute;
    z-index:-1;
    top:0;
    height:30px;
    background-image:url('../Pictures/nav_2015.png')
}
.art-menu a .l,.art-menu a .r{
    position:absolute;
    display:block;
    top:0;
    z-index:-1;
    height:90px;
    background-image:url('../Pictures/MenuItem_2015.png')
}
.art-menu a .t{
    font-style:normal;
    font-weight:400;
    color:#f6cf96;
    padding:0 17px;
    margin:0;
    line-height:30px;
    text-align:center
}
.art-menu a:hover .t,.art-menu li:hover a .t,.art-menu li:hover>a .t,.art-menu a.active .t{
    color:#291204
}
.art-nav .art-menu-separator{
    display:block;
    width:1px;
    height:30px;
    background-color:#fff
}
.art-menu ul a{
    display:block;
    text-align:center;
    white-space:nowrap;
    height:32px;
    width:14em;
    overflow:hidden;
    line-height:32px;
    margin-right:auto;
    background-image:url('../Pictures/subitem_2015-bg.png');
    background-position:left top;
    background-repeat:repeat-x;
    border-width:1px;
    border-style:solid;
    border-color:#f6cf96
}
.art-menu ul a,.art-menu ul a:active,.art-menu ul a:hover,.art-menu ul a:link,.art-menu ul a:visited{
    text-align:left;
    text-indent:12px;
    text-decoration:none;
    line-height:32px;
    color:#f6cf96;
    font-size:13px;
    font-style:normal;
    font-weight:400
}
.art-menu ul li a:hover{
    color:#000;
    border-color:#291204;
    background-position:0 -32px
}
.art-menu ul li:hover>a{
    color:#000;
    border-color:#291204;
    background-position:0 -32px
}
a,a:active,a:focus,a:hover,a:visited{
    outline:0 none!important
}
.art-Footer{
    position:relative;
    z-index:0;
    overflow:hidden;
    width:890px;
    margin:5px auto 0
}
.art-Footer .art-Footer-inner{
    height:1%;
    position:relative;
    z-index:0;
    padding:15px;
    text-align:center
}
.art-Footer .art-Footer-text p{
    margin:0
}
.art-Footer .art-Footer-text{
    display:inline-block;
    height:10px;
    width:100%;
    color:#0e1315;
    font-size:12px}
	
.art-page-footer,.art-page-footer a,.art-page-footer a:link{
    font-family:Arial;
    font-size:10px;
    letter-spacing:normal;
    word-spacing:normal;
    font-style:normal;
    font-weight:400;
    text-decoration:underline;
    color:#000;
    padding-top:20px}
	
.art-page-footer a:hover{
    color:white}
	
.art-vine-header{
    position:absolute;
    left:196px;
    top:-2px;
    height:300px;
    width:70px;
    z-index:1}
	
/* Cover art functionality, generic */	
.cover_art_small {
	position			: relative;
	top					: -1em;
	left				: 42px;
	width				: 100px;
	height				: 150px;
	overflow			: hidden;
	margin-top			: .75em;
	border				: medium ridge #630;
	background-repeat	: no-repeat	}
	

/* Number of images in each sprite file */
.saxon_set,.saxon_set.lazy-bg-loaded,.saxon_set.sleepy-bg 			{ background-size : 400% 100%;}
.ereader_set,.ereader_set.lazy-bg-loaded,.ereader_set.sleepy-bg 	{ background-size : 300% 100%;}
.language_set,.language_set.lazy-bg-loaded,.language_set.sleepy-bg 	{ background-size : 500% 100%;}
.banner_set,.banner_set.lazy-bg-loaded,.banner_set.sleepy-bg 		{ background-size : 600% 100%;}
.misc_set,.misc_set.lazy-bg-loaded,.misc_set.sleepy-bg  			{ background-size : 700% 100%;}
.murder_set,.murder_set.lazy-bg-loaded,.murder_set.sleepy-bg  		{ background-size : 700% 100%;}
.seawitch_set,.seawitch_set.lazy-bg-loaded,.seawitch_set.sleepy-bg 	{ background-size : 700% 100%;}
.collab_set,.collab_set.lazy-bg-loaded,.collab_set.sleepy-bg		{ background-size : 600% 100%;}

	
/* Final image is then cascaded by Desktop or Mobile CSS file.  If device is small, load minimised version */
.saxon_set 		{	background-image : url('../Pictures/Cover_Saxon_sprites_preload.jpg');		}
.banner_set 	{	background-image : url('../Pictures/Cover_Banner_sprites_preload.jpg');		}
.seawitch_set 	{	background-image : url('../Pictures/Cover_Seawitch_sprites_preload.jpg');	}
.language_set 	{	background-image : url('../Pictures/Cover_Language_sprites_preload.jpg');	}
.misc_set 		{	background-image : url('../Pictures/Cover_Misc_sprites_preload.jpg');		}
.murder_set 	{	background-image : url('../Pictures/Cover_Murder_sprites_preload.jpg');		}
.collab_set 	{	background-image : url('../Pictures/Cover_Collab_sprites_preload.jpg');		}

div[class*="_set"] 
	{-webkit-animation	: fadein var(--fade-delay);
       -moz-animation	: fadein var(--fade-delay);
        -ms-animation	: fadein var(--fade-delay);
         -o-animation	: fadein var(--fade-delay);
            animation	: fadein var(--fade-delay);	}

.cover_art_small.sprite0 	{	background-position		:   -0px -0px;}	 
.cover_art_small.sprite1	{	background-position		: -100px -0px;}	 
.cover_art_small.sprite2	{	background-position		: -200px -0px;}	 
.cover_art_small.sprite3 	{	background-position		: -300px -0px;}	 
.cover_art_small.sprite4 	{	background-position		: -400px -0px;}	 
.cover_art_small.sprite5 	{	background-position		: -500px -0px;}	 
.cover_art_small.sprite6 	{	background-position		: -600px -0px;}	 
.cover_art_small.sprite7 	{	background-position		: -700px -0px;}	 

.button_book.sprite0 		{	background-position		:    0px -0px;}	 
.button_book.sprite1		{	background-position		:  -78px -0px;}	 
.button_book.sprite2		{	background-position		: -156px -0px;}	 
.button_book.sprite3 		{	background-position		: -234px -0px;}	 
.button_book.sprite4 		{	background-position		: -312px -0px;}	 
.button_book.sprite5 		{	background-position		: -390px -0px;}	 
.button_book.sprite6 		{	background-position		: -468px -0px;}	 
.button_book.sprite7 		{	background-position		: -546px -0px;}	 


div[class*="cover_art_small"][class*="endorse"]::after {
	content			: '';
	position		: absolute;
	top				: 0;
	left		 	: 0;
	height			: 11px;
	width			: 16px;
	opacity			: 75%;
	pointer-events	: none;}
.cover_art_small.endorseUK::after  {content: '';background-image: url('../Pictures/Flag_sprites.png');background-position: 	 0 	 0;	}			
.cover_art_small.endorseUS::after  {content: '';background-image: url('../Pictures/Flag_sprites.png');background-position: -16px 0;	}
.cover_art_small.endorseCA::after  {content: '';background-image: url('../Pictures/Flag_sprites.png');background-position: -32px 0;	}
.cover_art_small.endorseDE::after  {content: '';background-image: url('../Pictures/Flag_sprites.png');background-position: -48px 0;	}			
.cover_art_small.endorseIT::after  {content: '';background-image: url('../Pictures/Flag_sprites.png');background-position: -64px 0;	}			
.cover_art_small.endorseTR::after  {content: '';background-image: url('../Pictures/Flag_sprites.png');background-position: -80px 0;	}			

.shadow {
	box-shadow: 2px 2px 2px #888
}
.flag{
    position:relative;
    left:80px;
    top:-2px}
	
.flag_size{
    height:11px;
    width:16px;
    border:0;
    background-repeat:no-repeat}
	
.UK{    background-image:url('../Pictures/Flag_sprites.png');    background-position:  0   0}
.US{    background-image:url('../Pictures/Flag_sprites.png');    background-position:-16px 0}
.CA{    background-image:url('../Pictures/Flag_sprites.png');    background-position:-32px 0}
.DE{    background-image:url('../Pictures/Flag_sprites.png');    background-position:-48px 0}
.IT{    background-image:url('../Pictures/Flag_sprites.png');    background-position:-64px 0}
.TR{    background-image:url('../Pictures/Flag_sprites.png');    background-position:-80px 0}

a.fill-div{
    display:block;
    height:100%;
    width:100%;
    text-decoration:none}
	
.validator{
    height:24px;
    width:66px}

.button_shadow{
    width:35px;
    height:22px;
    border-radius:4px;
    box-shadow:2px 2px 5px #000;
    float:left;
    margin-right:5px}

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

.bs_left { background-image:url('../Pictures/Arrow_left.png')}
.bs_right{ background-image:url('../Pictures/Arrow_right.png')}
.bs_up	 { background-image:url('../Pictures/Arrow_up.png')}

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

.deny_select{
    -webkit-user-select:none;
    -ms-user-select:none;
    user-select:none}