/**!
 * Samraworld ELC 2023
 * @file viewObject.css
 * @desc  General css setting for view any object page.
 * @version v4 2023-02-19 Initial version.
 * @version v4 2023-07-09 Added a figure definition for image captions.
 * @version v4 2023-11-23 Added gallery for images such as on the list themes page.
 * @author Charles A. Samra <charles@samraworld.net>
 * @see {@link students.samraworld.net }
 */
/************************************************************************************************************************************/	

.SWObjectPanel {
	width: 100%;
	float: left;
	margin: 5px auto auto auto;
	background-color: snow;
	padding-left: 120px;
	padding-right: 120px;
	padding: 10px;
	min-height: calc(77vh - 30px);
}

A.hyperlink1:link    { color: black; text-decoration: none;}    /* unvisited links */
A.hyperlink1:visited { color: black; text-decoration: none; }   /* visited links   */
A.hyperlink1:hover   { color: #eb7c7c; text-decoration: underline; } /* user hovers     */
A.hyperlink1:active  { color: black; text-decoration: none; }   /* active links    */

A.hyperlink2:link    { color: black; text-decoration: underline;}    /* unvisited links */
A.hyperlink2:visited { color: black; text-decoration: underline; }   /* visited links   */
A.hyperlink2:hover   { color: #eb7c7c; } /* user hovers     */
A.hyperlink2:active  { color: black; text-decoration: underline; }   /* active links    */

.SWMain_img {
	width: 200px;
	height: auto;
	margin-right: 8px; 
}

.SWrightpanel_img {
	width: 40%;
	height: auto;
	margin-right: 8px; 
	margin-bottom: 0;
}

.SWrightpanel_img_mini {
	width: 40%;
	height: auto;
}

audio { 
  width: 100%; 
/*
  box-shadow: 5px 5px 20px rgba(0,0, 0, 0.4);
  border-radius: 90px;
  transform: scale(1.05);
*/
  background-color: #0e6630;
  border: dotted #0e6630;
  max-width: 500px;
}

/* styles for right panel image + text side by side */
.inner{margin:auto;}

.lrow {
	display: flex;
	justify-content:space-around;
	padding:5px 0 ;
	max-width:1280px;
	margin:5px auto;
}
.w60 {
	flex: 1 0 60%;
	background:#f9f9f9;
  padding:10px 20px;
}
.w30{background:#000;flex:0 0 30%;}
.object-fit{
	overflow:hidden;
	position:relative;
}
.object-fit img{
	position: absolute;
	top:50%;
	left:50%;
	height:auto;
	width:auto;
	min-width:100%;
	min-height:100%;
	transform:translate(-50%, -50%);
}


div.gallery {
  margin: 5px;
  border: 1px solid #ccc;
  height: auto;

/*
  width: 280px;
  height: 350px;
*/
  padding: 10px;
  background-color: snow;
  }

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

/* CSS code */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Adjust the height as needed */
}
img {
  max-width: 100%;
  max-height: 100%;
}

/*
figure {
  display: flex;
  flex-flow: column;
  width: 40vw;
}

img {  
  width: 40vw;
}
  
figcaption {
  align-self: flex-start;
  font-size: 80%;
  width: 40vw;
  border: 2px solid rgb(169, 13, 94);
}

*/

figure.image {
  display: inline-block;
  float: left;
  border: 1px solid gray;
  margin: 0 5px 5px 0; 
  background: #f5f2f0;
}

figure.align-left {
  float: left;
}

figure.align-right {
  float: right;
}

figure.image img {
  margin: 8px 8px 0 8px;
}

figure.image figcaption {
/*  margin: 8px 8px 8px 8px;*/
  text-align: center;
    font-size: 80%;
    background-color: #f5f2f0
}


figure.imagelarge {
  display: inline-block;
  float: none;
  border: 1px solid gray;
  background: #f5f2f0;
}

figure.imagelarge img {
}

figure.imagelarge figcaption {
/*  margin: 8px 8px 8px 8px;*/
  text-align: center;
      font-size: 80%;
    background-color: #f5f2f0
}



@supports (object-fit: cover) {
  .object-fit img  {
    position: absolute;
    left:0;
    top:0;
    height: 100%;
    width: 100%;
    transform: none;
    object-fit: cover;
  }
}

@media screen and (max-width: 550px) {

.SWMain_img {
	width: 100%;
	height: auto;
}

.SWrightpanel_img {
	width: 100%;
	height: auto;
	padding-bottom: 5px;
}

h4 {
	font-size: medium !important;
	font-weight: bold;
}

}