@font-face {
	font-family: PWChalk;
	src: local(chalk.ttf);
}

* {
	font-family: PWChalk;	
}

body {	
	background-image: url("https://raw.githubusercontent.com/Juankboards/abacus-calculator/master/img/background.JPG");	
	z-index: -1;
}

#tittle {
  font-family: PWChalk;
  color: #dda500;
  text-align: center;
  font-size: 2em;
  font-weight: bold;
  text-shadow: 3px 3px 0px rgba(0,0,0,0.1), 7px 7px 0px rgba(0,0,0,0.05);
}

.container-flex {	
	margin: 10px auto;
	width: 815px;
	height: 549px;
}

#abacus{
	width: 100%;
	height: 82%;
	margin-bottom: 10px;
}

/*----- Abacus layout ------*/

#framework {	
	background-image: url("https://raw.githubusercontent.com/Juankboards/abacus-calculator/master/img/wood.JPG");
    background-size: 80px 60px;
	background-repeat: repeat;
	height: 100%;
	width: 92%;
	padding: 1px;
	border: 5px solid #2C1910;
	border-radius: 5px;
}

#upper-row {		
	margin: 25px auto 0;	
	height: 22%;
	width: 90%;
	background-image: url("https://raw.githubusercontent.com/Juankboards/abacus-calculator/master/img/wood-background.jpg");
    background-size: 80px 60px;
	background-repeat: repeat;
	border: 5px solid #2C1910;
	border-radius: 5px;
}

#lower-row {	
	margin: 18px auto 0;	
	height: 60%;
	width: 90%;
	background-image: url("https://raw.githubusercontent.com/Juankboards/abacus-calculator/master/img/wood-background.jpg");
    background-size: 80px 60px;
	background-repeat: repeat;
	border: 5px solid #2C1910;
	border-radius: 5px;
}

.col-10 {
	display: block;
	float: left;
	width: 10%;
	height: 100%;
	margin: 0;
}


/*------ abacus components ------*/

.vertical-line {
	width: 8%;
	height: 100%;
	background-color: #888;
	border: 1px solid #000;
	margin: 0 auto;
	z-index: -1;
}

#framework {
	float: left;
}

#framework img {
	position: relative;		
	width: 100%;
	cursor: pointer;
	disabl
}

.ball5 {
	bottom: 96px;
}

.ball4 {
	bottom: 192px;
}

.ball3 {
	bottom: 212px;
}

.ball2 {
	bottom: 232px;
}

.ball1 {
	bottom: 252px;
}

/*------- operators and display layout -------*/


#operators {	
	float: left;	
	width: 8%;
	height: 90%;
	margin-top: 45px;
	padding-left: 5px;	
}

.operator-button {	
	display: block;		
	cursor: pointer;
	width: 100%;
}

#divide{
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg) ;
}

#display {		
	background-image: url("https://raw.githubusercontent.com/Juankboards/abacus-calculator/master/img/blackboard.jpg");
    background-size: 80px 40px;	
    border: 2px solid #2C1910;
	border-radius: 5px;	
	width: 100%;
	height: 50px;			
}

#display p {	
	color: #CCC;	
	font-size: 2.6em;	
	text-align: center;	
}

footer {
	font-family: "pacifico", cursive;
  	color: #ffa500;
	text-align: center;
	margin-top: 15px;	
}

footer a {
	font-family: "pacifico", cursive;
  	color: #00aa00;
	text-decoration: none;	
	font-style: italic;
}

#copyleft {
	display: inline-block;
	text-align: right;
	margin: 0px;
	-moz-transform: scaleX(-1);
	-o-transform: scaleX(-1);
	-webkit-transform: scaleX(-1);
	transform: scaleX(-1);
	filter: FlipH;
	-ms-filter: "FlipH";
}