@charset "ISO-8859-1";

#pageFrame, #mainContent
{
	/* TEMP STYLES UNTIL MAIN CSS  */
	width: 100%;
	min-width: 780px;
	box-sizing: border-box;
}
.embossingDesigns
{
	position: relative;
}
.preface, 
.editDate
{
	text-align:center;
	font-size: 1.0em;
}
.embossingDesigns .designCategoryLabel
{
	text-align: left;
	padding-left: 2em;
}
.embossingDesigns .pageCount
{
	display: none;
	padding-right: 1em;
}

/* Pagniation styles */
.embossingDesigns.paginated /* Screen display for pagination */
{
	width: 1100;	/* 250px grid for images */
	border: solid 1px #999;
	margin: 10px auto;
	padding: 5px;
}
.embossingDesigns.paginated .designCategoryLabel,
.embossingDesigns.paginated .pageCount
{
	display: block;
	position: absolute;
	top: 0in;
	z-index: 10;
}	
.embossingDesigns.paginated .designCategoryLabel
{
	left: 0;
}
.embossingDesigns.paginated .pageCount
{
	right: 0;
}
/* END Pagniation styles */


.embossingDesigns .designList
{
	max-width: 100%;
	/* Flexbox */
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: stretch;
}
.embossingDesigns .designList .embossingDesign 
{
	display: inline-flex;
	flex-flow: column nowrap;
	justify-content: flex-end;
	align-items: center;
	position: relative;
	padding: 0.2em;
}
.embossingDesigns .designList  .label
{
	text-align: center;
	line-height: 1.2em;
	margin: 0;
	padding: 0;
}
.embossingDesigns .designList  .label.number
{
	font-size: 1.2em;
}
.embossingDesigns .designList  .label.options
{
	position: absolute;
	right: 3em;
	bottom: 2em;
	/*display: none; /* Hide on web, only show for print */
}
.embossingDesigns .designList  .label.name
{
}

