/* Default layout for browsers that do not support media queries */
        body { margin: auto; width: 960px; font-size: 108%; }
        h1 { font-size: 138.5%; }
        h2 { font-size: 123.1%; }
        h3 { font-size: 108%; }
        .nav { width: 240px; }
        .main { width: 720px; }
        .long { height: 300px; border: 1px solid; border-color:#CD5C5C; }
        .longer { height: 400px; }
        .short { height: 100px; border: 1px solid; border-color:#CD5C5C; }
        .hangingindent { padding-left: 22px; text-indent: -22px;}
        <!-- -->
        /* iPhone: completely vertical layout */
        @media screen and (max-width: 480px) {
            body { margin: inherit; width: inherit; font-size: 108%; }
            h1 { font-size: 138.5%; }
            h2 { font-size: 123.1%; }
            h3 { font-size: 108%; }
            .yui3-u { display: block; }
            .nav { width: 100%; }
            .main { width: 100%; } 
            .hangingindent { padding-left: 22px; text-indent: -22px;}
        }
        <!-- -->
        /* Fablet to small desktop: side nav, fluid layout */
        @media screen and (min-width: 481px) and (max-width: 960px) {
            body { margin: inherit; width: inherit; font-size: 108%; }
            h1 { font-size: 138.5%; }
            h2 { font-size: 123.1%; }
            h3 { font-size: 108%; }
            .layout { padding-left: 240px; }
            .nav { margin-left: -240px; width: 240px; }
            .main { width: 99%; }
            .long { height: 300px; border: 1px solid; border-color:#CD5C5C; }
            .longer { height: 400px; }
            .short { height: 100px; border: 1px solid; border-color:#CD5C5C; }
            .hangingindent { padding-left: 22px; text-indent: -22px;}
        }
        <!-- -->
        /* Desktop: max out with a centered, 960px fixed width layout */
        @media screen and (min-width: 961px) {
            body { margin: auto; margin-top: 30px; width: 960px; font-size: 108%; }
            h1 { font-size: 138.5%; }
            h2 { font-size: 123.1%; }
            h3 { font-size: 108%; }
            .top { padding-top: 30px; }
            .nav { width: 240px; margin: 30px 10px}
            .main { width: 680px; }
            .long { height: 300px; border: 1px solid; border-color:#CD5C5C; }
            .longer { height: 400px; }
            .short { height: 100px; border: 1px solid; border-color:#CD5C5C; }
            .hangingindent { padding-left: 22px; text-indent: -22px;}
        }