/* for the main staff page */

#staffText {
	width: 36%;
	margin-bottom:20px;
	float:left;
}

#sPics > div {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
	padding: 0 0.8rem;
}
#sPics .fam1 {
	width: 225px;
	margin-left: 0.5rem;
}

@supports(display: grid) {
#sPics > div {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(162px, 1fr));
	grid-column-gap: 0.5rem;
}
#sPics .fam1 {
	width: auto;
	margin-left: 0;
}
}

#sPics * {
	line-height:110%;
}

#sPics P {
	text-align:center;
	margin:2px auto 8pt auto;
}
#sPics A {
	font-size:0.9em;
	text-decoration:none;
 	font-weight:normal;
}

#sPics A:hover { color:#696; }

#sPics IMG {
	width:100%;
	border:2px outset #bec4be;
	border-radius:4px;
	box-shadow: 2px 2px 2px #a8ada8;
	margin-bottom:4px;
	transition: all 0.3s ease;
}

#sPics IMG:hover {
	border:2px inset #bec4be;
	opacity:0.8;
	box-shadow: 2px 2px 2px #d2d8d2;
}

.mainDiv {
	margin-right: 0;
}
@media screen and (max-width: 610px) {
#staffText {
	width:auto;
	float:none;
	margin-right: 0.8rem;
}
#sPics > div {
	padding: 0 1rem 0 0;
}
}

/* below here for individual family pages */

#spcont {
	float:right;
	text-align:center;
	border-left:2px solid #909890;
	border-bottom:2px solid #909890;
	margin-left:1em;margin-bottom:1em;
	background-color:white;
	border-bottom-left-radius:6px;
	box-shadow:0px 2px 2px #a8ada8;
	position:relative;
	z-index:1;
	width:33%;
}

#spcont IMG { margin:0;line-height:0 }
#spcont P {
	text-align:left;
	font-size:0.86em;
	color: #38618c;
	margin: 1pt 0.6em 0.85em 0.8em;
}
#spcont P .ema {
	font-size: 10pt;font-size: 0.7rem;
}

#spcont .opl {
	margin-bottom:0.3em;
	border-top:1px solid #909890;
}
#spcont .opl p {
	margin: 1pt 0.6em 0 0.8em;
}
#spcont .opl p:first-child {
	font-weight:bold;
}
#spcont .opl p:not(:first-child) {
	cursor: pointer;
}
.opl p.cur {
	font-weight:bold;
}

/* single family fade-in fade-out */
.spDiv {
	opacity: 0.001;
	transition: opacity 0.15s ease-in-out;
}
.spDiv.animShow {
	opacity: 1;
}

.sp1, .sp1 * { font-family: Times, serif }
.sp1 {
	margin: 5px 10px 17px 5px;
}
.spDiv {
	font-size:14pt;font-size:1.055rem;
	margin-right:12pt;
}
.spDiv sup {
	font-size: 60%;
}
.spDiv {
	font-family: 'Sitka Text', Georgia, Times, "Times New Roman", serif;
}
.spDiv em {
	font-style: italic;
}
.spDiv P {
	margin: 0.5em 0 1em 0;
}

.spDiv .cursive {
	font-family: Gabriola, 'Segoe Script', 'Lucida Handwriting Italic',
		"Brush Script MT", cursive;
	font-size: 1.5rem;
}

.spDiv LI {
	line-height:1.5;
	margin-bottom: 0.4em;
}

.spDiv h3 {
	font-weight:bold;
	font-family: Optima, "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
	font-size:125%;
	margin: 1.5em 0 0 0;
}

/* this is a bullet item image meant to go
 * at the beginning of a text paragraph
 */
.spDiv IMG.bl {
	height: 1em;
}

/* normally scale top image to 60% but
* when the screen gets smaller,
* up it to 100% width.
*/
.spDiv .top-body-image-p {
	margin: 0.5em auto;
	text-align: center;
}

.spDiv .top-body-image-p img {
	max-width:60%;
}

.spDiv UL {
	padding: 0 2.5%;
}


 /* wpContent is the wordpress content for the staff families that use Wordpress
  * for their blogs.
  */
#wpContent {
	margin: 0 0.64% 0 2.5%;
	display: inline-block;
	padding: 0 0.5rem;
	max-width: 57%;
	transition: all 0.4s ease;
	-webkit-transition: all 0.4s ease;
}
#wpContent.dn {
	display: none;
}
#wpContent:hover {
	background-color: #eff2ef;
}

.top-sdiv-container {
	/* hold pics etc in the top of the article */
	width: 65%;
}

@media screen and (max-width: 550px){
/*--- narrow window CSS here ---*/
#spcont {
	border-left:none;
	border-bottom-left-radius:0;
	float:none;
	margin-left:0;
	box-shadow:none;
	width:97%;
}
#spcont P { width:95%;margin-left:1% }
#spcont P .ema {
	font-size: 100%;
}

.top-sdiv-container {
	width: 99%;
}

#wpContent {
	max-width: none;
	margin:0 0 0 0;
}

.spDiv {
	margin-right:5px;
}

.spDiv .top-body-image-p img {
	max-width:97%;
}

.spDiv UL {
	padding: 0 2% 0 1.2em;
}

}