/*
 * Standardized miniCM/miniCM navigation related CSS, generally not to be tinkered with
 *
 *
 * Date				Description
 * ----------		------------------------------------------------------------------------------------------------
 * 2018-12-17	a)	First cut at site-specific versus miniCM CSS separation AND version dating
 * 2018-12-23	a)	Add OVERLAY components from RobertFrieber (no sizing, though), and inline display
 *						adjustments to support switch over to Light Gallery from Lightbox
 * 2019-01-06	a) Remove PURE customization remnants
 * 2019-01-11	a)	Support figure template -> figure function plus supporting code in paint_thumbs
 *						i)	Envelope thumbnail gallery in "figure" div for sizing/positioning, ergo, use not that for
 *							regular gallery (?)
 * 2019-01-14	a) Add heritage twoup/threeup miniCM responsive styles
 * 2019-01-27	-)	"New release" checkpoint of cummulative changes in 2019-01-14 version
 *					a)	lb-prev, lb-next z-index adjustment
 * 2019-11-15	a)	Block for #menu pure-menu-heading in place of out-of-box inline block
 * 2021-01-16	a)	Add video classes for YOUTUBE and internal VIDEO templates
 *					b) lost .mCM_highlight along the way
 * ---
 * 2023-03-09	a)	Remove styles for miniCM buttons, those need to be site-specific; leave
 *						gradient google search and return-to-top buttons only
 * 2023-07-20	a)	twoup trigger too narrow
 * 2023-09-09	a)	missing border on .figure.IMGBORDER IMG
 * 2023-10-10	?)
 * 2023-10-12	a) Google dropped translation plugin, remove transba
 *					b) add mCM_thumbnails_envelope
/*****************************************************************************************************************/

* box-sizing: border-box;

/*
 * Lightgallery autohide caption
 */

.lg-hide-items .lg-sub-html { opacity: 0 !important; }

/*
 * Thumbnail gallery support
 */
 
gallerytitle { /* technically we should not be defining elements, but... */
	display: block;
	font-weight: bold;
}
ul.mCM_gallery {
	/* new ul for each item, so no top or bottom margin */
	margin-top: 0;
	margin-bottom: 0;
}

span.mCM_thumboftype {
	font-size: 80%;
	text-transform: uppercase;
	padding-left: 8px;
}
span.mCM_thumboftype:before { content: "["; }
span.mCM_thumboftype:after { content: "]"; }

.mCM_thumbnails_container {
	width: 100%;
	text-align: center;
} 
.mCM_thumbnails_head {
	font-size: 80%;
	color: #606060;
	padding: .5em 5% 1em 5%;
	line-height: 130%;
	font-style: italic;
}
DIV.mCM_thumbnails_envelope {
	display: inline-block; vertical-align: top;
}
DIV.mCM_thumbnails_caption { /* lists remain unaffected */
	font-size: 14px;
	display: inline-block; vertical-align: top;
	margin: 10px 20px 10px 10px;
	line-height: 145%;
	color: #666666;
}
.mCM_thumbnails_caption img { /* need to remove <br> */
	display: block;
	margin-bottom: 8px;
}

