[totaltec]

Nick,
To do this properly, you need to fully understand what I posted above. And I am not really giving you code samples there, just code examples, you need to determine what is right for your site.

CSS is read vertically by the browser starting from the top. Class definitions placed lower in the document override the ones above, if the same values are redefined in the class.

With the addition of media queries, now you need to take care with what exists within the media query brackets. All of the CSS that you referenced above exists at the top level, the classes are not contained within any brackets.

So anywhere that you place this code should be fine. Since you are defining the queries, the code inside will take precedence at that screen width, overriding the code above that are just general rules. I would create a new line under the closing bracket for #header-area. At the bottom of the file. but it could just as easily exist at the top. There are several theories about how to organize CSS in a logical manner. I prefer general definitions at the top, then more specific definitions below.