@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 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] */

.figure { 
	display: inline-block;
	vertical-align: top;
	/* margin: .4em;  */
	margin: 4px;  
	width: 23%; /* so 4 figures can display */
}
.figure p {
	text-align: left;
	margin-top: .2em;
	font-weight: bold;
	font-family: Tahoma, Verdana, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", "sans-serif";  
	font-size: 80%;
}
.photo img {
	border: 1px solid black;
	background-color: white;
	padding: 1%;
	max-width: 98%; 
}

.nameBackground {
	background-color: #efdcc2; 
	display: inline-block;
	padding: .4em;
}


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

/* ======================================================================== MEDIA QUERY MAX-WIDTH SMALL */
@media only screen and (max-width: 800px){
	.figure {
		width: 30%; /* so 3 figures can display  */
		margin: 1px;  
	}
	.figure p {
		font-size: 68%;
	}
}
	
/* ======================================================================== MEDIA QUERY MIN-WIDTH MIDDLE-SIZE & LARGER */
@media only screen and (min-width: 801px){
	.figure {
		margin-right: 6px;  
	}

}