/*
 * Style sheet for Helen's Web back-page elements.
 *
 * PART TWO - DESKTOP
 *
 * (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.
 *					:
 *					: 
 *   Ver 7.0		: 20/09/2021 10:50
 *					:   Minimisation of title page.
 * 					: 	
 *					: Cessation of Monthly Feature, replaced by mobile art element.
 *					: Removal of side bar, superceded by book shelves
 *					: 
 *   Ver 8.0		: 13/02/2024 17:40
 *					:   Addition of shelf labels when hovering monitor screen.
 * 					: 	
 *					: 
 *					: 
 */

@media only screen and (min-width:620px) {
    body{
        margin:0 auto 20px auto;
        width:auto
    }
    .container{
        width:960px;
        margin:0 auto
    }
    .desktop{
        display:block
    }
    .mobile{
        display:none
    }
    #bgBranch_1{
        width:213px;
        height:36px;
        top:0;
        left:0;
        z-index:100
    }
    #bgBranch_2{
        width:80px;
        height:87px;
        top:0;
        left:212px;
        z-index:100
    }
    #bgBranch_3{
        width:156px;
        height:29px;
        top:0;
        left:289px;
        z-index:100
    }
    #bgBranch_4{
        width:166px;
        height:185px;
        left:0;
        top:31px;
        z-index:100
    }
    #bgBranch_5{
        width:102px;
        height:116px;
        left:0;
        top:214px;
        z-index:100
    }
    #bgBranch_6{
        width:61px;
        height:193px;
        left:0;
        top:318px;
        z-index:100
    }
    #bgShadow_1{
        width:43px;
        height:66px;
        top:0;
        left:266px;
        opacity:.5;
        z-index:99
    }
    #bgShadow_2{
        width:48px;
        height:32px;
        top:0;
        left:309px;
        opacity:.5;
        z-index:99
    }
    #bgShadow_3{
        width:139px;
        height:173px;
        top:0;
        left:82px;
        z-index:-1
    }
    #bgShadow_4{
        width:79px;
        height:109px;
        top:180px;
        left:52px;
        z-index:-1
    }
    #bgShadow_5{
        width:62px;
        height:240px;
        top:304px;
        left:0;
        z-index:-1
    }
    #bgBranch_1{
        background:url(../Pictures/branch_top_left.gif) 0 -195px
    }
    #bgBranch_2{
        background:url(../Pictures/branch_top_left.gif) -253px -120px
    }
    #bgBranch_3{
        background:url(../Pictures/branch_top_left.gif) 0 -233px
    }
    #bgBranch_4{
        background:url(../Pictures/branch_top_left.gif) 0 0
    }
    #bgBranch_5{
        background:url(../Pictures/branch_top_left.gif) -231px 0
    }
    #bgBranch_6{
        background:url(../Pictures/branch_top_left.gif) -168px 0
    }
    #bgShadow_1{
        background:url(../Pictures/leaves_shadow.png) 0 0
    }
    #bgShadow_2{
        background:url(../Pictures/leaves_shadow.png) -43px 0
    }
    #bgShadow_3{
        background:url(../Pictures/leaves_shadow.png) -91px 0
    }
    #bgShadow_4{
        background:url(../Pictures/leaves_shadow.png) -230px 0
    }
    #bgShadow_5{
        background:url(../Pictures/leaves_shadow.png) -309px 0
    }
    div[id^=bg]{
        position:fixed;
        pointer-events:none
    }
    @media only screen and (max-width:900px){
        div[id^=bgBranch]{
            opacity:.7
        }
    }
    @media only screen and (max-width:890px){
        div[id^=bgBranch]{
            opacity:.6
        }
    }
    @media only screen and (max-width:880px){
        div[id^=bgBranch]{
            opacity:.5
        }
    }
    @media only screen and (max-width:870px){
        div[id^=bgBranch]{
            opacity:.25
        }
    }
    @media only screen and (max-width:860px){
        #bgBranch_1,#bgBranch_2,#bgBranch_3,#bgBranch_4,#bgBranch_5,#bgBranch_6,#bgShadow_1,#bgShadow_2{
            opacity:1;
            z-index:-1
        }
    }
    .foliate::before{
        content:url(../Pictures/leaves.gif);
        padding-right:8px
    }
    .foliate::after{
        content:url(../Pictures/leaves.gif);
        padding-left:4px
    }
    #art-main{
        position:relative;
        width:100%;
        left:0;
        top:0;
        height:auto;
        padding-top:20px
    }
    .art-Sheet{
        position:relative;
        top:79px;
        margin:0 auto;
        width:890px;
        min-width:49px;
        min-height:49px;
        background-color:#2b424a;
        border-radius:15px;
        border:1px solid #568495;
        overflow:hidden;
        z-index:0
    }
    .art-Sheet-body{
        position:relative;
        height:auto;
        z-index:1;
        padding:0;
        margin-top:0
    }
    .art-menu a{
        position:relative;
        display:block;
        overflow:hidden;
        height:30px;
        cursor:pointer;
        text-decoration:none;
        margin-right:0;
        margin-left:0;
        -webkit-user-select:none;
        -ms-user-select:none;
        user-select:none
    }
    .art-Header-jpeg{
        position:absolute;
        z-index:-1;
        top:0;
        left:0;
        width:890px;
        height:250px;
        background-image:url(../Pictures/header_banner_2012.jpg);
        background-repeat:no-repeat;
        background-position:center center
    }
    #extraDiv1{
        position:absolute;
        width:96px;
        height:401px;
        left:834px;
        top:22px;
        background:url(../Pictures/sword_image.png) no-repeat left top;
        z-index:400;
        cursor:pointer
    }
    #extraDiv3{
        position:absolute;
        width:173px;
        height:112px;
        bottom:-18px;
        right:-30px;
        z-index:4;
        background:url(../Pictures/hat.png) no-repeat left top;
        cursor:pointer
    }
    .extraDiv4{
        position:relative;
        top:0;
        left:10px;
        width:174px;
        height:calc(100% - 20px);
        z-index:2
    }
    .box{
        padding:16px 0 20px 0
    }
    .marketing{
        position:absolute;
        top:16px;
        width:314px;
        left:284px
    }
	.validation{
		position:absolute; 
		top: 20px;  
		width: 140px; 
		right: 100px;
	}
    .index_container{
        position:relative;
        top:0;
        height:auto;
        min-height:5000px;
        margin:auto;
        text-align:justify;
        background-color:#fbfae6;
        width:890px
    }
    #index_preamble{
        position:relative;
        top:0;
        width:604px;
        border:#8c9777 3px dotted;
        border-radius:15px;
        padding:0 20px;
        margin:8px 20px 20px 10px;
        background-color:#f5f5f5
    }
    #QotM{
        margin:15px 0 20px 10px;
		width: calc(100% - 80px);
        text-align:center
    }
    #Feature{
        background:#e6e6e6
    }
    #quickSummary{
        position:relative;
        background:#fbfae6;
        text-align:center;
        margin:0;
        height:250px;
        padding:0 20px 10px 0
    }
    .index_padding{
        display:inline-block;
        height:50px
    }
    .index_topic{
        padding:14px 0 0 38px;
        margin:0 0 20px;
        font-weight:700;
        background:url(../Pictures/leaves.gif) no-repeat left top
    }
    .boxboat{
        display:grid;
        grid-template-columns:170px auto;
        grid-template-rows:auto;
        text-align:left
    }
    .container_2{
        grid-row:1/span 1;
        grid-column:2/span 2;
        margin-top:4px
    }
    .maintext{
        float:left;
        width:360px;
        margin-left:30px;
        text-align:left
    }
    .mainportrait{
        position:relative;
        background:url(../Pictures/Helen_2014.png) no-repeat;
        top:6px;
        left:-6px;
        height:220px;
        border-radius:15px;
        box-shadow:inset 0 0 50px #848065,inset 0 0 50px #848065,inset 0 0 30px #848065
    }
    .sig{
        position:absolute;
        top:170px;
        left:210px;
        height:58px;
        width:65px;
        background:url(../Pictures/HelenSig5.gif);
        background-size:cover
    }
    .monitor{
        position:relative;
        bottom:56px;
        left:-30px;
        width:260px;
        height:187px;
        z-index:1;
        background:url(../Pictures/3d/3d_Dell_monitor.png);
        grid-column-start:7
    }
    .monitor:hover:before{
        position:absolute;
        top:20px;
        left:20px;
        font-family:Helvetica Rounded,Arial,sans-serif;
        font-size:100px;
        font-weight:700;
        white-space:pre;
        color:#0cf;
        color:#fff;
        text-shadow:3px 3px #000;
        content:"2025";
    }
    .monitor:hover:after{
        content:"~ Visualise the future by revisiting the past ~";
        position:absolute;
        top:146px;
        left:26px;
        font-family:Arial,Helvetica,sans-serif;
        font-size:10px;
        font-style:italic;
        white-space:pre
    }
    .monitor_image{
        position:absolute;
        top:-47px;
        bottom:365px;
        left:576px;
        height:152px;
        width:246px;
        overflow:hidden;
        visibility:hidden;
        opacity:0;
        transition:visibility .3s linear,opacity .3s linear;
        z-index:100
    }
    .monitor_image::after{
        content:"I feel the need; The need to read...";
        position:absolute;
        top:136px;
        left:46px;
        font-family:Arial,Helvetica,sans-serif;
        font-size:10px;
        font-style:italic}
    .monitor_purchase_me{
        position:absolute;
        top:-48px;
        left:589px;
        height:152px;
        width:243px;
        z-index:100
    }
    .monitor_purchase_me::after{
        position:absolute;
        top:137px;
        left:30px;
        font-family:Arial,Helvetica,sans-serif;
        font-size:10px;
        font-style:italic;
        content:"~ Link will open in a separate window ~"
    }
    .monitor_sword_position{
        position:absolute;
        top:94px;
        left:4px;
        width:36px;
        height:150px
    }
    .monitor_ship_position{
        position:absolute;
        top:82px;
        left:2px;
        width:44px;
        height:70px
    }
    .monitor_flag_position{
        position:absolute;
        top:138px;
        left:224px
    }
    .monitor_drawer_position{
        position:absolute;
        width:26px;
        height:24px;
        top:calc(100% - 26px);
        left:2.5%
    }
    .monitor_quill_position{
        position:absolute;
        top:104px;
        left:2px;
        width:38px;
        height:48px
    }
    .button_book:hover+.monitor_image{
        visibility:visible;
        opacity:1
    }
    .vignette{
        margin:auto;
        height:508px;
        width:648px;
        border-radius:15px;
        background-position:center;
        background-repeat:no-repeat;
        box-shadow:inset 0 0 50px #848065,inset 0 0 50px #848065,inset 0 0 30px #848065
    }
    .Tag_Line{
        position:relative;
        left:20px;
        top:60px;
        font-size:13px
    }
    .art-Footer{
        position:relative;
        z-index:0;
        overflow:hidden;
        width:890px;
        margin:5px auto 0;
        background-color:#568495
    }
    .art-Footer .art-Footer-background{
        position:absolute;
        z-index:-1;
        background-repeat:no-repeat;
        background-image:url(../Pictures/Footer.png);
        width:890px;
        height:150px;
        bottom:0;
        left:0;
        background-color:#568495
    }
    .art-page-footer{
        position:relative;
        top:50px;
        margin:1em;
        text-align:center;
        text-decoration:none;
        color:#000;
        padding:40px 0 20px 0
    }
    .twidget{
        text-align:		center;
      	width: 			calc(100% - 80px);
        height:			1040px;
        margin-left:	10px;
        border:			#8c9777 3px dotted;
        Border-radius:	15px;
        padding:		20px 20px 0 20px;
        background:		#292f33
    }
    .rss_container{
        width:			calc(100% - 26px);
        height:			1200px;
        margin-left:	10px;
        border:			#8c9777 3px dotted;
        border-radius:	15px;
        overflow:		hidden;
        background-color:#f5f5f5
    }
    .rss_feed{
        min-height:0;
        height:1100px;
        border:none;
        border-radius:0;
        border-top:1px solid #000;
        background-color:#fff;
        margin:auto;
        padding:0 20px 0 20px;
        width:87%;
        overflow-y:scroll
    }
    .rss_header{
        margin:20px 0 10px 64px
    }
    .rss_text{
        font-family:Helvetica,sans-serif;
        font-weight:300;
        font-size:27px;
        line-height:27px
    }
    .blurb{
        position:relative;
        height:140px;
        width:90%;
        border:#8c9777 3px dotted;
        border-radius:15px;
        background-color:#f5f5f5;
        padding:20px;
        margin:8px 20px 20px 10px
    }
    .sectionHeader{
        position:relative;
        height:76px;
        top:40px;
        left:12px;
        width:146px;
        border:solid #000 2px;
        border-top-color:silver;
        border-left-color:silver;
        box-shadow:5px 5px 5px #222;
        font-style:italic;
        font-size:9px;
        color:#000
    }
    .sectionTitle{
        position:relative;
        left:20px;
        height:28px;
        width:146px;
        border:solid #000 2px;
        border-top-color:silver;
        border-left-color:silver;
        box-shadow:5px 5px 5px #222
    }
    .sectionBody{
        height:26px;
        width:144px;
        background-color:#8a866b;
        border:solid silver 1px;
        border-top-color:#000;
        border-left-color:#000
    }
    .sectionLink{
        position:absolute;
        height:100%;
        width:100%;
        top:0;
        left:0
    }
    .LookInside,.sectionText{
        text-align:center;
        text-shadow:#000 .05em .07em .05em;
        color:#fff;
        -webkit-user-select:none;
        -ms-user-select:none;
        user-select:none
    }
    .sectionText{
        font-size:large;
        font-weight:700;
        padding-top:2px;
        padding-bottom:2px;
        font-style:italic
    }
    .LookInside{
        font-style:normal;
        font-size:14px;
        padding:6px 4px 4px 4px
    }
    .sidebar_grid{
        position:relative;
        display:grid;
        grid-template-columns:100%;
        grid-gap:12px;
        left:-8px
    }
    .box{
        padding:10px 0 10px 0
    }
    .infohead{
        height:19px;
        margin-bottom:5px;
        border-bottom:double;
        font-size:smaller;
        font-weight:700;
        color:white;
		background-color:#89856A;
        text-shadow:#000 .05em .07em .05em
		/* 
		background-image:url(../Pictures/Banner-H2U-Zone.jpg);
        background-position:bottom left;
		*/
    }
	.navbuttons {
	 	position:relative;
		left:10px;
		bottom:-20px;
		width:400px;
		height:76px;
		border-radius:5px;
	}
	.navbuttons .sinister {
		position:relative; 
		top:0px; 
		left:0px; 
		width:143px; 
		height:66px; 
		border:ridge #CCCCCC; 
		text-align:center; 
		background:url('../Pictures/Parchmnt.jpg'); 
		border-radius: 5px;
	}
	.navbuttons .dexter {
		position:relative; 
		left:180px; 
		top:-72px; 
		width:143px; 
		height:66px; 
		border:ridge #CCCCCC;
		text-align:center; 
		background:url('../Pictures/Parchmnt.jpg'); 
		border-radius: 5px;
	}
    .offsiteicons{
        width:260px;
        height:37px;
        float:left;
        padding-left:30px
    }
    .offsiteicons span{
        width:32px;
        height:32px;
        display:block;
        float:left;
        margin-right:6px
    }
    .extraDivMenu{
        position:relative;
        top:7px;
        left:9px;
        height:246px;
        width:170px
    }
    .SideBarFurniture{
        background:url(../Pictures/CallOutSet_2021.png) no-repeat 0 93px,url(../Pictures/CallOutSet_2021.png) no-repeat 0 93px;
        background-position:0 -86px,100% calc(100% + 100px);
        background-color:#a9a98f;
        border-radius:12px;
        box-shadow:4px 4px 4px grey
    }
    .firstline{
        position:absolute;
        width:100%;
        font-family:Arial,Helvetica,sans-serif;
        font-size:16px;
        font-weight:700;
        text-align:center;
        display:block
    }
    .PB::after{
        content:"Pendragon's Banner Trilogy"
    }
    .SW::after{
        content:"Sea Witch Series"
    }
    .SX::after{
        content:"Saxon Series"
    }
    .CM::after{
        content:"Jan Christopher Series"
    }
    .NF::after{
        content:"Non-fiction"
    }
    .WITH::after{
        content:"Collaboration"
    }
	
    .Adv::after{
        content:"To purchase via Amazon"
    }
    .textual{
        position:absolute;
        top:40px;
        width:100%;
        font-family:Arial,Helvetica,sans-serif;
        font-size:20px;
        text-align:center
    }
    .OnTV{
        color:#666;
        padding-top:12px;
        font-weight:700
    }
    .textual .subtext{
        display:inline-block;
        font-size:13px
    }
    .shelf{
        position:relative;
        bottom:36px;
        left:-20px;
        width:870px;
        height:38px;
        overflow:hidden;
        box-shadow:4px 4px 10px rgba(10,10,10)
    }
    .shelf:after{
        display:block;
        content:'';
        height:48px;
        background:url(../Pictures/3d/3d_Shelf.png) bottom left repeat-x
    }
    .grid-container{
        position:relative;
        width:auto;
        display:grid;
        grid-template-columns: repeat(7, 100px);
        grid-template-rows: repeat(5, 144px);
    }
    .grid_r1_c1{
        grid-row:1;
        grid-column:1
    }
    .grid_r1_c2{
        grid-row:1;
        grid-column:2
    }
    .grid_r1_c3{
        grid-row:1;
        grid-column:3
    }
    .grid_r1_c4{
        grid-row:1;
        grid-column:4
    }
    .grid_r1_c5{
        grid-row:1;
        grid-column:5
    }
    .grid_r1_c6{
        grid-row:1;
        grid-column:6
    }
    .grid_r2_c1{
        grid-row:2;
        grid-column:1
    }
    .grid_r2_c2{
        grid-row:2;
        grid-column:2
    }
    .grid_r2_c3{
        grid-row:2;
        grid-column:3
    }
    .grid_r2_c4{
        grid-row:2;
        grid-column:4
    }
    .grid_r2_c5{
        grid-row:2;
        grid-column:5
    }
    .grid_r2_c6{
        grid-row:2;
        grid-column:6
    }
    .grid_r3_c1{
        grid-row:3;
        grid-column:1
    }
    .grid_r3_c2{
        grid-row:3;
        grid-column:2
    }
    .grid_r3_c3{
        grid-row:3;
        grid-column:3
    }
    .grid_r3_c4{
        grid-row:3;
        grid-column:4
    }
    .grid_r3_c5{
        grid-row:3;
        grid-column:5
    }
    .grid_r3_c6{
        grid-row:3;
        grid-column:6
    }
    .grid_r4_c1{
        grid-row:4;
        grid-column:1
    }
    .grid_r4_c2{
        grid-row:4;
        grid-column:2
    }
    .grid_r4_c3{
        grid-row:4;
        grid-column:3
    }
    .grid_r4_c4{
        grid-row:4;
        grid-column:4
    }
    .grid_r4_c5{
        grid-row:4;
        grid-column:5
    }
    .grid_r4_c6{
        grid-row:4;
        grid-column:6
    }
    .eframe{
        width:100px;
        height:150px;
        border-style:none;
        margin-left:5px;
        overflow:visible
    }
    .eframe::after{
        content:'';
        position:absolute;
        top:-8px;
        left:-7px;
        width:113px;
        height:167px;
        background-image:url(../Pictures/3d/eReader_Frame.png);
        background-size:cover;
        border-radius:6px;
        box-shadow:0 0 1px #fff;
        z-index:-1
    }
    .paragraph{
        margin-top:40px
    }
    .awards_SoA{
        width:103px;
        height:150px;
        background-image:url(../Pictures/SOA.jpg);
        background-size:cover
    }
    .awards_AlliA{
        border-style:ridge;
        width:125px;
        height:125px;
        background-image:url(../Pictures/Banner_Allia_125x125.png);
        background-size:contain
    }
    .awards_Blogspot{
        border-style:ridge;
        top:10px;
        width:150px;
        height:150px;
        background-image:url(../Pictures/historical_book.png);
        background-size:cover
    }
    .awards_Webmaster_3{
        position:relative;
        text-align:center
    }
    .awards_Webmaster_2{
        width:143px;
        height:202px;
        border:medium ridge #630;
        cursor:pointer
    }
    .awards_Webmaster_2.lazy-bg-loaded,.awards_Webmaster_2.sleepy-bg{
        background-image:url(../Pictures/H2UCertBase.jpg)
    }
    .awards_Webmaster_1{
        display:none;
        position:absolute;
        left:3px;
        top:3px
    }
    .awards_Diamond{
        width:180px;
        height:180px;
        background-image:url(../Pictures/BookSpecialAward.png)
    }
    .awards_Special{
        top:240px;
        left:0;
        width:180px;
        height:180px;
        background-image:url(../Pictures/!ADiscoveredDiamond.png)
    }
    .awards_Chill{
        width:200px;
        height:108px;
        border-style:ridge;
        background-image:url(../Pictures/Award_Readers_SeaWitch.jpg)
    }
    .awards_Brag{
        width:174px;
        height:112px;
        background-image:url(../Pictures/Brag-Medallion-Sticker.png)
    }
    .awards_BotM{
        width:200px;
        height:108px;
        border-style:ridge;
		background-image:url(../Pictures/Award_Readers_Mermaid.jpg)
    }
    .awards_CoffeePot{
        width:140px;
        height:140px;
        background-image:url(../Pictures/2022_Bronze_Medal.png);
		background-size: cover
	}	
    .awards_crime_writers{
        width:152px;
        height:200px;
        background-repeat:no-repeat;
        background-size:contain;
        background-image:url(../Pictures/CWA_member_logo.jpg)
    }
    .awards_trusted_reviewer{
        width:200px;
        height:200px;
        background-repeat:no-repeat;
        background-size:contain;
        background-image:url(../Pictures/TrustedReviewer.png);
        text-align:center
    }	
    .awards_grid_IPR{
        grid-row:4;
        grid-column:2/span 2;
        position:relative;
        top:30px;
        left:-80px;
        width:380px;
        height:110px;
        background-size:80% 80%;
        background-repeat:no-repeat;
        background-image:url(../Pictures/IPR_rights_logo.png);
        text-align:center
    }
    .awards_grid_IPR::after{
        content:'';
        position:absolute;
        top:-22px;
        left:-12px;
        width:35px;
        height:35px;
        background-image:url(../Pictures/leaves.gif)
    }
    @keyframes fadein{
        from{
            opacity:0
        }
        to{
            opacity:1
        }
    }
    @-moz-keyframes fadein{
        from{
            opacity:0
        }
        to{
            opacity:1
        }
    }
    @-webkit-keyframes fadein{
        from{
            opacity:0
        }
        to{
            opacity:1
        }
    }
    @-ms-keyframes fadein{
        from{
            opacity:0
        }
        to{
            opacity:1
        }
    }
    @-o-keyframes fadein{
        from{
            opacity:0
        }
        to{
            opacity:1
        }
    }
    .button_bar{
        padding-top:16px;
        height:120px;
        width:950px
    }
    .button_book{
        background-color:grey;
    }
    .button_book,
	.button_book_placeholder{
        float:left;
        top:0;
        height:108px;
        width:78px;
        margin-right:4px;
		border-bottom: solid 1px black;
        filter:grayscale(100%);
        transform:perspective(500px) rotateY(-36deg) rotateX(0) rotateZ(0);
        outline:1px solid transparent;
        backface-visibility:hidden;
        -webkit-backface-visibility:hidden;
    }
	.button_book_placeholder{
		border-bottom: none;
    }	
    .button_book::after{
        content:'';
        position:absolute;
        top:0;
        left:78px;
		height:108px;
        width : var(--myWidth, 8px);
        background-image : var(--myShadow, url('../Pictures/3d/3d_book_pages.png'));
        background-size:100% 100%
    }
    .button_book:hover{
        filter:grayscale(0);
        opacity:1;
        cursor:pointer
    }
    .Marketplace{
        position:relative;
        top:60px;
        left:10px;
        height:600px;
        width:838px;
        margin:20px 20px 140px 0;
        padding:0 14px 0 20px;
        border:4px inset #808040;
        border-left:none;
        border-right:none;
        background-color:#eeecd7;
        background:url('../Pictures/Parchmnt.jpg');
        z-index:+1000
    }
    .Marketplace:hover>.monitor_purchase_me{
        visibility:hidden
    }
    .LookInside{
        font-style:normal;
        font-size:14px;
        color:#fff;
        padding:6px 4px 4px 4px;
        text-align:center;
        text-shadow:#000 .05em .07em .05em
    }
    .cleared{
        float:none;
        clear:both;
        margin:0;
        padding:0;
        border:none
    }
    .HideMe{
        display:inline-block;
        width:100%;
    }
    .Portrait_Group{
        position:absolute;
        top:20px;
        left:230px;
        width:624px;
        height:350px
    }
    .main_body_grid{
        position:relative;
        width:100%;
        height:auto;
        display:grid;
        grid-template-columns:200px 670px;
        grid-template-rows:auto
    }
    .main_body_sidebar{
        grid-row-start:1;
        grid-column-start:1
    }
    .Certificates{
        position:relative;
        display:grid;
        top:100px;
        grid-template-columns:auto auto auto;
        justify-items:center;
        align-items:center;
        grid-row-gap:100px
    }
    div[class*=" Title"],div[class^=Title]{
        left:7px;
        z-index:10
    }
    .Title1{
        top:43px
    }
    .Title2{
        top:53px
    }
    .Title3{
        top:63px
    }
    .Title4{
        top:73px
    }
    .Title5{
        top:83px
    }
    .Title6{
        top:93px
    }
    .blurb_100{
        height:100px
    }
    .blurb_140{
        height:140px
    }
    .blurb_120{
        height:120px
    }
    .blurb_1184{
        height:1184px;
        margin-bottom:14px
    }
    .art-amazon-us-tag-icon{
        position:relative;
        display:block;
        float:left;
        background-image:url(../Pictures/buy-from-tan-us.gif);
        background-position:right center;
        background-repeat:no-repeat;
        margin:0 5px 0 0;
        height:32px;
        width:100px
    }
    .art-amazon-uk-tag-icon{
        position:relative;
        display:block;
        float:left;
        background-image:url(../Pictures/buy-from-tan-uk.gif);
        background-position:right center;
        background-repeat:no-repeat;
        margin:0 5px 0 0;
        height:32px;
        width:100px
    }
    .icon-bar-pad{
        position:relative;
        display:block;
        float:left;
        width:84px
    }
    .Avalon_Credit{
        position:absolute;
        left:12px;
        bottom:12px;
        border-radius:12px;
        width:150px;
        height:100px;
        background-image:url(../Pictures/AvalonGraphics-2021.png);
        background-size:105% 105%;
        box-shadow:4px 4px 4px #000;}
		
.saxon_set.lazy-bg-loaded,    .saxon_set.sleepy-bg,    .saxon_set.no_yall	 	{ background-image : url('../Pictures/Cover_Saxon_sprites.jpg');	}
.banner_set.lazy-bg-loaded,   .banner_set.sleepy-bg,   .banner_set.no_yall		{ background-image : url('../Pictures/Cover_Banner_sprites.jpg');	}
.seawitch_set.lazy-bg-loaded, .seawitch_set.sleepy-bg, .seawitch_set.no_yall	{ background-image : url('../Pictures/Cover_Seawitch_sprites.jpg');}
.language_set.lazy-bg-loaded, .language_set.sleepy-bg, .language_set.no_yall	{ background-image : url('../Pictures/Cover_Language_sprites.jpg');}
.misc_set.lazy-bg-loaded,     .misc_set.sleepy-bg,     .misc_set.no_yall  		{ background-image : url('../Pictures/Cover_Misc_sprites.jpg');	}	
.collab_set.lazy-bg-loaded,   .collab_set.sleepy-bg,   .collab_set.no_yall 		{ background-image : url('../Pictures/Cover_Collab_sprites.jpg');	}			

/*   Ver 7.1		: 17/12/2021 10:54 */

	.Thallasogen {
		display:flex;
   	 	width: calc(100% - 34px);
		height: 520px;
   	 	border-radius: 15px;
		background-image: none;
		background-color: #d2c6c6ab;		
		margin-left: 10px;
		}
		
	  .TheLake {
		position:relative;
		width:740px;
		height:455px;
		background-color:#CCCCCC;
		margin:auto;
		border: 4px inset whitesmoke;
		}

/*   Ver 8		: 25/2/2023 10:26 */
	  .TheLake .Driftwood {
	  	margin-top:6px;
		font-size: 1em;
    	text-align:center;
		color: transparent;
        background: black;
		-webkit-background-clip: text;
		text-shadow: 1px 2px 2px rgba(255, 255, 255, 0.5);
		-webkit-user-select: none;
  		-ms-user-select: none;
  		user-select: none;
		}
/*   Ver 8		: 25/2/2023 10:26 */

		
	  .vignette {
	    box-shadow: inset 0 0 50px #848065,inset 0 0 50px #848065,inset 0 0 30px #848065;
		}

	  .Timemachine {
		position: absolute;
		width: 160px;
		border: 4px ridge black;
		border-radius: 10px;
		padding: 4px;
		background-color: #41587b;
		color: whitesmoke;
		text-align:left;
		font-size: 16px;
		font-style: italic;
		font-weight: bold;
	    box-shadow: 5px 5px 5px #222;			
		}
	  .Timemachine.forward {
	    top:400px;
		left:50px;
		border-bottom-right-radius: 0;
		}
	  .Timemachine.backward {
	    top:840px;
		right:50px;
		text-align:right;
		border-top-left-radius: 0;
		}		
				
	  .main_body_grid {
      	grid-template-columns:				20px auto;
      	}
	  #index_preamble {
      	width: 								calc(100% - 80px);
	  	}
	  .rss_container {
	  	width: 								calc(100% - 40px);
	  	}
