@charset "utf-8";

/* This holds the entire widget, including menu and all pages. It's necessary for overflow and centering. */
.verticalPaginationContainer{
	overflow: hidden;
}

/* This contains the menu with the stacked buttons . You may have to adjust the width if your button text is long. If so, you'll have to narrow the pages. */
.verticalMenuContainer{
	display: inline-block;
	margin: 0px 10px 0px 0px;
	padding: 0px;
	float: left;
	max-width: 100px;
}

/* These are the individual buttons. */
.verticalPageButton{
	margin-bottom: 4px;
	padding: 2px 4px;
	background-color: #ffffff;
	cursor: pointer;
	text-align: left;
	line-height: 1.2;
}
.verticalPageButton:hover{
	opacity: 0.7;
}

/* These are the individual pages. You may have to adjust the widths, especially if you change the button widths. */
.verticalPage{
	display: none;
	float: left;
	text-align: left;
	max-width: 85%;
	animation: verticalPageLoad 0.4s;
}
@keyframes verticalPageLoad{
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
@media screen and (max-width: 900px){
    .verticalPage{
		width: 70%;
    }
}
@media screen and (max-width: 450px){
    .verticalPage{
		width: 65%;
    }
}