/************ Added Jan 2017 by Kate Johnson to change Indicators search (Node Index Solr) View ************/
/************ See Redmine ticket https://redmine.cicsnc.org/issues/2885 ************/
/** Also changed DB - edited View settings from Unformatted List to Grid with 3 rows, and added CSS class "indicatorsView" **/

div.indicatorsView{
	width:100%;
}

/* Set the size of the Indicator image so that it fits in the grid column correctly */
/* The Grid Settings in the View will allow you to change # of cols in grid */
div.indicatorsView img{
	width: 100%;
}

/* Change the title text so that it is smaller */
div.indicatorsView h2{
	font-size: 1.25em;
	width: 100%;
	text-align: center;
	margin-top: 0;
	margin-bottom: 0;
}

/* Set where the title text is located relative to the image */
/* This is the parent div containing .l-slat__header and .l-slat__media */
div.indicatorsView article {
	padding-bottom: 5em;
	position: relative;
}

/* Style the parent div containing the header text (h2 and a) so header appears below image */
div.indicatorsView .l-slat__header {
	width: 100%;
	position: absolute;
	bottom: 1.5em;
	height: 3em; /* This aligns the tops of the text divs so the first line of text lines up */
}

/* Style the parent div containing the image div */
/* This div is used by jQuery matchHeight in lines 101-103 of scripts.js for the site
/* to make all of the outlines for the images the same height for each row in the grid */
div.indicatorsView .l-slat__media {
	display: table;
	border: 1px solid #dadada;
	padding-right: 0;
}

/* Align the image in the center of the parent div */
div.indicatorsView .l-slat__media .field-name-field-indicator-image{
	display: table-cell;
	vertical-align: middle;
	border: none;
}

/* Hide teaser paragraph text for content */
div.indicatorsView p {
	display: none;
}

/*** MEDIA QUERIES FOR INDICATOR TITLE SIZE*/
@media screen and (min-width: 300px) and (max-width: 600px){
	div.indicatorsView h2 {
	font-size: 0.75em;
	}
	div.indicatorsView article {
	padding-bottom: 5.5em;
	}
}

@media screen and (min-width:601px) and (max-width: 810px){
	div.indicatorsView h2 {
	font-size: 1em;
	}
	div.indicatorsView article {
	padding-bottom: 5em;
	}
}
/****** End Indicators modifications ************************************************************************************/