Calculator/public/Rechner.css

/* ALLGEMEINE STYLES */

body{
	background-color:#333;
}
input{
	padding:0;
	border-radius:5px;
}
canvas{
	cursor:pointer;
}

/* STARTZUSTÄNDE */


#Calculator {
	background-color:#999;
	width:400px;
	height:500px;
	padding:50px;
	display:block;
	position:absolute;
	margin:auto;
	top:0;
	right:0;
	bottom:0;
	left:0;
	border-radius:20px;
	box-shadow:20px 20px 40px #000;
}


#Numbers_MainOperators{
	width:400px;
	height:300px;
	position:relative;

}
#equals{
	background-color:#99FF99;
	width:100%;
	height:100%;
	font-size:250%;

}
#clear,#delete{
	background-color:#FF9900;
}
.notEquals{
	position:relative;
	width:75px;
	height:100%;
	padding:0px;
	border-top:0px;
	font-size:250%;
}

#SpecialOperators{
	width:400px;
	height:200px;
}
#SpecialOperators input{
	background-color:#000;
	color:#FFF;
	width:93px;
	height:60px;
	border-top:0px;
	font-size:150%;
}
#shift{
	background-color:#5555FF !important;
}



/* HOCHZAHL AUSWAHl */

#inputForPowX{
	background-color:#AAA;
	width:210px;
	height:120px;
	padding:10px;
	position:absolute;
	top:25%;
	right:20%;
	border-radius:10px;
	box-shadow:5px 5px 20px #000;
}

#inputForPowX table{
	width:210px;
	height:100px;
	position:absolute;
	margin:auto;
	right:0;
	bottom:10px;
	left:0;
}

#inputForPowX input{
	background-color:#000;
	color:#FFF;
	width:100%;
	height:100%;
	font-size:28px;
	box-shadow:2px 2px 5px #000;
}

#hidePowX{
	position:absolute;
	margin:auto;
	right:0;
	left:0;
	border-radius:3px;
}


/* INPUT UND OUTPUT FLÄCHEN */

#input,#output{
	background-color:#FFF;
	width:80%;
	height:100px;
	position:absolute;
	margin:auto;
	right:0;
	left:0;
	text-align:center;
	font-size:80px;
	overflow:hidden;
	border-radius:50px;
	box-shadow:10px 10px 20px #000;
}

#input{
	top:50px;
}
#output{
	bottom:50px;
}



/* INFO FLÄCHE RECHTS */

#rollInOut{
	background-color:#FFF;
	height:480px;
	position:absolute;
	margin:auto;
	top:0;
	bottom:0;
	right:0;
	border-radius:15px 0 0 15px;
	box-shadow:10px 10px 20px #000;
}

#verticalP{
	position:absolute;
	bottom:170px;
	left:-140px;
	margin:0;
	font-size:40px;
	-webkit-transform: rotate(90deg);
	-ms-transform: rotate(90deg);
	transform: rotate(90deg);
}

#infoList li{
	margin:15px 5px 15px 5px;
	font-size:20px;
}

#setCommas{
	position:absolute;
	top:40px;
	right:80px;
	font-size:20px;
}



/* ANIMATIONEN */

@keyframes rollOut{
	from {width:50px;}
	to {width:500px;padding-right:30px;}
}

@keyframes rollIn{
	from {width:500px;}
	to {width:50px;padding-right:0px;}
}

@keyframes hide{
	from {opacity:1.0;}
	to {opacity:0.0;}
}

@keyframes show{
	from {opacity:0.0;}
	to {opacity:1.0;}
}

@keyframes FlashingInput{
	to {background-color:#FF0000;}
}

@keyframes FlashingOutput{
	to {background-color:#00FF00;}
}

@keyframes showPowDiv{
	from {opacity:0.0;transform:translate(-300px,-50px) scale(0.1);}
	to {opacity:1.0;transform:scale(1.0);}
}

@keyframes hidePowDiv{
	to {opacity:0.0;transform:translate(-300px,-50px) scale(0.1);}
}