.shadow IMG, .SHADOW IMG, .SHADOW IMG.figure  { box-shadow: 8px 4px 8px #aaaaaa; }
.border IMG, .BORDER IMG, .BORDER IMG.figure, .figure.IMGBORDER IMG { border: 1px #a0a0a0 solid; }

.mCM_thumbnails_caption p {
	margin: 0 !important;
	padding-top: 0.5em;
}

.mCM_caption .hidep { display: none; }

.mCM_thumbnails .mCM_1up {
	width: 100%; border: 1px solid #d0d0d0;;
	box-sizing: border-box;
	background-color: #f0f0f0;
	text-align: left;
	display: block;
	margin-bottom: .5em; margin-right: 1em;
	clear: both;
	padding: 8px 8px 12px 10px;
}
.mCM_thumbnails .mCM_1up_pic {
/*
	display: block; float: left;
	/*width: 13%;*/
*/
}	
.mCM_thumbnails .mCM_1up_pic IMG {
/*
	border: .125em #606060 solid;
	box-shadow: 7px 3px 7px #bbbbbb;
	margin: 0 1em .5em 0;
	max-width: 100%;
*/
}
.mCM_thumbnails_container .mCM_1up_desc {
}

.mCM_thumbnails .mCM_1up_desc {
/*
	display: inline;
*/}
/*
@media ( min-width: 500px ) {
	.mCM_thumbnails .mCM_1up_desc {
		display: table-cell;
		width: 85%;
		padding-left: 2em;
	}
}
*/
.mCM_thumbnails_pages {
	text-align: center; /* we generate mCM_btn for the links */
}

.mCM_thumbnails a, #lightbox a {
	text-decoration: none;
	border: none; 
}
a .dim :hover, a.dim:hover, a.dim:hover img, a:hover img.dim { 
	opacity: 0.60;
	filter: alpha(opacity=60); /* For IE8 and earlier */
}
/* NEW!! */
.mCM_thumbname { /* for generated DSC with filename in it */
	display: block;
	padding-top: 4px;
	font-size: 90%;
	word-wrap: break-word;
}

.mCM_edit_icon { /* position icon with edit link */
	display: block;
	position:absolute;
	border:none;
	box-shadow: none;
	z-index: 100;
}
.mCM_edit_icon img {
	display: block;
	margin: 5px 0 0 20px;
	border: none;
}
.mCM_thumbnails_caption p:first-of-type { /* <br> removed, margin added to bottom of thumbnail, paragraph most likely
 first content tag if have one  */
	margin-top: 0;
	padding-top: 0;
}
.mCM_thumbnails_caption img { /* need to remove <br> */
	display: block;
	margin-bottom: 8px;
	margin-left: auto;
	margin-right: auto;
}
DIV.mCM_thumbnail_overlay { /* size explicitly set in code */
	background-color: #303030;
	color: transparent;
	box-sizing: border-box;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0 3px;
	border: 1px #a0a0a0 solid; /* match image above */
	box-shadow: 8px 4px 8px #bbbbbb;
	/* NOTE, function currently adds 30 to width since we need to force a specific width on per-thumb basis */
	margin: 10px;
	
}
DIV.mCM_thumbnail_overlay:hover, DIV.mCM_thumbnail_overlay.hoveroverlay  { 
	background-color: rgba(0,0,0,0.3);
	text-shadow: 2px 2px 2px rgba(0,0,0,1.0);
	color: #ffffff;
	transition-duration: 0.3s;
}
.lg-sub-html {
	line-height: 110%;
}
div.mCM_thumbnails > div { display: inline; }
div.figure div.mCM_thumbnails,
div.figure div.mCM_thumbnails_container,
div.figure div.mCM_thumbnails_caption { margin: 0; }

/*
 * video overlay
 */
div#vid-overlay {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20000; /* in front of Lightbox */
	background-color: rgba( 0,0,0,1.0); /* mask Lightbox completely */
	display: none;
}
div#vid-container {
}
video#vid-tag {
	display: block;
	opacity: 1.0;
	border: 4px #cccccc solid;
	border-radius: 3px;
}
div#vid-close,
.alt-button { /* duplicate from current (our custom) Lightbox lb-close */
   padding: 8px;
   background-color: #404040;
   filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
   opacity: 0.7;
   -webkit-transition: opacity 0.2s;
   -moz-transition: opacity 0.2s;
   -o-transition: opacity 0.2s;
   transition: opacity 0.2s;
	color: #ddd;
	border: 1px #686868 solid !important; /* override link borders off */
	border-radius: 5px;
	margin-top: 6px;
	cursor: pointer;
}
button { border-radius: 5px; } /* conform  for alt content close */
div#vid-close {
	height: 1em;
   line-height: 1em;
	display: block;
	float: right;
}
.alt-button {
	display: block; float: left;
	font-size: 19px;
	margin-right: 10px;
	margin-top: 0;
}
div.alt-container {
	display: inline-block;
}
div.alt-caption {
	display: block;
	margin-top: 10px;
}
div#vid-close:hover,
.alt-button:hover {
	color: #fff;
	background-color: #606060;
}
div#vid-caption {
	color: #e8e8e8;
	margin-top: 6px;
	/* match lightbox */
	font-family: sans-serif;
	font-size: 16px;
}
a.lb-mCM:hover { 
	border-width: 1px;
	border-color: #eee;
}
.lb-closeContainer { float: right; } 

.lg-actions .lg-prev, .lg-actions .lg-next { z-index: 2000 !important
; }

/*
 * various (responsive) figure template support
 */

div.figure,
div.mCM_frame,
div.mCM_caption {
	display: block;
	margin: 1em auto;
	font-size: 85%;
	line-height: 135%;
	text-align: center;
	max-width: 100%;
}
div.figure,
div.mCM_frame {
	page-break-inside: avoid;
}
div.mCM_frame,
div.mCM_caption {
	clear: both;
}

