/******************/
/* general layout */
/******************/
.canvas-wrapper{
	overflow: hidden;
}

.canvas-row{
	display: flex;
	flex-wrap: wrap;
	min-width: 100%;	
}	
.canvas-col{
	flex-grow: 1;
	flex-basis: 0;	
}

.canvas-label{
	max-width: 160px;
}				
.canvas-value{
	flex: 1;
}

/* this is to prevent flex container to strip spaces in betweer words (text and a tag (or span) for examples) */
.canvas-row:not(:has(.canvas-row)):not(:has(.canvas-col)){ 
	display:block;
	width:100%;
}

.canvas-row img,
.canvas-wrapper img{
	display: block;
} 

/* assign canvas-grid class to display children elems as grid */
.canvas-grid{
  --cols-large: 4 !important; /* large resolutions default cols # */
  --cols-small: 2 !important; /* small resolutions default cols # */
	display: flex;
	flex-wrap: wrap;
}
.canvas-grid > .canvas-col{
	flex-grow: 0 !important; /* if there is space available, this prevents last element from growing */
	flex-basis: calc( 100% / var(--cols-large) ); /* large resolutions initial size */
}
@media screen and (max-width: 920px){
.canvas-grid > .canvas-col{
	flex-basis: calc( 100% / var(--cols-small) ); /* small resolutions initial size */
}
}

/* 
only add this class to the image nested in an a tag and works like a charm
control the image width with the width attr
width: 10px !important; 
control the image height with this attribute
height:100px 
*/ 
.the-img{ 
	/* prevent image extra space at the bototm */
	vertical-align: middle; 
	display: block;
	
	/* fill parent container */
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1/1 !important; /* defining the aspect ratio of the image */
  	object-fit: cover; /* cover, contain, fill, scale-down, none */
}

/* preventing long words from resizing the parent container */
.canvas-wrapper *{
	overflow: hidden;
	overflow-wrap: break-word !important; /* Enable word wrapping */
}

.halign{
	justify-content: center;
}
.valign,
.vertical-align{ /* remove after some time */
	display: flex;
  	align-items: center;
}

.red-face{ /* remove after some time */
	color: red !important;
}
/******************/
/* [end]general layout */
/******************/












/* ************* */
/* User Profile */
/* ************* */
.canvas-wrapper.un-profile{
	border: 0px solid red	
}
.canvas-wrapper.un-profile .canvas-col{
	
}
.canvas-wrapper.un-profile .canvas-col.profile-info > .canvas-row{
	padding: 5px 10px;
}
.canvas-wrapper.un-profile .canvas-col.profile-info > .canvas-row:nth-child(2n+1){
	background: #f8f8f8
}
/* ************* */
/* User Profile */
/* ************* */









/* ******* */
/* Archive */
/* ******* */
.up-archive{
	border:0px solid red;
	width:980px;
	max-width:100%;
	margin:30px auto;
	padding:0 20px;
	box-sizing:border-box;
	overflow:hidden !important;
}

.up-archive header.page-header{
}
.up-archive header.page-header h1.page-title{
}
.up-archive header.page-header div.archive-description{
}

.up-archive article{
	overflow: hidden !important
}
.up-archive article:not(:last-child){
	margin-bottom:20px;
}

.up-archive article div.up-image{
	overflow:hidden;
}
.up-archive article div.up-image img{
	/* prevent image extra space at the bototm */
	vertical-align: middle; 
	display: block;
	
	/* fill parent container */
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 1/1;  /* defining the aspect ratio of the image */
  	object-fit: cover; /* cover, contain, fill, scale-down, none */
}
.up-archive article .up-info{
}

.up-archive article header.entry-title{
}
.up-archive article div.entry-meta{
}
.up-archive article div.entry-meta div:not(:last-child){
	margin-right:20px;
}
.up-archive article div.entry-meta .entry-meta-bit{
	display: inline-block;
}
.up-archive article div.entry-excerpt{
}


/* entry left thumb style */
body.up-entry-left-thumb .up-image{
	width: 20%;
	height: 300px;
	float: left;
	margin-right: 20px;
}
body.up-entry-left-thumb .up-info{
	float: none;
	overflow: hidden;
}
@media screen and (max-width: 760px){
body.up-entry-left-thumb .up-image{
	width: 100%;
	margin-right: 0px;
}
body.up-entry-left-thumb .up-info{
	float: left;
}
}


/* entry large image style */
body.up-entry-large-image .up-image{
	width: 100%;
	height: 600px;
}
body.up-entry-large-image .up-info{
	width: 100%;
}
/* ******* */
/* [End] Archive */
/* ******* */