:root {
	--bodywidth: 900px;
	--bodycream: #f2ead3;
	--latvianred: #A4343A;
	--lightcream: #f6ebd2;
	--menucream: #e2d2ac;
	--sepback: #eee5ce; /* lighter menucream in block background to optically match our current separator */
	--pureleft:	240px;
	--negativepureleft: -240px;
	--headfont: 'Fira Sans Condensed' /* 'Oswald' */;
	--lightlatvianred: #c1af86; /* #9a7850; */ /*#c1af86; */ /* #cf434a; THIS is actually light... */
	--headcolor: #746748;
}

p,ul,ol,h1,h2,h3,h4,h5,h6 { margin-top: 8px; margin-bottom: 8px; }

* { box-sizing: border-box; }

#abovetop { color: #fff; background-color: var(--latvianred ); padding: 8px; }

.envelope, #topmenu.our, .sitetrailer { max-width: var(--bodywidth); margin: 0 auto; padding: 0 20px; }
.sitetrailer { overflow: auto; }
.envelope { background: #fff; }
/* #topmenu.our { background-color: #fff; } */
.sitetrailer { background: var(--latvianred ); color: #ddd; }
.sitetrailer a { color: #ddd; text-decoration: none; padding-bottom: 2px; border-bottom: solid 2px transparent; }
.sitetrailer a.text:hover { border-bottom: dotted; color: #ddd; }

/* Define the regular variable font ... was NotoSans */
@font-face {
  font-family: 'BodyText';
  src: url('fonts/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 1 1000; /* Variable font weight range */
  font-stretch: 25% 100%; /* Variable font width range */
}

/* Define the italic variable font */
@font-face {
  font-family: 'BodyText';
  src: url('fonts/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 1 1000; /* Variable font weight range */
  font-stretch: 25% 100%; /* Variable font width range */
  font-style: italic; /* Italic style */
}

html.our {
   background-image:url('../graphics/pexels-pixabay-164821.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed; }

/* Apply the font to the body */
body.our {
  font-family: 'BodyText', sans-serif;
  font-size: 17.5px;
  line-height: 165%;
}
.normal, .normal a, norm { font-size: 17.5px; font-weight: 300; /* for us */ }
h3 { font-stretch: 120%; }

h1, h2, #abovetop {
	 font-weight: 400;
	  font-weight: 400; /* Default weight */
  font-stretch: 100%; /* Default width */
}
h1 { margin: 0; color: var(--latvianred ); }
h1 { font-size: 28pt; }
h2 { font-size: 20pt; margin: 8px 0; color: #333; line-height: 110%; }
#abovetop { font-family: BodyText; letter-spacing: 1px;}
#abovetop a,
#abovetop a:hover,
#abovetop a:focus,
#abovetop a:active
 { text-decoration: none; color: #ffffff; }

/* Apply italic style where needed */
.emphasis {
  font-style: italic;
}


#topmenu.our { 
	border-left: transparent 4px solid;
	border-top: transparent 4px solid;
	border-right: transparent 4px solid;
}



#topmenu.our > div > ul { text-align: center; }
#topmenu.our > div > ul ul { text-align: left; }
#topmenu.our > div > ul > li { margin: 0 8px; }

#topmenu.our > div > ul > li > .pure-menu-link { padding: 10px 2px }

/* our navigation overwrites...
....pure-menu-has-children>.pure-menu-link:after{content:"\25BE"}
*/

/*MAIN NAVIGATION*/
#topmenu.our > div > ul > li > .pure-menu-link,
#topmenu.our > div > ul > li > .pure-menu-link:hover,
#topmenu.our > div > ul > li > .pure-menu-link:focus,
#topmenu.our > div > ul > li > .pure-menu-link:active
 {
	background-color: transparent; color: #222; font-weight: 500; /* #fff; */
}

#topmenu.our > div > ul > li > .pure-menu-link:before,
#topmenu.our > div > ul > li > .pure-menu-link:after
{
	 position: absolute;
    left: 0px;
    width: 100%;
    height: 1.5pt;
    background: var(--latvianred);
    content: "";
    opacity: 0;
	 transition: opacity 0.3s ease;
    transition: all 0.3s;
}

#topmenu.our
{ transition: 0.2s ease-in-out; position: sticky; box-sizing: border-box; top:0; height: auto; width: 100%; margin: 0 auto; z-index: 1000; text-align: center;  transition: background 0s !important; }

/* don't know what's showing up at left of border... */
#topmenu.our > div > ul > li.pure-menu-has-children > .pure-menu-link:after{ width: calc( 100% - 7px ) }

#topmenu.our > div > ul > li:not(.mCM_active) > .pure-menu-link:before
{
    top: 0px;
    transform: translateY(10px);
}

#topmenu.our > div > ul > li:not(.mCM_active) > .pure-menu-link:after
{
    bottom: 0px;
    transform: translateY(-10px);
}
#topmenu.our > div > ul > li:not(.mCM_active) > .pure-menu-link:hover:before,
#topmenu.our > div > ul > li:not(.mCM_active) > .pure-menu-link:hover:after
{
    opacity: 1;
    transform: translateY(0px);
}


#topmenu.our > div > ul > li:first-child { margin-left: 0; }
#topmenu.our > div > ul > li:last-child { margin-right: 0; }

.pure-menu-link { color: #333; }
.mCM_active .pure-menu-link { color: #333; }


#topmenu.our { 
	max-width: var(--bodywidth); margin: 0 auto; padding: 0; 
}
#topmenu.our .pure-menu-horizontal { white-space: normal; }

#header.our { margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; }

#topmenu.our ul ul { background: #f1eadd; box-shadow: rgba( 0,0,0,0.3) 8px 8px 8px; }

#topmenu.our ul ul :not(.mCM_active) .pure-menu-active>.pure-menu-link,
#topmenu.our ul ul :not(.mCM_active) .pure-menu-link:focus,
#topmenu.our ul ul :not(.mCM_active) .pure-menu-link:hover {
    background-color: var(--latvianred); color: #fff;
}
#topmenu.our ul ul .mCM_active .pure-menu-link { background: #6f6969; color: #eee;  }




#fadebar { height: 20px; width: 100%; 
	/* max-width: 800px; */
	/* margin: 0 auto; */
	position: sticky;
	z-index: 10;
	background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%,
		rgba(255,255,255,0) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,
		rgba(255,255,255,0) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,
		rgba(255,255,255,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff',
		endColorstr='#00ffff',GradientType=0 ); /* IE6-9 */
	opacity: 0; /* default = off on initial load */
	}

img.icon { vertical-align: middle; }

.content.our { padding-bottom: 16px; }

.content .mCM_SITE_link { color: #000; text-decoration: none; border-bottom: 2.5px dotted; }
.content .mCM_SITE_link:hover { border-bottom: 2px solid; color: var(--latvianred); }

.content ul { list-style-type: square; }

.content p, li { line-height: 145%; }

/*
.content > h1,
TABLE.clef h1 {
	font-family: myhead;
	color: #6d002a; font-size: 28pt;
	text-align: center;
	line-height: 28pt; padding: .5em 0; margin: 0;
	text-shadow: 4px 4px 6px #808080;
}
*/
H1 { background: url( "../graphics/clef-v01.png" );
	background-repeat: no-repeat; padding-right: 30px; min-height: 50px; padding-top: 0px;
	line-height: 105%;
	margin-bottom: 16px;
}
H1 { padding-left: 40px; }

h1,h2,h3,h4,h5,h6 { font-family: BodyText, monospace; /* font-variant: small-caps; */ }

.lastupdated { font-size: 90%; text-align:right; font-weight: 100;}

.mCM_EXT_link, .mCM_EXT_link:active, .mCM_EXT_link:visited
{ text-decoration: none; color: #000; border-bottom: 3px dotted #888; font-weight: normal; }
.mCM_EXT_link:hover { border-color: transparent; }
.mCM_EXT_link:after { content: "↗"; padding-left: 2px; }

/* liner notes lyrics */
table.mCM_qt_sidebylyrics { width: 100%; }
table.mCM_qt_sidebylyrics td.mCM_qt_col1,
table.mCM_qt_sidebylyrics td.MCM_qt_col2 { width: 50%; }

.mCM_btn { white-space: nowrap; border: 1.5px solid; padding: 3px 5px 4px 5px; border-radius: 8px; display: inline-block; margin: 2px; text-decoration: none; color: #333; font-size:14px; line-height: 16px; }
.mCM_btn.mCM_active { border-color: var(--latvianred); color: #f0f0f0; background-color: var(--latvianred);
font-weight: 400; }

/* default */
.mCM_PRECOMMA:before { content: " — "; }

/* for making performers stand out */
perf { font-size: 115%; color: var(--latvianred); font-weight: normal; }
.notes { font-size: 85%; }


/* page toc */

.content .mCM_TOC .mCM_SITE_link,
.content .mCM_TOC .mCM_SITE_link,
.content .mCM_TOC .mCM_SITE_link { border-bottom: none; }
.interior, .mCM_TOC, .mCM_thumbnails .mCM_1up
{ border: 1px var(--latvianred) solid; border-radius: 8px; padding: 6px 10px; margin: 8px 0;
background: #ffffff; }
.interior:first-child, .mCM_TOC:first-child, .mCM_thumbnails .mCM_1up:first-child
{ margin-top: 0;}
.mCM_TOC { display: table; }
.mCM_TOC_H2 { display: block; margin-left: 0em; } 
.mCM_TOC_H3 { display: block; margin-left: 1em; }
.mCM_TOC_H4 { display: block; margin-left: 2em; }
.mCM_TOC_H5 { display: block; margin-left: 3em; }
:not(.mCM_TOC) .toconly { display: none; }
.mCM_TOC .notoc { display: none; }
.mCM_TOC .toconly { display: inline; }
.i0, .content p.i0:not(.icap) { text-indent: 0; }
.mCM_TOC .mCM_SITE_link { font-weight: 300; }
.mCM_TOC .mCM_SITE_link:hover { border-bottom: 2px dotted; }
a.mCM_inpage.head { text-decoration:none; }

.pure-u-sm-1-2:first-child .interior { margin-right:4px }
.pure-u-sm-1-2:last-child .interior { margin-right:0; margin-left: 4px; }
.pure-g [class*=pure-u] { font-family: BodyText; line-height: 135%; }

.c { text-align: center; }
.mCM_FB_message { text-align: left; }
.pure-g [class*=pure-u] { font-family: Merriweather, serif; font-size: 80%; }
.mCM_FB_date{white-space: nowrap; }
.center { text-align: center; margin-left; auto; margin-right: auto; }
.FBenvelope { font-size: 88%; line-height: 135%; }
/* rejig */
.verso { padding-right: 4px; }
.recto { padding-left: 4px; }

/* 2024-11-04 */
.big { font-size: 140%; color: var( --latvianred ); }