/* Custom Egeligallery responsive media width controls - Feb 7 2026
/* 320px width - red bottom border color: iPhone 5e, Samsung S20 */
  @media (max-width: 320px) {
	div.float2 > img {
	background-color: red;
	}	
   	.float2 {
		border:none;
	}
	/* Tweaks to Arthur art media page bottom area */
	#main > center:nth-child(5) > div > div:nth-child(2) > a {
		display:none;
	}
	#main > center:nth-child(5) > div > h4 {
		margin-top:105px;
	}
  	/* Art media page preview area height */
	#previewPane {
		height:300px;
	}
}

/* 321-432px - white: Portrait iPhone XR, 12 to 14, 5, 5e, 6/7/8 & plus, Samsung S12:  */ 
  @media (min-width: 321px) AND (max-width: 432px) {
	body > center > div.float2 > img,
	#main > center > div.float2 > img {
		background-color: white;
		padding-bottom: 2px;
	}
  	.float2 {
		border:none;
	}
	/* Tweaks to Arthur art media page bottom area */
	#main > center:nth-child(5) > div > div:nth-child(2) > a {
		display:none;
	}
	#main > center:nth-child(5) > div > h4 {
		margin-top:105px;
	}
	/* Art media page preview area height */
	#previewPane {
		height:350px;
	}
 }

/* 433-480px - blue */ 
 @media (min-width: 433px) AND (max-width: 480px) {
	div.float2 > img {
		background-color: blue;
		padding-bottom: 2px;
	}
  	.float2 {
		border:none;
	}
	/* Tweaks to Arthur art media page bottom area */
	#main > center:nth-child(5) > div > div:nth-child(2) > a {
		display:none;
	}
	#main > center:nth-child(5) > div > h4 {
		margin-top:105px;
	}
	/* Art media page preview area height */
	#previewPane {
		height:380px;
	}
 }

/* 481-549px   - green: portrait phones up to 540 width Surface Duo. */ 
 @media (min-width: 481px) AND (max-width: 540px) {
	div.float2 > img {
		background-color: green;
		padding-bottom: 2px;
	}
 	.float2 {
		border:none;
	}
	/* Tweaks to Arthur art media page bottom area */
	#main > center:nth-child(5) > div > div:nth-child(2) > a {
		display:none;
	}
	#main > center:nth-child(5) > div > h4 {
		margin-top:105px;
	}
	/* Art media page preview area height */
	#previewPane {
		height:424px;
	}
}

	/* @media (width >=  31.25em) { } (This is 500px and a size used in Emby code) */

/* 541-640px   - brown: portrait e-readers (Nook/Kindle), 600 or @ 640 wide. */ 
 @media (min-width: 541px) AND (max-width: 640px) {
	div.float2 > img {
		background-color: #c7865a;
		padding-bottom: 2px;
	}
 	.float2 {
		border:none;
	}
	/* Tweaks to Arthur art media page bottom area */
	#main > center:nth-child(5) > div > h4 {
		margin-top:105px;
	}
	#main > center:nth-child(5) > div > div:nth-child(2) > a {
		display:none;
	}
}

	/* @media (width >=  36em) { } (This is 576px and used in Emby code) */
	/* @media (width >=  40em) { } (This is 640px and used in Emby code) */

/* 641-799px   - cyan: portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
 @media (min-width: 641px) AND (max-width: 799px) {
	div.float2 > img {
		background-color: #00ccff; /* Cyan */
		padding-bottom: 2px;
	}
	.float2 {
		border:none;
	}
	#main > center:nth-child(5) > div > h4 {
		margin-top:105px;
	}
	#main > center:nth-child(5) > div > div:nth-child(2) > a {
		display:none;
	}
 }

	/* @media (width >=  45em) { } (This is 720px and used in Emby code) */
	/* @media (width >=  50em) { } (This is 800px and used in Emby code) */
	/* @media (width >=  55em) { } (This is 880px and used in Emby code) */

/* 800-1024px  - yellow: In betwwen width, just when the top header background image starts to be cut off at 840px. */ 
 @media (min-width: 800px) AND (max-width: 840px) {
	div.float2 > img {
		background-color: yellow;
		padding-bottom: 2px;
	}
	.float2 {
		border: none;
	}
 } 

/* 800-1024px  - Green: TV 1080P monitor, tablets, landscape iPad, lo-res laptops ands desktops */ 
 @media (min-width: 841px) AND (max-width: 1024px) {
	div.float2 > img {
		background-color: #009999;
		padding-bottom: 2px;
	}
	.float2 {
		border: none;
	}
	/* ul width adjust for larger screens */
	ul {
		max-width:983px;
	}
 } 

	/* @media (width >=  62.5em) { } (This is 1000px and used in Emby code) */

/* 1025-1280px - violet: big landscape tablets, laptops, and desktops */ 
 @media (min-width: 1025px) AND (max-width: 1280px) {
	div.float2 > img {
		background-color: #880088; /* Dark Violet */
		padding-bottom: 2px;
	}
	/* ul width adjust for larger screens */
	ul {
		max-width:1228px;
	}
 } 

	/* @media (width >=  66em) { } (This is 1056px and used in Emby code) */
	/* @media (width >=  70em) { } (This is 1120px and used in Emby code) */

/* >1280       - Blue Sky: laptops and desktops */
 @media (min-width: 1280px) AND (max-width: 1440px) {
	div.float2 > img {
		background-color: #6600ff; /* blue sky */
		padding-bottom: 2px;
	}
 	/* ul width adjust for larger screens */
	ul {
		max-width:1382px;
	}
} 

/* >1440       - Silver: hi-res laptops and desktops */
 @media (min-width: 1441px) {
	div.float2 > img {
		background-color: #bbbbbb; /* silver */
		padding-bottom: 2px;
	}
 	/* ul width adjust for larger screens */
	ul {
		max-width:1400px;
	}
}