html {
	height: 100%;
}
body {
   display: table; 
   margin: 0 auto;
   height: 100%;
}
footer {
	font-size: 19px;
	margin-top: 40px;
	margin-bottom: 50px;
	text-align: center;
}
footer a {
	border: #797979 solid 1px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    color: black;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0px 3px 15px #c9c9c9;
    background-color: white;
}
.bigContainer {
	height: 100%;
	display: table-cell;
	vertical-align: middle;
}
.heading {
	text-align: center;
    /*text-decoration: underline;*/
    font-size: 1.5rem;
    font-weight: bold;
	margin: 0px;
}
.main-outer {
	border: #797979 solid 1px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 3px 15px #c9c9c9;
}
.main-inner {
	
}
.main-cell {
    display: inline-table;
    width: 49%;
}
.fraction {
	display: inline-grid;
}
.fraction-heading {
	margin-bottom: 3px;
    font-weight: bold;
}
.fraction input {
    border: 0;
    background-color: lightgrey;
	color: black;
}
/* Some classes aren't use in the html file but are used in elements which are added by the java script */
.fraction-hr {
    border-width: 1px;
    border-color: black;
    background-color: black;
	margin: 0px;
}
.output-format {
	display: inline-block;
    text-align: center;
}
.output-text {
    display: inline-block;
}
.output-exponent {
    font-size: 0.8rem;
    transform: translate(0px, -5px);
}
.info-text {
	color: darkgray;
    margin: 0;
}
#outputError {
	color: red;
}
@media only screen and (max-width: 600px) {
	.main-cell {
		width: 100%;
	}
	body {
		display: block;
		margin: 8px;
		height: auto;
		font-size: 1.3rem;
	}
	.bigContainer {
		display: block;
	}
	.heading {
		font-size: 2rem;
	}
	input {
		font-size: 1.3rem;
	}
}
/*
.oberer-teil {
	background-image: url('images/backgroundColors.jpg');
	padding-bottom: 20px;
}
.maxtröger-überschrift {
	font-size: 55px;
	text-align: center;
	margin: 0;
    padding-bottom: 35px;
    padding-top: 40px;
}
.maxtröger-überschrift a {
	color: white;
	text-decoration: none;
}
.main {
	color: white;
	font-size: 26px;
	margin-left: 20px;
    margin-right: 20px;
}
.main-area {
	display: flex;
}
.main-element {
    color: black;
    font-size: 20px;
	text-align: center;
	height: 400px;
    width: 400px;
    background: white;
    border-radius: 7px;
    box-shadow: 0px 0px 7px #ffffff;
    padding-top: 10px;
    margin-right: 15px;
}
.main-element img {
	max-width: 100%;
    height: 80%;
}*/