body,html{
background-color:brown;
font-family: arial;
font-size:16px;
color:black;
margin:0px;
}
#copritutto {
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
background-color: #ffffff;
display:none;
z-index:10000;
}
#divcopri {
width: 100%;
height: 50px;
background-color: #ffffff;
text-align:center;
padding:10px;
font-size:20px;
color:black;
}
#tipo{
position: absolute;
left: 130px;
top:100px;
font-size:30px;
color:green;
}
#help{
position:absolute;
left:10px;
top:70px;
z-index:10;
}
#controllo{
position: absolute;
left: 0px;
top:0px;
width:500px;
background-color:#eeeeee;
padding:10px;
box-shadow: 1px 1px 3px 2px #cccccc;
visibility:hidden;
z-index:110;
}
.giust{
position:absolute;
left:-5000px;
top:200px;
width: 100%;
background: green;
color:white;
text-align:center;
line-height: 40px;
font-size:40px;
z-index:10;
}
#supercontenitore{
background-color:white;
}
.sommafrazioni{
position:relative;
width:250px;
height:60px;
margin: 0 auto;
}
.frazione{	
position:absolute;
left:0px;
top:0px;
width:50px;
height:60px;
}
.num{
position:absolute;
left:0px;
top:0px;
width:50px;
height:30px;
border-bottom:1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.den{
position:absolute;
left:0px;
top:30px;
width:50px;
height:30px;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.num2{
position:absolute;
left:100px;
top:0px;
width:50px;
height:30px;
border-bottom:1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.den2{
position:absolute;
left:100px;
width:50px;
top:30px;
height:30px;
width:50px;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.num3{
position:absolute;
left:200px;
top:0px;
width:50px;
height:30px;
border-bottom:1px solid black;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.den3{
position:absolute;
left:200px;
width:50px;
top:30px;
height:30px;
width:50px;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.segno{
position:absolute;
left:50px;
top:0px;
width:50px;
height:60px;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}
.uguale{
position:absolute;
left:150px;
top:0px;
width:50px;
height:60px;
display: flex;
justify-content: center;
align-items: center;
font-size:30px;
}

.sep{
clear:both;
}
.blu{
color:blue;
}
.nero{
color:black;
}
.rosso{
color:red;
}
h1{
font-size:18px;
}
#frazione2{	
position:absolute;
top:340px;
width:80px;
}
.divider {
height: 1px;
width: 100%;
overflow: hidden;
background-color: #000000;
}
.manina{
cursor:pointer;
}
.manina:hover{
background-color:#eee;
}
.manina2{
cursor:pointer;
border-top:1px solid black;
}
.manina2:hover{
background-color:#eee;
}
.gomma{
width:30px;
height:30px;
cursor:pointer;
}
#barrasx{
background-color:lightyellow;
border-top:1px solid red;
border-bottom:1px solid red;
}
#barradx{
background-color:lightyellow;
border-top:1px solid red;
border-bottom:1px solid red;
}
.quadretto{
position:absolute;
top:0px;
height:20px;
display: flex;
justify-content: center;
align-items: center;
font-weight:bold;
}
#contenitore1, #contenitore2, #contenitore3{
position: relative;
width: 100%;
height:22px;
overflow: hidden;
margin: 0 auto
}
.campo50{
width:50%;
text-align:right;
float:left;
}
.campo50b{
width:50%;
float:left;
}
.but3 {
font-size: 30px;
}
.but2 {
width: 200px;
font-size: 20px;
}
.but{
width:50%;
font-size:16px;
height: 50px;
}
.gras{
font-weight:bold;
}
.bcyellow{
background-color:yellow;
}
.bckhaki{
background-color:#f0e68c;
}
.dbx{
padding: 5px;
}
.centro{
text-align:center;
}
a {
color: green;
text-decoration: none;  
}
 a:hover{
     text-decoration: underline;
}