/**********************************************************
 * This plugin may be used on other sub domains which is why
 * its placed in the root
 **********************************************************/


/**********************************************************
 * Structure for list items
 * 
 * <section .candidate-list>
 * 		<h2></h2>
 * 		<article .candidate .stub .cleanbox>
 * 			<!-- HTML5 now allows for block level linking. This was also done for accessibility -->
 * 			<a .headshot-link>
 * 				<h3>
 * 					<small>
 * 				<div .content>
 * 					<span .headshot (.media|.not-found)>
 * 						(<img>|<i .fa .fa-user>)
 * 				<p .excerpt>
 * 		[<article .candidate .stub .cleanbox>...]
 **********************************************************/

.candidate-list {
	
}

.candidate-list a{
	display:block;
	padding:1em;
}

.candidate-list a:hover,
.candidate-list a:visited,
.candidate-list a {
	color:#353535;
	text-decoration:none;
}

.candidate-list .candidate {
	margin-bottom:1em;
	margin-right:1em;
	width:45%;
	display:inline-block;
	vertical-align: top;
}

.candidate-list .candidate h3 {
	margin:0 0 0.8em 0;
}

.candidate-list .content {
	overflow:auto;
	padding: 1px;
}

.candidate-list .headshot {
	float:left;
	margin-right:1em;
	display:inline-block;
	*display:inline;zoom:1;
}

.candidate-list .not-found {
	font-size: 2.285714285714286em;
}

/**********************************************************
 * Structure for full view
 * 
 * <article .candidate .full>
 * 		<header>
 * 			<h2>
 * 				<small>
 * 		<div .content>
 * 			<span .headshot (.media|.not-found)>
 * 				(<img>|<i .fa .fa-user>)
 * 			<p> <!-- BIO -->
 * 		<section .qa>
 * 			<h3 .question .q-1>
 * 			<div .answer .a-1>
 * 			<h3 .question .q-2>
 * 			<div .answer .a-2>
 **********************************************************/

.candidate.full {
	
}

.candidate.full .headshot {
	float: left;
	margin: 0 1em 1em 0;
}

.candidate .qa {
	clear:both;
}

@media only screen and (max-width: 768px) {
	
	.candidate-list .candidate h3 small {
		display:block;
	}
	
	.candidate-list .headshot,
	.candidate.full .headshot {
		float:none;
		/*text-align:center;*/
	}
}

@media only screen and (max-width: 480px) {
    .candidate-list .candidate {
    	width:95%;
    }
    .candidate-list .headshot {
    	float:none;
    }
    
    .candidate-list .not-found {
    	display:none;
    }
}