body {
    background: #555;

}
#all {
    width: 80%;
    height: auto;
    background: #fff;
    margin-left: auto;
    margin-right: auto;
}
#head{
    height: 60px;
    font-size: 1.25em;
    border-bottom: 1px solid #333;
    padding: .25em;
    text-align: center;
}
#side{
    width: 20%;
    height: 600px;
    background: #2bd1fa;
    float: left;
    box-sizing: border-box;
    border-right: 1px solid #333;
    padding: .25em;
}
#main{
    width: 60%;
    height: 600px;
    background: #B9F572;
    float: left;
}
#right{
    width: 20%;
    height: 600px;
    background: #fae42b;
    float: right;
    box-sizing: border-box;
    border-left: 1px solid #000;
}
#foot{
    clear: both;
    height: 40px;
    font-size: 1.25em;
    background: #ccc;
    border-top: 1px solid #333;
    padding: .25em;
    text-align: center;
}
@media only screen and (min-width: 450px) and (max-width: 700px) {
    body{
        margin: 0;
    }
    #all {
        width: 90%;
    }
    #main{
        width: 80%;
        float: none;
    }
    #right {
        clear: both;
        height: 80px;
        width: 100%;
        border: none;
    }
}
@media only screen and (min-width:0px) and (max-width: 449px) {
    body{
        margin: 0;
    }
    #all {
        width: 100%;
        height: auto;
    }
    #head{
        height:50px;
        font-size:1.1em;
    }
    #side {
        width: 100%;
        float: none;
        height: auto;
        border: none;
    }
    #main{
        width: 100%;
        float: none;
        height: auto;
    }
    #right {
        width: 100%;
        float: none;
        height: auto;
        border: none;
    }
}