body {
	padding: 0;
  background-image: url("images/japaneseart1.jpg");
  background-size: 100%;
  background-repeat: repeat;
  background-attachment: fixed;
  background-position: center;
}

.abacus {
	padding: 10px;
	margin: 0;
	margin-top: 30px;
  background-image: url("images/wood3.jpg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 15px 15px 8px #222;  
	transition: margin .5s;
}

.abacus-body {
	padding: 0;
	margin-left: 30px;
	transition: margin .5s;
}

.abacus-top, .abacus-bottom {
	border: 1px solid black;
	background-color: white;
}

.abacus-top {
	margin: 0 0 10px 0;
	padding: 0;
	height: 103px;
}

.abacus-bottom {
	margin: 0;
	padding: 0;
	height: 253px;
}

.acol {
	padding: 0;
  background-image: url("images/abacuspole.jpg");
  background-size: 80px 300px;
  background-repeat: no-repeat;
  background-position: center;
}

.bead, .open {
	margin: auto;
	padding: 0;	
	height: 50px;
}

.bead {
	padding: 0;
	margin: 0;
  background-image: url("images/greenbead.jpg");    
  background-repeat: no-repeat;
  background-size: 90%;    
  background-position: center;
}

.one, .two, .three, .four, .five {
	position: relative;
	top: 0px;
  -webkit-transition: -webkit-top 2s; /* Safari */
  transition: top .5s;
}

#display {
	font-size: 1.5em;
	color: white;
	text-align: center;
	margin: auto;
	width: 300px;
	border: 1px solid black;
	background-color: rgba(22, 255, 111, 0.2);
	margin-top: 30px;	
  box-shadow: 10px 10px 6px #222; 
	transition: width 2s, height 2s, background-color 2s;
}

.number {
	display: hidden;
}

.hidden {
	display: none;
}

p {
	margin: 0;
	padding: 0;
}

#UserAnsLabel, #ansLabel {
	color: black;
}

.navbar {
	padding: 1px 0 1px 15%;
}