Exhibit 1: Horizontal / Becomes Button Wall





<html>
<button style = "width:120px;" onclick="revertMarquee()">Toggle Marquee</button>
	<p>Exhibit 1: Horizontal / Becomes Button Wall </p>

	<div id="buttonwall">
		<div class="marquee"> 
			<div class = "scroller">
				<span style="width: 100%">
					<!--Example button divs.-->
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					
				</span>
			</div>
		</div>
	</div>
</html>

<style>
.buttonn{
	margin: 3px; /* change the distance between buttons*/
	width: 88px;
	height: 31px;
	background-color: black;  /* Example button divs. */
}

#buttonwall{
	width: 800px; /* The width of the marquee div. */
	.marquee {
		width: 100%;
		background-color: coral; /* Change this to rgba(0,0,0,0) if you want transparent background. */
		white-space: nowrap;
		overflow: hidden;
		.scroller {
			padding-left: 100%;
			display: inline-block;
			animation: horizMarquee 10s linear infinite; /* Change the marquee timing here */
				&:hover {
				animation-play-state: paused;
			}
			span{
				display: flex;  
				flex-direction: row; 
				flex-wrap: inherit; 
				text-align:center; 
				font-size: 1px; 
				width: 100%;}
		}
	}
	.mPause{
		display: flex;
		width: 100%;
		background-color: coral; /* Change this to rgba(0,0,0,0) if you want transparent background. */
		white-space: wrap;
		margin: auto;
		.scroller{
			flex-wrap: wrap; 
			span{display: flex;  
				flex-direction: row; 
				justify-content: center; /*Remove this if you don't want your buttons centered after you untoggle.*/
				flex-wrap: inherit; 
				text-align:center; 
				font-size: 1px; 
				width: 100%;}
		}
	}
}

@keyframes horizMarquee {
  100% {
    transform: translate(-100%, 0);
  }
}

</style>

<script>

function revertMarquee(){
  var i, tablinks;
  tablinks = document.getElementsByClassName("marquee") 
  
  if(tablinks.length != 0){
	while (tablinks.length > 0) {
			tablinks[0].className = tablinks[0].className.replace("marquee", "mPause")
			console.log("marquee off")
	}
  }
  else{
	tablinks = document.getElementsByClassName("mPause");
	while (tablinks.length > 0) {
			tablinks[0].className = tablinks[0].className.replace("mPause", "marquee")
			console.log("marquee on")
	}
  }
}

</script>