﻿#filterList {
	width: 80%;
	margin: 0 10% 1.5em 10%;
	padding: .75em;
	color: #555;
	font-size: 150%;
	line-height: 1;
	font-family: Arial, Helvetica, sans-serif;
	background: #f1fec2 url('../images/search-icon-gray-96px.png') no-repeat -30px -5px;
}

#searchTerm {
	width: 80%;
	height: 2em;
	margin: 0 0 0 10%;
	padding: .5em;
	font-size: 100%;
	line-height: 1;
	color: #666;
	border-spacing: 0px;
	vertical-align: middle;
}

.staffBioCards {
	list-style: none;
	margin: 0;
}

.staffBioCards li {
	margin: 0 0 2em 0;
	word-break: break-word;
	border: 1px solid #ccc;
}

.staffBioCards li img {
	display: block;
	width: 100%;
}

.staffBioCards li .imageContainer,
.staffBioCards li .textContainer {
	display: inline-block;
	vertical-align: top;
}

.staffBioCards li .imageContainer {
	width: 30%;
	margin-right: 5%;
}

.staffBioCards li .textContainer {
	width: 65%;
	padding-top: 1em;
}

.staffBioCards li a h5,
.staffBioCards li a p,
.staffBioCards li a {
	color: #1A5B7D;
}

.staffBioCards li a:hover h5,
.staffBioCards li a:hover p,
.staffBioCards li a:hover {
	text-decoration: none;
}

.staffBioCards li h5 {
	margin-bottom: .5em;
	font-size: 120%;
	font-weight: normal;
}


.staffBioCards li p {
	margin-bottom: .35em;
	font-size: 90%;
	line-height: 110%;
}



/*	---------------------------------------------------------------------------------------------
		CARD TYPE 2: REPORTING RELATIONSHIPS (ON INDIVIDUAL BIO PAGE)
		(CARD TYPE 4 USES THIS AS THE BASE OF RIT'S STYLES ALSO)
	---------------------------------------------------------------------------------------------	*/
	
	
	.staffBioCards.cardType2 li,
	.staffBioCards.cardType4 li {
		margin-bottom: 1.5em;
		padding: .5em .75em;
		font-size: 100%;
		background: #f2f2f2;
		border: 1px solid #c0c0c0;
	}
	
	.staffBioCards.cardType2 li .imageContainer,
	.staffBioCards.cardType2 li .textContainer,
	.staffBioCards.cardType4 li .imageContainer,
	.staffBioCards.cardType4 li .textContainer {
		display: inline-block;
		vertical-align: middle;
	}
	
	.staffBioCards.cardType2 li .imageContainer,
	.staffBioCards.cardType4 li .imageContainer {
		width: 22%;
		margin: 0 3% 0 0;
	}
	
	.staffBioCards.cardType2 li .textContainer,
	.staffBioCards.cardType4 li .textContainer {
		width: 75%;
		padding-top: 0;
		font-size: 85%;
	}
	
	.cardType2 li img,
	.cardType4 li img {
      display: block;
      width: 100%;
      border-radius: 50%;
      border: 1px solid #c0c0c0;
      overflow: hidden;
	}
	
	.staffBioCards.cardType2 li h5,
	.staffBioCards.cardType4 li h5 {
		margin-bottom: .25em;
	}	
	
	.staffBioCards.cardType2 li p,
	.staffBioCards.cardType4 li p {
		margin-bottom: .1em;
	}
	
	
/*	---------------------------------------------------------------------------------------------
		CARD TYPE 3, 5 & 6: VERTICAL CARDS (SIMILAR TO TYPE 1)
	---------------------------------------------------------------------------------------------	*/
	
	.staffBioCards.cardType3 li,
	.staffBioCards.cardType5 li,
	.staffBioCards.cardType6 li {
		vertical-align: top;
	}

	.staffBioCards.cardType3 li .imageContainer,
	.staffBioCards.cardType5 li .imageContainer,
	.staffBioCards.cardType6 li .imageContainer {
		display:block;
		width: 100%;
		margin-right: 0;
	}

	.staffBioCards.cardType3 li .textContainer,
	.staffBioCards.cardType5 li .textContainer,
	.staffBioCards.cardType6 li .textContainer {
		display:block;
		width: 100%;
		padding: .5em;
	}


/*	---------------------------------------------------------------------------------------------
		CARD TYPE 4: CIRCLE IMAGE, NO BACKGROUND OR BORDER (USES CARD TYPE 2 AS BASE)
	---------------------------------------------------------------------------------------------	*/

	.staffBioCards.cardType4 li {
		padding: 0;
		font-size: 120%;
		background: transparent;
		border-width: 0px;
	}
	
	
	
