/* Carol's CSS overrides for bxslider.  These styles override those in jquery.bxslider.css.  So in any page where you want the bxslider to appear, after including jquery.bxslider.css, include this file */

/* Center the slides within the box and make the nav dots bigger and wider apart */

.slider img { 
	display: block; 
	margin: 0 auto;
}
.bx-wrapper .bx-pager.bx-default-pager a {
	width: 24px; height: 24px;		/* Total width/height with 3px borders = 30px */
	border-radius: 15px;
	margin: 0 15px;
	background: #d8d8d8;	/* Default dot color */
	background: white;	/* Default dot color */
	border: 3px solid black;	/* Dot border color */
}
/* Move the nav dots row down a bit, now that I've made the nav dots bigger */

.bx-wrapper .bx-pager {
	bottom: -48px;
}
/* Color for the ACTIVE dot as well as on hover */
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active,
.bx-wrapper .bx-pager.bx-default-pager a:focus
{
	background: #0fa4b3;		/* Website teal or at least - matches footer top border color */
	background: #1b7880;		/* Text teal, darker for better contrast 5.19 though not as "pretty" */
	background: #25828a;		/* Or is this the text teal?  A little lighter.  Good accessibility contrast 4.52 */
}
.bx-wrapper .bx-caption span {
	padding: 0.5em;		/* Was 10px */
	font-family: inherit;		/* Was Arial, too tight */
}
.bx-caption {		/* Center the captions within the grey caption bar.  Were left-justified */
	text-align: center;
}
/* Make the caption box narrower, so they don't extend into the prev and next slides */
.bx-wrapper .bx-caption {
	width: 98%;		/* was 100% */
	margin: 0 1%;	/* was 0 I presume */
}
/* Move the prev/next arrows down so they don't cover the left and right edges of the slides */
.bx-wrapper .bx-controls-direction a {
	/*top: 107.73%;		* Was 50%. 107.73% works for 600px width slideshow */
	top: 105.8%;		/* For 800px width slideshow */
}

/* Two new styles to manage the long captions for the graph examples slider - CEM Feb 2023 */

/* Allow empty lines within the captions, such as a blank line to separate the title from the description, by setting a top margin for the paragraphs */
div.bx-caption p {
	margin: 0.8em 0 0;
}
/* If we are in mobile view (500 pixels or less), hide the detailed part of the caption, assumed to be everything within <p> tags */
@media (max-width: 500px) {
	div.bx-caption p {
		display: none;
	}
}