@charset "UTF-8";
/* CSS Document responsive_gallerycompare.css adapted from responsive_plant.css */
/* used on gallery_compare.shtml & gallery_compari.shtml, also on gallery_photographer.shtml & gallery_photographer_alpha.shtml */

/* CSS Document 16 Mar 2025 responsive_bookdesign.css adapted from responsive_gallerycompare.css */

/* CSS Missing Manual p210 suggests this technique (using inline-block and vertical-align) (NOT FLOAT!) to display A GALLERY OF VARYING HEIGHTS, but it won't work on IE 6-7 or Firefox 2 or Safari 2 [#gallery] */

#gallery {

}
#gallery p {
	font-family: "Times New Roman", Times, serif;
}
.normal {
	font-weight: normal;    	
}

.bookTalk {
	font-size: 95%;
	margin-top: 3.2em;
	margin-bottom: .4em;
	margin-right: 30%;
	margin-left: 330px;
}

.row {
	background: url(/Graphics/brownish_E3D1B0_5x100.gif) left top repeat-x;
}

/*===============GALLERY OF BOOK SPREADS=======*/
.figure { 
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 23%; /* so 4 figures can display */
}
.figureWide { 
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 31%; /* so 3 figures can display */
}
.figureSmall { 
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 16%; /* so 5 figures can display */
}

.photo img {
	border: 1px solid black;
	background-color: white;
	padding: 1%;
	max-width: 98%; 
}
.photoNoBorder img {
	max-width: 66%;
	border: 0px solid black;
	background-color: white;
	padding: 4px;
}
.photoNoBorderSmall img {
	max-width: 50%;
	border: 0px solid black;
	background-color: white;
	padding: 0px;
}
.photoNoBorderLarge img {
	max-width: 72%;
	border: 0px solid black;
	background-color: white;
	padding: 4px;
}

.figureType {
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 14%; /* less than .figure */   
}
.figureType p {
	text-align: left;
	font-size: 80%;   
	font-weight: normal;
}
/*===============END GALLERY OF BOOK SPREADS=======*/

/*===============GALLERY OF BOOK COVERS=======*/
#galleryCovers {
  
}
#galleryCovers .thumbnail { /* .thumbnail is equivalent to .figure */
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 16%; /* so several covers can display */
}
#galleryCovers .photoCover img { /* .photoCover is equivalent to .photo */
	border: 1px solid black;
	background-color: white;
	padding: 1%;
	max-width: 98%;
}
#galleryCovers .thumbnailSquare {
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 20%;
}
#galleryCovers .thumbnailWide {
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 21%;
}
#galleryCovers .thumbnail_55x85 { 
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 15%; 
}
#galleryCovers .thumbnail_6x9 { 
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 16%; 
}

#galleryCovers .thumbnailMe {
	display: inline-block;
	vertical-align: top;
	margin: 4px;  
	width: 10%;
}
/*===============END GALLERY OF BOOK COVERS=======*/


/* ======================================================================== MEDIA QUERIES */
/* ======================================================================== MEDIA QUERY MAX-WIDTH SMALLEST-TINY */
@media only screen and (max-width: 414px){
	#gallery .figure, #gallery .figureWide {
		width: 48%; /*  so 2 figures will display on smallest screen (this needed additional specificity to get it to work) */
		margin: 1px;  
	} 
	#gallery .figureSmall { /* 2 June 2025 */
		margin: 1px;  
		width: 23%; /* so 4 figures can display */
	}
}

/* ======================================================================== MEDIA QUERY MAX-WIDTH SMALL */
@media only screen and (max-width: 800px){
	#gallery .figure {
		width: 30%; /* so 3 figures can display  */
		margin: 1px;  
	}
	#gallery .figureWide {
		width: 48%; /*  so 2 figures will display on smallest screen (this needed additional specificity to get it to work) */
		margin: 1px;  
	} 
	#gallery .figureSmall { /* 2 June 2025 */
		margin: 1px;  
		width: 23%; /* so 4 figures can display */
	}
	
	#gallery .figureType { 
		width: 98%; /* full width */   
	}
	.bookTalk {
		width: 98%; /* full width */ 
		font-size: 95%;
		margin: 4px; 
	}


	
	
}
	
/* ======================================================================== MEDIA QUERY MIN-WIDTH MIDDLE-SIZE & LARGER */
@media only screen and (min-width: 801px){
	#gallery .figure {
		margin-right: 6px;  
	}

}