* { font-family:arial; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body { 
    background-color:#05537b; 
    margin: 0;
    padding: 20px;
    font-family: Arial, sans-serif;
    color: #FFF;
    font-size: 150%;
    font-weight: 400;
}
.content {
    background-color :#FFF; 
    color: #000;
    padding: 10px 20px; 
    border-radius: 10px; 
    text-align: center;     
    float: left;
    width: calc(100% - 250px);
    margin-bottom: 20px;
}
#sidebar {
    display: inline-block;
    text-align: right;
    font-size: 60%;
    width: 160px;
    margin: 0;
    padding: 0;
    margin-left: 60px;
}
#sidebar img {
    max-width: 160px;
    max-height: 300px;
    margin: 0;
    padding: 0;
    border: 0;
}
#sidebar-thin {
    display: block;
}
#sidebar-wide {
    display: none;
}
.thisTable td { color: #000; line-height:36px; font-size:14px; }
.container { 
    color: #000; 
    background-color:#EEE; 
    padding:5px 15px 15px 15px; 
    border:1px solid #CCC; 
    border-radius: 10px; 
    margin-bottom:25px; 
    width:100%; 
    text-align:left;
    color: #000; line-height:36px; font-size:14px;
}
.formula { display: block; font-size:150%; }
.q { display: inline-block; margin-bottom: 30px}
.box { background-color:#FFF; border:0; width: 50px; height:40px; margin:0px 4px; font-size:120%; }
.button { margin-left:10px; background-color: #00ABFB /* Blue */; border:1px solid #CCC; height: 25px; color:#FFF; font-weight:bold; }

 

.answer { display: inline-block; padding:10px; text-align: left /*center*/; margin-top: -20px; margin-bottom: 30px; }
.answer b { text-decoration:underline }
.how { color:#555; margin:15px; font-size:85%/*13px*/; background-color:#FFF; padding:2px 4px }
.how b { font-weight:bold; text-decoration:none }


.bignum-color { color: #B00; }
.partnum-color { color: #070; }
.percent-color { color: #009; }

.bignum { color: #B00; border-bottom: 3px solid #B00; }
.partnum { color: #070; border-bottom: 3px solid #070; }
.percent { color: #009; border-bottom: 3px solid #009; }

.bignum-bg { background-color: #FDD; }
.partnum-bg { background-color: #EFE; }
.percent-bg { background-color: #DDF; }

.input-container { display: inline-block; margin: 2px; vertical-align: -40%; }
.input-box { width: 60px; margin: 0 auto; text-align:center }
.input-label { margin: -8px auto 0 auto; text-align: center; width: 60px; font-size: 11px; font-weight: bold; }
.percent-symbol { font-size: 175%; margin-left: -10px; margin-right: 5px }



@media all and (max-width:700px) {

    body {
        padding: 0px;
    }
    
    .input-container {
        margin: 0px;
    }
    
    .formula {
        font-size: 100%;
    }

    .content {
        float: none;
        width: 100%;
        padding: 10px 5px; 
    }
    
    .answer { 
        display: none; 
        padding: 0; 
        margin: 5px 0;
        margin-top: -20px; margin-bottom: 30px;
    }
    
    .how {
        display: block;
        margin-left: 0;
        padding: 2px 8px;
    }
    
    #sidebar {
        display: block;
        width: 100%;
        margin-top: 60px;
        margin-left: 0;
        text-align: center;
        margin-bottom: 60px;
    }
    
    #sidebar img {
        max-width: 300px;
        max-height: 600px;
    }
    
    #sidebar-thin {
        display: none;
    }
    #sidebar-wide {
        display: block;
        font-size: 150%;
        text-align: center;
    }    

}