#page,
#access,
#access .menu-header,
div.menu,
#colophon,
#branding,
#main,
#footer {
    /*width: 940px;*/
}

#access {
    max-width: 940px;
}

#main {
    float:left;
}

.entry-content img.size-full {
    border: 1px solid #333;
    padding: 5px;
    -moz-box-shadow: 2px 2px 10px #333;
    -webkit-box-shadow: 2px 2px 10px #333;
}

iframe, object, embed{
    max-width: 100%;
}

.wp-caption {
    max-width: 100% !important; /* When images are too wide for containing element, force them to fit. */
    height: auto; /* Override height to match resized width for correct aspect ratio. */
}

.wp-caption img {
    height: auto;
}

@media screen and (max-width: 1024px) {
    #page {
        margin: 20px auto;
        width: 94%;
        position: relative;
    }

    #access,
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #footer {
        margin: 0 auto;
        width: 100%;
    }

    #branding  {
        overflow:hidden;
    }

    /* added extra lines from the next release of twentyten */
    #content img {
        max-width: 95%;
    }

    /*
    LAYOUT: Two columns
    DESCRIPTION: Responsive.
    940 = 720 + 220
    100% = 76.5957447% + 23.40425535%
    */

    #container {
        float: left;
        margin: 0 -25.5319149% 0 0;
        width: 99%;
    }
    #content {
        width: 66.5957447%;
        /*margin: 0 29.787234% 0 20px;*/
        margin: 0 0 0 0px;
    }

    #sidebar {
        overflow: hidden;
        width: 23.40425535% /* 200px / 940px */
    }

    #site-title, #site-info {
        width:74.4680851% /* 700px / 940px */
    }

    #footer-widget-area .widget-area,
    #site-generator,
    #site-description  {
        width: 23.40425535% /* 200px / 940px */
    }

}


@media screen and (max-width: 660px) {
    body {
        font-size: 90%;
        line-height: 1.7em;
    }
    #page {
        margin: 5px auto;
        width: 90%;
        padding: 0 3%;
    }

    #access,
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #footer {
        margin: 0 auto;
        width: 100%;
    }

    #branding  {
        overflow:hidden;
    }

    #site-title {
        width: 100%;
    }

    #container {
        float: left;
        width: 100%;
        overflow: auto;
        padding: 0;
    }

    #content {
        width: 93%;
        padding-left: 3%;
        margin: 0 0px 0 0px;
    }

    .alignleft, img.alignleft, #content img.alignleft, .alignright, img.alignright, #content img.alignright {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }


    #sidebar  {
        float: left;
        overflow: hidden;
        max-width: 100%;
        width: 100%;
        margin-left: 0;
        margin: 0;
        clear: left;
    }

    #site-generator, #site-description, #site-info, #site-title {
        clear: left;
        float: left;
        width: 95%;
        padding: 0;
        margin: 0;
    }

}

/* landscape */
@media screen and (max-width:480px) and (min-width: 321px) {
    #page {
        margin: 0 auto;
        overflow: auto;
    }

    #access,
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #footer {
        margin: 0 auto;
        width: 100%;
    }

    #branding  {
        overflow:hidden;
    }

    #site-title,
    #site-info,
    #site-description,
    #site-generator   {
        width: 100%;
        clear: left;
        float: left;
        margin-top: 0;
        padding-top:0;
        margin-bottom: 0;
        padding-bottom:0;
    }


    #container {
        float: left;
        width: 100%;
        overflow: auto;
    }
    #content {
        width: 99%;
        margin: 0 0px 0 0px;
    }

    .alignleft, img.alignleft, .alignright, img.alignright {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    /*    #primary,
        #sidebar {
            clear: both;
            float: left;
            overflow: hidden;
            width: 99%;
        }*/
}


/* portrait */
@media screen and (max-width: 320px) {
    #page {
        margin: 0 auto;
        width: 300px;
        overflow: auto;
    }

    #access,
    #access .menu-header,
    div.menu,
    #colophon,
    #branding,
    #main,
    #footer {
        margin: 0 auto;
        width: 100%;
    }

    #branding  {
        overflow:hidden;
    }

    #site-title,
    #site-description,
    #site-info,
    #site-generator   {
        width: 100%;
        clear: left;
        float: left;
        margin-top: 0;
        padding-top:0;
        margin-bottom: 0;
        padding-bottom:0;
    }


    #container {
        float: left;
        width: 100%;
        overflow: auto;
    }
    #content {
        width: 99%;
        margin: 0 0px 0 0px;
    }

    .alignleft, img.alignleft, .alignright, img.alignright {
        clear: both;
        display: block;
        margin-left: auto;
        margin-right: auto;
        float: none;
    }

    #primary,
    #sidebar {
        clear: both;
        float: left;
        overflow: hidden;
        width: 99%;
    }
}