/* Basic styles */ /* These so that LT IE9 can style the HTML5 layout elements */ article,aside,details,figcaption,figure, footer,header,hgroup,menu,nav,section { display:block; } /* Give constant scrollbar to avoid page jumping*/ html { overflow-y:scroll; } body { padding-top:10px; padding-bottom:20px; background-color:gray; } /* Now mobile-first styles for small screens */ #wrap { max-width:95%; padding-right:5px; padding-left:5px; margin-left:auto; margin-right:auto; border: 1px solid #6B7338; padding:10px 10px 5px 10px; border-radius:8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; background-color:#fff;} header { height:70px; border-top:4px solid #CC6600; border-bottom:4px solid #CC6600; } section { width:92%; padding-top:15px; padding-left:20px; padding-right:20px; } nav { height:auto; margin-left:5px; } #leftCol { width:100%; } #rightCol { width:100%; float:left; } footer { width:95%; margin-left:auto; margin-right:auto; } #footerInner { height:45px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; background-color: #6F6F6F; width:95%; margin-left:auto; margin-right:auto; } #ewCopy { color:#fff; padding-left:20px; padding-top:12px; } /* Now we add and vary styles for larger screen sizes */ @media only screen and (min-width: 480px) and (max-width: 890px) { #wrap { width:95%; padding-right:5px; padding-left:5px; } header { } nav { margin-left:10px; } section { } #leftCol { width:72%; float:left; } #rightCol { width:25%; float:right; padding-top:20px; } footer { width:95%; margin-left:auto; margin-right:auto; } } @media only screen and (min-width: 890px) { /* We're using a max width to suit a 1024px screen, with a margin around the content */ #wrap { width:880px; } header { } nav { margin-left:20px; } #leftCol { width:72%; float:left; } #rightCol { width:25%; float:right; padding-top:20px; } footer { width:870px; } }