/*	---------------------------------------------------------------------------------------------
		CARD TYPE 5: VERTICAL IMAGE, TEXT INFO OVERLAY AT BOTTOM OF IMAGE (USES CARD TYPE 3 AS BASE)
	---------------------------------------------------------------------------------------------	*/
	
	.staffBioCards.cardType5 li {
		position: relative;
	}

	.staffBioCards.cardType5 li .textContainer {
		position: absolute;
		bottom: 0px;       
		right: 0px;
		background: rgba(0,0,0,0.6);
		color: #fff;
		text-align: center;
	}	

	.staffBioCards.cardType5 li a h5 {
		font-size: 135%;
		color: #00ADDC;
	}

	.staffBioCards.cardType5 li a p,
	.staffBioCards.cardType5 li a {
		color: #fff;
	}

/*	---------------------------------------------------------------------------------------------
		CARD TYPE 6 (Circular Images in Vertical Cards)
	---------------------------------------------------------------------------------------------	*/


	.staffBioCards.cardType6 li {
		text-align: center;
	}

	.staffBioCards.cardType6 li .imageContainer {
		width: 50%;
		margin: 1em auto .5em auto;
	}

	.staffBioCards.cardType6 li .imageContainer img {
		border-radius: 50%;
		border: 1px solid #c0c0c0;

	}

	

/*	---------------------------------------------------------------------------------------------
		DESKTOP & TABLET STYLES
	---------------------------------------------------------------------------------------------	*/

@media only screen and (min-width: 768px) {

	.staffBioCards.cols-2 li,
	.staffBioCards.cols-3 li,
	.staffBioCards.cols-4 li,
	.staffBioCards.cols-5 li,
	.staffBioCards.cols-6 li,
	.staffBioCards.cols-7 li {
		display: inline-block;
		margin-right: 2%;
		margin-bottom: 2vw;
	}
	
	.staffBioCards.cols-2 li { width: 49%; }
	.staffBioCards.cols-3 li { width: 32%; }
	.staffBioCards.cols-4 li { width: 23.5%; }
	.staffBioCards.cols-5 li { width: 18.4%; }
	.staffBioCards.cols-6 li { width: 15%; }
	.staffBioCards.cols-7 li { width: 12.57142857142857%; }
	
	.staffBioCards.cols-2 li:nth-child(2n-2),
	.staffBioCards.cols-3 li:nth-child(3n-3),
	.staffBioCards.cols-4 li:nth-child(4n-4),
	.staffBioCards.cols-5 li:nth-child(5n-5),
	.staffBioCards.cols-6 li:nth-child(6n-6),
	.staffBioCards.cols-7 li:nth-child(7n-7) {
		margin-right: 0;
	}
	
}

/*	---------------------------------------------------------------------------------------------
		FORCE DESKTOP STYLES ON MOBILE - FOR DISPLAYS CMS (TO SHOW FEEDS IN DESKTOP MODE)
	---------------------------------------------------------------------------------------------	*/

	@media only screen and (max-width: 768px) {

		body.forceDesktop .staffBioCards.cols-2 li,
		body.forceDesktop .staffBioCards.cols-3 li,
		body.forceDesktop .staffBioCards.cols-4 li,
		body.forceDesktop .staffBioCards.cols-5 li,
		body.forceDesktop .staffBioCards.cols-6 li,
		body.forceDesktop .staffBioCards.cols-7 li {
			display: inline-block;
			margin-right: 2%;
			margin-bottom: 2vw;
		}
		
		body.forceDesktop .staffBioCards.cols-2 li { width: 49%; }
		body.forceDesktop .staffBioCards.cols-3 li { width: 32%; }
		body.forceDesktop .staffBioCards.cols-4 li { width: 23.5%; }
		body.forceDesktop .staffBioCards.cols-5 li { width: 18.4%; }
		body.forceDesktop .staffBioCards.cols-6 li { width: 15%; }
		body.forceDesktop .staffBioCards.cols-7 li { width: 12.57142857142857%; }
		
		body.forceDesktop .staffBioCards.cols-2 li:nth-child(2n-2),
		body.forceDesktop .staffBioCards.cols-3 li:nth-child(3n-3),
		body.forceDesktop .staffBioCards.cols-4 li:nth-child(4n-4),
		body.forceDesktop .staffBioCards.cols-5 li:nth-child(5n-5),
		body.forceDesktop .staffBioCards.cols-6 li:nth-child(6n-6),
		body.forceDesktop .staffBioCards.cols-7 li:nth-child(7n-7) {
			margin-right: 0;
		}
		
	}