.flipperMom {
	position: relative;
	top: 0;
	left: 0;
	text-align: center;
}
.flipperMom p {
	text-align: center;/* change to left if you have long captions */
	width: 400px; /* same as the width of each photo */
	margin-bottom: 20px;
}
p.flipperLast {
	display: inline;
	text-align: left;
	margin-right: 150px;
}
.flipperLast a { /*style the same as the other buttons on the site */
	background: #FFF7E5;
	font-weight: bold;
	text-decoration: none !important;
	color: #880029;
	border: 1px solid #880029;
	border-bottom: 4px double #880029;
	padding: 2px 4px 3px 4px;
}
.flipperLast a:hover {
	background: #FFFFFF;
}
.flipperWhite {
	display: none;
}
p.flipperNext {
	display: inline;
	text-align: right;
	margin-left: 150px;
}
.flipperNext a {
	background: #FFF7E5;
	font-weight: bold;
	text-decoration: none !important;
	color: #880029;
	border: 1px solid #880029;
	border-bottom: 4px double #880029;
	padding: 2px 4px 3px 4px;
}
.flipperNext a:hover {
	background: #FFFFFF;
}

.flipperItem {
	margin: 0 auto 0 auto;
	height: 380px; /*set height just large enough that all flipper divs fit without disturbing the position of the Next and Last buttons.
	IMPORTANT: Edit the style of any images that are not tall enough, so that they have enough margin-top to place them in the vertical center of the flipper area. This is a manual process when setting up the flipper.
	ALSO: It's best to set a tall picture as the first flipper in the sequence. Then the page comes up with the buttons in the "right" place.
	AND: Be sure to set the first flipper div as the topmost one in the source code. Then, the other flipper images will be preloading the background, but the first one will come up as soon as it can.
	First flipper div has visibility: visible and display: block. All others have visibility: hidden and display: none.
	Edit the count of flipper divs in this sequence in the button code. 
	*/
	
}