body {
    background-color: #EDEDED;
    font-family: Calibri;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
}

#topBar{
    max-height: 45px;
    background-color: #0077bb;
    width:100%;
    overflow: hidden;
    position: absolute;
    top: 0px;
    left:0px;
    right: 0px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	text-align: center;
}

#mainLogo{
    height:30px;
    margin: 7.5px;
    filter: drop-shadow(3px 3px 1px #333);
}

#topMenu{
    margin-top:70px;
}

.topMenuItem{
    text-align:center ;
    display: block;
    min-width: 200px;
    padding: 10px;
    border-radius: 20px;
    margin: 10px;
    background-color: #FFF;
    font-size: 1.4em;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.topMenuItem:hover{
    background-color:#eee;
    cursor: pointer;
}

.topMenuItem:active{
    background-color:#ddd;
}

#accueil{
    background-color: #FFF;
    text-align: left;
    border-radius: 20px;
    margin: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 40px;
    padding-right: 40px;
    display: block;
    opacity: 1;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#accueil p{
    text-indent: 20px;
    line-height: 1.3;
}

#trigo{
    padding: 10px;
    background-color: #FFF;
    text-align: center;
    border-radius: 20px;
    margin: 10px;
    display: none;
    opacity: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#trigoForm{
    padding: 10px;
}

#trigoForm label{
    
}

.trigoInput{
    padding: 10px; 
    margin-bottom: 5px
}

#trigoRadio{
    display: block;
    border: 0px;
    width: 100%;
    height: 3em;
}

#trigoSubmitBtn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
} 

#trigoSubmitBtn:focus{
    outline: 0;
}

#trigoSubmitBtn:hover{
    background-color: #33aaff
}

#trigoCanvas{
    margin: 10px;
}

#conv{
    background-color: #FFF;
    text-align: center;
    border-radius: 20px;
    margin: 10px;
    display: none;
    opacity: 0;
    padding: 10px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.convInput1{
    padding:10px;
    margin: 5px;
}

.convLabel{
    font-size: 1.3em;
}

#convCalculBtn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
}

#convCalculBtn:hover{
    background-color: #33aaff
}

#convFonction1, #convFonction2{
    display: none;
}

.convInput2{
    padding:10px;
    margin:5px;
}

#calcul1Btn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
}

#calcul1Btn:hover{
    background-color: #33aaff
}

#calcul2Btn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
}

#calcul2Btn:hover{
    background-color: #33aaff
}

#convCanvas{
    display:none;
}

.tCompInput{
    padding: 10px; 
    margin-bottom: 5px
}

#tCompForm{
    padding: 10px;
}

#tComp{
    padding: 10px;
    background-color: #FFF;
    text-align: center;
    border-radius: 20px;
    margin: 10px;
    display: none;
    opacity: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#tCompForm{
    padding: 10px;
}

#tCompSubmitBtn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
} 

#tCompSubmitBtn:focus{
    outline: 0;
}

#tCompSubmitBtn:hover{
    background-color: #33aaff
}

#tCompResult{
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    background-color: #33aaff;
    width: 50%;
    margin-left:auto;
    margin-right:auto;
    opacity: 0;
}

.scaleCalcInput{
    padding: 10px; 
    margin-bottom: 5px
}

#scaleCalcForm{
    padding: 10px;
}

#scaleCalc{
    padding: 10px;
    background-color: #FFF;
    text-align: center;
    border-radius: 20px;
    margin: 10px;
    display: none;
    opacity: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#scaleCalcForm{
    padding: 10px;
}

#scaleCalcSubmitBtn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
} 

#scaleCalcSubmitBtn:focus{
    outline: 0;
}

#scaleCalcSubmitBtn:hover{
    background-color: #33aaff
}

#scaleCalcResult{
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    background-color: #33aaff;
    width: 35%;
    margin-left:auto;
    margin-right:auto;
    opacity: 0;
}

.centerContent{
    padding: 10px;
    background-color: #FFF;
    text-align: center;
    border-radius: 20px;
    margin: 10px;
    display: none;
    opacity: 0;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

#rpmFinderMaterialInput{
    padding: 10px;
    margin: 5px;
}

#rpmFinderToolInput{
    padding: 10px;
    margin: 5px;
}

.rpmFinderDiameterInput{
    padding: 10px; 
    margin: 5px
}

#rpmFinderSubmitBtn{
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    border:none;
    background-color: #555;
    color: #ddd;
    font-size: 1.2em;
    font-weight: bold;
} 

#rpmFinderSubmitBtn:focus{
    outline: 0;
}

#rpmFinderSubmitBtn:hover{
    background-color: #33aaff
}

#beltTensionWrapper{
	overflow-x:scroll;     
    white-space: nowrap;
}

#beltChart{
	margin: 10px;
}