body {
    background-color : #8e8e8e ;
    font-family : Microsoft JhengHei ;
}

#calculator {
    margin-top : 20px ;
    width : 600px ;
    box-shadow : 5px 5px #4f4f4f ;
    background-color : #FFFFAA ;
    border-radius : 10px ;    
    
}

#font_block {
    text-align : left ;
    width : 85% ;
    padding-top : 10px ;
}

.word01 {
    color : #9d9d9d ;
    font-weight : bold ;
    text-shadow : 1.1px 1.1px #4f4f4f ;
}

.word02 {
    font-size : 6px ;
    font-weight : bold ;
    font-style : italic ;
    color : #ff2d2d;
}

#text_block {
    width : 85% ;
    border-radius : 5px ;
}

#input_data {
    width : 95%;
    border-radius : 5px ;
    height : 40px ;
    outline : none ;
    font-size : 18px ;
    padding-left : 20px ;
    box-shadow : 2.5px 2.5px inset #4F4F4F ;
    background-color : #FFFF6E ;
    color : #878787 ;  
}

hr {
    width : 80% ;
    margin : 15px 0px 10px 0px ;
}

#button_block {
    padding-bottom : 15px ;
    width : 100% ;
}

.bt {
    width : 105px ;
    height : 50px ;
    font-size : 20px ;
    margin : 10px 10px 10px 10px ;
    border-radius : 8px ;
    box-shadow : 3px 3px #4F4F4F ;
    color : #4F4F4F ;
    outline : none ;
}

.number:hover {
    background-color : #8e8e8e ;
    border-color : #8e8e8e ;
    color : #FFFFFF ;
}

.fun {
    background-color : #FF6E6E ;
    border-color : #FF6E6E ;
}

.fun:hover {
    background-color : #FF3B3B ;
    border-color : #FF3B3B ;
    color : #FFFFFF ;
}

.equal {
    background-color : #FFCF78 ;
    border-color : #FFCF78 ;
}

.equal:hover {
    background-color : #FFB630 ;
    border-color : #FFB630 ;
    color : #FFFFFF ;
}

.clear {
    background-color : #9999FF ;
    border-color : #9999FF ;
}

.clear:hover {
    background-color : #6363FF ;
    border-color : #6363FF ;
    color : #FFFFFF ;
}

#style_div {
    border : 1px dashed #DDDDDD;
    margin-top : 20px;
    width : 450px ;
}

.style_font {
    color : #DDDDDD; ;
}

.style_images {
    width : 15px ;
    height : 15px ;
}

/* #4F4F4F  */