@media only screen and (max-device-width: 768px) {
    body {
        font-size:100%
    }

    p {
        font-size: 1.2em;
    }

    th, td {
        font-size: 1.1em;
    }
    
    .wrapper {
        width: 100%;
    }

    .header {
        width:98%;
        padding-left:2%;
        font-size: 1.7em;
        margin-top:0px
    }
        .header .strapline {
            padding:0;
            font-size:0.4em
        }

    .footer {
        font-size: 1.1em;
        margin:0;
        display:block
    }
    .footer .left, .footer .right {
        float: none;
        width:90%;
        text-align:center;
        display:block;
        padding:10px auto;
        margin-bottom:10px
    }

    .data-wrapper {
        border-left:0px;
        width:100%
    }
    .navigation {
        display: none;
    }

    .data-entry-area {
        padding:24px 14px;
        background-color:#fff;
        width:96%
    }
    .data-entry-area 
        .input-textbox {
            -webkit-appearance:none;
            padding:12px 12px;
            color:#fff;
    }


    .input-button {
    
        font-size:1.2em;
        -webkit-appearance: none;
        cursor:pointer;

    }
    .input-button-next {
        background-color:#598527;
        color:#fff;
    }

    .input-button-clear {
        background-color:#999999;
        color:#333;
    }
    .data-entry-area td label {
        float:right;
        width: 90%;
    }

}