/********************************************** smaller than 980 ***********************************************/ @media screen and (max-width: 980px) { #outerWrapper { width: 95%; } #content { width: auto; padding: 3% 4%; } } @media screen and (max-width: 650px) { #header { height: auto; } #topNavigation { position: static; } #content { width: 100%; float: none; margin: 20px 0px; } } /********************************************** smaller than 650 ***********************************************/ @media screen and (max-width: 650px) { #header { height: auto; } #topNavigation { position: static; } #content { width: auto; float: none; margin: 20px 0; } } /********************************************* smaller than 560 **********************************************/ @media screen and (max-width: 480px) { html { -webkit-text-size-adjust: none; } #header { min-height: 100px; } #outerWrapper #topNavigation { min-height: 50px; } #topNavigation a { font-size: 90%; padding: 10px 8px; } #content { width: auto; float: none; margin: 0; height: 100%; } #content h1 { font-size: 140%; margin: 0px; text-align: left; } form fieldset { width: 240px; } }