/* base*.css *-250327,24-01-19,23-11-20,22-08-08,20-9-28,145,2,1
   Copyright gene wedu.biz
*/
@charset "UTF-8";

.wedu.biz {
/* content: "'date': 20240504," + "'name': 'JAYNE'," + "'url': 'https://jayneduryea.com'" */;
}
.edit-info{color:#000080;}
.edit-info:hover{color:#fff;}
/*
html {width:100%;}

a {display:inline-block;font-size:1.2em;padding:.75em .5em;text-underline-position: under;}
a:link,a:visited,a:active{color:#0ff}
a:hover{border-radius:4px} */

/* Focusing the element with a keyboard will show a dashed black line. */
a:focus-visible{outline:4px dashed black}

/* Focusing the element with a mouse, touch, or stylus will show a subtle drop shadow. */
a:focus:not(:focus-visible){outline:none;box-shadow:1px 1px 5px rgba(1,1,0,0.7)}

.gradbtn a:focus,.mast a:focus{background-color:white;color:#000;
} /*inverted colors for links in the header and footer, #1295e6 Blue*/

figure {margin:0;}
img, video {height:auto;width:100%;max-width:100%;}
video, summary {cursor:pointer;}

.site,
main,
.contentwrap,
footer {position:relative;}

footer{color:navy;margin:0 0 1em;text-align:center;width:100%}
.size136 {font-size: 136%;}
.size128 {font-size: 128%;}
.subtitle {font-size:1.5rem;font-weight:bolder;}
.upcase {text-transform:uppercase;}

.mycontent{margin:1rem auto;}
.mycontent p {line-height:1.5;margin:1rem auto;/*max-width: 350px;*/}
.mycontent p:first-child::first-letter {font-size:140%;}
/* set paragraph styles
   set drop cap styles - p::first-letter {
   initial-letter: 3 2; margin: 1em .5em 0 0;} */
/*.mycontent div{max-width:350px}*/
/*.container {
    margin: 1em auto;
    text-align: center;
    width:99%;
}  display: grid; grid-gap: 0.2em; grid-template-columns: auto auto auto;*/

.article {margin:1rem 0.75rem;padding:0.5rem;}
.article h2 {margin: -1em;padding: 1em;}
/*.article:last-child {margin-bottom:0;}*/
.article p > a:hover {
    filter: drop-shadow(0.25em 0 0.75em #ef9035);
}/*.orange-glow*/

#ABOUT, #BMenu {scroll-margin-top: 14em;}
/* #ccol0, #ccol1, #ccol2, #ccol3, #ccol4, #ccol5 */


.myhr {
    background: #000;
    background: linear-gradient(to right, #a33, #ebb, #a33) center / 100% 1px no-repeat, 
       linear-gradient(to right, #a33, transparent 25%, transparent 75%, #a33)
       center / 100% 1em no-repeat;
    border: 0;
    display: block;
    width: 100%;
    height: 1.5em;
}

#showrap {margin:2rem auto;text-align:center;}
#myshow {
    max-height: 640px;
    max-width:480px;
} /* #myshow a {text-decoration: none;} Not using '<a>' now. */

.show {
    border: 0;
    cursor: pointer;
}

#thesign {display: none;}
 /* Comment out for thesign display. Only display with print. */

.bgrd {
    background-image: url("../images/stmarkssquare.jpg");
    background-image: url("../images/stmarkssquare.webp");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    max-width: 442px;
    margin: 2rem auto;
}

.catalog3 {
    background-image: url(../images/catalog2012.png);
    background-image: url(../images/catalog2012.webp);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    padding: 8px;
}

.copy {
    color: #FFF;
    font-size: 1em;
    text-align: center;
}
.copy p {margin:1em auto;max-width:550px;}

.drm {
    /*color:#facfcf;*/
    font-size: 1rem;
    font-weight: 600;
    max-width: 550px;
    margin: 6em auto 0;
    padding: 6px;
}

.emicon {vertical-align: middle;}

.floatimg {margin:1rem auto;padding:0 0.5em;text-align:center;width:100%;}

.img01, .img02 {
    border: 0;
    width: 99.8%;
    height: auto;
}
.img01 {
    width: 207px;
    height: 138px;
}
.img02 {
    width: 130px;
    height: 50px;
}
.imgtitle {font-size:1em;}

.exhibits {
    display: grid;
    grid-template-columns: 1fr;
    color:#0080FF;
    font-size: 1.2em;
    font-weight: bold;
}/* #0080FF; lighter blue  margin: auto; */
.exhibits ul {list-style-type: none; padding: 0; margin: 1em 0}
.exhibits li {margin: 1em 1em 2em 1em;}
.exhibits a:link {color:#0080FF;padding:0 0.4em;}
.exhibits a:visited {color:#0080FF;}
.exhibits a:hover {background-color:green;color:#fff;}

.ititle2 {
    background-color: #e6e6fa;
    box-shadow: -2px 2px 18px #e6e6fa;
    color: #1a1a1a;
    margin: 0 2%;
    padding: 4px;
    position: absolute;
    z-index: 47;
}
a ~ .ititle2 {display:none;}
a:hover ~ .ititle2 {display: block;}

.linkfb {
    background-color: #3B5998;
    border-radius: 4px;
    color: #fff !important;
    font-family: sans-serif;
    font-size: 3.0em;
    line-height: 0.6em;
    padding: 14px 11px 5px 24px !important;
    text-decoration: none;
    font-size: 3em;
}

.artmenu {font-weight: bolder;}
.artmenu a:link,
.artmenu a:visited,
.artmenu a:active {color: #00FFFF;}
.artmenu a:hover {border-radius: 4px;}

.circle {border:0;border-radius:50px;box-shadow:0 2px #000;}
.tip {background-color:#5A7F0B;color:white;padding:4px;}
  /* background-color:#5A7F0B passes WCAG AA, #67950B; #87C60B; selected from site */
.pbody {
    background:#000;
    color:#00FF00;
    font-family:'century gothic', Verdana, Arial, Helvetica, sans-serif;
    margin:1rem;
    text-align:left;
}
.pbody p:first-child::first-letter {font-size: 1.75rem;padding-right: 2px;}
/* 2020/03/18 Usage:
    <div><a class="skip-link" href="#content">Skip to Content</a></div>
    visible on iPad-1 2007 */
.skip-link {
    font-weight: 700;
    position: absolute;
    top: -1.5em;
    left: 1em;
    height: 30px;
    padding: 8px;
    transform: translateY(-100%);
    transition: transform 0.3s;
} /* background-color: #e77e23; left: 10%; right: 10%; */
.skip-link:focus {
    transform: translateY(0%);
} /* :focus-within for 2 or more links in the div; NOT fully supported now. */
.skip-link:focus-within {transform: translateY(0%);}
.skip-link a {
    color: #333;
    text-decoration: none;
}
.text-assistive {
  -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  clip-path: polygon(0 0, 0 0, 0 0, 0 0);
  box-sizing: border-box;
  position: absolute;
  margin: 0;
  padding: 0;
}

a:focus { /* generic rule for entire page */
  border-bottom-color: #1295e6;
}
.menu-right a:focus,
.branding a:focus {
  /* inverted colors for links in the header and footer */
  background-color: white;
  color: #1295e6;
}
/* To show the links when they have focus, I recommend using a version
   of this CSS, with colors and sizing to match your branding:
.display-at-top-on-focus */
.text-assistive {
  top: 0;
  left: 0;
  width: 100%;  
}
.text-assistive:focus {
  -webkit-clip-path: none;
  clip-path: none;
  z-index: 999;
  height: 80px;
  line-height: 80px;
  background: white;
  font-size: 1.2rem;
  text-decoration: none;
  color: #1295e6;
  text-align: center;
}
#skip-link-target:focus {
  background: #084367;
  color: white;
}
/* This provides for a very visible display of the trigger and the target
right at the top of the page where a user would expect to see the keyboard
focus directly after loading the page. There is also a color change when
you follow the link to provide clear feedback that something has happened.
*/

.bluetxem {color:#1E90FF;font-size:1.2em;font-weight:bold}
/* liteblue #52A7FF; .darkblue {color:#2273C4;font-weight:bold} */
.hottext {color:#F90B0B}
.hottxt {color:#ff0000} /* #EE4A1C another red orange */
/* .hottxt2 {color:#FF0000} */
.lightblue {color:#3399FF}
/* .linkgreen {color:green;font-size:0.9em}
.linkwhite {color:#FFFFFF;font-size:0.9em} */
.txcenter {text-align:center}
.whiteon {color:#FFFFFF}
/* .underline a {text-decoration:underline}
.smallwhite {font-size:1em;color:#FFFFFF} */

/* Begin popout classes - October 2013 */
.popout {position:relative;}

.popout-link {margin:0 auto;text-align:center;}
.popout-link a {text-decoration: underline;}
.popout-link img {
    height: auto;
    width: auto;
/*    max-width: 400px;
    max-height: 300px;*/
}/* for small screens */
.popout-item {
    background-color: #BFBFBF;
    border: 1px solid #999999;
    box-shadow: 1px 1px 10px #E6E6FA;
    padding: 8px;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-width: 303px;
    z-index: 37;
}
@media (min-width: 34.75rem) { /* 556px */
    .popout-item {width: 550px;}
}
.popout-img {border:0;height:auto;width:99.9%;}
.popout-article {padding:4px;text-align:left;}
.popout-title {color:#d51bce;text-align:center;}/*#FF0000; red */
.popout-title:before {content: open-quote;}
.popout-title:after {content: close-quote;}
.popout-title-src {text-decoration: underline;}
.popout-title-txt {color: red;}
.popout-hover {display: none;}

.popout-item a {color: #00008B}
.popout-item a.close {
    background-color: #BFBFBF;
    color: red;
    font-size: 1.5rem;
    position: absolute;
    top: -2.0em;
    right: 0.02em;
    padding: 0 .8rem;
    text-decoration: none;
    text-align: center;
    white-space: nowrap;
    box-shadow: 2px 1px 10px #E6E6FA;
    z-index: 47;
}/* overflow: hidden; removes underline bar, text-indent: 100%; hides text */
.popout-item a.close::before {content: "\02613";font-size:2.5rem;}
.popout-item a.close:hover {display:none;}
.popout-item a:hover {color:#000;}
.popout-link:hover ~ .popout-hover, .popout-item:hover {display: block;}
/* end popout classes */


@media (min-width: 43rem) {/*640px*/
 .book-img:hover {max-width: 500px;}
 .pbody {margin:0;}
 #page > main section.full {
    grid-template-columns: minmax(350px,700px) minmax(250px,700px);
    justify-content: center;
 }
 .gridContent {
    display: grid;
/*  grid-template-columns: repeat(3, minmax(300px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-template-columns: repeat(auto-fill, minmax(300px, 32%));
    grid-template-columns: repeat(auto-fit, minmax(256px,1fr));*/
    grid-template-columns: minmax(320px,500px) minmax(320px,1fr);
    grid-template-columns: minmax(320px,500px) 1fr;
    grid-template-columns: minmax(300px,30%) auto;
    grid-template-rows: auto;
    grid-gap: 0.6em;
    grid-auto-flow: dense;
/*    justify-content: center;
    align-items: flex-start;
    align-content: center;*/
 }/*justify-content: center; align-content: center;*/

 .mycontent {
    display: grid;
    grid-template-columns:1fr;    
 }
}

@media (min-width: 78rem) {
  .mycontent{/*1248px*/
    grid-template-columns: repeat(auto-fill, minmax(300px, 32%));
    grid-template-columns: minmax(250px,500px) repeat(auto-fill, 33%);
    grid-template-columns: repeat(auto-fill, 32%);
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    grid-template-columns: repeat(auto-fit, minmax(320px,1fr));
    grid-template-rows: auto;
    gap: 1.5rem;
/*  grid-auto-rows: auto;
    justify-content: center;
    align-content: start;
    align-items: flex-start;
    align-content: space-around;
    justify-content: space-between;*/
    margin-top: 1rem;
  }

  .myimage {
    /* row-start / col-start / row-end / col-end */
    /* grid-area: 1 / 1 / 1 / 3; */
    grid-column:1 / 3;/* grid-column-start: 1; grid-column-end: 3; */
    grid-row:2 / 4;/* grid-row-start: 2; grid-row-end: 4; */
  }
}

.last-img {
  margin: 1rem auto;
  /*padding: 0 0.5em;*/
  text-align: center;
  width: 100%;
  /*width: 1124px;*/
  max-width: 100%;
}


/*800px*/
@media (min-width:50rem) {
 .title{font-size:clamp(1.2rem, -0.875rem + 7.333vw, 8rem);}
 .popmenu-link , .popmenu a.close {display:none;}
 .popmenu , .popmenu-hover {display:block;position:relative;border-bottom:none;}
 .spacer{margin-top:clamp(1.8rem, 6.5rem + 15.333vw, 18rem);}
 p{font-size:1.5em;}
}
/*912px*/
@media (min-width:57rem) {
 .spacer{margin-top:clamp(1.8rem, 8.5rem + 10.333vw, 18rem);}
}
/*1200px*/
@media (min-width:75rem) {
 .logo {padding: 0.64rem 0.6rem 0 0.6rem;}
 .spacer{margin-top:clamp(1.8rem, 5.5rem + 30.333vw, 20rem);}
}

/* 1392px
@media (min-width: 88rem) {
  .mycontent {max-width:88rem;}
} */


@media (orientation: landscape) and (max-height: 500px) {
    .site {margin-top: clamp(1.75rem, -0.875rem + 11.333vw, 16rem);}
    #mast {box-shadow:2px 2px 1px hsl(23deg 93% 54% / 36%); padding:0;}
    #news li.vidwidth {max-width: 73%;}
    .popmenu-hover {display:none;}
    .popmenu-link {display:inline-block;}
    .popmenu-link:hover ~ .popmenu-hover, .popmenu:hover, .popmenu a.close {display:block;}
    .menuicon:hover ~ .popmenu-hover {display:block;} /* 10/17/20 for iPad1 */
    .title {font-size: calc(1rem + 1.6vw);}
}

/* Suppress our whole menu when not an interactive mode: printing, etc. */
@media print {
    body {font-size:10pt;}
    #mast {position:relative;}
    .popmenu-link {visibility:hidden;}
    .popmenu a.close {display:none;}
    .header {font-size:4.0em;}
    .menub, .prhide {display:none;}
    .menubtn, #ccol5, #thesign {display:block;}
}
@media print {
    html{border:none;display:block;width:100%;}
    body {background:#000; font-size:10pt;}
    #page, section, .gridContent, /*.mycontent,*/
    .site, header, .main-wrap, footer, .cards {display:block;position:relative;}
    .site {border:none; border-radius: none;box-shadow: none;}
    h1 {font-size: 2rem;border:none;box-shadow: none;min-height: 1rem;}
    .logo{font-size: 2rem;}
    #mast {position:relative;}
    .popmenu {display: none;}
    .popmenu-link {visibility:hidden;}
    .popmenu a.close {display:none;}
    .menub, .prhide {display:none;}
    .menubtn, #ccol5, #thesign {display:block;}
    .main-wrap {margin-top:1rem;}
    main,
    .left-sidebar,
    .right-sidebar {width:100%;}
    .cards {margin:2rem auto;columns:3 300px;padding:1.5rem;}
    #top-of-site-pixel-anchor{display: none;}
}

.basemenu { font-weight: bolder; text-align: center;}
.basemenu ul {list-style-type: none; padding: 0; margin: 1em 0;}
.basemenu li {
    display: inline-block;
    /* border-radius: 0.75em;*/
    background-color: #69767e38; /* #69767e59; #141911; */
    margin: 0.6em;
    vertical-align: top;
}
.basemenu a {box-shadow:4px 4px 4px #323232; text-decoration:none;}
.basemenu a:link, .basemenu a:visited, .basemenu a:active {
    color:#0093ff;
}/*.menub {color: #0080FF;} color:#3897f3; #0082FF;*/
.basemenu a:hover {background-color: green; color: #fff;}

.infomenu {color:#0082FF;text-align: center;}

.poweredBy {
    color: #9C9C9C;
    font-size: 1em;
    font-weight: 300;
    text-align: left;
    background-color: #323232;/*lite black*/
    padding: 4px;
}
details {
    box-shadow: 4px 4px 4px #323232;
    font-size:1.2rem;
    padding:0.55rem 0.5rem;
    max-width:560px;
    interpolate-size: allow-keywords; /*NOT Supported on All Browsers*/
    overflow:clip;
    margin-top:0.125rem;
/*  border: 1px solid #ddd;
    background: #fff;
    color: #333;
    border-radius: 3px;*/
}
details:hover {background:green;color:#fff;}
details summary {
    display: block;
    cursor: pointer;
    position: relative;
/*    padding: 0.5rem 0.5rem 0.5rem 0.7rem;
    background: #ededed;
    color: #2b2b2b;*/
    border-radius: 3px 3px 0 0;
}
details:not([open]) details:hover,
details:not([open]) details:focus {
    background-color: green;
    background: #f6f6f6;
    color: #fff;
    color: #454545; /*scroll-margin-top: 12em;*/
}
details[open] summary {
    outline: 1px solid #003eff;
    background: #007fff;
    color: #fff;
}
details[open]::details-content {
    height: auto;
}
details:details-content {
    height: 0;
    overflow-y: clip;
    transition: content-visibility 475ms allow-discrete, height475ms;
}
details main {
    padding: 1rem 2.2rem;
}
details p {color: #fff;text-align: left;}
/*The interpolate-size property allows smooth transitions
between height:0 (closed) and height:auto (open), ONLY Chrome.
Transition property ensures the visibility change appears seamless.*/


.gradbtn {
   /* 25-03-08 Not Using:
    font-family: 'Courier New', Courier, Verdana, Helvetica;
    font-size: 1.0em;
    font-weight: bold;
    position: relative;*/
}
/* width: 100%; want the menu to fill the available space
   float: none; play nicely with others
    font-family: Helvetica, Verdana, 'Courier New', Courier;
	establish a menu-relative positioning context
	height: 3.3125em; only for bar does not wrap with pg.
    margin: 0 0 0 8px; padding: 0 0 0 8px; text-align: left;

  Horizonal Menu Gradient added UL tag for IE 8 and less. */
.gradbtn ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.gradbtn ul li {
    display: block;
    display: inline;
    margin: 4px 0 4px 0;
    text-align: center;
} /* display: inline-block; this is the same as inline with float: left; */
.gradbtn ul li a {
    text-decoration: none;
    padding: 0.5em;
    margin-right: 5px;
    margin-bottom: 5px;
    display: block;
    border: 1px solid gray;
    border-radius: 8px;
    box-shadow: 3px 3px 4px rgba(0,0,0,.5);
/* Cross-Browser CSS Gradient */
    /* Firefox 3.6+: start@, from color, to color */
    background: -moz-linear-gradient(top, #a4ccec, #72a6d4);
/* for IE lt 10 */
    background: -ms-linear-gradient(top right, #fff133 0%, #16D611 50%, #00a3ef 80%);
    /* blue */
   /* background: linear-gradient(180deg, #a4ccec 5%, #72a6d4 20%, #3282c2 42%, #357cbd 80%, #72a6d4);*/
    background: linear-gradient(180deg, #a4ccec 5%, #72a6d4 24%, #3282c2 42%, #357cbd 80%, #72a6d4);
}
.gradbtn ul li a:link,
.gradbtn ul li a:visited {
    background-color: #3282c2; color: #fff;
}
.gradbtn ul li a:active {
    background-color: #eeff00; color: #000;
} /* selected link #EEFF00; lightyellow */
.gradbtn ul li:hover a,
.gradbtn ul li a:hover {
    background-color: green;
    color: #fff;
    background: green;
    background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
    background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690));
    background: linear-gradient(180deg, #7ad690 25%, #3ec05c 45%, #298a40 85%, #3ec05c, #7ad690);
}
/* Set text-align left, center, or right to align the menu as desired
   To Change .gradbtn properties above - need to ADD !important; */
.btnoptions {
    background-color: #000;
} /* display: inline from center to left align;
    add space before margin-left: 2em;
    margin-left: 8px !important; */
.btnoptions li {
    display: inline-block !important;
} /* float:none; with display:block for wide bars stacked 
     float:left OR display:inline-block for horzional buttons that wrap */
.btnoptions li a {
    font-size: 1.0em;
    line-height: 2.0em;
    box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark),
                var(--h2) var(--v2) var(--blur2) var(--color-light) !important;
    font-weight: bolder;
}
/* Button Size: Normal font-size: 1.0em; Medium font-size: 1.5em; line-height: 2.5em;
    Large font-size: 3.0em; line-height: 2.0em;
 Default Changes
     vertical-align: bottom;
     Copy here one of the theme options from gradient.css. Default: blue
gradient.css Copyright 2012 gene at wedu dot biz    20160415 20120201 */

.menu-opts ul li a {
    box-shadow: var(--h1) var(--v1) var(--blur1) var(--color-dark),
                var(--h2) var(--v2) var(--blur2) var(--color-light) !important;
    font-weight: bolder;
} /* background: linear-gradient(var(--bg-angle2), rgba(0,0,0,0.22),
                rgba(255,255,255,0.25)); */

.shadow-box {
    border-radius: 4px;
    box-shadow: 2px 2px 0 3px lightsteelblue;
    margin-inline-end: 0.25ch 
}

.samp {padding: 1rem;border 1px solid currentColor;
    background:hsl(from currentColor hsl/0.1)
}

kbd .samp {
    border-radius: 0.5rem; padding:0.25em;
}
/* Avoid bottom bar */
.navbar {
    padding-bottom: 0;padding-bottom: env(safe-area-inset-bottom, 0);
}

/* New web color spaces coming 2023/02/02:
 sRGB
 Display-P3 2X colors
 A98-RGB
 Rec2020 4X colors 
 ProPhoto */

/* hwb(hue, whiteness, blackness / opacity) */
.valid-css-hwb-colors {
    --modern: hwb(200deg 25% 25%);
    --modern2: hwb(200 25% 25%);
    --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
    --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

    /* hueless and no saturation */
    --empty-channels-white: hwb(none 100% none);
    --empty-channels-black: hwb(none none 100%);
}

/*
<div id="top-of-site-pixel-anchor"></div>

.title.header-not-at-top {font-size: 18px;}

#top-of-site-pixel-anchor {
  position: absolute;
  width: 1px;
  height: 1px;
  top: 500px;
  left: 0;
}
 HTML search symbols        CSS content string
 left slant &#128269;       '\1F50D'
 right slant &#128270;      '\1F50E' 

base*.css
* 250327 25-01-08,24-01-12,23-11-20,23-01-21,22-8-8
base.css 250620 20220808 20200927 20200311 2020-2 20160415 20160312
 20150201 20110509
    Copyright gene wedu.biz
*/