/*********************** CARDS CSS *****************************
	This stylesheet is for member cards exclusively, if using
	social networking of any kind, you must import directory.css
	as that file contains necessary social networking declarations.
****************************************************************/
#tools_wrapper {
	position:absolute;
	right:0px;
	float:left;
	border-radius:10px;
	border:3px solid #000000;
	background-color:#FFFFFF;
	z-index:10;
	margin-top:50px;
}
.person {
	float:left;
	border:1px solid #666666;
	width:260px;
	min-height:170px;
	margin:5px;
	background-color:#f1f1f1;
	border-radius:10px;
	padding:10px;
	position:relative;
}

.name {
	clear:left;
	float:left;
	font-weight:bold;
	white-space:nowrap;
	width:170px;
}
.partner-name-header {
	clear:left;
	font-weight:normal;
    font-style:italic;
    color:purple
}

.partner-name {
	float:left;
    clear:left;
	font-weight:normal;
    margin-left:10px;
    color:purple;
    text-decoration:none;
}

.city,
.company,
.email-link,
.email-image
{
clear:left;
float:left;
}

.city,
.home-phone,
.cell-phone {
	clear:left;
	white-space:nowrap;
	float:left;
}
.state {
float:left;
}
.zip {
float:left;
}
.person-image {
	width:80px;
}
.email-image {
	font-size:1px;
}
.country {
	clear:left;
}
.image-holder {
	border:1px solid #000000;
	position:relative;
	float:left; 
	margin-right:5px;
	width:80px;
	max-height:100px;
	overflow:hidden;
}
.image-holder img {
	max-width:80px;
	display:block;
}
.info-container {
	float:left;
	width:170px;
	overflow:hidden;
}
.textclip {
	width:170px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.select-arrow {
	display:none;
	width:70px;
	height:26px;
	position:absolute;
	bottom:5px;
	left:5px;
	right:5px;
	background-image:url(/images/member_directory/select_arrow.png);
	background-repeat:no-repeat;
	cursor:pointer;
	z-index:10;
}
.image-holder:hover .select-arrow {
	display:block;

}
.member-link {
    float:left;
	font-weight:bold;
	text-decoration:none;
	color:#000000;
    padding-right:5px;
}
.member-pronoun {
    float:left;
    font-style:italic;
    font-weight:bold;
    font-size:smaller;
    color:#808080;
}

.business-member-pronoun {
    font-style: italic;
    font-size: smaller;
}

.name a:hover {
	color:#666;
}

.email-image img {
	max-height:15px;
}

.email-link a {
	text-decoration:none;
	color:#027bc7;
}
.email-link a:hover {
	text-decoration:underline;
}

.close-tools {
	position: absolute;
	right:3px;
	top:3px;
	height: 24px;
	width: 24px;
	background-image: url(/images/photo/kill25.png);
	background-repeat: no-repeat;
}
.search_button_pad {
	margin-top:30px;
}

/***Search box overrides **/

#search_value_div .field-label {
	color: #333333;
	font-size: 12px;
	text-align: right;
	padding-right: 5px;
	white-space: nowrap;
	width:auto;
}
#search_value_div .content-text a {
	/*color: #FFFFFF; */
}
#search_box { padding:5px; }

.search-margin {
	margin-top:5px;
}
#search_value_div .field-label-top {
	color: #333333;
	font-size: 12px;
	text-align: right;
	padding-right: 5px;
	white-space: nowrap;
	vertical-align: top;
	padding-top: 5px;
}

#search_value_div .field-label-left {
	color: #333333;
	font-size: 12px;
	text-align: left;
	padding-right: 5px;
	white-space: nowrap;
}
.field-label {
	clear:left;
	float:left;
	font-size:12px;
	font-weight:bold;
	width:150px;
	text-align:left;
	margin-bottom:5px;
	white-space:normal;
}
#search_value_div .small-field-label {
	color: #666666;
	font-size: 10px;
}
#tools_wrapper {
	display:none;
}

#search_info {
	clear:left;
	float:left;
	margin:10px 5px;
	background-color:#f1f1f1;
}
.tools-location {
	*display:inline;
	float:left;
}

