@charset "utf-8";
html, body#introduction, body#opuscatalogue, body#programnotes, body#search{min-height:100lvh;margin:0;font-family:system-ui, sans-serif;background:url(../img/opuscatalogue/opus-bg.webp) 0% 30% fixed repeat;font-size:calc(15px + 0.390625vw);overflow-x:clip;scrollbar-gutter:auto;scrollbar-width:thin;scrollbar-color:rgba(46,98,114,.33) rgba(255,255,255,.5);scroll-behavior:auto!important;box-sizing:border-box;-webkit-text-size-adjust:none}
*,*::before,*::after {box-sizing:inherit} /* important */
.big{font-size:175%}
.small{font-size:75%}
.caps{font-variant:small-caps}
img{object-fit:cover;object-position:center;transition:all ease-in-out 0.5s}
/* transition images on hover */
.img{position:relative;margin:0}
.hover_img{position:absolute;top:0;left:0;opacity:0}
.img:hover .hover_img{opacity:1}
/* anchors */
a{text-decoration:none;transition:all ease-in-out 0.5s}
a:active,a:hover{border:transparent}
a:focus-visible{outline:0}
a.extlnk{text-decoration:underline;color:inherit}
.extlnk:after{content: "\29c9";padding-left:0.5vw}
a.extlnk:hover{color:#D96D00}

/* header.htm  and .sub-header */
header{position:sticky;top:0;z-index:2;padding:0 0 0.5rem 0.5rem;background:linear-gradient(#fff, 99.9%, #2e6272)}
#logo-container{display:inline-block;width:15rem;vertical-align:-55%}
.logo{margin-left:0.5rem}
.sub-header{padding:0 0 0 2vw;margin:0;font-size:1.4rem;font-style:oblique}
.dark{background:transparent;color:rgba(46, 98, 114, 1);text-shadow:1px 0 1px #fff}
.clear{background:transparent;color:rgba(255,255,255,1)}
/* footer.htm */
footer{height:fit-content;font-size:0.55rem;background:#fff;color:#2e6272;border-top:thin #2e6272;padding:0.5vh 0 0.5vh 0.75vw}
footer a{color:inherit;font-weight:700}
footer a:hover{color:#D96D00}
/* Mini drop-down menu */
.sub-menu{visibility:hidden;opacity:0;position:absolute;top: 100%;left:0.5vw;width:fit-content;transform:translateY(-2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s}
.sub-menu-parent:focus .sub-menu,.sub-menu-parent:focus-within .sub-menu,.sub-menu-parent:hover .sub-menu{visibility: visible;opacity:1;z-index:-1;transform:translateY(0%);transition-delay: 0s, 0s, 0.3s}
/* Mini drop-down menu presentational */
#mini-menu{position:relative;z-index:999;display:inline-block;color:#2e6272}
.menu{font-size:3.6rem;margin:-.1em 0;transition: ease-in-out 0.5s;text-shadow:0.1vw 0.1vw 0.3vw #E9B6B9, 1vw 1vw 0.5vw rgba(46, 98, 114, 0.5), 1vw 1vw 0.5vw rgba(217, 109, 0, 0.4);display:block;min-width:6.5vw;animation-name:fading;animation-timing-function:ease-in;animation-fill-mode:forwards;animation-duration:1s;animation-delay:1s;font-weight:700;text-align:center;cursor:pointer}
.menu:hover,.menu:focus {color:rgba(217, 109, 0, 1)}
nav ul a {display:block;padding:0.4em 0.5em 0.3em 0.25em;color:rgba(46, 98, 114, 1)}
.sub-menu a:hover, .sub-menu a:focus, .sub-menu a:active {background:#e0e8ea;color:rgba(217, 109, 0, 1);border-radius:4px}
.sub-menu a.actual{background:#e0e8ea;font-weight:900;border-radius:4px}
nav ul, nav ul li {list-style-type:none;padding:0;margin:0}
nav > ul > li {font-size:0.7rem;text-align:right}
.sub-menu {background:rgba(255,255,255,1);font-weight:700;border-radius:4px;border:1px groove #A1AFBD}
/* Responsive columns */
.resp-col{}
.col{margin:auto}
.col-left{padding:0 1vw 0 0}
.col-center{padding:0 1vw}
.col-right{padding:0 0 0 1vw}
@media only screen and (min-width:640px){.resp-col{display:flex}}
/* hidden musicians overlays */
.musician-overlay{position:fixed;opacity:0;transform:scaleX(0);z-index:-1;scrollbar-width:thin;scrollbar-color:rgba(46,98,114,.33) transparent;width:60%;height:75%;top:15%;left:10%;padding-bottom:6vh;background:linear-gradient(#fff, 33%, rgba(255,255,255,0.85));color:#1f414b;overflow-y:auto;scrollbar-gutter:auto;scrollbar-width:thin;border:1px groove rgba(46, 98, 114, 0.25);border-radius:0.5em;font-size:0.8rem;-webkit-transition:all ease-in-out 1s;transition:all ease-in-out 1s allow-discrete}
@media only screen and (min-width:320px) and (orientation:portrait){.musician-overlay{width:80%}}
.musician-overlay h3{position:sticky;top:0;padding:0.5vh 0 0.5vh 1.75vw;background:#fff;font-size:1.3rem}
.musician-overlay img.close{opacity:1;width:1.7rem;float:right;margin:0.1rem 0.4rem 0 0;border:0.25em solid transparent;border-radius:0.25em;cursor:pointer}
/* specific opuscatalogue.php */
.opus-content{position:relative;left:100%;width:100%}
#swiffycontainer{display:inline-block;margin:0.5vh 1vw 1vh 2vw;width:90px;height:90px}
#opus-sections{display:inline-block;height:90px}
.opus-section{max-width:28px;max-height:28px}
.opus-section img{margin:11px}
.opus-section a{display:block;width:27px;height:27px;margin:0 0.15em;border-radius:0.25em}
.opus-section a.full{background:#fe5f4a}
.opus-section a.full:hover{background:radial-gradient(white,#fe5f4a)}
.opus-section a.orch{background:#FDEE82;border:0}
.opus-section a.orch:hover{background:radial-gradient(#FC6,#FDEE82)}
.opus-section a.chamb{background:#A8EFB1}
.opus-section a.chamb:hover{background:radial-gradient(#6C9,#A8EFB1)}
.opus-section a.piano{background:#A8C9FF}
.opus-section a.piano:hover{background:radial-gradient(white,#A8C9FF)}
.opus-section a.oth{background:#D89FF9}
.opus-section a.oth:hover{background:radial-gradient(white,#D89FF9)}
.opus-section a.voc{background:#FFC4E8}
.opus-section a.voc:hover{background:radial-gradient(white,#FFC4E8)}
.opus-section a.search{background:#FFFFFF;border:1px solid #fff}
.opus-section a.search:hover{background:radial-gradient(white,#C0D0D0)}
.tip{position:absolute;min-width:220px;margin:0.5em 0 0 0;padding: 0.1em 0.33em;border:thin #fff;border-radius:5px;color:#1f414b;font-size:1.15rem;font-weight:700;text-shadow:0 1px #cbdbde;transition:opacity ease-in-out 0.5s;opacity:0}
#full{background:linear-gradient(to right,#fe5f4a,#cbdbde 85%)}
#orch{background:linear-gradient(to right,#FDEE82,#cbdbde 100%)}
#chamb{background:linear-gradient(to right,#A8EFB1,#cbdbde 95%)}
#piano{background:linear-gradient(to right,#A8C9FF,#cbdbde 90%)}
#oth{background:linear-gradient(to right,#D89FF9,#cbdbde 90%)}
#voc{background:linear-gradient(to right,#FFC4E8,#cbdbde 90%)}
#search{background:linear-gradient(to right,#FFFFFF,#cbdbde 90%)}
/* catalogue tables */
.catalogue{min-height:100lvh;display:flex}
.catalogue table{height:fit-content;margin:2vh auto 10vh auto;border-spacing:0;font-size:1.2rem;font-weight:600;color:#2e6272}
.catalogue table td{padding:0.5vh 0 1.5vh 2.5vw;white-space:nowrap}
.catalogue table a{display:block;width:fit-content;color:#1f414b;text-shadow:1px 1px 4px #F7FBFB}
.catalogue table a:hover{color:#F7FBFB;text-shadow:1px 1px 4px #1f414b}
.catalogue table a div{display:inline-block;opacity:0;margin-left:1em;border-radius:0.4em 0 0 0.4em;box-shadow:0 1px #fff;padding:0.3em 0 0.3em 1em;font-weight:600;font-size:0.8rem;text-shadow:none;color:#2e6272;transition:opacity ease-in-out 0.5s}
.catalogue table a:hover div{opacity:1}
.catalogue table .or{background:linear-gradient(to right,#FDEE82,#cbdbde 50%)}
.catalogue table .ch{background:linear-gradient(to right,#A8EFB1,#cbdbde 50%)}
.catalogue table .pi{background:linear-gradient(to right,#A8C9FF,#cbdbde 50%)}
.catalogue table .oth{background:linear-gradient(to right,#D89FF9,#cbdbde 50%)}
.catalogue table .voc{background:linear-gradient(to right,#FFC4E8,#cbdbde 50%)}
@media only screen and (orientation:portrait) and (max-width:428px){.catalogue table{font-size:1.1rem}.catalogue table a div{display:none}}
@media only screen and (orientation:landscape) and (max-width:844px){.catalogue table{font-size:1rem}.catalogue table a div{font-size:0.6rem}}
/* catalogue files */
.cataloguefiles{min-height:100lvh;padding:0 3vw 15vh 3vw;font-size:1rem;font-weight:500;color:#1f414b;text-align:left;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto}
.cataloguefiles h1 {margin:0;font-size:1.3rem;font-style:italic}
.cataloguefiles h2 {font-size:1.15rem}
.cataloguefiles img {margin:0.5vw 0.5em 0.5em 0;border-radius:0.25em;border:1px groove rgba(254,254,254,1)}
.cataloguefiles a{color:inherit;font-weight:700;text-decoration:underline;white-space:nowrap}
.cataloguefiles a:hover{color:#D96D00}
/* Captions and insets */
.caption1{font-size:0.8rem}
.caption2{font-size:0.7rem}
.caption3{font-size:0.65rem}
.inset{display:flow-root;width:fit-content;background:rgba(255,255,255, 0.33);font-size:0.8rem;border:thin solid #fff;padding:0 0.33em 0.25em 0.33em;border-radius:0.25em}
/* vocal bg */
#twosongs, #runningsun, #gossamernoons, #pussies{background:linear-gradient(to bottom, rgba(255,196,232,1), rgba(255,196,232,0.25) 10%,transparent 50%)}
/* orchestra bg */
#symphonyone, #concerto1, #concerto2, #symphony2{background:linear-gradient(to bottom, rgba(253,238,130,1), rgba(253,238,130,0.25) 10%,transparent 50%)}
/* chamber bg */
#stringquartetno1, #trio1, #nocturneforsq, #fantasyforviolin, #postlude, #quintet, #duo, #eventually, #mixture, #berceuse, #trio2, #chatting, #pianoquartet{background:linear-gradient(to bottom, rgba(159,249,161,1), rgba(159,249,161,0.15) 10%,transparent 50%)}
/* piano bg */
#fantasyforpiano, #etudes, #image, #recollections, #portrait, #solo, #starscape, #saccade, #quartet, #hommages, #nocturneforpiano, #lefthand, #valsemirage, #fontana, #inretrospect, #schilflied, #shallwedance, #liasfow, #radiance, #pourjeanne, #testament, #postcards{background:linear-gradient(to bottom, rgba(168,201,255,1), rgba(168,201,255,0.25) 10%,transparent 50%)}
/* other bg */
#juvenilia, #secondthoughts, #landscape{background:linear-gradient(to bottom, rgba(216,159,249,1), rgba(216,159,249,0.25) 10%,transparent 50%)}
/* sliding soundclips */
.soundclip{left:100%;position:fixed;top:16%;z-index:3;width:fit-content;
border:1px groove rgba(46, 98, 114, 0.25);border-radius:0.25em;background:#fff}
@media only screen and (orientation:landscape) and (max-width:932px){.soundclip{height:100%;top:8%;max-height:calc(100% - 16%);overflow-y:auto}}
#soundclip-header{position:sticky;top:0;z-index:999;display:block;background:#7e9ea8;padding:5px;font-size:0.6rem;font-weight:700;color:#fff;border-radius:0.25em 0.25em 0 0;height:25px}
#soundclip-header a.close img {float:right;width:16px;height:16px;margin:0;background:#fff;border:2px ridge transparent;border-radius:0.25em;transition:all ease-in-out 0.5s}
#soundclip-header a.close img:hover{background:rgba(255,160,64,1)}
.ui360{font-size:0.65rem;color:#234A56;}
.soundclip-22 {width:235px}
.soundclip-20,.soundclip-34{width:250px}
.soundclip-26{width:260px}
.soundclip-02,.soundclip-06,.soundclip-07,.soundclip-19,.soundclip-33{width:280px}
.soundclip-04,.soundclip-29{width:285px}
.soundclip-03,.soundclip-17,.soundclip-31,.soundclip-37,.soundclip-39,.soundclip-40{width:300px}
.soundclip-10,.soundclip-16,.soundclip-32,.soundclip-36,.soundclip-38,.soundclip-41{width:330px}
.soundclip-23 {width:350px}
#memo{background:url(../img/opuscatalogue/41memo-bg.webp) center/cover}
#memo2 {width:100%;height:auto;border:none;margin-top:-3vh}
#memo2:hover {opacity:0.5;width:90%}
/* discography */
#discography{background:url("../img/discography/discography-bg.webp");color:#2e6272;font-weight:600;padding:0 3vw}
#discography h1{margin:0;color:#2e6272;font-size:1.4rem;font-style:oblique;text-shadow:1px 0 1px #fff}
#discography .resp-col{margin:auto}
#discography .col{flex:0.33;max-width:calc(240px + 1vw);margin:0 0 2.5vh 0}
#discography .col-center{padding:0 0.5vw 0 0.5vw}
#discography a{color:inherit}
#discography a:hover{color:#D96D00}
#discography .col img{width:100%;height:auto;margin-bottom:0;border:0.01em solid rgba(217,109,0,0.25);border-radius:0.2em}
#discography .col img:hover{opacity:0.6;border:0.3em groove #ffffff}
#discography .col figure{margin:0}
#discography .col figcaption{font-size:0.65rem}
/* scores */
#scorerecordinglinks{background:url(../img/discography/discography-bg.webp);font-size:1rem;color:#2e6272;font-weight:600;padding:1vh 3vw 10vh 3vw}
#scorerecordinglinks table{font-weight:900}
#scorerecordinglinks a{color:inherit;font-weight:900}
#scorerecordinglinks a:hover{color:#D96D00}
.scoretitle{margin:2vh 0 0 -10vw;font-size:1.4rem;text-shadow:1px 1px #fff}
.references{max-width:80%;margin:0 auto}
.references h2{font-size:1.1rem}
.references img{max-width:0.8rem;width:100%;height:auto;vertical-align:middle;margin-left:0.2rem}
.references img:hover{max-width:1.2rem}
.editors{font-weight:900;font-variant:small-caps}
.parenthese{font-size:75%}
/* Jump to top */
a#gotop{position:fixed;right:4vw;bottom:2vh;display:block;background:#dbe0e2;padding:0.25em;text-decoration:none;border-radius:0.2em;border:0.1rem ridge #fff;box-shadow:0.1em 0.1em 0.1em #2e6272;color:#1f414b;font-size:6vw;animation-name:fading-gotop,bounce;animation-duration:5s;animation-delay:10s;text-align:center;opacity:0;animation-timing-function:ease-in;animation-fill-mode:forwards}
a#gotop:hover{color:#d96D00;border:0.05rem groove #fff;box-shadow:0.2em 0.2em 0.2em #2e6272}
@keyframes fading-gotop{from {opacity:0}to {opacity:1}}
@keyframes bounce{0%, 20%, 50%, 80%, 100% {transform:translateY(0)}40% {transform:translateY(-20vw)}
60% {transform: translateY(-10vw)}}
@keyframes blinker{50% {opacity:0}}
/* donate_fff et donate_1f414b.php */
.popup-don{position:relative;float:right;top:.33em;width:fit-content;z-index:1;left:100%;margin:0 1vw 0;padding:0 0 .2rem 0;font-size:.6rem;font-weight:normal!important;color:#ffffff;transition:opacity 1s}
@media only screen and (max-width:428px){.popup-don{display:none}}
.popup-don.fadeOut{opacity:0}
.close img{width:.7rem;height:.7rem;background:#fff;vertical-align:middle;margin:0 0 0.2rem!important;box-shadow:none!important;border-radius:.5rem!important;padding:.1rem;cursor:pointer}
a.donate{position:relative;z-index:2;display:flex!important;justify-content:center;align-items:center;margin-top:.2rem;padding-bottom:.15rem;box-shadow:0.1em 0.15em 0.1em rgba(64,64,64,.4);text-decoration:none!important;background:#2e6272;color:#ffffff!important;opacity:1!important;font-weight:900!important;font-size:1.2rem;border:1px solid rgba(255,255,255,.66);border-radius:.5rem}
a.donate:hover{color:#d96D00!important}
.obscur{color:#1f414b!important}
a.obscur{background:#ffffff;color:#1f414b!important;border:1px solid rgba(31,65,75,.66)!important;text-shadow:unset!important}