div.mCM_caption .nocaption { display: none; } /* when needed in image navigation only */
.mCM_navigate { display: block; padding: 0 0 .5em 0; text-align: center; }

div.figure { page-break-inside: avoid; font-size: 85%;line-height: 135%;text-align: center; max-width: 100%;
	margin-top: 1em; margin-bottom: 1em; }

img.figure{ padding: 0;margin: 0 auto 4px auto; display: block;
  width:auto;height:auto;max-width:100%;max-height:100%;} /* auto margin in case img not as wide as intended figure */
img.figure { border: none; }
.border img.figure { border: 1px #606060 solid; }
.naked img.figure { border: none; padding: 0; margin: 0; }

div.nomargin div.figure.CENTER,
div.nomargin div.figure.LEFT,
div.nomargin div.figure.RIGHT {
	/* a bit of a minsnomer, no bottom margin in case we want to append to legend
	   without that appear in lightbox image text */
	margin-bottom: 0;
}
div.figure.LEFT { clear: left; }
div.figure.RIGHT { clear: right; }
div.figure.NOCLEAR { clear: none; }

div.centered,
div.centered div.figure.CENTER,
div.centered div.figure.LEFT,
div.centered div.figure.RIGHT {
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

/*	standard widths...
	$thumb["THUMB"] = 100;
	$thumb["SMALL"] = 150;
	$thumb["MEDIUM"] = 250;
	$thumb["LARGE"] = 350;
	$thumb["XL"] = 500;

medium and up can take up most of horizontal space on vertical mobile device, center if
less than 250 px left for text/other
*/

/* keep separate in case we change our mind */
div.figure.MEDIUM 	{ width: 100%; margin: 12px 0 12px 0;}
div.figure.LARGE 	{ width: 100%; margin: 12px 0 12px 0;}
div.figure.XL 		{ width: 100%; margin: 12px 0 12px 0;}

div.figure.nudge.down, div.figure.NUDGE.DOWN { margin-top: 18px; }
/*

wbr.mCM_el3 {
	display: block;
}
@media ( min-width: 420px ) {
	wbr.mCM_el3 { display: inline; }
}
*/

div.figure.LEFT, div.figure.left.THUMB { margin-right: 16px; margin-left: 0; float: left; }
div.figure.CENTER, div.figure.center.THUMB { margin-left: auto; margin-right: auto; }
div.figure.RIGHT, div.figure.right.THUMB { margin-left: 16px; margin-right: 0; float: right; }
div.figure.THUMB { width: 100px; }
div.figure.THUMB.border { width: 102px; } /* match to 2 x border width above */

div.figure.LEFT.SMALL { margin-right: 16px; margin-left: 0; float: left; }
div.figure.CENTER.SMALL { margin-left: auto; margin-right: auto; }
div.figure.RIGHT.SMALL { margin-left: 16px; margin-right: 0; float: right; }
div.figure.SMALL { width: 150px; }
div.figure.SMALL.border { width: 152px; }

@media (min-width: 500px) { 
	div.figure.LEFT.MEDIUM { margin-right: 16px; float: left; }
	div.figure.CENTER.MEDIUM { margin-left: auto; margin-right: auto; }
	div.figure.RIGHT.MEDIUM { margin-left: 16px; margin-right: 0; float: right; }
	div.figure.MEDIUM { width: 250px; }
	div.figure.MEDIUM.border { width: 252px; }
	}
@media (min-width: 600px) { 
	div.figure.LEFT.LARGE { margin-right: 16px; margin-left: 0; float: left; }
	div.figure.CENTER.LARGE { margin-left: auto; margin-right: auto; }
	div.figure.RIGHT.LARGE { margin-left: 16px; margin-right: 0; float: right; }
	div.figure.LARGE { width: 350px; }
	div.figure.LARGE.border { width: 352px; }
}
@media (min-width: 750px) { 
	div.figure.XL { width: 500px; }
	div.figure.XL.border { width: 502px; }
}

/* lastly, when we need to adjust margins */
.tmz { margin-top: 0 !important; }
.rmz { margin-right: 0 !important; }
.bmz { margin-bottom: 0 !important; }
.lmz { margin-left: 0 !important; }
.tpz { padding-top: 0 !important; }
.rpz { padding-right: 0 !important; }
.bpz { padding-bottom: 0 !important; }
.lpz { padding-left: 0 !important; }

#topBtn {
	display: inline-block;
	font-weight: normal !important; /* for google xlate */ 
	background: #eeeeee;
	background-image: -webkit-linear-gradient(top, #fefefe, #ededed);
	background-image: -moz-linear-gradient(top, #fefefe, #ededed);
	background-image: -ms-linear-gradient(top, #fefefe, #ededed);
	background-image: -o-linear-gradient(top, #fefefe, #ededed);
	background-image: linear-gradient(to bottom, #fefefe, #ededed);
	-webkit-border-radius: 3;
	-moz-border-radius: 3;
	border-radius: 3px;
	color: #333;
	border: solid #a0a0a0 1px;
	text-decoration: none;
	padding: 0 7px;
	margin: 0 5px 8px 0;
	white-space: nowrap;
	font-family: sans-serif;
}
#topBtn:hover {
  border-color: #000000;
  color: #000000 !important;
  background: #f0f0f0;
  background-image: -webkit-linear-gradient(top, #f0f0f0, #d0d0d0);
  background-image: -moz-linear-gradient(top, #f0f0f0, #d0d0d0);
  background-image: -ms-linear-gradient(top, #f0f0f0, #d0d0d0);
  background-image: -o-linear-gradient(top, #f0f0f0, #d0d0d0);
  background-image: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
}
#topBtn {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed/sticky position */
    bottom: 50px; /* Place the button at the bottom of the page */
    right: 10px; /* Place the button 30px from the right */
    z-index: 99; /* Make sure it does not overlap */
    cursor: pointer; /* Add a mouse pointer on hover */
    font-size: 18px; /* Increase font size */
}


DIV.mCM_thumbnail_overlay { /* size explicitly set in code */
	background-color: transparent;
	color: transparent;
	box-sizing: border-box;
	display: table-cell;
	text-align: center;
	vertical-align: middle;
	padding: 0 3px;
}
DIV.mCM_thumbnail_overlay:hover, DIV.mCM_thumbnail_overlay.hoveroverlay  { 
	background-color: rgba(0,0,0,0.3);
	text-shadow: 2px 2px 2px rgba(0,0,0,1.0);
	color: #ffffff;
	transition-duration: 0.3s;
}
.lg-sub-html {
	line-height: 110%;
}
div.mCM_thumbnails > div { display: inline; }

DIV.twoup { box-sizing: border-box; width: 100%; }
DIV.threeup { 	box-sizing: border-box;float: left; width: 100%; }
DIV.rightifroom { display: none; }
.leftone, .verso, .recto, .rightone, .middleone, .leftdivided { padding-left: 0; padding-right: 0; }
.leftdivided { border-right: none; }
DIV.off_if_oneup { display: none; }

@media (min-width: 600px) {
	DIV.twoup { width: 50%; float: left; }
	DIV.threeup { width: 33%;}
	DIV.rightifroom { /* right if room */
		display: block;
		float: right;
		width: 33%;
		margin-left: 20px;
	}
	DIV.off_if_twoup { display: none; }
	DIV.off_if_oneup { display: block; }
}

@media (min-width: 600px) {	/* additive classes for responsive column spacing */
	.leftone, .verso { padding-right: 15px; }
	.rightone, .recto { padding-left: 15px; }
	.middleone { padding-left: 15px; padding-right: 15epx; }
	.left.divided { padding-right: 15px; border-right: 1px #aaa solid; }	
	.verso.divided { padding-right: 15px; border-right: 1px #aaa solid; }	
}
.center { text-align: center; }
.center * { margin-left: auto; margin-right: auto; }
div.twoup div.figure.left,
div.twoup div.figure.right { margin-left: 0; margin-right: 0; }

blockquote { overflow: auto; }

#menu .pure-menu-heading { display: block; }

/* youtube and video templates */

.video-container {
	margin-top: 1em; margin-bottom: 1em;
}
.video-container {
	position:relative;
	height: 0;
	padding-top: 75%; /* default NTSC standard def */
	overflow:hidden;
	background-color: #606060;
	text-align: center;
}
.video-container.SQ,
.video-container.sq {
	padding-top: 100%;
}
.video-container.ntsc,
.video-container.NTSC,
.video-container.sd,
.video-container.SD {
	padding-top: 75%;
}
.video-container.hd,
.video-container.HD  {
	padding-top: 56.25%;
}

.video-container.hd2sd,
.video-container.HD2SD {
	padding-top: 	56.25%;
}

.video-container iframe, .video-container object, .video-container embed, .video-container video {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}
.video-container.HD2SD video {
	transform-origin: top center;
  -webkit-transform: scaleX(0.75); 
  -moz-transform: scaleX(0.75);
}
video {
	display:block;
}
.mCM_highlight { padding: 0 4px; background-color: #FFF59D; }
.interior { overflow: auto; }