#start_panel {
	display:none;
	font-size:14px;
	font-weight:bold; 
	float:left;
	padding:10px;
	background-color:#f1f1f1;
	margin:10px 10px;
	border-radius:10px;
	width:350px;
	line-height:20px;
}
.search-image {
    float:left;
    margin-left:3px;
    margin-top:-8px;
    margin-right:3px;
    width: 26px;
    height: 29px;
    background-image: url("/images/page_tools/page-tools-sprite.png");
    background-repeat: no-repeat;
    background-position: -46px 0px;
    cursor:pointer;
}
.results {
	padding-left: 0px;
	float:left;
	clear:left;
}
.bottom {
	margin-top:0px;
	margin-bottom:10px;
	float:right;
}
.paging {
	margin-top:0px;
	margin-bottom:0px;
	float:right;
}
#results {
	margin:10px 0px;
	width:100%;
	overflow:auto;
	padding-top:10px;
}
.results-text {
	float:left;
	font-size:12px;
	font-weight:bold;
	padding-left:5px;
	color: rgb(102, 102, 102);
}
.no-results{
    color: rgb(102, 102, 102);
    padding: 3px 5px;
    margin: 6px 15px 5px;
    overflow:auto;
}
.notice {
	float:left;
	width:450px;
	height:68px;
	padding-left:80px;
	padding-top:10px;
	background-image:url(/images/member_directory/member-directory-icons.png);
	background-repeat:no-repeat;
	background-position:0px -355px;
}
#people {
	clear:left;
	float:left;
}
.content { float:left; }

.person a img,
.person img a,
#person a img,
#person img a {
	border:none;
}
.card-title {
	float:left;
	clear:left;
	font-weight:bold;
}
#directory_results {
	position:relative;
}
title-heading, .title-heading-smaller {
	color: #666;
	font-size: 16px;
	font-weight: bold;
	padding-left: 5px;
	margin-top: 2px;
	margin-bottom: 2px;
}
.title-heading-smaller {
	font-size: 14px;
}
.email-image {
	font-size:1px;
}
.country {
	clear:left;
}
.search-margin {
	margin-top:5px;
}
.content-text { float:left; }

.vcard  {
clear:left;
float:left;
}

.vcard,
.social-row .facebook,
.social-row .twitter,
.social-row .linkedin,
.social-row .pinterest,
.social-row .googleplus,
.social-row .youtube,
.social-row .instagram,
.social-row .flickr,
.social-row .strava,
.social-row .meetup,
.website {
	float:left;
	width:30px;
	height:30px;
	background-image:url(/images/member_directory/member-directory-icons.png?v=20200924);
	background-repeat:no-repeat;
}
.vcard {
	height:24px;
	margin-top:3px;
}
.social-row .facebook {
	background-position:0px -23px;
}
.social-row .linkedin {
	background-position:0px -83px;
}
.social-row .twitter {
	background-position:0px -53px;
}
.social-row .pinterest {
	background-position:0px -453px;
}
.social-row .googleplus {
	background-position:0px -492px;
}
.social-row .youtube {
	background-position:0px -533px;
}
.social-row .instagram {
	background-position: 0px -873px;
}
.social-row .flickr {
	background-position: 0px -799px;
}
.social-row .strava {
	background-position: 0px -835px;
}
.social-row .meetup {
	background-position: 0px -916px;
}
.website {
	background-position:0 -113px;
	cursor:pointer;
}
.social-row {
	clear:left;
	padding-top:5px;
	position:absolute;
	bottom:5px;
	height:30px;
	width:100%;
	overflow:hidden;
}
.social-row-padding {
    position:relative;
    padding-top:0px;
}

.social-panel a:hover {
	opacity:.8;
}
.search-value-text {
	width:120px;
	float:left;
	margin-top:-5px;
}
.search-button-position {
	float:left;
	margin:3px 5px;
}
.metro-area { 
	clear:left;
}
#directory_results .person,
#directory_results .collectible {
    float:left;
    width:30%;
    padding:10px;
    box-sizing:border-box;
    border:1px solid #666666;
    margin-right:10px;
    margin-bottom:10px;
    background-color:#f1f1f1;
    border-radius:10px;
    position:relative;
    min-width:300px;
}
#directory_results .person.wide {
	width:23%;
	margin-right:1%;
	margin-bottom:1%;
}
	.person.half {
		min-width:48%;
		margin-right:1%;
		height:240px;
	}
	.person.narrow {
		min-width:100%;
		margin-right:0%;
	}
	.image-holder {
		width:60px;
		border:none;
		background-color:transparent;
	}
	.person-image {
		width:60px;
		height:60px;
		background-size:cover;
		background-position:center center;
		background-repeat:no-repeat;
		border-radius:50%;
		border:1px solid #666;
		box-sizing:border-box;
	}
	a .person-image:hover {
		opacity:.8;
	}
	.person .content {
		width:100%;
	}
	.textclip { width:100%;}
	.info-container { width:70%;}
	.member-link,
	.person-image {
		transition:all .5s ease;
	}
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
	.search-value-text {
		height:auto;
	}
	.search-button-position {
		clear:left;
	}
	.paging {
		float:left;
		clear:left;
		margin:5px 0px;
	}
    #people {
		width:320px;
	}

	.search-button-position {
		margin-top:15px;
	}
}
#search_value_div select {
	width:auto;
}