/* Image container to constrain images to a set size */
.embossingDesigns .embossingDesign .imgContainer
{
	display: flex;
	flex-flow: column nowrap;
	justify-content: center;
}
.embossingDesigns .embossingDesign  img
{
	width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.embossingDesigns .embossingDesign.invalid  .options
{
	font-weight: bold;
	font-size: 1em;
}
.embossingDesigns .embossingDesign.invalid  .number
{
}
.embossingDesigns .embossingDesign.invalid  .number::before
{
	content: "{ ";
}
.embossingDesigns .embossingDesign.invalid  .number::after
{
	content: " }";
}

.embossingDesigns .designSet		/*Wrapper for one or more design images */
{
	display: inline-flex;
	flex-flow: column;
}
.embossingDesigns.showAlternates .designSet		/*Added class to designSet when their is a group of image alternates for a single design */
{
	margin: 3px;
	border: dashed 1px #333;
	border-radius: 5px;
}
.embossingDesigns.showAlternates .designSet.alternateSet		/*Added class to designSet when their is a group of image alternates for a single design */
{
}
.embossingDesigns .alternateSet .alternate
{
	/*display: none;*/
}

/* Set columm Widths */
.embossingDesigns .embossingDesign /* Default */
{
	width: 250px;
}
.embossingDesigns .designList.columns1 .embossingDesign 
{
	width: 1000px;
}
.embossingDesigns .designList.columns2 .embossingDesign 
{
	width: 500px;
}
.embossingDesigns .designList.columns3 .embossingDesign 
{
	width: 333px;
}
.embossingDesigns .designList.columns4 .embossingDesign 
{
	width: 250px;
}
.embossingDesigns .designList.columns5 .embossingDesign 
{
	width: 200px;
}
.embossingDesigns .designList.columns6 .embossingDesign 
{
	width: 166px;
}



.hideForScreen
{
	display: none;
}
/* Print Styles */
/* TEMP COMMENT OUT PRINT MEDIA DEFINITION SO WE CAN SEE IT ON SCREEN */
@media print { /* */
	
	@page {
		size:8.5in 11in; 
		margin: .25in;
	}

	/* Remove screen specific styling */
	html, body, #pageFrame {
		background-image: none;
		margin: 0px;
		padding: 0px;
		width: 100%;
	}
	#pageHeader, #pageFooter, .preface, .pageHeadline { /*, .designCategoryLabel {*/
		display: none;
	}
	
	#mainContent {
		padding: 0px;
	}

	/* Make print changes */
	.hideForScreen
	{
		display: inherit;
	}
	/* Make print changes */
	.hideForPrint
	{
		display: none;
	}
	.printHeader
	{
		text-align: left;
		position: fixed;
		top: 0px;
		margin: 0;
		padding: 0;
		font-size: 1rem;
	}
	.embossingDesigns.paginated
	{
		width: inherit;
		border: none;
		page-break-after: always;
		margin: 0;
		padding: 0;
		padding-top: 1em;
	}
	
	/* Moved to .pagnated tag of main page
	.embossingDesigns .designCategoryLabel,
	.embossingDesigns .pageCount
	{
		display: block;
		position: absolute;
		top: 0in;
		z-index: 10;
	}	
	.embossingDesigns .designCategoryLabel
	{
		left: 0;
	}
	.embossingDesigns .pageCount
	{
		right: 0;
	}
	*/
	
	.embossingDesigns .designList  .label.options
	{
		display: block;
	}
	.embossingDesigns .designList
	{
		margin-top: 1.2em;
	}
	.embossingDesigns .designList :nth-child(20n+21)
	{
		/*page-break-before: always;	/* Doesnt work with flex box :( switch embossingDesign to inline-block to make it work*/
	}
	.embossingDesigns .designList  .label
	{
		font-size: .7em;
	}
	.editDate
	{
		position: fixed;
		bottom: 0px;
		width: 100%;
	}
	

	

	/* Set columm Widths */
	.embossingDesigns .embossingDesign /* Default */
	{
		width: 2in;
	}
	.embossingDesigns .designList.columns1 .embossingDesign 
	{
		width: 8in;
	}
	.embossingDesigns .designList.columns2 .embossingDesign 
	{
		width: 4in;
	}
	.embossingDesigns .designList.columns3 .embossingDesign 
	{
		width: 2.6in;
	}
	.embossingDesigns .designList.columns4 .embossingDesign 
	{
		width: 1.9in;
	}
	.embossingDesigns .designList.columns5 .embossingDesign 
	{
		width: 1.6in;
	}
	.embossingDesigns .designList.columns6 .embossingDesign 
	{
		width: 1.3;
	}
	
	/* Set row heights */
	.embossingDesigns .embossingDesign /* Default */
	{ 
	}
	.embossingDesigns .designList.rows1 .embossingDesign .imgContainer
	{
		height: 10.5in;
	}
	.embossingDesigns .designList.rows2 .embossingDesign .imgContainer
	{
		height: 4.5in;
	}
	.embossingDesigns .designList.rows3 .embossingDesign .imgContainer
	{
		height: 2.9in;
	}
	.embossingDesigns .designList.rows4 .embossingDesign .imgContainer
	{
		height: 1.25in;
	}
	.embossingDesigns .designList.rows5 .embossingDesign .imgContainer
	{
		height: 1.6in;
	}
	.embossingDesigns .designList.rows6 .embossingDesign .imgContainer
	{
		height: 1.28in;
	}
	.embossingDesigns .designList.rows7 .embossingDesign .imgContainer
	{
		height: 1.05in;
	}
	.embossingDesigns .designList.rows8 .embossingDesign .imgContainer
	{
		height: 0.9in;
	}
/* TEMP COMMENT OUT END OF PRINT MEDIA DEFINITION*/
}
/* */



/* Temporary Boarders for testing layout * /
.embossingDesigns
{
	border: solid 1px #FF0004;
}
.embossingDesigns .designList .embossingDesign 
{
	border: solid 1px #FF00F4;
}
.embossingDesigns .embossingDesign .imgContainer
{
	border: solid 1px #00FF00;
}
/* */