@media only screen and (min-width:769px){
    /* Banner image anti-distort rules */
    #bannerDiv img{
        max-height: 100%;
    }
    body.template1_black #bannerDiv, 
    body.template1_building #bannerDiv, 
    body.template1_green #bannerDiv, 
    body.template1_grey #bannerDiv, 
    body.template1_limegreen #bannerDiv, 
    body.template1_pink #bannerDiv, 
    body.template1_purple #bannerDiv{
        height: 215px;
    }

    body.template2_building #bannerDiv,
    body.template2_green #bannerDiv,
    body.template2_grey #bannerDiv,
    body.template2_limegreen #bannerDiv,
    body.template2_pink #bannerDiv,
    body.template2_purple #bannerDiv{
        height: 419;
    }

    body.finance1 #bannerDiv,
    body.finance2 #bannerDiv,
    body.finance3 #bannerDiv,
    body.finance4 #bannerDiv,
    body.sunflower #bannerDiv{
        height:122px;
    }

    body.style2blue #bannerDiv,
    body.style2red #bannerDiv,
    body.style2maroon #bannerDiv,
    body.style2pink #bannerDiv{
        height:486px;	
    }

    body.cat #bannerDiv,
    body.bluebear #bannerDiv,
    body.flowerpink #bannerDiv,
    body.pinkflower #bannerDiv,
    body.fooddiet #bannerDiv{
        height:202px;
    }

    body.pet2 #bannerDiv,
    body.hobbiesblue #bannerDiv,
    body.coolwater #bannerDiv{
        height:192px;	
    }
}

@media only screen and (max-width:768px){

    html, body{
        position: absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }

    body{
        background: #fff;
        margin:0;
    }

    #containerDiv{
        margin-top:0;
        width:calc( 100% - 50px );
    }

    #headerDiv,
    #mainDiv{
        float: none;
        padding:0;
    }

    #mainDiv{
        margin-left:0;
        margin-right:0;
    }

    #headerDiv, #headerDiv h1, #headerDiv h2,
    #headerDiv p, #bannerDiv, #mainDiv, div.post, #menuDiv, #menuDiv #loginDiv{
        width:auto;
        height:auto;
    }

    div.post a.categoryAnchor{
        float: none;
        margin-bottom: 6px;
        display: inline-block;
    }

    #menuDiv{
        margin-top:30px;
        padding-top:20px;
        border-top:1px solid #cccccc;
        line-height: inherit;
        position: static !important;
        float: none;
        padding-left: 0;
        border-left: none;
        margin-left:0;
    }

    #menuDiv #loginDiv{
        position: static !important;
        margin-left:auto;
    }

    #menuDiv #loginDiv ul li{
        display: list-item;
        margin-top:10px;
        margin-left:0;
    }


    /* header bg cases for few templates */
    #headerDiv, #headerDiv h1{
        background-size: 1000px auto;
        overflow: hidden;
    }
    #mainDiv{
        background:none;
    }

    textarea#comment, form.comment-form input#submit{
        border: 1px solid #cccccc;
        max-width: 96%;
    }

    /*#bannerDiv{
        height: auto !important;
    }*/


    #containerDiv{
        background-image: none;
    }

    body.fooddiet #menuDiv,
    body.pet2 #menuDiv,
    body.flowerpink #menuDiv{
        padding: 20px;
    }

    body.cat{
        background: #f1f3ee;
    }

    body.cat div.post,
    body.cat #comments,
    body.cat #aboutMeDiv,
    body.cat #prevPostsDiv,
    body.cat #categoriesDiv{
        margin-left:5px;
        margin-right:5px;
    }

    div.post span.niceURL{
        display: none;
    }

    body.pet2 #menuDiv,
    body.bluebear #menuDiv,
    body.hobbiesblue #menuDiv,
    body.coolwater #menuDiv,
    body.sunflower #menuDiv{
        padding: 20px;
    }

    body.pet2 #bannerDiv,
    body.bluebear #bannerDiv,
    body.hobbiesblue #bannerDiv,
    body.coolwater #bannerDiv,
    body.sunflower #bannerDiv{
        height: auto;
    }



    .finance1 #bannerDiv,
    .finance2 #bannerDiv,
    .finance3 #bannerDiv,
    .finance4 #bannerDiv,
    .sunflower #bannerDiv,
    .pet2 #bannerDiv,
    .hobbiesblue #bannerDiv,
    .coolwater #bannerDiv{
        height: auto;
    }


    body.style2blue #bannerDiv,
    body.style2red #bannerDiv,
    body.style2maroon #bannerDiv,
    body.style2pink #bannerDiv{
        display: none;
    }

    body.style2blue #headerDiv h1,
    body.style2red #headerDiv h1,
    body.style2maroon #headerDiv h1,
    body.style2pink #headerDiv h1{
        margin:0;
    }

    body.style2blue #aboutMeDiv,
    body.style2red #aboutMeDiv,
    body.style2maroon #aboutMeDiv,
    body.style2pink #aboutMeDiv{
        position: static;
        margin-left:0;
        width: auto;
    }

    body.style2blue #headerDiv h2,
    body.style2red #headerDiv h2,
    body.style2maroon #headerDiv h2,
    body.style2pink #headerDiv h2{
        padding-top:10px;
    }

    body.style2blue div.post,
    body.style2red div.post,
    body.style2maroon div.post,
    body.style2pink div.post{
        background-image: none;
    }

    body.style2blue #categoriesDiv li,
    body.style2red #categoriesDiv li,
    body.style2maroon #categoriesDiv li,
    body.style2pink #categoriesDiv li{
        width: auto;
    }

    body.style2blue .menuBox,
    body.style2red .menuBox,
    body.style2maroon .menuBox,
    body.style2pink .menuBox{
        text-align: center;
        padding-bottom:10px;
        border:none !important;
    }

    body.style2blue #loginDiv li a,
    body.style2red #loginDiv li a,
    body.style2maroon #loginDiv li a,
    body.style2pink #loginDiv li a{
        display:inline-block;
    }

    body.style2blue div.post,
    body.style2red div.post,
    body.style2maroon div.post,
    body.style2pink div.post{
        padding-left:0;
        padding-right:0;
    }

    div.post .gallery{
        width:auto;
    }
}