*{
	/*font-family: sans-serif,arial,verdana;*/
    font-family: monospace;
	font-style: normal;
	text-decoration: none;
	
	white-space: nowrap;
	font-size: 18pt;
	color: #414F5B;
}

#caculator{
	/*width: 178px;*/
	width: 320px;
	height: 500px;
	margin: 10px auto auto auto;
	background: #FFFFFF;
	/*box-sizing: content-box;*/

}

#viewPanel{
	height: 30%;
    width: 98.5%;
	border: 1px solid #C0C0C0;
	/*overflow: hidden;*/
}

#previousView{
	height: 50%;
	margin: 0px;
	border: 0px solid;
	text-align: right;
}

#mask{
	height: 80%;
	width: 100%;
}

#previousRecord{
	height: 100%;
    padding: 0 3% 0 0;
	margin: 30% 0 0 0;
	font-size: 200%;
	/*top: 0px;
	left: 0px;*/
}

#resultView{
	height: 50%;
    width: 100%;
    padding: 0 3% 0 0;
    box-sizing: border-box;
	margin: 0px;
	border: 0px solid;
	text-align: right;
	font-size: 200%;
	overflow: hidden;
}

#inputPanel{
	height: 70%;
	margin-top: -1px;
}

button{
	/*display: inline-flex;*/
	float: left;
	width: 25%;
	height: 20%;
	position: relative;
	background: #BBB6B6;
	border: 1px solid #C0C0C0;
	color: #414F5B;
	font-size: 120%;
	/*font-weight: bold;*/
	text-align: center;
	text-shadow: 0px 0px 0 #FFFFFF;
	cursor: pointer;
}

button:active{
	border: 1px solid #336600;
	/*border: 1px solid #8C8E91;*/
	color: #336600;
	/*background: rgb(160,160,160);*/
    /*outline: #FFFFFF none;*/
}

.num, .zero, .fpoint, .calResult{
    margin: -1px -1px 0 0;
    background-color: #FFFFFF;
}

.num:active, .zero:active, .fpoint:active, .calResult:active{
    background-color: #E6E7E8;
}

.operator, .cleanChar, .clear{
    margin: -1px -1px 0 0;
    background-color: #E6E7E8;
}

.operator:active, .cleanChar:active, .clear:active{
    background-color: #CCCDCD;
}

.clear{
    width: 74.5%;
    text-align: left;
    padding: 0 0 0 10%;
}

.inputState{
	color: #000000;
}

.showResultState{
	color: #336600;
}

.slideFromBottom{
    animation-name: slideFromBottom;
    -webkit-animation-name: slideFromBottom;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    visibility: visible;
    /*visibility: visible !important;*/
}

@keyframes slideFromBottom {
    0% {
        transform: translateY(100%);
        opacity: 0;
    }
    50%{
        transform: translateY(8%);
    }
    65%{
        transform: translateY(4%);
    }
    80%{
        transform: translateY(3%);
    }
    95%{
        transform: translateY(2%);
        opacity: 0.99;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@-webkit-keyframes slideFromBottom {
    0% {
        -webkit-transform: translateY(100%);
        -webkit-opacity: 0;
    }
    50%{
        -webkit-transform: translateY(8%);
    }
    65%{
        -webkit-transform: translateY(4%);
    }
    80%{
        -webkit-transform: translateY(3%);
    }
    95%{
        -webkit-transform: translateY(2%);
        -webkit-opacity: 0.99;
    }
    100% {
        -webkit-transform: translateY(0%);
        -webkit-opacity: 1;
    }
}

.slideInvisibleFromBottom{
    animation-name: slideInvisibleFromBottom;
    -webkit-animation-name: slideInvisibleFromBottom;
    animation-duration: 0.5s;
    -webkit-animation-duration: 0.5s;
    animation-timing-function: linear;
    -webkit-animation-timing-function: linear;
    /*visibility: visible;*/
}

@keyframes slideInvisibleFromBottom {
    0% {
        transform: translateY(-110%);
        opacity: 1;
    }
    50%{
        transform: translateY(-202%);
        opacity: 0;
    }
    65%{
        transform: translateY(-206%);
    }
    80%{
        transform: translateY(-207%);
    }
    95%{
        transform: translateY(-208%);
    }
    100% {
        transform: translateY(-160%);
        opacity: 0;
    }
}

@-webkit-keyframes slideInvisibleFromBottom {
    0% {
        -webkit-transform: translateY(-110%);
        -webkit-opacity: 1;
    }
    50%{
        -webkit-transform: translateY(-182%);
        -webkit-opacity: 0;
    }
    65%{
        -webkit-transform: translateY(-186%);
    }
    80%{
        -webkit-transform: translateY(-187%);
    }
    95%{
        -webkit-transform: translateY(-188%);
    }
    100% {
        -webkit-transform: translateY(-190%);
        -webkit-opacity: 0;
    }
}