/* Bio Summaries page & Individual Bio page */

/* Job Title or Court Place */
.bioPosition {
	font-size: 1.2em;
	padding-top: 6px;
	margin: 0 0 1em 0;
	font-weight: 600;
	text-align: left;
}
/* Person/Court Location (added for AJR Judge bio pages) */
.bioLocation {
    font-size: 1.4em;
    line-height: 1.4em;
    color: #9d0000;
    margin: .5em 0 0 0;
	font-weight: 600;
    text-align: left;
}

/* Individual Bio page */

.bio .bioImage  {
	max-width: 30%;
	min-width: 30%;
	/* min-width: expression("33%");	for IE, which can't be bothered to comply with min-width */
}

/* End: Individual Bio page */


/* Bio Summaries page */

.bioSummaries h2 {
	margin-top: 0;
}
.bioSummaries h2>a {
	color: #9d0000;
}
.bioSummaries h2>a:hover, .bioSummaries h2>a:focus {
	text-decoration: none;
}

.bioSummary {
	padding-bottom: 1em;	/* padding between each summary */
}
.bioSummary:last-of-type {
	padding-bottom: 0;		/* don't bottom pad last summary row */
}
.bioSummary .bioImageSpan {
	/*	When screen width is reduced to the point where the text starts wrapping,
		the span2 starts bo occupy 100% width, pushing the heading in the succeeding span down.
		Override the row-fluid min-height of 30px, so the heading doesn't get pushed down.
	*/
	min-height: 0;
}
.bioImage {
	float: left;	/* wrap texxt around image on small screens */
	/* NOTE: The 36px right margin only affects narrow screen width, when text begins wrapping. */
	/* Reducing it will not fix the gap between photo & text on wide screen; that's due to the offset1. */
	margin: 6px 36px 12px 0;
}
.bioSummary .bioImage {
	/* one span is 100px; if image is any wider, it will cut into text at screen width around approx. 780px */
	max-width: 100px;
}
/* Above 1024px, the offset1 gap gets uncomfortably large, so encroach the photo into it. (But don't get too big; these are only thumbnails.) */
@media screen and (min-width: 1024px) {
	.bioSummary .bioImage {
		max-width: 130px;
		min-width: 130px;
	}
}
/* Between 980px and 1023px, a 120px photo takes up enough of the offset1 gap to be aesthetically pleasing, without encroaching into the text. */
@media screen and (max-width: 1023px) {
	.bioSummary .bioImage {
		max-width: 100px;
		min-width: 100px;
	}
}
@media screen and (min-width: 325px) and (max-width: 649px) {
	.bio .bioImage  {
		max-width: 50%;
		min-width: 50%;
	}
}
/*	350px is about the width below which longer names starts splitting, part beside and part below the photo.
	We can control much of this by forcing the photo to 100% wide at that point, so all text flows below.
	Or, if that's too big, adjust the heading size. But set the image width to 100% at 325px, to avoid getting too tiny.
*/
@media screen and (max-width: 324px) {
	.bioSummary .bioImage, .bio .bioImage {
		max-width: 100% !important;
		min-width: 100% !important;
	}
}
@media screen and (max-width: 350px) {
	.bioSummary h2, .bio h2 {
		font-size: 1.2em !important;
	}
	.bioPosition {
		font-size: 1em !important;
	}
}

/* (only applicable when using a table for layout) */
table.bioSummaries {
	table-layout: fixed;
	width: 100%;				
}

/* Fix IE 11 bug where images don't scale to cell size (only applicable when using a table for layout) */
.ie11 img.bioSummaryPhoto {
	max-width: 15%;
}


/* End: Bio Summaries page */

@media print {
	.bioSummary .bioImage {
		width: 20%;
		min-width: 20%;
		max-width: 20%;
	}
	.bio .bioImage {
		width: 30%;
		min-width: 30%;
		max-width: 30%;
	}
}

/* End: Bio Summaries page & Individual Bio page */


/* EDITOR PROPERTIES - PLEASE DON'T DELETE THIS LINE TO AVOID DUPLICATE PROPERTIES */