/*
 *	"mCM_figure.css"
 *
 *	N.B. We had to keep "mobile" javascript on resizes, but do CSS up-front so we putz less with page layout during
 * initial load.
 *
 *	Date			Ver	Description
 * ----------	---	---------------------------------------------------------------------------------------------------------
 *	2022-01-06	1.0	First cut
 *
 */

/* Default for all mobile figures is to center, then if viewport is wide enough, do appropriate float,
	since "pixels" are now browser pixels, go back to pixels from ems */
	
/* First, our sizes; we create images of this width */

DIV.figure {
	display: block;
	float: none;
	margin: 8px auto;
	font-size: 85%;
	line-height: 135%;
	text-align: center;
	max-width: 100%;
	page-break-inside: avoid;
}
.NOSHADOW * { box-shadow: none !important; }

/* Our standard widths:
 * -------------------
 *	thumb = 100, small = 150, medium = 250, large = 350, xl = 500, full = 100%
 *	NOTE: "full" resizes to a specific size in functions_yyyy-mm-dd which should match .content div width in index.php;
 *	200px is the minimal amount of text we want before we float images instead of center
 * for non-standard widths, need to specify "mobile" to do dynamically on screen resize; may automate that [TBD]
 */
 
/* we start media width checking at medium since it's unlikely we'll get below 350px-ish wide */

#mCM_figure_margin { margin: 16px; display: none; } /* "mobile" Javascript picks up margin */

div.figure.LEFT { margin-right: 16px; margin-left: 0; float: left; clear: left; }
div.figure.RIGHT { margin-left: 16px; margin-right: 0; float: right; clear: right; }
div.figure.NOCLEAR { clear:none; }
div.figure.CLEAR.LEFT { clear:left; }
div.figure.CLEAR.RIGHT { clear:right; }
.figure img { border: 1px #666666 solid; display: block; margin-bottom: 6px; }
.figure.NOIMGBORDER img  { border: none; }

.mCM_thumbnails_container,
.figure img { max-width: 91vw; } /* technically 100% less .content padding */

/* NOTE, THESE NEED TO BE SET UP AS GLOBALS ALSO FOR FUNCTIONS TO PICK UP, THESE VALUES
   ARE SYNCED TO PHP CODE */

div.figure.THUMB .mCM_thumbnails_container { width: 100px; max-width: 100%; }
div.figure.THUMB.border { width: 102px; }
@media (max-width: 300px) { 
	div.figure.THUMB { margin-left: auto; margin-right: auto; float: none; }
}
div.figure.SMALL .mCM_thumbnails_container { width: 150px; max-width: 100%; }
div.figure.SMALL.border { width: 152px; }
@media (max-width: 350px) { 
	div.figure.SMALL { margin-left: auto; margin-right: auto; float: none; }
}
div.figure.MEDIUM .mCM_thumbnails_container { width: 250px; max-width: 100%; }
div.figure.MEDIUM.border { width: 252px; }
@media (max-width: 450px) { 
	div.figure.MEDIUM { margin-left: auto; margin-right: auto; float: none; }
}
div.figure.LARGE .mCM_thumbnails_container { width: 350px; max-width: 100%; }
div.figure.LARGE.border { width: 352px; }
@media (max-width: 550px) { 
	div.figure.LARGE { margin-left: auto; margin-right: auto; float: none; }
}
div.figure.XL .mCM_thumbnails_container { width: 500px; max-width: 100%; }
div.figure.XL.border { width: 502px; }
@media (max-width: 700px) { 
	div.figure.XL { margin-left: auto; margin-right: auto; float: none; }
}
div.figure.FULL, div.figure.FULL.border { width: 100%; }

div.figure.INLINE { display: inline-block; vertical-align: top; position: relative;}