/* 	  Moved to element's main CSS block, line 532. MLP 30 Dec 2022
	  .twidget {
      	width: 								calc(100% - 80px);
	  	}
*/		
	  .Certificates {
      	grid-row-gap: 50px;
	  	}
	  .grid_r5_c2{
      	grid-row:5;
      	grid-column:2
	  	}
	  .awards_grid_IPR {
      	grid-column: 							2/span 2;
	  	}
	  .Avalon_Credit {
    	position: 								relative;
		top: 									12px;
    	border-radius:  						12px;
    	width:  								225px;
    	height:  								150px;
    	background-size:  						100% 100%;
		}
  	  .twitter-timeline {
	  	margin-left:							10px;
		}
}
/* All desktop instances */

.itemTitle a {
		font-weight:bold; 
		color:black; 
		text-decoration:none; 
		font-size:20px; 
		pointer-events: none;  
		cursor: default;
}

.feedEkList {
		color:black; 
		font-size:16px;}


/* 2024 additions follow */

.shelf_label{
	position 		: absolute; 
	color	 		: #39341B;
	background-color: rgb(221, 227, 227, 70%);
	border			: solid 1px white;
	font-weight		: bold;
	text-shadow		: 1px 1px 1px white;
	height			: 24px;
	width			: 240px; 
	z-index			: 100;
	justify-content	: center;
	align-items		: flex-end;	
	clip-path		: polygon(8px 2px, 232px 2px, 100% 8px, 100% 100%, 0 100%, 0 8px);
	display			: none;
	}
/* Add the semi-shadowed wrap-over area */
.shelf_label::after{
	content			: "";
	position		: absolute;
	top				: 0;
	left			: 0; 
	background-color: rgba(221, 222, 222, 90%);
	height			: 7px;
	width			: 100%;
	}
.monitor:hover ~ .shelf_label{
	display			: flex;
	}