/* .clr { clear: both; padding: 0; margin: 0; width: 100%; font-size: 0px; line-height: 0px; } */

div.image
{
	margin: 10px;
	border: 1px solid #ccc;
	/* box-shadow: 5px 10px; */
	float: left;
	width: 290px;
	border-radius: 10px 10px 10px 10px;

	position: relative;		/* used by overlay-text */
}

div.imageoid
{
	width: auto;
	padding: 0;
	border: 1px solid #bfbfbf9a;
	background-color: white;
	box-shadow: 5px 5px 5px #c2c2c2;
}

div.removedoid
{
	width: auto;
	padding: 0;
	border: 1px solid #bfbfbf9a;
	background-color: #E0E0E0;
	box-shadow: 5px 5px 5px #c2c2c2;
}

div.image:hover
{
	border: 1px solid #777;
}
  
div.image img
{
	width: 290px;
	height: 190px;
	border-radius: 10px 10px 10px 10px;
}
  
.overlay-imageid
{
	position: absolute;
	bottom: 7px; 
	left: 10px; 
	background-color: none; 
	color: tomato; 
	font-size: 1rem; 
	text-align: left;
}

div.youcube
{
	margin: 10px;
	border: 1px solid #ccc;
	/* box-shadow: 5px 10px; */
	float: left;
	width: 290px;
	border-radius: 10px 10px 5px 5px;

	position: relative;		/* used by overlay-text */
}

div.youcube:hover
{
	border: 1px solid #777;
}
  
div.youcube iframe
{
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
}
  
div.youcube img
{
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
}
  
div.imagecube
{
	margin: 10px;
	border: 1px solid #ccc;
	/* box-shadow: 5px 10px; */
	float: left;
	width: 303px;
	border-radius: 10px 10px 5px 5px;

	position: relative;		/* used by overlay-text */
}

div.imagecube img
{
	width: 100%;
	height: auto;
	border-radius: 10px 10px 0px 0px;
}
  
div.polaroid
{
	width: auto;
	padding: 0;
	border: 1px solid #bfbfbf9a;
	background-color: white;
	box-shadow: 5px 7px 5px #c2c2c2;
}

div.detail
{
	padding-left: 5px;
	padding-bottom: 5px;
	/* margin-top: -10px; */
	text-align: left;
	font-size: 0.8em;
	/*font-size: 1.3cqw;*/ /* varies with rezise browser */
	max-width: 290px;
}

@media screen and (max-width: 768px)
{
	div.image { width: 96%; height: auto; aspect-ratio: 16/9; }
	div.image img { width: 100%; height: 100%; }
	div.youcube { width: 96%; height: auto; aspect-ratio: 16/9; }
	div.youcube iframe { width: 100%; height: 88%; }
	div.youcube img { width: 100%; height: 88%; }
	div.imagecube { width: 96%; height: auto; aspect-ratio: 16/9; }
	div.imagecube img { width: 100%; height: 88%; }
	div.polaroid { height: 100%; }
	div.detail { max-width: 100%; padding-left: 5px; padding-bottom: 5px; }
	div.feature { max-width: 100%; padding-left: 5px; padding-bottom: 10px; font-size: 80%; }
	nav.mytitle { max-width: 100%; padding-left: 5px; padding-bottom: 10px; font-size: 80%; }
}

.overlay-itemid
{
	position: absolute;
	bottom: 30%; 
	left: 10px; 
	background-color: none; 
	color: tomato; 
	font-size: 1rem; 
	text-align: left;
}

/* The container that holds the overlay must be positioned relatively
   (or any non‑static value) so the absolute positioning works correctly. */
.overlay-search-type
{
	position: absolute;
	bottom: 30%; 
	right: 10px; 
	background-color: transparent; 
	color: white; 
	font-size: 1rem; 
	text-align: right;
}

choice
{
	bottom: 0;
	width: 100%;
	text-align:center;
	margin-top: 20px;
	margin-bottom: 10px;
	/* to place the buttons on the bottom of the page enable these */
	/* position: fixed; */
	/* margin:0 auto; */
}

.spread
{
	padding: 15px 0 0 0;
}

.bicad-creator
{
	color: darkorange;
}

.bicad-title
{
	color: olivedrab;
}

.bicad-playlist
{
	width:170px;
}

.bicad-highlight
{
	background-color: lightblue;
}

.bicad-lightgrey
{
	background-color: #E0E0E0;
}

.bicad-hide
{
  /* display: none; */
  visibility: hidden;
}

.bicad-icon
{
	width: 25px; /* Set the desired width for the icon */
	height: 15px; /* Set the desired height for the icon */
	border-radius: 3px; /* Apply rounded corners with a radius of 8px */
	object-fit: cover; /* Ensures the image covers the entire area, cropping if necessary */
}